Laravel 8

Membuat Framework menggunakan Laravel 8

BAB 1
INSTALASI LARAVEL MELALUI COMPOSER
&
MEMBUAT FOLDER LARAVEL

*Note : Pastikan Laptop atau komputer memiliki koneksi internet saat melakukan installasi
composer dan Laravel.

1.1.Instalasi Software Composer

1) Download software composer di getcomposer.org
 Klik pada bagian kotak download untuk mendownload composer.exe yang akan
digunakan.

2) Lakukan instalasi software composer.exe yang sudah di download

Pilih Install for all users

3) Pilih, Next untuk melanjutkan ke Langkah instalasi selanjutnya. Abaikan checkbox
Developer Mode.
4) Lakukan setting penyimpanan file php dari composer di dalam folder. Jika Anda
menggunakan XAMMP, lokasi file ini akan berada di C:\xampp\php

Chek pada bagian add this PHP to your path, lalu klik Next.
5) Abaikan Proxy Setting dan langsung klik Next untuk Langkah penginstallan
selanjutnya.

6) Pastikan pengaturan penginstalan sudah benar, lalu klik Install dan tunggu sampai
proses instalasi selesai.
 *Note : Jika anda menggunakan Xampp sebagai tempat penyimpanan PHP pastikan
pengaturan yang tertera untuk penyimpanan sudah benar berada di dalam file Xampp
(abaikan contoh yang ada di gambar)
7) Setelah proses instalasi selesai, bukan CMD (Command Prompt). Tekan tombol
Win+R lalu ketikan CMD.

8) Ketik Composer pada command prompt dan tekan Enter. Jika instalasi berjalan
dengan sukses, Anda akan melihat gambar seperti di bawah ini!
1.2.Instalasi Laravel 8
1) Ketikkan perintah composer global require Laravel/installer di CMD dan tunggu
hingga proses instalasi selesai.

2) Setelah proses instalasi selesai, ketikan perintah Laravel pada CMD untuk mengetest
apa Laravel sudah terinstal atau belum.

Jika saat perintah Laravel dimasukkan muncul tampilan seperti diatas maka Laravel
sudah berhasil terinstal dan siap untuk digunakkan.
3) Selanjutnya cara membuat folder atau project Laravel, Langkah pertama ada
tentukkan directory penyimpanan yang akan digunakkan untuk menyimpan folder
Laravel. Jika anda menggunakan xampp, disarankan untuk menyimpan dalan
directory htdocs / localhost xampp. Masukkan perintah cd (nama directory yang akan
digunakan) di cmd.
 Jika anda menggunakkan xampp maka perintahnya adalah cd c:\xampp\htdocs atau
sesuaikan dengan tempat dimana folder htdocs xampp berada.
4) Ketikkan perintah composer create-project --prefer-dist laravel/laravel blog →
blog disini diganti dengan nama folder yang akan dibuat.

*Note : pembuatan project Laravel ini menggunakan koneksi internet, jadi pastikan
laptop sudah terhubung atau terkoneksi dengan internet saat melakukan pembuatan
project.
5) Folder project yang dibuat akan tersimpan di dalam directory yang sudah ditetapkan
secara otamatis setelah proses pembuatan selesai.
6) Setelah proses pembuatan project selesai, masuk ke dalam folder project di dalam
cmd.

7) Lalu ketikkan perintah php artisan serve – perintah ini digunakkan untuk melakukan
pengetestan project secara public atau dengan koneksi internet tanpa bantuan aplikasi
ketiga seperti xampp atau ampps.

Masukkan atau buka http://127.0.0.1:8000 di dalam browser untuk melihat apakah

project sudah berjalan atau belum.
Jika tampilan browser sudah seperti di dalam gambar, maka project sudah berjalan
dan dapat digunakkan. Untuk mematikkan atau memberhentikan perintah dari php
artisan serve cukup dengan menekan CTRL+C secara bersamaan, jika perintah ini
dimatikan maka http://127.0.0.1:8000 sudah tidak bisa diakses secara public dan
berganti menjadi folder localhost biasa dan hanya bisa diakses dengan menggunakan
bantuan aplikasi ketiga (xampp atau ampps).
 BAB 2
ROUTE & VIEWS

*Note : Jangan lupa untuk menjalankan php artisan serve di cmd

Buka folder project Laravel yang sudah dibuat sebelumnya menggunakan aplikasi text
editor yang digunakkan (VS Code, Sublime, Atom, dll)

File yang akan dibahas adalah web.php, yang dibuat untuk dijadikan jalur akses ke dalam file
yang berada di dalam folder views.

Codingan diatas digunakkan untuk membuat jalur akses kedalam file welcome.blade.php
yang ada di dalam folder views, sehingga saat kita melakukan pengetest – an di dalam
browser route akan memanggil file welcome.blade.php dan menampilkan tampilan seperti
gambar di bawah:
Sekarang akan membahas bagaimana cara untuk mengganti pemanggilan halaman welcome
menjadi home, pertama adalah dengan membuat file baru di dalam folder views. Untuk views
Laravel sudah memilik template engine sendiri yang harus digunakkan yaitu blade.php jadi
misalkan anda ingin membuat file home maka nama file menjadi home.blade.php.

Setelah membuat file home.blade.php buatlah codingan sederhana untuk tampilan home
tersebut.

Selanjutnya kembali masuk ke dalam file routes\web.php, untuk mengganti jalur akses ini
anda hanya perlu memasukkan nama awal file yang telah dibuat. Dalam kasus ini kita hanya
perlu mengganti tulisan welcome dengan home.
Sekarang saat anda membuka project Laravel di browser maka tampilan sebelumnya akan
berubah menjadi tampilan dari file home.blade.php yang sudah anda buat.

Selanjutnya cara membuat jalur route untuk mengakses file dalam folder lain selain file
home, di dalam file web.php tambahkan script route di bawah route utama.

Setelah selesai membuat codingan Route untuk halaman siswa, sekarang buatlah file baru di
folder views dengan nama siswa.blade.php.
Jika sudah dibuat lakukan save file dan coba dibuka melalu browser dengan menambahkan
/siswa di belakang 127.0.0.1:8000

Tampilan pada browser akan seperti gambar diatas.

Ada dua cara penulisan script route dalam Laravel, yang pertama dalah penulisan yang sudah
dipraktekan sebelumnya dan yang kedua adalah dengan cara penulisan yang lebih simple
yaitu

Penjelasan : /about berfungsi sebagai variable yang dimasukkan saat akan mengakses di
dalam web browser dan about adalah nama awal dari file yang akan diproses di dalam route
untuk di tampilkan di web browser.
Lalu buat juga file about.blade.php di folder file seperti biasa.
Halaman tampilan about bisa diakses dengan cara yang sama tetapi dengan penulisan Route
yang lebih sederhana. Langkah selanjutnya adalah memberikan perbedaan file yang akan kita
akses di dalam route, contohnya untuk mengetahui jika anda sedang mencoba untuk mekases
file view bisa ditambahkan dengan tambahan v_ di depan nama file.

