1.1 Tujuan Praktikum
Mahasiswa mampu melakukan:
- Instalasi lingkungan development Laravel
- Membuat project baru Laravel
- Memahami struktur direktori Laravel
- Mengimplementasikan konsep MVC
1.2 Alat dan Bahan
Software
- XAMPP
- Visual Studio Code
- Composer
- Git
Teknologi
- PHP ≥8.2
- Node.js
- MySQL
1.4 Langkah Instalasi
Membuat project Laravel dengan nama Laravel-sisfo-A
Ada beberapa cara yang dapat digunakan untuk membuat project baru Laravel yaitu dengan Global Installer Laravel dan Composer. Pada praktikum ini saya menggunakan metode composer
- Buat folder / workspace didalam folder htdocs, disini saya membuat dengan nama Laravel
-
masuk kedalam cmder, lalu masuk ke dalam folder Laravel tadi. Selanjutnya ketikkan perintah
composer create-project laravel/laravel=^12.0 laravel-sisfo-A --prefer-dist -
untuk menjalankan project dapat menggunakan perintah
php artisan serve
Konfigurasi Database
Buka file .env kemudian isikan konfigurasi database berikut ini.
User Authentication
User authentication pada studi kasus ini menggunakan fitur authentication bawaan Laravel
Buka terminal/cmd kemudian ketikkan perintah berikut
composer require laravel/ui
Ketikkan perintah berikut di terminal/cmdphp artisan ui bootstrap --auth, jika berhasil maka akan tampil
Ketikkan perintah npm install && npm run dev untuk menginstall dan compile file-file asset bawaan, dengan perintah tersebut maka file-file yang dibutuhkan untuk authentication akan digenerate secara otomatis, seperti halaman login, register dan forgot password.
Ketikkan perintah php artisan migrate maka Laravel akan membuat migration table authentication, jika sebelumnya belum terdapat database maka akan di konfirmasi dari laravel apakah akan dibuatkan databasenya atau tidak.
Akses url http://127.0.0.1:8000/login pada browser maka akan tampil halaman login
Akses url http://127.0.0.1:8000/register pada browser maka akan tampil halaman register
Authentication Laravel secara otomatis akan mengenerate table Users yang berisi tentang informasi data user, berikut struktur table users.
Dari struktur table user tersebut maka perlu ditambahkan beberapa field seperti username, level dan status, maka perlu membuat sebuah migration untuk menambahkan field-field tersebut. maka ketikkan php artisan make:migration costum_table_users maka folder database menjadi
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 pada kode program berikut.
<?php
namespace Database\Seeders;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
class AdminSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
$admin = new \App\Models\User;
$admin->username = "admin";
$admin->name = "Admin Aplikasi";
$admin->email = "admin@sisfo.com";
$admin->level = json_encode(["ADMIN"]);
$admin->password = \Hash::make("12345678");
$admin->save();
$this->command->info("User Admin berhasil ditambahkan");
}
}
Selanjutnya untuk menjalankan seeding dengan cara menjalankan perintah berikut php artisan db:seed --class=AdminSeeder jika berhasil maka akan muncul
Templating atau Layouting
Authentication Laravel secara otomatis mengenerate tampilan dashboard aplikasi, langkah selanjutnya lakukakan konfigurasi tampilan aplikasi sesuai dengan template yang dipilih. Pada studi kasus ini menggunakan templalte SB Admin 2 dengan framework bootstrap
Link Unduh:
https://startbootstrap.com/theme/sb-admin-2
Setelah didownload, ekstrak dan buat folder public project Laravel dengan nama sbadmin dan salin seluruh asset template sbadmin kedalam folder tersebut.
Buka file app.blade.php pada folder view / layout kemudian ganti dengan kode program dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Sisfo - Login</title>
<link href="{{asset('sbadmin/vendor/fontawesomefree/css/all.min.css')}}" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300, 300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="{{asset('sbadmin/css/sb-admin-2.min.css')}}" rel="stylesheet">
</head>
<body class="bg-gradient-primary">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-6 col-lg-6 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<div class="row">
<div class="col-lg-12 text-center">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Halaman Login</h1>
</div>
<form class="user" method="POST" action="{{ route('login') }}">
@csrf
<div class="form-group">
<input id="email" type="email" class="form-control form-control-user @error('email') is-invalid @enderror"
name="email" value="{{ old('email') }}" required autocomplete="email" autofocus/>
@error('email')
<span class="invalidfeedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-group">
<input id="password" type="password" class="form-control form-control-user @error('password') is-invalid @enderror"
name="password" value="{{ old('password') }}" required />
@error('password')
<span class="invalidfeedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<button type="submit" class="btn btn-primary btn-user btn-block">
login
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{{asset('sbadmin/vendor/jquery/jquery.min.js')}}"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="{{asset('sbadmin/vendor/jquery
easing/jquery.easing.min.js')}}"></script>
<script src="{{asset('sbadmin/js/sb-admin-2.min.js')}}"></script>
</body>
</html>
Gambar Halaman Login Aplikasi
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 diperlukan sebuah layout baru. Buat file dengan nama main.blade.php pada folder view/layout dan isikan kode program berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Sisfo - @yield('judul')</title>
<!-- Custom fonts for this template-->
<link href="{{asset('sbadmin/vendor/fontawesomefree/css/all.min.css')}}" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="{{asset('sbadmin/css/sb-admin-2.min.css')}}" rel="stylesheet">
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
@include("layouts.sidebar")
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
@include('layouts.topbar')
<!-- End of Topbar -->
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- Page Heading -->
<h1 class="h3 mb-4 text-gray-800">@yield("judul")</h1>
@yield("konten")
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © Sisfo</span>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Yakin akan keluar aplikasi ?</h5>
<button class="close" type="button" datadismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Silahkan klik tombol logout untuk keluar aplikasi</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" datadismiss="modal">Cancel</button>
<form action="{{route("logout")}}" method="POST">
@csrf
<button class="btn btn-primary" style="cursor:pointer">Logout</button>
</form>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="{{asset('sbadmin/vendor/jquery/jquery.min.js')}}"></script>
<script src="{{asset('sbadmin/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<!-- Core plugin JavaScript-->
<script src="{{asset('sbadmin/vendor/jqueryeasing/jquery.easing.min.js')}}"></script>
<!-- Custom scripts for all pages-->
<script src="{{asset('sbadmin/js/sb-admin-2.min.js')}}"></script>
</body>
</html>
Pada layout main.blade.php 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 layout main.blade.php dengan perintah @yeild('judul') dan @yeild('konten').
Buat file pada folder layout dengan nama sidebar.blade.php dan isi dengan kode program berikut.
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="#">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-laugh-wink"></i>
</div>
<div class="sidebar-brand-text mx-3">Sisfo</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item">
<a class="nav-link" href="index.html">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>
Gambar Sidebar
Buat file pada folder layout dengan nama topbar.blade.php dan isi dengan kode program berikut.
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static
top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<div class="topbar-divider d-none d-sm-block"></div>
<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow">
@if (\Auth::user())
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" ariaexpanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">{{ Auth::user()->name }}</span>
<img class="img-profile rounded-circle"
src="{{ asset('sbadmin/img/undraw_profile.svg')}}">
</a>
@endif
<!-- Dropdown - User Information -->
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray 400"></i>
Profile
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray 400"></i>
Settings
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>
Gambar Sidebar
Cara penggunaan layout main.blade.php
Sebagai contoh menggunakan view home.blade.php, buka file tersebut dan isikan kode program berikut.
@extends('layouts.main')
@section("judul") Dasboard @endsection
@section('konten')
<P>dashboard</P>
@endsection
Jika konfigurasi layout berhasil makan akan tampil seperti pada gambar
Komentar (2)
Tinggalkan Komentar
Anonn
20 Jun 2025 08:45Aloo
Anon
27 May 2025 17:25Laprak 3