MODUL 1

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

FRAMEWORK : LARAVEL 9

A. PENDAHULUAN
Laravel merupakan framework PHP paling populer saat ini, Salah satu faktor yang
membuat perkembangan Laravel sedemikian pesat adalah selalu update dengan
kebutuhan programmer. Saking updatenya, setiap tahun akan selalu hadir Laravel
versi terbaru.

Bagi programmer web yang ingin fokus ke back-end PHP (atau memilih jalur full
stack), Laravel menjadi salah satu materi yang wajib dikuasai. Mayoritas lowongan
kerja web programmer back-end di Indonesia mewajibkan paham sampai ke
framework, yang biasanya salah satu dari Code Igniter atau Laravel.

Modul ini berisikan tentang program PHP dengan menggunakan Laravel, sehingga
basic OOP pada pemrograman web sudah wajib dikuasai.

B. INSTALLASI DAN KEBUTUHAN TOOLS

1. Kebutuhan Tools
Pada modul ini kita akan membutuhkan beberapa tools pendukung dalam
pengerjaan project dengan menggunakan Laravel versi 9.

a. Paket Aplikasi Xampp (PHP 8.1.6)

b. Visual Studio Code
c. Composer
d. Sweet Alert 2
e. Bootstrap 5
f. JQuery

Semua kebutuhan tools sudah terdapat pada computer kalian masing-masing.

2. Installasi

Gambar 1 : Halaman Utama Laravel.com

1|R P L - S M K P r e s t a s i P r i m a
 a. Menginstal dengan composer
Menginstal dengan composer mengharuskan kalian untuk terkoneksi dengan
internet, berikut urutan Langkah-langkah dalam menginstal Laravel 9.

Step 1
Pastikan composer sudah terinstal dengan sempurna

Step 2
Pada cmd silahkan kita tentukkan directory untuk menyimpan filenya,
disini kita akan simpan di:

C:\xampp\htdocs

Ketikan sintak berikut untuk menginstal laravel

composer create-project laravel/laravel namaprojectkalian

Untuk format nama project kita samakan seperti ini laravel-namakalian

2|R P L - S M K P r e s t a s i P r i m a
 Proses download Laravel, kecepatan download bergantung pada
kecepatan internet kalian.

b. Menginstal tanpa composer

Menginstal tanpa composer artinya adalah kalian hanya memindahkan atau
meng-copy engine Laravel yang telah di download sebelumnya dengan
composer, seperti berikut:

Gambar di atas merupakah framework Laravel yang masih fresh dan kalian
cukup pindahkan saja ke directory atau tempat penyimpanan yang kalian
mudah untuk diingat.

Kita sepakati Bersama untuk kemudahan silahkan simpan framework Laravel

kalian pada folder htodcs dan diberi nama folder Laravel_namaKalian

C. KONFIGURASI
Berikut adalah file framework Laravel kalian yang telah berhasil di instal

Ada banyak file dan folder pada project pertama kita, namun tidak akan kita bahas
semuanya.

3|R P L - S M K P r e s t a s i P r i m a
 1. Konfigurasi file .env
Silahkan kalian buka aplikasi VS Code, kemudian Open Folder Projek Kalian dan
buka file .env nya:

File .env ini merupakan gerbang konfigurasi awal dimana pengaturan seperti
nama aplikasi, environtment, database, smtp untuk email gateway, cookies dll.

Silahkan kalian ubah file .env menjadi seperti ini:

2. Running Aplikasi (Local Server Development)

Laravel sendiri memiliki local server development yang artinya kalian tidak harus
menyimpan project kalian di dalam folder htdocs melainkan dapat disimpan
dimana saja.

Pada Aplikasi VS Code, silahkan kalian buka terminal dengan cara ketik tombol
Ctrl + Shift + ~ atau klik Menu Terminal > New Terminal.

4|R P L - S M K P r e s t a s i P r i m a
 Ketikan sintak berikut:

php artisan serve

Dengan seperti ini kita berhasil menjalankan local server development Laravel.
Silahkan kalian buka browser kemudian ketikkan di address bar seperti berikut:

Localhost:8000
Apabila berhasil maka akan muncul tampilan awal Laravel 9 seperti berikut:

Selamat kalian telah berhasil menginstal framework Laravel pada computer

kalian, tapi jangan dulu berbangga dan berbesar hati, maaf kita baru mau mulai.

Let’s Go //

5|R P L - S M K P r e s t a s i P r i m a
D. MENGENAL ROUTING
Untuk menentukkan sebuah file dapat di akses melalui URL kita sebut dengan
route.

Pada Laravel file route yang kita punya ada di folder routes > web.php
Berikut tampilan file web.php

Route yang terdaftar diatas artinya adalah apabila root dari aplikasi kita diakses
maka akan menampilkan view berupa halaman dengan nama welcome.blade.php
file tersebut berada pada folder resources > views

Mengapa penulisannya hanya welcome saja? sementara nama filenya adalah

welcome.blade.php, karena Laravel sudah mempermudah kita dalam pemanggilan
view berikut adanya blade engine yang akan kita bahas lebih lanjut di modul ke-2.