Dengan cara penulisan seperti ini anda akan lebih mudah mengartikan codingan yang
digunakkan, seperti codingan route diatas yang dapat diartikan anda sedang mencoba
memanggil tampilan halaman about dari file v_about (views).
Bagaimana cara mengakses file yang berada di dalam subfolder ? contohnya buatlah
subfolder di dalam folder views dengan nama admin.
Lalu di dalam folder admin buat file dengan
nama v_add.blade.php, v_index.blade.php,
v_edit.blade.php.

Script penulisan Route untuk subfolder

sama seperti penulisan yang sebelumnya,
yang berbeda adalah penambahan nama
folder sebelum nama file seperti berikut :
Penjelasan : ‘admin.v_index’ disini memiliki artian folder admin dengan file
v_index.blade.php. Jika anda ingin membuat tampilan filde lainnya yang ada di dalam folder
admin lakukan penulisan script yang sama dengan hanya mengganti nama filenya.

Anda bisa melakukan codingan yang sama untuk dua file lain yang berada di dalam subfolder
admin. Hal yang sama juga bisa dilakukan jika ingin melakukan route file yang ada di di
dalam subfolder lainnya, contoh :

Cara yang sama juga bisa dilakukan untuk subfolder di dalam subfolder lainnya, contoh :
buatlah sebuah folder bernama guru di dalam subfolder admin dan di dalam folder guru
tersebut buat filde dengan nama v_dataguru.blade.php.
Penulisan codingan di dalam file web.php masih sama, memasukkan nama (subfolder
pertama).(subfolder kedua).(nama file yang akan diakses) dan seperti biasa masukkan nama
alamat yang akan anda gunakan untuk pengaksesan di dalam web browser. Untuk
pengetestan anda bisa memasukkan data sederhana di dalam file v_dataguru.blade.php dan
memeriksa hasilnya di web browser seperti biasa.
Bagaimana cara memanggil variable untuk isi di dalam sebuah halaman ? seperti CI yang
menggunakan tag php ? Laravel sudah memiliki template tersendiri, tanpa harus
menggunakan tag seperti <?php echo ‘’ ?>, anda hanya perlu membuat variable di dalam file
route dan memanggilnya melalui file view dengan format (isi) : {{ $(variable) }}.

Hasil :
Penulisan lainnya :

Penjelasan : {!! $alamat !!} digunakkan untuk pemanggilan variable yang penulisan <tag…>
berada di file route. Karena jika menggunakkan format {{ $alamat }} <tag> yang
dimasukkan di file route tidak akan terbaca.
Script untuk menampilkan isi dari variable dengan memasukkan data melalui link di browser.
Pertama buatlah codingan di file web.php seperti contoh dibawah ini :

