\n\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t\t\tTujuan Praktikum\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t <\/a>\n\n\t\t\t\t\t<\/h2> <\/span>\n\n\t\t\t\n <\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\nuntuk menunjukkan kepada para pengguna tentang lebih banyak cara menginstal dan membuat proyek Laravel dengan Composer dan mengatur konfigurasi database dengan benar. Tujuan dari latihan praktikum adalah untuk mengajarkan pengguna bagaimana membuat sistem autentikasi, seperti masuk dan log in menggunakan Laravel UI. Mereka juga akan diajarkan untuk mengubah struktur tabel pengguna sesuai kebutuhan, menambahkan data admin dengan seeder, dan mengintegrasikan template Bootstrap untuk meningkatkan antarmuka menggunakan engine templating Blade di dalam Laravel.<\/p>\n\n\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n \n <\/span>\n\t\t\t\n\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t\t\tLangkah Praktikum\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t <\/a>\n\n\t\t\t\t\t<\/h2> <\/span>\n\n\t\t\t\n <\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n \n <\/span>\n\t\t\t\n\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t\t\t1. Membuat Project Laravel\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t <\/a>\n\n\t\t\t\t\t<\/h2> <\/span>\n\n\t\t\t\n <\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\nMembuat proyek Laravel baru dapat dilakukan dengan beberapa cara, seperti menginstal installer Laravel secara globat atau menggunakan composer. <\/p>\n\n\n\n
\n- Menggunakan Laravel global installer <\/strong><\/li>\n<\/ol>\n\n\n\n
\n- Pertama buat folder \/ workspace terlebih dahulu didalam folder yang diinginkan, disini saya membuat dengan nama laravel<\/li>\n\n\n\n
- Selanjutnya buka terminal \/ cmder dan masuk kedalam workspace<\/li>\n\n\n\n
- Setelah masuk kedalam workspace ketikkan perintah berikut untuk melakukan installasi.<\/li>\n<\/ul>\n\n\n\n
composer global require \"laravel\/installer\"<\/code><\/pre>\n\n\n\n\n- Setelah selesai instalasi, selanjutnya buat project laravel dengan mengetikkan perintah berikut:<\/li>\n<\/ul>\n\n\n\n
laravel new laravel-sisfo <\/code><\/pre>\n\n\n\n 2. Menggunakan Composer<\/strong><\/p>\n\n\n\n\n- Cara kedua yang dapat digunakan untuk membuat project Laravel adalah menggunakan composer, ketikkan perintah berikut pada workspace.<\/li>\n<\/ul>\n\n\n\n
composer create-project laravel\/laravel=^12.0 laravel-sisfo --prefer-dist<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/Screenshot-63-1024x576.png\")
<\/figure>\n\n\n\n\n- untuk menjalankan project dapat menggunakan perintah seperti dibawah ini.<\/li>\n<\/ul>\n\n\n\n
php artisan serve<\/code><\/pre>\n\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n \n <\/span>\n\t\t\t\n\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t\t\t2. Konfigurasi Database\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t <\/a>\n\n\t\t\t\t\t<\/h2> <\/span>\n\n\t\t\t\n <\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\nbukalah file .env <\/strong>kemudian sesuaikan dengan gambar dibawah ini berikut ini.<\/p>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-47.png\")
<\/figure>\n\n\n\nDB_CONNECTION=mysql\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_DATABASE=laravel-sisfo\nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/pre>\n\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n \n <\/span>\n\t\t\t\n\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t\t\t3. User Authentication\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t <\/a>\n\n\t\t\t\t\t<\/h2> <\/span>\n\n\t\t\t\n <\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\nUser authentication ini menggunakan fitur authentication bawaan Laravel dengan langkah langkahnya adalah :<\/p>\n\n\n\n
\n- Install package Laravel\/ui<\/strong> <\/li>\n<\/ul>\n\n\n\n
Buka CMDER lalu ketikkan kode ini<\/p>\n\n\n\n
composer require laravel\/ui<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/Screenshot-64-1024x413.png\")
<\/figure>\n\n\n\n Kemudian, instal fitur Authentication dengan menginstal menggunakan command berikut :<\/p>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-48.png\")
<\/figure>\n\n\n\n ketikkanlah “yes” agar program bisa dijalankan<\/p>\n\n\n\n
\n- Install dan compile menggunakan node.js dan npm<\/strong> <\/li>\n<\/ul>\n\n\n\n
npm install && npm run dev<\/code><\/pre>\n\n\n\n apabila bisa maka akan menunjukkan seperti gambar berikut ini<\/p>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-49.png\")
<\/figure>\n\n\n\n Fungsi menginstall menggunakan node.js dan npm adalah untuk menginstall dan compile file asset bawaan. Dengan perintah di atas, file-file yang dibutuhkan untuk autentikasi, seperti halaman login, registrasi, dan lupa password, akan dibuat secara otomatis. Selain itu, controller autentikasi akan dibuat seperti gambar berikut:<\/p>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-50.png\")
<\/figure>\n\n\n\nSelain controller, juga degenerate view untuk authenctication seperti gambar berikut<\/p>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-51.png\")
<\/figure>\n\n\n\nSetelah semua bahan terinstal, kita perlu migrasi database\/buat database baru sehingga project kita terhubung ke MySQL. Caranya dengan command berikut:<\/p>\n\n\n\n
php artisan migrate<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-52-1024x221.png\")
<\/figure>\n\n\n\nSetelah berhasil melakukan hal tersebut, selanjutnya mengecek halaman login dan register. Berikut cara mengakses laman login<\/strong> dengan menggunakan kode ini<\/p>\n\n\n\nphp artisan serve<\/code><\/pre>\n\n\n\nberikut gambar untuk lamannya<\/p>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/Screenshot-74-1024x576.png\")
<\/figure>\n\n\n\nlangkah selanjutnya adalah mengakses laman register<\/strong>, dengan cara mengakses http:\/\/127.0.0.1:8000\/register<\/a><\/p>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/Screenshot-75-1024x576.png\")
<\/figure>\n\n\n\napabila melakukan registrasi akan masuk ke laman home<\/strong>, akan terlihat seperti ini <\/p>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/Screenshot-76-1024x576.png\")
<\/figure>\n\n\n\nDengan fitur autentikasi Laravel, controller, model, tampilan, dan rute autentikasi akan dibuat secara otomatis. Selain itu, tampilan tampilan jugas sudah menggunakan framework boostrap, sehingga menjadi lebih mudah untuk membuat fitur autentikasi pada aplikasi.<\/p>\n\n\n\n
Authentication Laravel secara otomatis akan mengenerate table Users yang berisi tentang informasi data user, berikut struktur table users.<\/p>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/Screenshot-77-1024x576.png\")
<\/figure>\n\n\n\nUntuk menambahkan beberapa field, seperti username, level, dan status, Anda perlu membuat migration dengan mengetikkan perintah berikut pada terminal atau cmder :<\/p>\n\n\n\n
php artisan make:migration costum_table_users<\/code><\/pre>\n\n\n\njika sudah memasukkan perintah tersebut, maka akan terlihat seperti gambar berikut ini<\/p>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-53-1024x129.png\")
<\/figure>\n\n\n\nsetelah selesai, lihat ke folder database\/migration\/ dan pastikan struktur nya seperti ini :<\/p>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-54.png\")
<\/figure>\n\n\n\nlangkah selanjutnya adalah membuka file yang baru dibuat tadi, jika pada ss an di atas adalah file yg berawalan 2025_….., lalu ketikkanlah kode untuk membuat atribut baru yaitu Username, level, dan status sebagai enum (active, inactive). Masukkan ke method Up untuk kode berikut :<\/p>\n\n\n\n
public function up()\n {\n Schema::table('users', function (Blueprint $table) { \/\/ Ini artinya mengubah struktur tabel users\n $table->string(\"username\")->unique(); \/\/Menambahkan kolom baru bernama username bertipe string\n $table->string(\"level\"); \/\/Menambahkan kolom baru bernama level dengan tipe teks (string).\n $table->enum(\"status\", [\"ACTIVE\", \"INACTIVE\"]); Menambahkan kolom baru bernama status dengan tipe enum, (hanya boleh berisi salah satu dari dua nilai (aktif dan inactive))\n });\n }<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-58.png\")
<\/figure>\n\n\n\nlalu dilanjutkan dengan membuat kode untuk method down<\/p>\n\n\n\n
{\n Schema::table('users', function (Blueprint $table) { \/\/mengubah struktur tabel users.\n $table->dropColumn(\"username\"); \/\/ Menghapus kolom username dari tabel users.\n $table->dropColumn(\"level\"); \/\/ Menghapus kolom level dari tabel users.\n $table->dropColumn(\"status\"); \/\/ Menghapus kolom status dari tabel users.\n });\n }<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-59.png\")
<\/figure>\n\n\n\nKode ini digunakan untuk menghapus kolom<\/strong> dari tabel users<\/code> di database. Biasanya bagian ini diletakkan dalam method down()<\/code> pada migration Laravel, yaitu ketika kita ingin membatalkan perubahan<\/strong> yang sudah dilakukan di method up()<\/code>.<\/p>\n\n\n\nsetelah selesai maka, ketikannlah kode ini pada terminal code editornya<\/p>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-55-1024x134.png\")
<\/figure>\n\n\n\napabila sudah selesai dan berhasil, maka pada database akan berubah dengan sendirinya, yaitu menjadi seperti gambar ini :<\/p>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/Screenshot-81-1024x576.png\")
<\/figure>\n\n\n\nSetelah menambahkan atribut di database, kita akan menambahkan user yang mana sekarang akan menjadi admin dengan menggunakan fitur seeder dari Laravel. Caranya dengan membuat file seeder dengan command berikut. Jangan lupa menjalankannya di terminal:<\/p>\n\n\n\n
php artisan make:seeder AdminSeeder<\/code><\/pre>\n\n\n\napabila telah selesai akan terlihat seperti gambar di bawah<\/p>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-56-1024x145.png\")
<\/figure>\n\n\n\nsetelah dibuat maka langkah selanjutnya adalah pergi ke database\/seeders kemudian pergi ke AdminSeeder.php. lalu ketikkanlah perintah berikut ini :<\/p>\n\n\n\n
public function run() \n{ \n$admin = new \\App\\Models\\User; \/\/ Membuat objek user baru dari model User.\n$admin->username = \"admin\"; \/\/ Mengisi kolom username dengan nilai \"admin\".\n$admin->name = \"Admin Aplikasi\"; \/\/ Mengisi kolom name dengan \"Admin Aplikasi\".\n$admin->email = \"admin@sisfo.com\"; \/\/ Mengisi kolom email dengan \"admin@sisfo.com\".\n$admin->level = json_encode([\"ADMIN\"]); \/\/Mengisi kolom level dengan nilai \"ADMIN\" dalam format JSON.\n$admin->password = \\Hash::make(\"12345678\"); \/\/Mengenkripsi password \"12345678\" menggunakan hash (bcrypt)\n$admin->save(); \/\/ Menyimpan data user admin ke dalam database.\n$this->command->info(\"User Admin berhasil ditambahkan\"); \/\/ Menampilkan pesan di terminal bahwa user admin berhasil ditambahkan.\n} <\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-57.png\")
<\/figure>\n\n\n\nSelanjutnya jalankan seeding dengan cara mengetikkan perintah berikut:<\/p>\n\n\n\n
php artisan db:seed --class=AdminSeeder<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-60-1024x94.png\")
<\/figure>\n\n\n\napabila ini sudah selesai, maka bisa melakukan login menggunakan akun yang dibuat pada kodingan tersebut yaitu admin.<\/p>\n\n\n\n
Setelah itu, kita akan melakukan layout dan templating. Verification Laravel secara otomatis membuat tampilan dashboard aplikasi. Langkah selanjutnya adalah mengkonfigurasi tampilan aplikasi sesuai dengan template yang kita pilih. Dalam kasus ini, kita akan menggunakan template SB Admin 2 dengan framework bootstrap. Anda dapat mengunduh template ini di sini: https:\/\/startbootstrap.com\/theme\/sb-admin-2, kemudian ekstrak, buat folder dengan nama sb_admin di public project Laravel, dan copy paste semua aset ke dalam folder tersebut.<\/p>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-61.png\")
<\/figure>\n\n\n\nselanjutnya adalah melakukan perubahan pada desain dikarenakan telah ditambahkannya folder sb admin 2 tersebut, buka file app.blade.php pada folder view\/layouts kemudian ganti dengan kode program dibawah ini<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"description\" content=\"\">\n <meta name=\"author\" content=\"\">\n <title>Sisfo - Login<\/title>\n\n <!-- Custom fonts for this template-->\n <link href=\"{{ asset('sb_admin\/vendor\/fontawesome-free\/css\/all.min.css') }}\" rel=\"stylesheet\" type=\"text\/css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css?family=Nunito:200,200i,300,300i,\n 400,400i,600,600i,700,700i,800,800i,900,900i\" rel=\"stylesheet\">\n\n <!-- Custom styles for this template-->\n <link href=\"{{ asset('sb_admin\/css\/sb-admin-2.min.css') }}\" rel=\"stylesheet\">\n<\/head>\n\n<body class=\"bg-gradient-primary\">\n\n <div class=\"container\">\n <!-- Outer Row -->\n <div class=\"row justify-content-center\">\n <div class=\"col-xl-6 col-lg-6 col-md-9\">\n <div class=\"card o-hidden border-0 shadow-lg my-5\">\n <div class=\"card-body p-0\">\n <!-- Nested Row within Card Body -->\n <div class=\"row\">\n <!-- <div class=\"col-lg-6 \"><\/div> -->\n <div class=\"col-lg-12 text-center\">\n <div class=\"p-5\">\n <div class=\"text-center\">\n <h1 class=\"h4 text-gray-900 mb-4\">Halaman Login<\/h1>\n <\/div>\n <form class=\"user\" method=\"POST\" action=\"{{ route('login') }}\">\n @csrf\n <div class=\"form-group\">\n <input id=\"email\" type=\"email\"\n class=\"form-control form-control-user @error('email') is-invalid @enderror\"\n name=\"email\" value=\"{{ old('email') }}\" required autocomplete=\"email\" autofocus \/>\n\n @error('email')\n <span class=\"invalid-feedback\" role=\"alert\">\n <strong>{{ $message }}<\/strong>\n <\/span>\n @enderror\n <\/div>\n\n <div class=\"form-group\">\n <input id=\"password\" type=\"password\"\n class=\"form-control form-control-user @error('password') is-invalid @enderror\"\n name=\"password\" required \/>\n\n @error('password')\n <span class=\"invalid-feedback\" role=\"alert\">\n <strong>{{ $message }}<\/strong>\n <\/span>\n @enderror\n <\/div>\n\n <button type=\"submit\" class=\"btn btn-primary btn-user btn-block\">\n Login\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Bootstrap core JavaScript-->\n <script src=\"{{ asset('sb_admin\/vendor\/jquery\/jquery.min.js') }}\"><\/script>\n <script src=\"{{ asset('sb_admin\/vendor\/bootstrap\/js\/bootstrap.bundle.min.js') }}\"><\/script>\n\n <!-- Core plugin JavaScript-->\n <script src=\"{{ asset('sb_admin\/vendor\/jquery-easing\/jquery.easing.min.js') }}\"><\/script>\n\n <!-- Custom scripts for all pages-->\n <script src=\"{{ asset('sb_admin\/js\/sb-admin-2.min.js') }}\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\napabila sudah dimasukkan, maka tampilan dari website laman loginnya akan terlihat seperti gambar ini :<\/p>\n\n\n\n
<\/p>\n\n\n\n
Selanjutnya, kita akan membuat layout global. Layout ini akan digunakan sebagai layout utama aplikasi dan resource untuk view-view lainnya akan diambil disini. Karena app.blade.php sudah digunakan untuk login view, kita harus membuat file dengan nama main.blade.php di folder view\/layouts dan kemudian mengisinya dengan kode program berikut ini :<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"description\" content=\"\">\n <meta name=\"author\" content=\"\">\n\n <title>Sisfo - @yield('judul')<\/title>\n\n <!-- Custom fonts for this template -->\n <link href=\"{{ asset('sb_admin\/vendor\/fontawesome-free\/css\/all.min.css') }}\" rel=\"stylesheet\" type=\"text\/css\">\n <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\">\n\n <!-- Custom styles for this template -->\n <link href=\"{{ asset('sbadmin\/css\/sb-admin-2.min.css') }}\" rel=\"stylesheet\">\n<\/head>\n\n<body id=\"page-top\">\n\n <!-- Page Wrapper -->\n <div id=\"wrapper\">\n\n <!-- Sidebar -->\n @include(\"layouts.sidebar\")\n <!-- End of Sidebar -->\n\n <!-- Content Wrapper -->\n <div id=\"content-wrapper\" class=\"d-flex flex-column\">\n\n <!-- Main Content -->\n <div id=\"content\">\n\n <!-- Topbar -->\n @include('layouts.topbar')\n <!-- End of Topbar -->\n\n <!-- Begin Page Content -->\n <div class=\"container-fluid\">\n\n <!-- Page Heading -->\n <h1 class=\"h3 mb-4 text-gray-800\">@yield(\"judul\")<\/h1>\n @yield(\"konten\")\n\n <\/div>\n <!-- \/.container-fluid -->\n\n <\/div>\n <!-- End of Main Content -->\n\n <!-- Footer -->\n <footer class=\"sticky-footer bg-white\">\n <div class=\"container my-auto\">\n <div class=\"copyright text-center my-auto\">\n <span>Copyright © Sisfo<\/span>\n <\/div>\n <\/div>\n <\/footer>\n <!-- End of Footer -->\n\n <\/div>\n <!-- End of Content Wrapper -->\n\n <\/div>\n <!-- End of Page Wrapper -->\n\n <!-- Scroll to Top Button-->\n <a class=\"scroll-to-top rounded\" href=\"#page-top\">\n <i class=\"fas fa-angle-up\"><\/i>\n <\/a>\n\n <!-- Logout Modal-->\n <div class=\"modal fade\" id=\"logoutModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\">\n <div class=\"modal-dialog\" role=\"document\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\" id=\"exampleModalLabel\">Yakin akan keluar aplikasi?<\/h5>\n <button class=\"close\" type=\"button\" data-dismiss=\"modal\" aria-label=\"Close\">\n <span aria-hidden=\"true\">\u00d7<\/span>\n <\/button>\n <\/div>\n <div class=\"modal-body\">Silahkan klik tombol logout untuk keluar aplikasi<\/div>\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" type=\"button\" data-dismiss=\"modal\">Cancel<\/button>\n <form action=\"{{ route('logout') }}\" method=\"POST\">\n @csrf\n <button class=\"btn btn-primary\" style=\"cursor:pointer\">Logout<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Bootstrap core JavaScript -->\n <script src=\"{{ asset('sbadmin\/vendor\/jquery\/jquery.min.js') }}\"><\/script>\n <script src=\"{{ asset('sbadmin\/vendor\/bootstrap\/js\/bootstrap.bundle.min.js') }}\"><\/script>\n\n <!-- Core plugin JavaScript -->\n <script src=\"{{ asset('sbadmin\/vendor\/jquery-easing\/jquery.easing.min.js') }}\"><\/script>\n\n <!-- Custom scripts for all pages -->\n <script src=\"{{ asset('sbadmin\/js\/sb-admin-2.min.js') }}\"><\/script>\n\n<\/body>\n\n<\/html>\n<\/code><\/pre>\n\n\n\nPada 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(\u2018judul\u2019) dan @yeild(\u2018konten).<\/p>\n\n\n\n
Kemudian kita akan membuat menu sidebar di folder layout. Beri nama file sidebar.blade.php. Isi dengan kode program berikut:<\/p>\n\n\n\n
<ul class=\"navbar-nav bg-gradient-primary sidebar sidebar-dark accordion\" id=\"accordionSidebar\">\n\n <!-- Sidebar - Brand -->\n <a class=\"sidebar-brand d-flex align-items-center justify-content-center\" href=\"#\">\n <div class=\"sidebar-brand-icon rotate-n-15\">\n <i class=\"fas fa-laugh-wink\"><\/i>\n <\/div>\n <div class=\"sidebar-brand-text mx-3\">Sisfo<\/div>\n <\/a>\n\n <!-- Divider -->\n <hr class=\"sidebar-divider my-0\">\n\n <!-- Nav Item - Dashboard -->\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"index.html\">\n <i class=\"fas fa-fw fa-tachometer-alt\"><\/i>\n <span>Dashboard<\/span>\n <\/a>\n <\/li>\n\n <!-- Divider -->\n <hr class=\"sidebar-divider d-none d-md-block\">\n\n <!-- Sidebar Toggler (Sidebar) -->\n <div class=\"text-center d-none d-md-inline\">\n <button class=\"rounded-circle border-0\" id=\"sidebarToggle\"><\/button>\n <\/div>\n\n<\/ul><\/code><\/pre>\n\n\n\nlangkah selanjutnya adalah membuat topbar pada website. Caranya dengan membuat file topbar.blade.php di folder layout. Isi dengan kode program berikut:<\/p>\n\n\n\n
<nav class=\"navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow\">\n\n <!-- Sidebar Toggle (Topbar) -->\n <button id=\"sidebarToggleTop\" class=\"btn btn-link d-md-none rounded-circle mr-3\">\n <i class=\"fa fa-bars\"><\/i>\n <\/button>\n\n <!-- Topbar Navbar -->\n <ul class=\"navbar-nav ml-auto\">\n\n <div class=\"topbar-divider d-none d-sm-block\"><\/div>\n\n <!-- Nav Item - User Information -->\n <li class=\"nav-item dropdown no-arrow\">\n @if (\\Auth::user())\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"userDropdown\" role=\"button\"\n data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"mr-2 d-none d-lg-inline text-gray-600 small\">{{ Auth::user()->name }}<\/span>\n <img class=\"img-profile rounded-circle\"\n src=\"{{ asset('sbadmin\/img\/undraw_profile.svg') }}\">\n <\/a>\n @endif\n\n <!-- Dropdown - User Information -->\n <div class=\"dropdown-menu dropdown-menu-right shadow animated--grow-in\"\n aria-labelledby=\"userDropdown\">\n <a class=\"dropdown-item\" href=\"#\">\n <i class=\"fas fa-user fa-sm fa-fw mr-2 text-gray-400\"><\/i>\n Profile\n <\/a>\n <a class=\"dropdown-item\" href=\"#\">\n <i class=\"fas fa-cogs fa-sm fa-fw mr-2 text-gray-400\"><\/i>\n Settings\n <\/a>\n <div class=\"dropdown-divider\"><\/div>\n <a class=\"dropdown-item\" href=\"#\" data-toggle=\"modal\" data-target=\"#logoutModal\">\n <i class=\"fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400\"><\/i>\n Logout\n <\/a>\n <\/div>\n <\/li>\n <\/ul>\n<\/nav>\n<\/code><\/pre>\n\n\n\nUntuk menggunakan semua tampilan di atas, kita dapat memanggilnya dengan cara menggunakan view home.blade.php dan mengisi dengan kode program berikut:<\/p>\n\n\n\n
@extends(\"layouts.main\")\n@section(\"judul\") Dashboard @endsection\n@section(\"konten\")\n<p>Dashboard<\/p>\n@endsection<\/code><\/pre>\n\n\n\nuntuk hasil akhir dari praktikum kali ini adalah sebagai berikut :<\/p>\n\n\n\n![\"\"](\"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-1024x546.png\")
<\/figure>\n\n\n\n\n\u00a9 2025 Muhammad Galid Avero. All rights reserved. <\/p>\n<\/blockquote>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
by – Muhammad Galid Avero LARAVEL AUTH, CRUD Multi Level User untuk menunjukkan kepada para pengguna tentang lebih banyak cara menginstal dan membuat proyek Laravel dengan Composer dan mengatur konfigurasi database dengan benar. Tujuan dari latihan praktikum adalah untuk mengajarkan pengguna bagaimana membuat sistem autentikasi, seperti masuk dan log in menggunakan Laravel UI. Mereka juga […]<\/p>\n","protected":false},"author":1,"featured_media":1946,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"rttpg_featured_image_url":{"full":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63.png",1916,1022,false],"landscape":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63.png",1916,1022,false],"portraits":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63.png",1916,1022,false],"thumbnail":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-150x150.png",150,150,true],"medium":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-300x160.png",300,160,true],"large":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-1024x546.png",1024,546,true],"1536x1536":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-1536x819.png",1536,819,true],"2048x2048":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63.png",1916,1022,false]},"rttpg_author":{"display_name":"MGalidA","author_link":"https:\/\/galid.infokand23.my.id\/laprakpweb\/author\/mgalida\/"},"rttpg_comment":0,"rttpg_category":"Blog<\/a>","rttpg_excerpt":"by – Muhammad Galid Avero LARAVEL AUTH, CRUD Multi Level User untuk menunjukkan kepada para pengguna tentang lebih banyak cara menginstal dan membuat proyek Laravel dengan Composer dan mengatur konfigurasi database dengan benar. Tujuan dari latihan praktikum adalah untuk mengajarkan pengguna bagaimana membuat sistem autentikasi, seperti masuk dan log in menggunakan Laravel UI. Mereka juga…","_links":{"self":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts\/1898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/comments?post=1898"}],"version-history":[{"count":19,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts\/1898\/revisions"}],"predecessor-version":[{"id":1952,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts\/1898\/revisions\/1952"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/media\/1946"}],"wp:attachment":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/media?parent=1898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/categories?post=1898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/tags?post=1898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t\t\tLangkah Praktikum\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t <\/a>\n\n\t\t\t\t\t<\/h2> <\/span>\n\n\t\t\t\n <\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n \n <\/span>\n\t\t\t\n\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t\t\t1. Membuat Project Laravel\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t <\/a>\n\n\t\t\t\t\t<\/h2> <\/span>\n\n\t\t\t\n <\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\nMembuat proyek Laravel baru dapat dilakukan dengan beberapa cara, seperti menginstal installer Laravel secara globat atau menggunakan composer. <\/p>\n\n\n\n
\n- Menggunakan Laravel global installer <\/strong><\/li>\n<\/ol>\n\n\n\n
\n- Pertama buat folder \/ workspace terlebih dahulu didalam folder yang diinginkan, disini saya membuat dengan nama laravel<\/li>\n\n\n\n
- Selanjutnya buka terminal \/ cmder dan masuk kedalam workspace<\/li>\n\n\n\n
- Setelah masuk kedalam workspace ketikkan perintah berikut untuk melakukan installasi.<\/li>\n<\/ul>\n\n\n\n
composer global require \"laravel\/installer\"<\/code><\/pre>\n\n\n\n\n- Setelah selesai instalasi, selanjutnya buat project laravel dengan mengetikkan perintah berikut:<\/li>\n<\/ul>\n\n\n\n
laravel new laravel-sisfo <\/code><\/pre>\n\n\n\n 2. Menggunakan Composer<\/strong><\/p>\n\n\n\n\n- Cara kedua yang dapat digunakan untuk membuat project Laravel adalah menggunakan composer, ketikkan perintah berikut pada workspace.<\/li>\n<\/ul>\n\n\n\n
composer create-project laravel\/laravel=^12.0 laravel-sisfo --prefer-dist<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\n\n- untuk menjalankan project dapat menggunakan perintah seperti dibawah ini.<\/li>\n<\/ul>\n\n\n\n
php artisan serve<\/code><\/pre>\n\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n \n <\/span>\n\t\t\t\n\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t\t\t2. Konfigurasi Database\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t <\/a>\n\n\t\t\t\t\t<\/h2> <\/span>\n\n\t\t\t\n <\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\nbukalah file .env <\/strong>kemudian sesuaikan dengan gambar dibawah ini berikut ini.<\/p>\n\n\n\n<\/figure>\n\n\n\nDB_CONNECTION=mysql\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_DATABASE=laravel-sisfo\nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/pre>\n\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n \n <\/span>\n\t\t\t\n\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t\t\t3. User Authentication\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t <\/a>\n\n\t\t\t\t\t<\/h2> <\/span>\n\n\t\t\t\n <\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\nUser authentication ini menggunakan fitur authentication bawaan Laravel dengan langkah langkahnya adalah :<\/p>\n\n\n\n
\n- Install package Laravel\/ui<\/strong> <\/li>\n<\/ul>\n\n\n\n
Buka CMDER lalu ketikkan kode ini<\/p>\n\n\n\n
composer require laravel\/ui<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\n Kemudian, instal fitur Authentication dengan menginstal menggunakan command berikut :<\/p>\n\n\n\n<\/figure>\n\n\n\n ketikkanlah “yes” agar program bisa dijalankan<\/p>\n\n\n\n
\n- Install dan compile menggunakan node.js dan npm<\/strong> <\/li>\n<\/ul>\n\n\n\n
npm install && npm run dev<\/code><\/pre>\n\n\n\n apabila bisa maka akan menunjukkan seperti gambar berikut ini<\/p>\n\n\n\n<\/figure>\n\n\n\n Fungsi menginstall menggunakan node.js dan npm adalah untuk menginstall dan compile file asset bawaan. Dengan perintah di atas, file-file yang dibutuhkan untuk autentikasi, seperti halaman login, registrasi, dan lupa password, akan dibuat secara otomatis. Selain itu, controller autentikasi akan dibuat seperti gambar berikut:<\/p>\n\n\n\n<\/figure>\n\n\n\nSelain controller, juga degenerate view untuk authenctication seperti gambar berikut<\/p>\n\n\n\n<\/figure>\n\n\n\nSetelah semua bahan terinstal, kita perlu migrasi database\/buat database baru sehingga project kita terhubung ke MySQL. Caranya dengan command berikut:<\/p>\n\n\n\n
php artisan migrate<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nSetelah berhasil melakukan hal tersebut, selanjutnya mengecek halaman login dan register. Berikut cara mengakses laman login<\/strong> dengan menggunakan kode ini<\/p>\n\n\n\nphp artisan serve<\/code><\/pre>\n\n\n\nberikut gambar untuk lamannya<\/p>\n\n\n\n<\/figure>\n\n\n\nlangkah selanjutnya adalah mengakses laman register<\/strong>, dengan cara mengakses http:\/\/127.0.0.1:8000\/register<\/a><\/p>\n\n\n\n<\/figure>\n\n\n\napabila melakukan registrasi akan masuk ke laman home<\/strong>, akan terlihat seperti ini <\/p>\n\n\n\n<\/figure>\n\n\n\nDengan fitur autentikasi Laravel, controller, model, tampilan, dan rute autentikasi akan dibuat secara otomatis. Selain itu, tampilan tampilan jugas sudah menggunakan framework boostrap, sehingga menjadi lebih mudah untuk membuat fitur autentikasi pada aplikasi.<\/p>\n\n\n\n
Authentication Laravel secara otomatis akan mengenerate table Users yang berisi tentang informasi data user, berikut struktur table users.<\/p>\n\n\n\n<\/figure>\n\n\n\nUntuk menambahkan beberapa field, seperti username, level, dan status, Anda perlu membuat migration dengan mengetikkan perintah berikut pada terminal atau cmder :<\/p>\n\n\n\n
php artisan make:migration costum_table_users<\/code><\/pre>\n\n\n\njika sudah memasukkan perintah tersebut, maka akan terlihat seperti gambar berikut ini<\/p>\n\n\n\n<\/figure>\n\n\n\nsetelah selesai, lihat ke folder database\/migration\/ dan pastikan struktur nya seperti ini :<\/p>\n\n\n\n<\/figure>\n\n\n\nlangkah selanjutnya adalah membuka file yang baru dibuat tadi, jika pada ss an di atas adalah file yg berawalan 2025_….., lalu ketikkanlah kode untuk membuat atribut baru yaitu Username, level, dan status sebagai enum (active, inactive). Masukkan ke method Up untuk kode berikut :<\/p>\n\n\n\n
public function up()\n {\n Schema::table('users', function (Blueprint $table) { \/\/ Ini artinya mengubah struktur tabel users\n $table->string(\"username\")->unique(); \/\/Menambahkan kolom baru bernama username bertipe string\n $table->string(\"level\"); \/\/Menambahkan kolom baru bernama level dengan tipe teks (string).\n $table->enum(\"status\", [\"ACTIVE\", \"INACTIVE\"]); Menambahkan kolom baru bernama status dengan tipe enum, (hanya boleh berisi salah satu dari dua nilai (aktif dan inactive))\n });\n }<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nlalu dilanjutkan dengan membuat kode untuk method down<\/p>\n\n\n\n
{\n Schema::table('users', function (Blueprint $table) { \/\/mengubah struktur tabel users.\n $table->dropColumn(\"username\"); \/\/ Menghapus kolom username dari tabel users.\n $table->dropColumn(\"level\"); \/\/ Menghapus kolom level dari tabel users.\n $table->dropColumn(\"status\"); \/\/ Menghapus kolom status dari tabel users.\n });\n }<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nKode ini digunakan untuk menghapus kolom<\/strong> dari tabel users<\/code> di database. Biasanya bagian ini diletakkan dalam method down()<\/code> pada migration Laravel, yaitu ketika kita ingin membatalkan perubahan<\/strong> yang sudah dilakukan di method up()<\/code>.<\/p>\n\n\n\nsetelah selesai maka, ketikannlah kode ini pada terminal code editornya<\/p>\n\n\n\n<\/figure>\n\n\n\napabila sudah selesai dan berhasil, maka pada database akan berubah dengan sendirinya, yaitu menjadi seperti gambar ini :<\/p>\n\n\n\n<\/figure>\n\n\n\nSetelah menambahkan atribut di database, kita akan menambahkan user yang mana sekarang akan menjadi admin dengan menggunakan fitur seeder dari Laravel. Caranya dengan membuat file seeder dengan command berikut. Jangan lupa menjalankannya di terminal:<\/p>\n\n\n\n
php artisan make:seeder AdminSeeder<\/code><\/pre>\n\n\n\napabila telah selesai akan terlihat seperti gambar di bawah<\/p>\n\n\n\n<\/figure>\n\n\n\nsetelah dibuat maka langkah selanjutnya adalah pergi ke database\/seeders kemudian pergi ke AdminSeeder.php. lalu ketikkanlah perintah berikut ini :<\/p>\n\n\n\n
public function run() \n{ \n$admin = new \\App\\Models\\User; \/\/ Membuat objek user baru dari model User.\n$admin->username = \"admin\"; \/\/ Mengisi kolom username dengan nilai \"admin\".\n$admin->name = \"Admin Aplikasi\"; \/\/ Mengisi kolom name dengan \"Admin Aplikasi\".\n$admin->email = \"admin@sisfo.com\"; \/\/ Mengisi kolom email dengan \"admin@sisfo.com\".\n$admin->level = json_encode([\"ADMIN\"]); \/\/Mengisi kolom level dengan nilai \"ADMIN\" dalam format JSON.\n$admin->password = \\Hash::make(\"12345678\"); \/\/Mengenkripsi password \"12345678\" menggunakan hash (bcrypt)\n$admin->save(); \/\/ Menyimpan data user admin ke dalam database.\n$this->command->info(\"User Admin berhasil ditambahkan\"); \/\/ Menampilkan pesan di terminal bahwa user admin berhasil ditambahkan.\n} <\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nSelanjutnya jalankan seeding dengan cara mengetikkan perintah berikut:<\/p>\n\n\n\n
php artisan db:seed --class=AdminSeeder<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\napabila ini sudah selesai, maka bisa melakukan login menggunakan akun yang dibuat pada kodingan tersebut yaitu admin.<\/p>\n\n\n\n
Setelah itu, kita akan melakukan layout dan templating. Verification Laravel secara otomatis membuat tampilan dashboard aplikasi. Langkah selanjutnya adalah mengkonfigurasi tampilan aplikasi sesuai dengan template yang kita pilih. Dalam kasus ini, kita akan menggunakan template SB Admin 2 dengan framework bootstrap. Anda dapat mengunduh template ini di sini: https:\/\/startbootstrap.com\/theme\/sb-admin-2, kemudian ekstrak, buat folder dengan nama sb_admin di public project Laravel, dan copy paste semua aset ke dalam folder tersebut.<\/p>\n\n\n\n<\/figure>\n\n\n\nselanjutnya adalah melakukan perubahan pada desain dikarenakan telah ditambahkannya folder sb admin 2 tersebut, buka file app.blade.php pada folder view\/layouts kemudian ganti dengan kode program dibawah ini<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"description\" content=\"\">\n <meta name=\"author\" content=\"\">\n <title>Sisfo - Login<\/title>\n\n <!-- Custom fonts for this template-->\n <link href=\"{{ asset('sb_admin\/vendor\/fontawesome-free\/css\/all.min.css') }}\" rel=\"stylesheet\" type=\"text\/css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css?family=Nunito:200,200i,300,300i,\n 400,400i,600,600i,700,700i,800,800i,900,900i\" rel=\"stylesheet\">\n\n <!-- Custom styles for this template-->\n <link href=\"{{ asset('sb_admin\/css\/sb-admin-2.min.css') }}\" rel=\"stylesheet\">\n<\/head>\n\n<body class=\"bg-gradient-primary\">\n\n <div class=\"container\">\n <!-- Outer Row -->\n <div class=\"row justify-content-center\">\n <div class=\"col-xl-6 col-lg-6 col-md-9\">\n <div class=\"card o-hidden border-0 shadow-lg my-5\">\n <div class=\"card-body p-0\">\n <!-- Nested Row within Card Body -->\n <div class=\"row\">\n <!-- <div class=\"col-lg-6 \"><\/div> -->\n <div class=\"col-lg-12 text-center\">\n <div class=\"p-5\">\n <div class=\"text-center\">\n <h1 class=\"h4 text-gray-900 mb-4\">Halaman Login<\/h1>\n <\/div>\n <form class=\"user\" method=\"POST\" action=\"{{ route('login') }}\">\n @csrf\n <div class=\"form-group\">\n <input id=\"email\" type=\"email\"\n class=\"form-control form-control-user @error('email') is-invalid @enderror\"\n name=\"email\" value=\"{{ old('email') }}\" required autocomplete=\"email\" autofocus \/>\n\n @error('email')\n <span class=\"invalid-feedback\" role=\"alert\">\n <strong>{{ $message }}<\/strong>\n <\/span>\n @enderror\n <\/div>\n\n <div class=\"form-group\">\n <input id=\"password\" type=\"password\"\n class=\"form-control form-control-user @error('password') is-invalid @enderror\"\n name=\"password\" required \/>\n\n @error('password')\n <span class=\"invalid-feedback\" role=\"alert\">\n <strong>{{ $message }}<\/strong>\n <\/span>\n @enderror\n <\/div>\n\n <button type=\"submit\" class=\"btn btn-primary btn-user btn-block\">\n Login\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Bootstrap core JavaScript-->\n <script src=\"{{ asset('sb_admin\/vendor\/jquery\/jquery.min.js') }}\"><\/script>\n <script src=\"{{ asset('sb_admin\/vendor\/bootstrap\/js\/bootstrap.bundle.min.js') }}\"><\/script>\n\n <!-- Core plugin JavaScript-->\n <script src=\"{{ asset('sb_admin\/vendor\/jquery-easing\/jquery.easing.min.js') }}\"><\/script>\n\n <!-- Custom scripts for all pages-->\n <script src=\"{{ asset('sb_admin\/js\/sb-admin-2.min.js') }}\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\napabila sudah dimasukkan, maka tampilan dari website laman loginnya akan terlihat seperti gambar ini :<\/p>\n\n\n\n
<\/p>\n\n\n\n
Selanjutnya, kita akan membuat layout global. Layout ini akan digunakan sebagai layout utama aplikasi dan resource untuk view-view lainnya akan diambil disini. Karena app.blade.php sudah digunakan untuk login view, kita harus membuat file dengan nama main.blade.php di folder view\/layouts dan kemudian mengisinya dengan kode program berikut ini :<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"description\" content=\"\">\n <meta name=\"author\" content=\"\">\n\n <title>Sisfo - @yield('judul')<\/title>\n\n <!-- Custom fonts for this template -->\n <link href=\"{{ asset('sb_admin\/vendor\/fontawesome-free\/css\/all.min.css') }}\" rel=\"stylesheet\" type=\"text\/css\">\n <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\">\n\n <!-- Custom styles for this template -->\n <link href=\"{{ asset('sbadmin\/css\/sb-admin-2.min.css') }}\" rel=\"stylesheet\">\n<\/head>\n\n<body id=\"page-top\">\n\n <!-- Page Wrapper -->\n <div id=\"wrapper\">\n\n <!-- Sidebar -->\n @include(\"layouts.sidebar\")\n <!-- End of Sidebar -->\n\n <!-- Content Wrapper -->\n <div id=\"content-wrapper\" class=\"d-flex flex-column\">\n\n <!-- Main Content -->\n <div id=\"content\">\n\n <!-- Topbar -->\n @include('layouts.topbar')\n <!-- End of Topbar -->\n\n <!-- Begin Page Content -->\n <div class=\"container-fluid\">\n\n <!-- Page Heading -->\n <h1 class=\"h3 mb-4 text-gray-800\">@yield(\"judul\")<\/h1>\n @yield(\"konten\")\n\n <\/div>\n <!-- \/.container-fluid -->\n\n <\/div>\n <!-- End of Main Content -->\n\n <!-- Footer -->\n <footer class=\"sticky-footer bg-white\">\n <div class=\"container my-auto\">\n <div class=\"copyright text-center my-auto\">\n <span>Copyright © Sisfo<\/span>\n <\/div>\n <\/div>\n <\/footer>\n <!-- End of Footer -->\n\n <\/div>\n <!-- End of Content Wrapper -->\n\n <\/div>\n <!-- End of Page Wrapper -->\n\n <!-- Scroll to Top Button-->\n <a class=\"scroll-to-top rounded\" href=\"#page-top\">\n <i class=\"fas fa-angle-up\"><\/i>\n <\/a>\n\n <!-- Logout Modal-->\n <div class=\"modal fade\" id=\"logoutModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\">\n <div class=\"modal-dialog\" role=\"document\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\" id=\"exampleModalLabel\">Yakin akan keluar aplikasi?<\/h5>\n <button class=\"close\" type=\"button\" data-dismiss=\"modal\" aria-label=\"Close\">\n <span aria-hidden=\"true\">\u00d7<\/span>\n <\/button>\n <\/div>\n <div class=\"modal-body\">Silahkan klik tombol logout untuk keluar aplikasi<\/div>\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" type=\"button\" data-dismiss=\"modal\">Cancel<\/button>\n <form action=\"{{ route('logout') }}\" method=\"POST\">\n @csrf\n <button class=\"btn btn-primary\" style=\"cursor:pointer\">Logout<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Bootstrap core JavaScript -->\n <script src=\"{{ asset('sbadmin\/vendor\/jquery\/jquery.min.js') }}\"><\/script>\n <script src=\"{{ asset('sbadmin\/vendor\/bootstrap\/js\/bootstrap.bundle.min.js') }}\"><\/script>\n\n <!-- Core plugin JavaScript -->\n <script src=\"{{ asset('sbadmin\/vendor\/jquery-easing\/jquery.easing.min.js') }}\"><\/script>\n\n <!-- Custom scripts for all pages -->\n <script src=\"{{ asset('sbadmin\/js\/sb-admin-2.min.js') }}\"><\/script>\n\n<\/body>\n\n<\/html>\n<\/code><\/pre>\n\n\n\nPada 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(\u2018judul\u2019) dan @yeild(\u2018konten).<\/p>\n\n\n\n
Kemudian kita akan membuat menu sidebar di folder layout. Beri nama file sidebar.blade.php. Isi dengan kode program berikut:<\/p>\n\n\n\n
<ul class=\"navbar-nav bg-gradient-primary sidebar sidebar-dark accordion\" id=\"accordionSidebar\">\n\n <!-- Sidebar - Brand -->\n <a class=\"sidebar-brand d-flex align-items-center justify-content-center\" href=\"#\">\n <div class=\"sidebar-brand-icon rotate-n-15\">\n <i class=\"fas fa-laugh-wink\"><\/i>\n <\/div>\n <div class=\"sidebar-brand-text mx-3\">Sisfo<\/div>\n <\/a>\n\n <!-- Divider -->\n <hr class=\"sidebar-divider my-0\">\n\n <!-- Nav Item - Dashboard -->\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"index.html\">\n <i class=\"fas fa-fw fa-tachometer-alt\"><\/i>\n <span>Dashboard<\/span>\n <\/a>\n <\/li>\n\n <!-- Divider -->\n <hr class=\"sidebar-divider d-none d-md-block\">\n\n <!-- Sidebar Toggler (Sidebar) -->\n <div class=\"text-center d-none d-md-inline\">\n <button class=\"rounded-circle border-0\" id=\"sidebarToggle\"><\/button>\n <\/div>\n\n<\/ul><\/code><\/pre>\n\n\n\nlangkah selanjutnya adalah membuat topbar pada website. Caranya dengan membuat file topbar.blade.php di folder layout. Isi dengan kode program berikut:<\/p>\n\n\n\n
<nav class=\"navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow\">\n\n <!-- Sidebar Toggle (Topbar) -->\n <button id=\"sidebarToggleTop\" class=\"btn btn-link d-md-none rounded-circle mr-3\">\n <i class=\"fa fa-bars\"><\/i>\n <\/button>\n\n <!-- Topbar Navbar -->\n <ul class=\"navbar-nav ml-auto\">\n\n <div class=\"topbar-divider d-none d-sm-block\"><\/div>\n\n <!-- Nav Item - User Information -->\n <li class=\"nav-item dropdown no-arrow\">\n @if (\\Auth::user())\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"userDropdown\" role=\"button\"\n data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"mr-2 d-none d-lg-inline text-gray-600 small\">{{ Auth::user()->name }}<\/span>\n <img class=\"img-profile rounded-circle\"\n src=\"{{ asset('sbadmin\/img\/undraw_profile.svg') }}\">\n <\/a>\n @endif\n\n <!-- Dropdown - User Information -->\n <div class=\"dropdown-menu dropdown-menu-right shadow animated--grow-in\"\n aria-labelledby=\"userDropdown\">\n <a class=\"dropdown-item\" href=\"#\">\n <i class=\"fas fa-user fa-sm fa-fw mr-2 text-gray-400\"><\/i>\n Profile\n <\/a>\n <a class=\"dropdown-item\" href=\"#\">\n <i class=\"fas fa-cogs fa-sm fa-fw mr-2 text-gray-400\"><\/i>\n Settings\n <\/a>\n <div class=\"dropdown-divider\"><\/div>\n <a class=\"dropdown-item\" href=\"#\" data-toggle=\"modal\" data-target=\"#logoutModal\">\n <i class=\"fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400\"><\/i>\n Logout\n <\/a>\n <\/div>\n <\/li>\n <\/ul>\n<\/nav>\n<\/code><\/pre>\n\n\n\nUntuk menggunakan semua tampilan di atas, kita dapat memanggilnya dengan cara menggunakan view home.blade.php dan mengisi dengan kode program berikut:<\/p>\n\n\n\n
@extends(\"layouts.main\")\n@section(\"judul\") Dashboard @endsection\n@section(\"konten\")\n<p>Dashboard<\/p>\n@endsection<\/code><\/pre>\n\n\n\nuntuk hasil akhir dari praktikum kali ini adalah sebagai berikut :<\/p>\n\n\n\n<\/figure>\n\n\n\n\n\u00a9 2025 Muhammad Galid Avero. All rights reserved. <\/p>\n<\/blockquote>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
by – Muhammad Galid Avero LARAVEL AUTH, CRUD Multi Level User untuk menunjukkan kepada para pengguna tentang lebih banyak cara menginstal dan membuat proyek Laravel dengan Composer dan mengatur konfigurasi database dengan benar. Tujuan dari latihan praktikum adalah untuk mengajarkan pengguna bagaimana membuat sistem autentikasi, seperti masuk dan log in menggunakan Laravel UI. Mereka juga […]<\/p>\n","protected":false},"author":1,"featured_media":1946,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"rttpg_featured_image_url":{"full":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63.png",1916,1022,false],"landscape":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63.png",1916,1022,false],"portraits":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63.png",1916,1022,false],"thumbnail":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-150x150.png",150,150,true],"medium":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-300x160.png",300,160,true],"large":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-1024x546.png",1024,546,true],"1536x1536":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-1536x819.png",1536,819,true],"2048x2048":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63.png",1916,1022,false]},"rttpg_author":{"display_name":"MGalidA","author_link":"https:\/\/galid.infokand23.my.id\/laprakpweb\/author\/mgalida\/"},"rttpg_comment":0,"rttpg_category":"Blog<\/a>","rttpg_excerpt":"by – Muhammad Galid Avero LARAVEL AUTH, CRUD Multi Level User untuk menunjukkan kepada para pengguna tentang lebih banyak cara menginstal dan membuat proyek Laravel dengan Composer dan mengatur konfigurasi database dengan benar. Tujuan dari latihan praktikum adalah untuk mengajarkan pengguna bagaimana membuat sistem autentikasi, seperti masuk dan log in menggunakan Laravel UI. Mereka juga…","_links":{"self":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts\/1898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/comments?post=1898"}],"version-history":[{"count":19,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts\/1898\/revisions"}],"predecessor-version":[{"id":1952,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts\/1898\/revisions\/1952"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/media\/1946"}],"wp:attachment":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/media?parent=1898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/categories?post=1898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/tags?post=1898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t\t\t1. Membuat Project Laravel\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t <\/a>\n\n\t\t\t\t\t<\/h2> <\/span>\n\n\t\t\t\n <\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\nMembuat proyek Laravel baru dapat dilakukan dengan beberapa cara, seperti menginstal installer Laravel secara globat atau menggunakan composer. <\/p>\n\n\n\n
\n- Menggunakan Laravel global installer <\/strong><\/li>\n<\/ol>\n\n\n\n
\n- Pertama buat folder \/ workspace terlebih dahulu didalam folder yang diinginkan, disini saya membuat dengan nama laravel<\/li>\n\n\n\n
- Selanjutnya buka terminal \/ cmder dan masuk kedalam workspace<\/li>\n\n\n\n
- Setelah masuk kedalam workspace ketikkan perintah berikut untuk melakukan installasi.<\/li>\n<\/ul>\n\n\n\n
composer global require \"laravel\/installer\"<\/code><\/pre>\n\n\n\n\n- Setelah selesai instalasi, selanjutnya buat project laravel dengan mengetikkan perintah berikut:<\/li>\n<\/ul>\n\n\n\n
laravel new laravel-sisfo <\/code><\/pre>\n\n\n\n 2. Menggunakan Composer<\/strong><\/p>\n\n\n\n\n- Cara kedua yang dapat digunakan untuk membuat project Laravel adalah menggunakan composer, ketikkan perintah berikut pada workspace.<\/li>\n<\/ul>\n\n\n\n
composer create-project laravel\/laravel=^12.0 laravel-sisfo --prefer-dist<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\n\n- untuk menjalankan project dapat menggunakan perintah seperti dibawah ini.<\/li>\n<\/ul>\n\n\n\n
php artisan serve<\/code><\/pre>\n\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n \n <\/span>\n\t\t\t\n\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t\t\t2. Konfigurasi Database\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t <\/a>\n\n\t\t\t\t\t<\/h2> <\/span>\n\n\t\t\t\n <\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\nbukalah file .env <\/strong>kemudian sesuaikan dengan gambar dibawah ini berikut ini.<\/p>\n\n\n\n<\/figure>\n\n\n\nDB_CONNECTION=mysql\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_DATABASE=laravel-sisfo\nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/pre>\n\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n \n <\/span>\n\t\t\t\n\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t\t\t3. User Authentication\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t <\/a>\n\n\t\t\t\t\t<\/h2> <\/span>\n\n\t\t\t\n <\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\nUser authentication ini menggunakan fitur authentication bawaan Laravel dengan langkah langkahnya adalah :<\/p>\n\n\n\n
\n- Install package Laravel\/ui<\/strong> <\/li>\n<\/ul>\n\n\n\n
Buka CMDER lalu ketikkan kode ini<\/p>\n\n\n\n
composer require laravel\/ui<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\n Kemudian, instal fitur Authentication dengan menginstal menggunakan command berikut :<\/p>\n\n\n\n<\/figure>\n\n\n\n ketikkanlah “yes” agar program bisa dijalankan<\/p>\n\n\n\n
\n- Install dan compile menggunakan node.js dan npm<\/strong> <\/li>\n<\/ul>\n\n\n\n
npm install && npm run dev<\/code><\/pre>\n\n\n\n apabila bisa maka akan menunjukkan seperti gambar berikut ini<\/p>\n\n\n\n<\/figure>\n\n\n\n Fungsi menginstall menggunakan node.js dan npm adalah untuk menginstall dan compile file asset bawaan. Dengan perintah di atas, file-file yang dibutuhkan untuk autentikasi, seperti halaman login, registrasi, dan lupa password, akan dibuat secara otomatis. Selain itu, controller autentikasi akan dibuat seperti gambar berikut:<\/p>\n\n\n\n<\/figure>\n\n\n\nSelain controller, juga degenerate view untuk authenctication seperti gambar berikut<\/p>\n\n\n\n<\/figure>\n\n\n\nSetelah semua bahan terinstal, kita perlu migrasi database\/buat database baru sehingga project kita terhubung ke MySQL. Caranya dengan command berikut:<\/p>\n\n\n\n
php artisan migrate<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nSetelah berhasil melakukan hal tersebut, selanjutnya mengecek halaman login dan register. Berikut cara mengakses laman login<\/strong> dengan menggunakan kode ini<\/p>\n\n\n\nphp artisan serve<\/code><\/pre>\n\n\n\nberikut gambar untuk lamannya<\/p>\n\n\n\n<\/figure>\n\n\n\nlangkah selanjutnya adalah mengakses laman register<\/strong>, dengan cara mengakses http:\/\/127.0.0.1:8000\/register<\/a><\/p>\n\n\n\n<\/figure>\n\n\n\napabila melakukan registrasi akan masuk ke laman home<\/strong>, akan terlihat seperti ini <\/p>\n\n\n\n<\/figure>\n\n\n\nDengan fitur autentikasi Laravel, controller, model, tampilan, dan rute autentikasi akan dibuat secara otomatis. Selain itu, tampilan tampilan jugas sudah menggunakan framework boostrap, sehingga menjadi lebih mudah untuk membuat fitur autentikasi pada aplikasi.<\/p>\n\n\n\n
Authentication Laravel secara otomatis akan mengenerate table Users yang berisi tentang informasi data user, berikut struktur table users.<\/p>\n\n\n\n<\/figure>\n\n\n\nUntuk menambahkan beberapa field, seperti username, level, dan status, Anda perlu membuat migration dengan mengetikkan perintah berikut pada terminal atau cmder :<\/p>\n\n\n\n
php artisan make:migration costum_table_users<\/code><\/pre>\n\n\n\njika sudah memasukkan perintah tersebut, maka akan terlihat seperti gambar berikut ini<\/p>\n\n\n\n<\/figure>\n\n\n\nsetelah selesai, lihat ke folder database\/migration\/ dan pastikan struktur nya seperti ini :<\/p>\n\n\n\n<\/figure>\n\n\n\nlangkah selanjutnya adalah membuka file yang baru dibuat tadi, jika pada ss an di atas adalah file yg berawalan 2025_….., lalu ketikkanlah kode untuk membuat atribut baru yaitu Username, level, dan status sebagai enum (active, inactive). Masukkan ke method Up untuk kode berikut :<\/p>\n\n\n\n
public function up()\n {\n Schema::table('users', function (Blueprint $table) { \/\/ Ini artinya mengubah struktur tabel users\n $table->string(\"username\")->unique(); \/\/Menambahkan kolom baru bernama username bertipe string\n $table->string(\"level\"); \/\/Menambahkan kolom baru bernama level dengan tipe teks (string).\n $table->enum(\"status\", [\"ACTIVE\", \"INACTIVE\"]); Menambahkan kolom baru bernama status dengan tipe enum, (hanya boleh berisi salah satu dari dua nilai (aktif dan inactive))\n });\n }<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nlalu dilanjutkan dengan membuat kode untuk method down<\/p>\n\n\n\n
{\n Schema::table('users', function (Blueprint $table) { \/\/mengubah struktur tabel users.\n $table->dropColumn(\"username\"); \/\/ Menghapus kolom username dari tabel users.\n $table->dropColumn(\"level\"); \/\/ Menghapus kolom level dari tabel users.\n $table->dropColumn(\"status\"); \/\/ Menghapus kolom status dari tabel users.\n });\n }<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nKode ini digunakan untuk menghapus kolom<\/strong> dari tabel users<\/code> di database. Biasanya bagian ini diletakkan dalam method down()<\/code> pada migration Laravel, yaitu ketika kita ingin membatalkan perubahan<\/strong> yang sudah dilakukan di method up()<\/code>.<\/p>\n\n\n\nsetelah selesai maka, ketikannlah kode ini pada terminal code editornya<\/p>\n\n\n\n<\/figure>\n\n\n\napabila sudah selesai dan berhasil, maka pada database akan berubah dengan sendirinya, yaitu menjadi seperti gambar ini :<\/p>\n\n\n\n<\/figure>\n\n\n\nSetelah menambahkan atribut di database, kita akan menambahkan user yang mana sekarang akan menjadi admin dengan menggunakan fitur seeder dari Laravel. Caranya dengan membuat file seeder dengan command berikut. Jangan lupa menjalankannya di terminal:<\/p>\n\n\n\n
php artisan make:seeder AdminSeeder<\/code><\/pre>\n\n\n\napabila telah selesai akan terlihat seperti gambar di bawah<\/p>\n\n\n\n<\/figure>\n\n\n\nsetelah dibuat maka langkah selanjutnya adalah pergi ke database\/seeders kemudian pergi ke AdminSeeder.php. lalu ketikkanlah perintah berikut ini :<\/p>\n\n\n\n
public function run() \n{ \n$admin = new \\App\\Models\\User; \/\/ Membuat objek user baru dari model User.\n$admin->username = \"admin\"; \/\/ Mengisi kolom username dengan nilai \"admin\".\n$admin->name = \"Admin Aplikasi\"; \/\/ Mengisi kolom name dengan \"Admin Aplikasi\".\n$admin->email = \"admin@sisfo.com\"; \/\/ Mengisi kolom email dengan \"admin@sisfo.com\".\n$admin->level = json_encode([\"ADMIN\"]); \/\/Mengisi kolom level dengan nilai \"ADMIN\" dalam format JSON.\n$admin->password = \\Hash::make(\"12345678\"); \/\/Mengenkripsi password \"12345678\" menggunakan hash (bcrypt)\n$admin->save(); \/\/ Menyimpan data user admin ke dalam database.\n$this->command->info(\"User Admin berhasil ditambahkan\"); \/\/ Menampilkan pesan di terminal bahwa user admin berhasil ditambahkan.\n} <\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nSelanjutnya jalankan seeding dengan cara mengetikkan perintah berikut:<\/p>\n\n\n\n
php artisan db:seed --class=AdminSeeder<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\napabila ini sudah selesai, maka bisa melakukan login menggunakan akun yang dibuat pada kodingan tersebut yaitu admin.<\/p>\n\n\n\n
Setelah itu, kita akan melakukan layout dan templating. Verification Laravel secara otomatis membuat tampilan dashboard aplikasi. Langkah selanjutnya adalah mengkonfigurasi tampilan aplikasi sesuai dengan template yang kita pilih. Dalam kasus ini, kita akan menggunakan template SB Admin 2 dengan framework bootstrap. Anda dapat mengunduh template ini di sini: https:\/\/startbootstrap.com\/theme\/sb-admin-2, kemudian ekstrak, buat folder dengan nama sb_admin di public project Laravel, dan copy paste semua aset ke dalam folder tersebut.<\/p>\n\n\n\n<\/figure>\n\n\n\nselanjutnya adalah melakukan perubahan pada desain dikarenakan telah ditambahkannya folder sb admin 2 tersebut, buka file app.blade.php pada folder view\/layouts kemudian ganti dengan kode program dibawah ini<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"description\" content=\"\">\n <meta name=\"author\" content=\"\">\n <title>Sisfo - Login<\/title>\n\n <!-- Custom fonts for this template-->\n <link href=\"{{ asset('sb_admin\/vendor\/fontawesome-free\/css\/all.min.css') }}\" rel=\"stylesheet\" type=\"text\/css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css?family=Nunito:200,200i,300,300i,\n 400,400i,600,600i,700,700i,800,800i,900,900i\" rel=\"stylesheet\">\n\n <!-- Custom styles for this template-->\n <link href=\"{{ asset('sb_admin\/css\/sb-admin-2.min.css') }}\" rel=\"stylesheet\">\n<\/head>\n\n<body class=\"bg-gradient-primary\">\n\n <div class=\"container\">\n <!-- Outer Row -->\n <div class=\"row justify-content-center\">\n <div class=\"col-xl-6 col-lg-6 col-md-9\">\n <div class=\"card o-hidden border-0 shadow-lg my-5\">\n <div class=\"card-body p-0\">\n <!-- Nested Row within Card Body -->\n <div class=\"row\">\n <!-- <div class=\"col-lg-6 \"><\/div> -->\n <div class=\"col-lg-12 text-center\">\n <div class=\"p-5\">\n <div class=\"text-center\">\n <h1 class=\"h4 text-gray-900 mb-4\">Halaman Login<\/h1>\n <\/div>\n <form class=\"user\" method=\"POST\" action=\"{{ route('login') }}\">\n @csrf\n <div class=\"form-group\">\n <input id=\"email\" type=\"email\"\n class=\"form-control form-control-user @error('email') is-invalid @enderror\"\n name=\"email\" value=\"{{ old('email') }}\" required autocomplete=\"email\" autofocus \/>\n\n @error('email')\n <span class=\"invalid-feedback\" role=\"alert\">\n <strong>{{ $message }}<\/strong>\n <\/span>\n @enderror\n <\/div>\n\n <div class=\"form-group\">\n <input id=\"password\" type=\"password\"\n class=\"form-control form-control-user @error('password') is-invalid @enderror\"\n name=\"password\" required \/>\n\n @error('password')\n <span class=\"invalid-feedback\" role=\"alert\">\n <strong>{{ $message }}<\/strong>\n <\/span>\n @enderror\n <\/div>\n\n <button type=\"submit\" class=\"btn btn-primary btn-user btn-block\">\n Login\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Bootstrap core JavaScript-->\n <script src=\"{{ asset('sb_admin\/vendor\/jquery\/jquery.min.js') }}\"><\/script>\n <script src=\"{{ asset('sb_admin\/vendor\/bootstrap\/js\/bootstrap.bundle.min.js') }}\"><\/script>\n\n <!-- Core plugin JavaScript-->\n <script src=\"{{ asset('sb_admin\/vendor\/jquery-easing\/jquery.easing.min.js') }}\"><\/script>\n\n <!-- Custom scripts for all pages-->\n <script src=\"{{ asset('sb_admin\/js\/sb-admin-2.min.js') }}\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\napabila sudah dimasukkan, maka tampilan dari website laman loginnya akan terlihat seperti gambar ini :<\/p>\n\n\n\n
<\/p>\n\n\n\n
Selanjutnya, kita akan membuat layout global. Layout ini akan digunakan sebagai layout utama aplikasi dan resource untuk view-view lainnya akan diambil disini. Karena app.blade.php sudah digunakan untuk login view, kita harus membuat file dengan nama main.blade.php di folder view\/layouts dan kemudian mengisinya dengan kode program berikut ini :<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"description\" content=\"\">\n <meta name=\"author\" content=\"\">\n\n <title>Sisfo - @yield('judul')<\/title>\n\n <!-- Custom fonts for this template -->\n <link href=\"{{ asset('sb_admin\/vendor\/fontawesome-free\/css\/all.min.css') }}\" rel=\"stylesheet\" type=\"text\/css\">\n <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\">\n\n <!-- Custom styles for this template -->\n <link href=\"{{ asset('sbadmin\/css\/sb-admin-2.min.css') }}\" rel=\"stylesheet\">\n<\/head>\n\n<body id=\"page-top\">\n\n <!-- Page Wrapper -->\n <div id=\"wrapper\">\n\n <!-- Sidebar -->\n @include(\"layouts.sidebar\")\n <!-- End of Sidebar -->\n\n <!-- Content Wrapper -->\n <div id=\"content-wrapper\" class=\"d-flex flex-column\">\n\n <!-- Main Content -->\n <div id=\"content\">\n\n <!-- Topbar -->\n @include('layouts.topbar')\n <!-- End of Topbar -->\n\n <!-- Begin Page Content -->\n <div class=\"container-fluid\">\n\n <!-- Page Heading -->\n <h1 class=\"h3 mb-4 text-gray-800\">@yield(\"judul\")<\/h1>\n @yield(\"konten\")\n\n <\/div>\n <!-- \/.container-fluid -->\n\n <\/div>\n <!-- End of Main Content -->\n\n <!-- Footer -->\n <footer class=\"sticky-footer bg-white\">\n <div class=\"container my-auto\">\n <div class=\"copyright text-center my-auto\">\n <span>Copyright © Sisfo<\/span>\n <\/div>\n <\/div>\n <\/footer>\n <!-- End of Footer -->\n\n <\/div>\n <!-- End of Content Wrapper -->\n\n <\/div>\n <!-- End of Page Wrapper -->\n\n <!-- Scroll to Top Button-->\n <a class=\"scroll-to-top rounded\" href=\"#page-top\">\n <i class=\"fas fa-angle-up\"><\/i>\n <\/a>\n\n <!-- Logout Modal-->\n <div class=\"modal fade\" id=\"logoutModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\">\n <div class=\"modal-dialog\" role=\"document\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\" id=\"exampleModalLabel\">Yakin akan keluar aplikasi?<\/h5>\n <button class=\"close\" type=\"button\" data-dismiss=\"modal\" aria-label=\"Close\">\n <span aria-hidden=\"true\">\u00d7<\/span>\n <\/button>\n <\/div>\n <div class=\"modal-body\">Silahkan klik tombol logout untuk keluar aplikasi<\/div>\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" type=\"button\" data-dismiss=\"modal\">Cancel<\/button>\n <form action=\"{{ route('logout') }}\" method=\"POST\">\n @csrf\n <button class=\"btn btn-primary\" style=\"cursor:pointer\">Logout<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Bootstrap core JavaScript -->\n <script src=\"{{ asset('sbadmin\/vendor\/jquery\/jquery.min.js') }}\"><\/script>\n <script src=\"{{ asset('sbadmin\/vendor\/bootstrap\/js\/bootstrap.bundle.min.js') }}\"><\/script>\n\n <!-- Core plugin JavaScript -->\n <script src=\"{{ asset('sbadmin\/vendor\/jquery-easing\/jquery.easing.min.js') }}\"><\/script>\n\n <!-- Custom scripts for all pages -->\n <script src=\"{{ asset('sbadmin\/js\/sb-admin-2.min.js') }}\"><\/script>\n\n<\/body>\n\n<\/html>\n<\/code><\/pre>\n\n\n\nPada 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(\u2018judul\u2019) dan @yeild(\u2018konten).<\/p>\n\n\n\n
Kemudian kita akan membuat menu sidebar di folder layout. Beri nama file sidebar.blade.php. Isi dengan kode program berikut:<\/p>\n\n\n\n
<ul class=\"navbar-nav bg-gradient-primary sidebar sidebar-dark accordion\" id=\"accordionSidebar\">\n\n <!-- Sidebar - Brand -->\n <a class=\"sidebar-brand d-flex align-items-center justify-content-center\" href=\"#\">\n <div class=\"sidebar-brand-icon rotate-n-15\">\n <i class=\"fas fa-laugh-wink\"><\/i>\n <\/div>\n <div class=\"sidebar-brand-text mx-3\">Sisfo<\/div>\n <\/a>\n\n <!-- Divider -->\n <hr class=\"sidebar-divider my-0\">\n\n <!-- Nav Item - Dashboard -->\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"index.html\">\n <i class=\"fas fa-fw fa-tachometer-alt\"><\/i>\n <span>Dashboard<\/span>\n <\/a>\n <\/li>\n\n <!-- Divider -->\n <hr class=\"sidebar-divider d-none d-md-block\">\n\n <!-- Sidebar Toggler (Sidebar) -->\n <div class=\"text-center d-none d-md-inline\">\n <button class=\"rounded-circle border-0\" id=\"sidebarToggle\"><\/button>\n <\/div>\n\n<\/ul><\/code><\/pre>\n\n\n\nlangkah selanjutnya adalah membuat topbar pada website. Caranya dengan membuat file topbar.blade.php di folder layout. Isi dengan kode program berikut:<\/p>\n\n\n\n
<nav class=\"navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow\">\n\n <!-- Sidebar Toggle (Topbar) -->\n <button id=\"sidebarToggleTop\" class=\"btn btn-link d-md-none rounded-circle mr-3\">\n <i class=\"fa fa-bars\"><\/i>\n <\/button>\n\n <!-- Topbar Navbar -->\n <ul class=\"navbar-nav ml-auto\">\n\n <div class=\"topbar-divider d-none d-sm-block\"><\/div>\n\n <!-- Nav Item - User Information -->\n <li class=\"nav-item dropdown no-arrow\">\n @if (\\Auth::user())\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"userDropdown\" role=\"button\"\n data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"mr-2 d-none d-lg-inline text-gray-600 small\">{{ Auth::user()->name }}<\/span>\n <img class=\"img-profile rounded-circle\"\n src=\"{{ asset('sbadmin\/img\/undraw_profile.svg') }}\">\n <\/a>\n @endif\n\n <!-- Dropdown - User Information -->\n <div class=\"dropdown-menu dropdown-menu-right shadow animated--grow-in\"\n aria-labelledby=\"userDropdown\">\n <a class=\"dropdown-item\" href=\"#\">\n <i class=\"fas fa-user fa-sm fa-fw mr-2 text-gray-400\"><\/i>\n Profile\n <\/a>\n <a class=\"dropdown-item\" href=\"#\">\n <i class=\"fas fa-cogs fa-sm fa-fw mr-2 text-gray-400\"><\/i>\n Settings\n <\/a>\n <div class=\"dropdown-divider\"><\/div>\n <a class=\"dropdown-item\" href=\"#\" data-toggle=\"modal\" data-target=\"#logoutModal\">\n <i class=\"fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400\"><\/i>\n Logout\n <\/a>\n <\/div>\n <\/li>\n <\/ul>\n<\/nav>\n<\/code><\/pre>\n\n\n\nUntuk menggunakan semua tampilan di atas, kita dapat memanggilnya dengan cara menggunakan view home.blade.php dan mengisi dengan kode program berikut:<\/p>\n\n\n\n
@extends(\"layouts.main\")\n@section(\"judul\") Dashboard @endsection\n@section(\"konten\")\n<p>Dashboard<\/p>\n@endsection<\/code><\/pre>\n\n\n\nuntuk hasil akhir dari praktikum kali ini adalah sebagai berikut :<\/p>\n\n\n\n<\/figure>\n\n\n\n\n\u00a9 2025 Muhammad Galid Avero. All rights reserved. <\/p>\n<\/blockquote>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
by – Muhammad Galid Avero LARAVEL AUTH, CRUD Multi Level User untuk menunjukkan kepada para pengguna tentang lebih banyak cara menginstal dan membuat proyek Laravel dengan Composer dan mengatur konfigurasi database dengan benar. Tujuan dari latihan praktikum adalah untuk mengajarkan pengguna bagaimana membuat sistem autentikasi, seperti masuk dan log in menggunakan Laravel UI. Mereka juga […]<\/p>\n","protected":false},"author":1,"featured_media":1946,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"rttpg_featured_image_url":{"full":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63.png",1916,1022,false],"landscape":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63.png",1916,1022,false],"portraits":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63.png",1916,1022,false],"thumbnail":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-150x150.png",150,150,true],"medium":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-300x160.png",300,160,true],"large":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-1024x546.png",1024,546,true],"1536x1536":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-1536x819.png",1536,819,true],"2048x2048":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63.png",1916,1022,false]},"rttpg_author":{"display_name":"MGalidA","author_link":"https:\/\/galid.infokand23.my.id\/laprakpweb\/author\/mgalida\/"},"rttpg_comment":0,"rttpg_category":"Blog<\/a>","rttpg_excerpt":"by – Muhammad Galid Avero LARAVEL AUTH, CRUD Multi Level User untuk menunjukkan kepada para pengguna tentang lebih banyak cara menginstal dan membuat proyek Laravel dengan Composer dan mengatur konfigurasi database dengan benar. Tujuan dari latihan praktikum adalah untuk mengajarkan pengguna bagaimana membuat sistem autentikasi, seperti masuk dan log in menggunakan Laravel UI. Mereka juga…","_links":{"self":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts\/1898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/comments?post=1898"}],"version-history":[{"count":19,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts\/1898\/revisions"}],"predecessor-version":[{"id":1952,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts\/1898\/revisions\/1952"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/media\/1946"}],"wp:attachment":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/media?parent=1898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/categories?post=1898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/tags?post=1898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- \n
- Pertama buat folder \/ workspace terlebih dahulu didalam folder yang diinginkan, disini saya membuat dengan nama laravel<\/li>\n\n\n\n
- Selanjutnya buka terminal \/ cmder dan masuk kedalam workspace<\/li>\n\n\n\n
- Setelah masuk kedalam workspace ketikkan perintah berikut untuk melakukan installasi.<\/li>\n<\/ul>\n\n\n\n
composer global require \"laravel\/installer\"<\/code><\/pre>\n\n\n\n- \n
- Setelah selesai instalasi, selanjutnya buat project laravel dengan mengetikkan perintah berikut:<\/li>\n<\/ul>\n\n\n\n
laravel new laravel-sisfo <\/code><\/pre>\n\n\n\n2. Menggunakan Composer<\/strong><\/p>\n\n\n\n
- \n
- Cara kedua yang dapat digunakan untuk membuat project Laravel adalah menggunakan composer, ketikkan perintah berikut pada workspace.<\/li>\n<\/ul>\n\n\n\n
composer create-project laravel\/laravel=^12.0 laravel-sisfo --prefer-dist<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\n- \n
- untuk menjalankan project dapat menggunakan perintah seperti dibawah ini.<\/li>\n<\/ul>\n\n\n\n
php artisan serve<\/code><\/pre>\n\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\n <\/span>\n\t\t\t\n\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t\t\t2. Konfigurasi Database\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t <\/a>\n\n\t\t\t\t\t<\/h2> <\/span>\n\n\t\t\t\n <\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\n
bukalah file .env <\/strong>kemudian sesuaikan dengan gambar dibawah ini berikut ini.<\/p>\n\n\n\n
<\/figure>\n\n\n\nDB_CONNECTION=mysql\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_DATABASE=laravel-sisfo\nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/pre>\n\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\n <\/span>\n\t\t\t\n\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t\t\t3. User Authentication\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t <\/a>\n\n\t\t\t\t\t<\/h2> <\/span>\n\n\t\t\t\n <\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\n
User authentication ini menggunakan fitur authentication bawaan Laravel dengan langkah langkahnya adalah :<\/p>\n\n\n\n
- \n
- Install package Laravel\/ui<\/strong> <\/li>\n<\/ul>\n\n\n\n
Buka CMDER lalu ketikkan kode ini<\/p>\n\n\n\n
composer require laravel\/ui<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nKemudian, instal fitur Authentication dengan menginstal menggunakan command berikut :<\/p>\n\n\n\n
<\/figure>\n\n\n\nketikkanlah “yes” agar program bisa dijalankan<\/p>\n\n\n\n
- \n
- Install dan compile menggunakan node.js dan npm<\/strong> <\/li>\n<\/ul>\n\n\n\n
npm install && npm run dev<\/code><\/pre>\n\n\n\napabila bisa maka akan menunjukkan seperti gambar berikut ini<\/p>\n\n\n\n
<\/figure>\n\n\n\nFungsi menginstall menggunakan node.js dan npm adalah untuk menginstall dan compile file asset bawaan. Dengan perintah di atas, file-file yang dibutuhkan untuk autentikasi, seperti halaman login, registrasi, dan lupa password, akan dibuat secara otomatis. Selain itu, controller autentikasi akan dibuat seperti gambar berikut:<\/p>\n\n\n\n
<\/figure>\n\n\n\nSelain controller, juga degenerate view untuk authenctication seperti gambar berikut<\/p>\n\n\n\n
<\/figure>\n\n\n\nSetelah semua bahan terinstal, kita perlu migrasi database\/buat database baru sehingga project kita terhubung ke MySQL. Caranya dengan command berikut:<\/p>\n\n\n\n
php artisan migrate<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nSetelah berhasil melakukan hal tersebut, selanjutnya mengecek halaman login dan register. Berikut cara mengakses laman login<\/strong> dengan menggunakan kode ini<\/p>\n\n\n\n
php artisan serve<\/code><\/pre>\n\n\n\nberikut gambar untuk lamannya<\/p>\n\n\n\n
<\/figure>\n\n\n\nlangkah selanjutnya adalah mengakses laman register<\/strong>, dengan cara mengakses http:\/\/127.0.0.1:8000\/register<\/a><\/p>\n\n\n\n
<\/figure>\n\n\n\napabila melakukan registrasi akan masuk ke laman home<\/strong>, akan terlihat seperti ini <\/p>\n\n\n\n
<\/figure>\n\n\n\nDengan fitur autentikasi Laravel, controller, model, tampilan, dan rute autentikasi akan dibuat secara otomatis. Selain itu, tampilan tampilan jugas sudah menggunakan framework boostrap, sehingga menjadi lebih mudah untuk membuat fitur autentikasi pada aplikasi.<\/p>\n\n\n\n
Authentication Laravel secara otomatis akan mengenerate table Users yang berisi tentang informasi data user, berikut struktur table users.<\/p>\n\n\n\n
<\/figure>\n\n\n\nUntuk menambahkan beberapa field, seperti username, level, dan status, Anda perlu membuat migration dengan mengetikkan perintah berikut pada terminal atau cmder :<\/p>\n\n\n\n
php artisan make:migration costum_table_users<\/code><\/pre>\n\n\n\njika sudah memasukkan perintah tersebut, maka akan terlihat seperti gambar berikut ini<\/p>\n\n\n\n
<\/figure>\n\n\n\nsetelah selesai, lihat ke folder database\/migration\/ dan pastikan struktur nya seperti ini :<\/p>\n\n\n\n
<\/figure>\n\n\n\nlangkah selanjutnya adalah membuka file yang baru dibuat tadi, jika pada ss an di atas adalah file yg berawalan 2025_….., lalu ketikkanlah kode untuk membuat atribut baru yaitu Username, level, dan status sebagai enum (active, inactive). Masukkan ke method Up untuk kode berikut :<\/p>\n\n\n\n
public function up()\n {\n Schema::table('users', function (Blueprint $table) { \/\/ Ini artinya mengubah struktur tabel users\n $table->string(\"username\")->unique(); \/\/Menambahkan kolom baru bernama username bertipe string\n $table->string(\"level\"); \/\/Menambahkan kolom baru bernama level dengan tipe teks (string).\n $table->enum(\"status\", [\"ACTIVE\", \"INACTIVE\"]); Menambahkan kolom baru bernama status dengan tipe enum, (hanya boleh berisi salah satu dari dua nilai (aktif dan inactive))\n });\n }<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nlalu dilanjutkan dengan membuat kode untuk method down<\/p>\n\n\n\n
{\n Schema::table('users', function (Blueprint $table) { \/\/mengubah struktur tabel users.\n $table->dropColumn(\"username\"); \/\/ Menghapus kolom username dari tabel users.\n $table->dropColumn(\"level\"); \/\/ Menghapus kolom level dari tabel users.\n $table->dropColumn(\"status\"); \/\/ Menghapus kolom status dari tabel users.\n });\n }<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nKode ini digunakan untuk menghapus kolom<\/strong> dari tabel
users<\/code> di database. Biasanya bagian ini diletakkan dalam methoddown()<\/code> pada migration Laravel, yaitu ketika kita ingin membatalkan perubahan<\/strong> yang sudah dilakukan di methodup()<\/code>.<\/p>\n\n\n\nsetelah selesai maka, ketikannlah kode ini pada terminal code editornya<\/p>\n\n\n\n
<\/figure>\n\n\n\napabila sudah selesai dan berhasil, maka pada database akan berubah dengan sendirinya, yaitu menjadi seperti gambar ini :<\/p>\n\n\n\n
<\/figure>\n\n\n\nSetelah menambahkan atribut di database, kita akan menambahkan user yang mana sekarang akan menjadi admin dengan menggunakan fitur seeder dari Laravel. Caranya dengan membuat file seeder dengan command berikut. Jangan lupa menjalankannya di terminal:<\/p>\n\n\n\n
php artisan make:seeder AdminSeeder<\/code><\/pre>\n\n\n\napabila telah selesai akan terlihat seperti gambar di bawah<\/p>\n\n\n\n
<\/figure>\n\n\n\nsetelah dibuat maka langkah selanjutnya adalah pergi ke database\/seeders kemudian pergi ke AdminSeeder.php. lalu ketikkanlah perintah berikut ini :<\/p>\n\n\n\n
public function run() \n{ \n$admin = new \\App\\Models\\User; \/\/ Membuat objek user baru dari model User.\n$admin->username = \"admin\"; \/\/ Mengisi kolom username dengan nilai \"admin\".\n$admin->name = \"Admin Aplikasi\"; \/\/ Mengisi kolom name dengan \"Admin Aplikasi\".\n$admin->email = \"admin@sisfo.com\"; \/\/ Mengisi kolom email dengan \"admin@sisfo.com\".\n$admin->level = json_encode([\"ADMIN\"]); \/\/Mengisi kolom level dengan nilai \"ADMIN\" dalam format JSON.\n$admin->password = \\Hash::make(\"12345678\"); \/\/Mengenkripsi password \"12345678\" menggunakan hash (bcrypt)\n$admin->save(); \/\/ Menyimpan data user admin ke dalam database.\n$this->command->info(\"User Admin berhasil ditambahkan\"); \/\/ Menampilkan pesan di terminal bahwa user admin berhasil ditambahkan.\n} <\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nSelanjutnya jalankan seeding dengan cara mengetikkan perintah berikut:<\/p>\n\n\n\n
php artisan db:seed --class=AdminSeeder<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\napabila ini sudah selesai, maka bisa melakukan login menggunakan akun yang dibuat pada kodingan tersebut yaitu admin.<\/p>\n\n\n\n
Setelah itu, kita akan melakukan layout dan templating. Verification Laravel secara otomatis membuat tampilan dashboard aplikasi. Langkah selanjutnya adalah mengkonfigurasi tampilan aplikasi sesuai dengan template yang kita pilih. Dalam kasus ini, kita akan menggunakan template SB Admin 2 dengan framework bootstrap. Anda dapat mengunduh template ini di sini: https:\/\/startbootstrap.com\/theme\/sb-admin-2, kemudian ekstrak, buat folder dengan nama sb_admin di public project Laravel, dan copy paste semua aset ke dalam folder tersebut.<\/p>\n\n\n\n
<\/figure>\n\n\n\nselanjutnya adalah melakukan perubahan pada desain dikarenakan telah ditambahkannya folder sb admin 2 tersebut, buka file app.blade.php pada folder view\/layouts kemudian ganti dengan kode program dibawah ini<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"description\" content=\"\">\n <meta name=\"author\" content=\"\">\n <title>Sisfo - Login<\/title>\n\n <!-- Custom fonts for this template-->\n <link href=\"{{ asset('sb_admin\/vendor\/fontawesome-free\/css\/all.min.css') }}\" rel=\"stylesheet\" type=\"text\/css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css?family=Nunito:200,200i,300,300i,\n 400,400i,600,600i,700,700i,800,800i,900,900i\" rel=\"stylesheet\">\n\n <!-- Custom styles for this template-->\n <link href=\"{{ asset('sb_admin\/css\/sb-admin-2.min.css') }}\" rel=\"stylesheet\">\n<\/head>\n\n<body class=\"bg-gradient-primary\">\n\n <div class=\"container\">\n <!-- Outer Row -->\n <div class=\"row justify-content-center\">\n <div class=\"col-xl-6 col-lg-6 col-md-9\">\n <div class=\"card o-hidden border-0 shadow-lg my-5\">\n <div class=\"card-body p-0\">\n <!-- Nested Row within Card Body -->\n <div class=\"row\">\n <!-- <div class=\"col-lg-6 \"><\/div> -->\n <div class=\"col-lg-12 text-center\">\n <div class=\"p-5\">\n <div class=\"text-center\">\n <h1 class=\"h4 text-gray-900 mb-4\">Halaman Login<\/h1>\n <\/div>\n <form class=\"user\" method=\"POST\" action=\"{{ route('login') }}\">\n @csrf\n <div class=\"form-group\">\n <input id=\"email\" type=\"email\"\n class=\"form-control form-control-user @error('email') is-invalid @enderror\"\n name=\"email\" value=\"{{ old('email') }}\" required autocomplete=\"email\" autofocus \/>\n\n @error('email')\n <span class=\"invalid-feedback\" role=\"alert\">\n <strong>{{ $message }}<\/strong>\n <\/span>\n @enderror\n <\/div>\n\n <div class=\"form-group\">\n <input id=\"password\" type=\"password\"\n class=\"form-control form-control-user @error('password') is-invalid @enderror\"\n name=\"password\" required \/>\n\n @error('password')\n <span class=\"invalid-feedback\" role=\"alert\">\n <strong>{{ $message }}<\/strong>\n <\/span>\n @enderror\n <\/div>\n\n <button type=\"submit\" class=\"btn btn-primary btn-user btn-block\">\n Login\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Bootstrap core JavaScript-->\n <script src=\"{{ asset('sb_admin\/vendor\/jquery\/jquery.min.js') }}\"><\/script>\n <script src=\"{{ asset('sb_admin\/vendor\/bootstrap\/js\/bootstrap.bundle.min.js') }}\"><\/script>\n\n <!-- Core plugin JavaScript-->\n <script src=\"{{ asset('sb_admin\/vendor\/jquery-easing\/jquery.easing.min.js') }}\"><\/script>\n\n <!-- Custom scripts for all pages-->\n <script src=\"{{ asset('sb_admin\/js\/sb-admin-2.min.js') }}\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\napabila sudah dimasukkan, maka tampilan dari website laman loginnya akan terlihat seperti gambar ini :<\/p>\n\n\n\n
<\/p>\n\n\n\n
Selanjutnya, kita akan membuat layout global. Layout ini akan digunakan sebagai layout utama aplikasi dan resource untuk view-view lainnya akan diambil disini. Karena app.blade.php sudah digunakan untuk login view, kita harus membuat file dengan nama main.blade.php di folder view\/layouts dan kemudian mengisinya dengan kode program berikut ini :<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"description\" content=\"\">\n <meta name=\"author\" content=\"\">\n\n <title>Sisfo - @yield('judul')<\/title>\n\n <!-- Custom fonts for this template -->\n <link href=\"{{ asset('sb_admin\/vendor\/fontawesome-free\/css\/all.min.css') }}\" rel=\"stylesheet\" type=\"text\/css\">\n <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\">\n\n <!-- Custom styles for this template -->\n <link href=\"{{ asset('sbadmin\/css\/sb-admin-2.min.css') }}\" rel=\"stylesheet\">\n<\/head>\n\n<body id=\"page-top\">\n\n <!-- Page Wrapper -->\n <div id=\"wrapper\">\n\n <!-- Sidebar -->\n @include(\"layouts.sidebar\")\n <!-- End of Sidebar -->\n\n <!-- Content Wrapper -->\n <div id=\"content-wrapper\" class=\"d-flex flex-column\">\n\n <!-- Main Content -->\n <div id=\"content\">\n\n <!-- Topbar -->\n @include('layouts.topbar')\n <!-- End of Topbar -->\n\n <!-- Begin Page Content -->\n <div class=\"container-fluid\">\n\n <!-- Page Heading -->\n <h1 class=\"h3 mb-4 text-gray-800\">@yield(\"judul\")<\/h1>\n @yield(\"konten\")\n\n <\/div>\n <!-- \/.container-fluid -->\n\n <\/div>\n <!-- End of Main Content -->\n\n <!-- Footer -->\n <footer class=\"sticky-footer bg-white\">\n <div class=\"container my-auto\">\n <div class=\"copyright text-center my-auto\">\n <span>Copyright © Sisfo<\/span>\n <\/div>\n <\/div>\n <\/footer>\n <!-- End of Footer -->\n\n <\/div>\n <!-- End of Content Wrapper -->\n\n <\/div>\n <!-- End of Page Wrapper -->\n\n <!-- Scroll to Top Button-->\n <a class=\"scroll-to-top rounded\" href=\"#page-top\">\n <i class=\"fas fa-angle-up\"><\/i>\n <\/a>\n\n <!-- Logout Modal-->\n <div class=\"modal fade\" id=\"logoutModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\">\n <div class=\"modal-dialog\" role=\"document\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\" id=\"exampleModalLabel\">Yakin akan keluar aplikasi?<\/h5>\n <button class=\"close\" type=\"button\" data-dismiss=\"modal\" aria-label=\"Close\">\n <span aria-hidden=\"true\">\u00d7<\/span>\n <\/button>\n <\/div>\n <div class=\"modal-body\">Silahkan klik tombol logout untuk keluar aplikasi<\/div>\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" type=\"button\" data-dismiss=\"modal\">Cancel<\/button>\n <form action=\"{{ route('logout') }}\" method=\"POST\">\n @csrf\n <button class=\"btn btn-primary\" style=\"cursor:pointer\">Logout<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Bootstrap core JavaScript -->\n <script src=\"{{ asset('sbadmin\/vendor\/jquery\/jquery.min.js') }}\"><\/script>\n <script src=\"{{ asset('sbadmin\/vendor\/bootstrap\/js\/bootstrap.bundle.min.js') }}\"><\/script>\n\n <!-- Core plugin JavaScript -->\n <script src=\"{{ asset('sbadmin\/vendor\/jquery-easing\/jquery.easing.min.js') }}\"><\/script>\n\n <!-- Custom scripts for all pages -->\n <script src=\"{{ asset('sbadmin\/js\/sb-admin-2.min.js') }}\"><\/script>\n\n<\/body>\n\n<\/html>\n<\/code><\/pre>\n\n\n\nPada 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(\u2018judul\u2019) dan @yeild(\u2018konten).<\/p>\n\n\n\n
Kemudian kita akan membuat menu sidebar di folder layout. Beri nama file sidebar.blade.php. Isi dengan kode program berikut:<\/p>\n\n\n\n
<ul class=\"navbar-nav bg-gradient-primary sidebar sidebar-dark accordion\" id=\"accordionSidebar\">\n\n <!-- Sidebar - Brand -->\n <a class=\"sidebar-brand d-flex align-items-center justify-content-center\" href=\"#\">\n <div class=\"sidebar-brand-icon rotate-n-15\">\n <i class=\"fas fa-laugh-wink\"><\/i>\n <\/div>\n <div class=\"sidebar-brand-text mx-3\">Sisfo<\/div>\n <\/a>\n\n <!-- Divider -->\n <hr class=\"sidebar-divider my-0\">\n\n <!-- Nav Item - Dashboard -->\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"index.html\">\n <i class=\"fas fa-fw fa-tachometer-alt\"><\/i>\n <span>Dashboard<\/span>\n <\/a>\n <\/li>\n\n <!-- Divider -->\n <hr class=\"sidebar-divider d-none d-md-block\">\n\n <!-- Sidebar Toggler (Sidebar) -->\n <div class=\"text-center d-none d-md-inline\">\n <button class=\"rounded-circle border-0\" id=\"sidebarToggle\"><\/button>\n <\/div>\n\n<\/ul><\/code><\/pre>\n\n\n\nlangkah selanjutnya adalah membuat topbar pada website. Caranya dengan membuat file topbar.blade.php di folder layout. Isi dengan kode program berikut:<\/p>\n\n\n\n
<nav class=\"navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow\">\n\n <!-- Sidebar Toggle (Topbar) -->\n <button id=\"sidebarToggleTop\" class=\"btn btn-link d-md-none rounded-circle mr-3\">\n <i class=\"fa fa-bars\"><\/i>\n <\/button>\n\n <!-- Topbar Navbar -->\n <ul class=\"navbar-nav ml-auto\">\n\n <div class=\"topbar-divider d-none d-sm-block\"><\/div>\n\n <!-- Nav Item - User Information -->\n <li class=\"nav-item dropdown no-arrow\">\n @if (\\Auth::user())\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"userDropdown\" role=\"button\"\n data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"mr-2 d-none d-lg-inline text-gray-600 small\">{{ Auth::user()->name }}<\/span>\n <img class=\"img-profile rounded-circle\"\n src=\"{{ asset('sbadmin\/img\/undraw_profile.svg') }}\">\n <\/a>\n @endif\n\n <!-- Dropdown - User Information -->\n <div class=\"dropdown-menu dropdown-menu-right shadow animated--grow-in\"\n aria-labelledby=\"userDropdown\">\n <a class=\"dropdown-item\" href=\"#\">\n <i class=\"fas fa-user fa-sm fa-fw mr-2 text-gray-400\"><\/i>\n Profile\n <\/a>\n <a class=\"dropdown-item\" href=\"#\">\n <i class=\"fas fa-cogs fa-sm fa-fw mr-2 text-gray-400\"><\/i>\n Settings\n <\/a>\n <div class=\"dropdown-divider\"><\/div>\n <a class=\"dropdown-item\" href=\"#\" data-toggle=\"modal\" data-target=\"#logoutModal\">\n <i class=\"fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400\"><\/i>\n Logout\n <\/a>\n <\/div>\n <\/li>\n <\/ul>\n<\/nav>\n<\/code><\/pre>\n\n\n\nUntuk menggunakan semua tampilan di atas, kita dapat memanggilnya dengan cara menggunakan view home.blade.php dan mengisi dengan kode program berikut:<\/p>\n\n\n\n
@extends(\"layouts.main\")\n@section(\"judul\") Dashboard @endsection\n@section(\"konten\")\n<p>Dashboard<\/p>\n@endsection<\/code><\/pre>\n\n\n\nuntuk hasil akhir dari praktikum kali ini adalah sebagai berikut :<\/p>\n\n\n\n
<\/figure>\n\n\n\n\n
\u00a9 2025 Muhammad Galid Avero. All rights reserved. <\/p>\n<\/blockquote>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
by – Muhammad Galid Avero LARAVEL AUTH, CRUD Multi Level User untuk menunjukkan kepada para pengguna tentang lebih banyak cara menginstal dan membuat proyek Laravel dengan Composer dan mengatur konfigurasi database dengan benar. Tujuan dari latihan praktikum adalah untuk mengajarkan pengguna bagaimana membuat sistem autentikasi, seperti masuk dan log in menggunakan Laravel UI. Mereka juga […]<\/p>\n","protected":false},"author":1,"featured_media":1946,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"rttpg_featured_image_url":{"full":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63.png",1916,1022,false],"landscape":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63.png",1916,1022,false],"portraits":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63.png",1916,1022,false],"thumbnail":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-150x150.png",150,150,true],"medium":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-300x160.png",300,160,true],"large":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-1024x546.png",1024,546,true],"1536x1536":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63-1536x819.png",1536,819,true],"2048x2048":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/05\/image-63.png",1916,1022,false]},"rttpg_author":{"display_name":"MGalidA","author_link":"https:\/\/galid.infokand23.my.id\/laprakpweb\/author\/mgalida\/"},"rttpg_comment":0,"rttpg_category":"Blog<\/a>","rttpg_excerpt":"by – Muhammad Galid Avero LARAVEL AUTH, CRUD Multi Level User untuk menunjukkan kepada para pengguna tentang lebih banyak cara menginstal dan membuat proyek Laravel dengan Composer dan mengatur konfigurasi database dengan benar. Tujuan dari latihan praktikum adalah untuk mengajarkan pengguna bagaimana membuat sistem autentikasi, seperti masuk dan log in menggunakan Laravel UI. Mereka juga…","_links":{"self":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts\/1898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/comments?post=1898"}],"version-history":[{"count":19,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts\/1898\/revisions"}],"predecessor-version":[{"id":1952,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts\/1898\/revisions\/1952"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/media\/1946"}],"wp:attachment":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/media?parent=1898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/categories?post=1898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/tags?post=1898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Install dan compile menggunakan node.js dan npm<\/strong> <\/li>\n<\/ul>\n\n\n\n
- Install package Laravel\/ui<\/strong> <\/li>\n<\/ul>\n\n\n\n
- untuk menjalankan project dapat menggunakan perintah seperti dibawah ini.<\/li>\n<\/ul>\n\n\n\n
- Cara kedua yang dapat digunakan untuk membuat project Laravel adalah menggunakan composer, ketikkan perintah berikut pada workspace.<\/li>\n<\/ul>\n\n\n\n
- Setelah selesai instalasi, selanjutnya buat project laravel dengan mengetikkan perintah berikut:<\/li>\n<\/ul>\n\n\n\n