Laporan Praktikum

Tujuan

Tujuan praktikum ini yaitu mahasiswa mampu installasi Laravel, membuat project baru Laravel, mengenal struktur Laravel, konsep MVC laravel

Alat dan Bahan

• Xampp
• Computer/ Laptop
• VS Code
• Node JS, NPM, GIT, Composer

Langkah-Langkah

1. Membuat project Laravel dengan nama Laravel-sisfo
   1. Global Installer
      1. Buat folder / workspace terlebih dahulu
         Buat folder baru di dalam folder htdocs, misalnya dengan nama Laravel.
      2. Buka terminal
         Buka Terminal / Command Prompt / Cmder, lalu masuk ke dalam folder workspace: cd C:\xampp\htdocs\laravel
      3. Install Laravel Installer secara global
         Ketikkan perintah berikut di terminal: composer global require "laravel/installer"
      4. Buat project Laravel baru
         Setelah instalasi selesai, buat project Laravel dengan mengetikkan: laravel new laravel-sisfo

      Setelah perintah selesai dieksekusi, maka folder laravel-sisfo akan dibuat dan berisi file-file project Laravel Anda.

   
   
   2. Composer
      1. Masuk ke folder workspace
         Pastikan terminal berada di folder htdocs (misalnya: C:\xampp\htdocs\laravel).
      2. Ketikkan perintah berikut untuk membuat project Laravel: composer create-project laravel/laravel=^12.0 laravel-sisfo --prefer-dist Perintah ini akan membuat folder baru bernama laravel-sisfo yang berisi project Laravel versi 12.
      3. Masuk ke folder project: cd laravel-sisfo
      4. Jalankan project Laravel menggunakan server bawaan artisan: php artisan serve

      Setelah perintah php artisan serve dijalankan, akan muncul URL seperti http://127.0.0.1:8000. Buka URL tersebut di browser untuk melihat tampilan awal Laravel.

      

2. Konfigurasi Database

   buka file .env kemudian isikan konfigurasi datababse berikut ini.

   DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_sisfo
DB_USERNAME=root
DB_PASSWORD=

3. User Authentication
   1. Install package Laravel/ui

      Buka terminal/cmd kemudian ketikkan perintah berikut ini.
      composer require laravel/ui
      Jika berhasil maka akan tapil seperti gambar berikut ini.

      
   2. Authentication fitur

      Ketikkan berikut pada terminal/cmd php artisan ui bottstrap --auth,
      Jika berhasil maka akan tampil sepert gambar berikut

      
   3. Install dan compile

      Ketikkan perintah npm install && npm run dev untuk mengistall dan compile file -file asset bawaan , dengan perintah di atas maka file-file yang dibutuhkan untuk authentication akan di generate secara otomatis, seperti halaman login, register dan forgot password, selain itu juga akan di generate controller auth dan view seperti gambar berikut.

      

      Selain itu juga digenerate view untuk authentication seperti gambar berikut.

      
   4. Migration

      Ketikkan perintah php artisan migrate maka Laravel akan membuat migration table authentication, jika sebelumnya belum terdapat database maka akan dikonfirmasi dari laravel apakah akan dbuatkan databasenya atau tidak migration berhasil maka akan tampil seperti tampilan berikut.

      

   Jika instalasi berhasil maka aplikasi sisfo sudah memiliki fitur authentication bawaan dari laravel, berikut tampilan fitur authenticatioin dari Laravel

   • Halaman Login

     Akses url http://127.0.0.1:8000/login pada browser maka akan tapil halaman login seperti berikut.

     
   • Halaman Register

     Akses url http://127.0.0.1:8000/register pada browser maka akan tapil halaman login seperti berikut.

     
   • Halaman Dashboard

     Selanjutnya slahkan coba registrasi dan lakukan login ke aplikasi, jika tampila maka akan tampil seperti gambar berikut

     
   • Costum Table User

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

     

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

     selanjutnya buka folder database/migration/ seperti gambar berikut.

     

     Kemudian buka file yang diakhiri costum_table_users.php dan isikan dengan kode program berikut.

     

     Kemudian jalankan perintah php artisan migrate, jika berhasil maka struktur table users telah berubah sesuai dengan kebutuhan aplikasi.

     
   • Seeding User

     Setelah berhasil melakukan costum table users selanjutnya membuat user menggunakan fitur seeding pada Laravel, buat seeder dengan nama AdminSeeder dengan perintah :
     php artisan make:seeder AdminSeeder
     maka secara otomatis file AdminSeeder.php akan dibuat pada folder database/Seeder. Kemudian buka file tersebut dan buat akun admin seperti kode program berikut.

     

     Selanjutnya untuk menjalankan seeding dengan cara menjalankan perintah berikut .
     php artisan db:seed --class=AdminSeeder
     jika berhasil maka akan tampil seperti gambar berikut.

     

     Jika sudah berhasil menambahkan user maka dapat login ke aplikasi menggunakan akun tersebut.

     
4. Templating atau Layouting

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

   • Halaman Login

     Buka file app.blade.php pada folder view/layouts kemudian ganti dengan kode program dibawah ini.

     

     Sehingga tampilan login akan berubah seperti gambar dibawah ini.

     
   • Layout Global

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

     

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

     • Sidebar

       Buat file pada folder layouts dengan nama sidebar.blade.php dan isi dengan kode program berikut.

       
     • Topbar

       Buat file pada folder layouts dengan nama topbar.blade.php dan isi dengan kode program berikut.

       

     Cara penggunaan layouts main.blade.php
     Sebagai contoh kita akan menggunakan view home.blade.php, buka file tersebut dan isikan dengan kode program berikut.

     

     Penjelasan:
     Untuk menggunakan layouts main menggunakan @extends(‘layouts.main’) sehingga seluruh tampilan main.blade.php akan ditampilkan pada view home, untuk menampilkan data judul pada layout main dengan perintah @section(‘judul’)Dashboard @endsection dan konten dengan cara @section(‘judul’)Dashboard @endsection

     Jika konfigurasi layout berhasil maka akan tampil seperti gambar berikut.