Penjelasan :
- get(‘/siswa/{nama_siswa}’ => /siswa merupakan variable yang dimasukkan di akhir link
yang digunakkan untuk mengakses halaman siswa dan {nama_siswa} adalah array yang
dapat diganti menjadi informasi yang diinginkan untuk mengisi data di dalam halaman
siswa.
- function ($nama_siswa) => berfungsi sebagai variable atau array untuk memanggil data
yang dimasukkan.
- return view('siswa', ['nama_siswa' => $nama_siswa])
1. ‘siswa’ adalah nama file views yang akan di akses oleh route
2. [‘nama_siswa’ => $nama_siswa] berfungsi untuk memanggil data yang ada di dalam
script function.

Pengujian di web browser

Variable 1 diatas dapat diganti menggunakan data yang akan dimasukkan, contoh :
Dan data akan secara otomatis terganti tanpa harus memasukkan data lagi di dalam text-
editor. atau anda bisa menuliskan codingan sebegai berikut :
 BAB 3
Blade

*Note : pada bab ini anda akan belajar lebih dalam mengenai blade Laravel – untuk
lebih memudahkan file yang anda buat di Bab 2 sebelumnya bisa di hapus terlebih
dahulu (kecuali welcome.blade.php) agar tidak membuat bingung karena di BAB 3 ini
anda akan kembali memulai membuat file views dari awal.

Blade adalah template engine bawaan dari Laravel, berfungsi atau berhubungan dengan
template views website.

Buka halaman website getbootstrap.com

Klik pada tulisan All Release dan pilih versi 4.5 pada bootstrap.

Salin codingan starter template pada bootstrap di file v_home.blade.php, v_guru.blade.php,

v_siswa.blade.php dan v_about.blade.php.

Ubah tulisan “Hello, Word” pada title dan tag <h1> dengan nama halaman masing – masing
file. Contoh : Ganti menjadi <title> Home </title> dan <h1> Ini halaman Home </h1> pada
file v_home.blade.php, begitu pula dengan 3 file lainnya.
Selanjutnya, cari navbar di kolom pencarian website bootstrap.

Cari codingan dengan nama Nav, dan salin codingan tersebut ke dalam file
v_home.blade.php.
Lakukan beberapa perubahan di dalam codingan seperti gambar berikut :

Tampilan :
Selanjutnya adalah memasukkan link agar semua file views terhubung dan bisa diakses
melalui button nav yang sudah dibuat.

Untuk nama link sendiri disesuaikan dengan nama link route yang sudah ada buat
sebelumnya di file web.php. Jika sudah maka semua file sudah saling terhubung dan anda
bisa membutikkannya dengan mencoba menekan button nav di dalam browser. Jika sudah
berhasil anda hanya tinggal menyalin codingan nav tersebut di ketiga file lainnya.
Sekarang anda akan belajar untuk melakukan akses setiap halaman dengan cara dinamis,
dimana anda hanya menggunakan satu file utama yang dijadikan sebagai template untuk
halaman view. Langkah pertama yang harus anda lakukan adalah membuat sebuah subfolder
di dalam folder views dengan nama layout lalu buatlah file dengan nama
v_template.blade.php di dalamnya.
Salin seluruh codingan yang ada di dalam file v_home.blade.php ke dalam file template
tersebut. Langkah selanjutnya adalah menghapus isi dari file v_home.blade.php,
v_about.blade.php, v_guru.blade.php, v_siswa.blade.php dengan hanya menyisakan isi
content dari file tersebut.

Lakukan hal yang sama di file v_about.blade.php, v_guru.blade.php, v_siswa.blade.php.

Selanjutnya, anda bagi isi template menjadi beberapa bagian. Di dalam folder layout buatlah
file baru dengan nama v_nav.blade.php dan pindahkan (cut) codingan nav yang ada di
dalam v_template.blade.php ke file v_nav.blade.php.

Ikuti beberapa Langkah di bawah ini :

@include(‘layout.v_nav’) berfungsi untuk include atau mengikut sertakan file
v_nav.blade.php yang ada di dalam folder layout

@extends(‘layout.v_template’) berfungsi untuk menambahkan file v_template.blade.php dari

folder layout ke dalam filde v_home.blade.php

@section(‘content’) berfungsi untuk membuat sebuah bagian di dalam file yang dalam kasus
ini bernama ‘content’. Di dalam section ini anda bisa membuat semua isi content website
yang akan anda buat.
@endsection berfungsi sebagai tanda berakhirnya section dengan nama content.

@yield(‘content’) dibuat di dalam file v_template.blade.php yang berfungsi untuk

nemampilkan isi dari section yang diberi nama content yang di buat di file v_home.blade.php.
karena jika kita tidak membahkan perintah @yield(‘’) maka isi dari section tidak akan tampil
di dalam browser.
Anda dapat melakukan Langkah – Langkah yang sama di dalam file – file yang lainnya.
Selanjutnya buat codingan footer di v_template.blade.php untuk membuat website terlihat
lebih rapih.

Latihan !!!
- Buatlah halaman contact menggunakan v_template.blade.php sebagai akses
dinamis.
Membuat halaman form. Langkah pertama adalah cari form di kolom pencarian website
bootstrap. Salin codingan dengan nama overview ke dalam file v_guru.blade.php.
Hasil :

Selanjutnya adalah membuat nama atau judul dari halaman website sesuai dengan judul dari
link file views yang sedang dibuka, berikut adalah langkahnya :

@section(‘content’) berfungsi untuk membuat sebuah bagian di dalam file yang dalam kasus
ini bernama ‘title’. format @section ini biasanya sering digunakkan untuk section hanya
memiliki isi sedikit.

Saat anda masuk ke setiap halaman di dalam website maka judul dari website sudah sesuai
dengan nama file views masing – masing.
 BAB 4
Asset

Asset adalah tempat penyimpanan diluar folder yang berbeda dengan file, biasanya
digunakkan untuk penyimpanan gambar, CSS, atau template (AdminLTE, dll). Untuk folder
asset ini biasanya disimpan di dalam subfolder public yang ada di dalam folder project
Laravel milik anda.

Untuk membuat Asset berupa gambar anda bisa membuat sebuah sub-folder di dalam folder
public dengan nama gambar atau img.

Di dalam folder ini anda bisa memasukkan setiap img/gambar yang akan anda gunakkan
untuk tampilan website, disini saya memasukkan beberapa gambar sebagai contoh.

Sebagai contoh memasukkan atau menyelipkan gambar di file v_home.blade.php.

Tampilan di website :

Bagaimana cara menambahkan asset seperti css dan js ? untuk lebih membagus halaman
website. Langkah pertama yang harus anda lakukan adalah kembali masuk ke dalam halaman
bootstrap dan mendownload file css dan css bootstrap ver 4.5
Cara mendownloadnya adalah anda klik kolom download yang ada di kanan atas halaman
bootstrap dan download file dengan nama compile css dan js.
Selagi menunggu file CSS dan JS di download anda bisa membuat folder dengan nama
bootstrap terlebih dahulu di folder public

Ekstrak file CSS dan JS yang sudah selesai di download dan salin file yang ada di dalamnya
ke folder bootstrap yang sudah anda buat.

Di dalam file v_template.blade.php yang dibuat sebelumnya file CSS dan JS yang
digunakkan masih menggunakan link bootstrap dari cdn disini kita akan mengganti link
bootstrap tersebut menggunakan file bootstrap yang sudah di download.
Langkah pertama yang harus anda lakukan adalah menghapus codingan yang berada di dalam
file v_template.blade.php

Hapus script codingan yang diberi tanda kotak merah. Dan ubahlah script codingan menjadi
seperti gambar dibawah :
 BAB 5
Install Template
(AdminLTE)

*Note : Dalam materi instalasi template adminLTE ini anda akan membuat tampilan dengan
template yang baru, untuk lebih memudahkan pengerjaan anda boleh membuat sebuah project
baru atau menghapus file yang anda buat dalam materi sebelumnya.

Pertama download lebih dahulu template AdminLTE ver. 2.4.18 melalui link berikut :
https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18

Download Source code (zip), setelah proses download selesai ekstrak file tersebut
menggunakkan winrar dan salin ke folder public dari project yang anda buat.

Anda boleh menggunakan nama default folder atau menggantinnya dengan nama yang lebih
mudah diingat atau simple, disini saya mengubah nama folder yang saya gunakan menjadi
adminLTE. Setelah proses menyalin selesai anda buka folder tersebut dan buka file dengan
nama index.html di web browser yang anda gunakan.
 Pilih black-page pada example, lalu lakukan view page
source pada halaman index.html yang ada buka dengan
cara klik kanan pada mouse -> view page source.
Buatlah sebuah subfolder dalam folder views dengan
nama layout dan buatlah file v_template.blade.php di
dalamnya.

Salin semua codingan ke dalam file v_template.blade.php yang sudah anda buat.

Atur file Route web.php dengan menjadikan file v_template.blade.php menjadi akses web
utama.
Barulah lakukan pengecekan pada web browser anda (jangan lupa pastikan php artisan serve
sudah berjalan)

Langkah selanjutnya adalah memperbaiki tampilan website anda sama seperti contoh
template yang digunakkan dengan cara mengubah link bootstrap dengan mengambil file dari
asset adminLTE yang anda simpan di public.
*adminLTE disini bisa anda ganti sesuai dengan nama yang anda gunakkan untuk folder
template adminlte anda.

Langkah selanjutnya adalah mengembalikan akses untuk menu atau file js pada website, yang
harus anda lakukan hanya tinggal mengcopy codingan {{asset(‘adminLTE’)}} di link
bootstrap js yang ada pada file.

Menu JS sudah dapat di akses di dalam website project Laravel anda.

Lakukan pencarian kata src untuk menampilkan gambar pada halaman website, masukkan
{{asset(‘adminLTE’)}} di setiap link src.
Jika sudah, lakukan refresh pada halam website dan gambar akan muncul dalam tampilan.

Langkah selanjutnya adalah menghapus menu – menu yang tidak diperlukan atau tidak akan
dipakai dalam project ini. Ubah codingan file v_template.blade.php menjadi seperti dibawah
ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Blank Page</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet"
href="{{asset('adminLTE')}}/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="{{asset('adminLTE')}}/bower_components/font-
awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet"
href="{{asset('adminLTE')}}/bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="{{asset('adminLTE')}}/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="{{asset('adminLTE')}}/dist/css/skins/_all-skins.min.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
 <!-- Google Font -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,
400italic,600italic">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">

<header class="main-header">
<!-- Logo -->
<a href="../../index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>A</b>LT</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Admin</b>LTE</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>

<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="{{asset('adminLTE')}}/dist/img/user2-160x160.jpg" class="img-
circle" alt="User Image">
</div>
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
 <p>Why not buy a new awesome theme?</p>
</a>
</li>
<!-- end message -->
</ul>
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
</li>
<!-- Notifications: style can be found in dropdown.less -->
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<!-- Tasks: style can be found in dropdown.less -->
<li class="dropdown tasks-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%"
role="progressbar"
 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
</li>
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="{{asset('adminLTE')}}/dist/img/user2-160x160.jpg" class="user-image"
alt="User Image">
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="{{asset('adminLTE')}}/dist/img/user2-160x160.jpg" class="img-circle"
alt="User Image">

<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
 <a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
</li>
</ul>
</div>
</nav>
</header>

<!-- =============================================== -->

<!-- Left side column. contains the sidebar -->

<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="{{asset('adminLTE')}}/dist/img/user2-160x160.jpg" class="img-circle"
alt="User Image">
</div>
<div class="pull-left info">
<p>Alexander Pierce</p>
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>
</div>
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i
class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MAIN NAVIGATION</li>
<li><a href="https://adminlte.io/docs"><i class="fa fa-dashboard"></i>
<span>Dashboard</span></a></li>
<li class="treeview">
<a href="#">
<i class="fa fa-share"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
</ul>
</li>
<li><a href="https://adminlte.io/docs"><i class="fa fa-book"></i>
<span>Documentation</span></a></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>

<!-- =============================================== -->

<!-- Content Wrapper. Contains page content -->

<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Blank page
<small>it all starts here</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li><a href="#">Examples</a></li>
<li class="active">Blank page</li>
</ol>
</section>

<!-- Main content -->

<section class="content">

<!-- Default box -->

<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Title</h3>

<div class="box-tools pull-right">

<button type="button" class="btn btn-box-tool" data-widget="collapse" data-
toggle="tooltip"
title="Collapse">
<i class="fa fa-minus"></i></button>
 <button type="button" class="btn btn-box-tool" data-widget="remove" data-
toggle="tooltip" title="Remove">
<i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
Start creating your amazing application!
</div>
<!-- /.box-body -->
<div class="box-footer">
Footer
</div>
<!-- /.box-footer-->
</div>
<!-- /.box -->

</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->

<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 2.4.18
</div>
<strong>Copyright &copy; 2014-2019 <a
href="https://adminlte.io">AdminLTE</a>.</strong> All rights
reserved.
</footer>

<!-- Control Sidebar -->

<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-
home"></i></a></li>

<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-

gears"></i></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
 <div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

<p>Will be 23 on April 24th</p>

</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-user bg-yellow"></i>

<div class="menu-info">
<h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>

<p>New phone +1(800)555-1234</p>

</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-envelope-o bg-light-blue"></i>

<div class="menu-info">
<h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>

<p>[email protected]</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-file-code-o bg-green"></i>

<div class="menu-info">
<h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>

<p>Execution time 5 seconds</p>

</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->

<h3 class="control-sidebar-heading">Tasks Progress</h3>

<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
 </h4>

<div class="progress progress-xxs">

<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Update Resume
<span class="label label-success pull-right">95%</span>
</h4>

<div class="progress progress-xxs">

<div class="progress-bar progress-bar-success" style="width: 95%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Laravel Integration
<span class="label label-warning pull-right">50%</span>
</h4>

<div class="progress progress-xxs">

<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Back End Framework
<span class="label label-primary pull-right">68%</span>
</h4>

<div class="progress progress-xxs">

<div class="progress-bar progress-bar-primary" style="width: 68%"></div>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->

</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settings</h3>

<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked>
</label>

<p>
Some information about this general settings option
</p>
</div>
<!-- /.form-group -->

<div class="form-group">
<label class="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" class="pull-right" checked>
</label>

<p>
Other sets of options are available
</p>
</div>
<!-- /.form-group -->

<div class="form-group">
<label class="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" class="pull-right" checked>
</label>

<p>
Allow the user to show his name in blog posts
</p>
</div>
<!-- /.form-group -->

<h3 class="control-sidebar-heading">Chat Settings</h3>

<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked>
</label>
</div>
 <!-- /.form-group -->

<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right">
</label>
</div>
<!-- /.form-group -->

<div class="form-group">
<label class="control-sidebar-subheading">
Delete chat history
<a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-
o"></i></a>
</label>
</div>
<!-- /.form-group -->
</form>
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->

<script src="{{asset('adminLTE')}}/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script
src="{{asset('adminLTE')}}/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="{{asset('adminLTE')}}/bower_components/jquery-
slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="{{asset('adminLTE')}}/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="{{asset('adminLTE')}}/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="{{asset('adminLTE')}}/dist/js/demo.js"></script>
<script>
$(document).ready(function () {
$('.sidebar-menu').tree()
})
</script>
</body>
</html>
Tampilan :

Pindahkan codingan dengan nav ke dalam file yang berbeda. Buat file baru di dalam folder
layout dengan nama v_nav.blade.php.

Lalu masukkan perintah include di file v_template.blade.php tepat dimana codingan nav
berada sebelum dipindahkan.

Fungsinya untuk memanggil tampilan dari file

v_nav.blade.php, karena kalau tidak maka side bar
pada halaman website akan kosong tanpa menu
apapun. Buatlah beberapa file seperti pada gambar :
Hapus semua script yang di blok, hingga menjadi seperti gambar dibawah :

Membuat v_home.blade.php menjadi halaman utama template adminLTE

@extends('layout.v_template')

@section('content')
<h1>Ini Halaman (halaman)</h1>
@endsection
Salin script berikut ke dalam v_user, v_guru, dan v_siswa.
Membuat menu nav di dalam file v_nav.blade.php
Masukkan link akses untuk file masing – masing ke dalam menu.

<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li><a href="#">Examples</a></li>
<li class="active">Blank page</li>
</ol>
<small>it all starts here</small>
Cari codingan seperti diatas di dalam v_template.blade.php dan hapus.
Merubah tulisan Blank Page, menjadi judul setiap halaman
v_template.blade.php

v_home.blade.php

lakukan hal yang sama untuk file v_guru, v_siswa dan v_user.
Merubah judul utama dari website
Ubah menjadi
 BAB 6
Menu Aktif / Active State

Script codingan diatas berfungsi untuk memberikan tanda halaman website yang aktif,
sehingga anda tidak akan bingung anda berada di halaman mana saat mengakses website.
 BAB 7
Controller

Dengan Laravel anda bisa membuat file controller menggunakan terminal dari text – editor
yang anda gunakkan, berikut adalah Langkah pembuat controller dengan Laravel :

Masukkan perintah php artisan make:controller HomeController di dalam terminal text

editor yang anda gunakkan, jika sudah muncul tulisan Controller created successfully, file
controller dengan nama HomeController.php akan secara otomatis terbuat di dalam folder
controller.
Disini anda akan belajar bagaimana cara mengakses file views melalui function dari
controller tidak lagi melalui Routes. Routes hanya akan digunakkan untuk memanggil atau
memberi akses pada file controller.

Penjelasan :
- ‘/’ adalah deklrasi untuk file home
- [HomeController::class, ‘index’] berfungsi untuk memanggil data dari HomeController
dengan nama atau kelas index (nama yang ditulis setelah function).
Ubah codingan dalam file routes menjadi seperti gambar diatas, sekarang saat anda mencoba
untuk mengakses halaman web maka tampilan yang akan anda dapatkan adalah halaman
yang kosong.
Langkah selanjutnya yang harus anda lakukan adalah melakukan konfigurasi pada file
controller untuk mengembalikkan tampilan website yang sudah anda buat sebelumnya.

Cara menambahkan data ke dalam halaman dengan controller

Latihan !!!
- Buatlah file controller untuk akse file views (v_guru, v_siswa, dan v_user) agar file –
file tersebut dapat kembali di akses di halaman website.
 BAB 8
Models

buat file model menggunakan perintah php artisan make:model (namafile) di dalam terminal
text editor anda.
Sebagai contoh disini membuat file untuk halaman model, jadi perintahnya adalah php
artisan make:model GuruModel. Jika sudah sama seperti saat membuat file controller, file
model akan secara otomatis terbuat di dalam folder App\Models

Buatlah sebuah function dengan nama allData dan berisikan beberapa array untuk data Guru
sepergi gambar diatas.
Jika sudah, Langkah yang harus anda lakukan selanjutnya adalah memasukkan perintah use
App\Models\GuruModel; di dalam file GuruController yang sudah anda buat dalam materi
sebelumnya. Perintah ini berfungsi untuk menginclude atau memudahkan anda agar dapat
memanggil data yang ada di dalam file GuruModel.
Lalu buatlah sebuah function __construct di dalam class GuruController yang berfungsi
untuk meload file model.

Jangan lupa menambahkan $data di belakang v_guru untuk menampilkan data yang sudah
anda buat sebelumnya di GuruModel.

Masukkan perintah pemanggilan data dari GuruModel di dalam file v_guru.blade.php dengan
double bracket {{ $data[‘ ’] }} seperti gambar diatas. Hasil :
 BAB 9
CRUD (READ DATA)

Buatlah sebuah database dengan nama laravel8 di dalam localhost/phpMyAdmin.

Buat table dengan tbl_guru di dalam database Laravel yang berisikan data sebagai berikut :

Tambahkan dua data ke dalam table yang nantinya akan kita baca melalui project Laravel
sehingga muncul di dalam tampilan website.
Sebelum masuk ke dalam proses coding, buatlah terlebih dahulu file bernama img di folder
public project Laravel anda dan siapkan juga dua gambar dengan nama foto.jpg dan foto1.jpg
di dalamnya.

Langkah selanjutnya adalah membuat sebuah file koneksi yang menghubungkan project
dengan database yang sudah anda buat. Di dalam folder project anda buka file dengan nama
.env.
Ganti nama DB_DATABASE dengan nama database yang sudah anda buat di phpMyAdmin
yaitu laravel8, untuk username = root dan password = (kosong).

*Note : Karena di dalam materi ini anda akan belajar memasukkan data ke dalam
table melalui database, data pada file v_guru.blade.php yang anda buat di materi
sebelumnya bisa anda hapus.
Buka file GuruModel yang telah anda buat, dan masukkan script codingan seperti gambar
dibawah ini.

- use Illuminate\Support\Facades\DB adalah cara lain yang mudah untuk mengakses objek
dalam kontainer layanan. Sebagai alternatif, Anda bisa menggunakan injeksi dependensi.
- return DB::table(tbl_guru’)->get(); berfungsi untuk menggambil data dari database di
dalam phpMyAdmin
Sekarang anda hanya perlu memasukkan script codingan ke dalam file GuruController dan
v_guru.blade.php, seperti gambar dibawah :
 GuruController

v_guru.blade.php
Lakukan refresh pada halaman website dan lihat apakah sudah muncul tampilan table atau
belum
Jika table sudah muncul di halaman website, selanjutnya anda hanya harus membuat
pemanggilan data database di file v_guru.blade.php.

@extends('layout.v_template')
@section('title', 'GURU')
@section('content')
<table class="table table-bordered">
<thead>
 <tr>
<th>No</th>
<th>NIP</th>
<th>Nama Guru</th>
<th>Mata Pelajaran</th>
<th>Foto Guru</th>
</tr>
</thead>
<tbody>
<?php $no=1; ?>
@foreach ($guru as $data)
<tr>
<td>{{ $no++ }}</td>
<td>{{ $data->nip }}</td>
<td>{{ $data->nama_guru }}</td>
<td>{{ $data->mapel; }}</td>
<td><img src="{{ url('img/'.$data->foto_guru) }}" width="100px"></td>
<td>
<a href="" class="btn btn-sm btn-success">Detail</a>
<a href="" class="btn btn-sm btn-warning">Edit</a>
<a href="" class="btn btn-sm btn-danger">Delete</a>
</td>
</tr>
@endforeach
</tbody>
</table>
@endsection
Hasil Akhir :
 BAB 10
CRUD (DETAIL DATA)

Dalam materi ini akan membahas atau membuat sebuah halaman detail yang akan muncul di
website saat anda menekan button Detail yang telah anda buat sebelumnya di dalam table
data halaman guru.

Buatlah function detailData di dalam file GuruModel.php yang akan mengambil data dari
table $id_guru seperti gambar diatas.

Buat juga sebuah public function detail ($id_dose) di dalam file GuruContoller seperti
gambar dibawah.

Lalu buat sebuah Route untuk menampilkan halaman /guru/detail/(id_guru)

Langkah selanjutnya, anda hanya perlu membua sebuah file view baru dengan nama
v_detailguru.blade.php dan membuat sebuah script untuk memanggil data dari database
berdasarkan id_guru seperti gambar dibawah.
Atur link di dalam file v_guru.blade.php pada bagian button Detail, sehingga saat anda
mengklik button tersebut anda akan langsung di alihkan ke dalam halaman
/guru/detail/(id_guru).

Buat juga sebuah button Back / Kembali yang langsung diarahkan ke dalam halaman guru.
 GuruController.php
Script codingan pada gambar diatas berfungsi untuk membuat tampilan halaman 404 not
Found saat kita mencoba untuk mengakses halaman /guru/detail dengan nilai id_guru yang
tidak ada. Contoh :

Pada gambar diatas saya mencoba untuk mengakses halaman dengan nama /guru/detail/6, dan
karena nilai 6 pada database tidak ada maka tampilan halaman akan seperti gambar diatas.
Jika anda tidak menggunakkan codingan untuk halaman (404) maka saat anda mencoba untuk
mengakses halaman diatas tampilan yang anda dapatkan adalah error.
 BAB 11
CRUD (FORM VALIDATION)

Pada BAB ini anda akan belajar cara membuat sebuah vadilasi form yang digunakkan untuk
menambah data dalam halaman guru. Langkah pertama yang harus anda lakukan adalah
menambahkan sebuah button/tombol ADD pada halaman guru (v_guru.blade.php) yang saat
diklik akan langsung mengarahkan anda ke dalam sebuah halaman /guru/add.

Buat file dengan nama v_addguru.blade.php yang berisikan kerangka form yang akan
digunakan nanti.

Sebelum masuk ke dalam codingan dalam pembuatan form buat terlebih dahulu akses root
untuk halamana /guru/data

Jika sudah membuat akses route, buatlah sebuah public function add(), di dalam file
GuruController.php seperti hambar diatas.
Selanjutnya, membuat isi atau tampilan form penambahan data yang akan digunakkan seperti
gambar dibawah.
Jika sudah membuat script codingan tampilan form, buatlah sebuah akses route yang
ditunjukkan atau bertujuan untuk memasukkan (insert) data dari form ke database.

Di dalam file GuruController.php buatlah sebuah public function insert() dengan data validasi
yang ada di dalam form. Script codingan diats memiliki fungsi untuk memberi perintah
bahwa form wajib untuk diisi dan tidak bisa dikosongkan.
Langkah selanjutnya adalah anda membuat pesan validasi error yang ditampilkan saat anda
melakukan kesalah atau ada bagian form yang wajib diisi tapi masih dalam keadaan kosong,
hal ini digunakkan sehingga anda tau dimana letak kesalahan yang membuat data tidak dapat
disimpan.
v_addguru.blade.php

GuruController.php
Di bawah array request()->validate di dalam file GuruController buatlah array baru seperti
gambar diatas yang berfungsi sebgai isi dari pesan yang akan ditampikan saat terjadi validasi
error pada halaman form.

Pesan Alert yang tampil / terlihat saat anda tidak mengisi data di dalam form.
Selanjutnya adalah membuat codingan untuk mengatasu kondisi saat anda mengisi data di
dalam form tetapi ada kolom yang belum terisi tetapi anda sudah menekan tombol simpan,
data yang anda sebelumnya akan menghilang dari kolom yang sudah terisi. Seperti gambar
dibawah.
Yang harus anda lakukan hanya tinggal menambahkan sebah nilai value ke dalam tag input
seperti gambar dibawah.

Setelah anda memasukkan value, maka data yang sebelumnya anda masukkan tidak akan
menghilang dan akan tetap ada di dalam kolom form tanpa harus mengulang mengisi form
dari awal.
 BAB 12
CRUD (CREATE DATA)

Di dalam materi sebelumnya anda belajar unutk mebuat sebuah form penambahan data, di
dalam materi ini anda akan belajar membuat data dari form yang sudah anda buat anda
sebelumnya, sehingga data yang anda masukkan di dalam form tersebut akan tersimpan ke
dalam halaman yang bersangkutan dan juga ke dalam database.

Langkah pertama adalah membuat public function addData(), di dalam file GuruModel
seperti gambar diatas. Lalu di dalam file GuruController.php, dibawah array yang berisikan
pesan alert validasi error, masukkan script codingan seperti di bawah ini. Codingan ini
berfungsi untuk menyimpan gambar / foto yang anda upload dan merename secara otomatis
dan akan disimpan ke dalam file public/img yang ada di dalam project Laravel anda.

Selanjutnya anda buat $data array yang berisikan request data yang nantinya akan
dimasukkan ke dalam tamble yang ada di halaman guru. Setelah membuat array, anda juga
buat perintah redirect yang menuju langsung ke halaman guru seperti gambar dibawah ini.

Di dalam file web.php pada bagian route akses halaman guru, beri perintah untuk menamai
route tersebut seperti gambar dibawah. Nama dari Route itu nanti akan dimasukkan ke dalam
akses redirect Route yang dibuat di file GuruController.php seperti gambar diatas,
Buka halaman index.php yang ada di dalam folder public/adminLTE, klik pada bagian UI
ELEMENT -> GENERAL dan lihat pada bagian Alert. Disini kita akan menggunakan
template pesan alert yang berwarna hijau seperti gambar dibawah.

Untuk mendapatkan template dari pesan alert tersebut, klik kanan pada halaman dan pilih
view page source. Di dalam halaman yang berisikan source code carilah Success alert
preview.

Copy codingan yang bersangkutan dan paste ke dalam file v_addguru.blade.php. dan ubah
codingan seperti gambar dibawah.

Setelah selesai, anda boleh membutikkan keberhasilan dengan menambahkan data di dalam
form.
File gambar atau foto yang anda upload secara otomatis masuk ke dalam folder public/img
dengan nama yang secara otomaris diubah oleh server.
 BAB 13
CRUD (UPDATE DATA)

Buat akses Route get /guru/edit/{id_guru), function edit($id_guru) di dalam

GuruController.php dan buat file baru dalam folder views dengan nama
v_editguru.blade.php.

Buka file v_guru.blade.php dan pada tombol edit masukkan link href seperti gambar dibawah
ini.

Salin form yang berada di file v_detailguru.blade.php ke dalam file v_editguru.blade.php dan
lakukan beberapa perubahan seperti gambar dibawah.
Lalu lakukan konfigurasi di function edit pada GuruController.php seperti gambar dibawah.

Langkah selanjutnya adalah membuat akses Route Post di web.php seperti gambar dibawah.

Lalu buka kembali file GuruController.php dan buat sebuah public function update
($id_guru) seperti gambar dibawah ini.
Jika sudah dibuat sekarang seharusnya anda sudah bisa melakukan update atau edit pada table
yang ada di halaman guru.
 BAB 14
CRUD (DELETE DATA)

Buka halaman index.html pada adminLTE dan buka UI ELEMENT → Modals dan buka
view page source seperti biasa.

Pada halaman view page source cari Modal Examples dan copy script codingan dengan nama
modal-danger seperti gambar dibawah.

Paste ke dalam file v_guru.blade.php dan lakukan penggantian seperti gambar dibawah ini.

Langkah selanjutnya masuk kembali ke halaman view page source yang sama dan cari
modal-danger dan copy script dengan tag div.
Salin ke dalam file v_guru.blode.php di bawah tag table. Lakukan beberapa perubahan seperti
dibawah ini.

Lakukan pengecekan pada halaman guru dengan mengklik tombol delete jika sudah berhasil
maka tampilan yang muncul akan seperti dibawah ini.

Selanjutnya anda tinggal memasukkan data – data yang akan dipanggil melalui id_guru ke
dalam script tersebut, sehingga dapat di hapus sesuai dengan id_guru yang dipanggil seperti
gambar dibawah ini.
Jangan lupa buat juga akses route /guru/delete/{id_guru} di dalam web.php

Buat public function delete($id_guru) di dalam file GuruController.php

Buat akses DB file GuruModel.php

Script dibawah ini berfungsi agar foto atau gambar yang di upload sebagai foto guru saat data
dihapus dari table gambar atau foto tersebut ikut terhapus secara otomatis.
Bisa dilihat dari gambar dibawah data guru Doni yang dihapus dengan ID 1111 ikut terhapus
di folder img saat data dihapus dari website.
 BAB 15
JOIN MULTI-TABLE

Join Multi – Table – berfungsi untuk membuat relasi untuk setiap table di dalam database
menggunakan fungsi dari Laravel 8. Langkah pertama yang anda lakukan adalah membuat
sebuah controller dengan terminal bernama SiswaController (jika anda sudah membuatnya
abaikan Langkah ini).

Buat juga akses Route di dalam file web.php. jangan lupa masukkan perintah use
App\....\SiswaController; seperti gambar dibawah.

Sama seperti sebelum – sebelumnya masukkan sebuah public function index() di dalam file
SiswaController.php

Buat sebuah table di dalam file v_siswa.blade.php seperti gambar dibawah.

Langkah selanjutnya adalah membuat 3 tabel baru di dalam database yang anda buat
sebelumnya yaitu tbl_siswa(*note : 5 kolom), tbl_kelas(2 kolom), dan table_mapel(2 kolom)
dengan rincian seperti gambar dibawah ini)
Jika database, Langkah selanjutnya adalah membuat file SiswaModel.php di dalam terminal
dengan perintah php artisan make:model SiswaModel.