Contoh:

Pada route ini, kalian dapat menyimpulkan ketika user melakukan request about
maka akan menampilkan halaman about.blade.php, namun apa yang terjadi apabila
file view nya tidak ada?

6|R P L - S M K P r e s t a s i P r i m a
E. DATABASE MIGRATION
Buatlah database baru pada phpMyAdmin dengna format nama db_namaKalian

Pada modul ini kita akan membuat sebuah database untuk inventory barang dan
memanfaatkan fitur database migration yang dimiliki laravel, silahkan buka terminal
baru pada Visual Studio Code (Ctrl + Shift + `) atau klik menu terminal > new
terminal.

Ketikan sintaks berikut pada terminal:

php artisan make:migration create_supplier_table

Keterangan:
Pada sintaksis di atas menjelaskan bahwa kita akan membuat sebuah table dengan
nama supplier

Pembuatan migration supplier berhasil di buat sekarang kita akan tambahkan

beberapa field pada table tersebut dengan membuka file yang terdapat pada folder
database > migration > file baru

Pada gambar di samping, terdapat file baru

dengan prefix 2022, ini adalah file untuk table
supplier yang tadi kita buat.

7|R P L - S M K P r e s t a s i P r i m a
 Berikut tampilan dari file table yang baru kita buat:

Ubah file tersebut menjadi seperti berikut:

Jangan lupa save setelah kalian rubah file tersebut.

Sekarang kita akan lakukan migrasi table yang kita buat kedalam basis data. Buka
terminal Kembali ketikkan sitanks:

php artisan migrate

Apabila proses migrasi berhasil bisa kita pastikan pada phpMyAdmin table yang
kita buat juga sudah berhasil tercipta:

8|R P L - S M K P r e s t a s i P r i m a
F. MENGENAL MODEL
Pada tahap selanjutnya kita akan berkenalan terkait pembuatan model, masih
dengan cara yang sama kita akan membuat model dengan menggunakan sintaks
berikut:

Buka Kembali terminal

php artisan make:model Supplier

Apabila berhasil maka akan tercipta file baru pada folder Models dengan nama
Supplier.php

Keterangan:
Hubungan antara nama model dengan table di database, secara default model akan
dapat membaca table secara otomatis apabila penamaan table menggunakan sifat
jamak (table = plural/jamak, model = singular/single).

Contoh:

Nama Tabel Nama Model

users User
penggunas Pengguna
barangs Barang
admins Admin
suppliers Supplier

Sehingga apabila nama table kalian tidak jamak atau bahkan nama table dengan
nama model berbeda maka, kita harus memberitahu Laravel untuk nama table nya
seperti berikut:

9|R P L - S M K P r e s t a s i P r i m a
G. MENGENAL CONTROLLER
Baik, selanjutnya kita langsung ke pembuatan controller, ketikkan sintaks berikut
pada terminal.

php artisan make:controller Supplier

Apabila berhasil maka akan tercipta file baru pada folder controller dengan nama
Supplier.php

10 | R P L - S M K P r e s t a s i P r i m a
 Baik controller disini berfungsi untuk menjembatani antara model dengan view
namun pada controller kita juga langsung bisa mengirim data kepada views.

Menampilkan data dari Controller ke View secara sederhana

Ubah file controller supplier kalian menjadi seperti berikut:

Kemudian pada file routes kita ubah menjadi seperti ini:

Pada baris ke-6, root aplikasi kita arahkan ke controller Supplier, method index,
mohon diperhatikan juga pada baris ke-3, karena kita menggunakan controller
Supplier seperti dasar pada konsep OOP maka wajib di deklarasikan.

Apabila berhasil maka akan tampil seperti berikut:

11 | R P L - S M K P r e s t a s i P r i m a
H. CRUD PADA LARAVEL 9
Setelah kalian berkenalan dengan MVC yang ada pada Laravel, sudah cukup
pemanasannya ya, tapi kita batasi terlebih dahulu bahwa pada modul pertama ini
kita belum menyertakan CSS sama sekali pada tampilan web kita, sehingga masih
sangat terasa polos banget.

1. Membaca Data dari Database

Pada step ini karena database kita tidak terdapat memiliki data sama sekali di
table supplier, silahkan isi dulu secara manual, seperti berikut:

Sekarang kita sudah memiliki data yang akan kita tampilkan pada aplikasi web-
nya.

Buka Kembali controller Supplier

Ubah menjadi seperti berikut:

12 | R P L - S M K P r e s t a s i P r i m a
 Selanjutnya, buatlah file baru dengan nama supplier.blade.php pada folder
resources > views

Dengan kodingan seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Supplier</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Telepon</th>
<th>Aksi</th>
</tr>
@php
$no=1
@endphp
@foreach ($supplier as $row)
<tr>
<td>{{$no++}}</td>
<td>{{$row->namaSupplier}}</td>
<td>{{$row->alamatSupplier}}</td>
<td>{{$row->telpSupplier}}</td>
<td>Edit | Hapus</td>
</tr>
@endforeach
</table>
</body>
</html>

13 | R P L - S M K P r e s t a s i P r i m a
 Silahkan running Kembali aplikasi kalian, apabila berhasil maka akan muncul
seperti berikut:

Keterangan:
• Penggunaan @ pada koding php seperti pada halaman supplier.blade.php di
atas dapat berfungsi karena menggunakan blade engine
• {{ }} penggunaan tanda ini sama dengan <?= ?> atau <?php echo ?>

2. Menambahkan Data Baru

Selanjutnya kita akan belajar menambahkan data pada aplikasi kita.

Step 1
Buka kembali file model Supplier dan tambhakan satu baris kode baris ke-12
untuk mengizinkan semua field dapat digunakan.

14 | R P L - S M K P r e s t a s i P r i m a
 Step 2
Ubahlah controller Supplier menjadi seperti berikut:
<?php

namespace App\Http\Controllers;

use App\Models\Supplier as ModelsSupplier;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class Supplier extends Controller

{
public function index()
{
$supplier = ModelsSupplier::all();
$data = [
'supplier' => $supplier
];
return view('supplier', $data);
}

public function tambahSupplier()

{
return view('tambahSupplier');
}

public function save(Request $request)

{
// ModelsSupplier::create($request->except(['_token',
'simpan']));
DB::table('supplier')->insert([
'namaSupplier' => $request->namaSupplier,
'alamatSupplier' => $request->alamatSupplier,
'telpSupplier' => $request->telpSupplier,
]);
return redirect()->to(url('/'));
}
}

Terdapat baris program yang diberikan komentar, itu adalah alternatif atau cara
cepat dalam membuat fungsi untuk menambahkan data pada database.

15 | R P L - S M K P r e s t a s i P r i m a
 Step 3
Buatlah view baru dengan nama tambahSupplier.blade.php

Dengan koding berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tambah Data Supplier</title>
</head>
<body>
<table>
<form method="POST" action="{{url('save')}}">
@csrf
Nama Supplier
<input type="text" name="namaSupplier" placeholder="Nama
Supplier"> <br>
Alamat Supplier
<input type="text" name="alamatSupplier" placeholder="Alamat
Supplier"><br>
Telepon Supplier
<input type="text" name="telpSupplier" placeholder="Telp
Supplier"><br> <br>
<input type="submit" name="simpan" value="Simpan" >

</form>
</table>
</body>
</html>
Step 4
Buat routes baru seperti berikut:

16 | R P L - S M K P r e s t a s i P r i m a
 Step 5
Terakhir adalah tambahkan text untuk mengarahkan ke halaman tambah
supplier pada file supplier.blade.php seperti berikut:

Silahkan running kembali aplikasi kalian, apabila berhasil maka aplikasi kalian
sudah bisa tambah data baru.

3. Menghapus Data
Tanpa berlama-lama lagi lanjut kita ke delete data.
Buka kembali controller Supplier kemudian tambahkan satu method berikut
kedalamnya:

Selanjutnya pada file supplier.blade.php pada text “hapus” berikan kode

seperti berikut.

Kita perlu menambahkan routes kembali seperti berikut:

Berikut tampilan dari aplikasi kalian:

Apabila berhasil maka tombol hapus akan berfungsi dengan baik.

17 | R P L - S M K P r e s t a s i P r i m a
 4. Update Data
Silahkan kalian tambahkan kembali dua method pada controller Supplier

Untuk membuat edit data kita perlu membuat 1 file kembali pada view dengan
nama editSupplier.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Edit Data Supplier</title>
</head>
<body>
<table>
<form action="{{url(edit)}}/{{$id}}" method="POST">
@csrf
@method('put')
Nama Supplier
<input type="text" name="namaSupplier" placeholder="Nama
Supplier" value="{{$namaSupplier}}"> <br>
Alamat Supplier
<input type="text" name="alamatSupplier" placeholder="Alamat
Supplier" value="{{$alamatSupplier}}"><br>
Telepon Supplier
<input type="text" name="telpSupplier" placeholder="Telp
Supplier" value="{{$telpSupplier}}"><br> <br>
<input type="submit" name="simpan" value="Simpan" >

Tahap selanjutnya kita daftarkan di routes

</form>
</table>
</body>

18 | R P L - S M K P r e s t a s i P r i m a
 Tahap Terakhir adalah tambahkan link pada text edit pada halaman
supplier.blade.php

Menjadi seperti berikut:

Silahkan jalankan kembali aplikasi kalian

Pastikan semua fungsi berjalan dengan baik dan sempurna, Jika ada kendala
jangan sungkan untuk bertanya kepada pengawas ruang.

Jangan Lupa {{ }} atau ;

19 | R P L - S M K P r e s t a s i P r i m a
I. PENUGASAN
Perhatikan skema basis data berikut:

Kalian telah berhasil membuat table supplier, sekarang silahkan kalian buat semua
table pada skema basis data ini kedalam aplikasi Laravel kalian. Jangan lupa untuk
gunakan kembali trigger supaya dapat memudahkan kalian dalam membuat
aplikasi.

20 | R P L - S M K P r e s t a s i P r i m a