LARAVEL8 jetstream Livewire CRUD, catatan belajar mandiri


Berikut catatan pribadi Nate  saat mengenal laravel 


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)

LihatTutupKomentar