Selanjutnya buat public function allData() yang di dalamnya berisi perintah -> leftjoin atau
perintah yang berfungsi untuk membuat relasi antara 3 tabel yang baru saja anda buat di
dalam database.
Langkah selanjutnya anda tinggal menyesuaikan atau melakukan codingan seperti biasa
untuk memanggil data dalam database yang akan di tampilkan di halaman siswa. Ikuti
Langkah yang ditunjukkan oleh gambar dibawah.

Jika sudah anda bisa mengecek hasilnya dengan membuka halaman siswa dari project
Laravel.
 BAB 16
PRINT TO PDF DENGAN DOMPDF

Pertama buatlah sebuah halaman Koperasi seperti gambar dibawah dengan Langkah –
Langkah yang sudah anda pelajari di dalam materi sebelumnya.

Jika sudah, install dompdf dengan cara masuk ke dalam terminal text-editor dan masukkan
perintah composer require dompdf/dompdf.

Setelah proses instalasi selesai, catatan : dalam materi ini akan dibuat dua cara untuk
melakukai print dokumen. Yaitu dengan cara : Print to Printer dan Print to PDF. Buatlah dua
buah link di dalam file koperasi yang sudah anda buat seperti gambar dibawah ini.

Buat akses route untuk ke dua link tersebut di file web.php

