Laprak 8

Laravel merupakan kerangka kerja aplikasi web berbasis PHP yang dirancang untuk mempermudah proses pengembangan dengan sintaks yang elegan dan ekspresif. Salah satu fitur utama Laravel adalah kemampuannya dalam menangani sistem autentikasi pengguna secara efisien. Untuk mempercepat proses pengembangan antarmuka autentikasi, Laravel menyediakan paket Laravel UI yang memungkinkan pengembang untuk menghasilkan scaffolding autentikasi secara otomatis. Dengan perintah php artisan ui bootstrap --auth, pengembang dapat menghasilkan tampilan login, registrasi, dan reset kata sandi yang telah terintegrasi dengan kerangka kerja CSS Bootstrap, sehingga menghasilkan antarmuka yang responsif dan konsisten. Proses ini tidak hanya mempercepat pengembangan, tetapi juga memastikan bahwa fitur-fitur autentikasi yang dihasilkan mengikuti standar keamanan dan praktik terbaik dalam pengembangan web modern.

Langkah-Langkah

Pertama, instalasi project laravel seperti di pertemuan sebelumnya, Karena pada pertemuan kemarin menggunakan Laravel Installer, maka untuk menginstall project gunakan command berikut:

laravel new nama_project

Jangan lupa untuk pergi ke direktori yang diinginkan agar tersusun dengan rapih. Proses instalasi akan berhasil jika seperti berikut:

Kemudian, pergi ke direktori project menggunakan code editor masing-masing, lalu cek file .env terkait dengan database. Untuk localhost, akan seperti berikut:

Lalu, instal fitur authentication bawaan Laravel dengan command berikut:

composer require laravel/ui

Jika berhasil maka akan seperti berikut:

Kemudian, kita juga akan menginstal fitur Authentication dengan menginstal menggunakan command berikut:

php artisan ui bootstrap --auth

Jika berhasil maka akan seperti berikut:

Setelah itu, kita perlu menginstall dan mengcompile menggunakan node.js dan npm. Caranya dengan command berikut:

npm install && npm run dev

Jika berhasil akan seperti berikut:

Fungsi menginstall menggunakan node.js dan npm adalah untuk menginstall dan compile file-file asset bawaan, dengan perintah diatas maka file-file yang dibutuhkan untuk authentication akan di generate secara otomatis, seperti halaman login, register dan forgot password, selain itu juga akan gi generate controller auth seperti gambar berikut:

Setelah semua bahan terinstal, kita perlu migrasi database/buat database baru sehingga project kita terhubung ke MySQL. Caranya dengan command berikut:

php artisan migrate

Jika berhasil maka akan menjadi seperti berikut:

Setelah berhasil melakukan hal tersebut, selanjutnya yaitu mengecek halaman login dan register. 

Berikut adalah halaman register 

Selanjutnya silahkan coba registrasi dan lakukan login ke aplikasi, jika berhasil maka akan tampil seperti gambar berikut.

Fitur authentication Laravel akan mengenerate controller, model, view dan route authentication secara otomatis, selain itu juga tampilan view sudah menggunakan framework boostrap sehingga mempermudah dalam membuat fitur authentication pada aplikasi.

Authentication Laravel secara otomatis akan mengenerate table Users yang berisi tentang informasi data user, berikut struktur table users.

Dari stuktur table users diatas maka perlu ditambahken beberapa field yaitu username, level dan status, maka perlu membuat sebuah migration untuk menambahkan field-field diatas, ketikkan perintah berikut pada terminal atau cmd:

php artisan make:migration costum_table_users

Jika telah dimasukkan ke terminal maka hasilnya akan menjadi seperti berikut:

Kemudian pergi ke folder database/migration/ seperti gambar berikut.

Buka file yang telah kita buat tadi, kemudian kita buat atribut baru yaitu Username, level, dan status sebagai enum (active, inactive). Masukkan ke method Up untuk kode berikut:

 Schema::table('users', function (Blueprint $table) { 
            $table->string("username")->unique(); 
            $table->string("level"); 
            $table->enum("status", ["ACTIVE", "INACTIVE"]); 
        }); 

Kemudian masukkan kode berikut ke method down:

Schema::table('users', function (Blueprint $table) { 
            $table->dropColumn("username"); 
            $table->dropColumn("level"); 
            $table->dropColumn("status"); 
        });

Setelah dimasukkan ke kode program, jalankan command berikut di terminal:

php artisan migrate

