LARAVEL8 jetstream Livewire CRUD
1. pasang Laravel https://laravel.com/
via composer
composer global require laravel/installer
2. pasang jetsream https://jetstream.laravel.com/
composer require laravel/jetstream
3. pasang livewire
php artisan jetstream:install livewire
4. buat database di phpmyadmin
kemudian konfigurasi config database di .env
6. pasang npm
npm isntall
6 compile npm
npm run dev
7. migarasi database
php artisan migrate
8. biuat model
php artisan make:model Member -m
9. lanjut buat databaase
10. pasang Livewire
php artisan make:livewire members
Download admin lte
Buka index.html
1. Buat folder assets di public
2. Copas folder dist dan plugins ke assets
3. Buat file master.blade.php di layouts
4. Copy index.html dan paste ke file master.blade.php
Edit index.htm
Bladding template
"{{asset('assets/Pluggins..... ')}}"
"{{asset('assets/dist.... ')}}"
Faham dan Membuat template
1. Ada navbar
2. Ada Sidebar
3. footer
4. konten
Konsepnya seperti buku
Ada sampul ada catatan tiap halaman yang isinya beda
Template akan sama , yang beda adalah pada kontenya
Class navbar
Edit navbar master.blade.php
• cut script navbar
• Buat folder components pada resources/layouts kemudian paste
• pada master blade @include('layouts.components.navbar')
Class aside
Main Sidebar Container
Buat file siderbar.blade.php
• cut aside pada master.blade.php
• paste di sidebar.blade.php
• @include('layouts.components.sidebar')
Konten
<!-- Main content -->
Hapus div class row dua duanya (mai row)
____________________________________________
web.php
Route::get('/', [PagesController::class, 'index']);
Route::get('/about', [PagesController::class, 'about']);
Route::get('/student', [StudentController::class, 'index']);
---------------------------------------------------------------------------------
layout
main.blade.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>@yield('title')</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="{{ url('/')}}">Home</a>
<a class=" nav-link" href="{{ url('/about')}}">about</a>
<a class="nav-link" href="{{ url ('/mahasiswa')}}">Mahasiswa</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</div>
</nav>
@yield('container')
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->
</body>
</html>
____________________________________________________________________
index.php
@extends('layouts/main')
@section('title','Coba Lagi')
@section('container')
<div class="container">
<div class="row">
<div class="col-10">
<h1 class="mt-3">Hello, world!</h1>
</div>
</div>
</div>
@endsection
about.php
@extends('layouts/main')
@section('title','about')
@section('container')
<div class="container">
<div class="row">
<div class="col-10">
<h1 class="mt-3">Tentang {{$nama}}</h1>
</div>
</div>
</div>
@endsection
________________________________________________________________
bikin pagesController untuk halaman static seperti home, about, faq
php artisan make:controller pagesController
bikin controller khusus untuk student buat ngelola student
php artisan make:controller StudentController --resource
(supaya artisannya membuat metode metode spesifik seperti CRUD)
0 Komentar