Selanjutnya masukkan public function print() di dalam file KoperasiController yang sudah
anda buat seperti gambar di bawah.
Buat file v_print.blade.php di dalam folder views dan buat script codingan seperti di bawah di
dalamnya.
v_print.blade.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Print</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="{{ asset('LTE')
}}/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="{{ asset('LTE') }}/bower_components/font-awesome/css/font-
awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="{{ asset('LTE')
}}/bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="{{ asset('LTE') }}/dist/css/AdminLTE.min.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- Google Font -->

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic
,400italic,600italic">
</head>
<body onload="window.print();">
<div class="wrapper">
<!-- Main content -->
<section class="invoice">
<!-- title row -->
<div class="row">
 <div class="col-xs-12">
<h2 class="page-header">
<i class="fa fa-globe"></i> Laporan Penjualan Koperasi
<small class="pull-right">Date: {{ date('d-m-Y') }}</small>
</h2>
</div>
<!-- /.col -->
</div>
<!-- info row -->

<!-- /.row -->

<!-- Table row -->

<div class="row">
<div class="col-xs-12 table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>NO.</th>
<th>NO. FAKTUR</th>
<th>PELANGGAN</th>
<th>TANGGAL</th>
<th>TOTAL</th>
</tr>
</thead>
<tbody>
<?php $no=1; ?>
@foreach ($koperasi as $data)
<tr>
<td>{{ $no++ }}</td>
<td>{{ $data->no_faktur }}</td>
<td>{{ $data->pelanggan }}</td>
<td>{{ $data->tanggal }}</td>
<td>{{ $data->total }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<!-- /.col -->
</div>
<!-- /.row -->

<!-- /.row -->

</section>
<!-- /.content -->
</div>
<!-- ./wrapper -->
</body>
</html>
Setelah membuat file untuk Print to Printer, sekarang anda hanya tinggal membuat Print to
PDF. Langkah pertama yang harus anda lakukan adalah melakukan konfigurasi pada file
KoperasiController.php seperti gambar dibawah ini.

Lalu buat file dengan nama v_printpdf.blade.php di dalam folder views dan masukkan
codingan dibawah ini di dalamnya.
v_printpdf.blade.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Print PDF</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="{{ asset('LTE')
}}/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="{{ asset('LTE') }}/bower_components/font-awesome/css/font-
awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="{{ asset('LTE')
}}/bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="{{ asset('LTE') }}/dist/css/AdminLTE.min.css">
 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- Google Font -->

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic
,400italic,600italic">
</head>
<body>
<div class="wrapper">
<!-- Main content -->
<section class="invoice">
<!-- title row -->
<div class="row">
<div class="col-xs-12">
<h2 class="page-header">
<i class="fa fa-globe"></i> Laporan Penjualan Koperasi
<small class="pull-right">Date: {{ date('d-m-Y') }}</small>
</h2>
</div>
<!-- /.col -->
</div>
<!-- info row -->

