Laporan Praktikum Pekan 9 - Laravel UI Bootstrap dan Templating

Praktikum Pemrograman Web

Tujuan Praktikum

  1. Mempelajari dan mengimplementasikan sistem autentikasi menggunakan Laravel dalam aplikasi nyata.
  2. Mempelajari peneapan konsep templating atau layouting dalam membuat aplikasi yang terstruktur dan konsisten.
  3. Mengimplementasikan fitur CRUD dalam manajemen data aplikasi nyata menggunakan Laravel.

Langkah Kerja Praktikum

Persiapan Sistem:

  1. Buat project laravel baru dengan nama laravel-sisfo menggunakan perintah berikut:
    composer create-project laravel/laravel laravel-sisfo --prefer-dist
  2. Cek apakah project laravel sudah berhasil dibuat dengan menjalankan perintah berikut:
    php artisan serve
  3. Konfigurasi database pada file.env sesuai dengan database yang dibuat atau digunakan.
  4. Tambahkan sistem User Authentication menggunakan fitur authentication laravel.
    • Install package laravel/ui dengan perintah: composer require laravel/ui
    • Tambahkan fitur authetication dengan perintah: php artisan ui bootstrap --auth
    • Install dan compile assets yang dibutuhkan dengan perintah: npm install && npm run dev
  5. Konfigurasi fitur authentication yang akan digunakan.
    • Jalankan proses migrasi untuk membuat tabel yang dibutuhkan dengan perintah: php artisan migrate
    • Halaman login, register, dan dashboard awal dapat diaksel melalui:
      Halaman Login: http://127.0.0.1:8000/login
      Halaman Register: http://127.0.0.1:8000/register
      Halaman Dashboard
    • Tambahkan tabel baru untuk modifikasi tabel user yang berisi field username, level, dan status dengan perintah beriku:
      php artisan make:migration costum_table_users
      Tambahkan field yang dibutuhkan pada file migration yang telah dibuat:
      $table->string("username")->unique();
      $table->string("level");
      $table->enum("status", ["ACTIVE", "INACTIVE"]);
      Lalu jalankan proses migrasi untuk melihat perubahan.
    • Isikan dengan data user awal menggunakan proses seeding, jalankan perintah berikut:
      php artisan make:seeder AdminSeeder
      Tambahkan data user admin pada file seeder yang telah dibuat:
      $admin = new \App\Models\User;
      $admin->username = "admin";
      $admin->name = "Admin Aplikasi";
      $admin->email = "admin@sisfo.com";
      $admin->level = json_encode(["ADMIN"]);
      $admin->password = \Hash::make("12345678");
      $admin->save();
      $this->command->info("User Admin berhasil ditambahkan");
      Jalankan proses seeding ke database dengan perintah: php artisan db:seed --class=AdminSeeder
  6. Tambahkan metode templating atau layouting.
    • konfigurasi tampilan aplikasi menggunakan templaye SB Admin 2 dengan framework Bootstrap pada link berikut https://startbootstrap.com/theme/sb-admin-2
    • Ubah isi file app.blade.php dari folder view/layouts, sehingga tampilan halaman login menjadi seperti ini:
      LaporanEmpat-4
    • Konfigurasi layout global dengan mengubah isi file main.blade.php dari folder view/layouts dan tambahkan file layout sidebar.blade.php dan topbar.blade.php
      Untuk menggunakan layoyut ini, pada file home.blade.php tambahkan kode berikut:
      @extends('layouts.main')
      @section("judul") Dasboard @endsection
      @section('konten')
      <p>dashboard</p>
      @endsection
      Sehingga tampilan halaman dasboard menjadi seperti ini:
      LaporanEmpat-5
  7. Buat fitur CRUD manajemen users
    • Buat UserController dengan perintah php artisan make:controller UserController --resource
    • Tambahkan route resource untuk user pada file web.php, dengan syntax berikut:
      Route::resource('users', UserController::class);
    • Konfigurasi file UserController.
    • Tambahkan fitur create users pada file UserController.php dengan menambahkan syntax berikut:
      return view('user.create');
      Lalu buat view untuk fitur create user dengan nama create.blade.php pada folder view/user, tambahkan syntax berikut:
      @extends('layouts.main')
      @section("judul") Create User @endsection
      @section('konten')
      <p>Konten</p>
      @endsection
      Tambahkan syntax berikut pada file css dan js select2 kedalam file main.blade.php:
      <link href=https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css rel="stylesheet" />
      <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
      <script>
      $(document).ready(function () {
      $('.select2-multiple').select2({
      placeholder: "Pilih",
      allowClear: true
      });
      });
      </script>
      Dan sesuaikan kembali tampilan halaman create user pada file create.blade.php, sehingga output tampilan fitur create menjadi seperti ini:
      LaporanEmpat-6
    • Tambahkan fitur store user pada file UserController.php dengan menambahkan syntax berikut:
      $user = new \App\Models\User;
      $user->name = $request->get('nama');
      $user->username = $request->get('username');
      $user->email = $request->get('email');
      $user->password = \Hash::make($request->get('password'));
      $user->level = json_encode($request->get('level'));
      $user->save();
      return redirect()->route('users.index')->with('status', 'user baru berhasil ditambahkan');
      Fitur ini akan menyimpan data user yang dikirimkan dari form create menggunakan metode post.
    • Tambahkan fitur read users pada file UserController.php dengan menambahkan syntax berikut pada function index():
      $user = \App\Models\User::all;
      return view('users.index', ['user' => $users]);
      Lalu buat view untuk fitur read dengan menambahkan file index.blade.php pada folder view/user.
      Tambahkan syntax berikut pada file main.blade.php karena menggunakan datatables.
      <link href="{{ asset('sbadmin/vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
      <script src="{{ asset('sbadmin/vendor/datatables/jquery.dataTables.min.js') }}"></script>
      <script src="{{ asset('sbadmin/vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>
      <script src="{{ asset('sbadmin/js/demo/datatables-demo.js') }}"></script>
      Tambahkan button untuk membuka form create user pada file index.blade.php, sehingga tampilan halaman index user menjadi seperti ini:
      LaporanEmpat-7
    • Tambahkan fitur update user pada file UserController.php Tambahkan syntax berikut pada function edit()
      $user = \App\Models\User::findOrFail($id);
      return view('user.edit', ['user' => $user]);
      Lalu tambahkan button yang mengarah ke form edit, dengan menambahkan syntax berikut pada file index.blade.php: <a> href="{{ route('users.edit', $user->id) }}" class="btn btn-sm btn-success">Edit</a>
      Pada controller tambahkan syntax berikut pada function edit().
      $user = \App\Models\User::findOrFail($id);
      return view('users.edit', ['user' => $user]);
      Buatkan view edit user dengan membuat file edit.blade.php pada folder view/user, sehingga tampilan form edit menjadi seperti ini:
      LaporanEmpat-8
      Tambahkan syntax berikut pada controller didalam function update():
      $user = \App\Models\User::findOrFail($id);
      $user->name = $request->get('nama');
      $user->level = json_encode($request->get('level'));
      $user->save();
      return redirect()->route('users.index', [$id])->with('status', 'User berhasil diubah');
      Coba simulasikan fitur update dengan mengubah nama user admin yang telah dibuat menjadi seperti gambar.
      LaporanEmpat-9
      Lalu klik tombol simpan untuk memproses perubahan data dan cek pada halaman index user, apakah perubahan data berhasil ditampilkan.
    • Tambahkan fitur delete user pada file UserController.php dengan menambahkan syntax berikut pada function destroy():
      $user = \App\Models\User::findOrFail($id);
      $user->delete();
      return redirect()->route('users.index')->with('status', 'User berhasil dihapus');
      Tambahkan view delete dengan menambahkan tombol atau link untuk memproses penghapusan data user.
      LaporanEmpat-10
      Coba simulasikan fitur delete dengan menghapus salah satu data user yang ada pada tabel user, ketika tombol "delete" diklik, maka akan muncul pop-up konfirmasi aksi.
      LaporanEmpat-11
      Setelah dikonfirmasi, maka data user akan terhapus dan menampilkan user yang tersisa dalam database.
  8. Tambahkan menu user pada sidebar dengan menambahkan syntax berikut pada file sidebar.blade.php:
    <li class="nav-item">
    <a class="nav-link" href="{{ route('users.index') }}">
    <i class="fas fa-fw fa-users"></i>
    <span>Users</span>
    </a>
    </li>
    sehingga tampilan dashboard menjadi seperti ini:
    LaporanEmpat-12

Kesimpulan

Dari praktikum ini kita telah mempelajari bahwa, Laravel menyediakan berbagai fitur yang mempermudah proses pengembangan aplikasi web, seperti authentication, templating, dan manajemen data. Pada praktikum ini, kita mempelajari cara mengimplementasikan sistem autentikasi menggunakan Laravel UI, melakukan konfigurasi layout aplikasi dengan Blade Template dan SB Admin 2, serta membangun fitur CRUD (Create, Read, Update, Delete) untuk manajemen user menggunakan Resource Controller, Migration, Seeding, Routing, dan View. Dengan memanfaatkan fitur-fitur tersebut, pengembangan aplikasi menjadi lebih terstruktur dan efisien.

Repository Github

Repository project ini dapat diakses melalui link berikut:
https://github.com/teguhsmlnna666/WebPortofolio

Kembali