Jika berhasil, maka database akan bertambah seperti berikut:

Setelah menambahkan atribut di database, kita akan menambahkan user dengan menggunakan fitur seeder dari Laravel. Caranya dengan membuat file seeder dengan command berikut. Jangan lupa menjalankannya di terminal:

php artisan make:seeder AdminSeeder

Jika berhasil maka akan seperti berikut:

Selanjutnya pergi ke database/seeders kemudian pergi ke AdminSeeder.php. Lalu, masukkan kode berikut untuk method run:

$admin = new \App\Models\User; 
$admin->username = "admin"; 
$admin->name = "Admin Aplikasi"; 
$admin->email = "admin@sisfo.com"; 
$admin->level = json_encode(["ADMIN"]); 
$admin->password = \Hash::make("12345678"); 
$admin->save(); 
$this->command->info("User Admin berhasil ditambahkan");

Selanjutnya untuk menjalankan seeding dengan cara menjalankan perintah berikut:

php artisan db:seed --class=AdminSeeder

Jika berhasil maka akan tampil sebagai berikut:

Jika kita test dengan login menggunakan akun yang baru di seeding, makan akan berhasil.

Kemudian, kita akan melakukan templating dan layouting. Authentication Laravel secara otomatis mengenerate tampilan dashboard aplikasi, Langkah selannjutnya kita akan konfigurasi tampilan aplikasi sesuai dengan template yang kita pilih, ada studi kasus ini kita akan menggunakan template SB Admin 2 dengan framework bootstrap, silahkan downloah template pada link https://startbootstrap.com/theme/sb-admin-2 kemudian ekstrak, selanjutnya buat folder pada public project Laravel dengan nama sb_admin dan copy paste kan seluruh asset template sb_admin kedalam folder tersebut.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Sisfo - Login</title>

    <!-- Fonts -->
    <link href="{{asset('sbadmin/vendor/fontawesome-free/css/all.min.css')}}" rel="stylesheet" type="text/css"> 
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> 
    
    <link href="{{asset('sbadmin/css/sb-admin-2.min.css')}}" rel="stylesheet"> 
</head>
<body class="bg-gradient-primary">
    <div class="container">
        <div class="row  justify-content-center">
            <div class="col-xl-6 col-lg-6 col-md-9">
                <div class="card o-hidden border-0 shadow-lg my-5">
                    <div class="card-body p-0">
                        <div class="row">
                            <div class="col-lg-12 text-center">
                                <div class="p-5">
                                    <div class="text-center">
                                        <h1 class="h4 text-gray-900 mb-4">
                                            Halaman login
                                        </h1>
                                    </div>
                                    <form action="{{ route('login') }}" method="POST" class="user">
                                        @csrf
                                        <div class="form-group">
                                            <input id="email" type="email" class="form-control form-control-user @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus/>
                                            @error('email')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                        
                                        <div class="form-group">
                                            <input id="password" type="password" class="form-control form-control-user @error('password') is-invalid @enderror" name="password" value="{{ old('password') }}" required/>
                                            @error('email')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                        <button type="submit" class="btn btn btn-primary btn-user btn-block">Login</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="{{asset('sbadmin/vendor/jquery/jquery.min.js')}}"></script> 
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="{{asset('sbadmin/vendor/jquery-easing/jquery.easing.min.js')}}"></script>
    <script src="{{asset('sbadmin/js/sb-admin-2.min.js')}}"></script>
</body>
</html>

Kemudian buka halaman login. Halaman akan tampil sebagai berikut:

Selanjutnya, kita akan membuat layout global. Layout ini akan digunakan sebagai layout utama aplikasi dan view-view lain akan mengambil resource disini, karena app.blade.php sudah digunakan untuk view login, maka kita perlu membuat layout baru. Caranya dengan membuat file dengan nama main.blade.php pada folder view/layouts dan isikan dengan kode program berikut ini.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Sisfo - @yield('judul')</title>

    <!-- Fonts -->
    <link href="{{asset('sbadmin/vendor/fontawesome-free/css/all.min.css')}}" rel="stylesheet" type="text/css"> 
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> 
    
    <link href="{{asset('sbadmin/css/sb-admin-2.min.css')}}" rel="stylesheet"> 