<!-- /.row -->

<!-- Table row -->

<div class="row">
<div class="col-xs-12 table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>NO.</th>
<th>NO. FAKTUR</th>
<th>PELANGGAN</th>
<th>TANGGAL</th>
<th>TOTAL</th>
</tr>
</thead>
<tbody>
<?php $no=1; ?>
@foreach ($koperasi as $data)
<tr>
<td>{{ $no++ }}</td>
<td>{{ $data->no_faktur }}</td>
 <td>{{ $data->pelanggan }}</td>
<td>{{ $data->tanggal }}</td>
<td>{{ $data->total }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<!-- /.col -->
</div>
<!-- /.row -->

<!-- /.row -->

</section>
<!-- /.content -->
</div>
<!-- ./wrapper -->
</body>
</html>
Hasil :
Jika anda menekan print to printer anda akan langsung dialihkan ke halaman untuk
melakukan konfigurasi untuk print ke dalam printer anda.

Dan jika anda menekan tombol print to pdf anda akan langsung mendapatkan pilihan
download file tersebut seperti gambar dibawah ini.
 BAB 17
LOGIN, LOGOUT & REGISTER

Untuk membuat halaman Login, Logout dan Register anda harus melakukan beberapa
installasi – jadi pastikan laptop atau kompoter anda terhubung dengan koneksi internet.
Lakukan beberapa installasi seperti gambar dibawah ini.

Jika installasi sudah selesai maka secara otomatis akan muncul beberapa template file
controller yang akan dijadikan patokan untuk membuat halaman login, user dan logout.

Sekarang jika anda mencoba untuk membuka halaman project Laravel maka akan muncul
halaman login untuk bisa mengakses. Tetapi jika anda menambahkan /… di belakang link
halaman yang bukan home masih bisa terbuka dengan bebas. Yang harus anda lakukan
adalah menyalin script $this->middleware('auth'); ke dalam setiap file controller yang sudah
anda buat di dalam public function __construct (). Seperti gambar dibawah ini.
*lakukan Langkah yang sama kedalam file controller lainnya.
Jika sudah maka tampilan yang akan dapatkan kurang lebih seperti ini.

Kembali buka terminal text-editor anda dan masukkan perintah php artisan migrate – perintah
ini berfungsi untuk membuat table otomatis ke dalam database yang kita gunakan.
Coba lakukan sebuah register dengan memasukkan data yang dibutuhkan seperti gambar
dibawah.

Jika sudah, periksa table user di dalam database. Anda bisa melihat data yang sudah anda
buat sebelumnya secara otomatis masuk ke dalam table user.

Langkah selanjutnya adalah membuat tampilan login menjadi lebih rapih, buatlah sebuah file
di dalam folder views dengan nama v_login.blade.php. dan masukkan script codingan sebagai
berikut di dalamnya.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Log in</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="{{ asset('LTE')
}}/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="{{ asset('LTE') }}/bower_components/font-awesome/css/font-
awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="{{ asset('LTE')
}}/bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="{{ asset('LTE') }}/dist/css/AdminLTE.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="{{ asset('LTE') }}/plugins/iCheck/square/blue.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->

<!-- Google Font -->

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic
,400italic,600italic">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="../../index2.html"><b>LOGIN</b> user</a>
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">Sign in to start your session</p>

<form method="POST" action="{{ route('login') }}">

@csrf
<div class="form-group has-feedback">
<input type="email" name="email" class="form-control" placeholder="Email">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-group has-feedback">
<input type="password" name="password" class="form-control"
placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="row">
<div class="col-xs-8">
</div>
<!-- /.col -->
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">Login</button>
</div>
<!-- /.col -->
</div>
</form>

<!-- /.social-auth-links -->

<a href="{{ route('register') }}" class="text-center">Register</a>
 </div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 3 -->

<script src="{{ asset('LTE') }}/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{{ asset('LTE')
}}/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="{{ asset('LTE') }}/plugins/iCheck/icheck.min.js"></script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' /* optional */
});
});
</script>
</body>
</html>
Lalu anda buka file LoginController yang ada di dalam folder App\Http\Controllers\Auth dan
lakukan CTRL+Klik Kiri pada use Illminate\Foundation\Auth\AuthenticatesUsers untuk
membuka folder tersebut.
Lakukan perubahan pada return view seperti gambar diatas. Jika sudan lakukan refesh maka
tampilan halaman akan seperti ini.

Langkah selanjutnya adalah membuat akses ke halaman register, Langkah pertama adalah
anda buka terlebih dahulu file RegisterController.php dan lakukan CTRL + Klik Kiri pada
use Illuminate\Foundation\Auth\RegistersUsers; untuk membuka file tersebut.
Ganti isi dalam return view menjadi v_register.