</head>
<body id="page-top">
    <div id="wrapper">
        @include("layouts.sidebar")
        <div id="content-wrapper" class="d-flex flex-column">
            <div id="content">
                @include("layouts.topbar")
                <div class="container-fluid">
                    @yield("konten")
                </div>
            </div>

            <footer class="sticky-footer bg-white">
                <div class="container my-auto">
                    <div class="copyright text-center my-auto">
                        <span>Copyright &copy; Sisfo</span>
                    </div>
                </div>
            </footer>
        </div>
    </div>

    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>
    
    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Yakin ingin keluar?</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">Silahkan klik tombol logout untuk keluar aplikasi</div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Batal</button>
                    <form action="{{route('logout')}}" method="POST">
                        @csrf
                        <button class="btn btn-primary" style="cursor: pointer;">Logout</button>
                    </form>
                </div>

            </div>
        </div>
    </div>
    <script src="{{asset('sbadmin/vendor/jquery/jquery.min.js')}}"></script> 
    <script src="{{asset('sbadmin/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
    <script src="{{asset('sbadmin/vendor/jquery-easing/jquery.easing.min.js')}}"></script>
    <script src="{{asset('sbadmin/js/sb-admin-2.min.js')}}"></script>
    
    
    
</body>
</html>

Pada layouts main.blade.php diatas layout ini akan memanggil view sidebar.blade.php dan view topbar.blade.php kedalam layout main.blade.php dengan menggunakan perintah @include sehingga tampilan kedua view tersebut akan tampil pada layout main. Selanjutnya juga akan menampilkan data judul dan konten dari view yang akan menggunakan layouts main.blade.php dengan perintah @yeild(‘judul’) dan @yeild(‘konten).

Kemudian kita akan membuat file sidebar di folder layout. Beri nama file sidebar.blade.php. Isi dengan kode program berikut:

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
    <a class="sidebar-brand d-flex align-items-center justify-content-center" href="#">
        <div class="sidebar-brand-icon rotate-n-15">
            <i class="fas fa-laugh-wink"></i>
        </div>
        <div class="sidebar-brand-text mx-3">Sisfo</div>
    </a>
    
    <hr class="sidebar-divider my-0">
    <li class="nav-item">
        <a class="nav-link" href="index.html">
            <i class="fas fa-fw fa-tachometer-alt"></i>
            <span>Dashboard</span>
        </a>
    </li>

    <hr class="sidebar-divider d-none d-md-block">
    <div class="text-center d-none d-md-inline">
        <button class="rounded-circle border-0" id="sidebarToggle"></button>
    </div>
</ul>
    

Selanjutnya kita akan membuat topbar pada website. Caranya dengan membuat file topbar.blade.php di folder layout. Isi dengan kode program berikut:

<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
        <i class="fa fa-bars"></i>
    </button>

    <ul class="navbar-nav ml-auto">
        <div class="topbar-divider d-none d-sm-block"></div>
        <li class="nav-item dropdown no-arrow">
            @if (Auth::user())
                <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="mr-2 d-none d-lg-inline text-gray-600 small">
                        {{Auth::user()->name}}
                    </span>
                    <img class="img-profile rounded-circle" src="{{asset('sbadmin/img/undraw_profile.svg')}}">
                </a>
            @endif
            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
                <a class="dropdown-item" href="#">
                    <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                    Profile
                </a>
                <a class="dropdown-item" href="#">
                    <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
                    Settings
                </a>
                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                    Logout
                </a>
            </div>
        </li>
    </ul>
</nav>

Untuk menggunakan layout diatas, kita dapat memanggilnya dengan cara menggunakan view home.blade.php dan mengisi dengan kode program berikut:

@extends("layouts.main")
@section("judul") Dashboard @endsection
@section("konten")
<p>Dashboard</p>
@endsection

Jika semua langkah dilakukan secara benar, maka cobalah untuk login menggunakan akun admin yang telah di seeding. Jika berhasil, maka tampilannya akan menjadi seperti berikut:

Kesimpulan

Laporan praktikum pemrograman web pertemuan ke-8 ini berfokus pada implementasi operasi dasar pengelolaan data, yang dikenal sebagai CRUD (Create, Read, Update, Delete), dalam konteks pengembangan aplikasi web modern. Secara spesifik, praktikum ini membahas langkah-langkah pembuatan antarmuka pengguna (UI) yang fungsional dan interaktif untuk menjalankan keempat operasi tersebut. Proses pengembangan ini memanfaatkan kekuatan framework PHP populer, Laravel, yang dikenal karena sintaksisnya yang ekspresif, fitur-fitur bawaan yang kaya, dan kemampuannya untuk menyederhanakan tugas-tugas pengembangan web yang umum.