Selanjutnya buatlah file baru dalam folder views dengan nama v_register.blade.php. dan
masukkan script codingan sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>AdminLTE 2 | Register</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="{{ asset('LTE')
}}/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="{{ asset('LTE') }}/bower_components/font-awesome/css/font-
awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="{{ asset('LTE')
}}/bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="{{ asset('LTE') }}/dist/css/AdminLTE.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="{{ asset('LTE') }}/plugins/iCheck/square/blue.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- Google Font -->

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic
,400italic,600italic">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="../../index2.html"><b>Register</b> user</a>
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">Sign in to start your session</p>

<form method="POST" action="{{ route('register') }}">

@csrf
<div class="form-group has-feedback">
<input name="name" class="form-control" placeholder="Name">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
 <div class="form-group has-feedback">
<input type="email" name="email" class="form-control" placeholder="Email">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-group has-feedback">
<input type="password" name="password" class="form-control"
placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-group has-feedback">
<input type="password" name="password_confirmation" class="form-control"
placeholder="Confirm Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
@error('password-confirm')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="row">
<div class="col-xs-8">
</div>
<!-- /.col -->
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">Register</button>
</div>
<!-- /.col -->
</div>
</form>

<!-- /.social-auth-links -->

<a href="{{ route('login') }}" class="text-center">Login Now</a>

</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 3 -->

<script src="{{ asset('LTE') }}/bower_components/jquery/dist/jquery.min.js"></script>
 <!-- Bootstrap 3.3.7 -->
<script src="{{ asset('LTE')
}}/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="{{ asset('LTE') }}/plugins/iCheck/icheck.min.js"></script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' /* optional */
});
});
</script>
</body>
</html>
Dan tampilan halaman register akan terhiat kurang lebih seperti gambar dibawah. Anda bisa
mengetestnya dengan melakukan register user baru.

Selanjutnya adalah membuat akses log out, buka file v_template.blade.php. cari kata sign out
dan lakukan perubahan seperti gambar dibawah.
 BAB 18
MEMBATASI LEVEL AKSES DENGAN MIDDLEWARE

Dalam materi ini anda akan mempelajari membuat sebuah akses level setiap pengguna
website, Langkah pertana yang harus anda lakukan adalah membuka
…\database\migration\2014_10…php dan tambahkan variable $table -> integer(‘level’);
seperti gambar dibawah ini.

Lalu buka terminal text editor dan lakukan perintah php artisan migrate:refesh yang
bertunjuan untuk menambahkan level ke dalam table user seperti gambar dibawah.
Lakukan perubahan pada kolom table level seperti gambar diatas, ganti Batasan/default
menjadi as defined dengan nilai 3. Setelah itu baru lakukan 3 registrasi di halaman registrasi
website project Laravel seperti yang sudah dibahas di materi sebelumnya.

Pada bagian level ubah level masing – masing akun yang sudah dibuat menjadi level 1,2 dan
3 seperti gambar diatas. Level 1 = admin, 2 = user, dan 3 = koperasi. Kembali ke terminal
lakukan perintah php artisan make:middleware Admin, User dan Koperasi.

Buka file middleware yang sudah anda buat tersebut (folder App\Http\Middleware\) dan
lakukan konfigurasi seperti gambar dibawah.
Tambahkan akses 3 file middleware tersebut di kernel.php (app\http\)
Selanjutnya jika anda belum membuat controller untuk user dan koperasi buat terlebih dahulu
file controllernya. Dan lakukan konfigurasi di dalam controller seperti biasa (jika lupa lihat
kembali materi pembahasan controller).

Sekarang masuk ke dalam Routes web.php buatlah Route Group untuk membatasi akses tiap
halaman disesuaikan dengan level akun yang digunakkan.

Sekarang jika anda masuk dengan akun admin maka anda tidak bisa mengakses halaman
diluar akses yang ada di dalam route begitu juga dengan akun user dan koperasi.
Sekarang anda buka file v_template.php dan cari kata Online di dalamnya, setelah ketemu
lakukan perubahan seperti dibawah ini.
Script diatas berfungsi untuk mengganti kata Online yang sebelumnya menjadi status level
akun yang sedang digunakkan. Seperti gambar dibawah akun Andi adalah akun dengan level
3 maka status dibawahnya koperasi dan akun ini hanya bisa mengakses halaman Home dan
Koperasi saja.

Langkah selanjutnya adalah membuat tampilan menu yang tampil disetiap akun hanya menu
yang dapat diakses sesuai level masing – masing. Buka file v_nav.blade.php dan lakukan
konfigurasi seperti berikut ini.

Sebagai contoh akun Andi dibawah ini adalah akun level-user 3 (koperasi) maka menu yang
tampil hanyalah menu koperasi dan home
*Jika anda hal yang tidak dapat dimengerti anda bisa mengunjungi video tutorial dibawah ini.
https://www.youtube.com/watch?v=teKSmjxpmS0&list=PLYfaT5HP5yRrJAM_rWDG1Nyy
bChmxodJl (Youtube : Padang Tekno)