VERSI 3.

0
MEI, 2021

PEMROGRAMAN WEB
FRAMEWORK LARAVEL – MODUL 5

TIM PENYUSUN: AMINUDIN, S.KOM., M.CS

- DWIKY APRIAN ASHARI
- EKO FELIX NUR NOFTIANTO

PRESENTED BY: LAB. TEKNIK INFORMATIKA

UNIVERSITAS MUHAMMADIYAH MALANG
 Laboratorium Teknik Informatika

PEMROGRAMAN WEB

CAPAIAN PEMBELAJARAN MATA KULIAH

1. Mahasiswa mampu menjelaskan dan menerapkan lingkungan yang terdapat di dalam

Framework Laravel.
2. Mahasiswa mampu mengimplementasikan Framework Laravel ke dalam pembuatan
aplikasi sederhana.

SUB CAPAIAN PEMBELAJARAN MATA KULIAH

1. Mahasiswa mampu menerapkan penggunaan library menggunakan Composer yang

terdapat di packagist.org.
2. Mahasiswa mampu melakukan instalasi dan konfigurasi Framework Laravel.
3. Mahasiswa mampu membangun aplikasi sederhana dengan menggunakan
Framework Laravel.
4. Mahasiswa mampu memahami konsep MVC di dalam Framework Laravel ke dalam
pembuatan aplikasi.

KEBUTUHAN HARDWARE & SOFTWARE

Hardware dan Infrastruktur:

Laptop/ PC
Koneksi Internet

Software

Code Editor (Visual Studio Code/Atom/Sublime/PhpStorm/atau lainnya)

XAMPP / Laragon (Web Server, MySql, PHP) - XAMPP direkomendasikan
Composer

Mei, 2021 PEMROGRAMAN WEB 1

 Laboratorium Teknik Informatika

MATERI POKOK

1. Composer
a. Pengertian Composer
Dalam beberapa tahun belakangan, terjadi perubahan yang sangat signifikan
dalam dunia pemrograman php. Yakni munculnya dependencies manager yang
bernama composer. Composer adalah sebuah project open source yang dimotori
oleh Nils Adermann dan Jordi Boggiano. Project composer ini dihost di github
(https://github.com/composer/composer) tercatat sejak tanggal 3 April 2011 dan
masih aktif sampai sekarang. Composer dikenal jugasebagai dependency
management maksudnya dengan menggunakan composer developerdapat
menginstall suatu library melalui composer dan composer akan secara
otomatismenginstall library lain yang dibutuhkan, tanpa perlu mendownload satu
persatu. Mirip denganapt get install di sistem operasi linux, npm yang ada di
dalam NodeJs dan Bundler pada Ruby. Berikut salah satu contoh penggunaan
Composer di dalam pemanggilan suatu library :
Kita punya project yang butuh library. Misalnya, library untuk eksport data ke
Excel yaitu PHPExcel dan DomPDF buat eksport data ke PDF.
Library-library tersebut juga butuh library lainnya. Dalam kasus ini, PHPExcel
butuh libraryext-xml dan DomPDF butuh phenx/php-font-lib. Kasus seperti ini,
namanya dependensi. Jadi, bisa disebut PHPExcel memiliki dependensi ext-
xml.
Karena memang banyak dependency-nya maka, dengan menggunakan
composer libraryyang mempunyai dependency akan secara otomatis diinstall.
Jadi, cara kerja dari composer yaitu kita menuliskan library yang dibutuhkan
di dalam suatu aplikasi kemudian composer akan mencari versi yang sesuai lalu
install secara otomatis berikut dependency dari library tersebut. Dengan
composer, developer tidak repot download library PHP manual satu-persatu.
Begitupun dengan proses update library, tidak perlu diupdate satu-persatu, cukup
diubah satu file (composer.json), jalankan perintah composer update lalu
mengupdate semua library. Cara mempraktekan penggunaan library di dalam
composer akan dipraktekan pada Sub-Bab Lembar Kerja.

b. Cara Kerja Composer

Mei, 2021 PEMROGRAMAN WEB 2

 Laboratorium Teknik Informatika
Cara kerja composer cukup sederhana, nantinya Anda diharuskan untuk
menulis library yang dibutuhkan di sebuah file (composer.json). Kemudian
composer akan mencari dan meng-install library tersebut secara otomatis. Begitu
pula jika terdapat update terbaru pada library yang digunakan, cukup ubah file
composer.json kemudian secara otomatis pula composer akan meng-updatenya.
Pada intinya composer secara tidak langsung membantu developer dalam
meringankan pekerjaannya, karena composer melakukan install maupun update
library secara otomatis.
Sebelum men-download library-library yang kita perlukan, Composer akan:
1. Mengecek apakah library-library ini memerlukan library lain sebagai
dependensinya?
2. Mengecek versi PHP dan module – module PHP yang diperlukan oleh library
– library tersebut.
Setelah kedua proses di atas, Composer mendownload library – library
tersebut ke dalam aplikasi / project kita pada direktori “vendor”. Misalkan versi
PHP yang terinstall di PC kita tidak cocok dengan versi minimum yang
dibutuhkan oleh salah satu library, maka Composer akan memberitahukan
bahwa “spesifikasi minimum tidak terpenuhi”. Atau ketika ada module PHP yang
diperlukan oleh salah satu library belum terinstall atau enabled, Composer juga
akan memberitahukan dan menyarankan kita untuk menginstall/enable module
terlebih dahulu. Jadi selain mengecek dependensi library, Composer juga
membantu mengecek spesifikasi PHP kita apakah cocok atau tidak dengan
kebutuhan library tersebut.

2. Framework Laravel
Framework laravel merupakan salah satu framework PHP berbasis MVC yang
digunakan untuk membangun aplikasi web skala kecil maupun skala besar.
Framework ini dirilis oleh MIT dan disediakan secara gratis di github. Framework ini
dibangun pertama kali oleh Pencetusnya Martin Otwell pada tahun 2011. Meskipun
laravel dapat dikatakan masih relatif baru jika dibandingkan dengan para
pendahulunya yang sudah terkenal dikalangan developer web sebut saja CI (Code
Iginiter), Symfoni, Ruby on Rails, YII dsb. Tetapi laravel mampu bersaing dikancah
persaingan pembuatan aplikasi web menggunakan framework PHP dan telah menjadi
salah satu primadona framework laravel pada perusahaan start-up IT di Indonesia.

Mei, 2021 PEMROGRAMAN WEB 3

 Laboratorium Teknik Informatika
3. Kosnep MVC Framework Laravel
Dicuplik dari Wikipedia konsep Model-View-Controller atau MVC adalah sebuah
metode untuk membuat sebuah aplikasi dengan memisahkan data (Model) dari
tampilan (View) dan cara bagaimana memprosesnya (Controller). Dalam
implementasinya kebanyakan kerangka kerja (framework) dalam aplikasi web adalah
berbasis arsitektur MVC. MVC memisahkan pengembangan aplikasi berdasarkan
komponen utama yang membangun sebuah aplikasi seperti manipulasi data,
antarmuka pengguna, dan bagian yang menjadi kontrol dalam sebuah aplikasi web.
Munculnya konsep MVC inilah yang mendasari lahirnya framework yang elegan,
rata-rata framework yang muncul saat ini basisnya OOP dan MVC. Intinya di dalam
konsep MVC ini ada semacam pemisahan code yang berhubungan dengan aplikasi.
Misalnya saja code yang berhubungan dengan data dimasukan di dalam konsep
Model sedangkan kode yang berhubungan dengan logic aplikasi dihubungkan dengan
konsep Controller lalu code yang berhubungan dengan View semisal HTML, CSS dan
Javascript masuk ke dalam konsep View. Lalu, dibenak kita ada pertanyaan apa
untungnya pemisahan kode seperti itu, jika kita bayangkan kalau kita mengerjakan
proyek yang bisa dikatakan sebagai big-project bagaimana susahnya apabila semua
kode yang berhubungan dengan aplikasi ditampilkan dalam satu file. Tetapi dengan
adanya pemisahan kode ini berakibat dapat membagi mana yang resource yang
berhubungan dengan logic, view dan data dapat dipisahkan menurut dari konsep
tersebut. Di dalam Framework Laravel konsep MVC sudah diterapkan secara baik di
tiap pengelompokanya. Meskipun developer yang baru belajar Laravel pasti dapat
menguasai konsep MVC yang ada di dalam Laravel.

LEMBAR KERJA

1. Composer
a. Instalasi Composer
Cara instalasi composer dapat diakses melalui link berikut
https://www.malasngoding.com /cara-install-composer/. Setelah selesai menginstall
composer, buka command prompt (windows) atau terminal (linux) lalu ketikan
‘composer’, jika sudah terinstall dengan benar maka composer akan menampilkan
seperti pada gambar berikut :

Mei, 2021 PEMROGRAMAN WEB 4

 Laboratorium Teknik Informatika

Note : Untuk contoh pada modul ini menggunakan sistem operasi Ubuntu, namun
dalam praktiknya akan tetap sama saja dengan Windows.

b. Cara Menggunakan Library di Composer

Untuk mempelajari bagaimana cara menggunakan composer ini berdasarkan dari
teori yang sudah dibahas diatas, maka di dalam lembar kerja ini akan dicontohkan
sebuah kasus penggunaan composer. Library yang akan digunakan adalah library
Carbon. Library ini digunakan untuk memanipulasi tampilan objek DateTime. Pernah
melihat tampilan tanggal “2 hour ago”, “2 minutes ago” atau “A month ago” di web?
Itu salah satu fungsi dari Carbon. Untuk mendapatkan package dengan Composer,
1. Pertama kita kunjungi ke pusat package, kunjungi di https://packagist.org/.
Setelah terbuka, ketikkan “carbon” di kotak pencarian dan klik pada hasil
pertama yang muncul yaitu “nesbot/carbon”.

Mei, 2021 PEMROGRAMAN WEB 5

 Laboratorium Teknik Informatika

versi

2. Untuk install package carbon tersebut, buat folder di dalam htdocs missal
dengan nama contohComposer. Di dalam folder contohComposer
tersebut, buatlah file baru bernama composer.json kemudian isikan script
berikut :
{
"require" : {
"nesbot/carbon" : "2.47.0"
}
}

Script tersebut digunakan untuk memanggil package carbon dengan versi

yang telah di cantumkan.

3. Selanjutnya, untuk mendownload package tersebut, masuk ke command

prompt atau terminal arahkan ke folder contohComposer yang berada di
dalam folder projek kalian lalu ketikan perintah composer install .

Mei, 2021 PEMROGRAMAN WEB 6

 Laboratorium Teknik Informatika

4. Apabila sudah benar dan selesai cara instalasinya maka, di dalam folder
contohComposer akan terbentuk beberapa file dan folder baru. Berikut
penjelasan file dalam folder itu:
composer.json, ini file yang kita buat, berisi dependensi library dari
project kita.
composer.lock, file ini mencatat versi package yang saat ini terinstal.
vendor, folder ini berisi package yang telah kita install. Setiap package
yang kita tulis di bagian require akan di download ke folder ini.
vendor/autoload.php, berfungsi memanggil autoloader dari composer.

Salah satu keunggulan dari composer adalah autoloader. Fitur ini berfungsi
untuk memanggil class yang sesuai ketika kita membutuhkan class dari suatu
library. Jadi, jika banyak library yang kita install kita hanya cukup menulis
require untuk file vendor/autoload.php. Dan, autoload ini cukup cerdas
dengan hanya me-load class yang kita butuhkan.

5. Untuk mempraktekan penggunaan package Carbon, buat file dengan

index.php di dalam folder contohComposer kemudian isikan script berikut :

<?php
require 'vendor/autoload.php';

Mei, 2021 PEMROGRAMAN WEB 7

 Laboratorium Teknik Informatika
use Carbon\Carbon;
date_default_timezone_set('Asia/Jakarta');
$date = Carbon::parse('1945-8-17');
printf("Kapan Indonesia Merdeka? %s\n",$date->diffForHumans());
?>

6. Jalankan index.php tersebut melalui web browser, menggunakan url

http://localhost/ contohComposer/.

7. Ketika developer akan menambahkan library, misalnya library yang

ditambahkan berhubungan dengan text mining dalam hal ini untuk mengolah
kata, menghilangkan imbuhannya biasanya disebut juga dengan stemming,
packagist.org telah menyediakan package tersebut dengan nama sastrawi.
Misalnya, kita akan menambahkan menambahkan library tersebut, edit
composer.json kemudian tambahkan package sastrawi.

{
"require": {
"nesbot/carbon": "2.47.0",
"sastrawi/sastrawi": "1.2.0"
}
}

8. Kemudian command prompt, dan diingat masih dalam direkroti

contohComposer ketikan perintah composer update.

Mei, 2021 PEMROGRAMAN WEB 8

 Laboratorium Teknik Informatika

9. Untuk menerapkan package sastrawi ke dalam suatu program, Buat file baru
dengan nama index2.php, di dalam directory contohComposer, lalu isikan
script berikut:
<?php
require 'vendor/autoload.php';

$stemmerFactory = new Sastrawi\Stemmer\StemmerFactory();

$stemmer = $stemmerFactory->createStemmer();

$sentence = 'Perekonomian Indonesia sedang dalam pertumbuhan yang memba

nggakan';
$output = $stemmer->stem($sentence);
echo $output . "\n";
?>

10.Jalankan index2.php melalui web browser dengan url

http://localhost/contohComposer /index2.php.

2. Instalasi dan Konfigurasi Laravel

a. Kebutuhan Instalasi Laravel
Agar versi terbaru Laravel dapat diinstal di computer local, dibutuhkan
beberapa requirement sebagai berikut :

● PHP >= 7.3 (PHP 8 direkomendasikan)

Mei, 2021 PEMROGRAMAN WEB 9
 Laboratorium Teknik Informatika
● BCMath PHP Extension

● Ctype PHP Extension

● Fileinfo PHP extension

● JSON PHP Extension

● Mbstring PHP Extension

● OpenSSL PHP Extension

● PDO PHP Extension

● Tokenizer PHP Extension

XML PHP Extension paling penting, namun jika kalian telah menginstall XAMPP,
maka hal tersebut sudah otomatis terinstall semuanya, usahakan menginstall XAMPP
versi terbaru, namun jika kalian menggunakan sistem operasi linux, kalian harus install
manual seluruh extension yang dibutuhkan oleh Laravel. Untuk instalasi Laravel 8 kalian
juga harus perhatikan versi PHP yang telah terinstall pada local telah sesuai dengan
requirement minimal Laravel. Untuk mengecek versi PHP yang telah di-install dapat di
cek melalui terminal atau command prompt dengan command “php -v”. (Jangan lupa
untuk menghidupkan apache di web server kalian, XAMPP atau Laragon)

(PHP versi 8.0.3)

b. Instalasi dan Konfigurasi Laravel

1. Untuk melakukan instalasi Laravel, kita dapat memanfaatkan composer sebagai

Dependency Manager kita, untuk mengambil seluruh vendor yang ada di Laravel.
Silahkan masuk ke directory projek kalian (bebas dimanapun), kemudian ketikan
perintah berikut :

composer create-project laravel/laravel nama-project-kalian

Mei, 2021 PEMROGRAMAN WEB 10
 Laboratorium Teknik Informatika

Secara otomatis di dalam directory projek kalian akan terbuat satu project
atau folder dengan nama nama-project-kalian beserta dengan dependency
nya.

Proses ini membutuhkan waktu yang lumayan lama, tergantung kecepatan

internet kalian, dan tentunya jika kalian sebelumnya sudah pernah menginstall
Laravel, maka akan lebih cepat untuk meretrieve dependency yang
dibutuhkan oleh Laravel.

2. Masih pada command prompt, pindah ke direktori projek yang baru terbuat
dengan perintah :

cd nama-project-kalian

Setelah berada di direktori projek ketikkan perintah:

php artisan serve

Mei, 2021 PEMROGRAMAN WEB 11

 Laboratorium Teknik Informatika

3. Buka web browser kemudian jalankan : http://localhost:8000/

4. Untuk mengetahui fungsi dari masing-masing directory yang terbentuk dari

langkah nomor 1, dapat diakses melalui alamat web resmi Laravel berikut
https://laravel.com/docs/8.x/structure.

5. Perlu diperhatikan bahwa ada beberapa directory yang akan sering digunakan
atau diedit di dalam membuat aplikasi menggunakan Laravel, diantaranya :
a. routes/web.php directory ini digunakan untuk mengarahkan suatu
resource tertentu, untuk cara penulisan dapat diakses di alamat berikut
https://laravel.com/docs/8.x/routing
b. resources/views direktori ini khusus untuk menangani tampilan di sisi
user (frontend) cara pembuatan view dapat di akses di halaman berikut
https://laravel.com/docs/8.x/views
c. app/Http/Controllers directory ini untuk menangani proses logic dan
menghubungkan antara model dengan views, adapun cara pembuatan

Mei, 2021 PEMROGRAMAN WEB 12

 Laboratorium Teknik Informatika
controller dapat diakses di halaman berikut
https://laravel.com/docs/8.x/controllers
d. app/Models directory ini digunakan untuk file model, di mana file model
berhubungan dengan scripting data, cara pembuatan model dapat diakses
di halaman berikut https://laravel.com/docs/8.x/eloquent

c. Contoh Aplikasi Sederhana Menggunakan MVC di dalam Laravel

Di dalam contoh aplikasi ini akan dipraktekan cara menampilkan data dari
database dengan menggunakan konsep MVC yang ada di dalam Framework
Laravel. Untuk itu mohon diikuti langkah-langkah sebagai berikut :

1. Pembuatan Database
Buat database melalui phpMyAdmin atau MySql, contoh database yang
dibuat dengan nama ‘latihan-web. Caranya:
a)Buka http://localhost/phpmyadmin/
b)Tekan tombol new atau baru

c) Isi nama database, dalam contoh ini ‘latihanweb_db’, lalu tekan buat/create.

Mei, 2021 PEMROGRAMAN WEB 13

 Laboratorium Teknik Informatika

2. Buka folder projek kalian di code editor

Langkah ini akan berbeda jika kalian menggunakan code editor selain
Visual Studio Code, namun tidak masalah, seluruh code editor memiliki
kelebihannya masing-masing. Untuk yang menggunakan Visual Studio Code,
dapat dibuka Visual Studio Code nya, lalu klik File > Open Folder > Lalu cari
folder projek kalian yang telah dibuat sebelumnya > Ok.
Tambahan : Jika kalian menggunakan Visual Studio Code, kalian dapat
memanfaatkan fitur terminal sebagai command prompt kalian. Dengan cara
klik Terminal > New Terminal (ctrl + shift + `)

Fitur ini sangat berguna untuk kalian menjalankan perintah-perintah yang

ada di Terminal, seperti misalnya perintah “php artisan serve” yang telah
kalian lakukan sebelumnya, kalian dapat mengeksekusinya disini, lalu kalian

Mei, 2021 PEMROGRAMAN WEB 14

 Laboratorium Teknik Informatika
buat terminal baru lagi untuk eksekusi perintah selanjutnya. Dengan ini kalian
tidak perlu pindah-pindah dari Visual Studio Code ke command prompt. (Jika
kalian menggunakan code editor lainnya, kalian dapat menyesuaikan dengan
code editor kalian masing-masing)

3. Buka file .env

File .env digunakan untuk menghubungkan antara database dengan Laravel,

kemudian ganti bagian DB_DATABASE sesuai dengan nama database yang
telah dibuat sebelumnya

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

Secara default isian parameter database di file .env (DB_HOST,

DB_DATABASE, DB_USERNAME, DB_PASSWORD) akan sesuai dengan credential
database MySQL dan PostgreSQL yang telah terinstall. Kita juga dapat
mengecek, koneksi antara database dengan Laravel dengan cara masuk ke
folder project, kemudian menggunakan tinker untuk menjalankan beberapa
perintah pengecekan database sudah bisa digunakan atau tidak. Ketikan
perintah php artisan tinker pada Terminal.

Ketikkan perintah “exit” untuk keluar dari tinker, namun sebelumnya pastikan
database kalian telah terkoneksi dengan Laravel, seperti di atas.

Mei, 2021 PEMROGRAMAN WEB 15

 Laboratorium Teknik Informatika
4. Membuat Migrate

(Desain database yang akan kita gunakan di latihan modul ini)

Untuk membuat table baru dengan migration, kita harus membuat file
migration terlebih dahulu dengan perintah :

php artisan make:migration create_namatabel_table

Mari kita buat migration untuk membuat table products dan suppliers:

php artisan make:migration create_suppliers_table

php artisan make:migration create_products_table

Mei, 2021 PEMROGRAMAN WEB 16

 Laboratorium Teknik Informatika

Secara otomatis maka di dalam directory database/migration akan ter-

create satu file dengan nama yanng sesuai dengan perintah yang kita
masukkan sebelumnya. Buka file kedua file tersebut, file tersebut
digunakan untuk membuat table dengan menggunakan script PHP, ini
yang dinamakan dengan migration. Kemudian edit dibagian fungsi up
dengan menambahkan field yang dibutuhkan sesuai dengan desain
database yang sudah ada pada sebelumnya di latihan migration atas.

Suppliers migration

public function up()

{
Schema::create('suppliers', function (Blueprint $table) {
$table->id();
$table->string('name', 100);
$table->string('telp', 15);
$table->timestamps();
});
}

Suppliers products

public function up()

Mei, 2021 PEMROGRAMAN WEB 17

 Laboratorium Teknik Informatika
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->foreignId('supplier_id')
->references('id')
->on('suppliers')
->onDelete('cascade')
->onUpdate('cascade');
$table->string(‘name’, 100);
$table->double('price', 10, 4);
$table->integer('stock')->default(0);
$table->timestamps();
});
}

Dari kode di atas dapat kita dapat melihat untuk membuat sebuah field
yang bertipe data varchar (sesuai dengan desain database sebelumnya) kita
bisa menggunakan script “$table->string(‘nama_field’, length)”, lalu adapun
juga “$table->timestamps()”, bawaan dari Laravel ini akan me-generate
sebuah field created_at dan updated_at secara otomatis, jadi kalian tidak perlu
untuk create manual untuk kedua field ini, cukup dengan script tersebut, sama
juga dengan field id, kalian hanya perlu untuk menggunakan method id.
Adapun method “foreignId” yang digunakan untuk pembuatan sebuah foreign
key dengan diikuti oleh references dan on yang mengartikan field pada tabel
parent yang akan dibuat foreign key nya pada tabel products.
Ada sangat banyak method untuk membuat field yang didukung oleh
Blueprint, karena pada method up kita membuat tabel baru, maka pada
method down kita harus menghapus table tersebut menggunakan method
Schema::dropIfExist() dengan parameter nama table yang akan kita hapus.
Untuk menjalankan perintah artisan kita dapat menggunakan perintah php
artisan migrate. Kemudian lihat di http://localhost/phpmyadmin/.

Mei, 2021 PEMROGRAMAN WEB 18

 Laboratorium Teknik Informatika

Tipe kolom yang dapat digunakan migrations

bigIncrements increments nullableTimestamps timestampsTz

bigInteger integer nullableUuidMorphs timestamps

binary ipAddress point tinyIncrements

boolean json polygon tinyInteger

char jsonb rememberToken tinyText

dateTimeTz lineString set unsignedBigInteger

dateTime longText smallIncrements unsignedDecimal

date macAddress smallInteger unsignedInteger

mediumIncremen
decimal softDeletesTz unsignedMediumInteger
ts

double mediumInteger softDeletes unsignedSmallInteger

enum mediumText string unsignedTinyInteger

float morphs text uuidMorphs

foreignId multiLineString timeTz uuid

geometryCollection multiPoint time year

geometry multiPolygon timestampTz

id nullableMorphs timestamp

Modifier Deskripsi

->after('column') Menempatkan kolom setelah kolom lain (MySQL)

Membuat tipe data integer auto-increment

->autoIncrement()
(primary key)

->charset('utf8mb4') Menentukan character set pada column (MySQL)

Menentukan collation pada column

->collation('utf8mb4_unicode_ci')
(MySQL/PostgreSQL/SQL Server).

Add a comment to a column

->comment('my comment')
(MySQL/PostgreSQL).

->default($value) Menentukan default value pada kolom

->first() Membuat kolom berada pada kolom pertama tabel.

Mei, 2021 PEMROGRAMAN WEB 19

 Laboratorium Teknik Informatika

Menentukan angka mulai dari auto increment

->from($integer)
(MySQL / PostgreSQL).

Menentukan tabel untuk dapat menyimpan data

->nullable($value = true)
yang tidak mempunyai nilai/nilai kosong (NULL).

Membuat sebuah kolom yang sudah tergenerate

->storedAs($expression)
dari sebuah ekspresi (MySQL).

Membuat column INTEGER memiliki value yang

->unsigned()
UNSIGNED (MySQL).

Menentukan kolom TIMESTAMP memiliki value

->useCurrent() CURRENT_TIMESTAMP atau waktu sekarang
pada default value kolom.

Menentukan kolom TIMESTAMP memiliki value

->useCurrentOnUpdate() CURRENT_TIMESTAMP atau waktu sekarang
pada default value kolom.

->virtualAs($expression) Membuat virtual generated kolom (MySQL).

Untuk lebih lengkapnya dapat membaca dokumentasi resmi di situs Laravel :

https://laravel.com/docs/8.x/migrations
Ketika menjalankan perintah php artisan migrate. Jika kemudian muncul
error Illuminate\Database\QueryException (jika tidak menemui error, boleh
dilewati langkah ini) maka cara penanganannya adalah :
Buka file app/Providers/AppServiceProvider.php, kemudian edit method boot.
Tambahkan script yang di bold berikut :

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider

{
.....
public function boot()
{

Mei, 2021 PEMROGRAMAN WEB 20

 Laboratorium Teknik Informatika
Schema::defaultStringLength(255);
}
}

Jalankan kembali perintah php artisan migrate. Kalau sudah sukses,

sekarang lihat database latihanweb_db, maka akan muncul beberapa table baru di
dalamnya

(Jika migration berhasil, maka akan memiliki output seperti di atas)

Kita dapat memeriksa hasil dari migration tabel tersebut dengan

phpmyadmin, lalu kita cek di bagian designer untuk memeriksa kembali bahwa
skema database kita sudah sesuai dengan desain database sebelumnya. Caranya
dengan membuka http://localhost/phpmyadmin lalu pilih database
latihanweb_db, lalu pilih Lainnya atau More lalu klik Designer

(latihanweb_db pada phpmyadmin)

Dari skema di atas, kita sebenarnya telah berhasil untuk membuat seluruh tabel
yang dibutuhkan sesuai dengan desain database kita sebelumnya, namun ada hal
lain yang perlu kita periksa kembali, yaitu hubungan antara kedua tabel Suppliers

Mei, 2021 PEMROGRAMAN WEB 21

 Laboratorium Teknik Informatika
dan Products, karena ini akan menentukan berhasil tidaknya kita dalam membuat
sebuah relationship pada migrations di langkah sebelumnya tadi.

(latihanweb_db pada designer phpmyadmin)

Dapat kita lihat di atas, bahwa adanya suatu hubungan (relationship)

antara products dan suppliers table, dengan hubungan One-to-Many
antara Suppliers dengan Products dan begitu pula sebaliknya.
Sebenarnya kita dapat langsung membuat data baru menggunakan
phpMyAdmin dengan fitur insert, namun kita tidak akan menggunakan
cara ini, kita akan menggunakan tinker lagi di langkah berikutnya.

5. Membuat Model
Membuat model untuk mengatur penggunaan data di dalam Laravel,
dengan cara ketikan perintah di terminal :

php artisan make:model Supplier

php artisan make:model Product

Mei, 2021 PEMROGRAMAN WEB 22

 Laboratorium Teknik Informatika

Maka secara otomatis akan terbentuk file dengan nama Supplier.php dan
Product.php di directory \app\Models. Secara default model akan
terkoneksi dengan table dengan nama yang sama dengan nama model tetapi
berimbuhan s. Misal jika membuat model bernama Product dan Supplier
maka otomatis akan terkoneksi dengan table pada database yang memiliki
nama tabel products dan suppliers.
Buka file Supplier.php dan Product.php, tambahkan kode berikut :

Supplier.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Supplier extends Model

{
use HasFactory;
protected $guarded = [];

public function products(){

return $this->hasMany(Product::class);
}
}

Product.php

<?php

namespace App\Models;

Mei, 2021 PEMROGRAMAN WEB 23

 Laboratorium Teknik Informatika

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model

{
use HasFactory;
protected $guarded = [];

public function suppliers(){

return $this->belongsTo(Supplier::class);

}
}

Kode di atas merupakan sebuah konfigurasi Model yang menyesuaikan dari

tabel yang telah dibuat pada database. Guarded pada Model berfungsi untuk
membatasi Model dalam inputan data pada kolom tertentu, karena kita ingin
seluruh kolom dapat diisi dengan baik, maka dari itu kita dapat set guarded
menjadi null atau array kosong ([]). Lalu untuk function yang ada di setiap class
merupakan gambaran dari relationship dari kedua tabel, class Supplier
mengembalikan hasMany terhadap kelas Product lalu untuk Product
mengembalikan belongsTo terhadap kelas Supplier, keduanya menggambarkan
sebuah relasi antar tabel yaitu One-to-Many seperti penjelasan sebelumnya. (Baca
dokumentasi lengkap terkait Eloquent Relationship di situs resmi Laravel
berikut : https://laravel.com/docs/8.x/eloquent-relationships)
Jika telah berhasil membuat Models, kita dapat menguji Model tersebut
untuk menambahkan data baru menggunakan tinker. Caranya seperti biasanya,
buka terminal lalu ketikkan perintah “php artisan tinker”, lalu ikuti langkah
berikut ini :

Mei, 2021 PEMROGRAMAN WEB 24

 Laboratorium Teknik Informatika

Dapat kita lihat di atas, kita dapat membuat sebuah instantiate dari sebuah Model
class untuk membuat sebuah data baru, sebenarnya tidak terbatas untuk itu,
dengan tinker kita juga dapat memanfaatkan untuk menghapus data atau
mengubah data pada tabel, namun dengan catatan Model harus dibuat dahulu.
Kita dapat melihat data yang baru dimasukkan di phpmyadmin, seperti berikut ini

(Tabel suppliers)

Mei, 2021 PEMROGRAMAN WEB 25

 Laboratorium Teknik Informatika

(Tabel products)

Jika data berhasil masuk, maka pembuatan Model kita telah berhasil terkoneksi
dengan database.

6. Membuat Controller
Untuk membuat controller di dalam project ini, seperti biasanya masuk ke
terminal lalu ketikan perintah :

php artisan make:controller SupplierController --resource

php artisan make:controller ProductController --resource

Maka secara otomatis di dalam directory app/Http/Controllers akan

terbentuk file dengan nama SupplierController.php dan

Mei, 2021 PEMROGRAMAN WEB 26

 Laboratorium Teknik Informatika
ProductController.php, lalu buka file tersebut dan perhatikan secara
otomatis akan ada beberapa fungsi diantaranya index(), create(), store() dll,
dan tambahkan kode berikut di dalam fungsi index() di masing-masing file :

SupplierController.php

public function index()

{
return view(suppliers.index');
}

ProductController.php

public function index()

{
return view('products.index');
}

7. Membuat Routing
Buka file web.php pada directory routes/web.php, hapus seluruh routing
yang ada lalu tambahkan kode berikut :

Route::get('/', function () {
return view('index');
})->name(‘dashboard.index’);
Route::resource('suppliers', SupplierController::class);
Route::resource('products', ProductController::class);

Jika telah berhasil membuat routingnya, selanjutnya kita periksa daftar routingnya
menggunakan terminal dengan perintah “php artisan route:list”.

Mei, 2021 PEMROGRAMAN WEB 27

 Laboratorium Teknik Informatika
Dengan Route::resource Laravel akan otomatis membuat routing CRUD, dengan
standarisasi URI dari Laravel. Namun jika kalian ingin membuat routing manual,
kalian dapat memanfaatkan routing berdasarkan methodnya, misalnya Route::get,
Route::post, Route::put, Route::delete, dan sebagainya.

8. Membuat View
Dalam latihan ini, kita menggunakan AdminLTE sebagai template
dashboard admin agar lebih cepat untuk proses developmentnya dan juga
template ini tersedia secara gratis, kalian dapat download di https://adminlte.io/.
Jika telah mengunduh template tersebut, silakan buka file zip adminlte dan
pindahkan seluruh folder (css, js, img) yang berada pada folder dist dan folder
plugins yang berada di root folder template ke dalam direktori public projek
kalian dan pindahkan file index.html pada adminlte ke dalam direktori-
projek/resources/views setelah itu silakan ubah nama file index.html menjadi
index.blade.php

Lalu buka file index.blade.php, silakan untuk melakukan refactoring code

terhadap code yang menghubungkan ke asset local, sesuaikan dengan URL nya,

Mei, 2021 PEMROGRAMAN WEB 28

 Laboratorium Teknik Informatika
jika url URL tersebut mengarahkan ke plugins, maka arahkan ke local asset
plugins, jika mengarahkan ke dist, maka arahkan ke root dari folder public, karena
kita tidak mempunyai nama folder dist di dalam folder public, seperti berikut ini :

Ubah menjadi seperti ini :

(Ingat: ubah untuk kode lainnya juga, gambar di atas hanya contoh saja)

Jika seluruh proses refactoring selesai, maka kalian dapat membuka kembali
webnya di http://127.0.0.1:8080 dan akan memiliki tampilan seperti berikut :

Mei, 2021 PEMROGRAMAN WEB 29

 Laboratorium Teknik Informatika

Untuk selanjutnya, kita buat sebuah master layouts, untuk membuat

sebuah template dari mayoritas views yang akan kita buat, hal ini bertujuan untuk
meringkas code dan juga untuk kemudahan ketika refactoring code, karena kita
hanya mempunyai satu file master yang akan mempengaruhi code lainnya, jadi
jika ada perubahan kode, kita hanya perlu merubah kode yang ada di master saja.
Pertama, buatlah folder bernama layouts di dalam folder views, lalu buatlah
sebuah file yang bernama master.blade.php dan salin seluruh kode yang berada
di index.blade.php dan tempelkan ke file master.blade.php yang telah dibuat.

Setelah itu, coba breakdown mana header, footer, dan sidebarnya, karena
komponen ini bersifat statis, maka kita perlu menaruhnya di master, dan konten

Mei, 2021 PEMROGRAMAN WEB 30

 Laboratorium Teknik Informatika
yang dinamis akan kita ganti sebagai @yield(‘nama_yield’). Seperti gambar
berikut :

Lalu setelah itu sesuaikan menu yang berada di sidebar sesuai dengan kebutuhan,
disini kita hanya memberikan 3 menu, yaitu Dashboard, Products, dan Suppliers.
Maka untuk seluruh kode master.blade.php setelah melalui proses pemilahan
dan penghapusan kode yang tidak diperlukan, menjadi seperti berikut :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TOKO PETRIK | @yield('title')</title>

<!-- Google Font: Source Sans Pro -->

<link rel="stylesheet"

href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="{{ asset('plugins/fontawesome-free/css/all.min.css') }}">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet"
href="{{ asset('plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css') }}">
<!-- iCheck -->
<link rel="stylesheet" href="{{ asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
<!-- JQVMap -->
<link rel="stylesheet" href="{{ asset('plugins/jqvmap/jqvmap.min.css') }}">
<!-- Theme style -->
<link rel="stylesheet" href="{{ asset('css/adminlte.min.css') }}">
<!-- overlayScrollbars -->
<link rel="stylesheet"
href="{{ asset('plugins/overlayScrollbars/css/OverlayScrollbars.min.css') }}">
<!-- Daterange picker -->
<link rel="stylesheet" href="{{ asset('plugins/daterangepicker/daterangepicker.css') }}">

Mei, 2021 PEMROGRAMAN WEB 31

 Laboratorium Teknik Informatika
<!-- summernote -->
<link rel="stylesheet" href="{{ asset('plugins/summernote/summernote-bs4.min.css') }}">
@stack(‘css’)
</head>

<body class="hold-transition sidebar-mini layout-fixed">

<div class="wrapper">

<!-- Preloader -->

<div class="preloader flex-column justify-content-center align-items-center">
<img class="animation__shake" src="{{ asset('img/AdminLTELogo.png') }}" alt="AdminLTELogo"
height="60"
width="60">
</div>

<!-- Navbar -->

<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#"
role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
</ul>
</nav>
<!-- /.navbar -->

<!-- Main Sidebar Container -->

<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="index3.html" class="brand-link">
<img src="{{ asset('img/AdminLTELogo.png') }}" alt="AdminLTE Logo"
class="brand-image img-circle elevation-3" style="opacity: .8">
<span class="brand-text font-weight-light">Toko Petrik</span>
</a>

<!-- Sidebar -->

<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">

Mei, 2021 PEMROGRAMAN WEB 32

 Laboratorium Teknik Informatika
<img src="{{ asset('img/user2-160x160.jpg') }}" class="img-circle elevation-2"
alt="User Image">
</div>
<div class="info">
<a href="#" class="d-block">Admin</a>
</div>
</div>

<!-- SidebarSearch Form -->

<div class="form-inline">
<div class="input-group" data-widget="sidebar-search">
<input class="form-control form-control-sidebar" type="search"
placeholder="Search"
aria-label="Search">
<div class="input-group-append">
<button class="btn btn-sidebar">
<i class="fas fa-search fa-fw"></i>
</button>
</div>
</div>
</div>

<!-- Sidebar Menu -->

<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview"
role="menu"
data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item">
<a href="{{route('dashboard.index')}}" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
</p>
</a>
</li>
<li class="nav-item">
<a href="{{route('products.index')}}" class="nav-link">
<i class="nav-icon fas fa-box-open"></i>
<p>
Products
</p>
</a>
</li>
<li class="nav-item">
<a href="{{route('suppliers.index')}}" class="nav-link">
<i class="nav-icon fas fa-shopping-basket"></i>

Mei, 2021 PEMROGRAMAN WEB 33

 Laboratorium Teknik Informatika
<p>
Suppliers
</p>
</a>
</li><li class="nav-item">
<a href="{{ route('dashboard.index') }}" class="nav-link
{{Request::is('/') ? 'active' : ''}}">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
</p>
</a>
</li>
<li class="nav-item">
<a href="{{ route('products.index') }}" class="nav-link
{{Request::is('*products*') ? 'active' : ''}}">
<i class="nav-icon fas fa-box-open"></i>
<p>
Products
</p>
</a>
</li>
<li class="nav-item">
<a href="{{ route('suppliers.index') }}" class="nav-link
{{Request::is('*suppliers*') ? 'active' : ''}}">
<i class="nav-icon fas fa-shopping-basket"></i>
<p>
Suppliers
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>

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

<div class="content-wrapper">
@yield('content')
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong>
All rights reserved.
<div class="float-right d-none d-sm-inline-block">
<b>Version</b> 3.1.0

Mei, 2021 PEMROGRAMAN WEB 34

 Laboratorium Teknik Informatika
</div>
</footer>

<!-- Control Sidebar -->

<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->

<script src="{{ asset('plugins/jquery/jquery.min.js') }}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{{ asset('plugins/jquery-ui/jquery-ui.min.js') }}"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button)

</script>
<!-- Bootstrap 4 -->
<script src="{{ asset('plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- ChartJS -->
<script src="{{ asset('plugins/chart.js/Chart.min.js') }}"></script>
<!-- Sparkline -->
<script src="{{ asset('plugins/sparklines/sparkline.js') }}"></script>
<!-- JQVMap -->
<script src="{{ asset('plugins/jqvmap/jquery.vmap.min.js') }}"></script>
<script src="{{ asset('plugins/jqvmap/maps/jquery.vmap.usa.js') }}"></script>
<!-- jQuery Knob Chart -->
<script src="{{ asset('plugins/jquery-knob/jquery.knob.min.js') }}"></script>
<!-- daterangepicker -->
<script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('plugins/daterangepicker/daterangepicker.js') }}"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="{{ asset('plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-
4.min.js') }}"></script>
<!-- Summernote -->
<script src="{{ asset('plugins/summernote/summernote-bs4.min.js') }}"></script>
<!-- overlayScrollbars -->
<script
src="{{ asset('plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js') }}"></script>
<!-- AdminLTE App -->
<script src="{{ asset('js/adminlte.js') }}"></script>
<!-- AdminLTE for demo purposes -->
<script src="{{ asset('js/demo.js') }}"></script>
@stack(‘script’)
</body>

Mei, 2021 PEMROGRAMAN WEB 35

 Laboratorium Teknik Informatika
</html>

Lalu kita buka kembali index.blade.php dan hapus seluruh kode, lalu
tambahkan kode seperti berikut :

@extends('layouts.master')
@section(‘title’, ‘Dashboard’)
@section('content')
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Dashboard</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Dashboard v1</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->

<section class="content">
<div class="container-fluid">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-info">
<div class="inner">
<h3>150</h3>

<p>New Orders</p>
</div>
<div class="icon">
<i class="ion ion-bag"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">

Mei, 2021 PEMROGRAMAN WEB 36

 Laboratorium Teknik Informatika
<!-- small box -->
<div class="small-box bg-success">
<div class="inner">
<h3>53<sup style="font-size: 20px">%</sup></h3>

<p>Bounce Rate</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-warning">
<div class="inner">
<h3>44</h3>

<p>User Registrations</p>
</div>
<div class="icon">
<i class="ion ion-person-add"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-danger">
<div class="inner">
<h3>65</h3>

<p>Unique Visitors</p>
</div>
<div class="icon">
<i class="ion ion-pie-graph"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</section>

Mei, 2021 PEMROGRAMAN WEB 37

 Laboratorium Teknik Informatika
<!-- /.content -->
@endsection

Dari kedua kode tersebut, kita dapat melihat bahwa views master mempunyai
@yield yaitu sebuah Blade Templates dari Laravel yang berfungsi untuk
menandai bagian-bagian dari sebuah halaman, bagian ini akan dapat ditindih oleh
views yang meng-extends master dengan menggunakan template section. Kita
dapat melihat di index.blade.php, terdapat @extends(‘layouts.master’) yang mana
nama sebelum tanda “.” merupakan path dari folder. Lalu terdapat
@section(‘content’) yang mana template ini akan menindih bagian yang sudah
kita tandai dengan yield pada layout master yang sebelumnya telah di atur dan
jangan lupa diberikan @endsection pada akhir code sectionnya untuk
menandakan berakhirnya kode yang berada pada section tersebut. (Untuk
dokumentasi Blade Templates, selengkapnya dapat membaca di situs berikut :
https://laravel.com/docs/8.x/blade)
Maka jika dijalankan akan memiliki hasil seperti berikut :

9. Membuat CRUD (Create-Read-Update-Delete)

Kali ini kita akan membuat sebuah CRUD untuk tabel Suppliers, pertama buat
terlebih dahulu folder “suppliers” di resources/views lalu buat 3 file di dalam
folder yang baru dibuat, yaitu index.blade.php, create.blade.php, dan
edit.blade.php

Mei, 2021 PEMROGRAMAN WEB 38

 Laboratorium Teknik Informatika

a. Membuat Read Data

Buka kembali SupplierController.php yang berada di

\app\Http\Controllers dan edit pada bagian function index seperti berikut :

public function index()

{
$suppliers = Supplier::all();
return view('suppliers.index', compact(‘suppliers’));
}

Kode di atas untuk mengambil seluruh data dari tabel suppliers dengan
memanfaatkan model Supplier, dan menyimpannya ke dalam variabel
suppliers, dan dibawa oleh method compact ke dalam view supplier.index.
Lalu buka resources/views/suppliers/index.blade.php dan tambahkan
kode seperti berikut :

@extends('layouts.master')
@section('title', 'Suppliers')
@section('content')
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Suppliers</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">

Mei, 2021 PEMROGRAMAN WEB 39

 Laboratorium Teknik Informatika
<li class="breadcrumb-item"><a
href="{{ route('dashboard.index') }}">Home</a></li>
<li class="breadcrumb-item active">Suppliers</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->

<section class="content">
<div class="container-fluid">
<!-- Small boxes (Stat box) -->
<div class="card">
<div class="card-header">
<div class="d-flex justify-content-between">
<h3 class="card-title">Data table of suppliers</h3>
<a href="{{route('suppliers.create')}}" class="btn btn-sm btn-success"><i
class="fas fa-plus"></i> Create</a>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<table id="table-suppliers" class="table table-bordered table-striped">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Telp</th>
<th>Total Product</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($suppliers as $supplier)
<tr>
<td>{{ $loop->iteration }}</td>
<td>{{ $supplier->name }}</td>
<td>{{ $supplier->telp }}</td>
<td>{{ $supplier->products->count() }}</td>
<td>
<a href="{{ route('suppliers.edit', [$supplier->id]) }}"
class="btn btn-warning float-left m-1">Edit</a>
<form class="float-left m-1"
action="{{ route('suppliers.destroy', [$supplier->id]) }}" method="POST">
@method('delete')
@csrf

Mei, 2021 PEMROGRAMAN WEB 40

 Laboratorium Teknik Informatika
<button type="submit" class="btn btn-
danger">Delete</a>
</form>
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<th>#</th>
<th>Name</th>
<th>Telp</th>
<th>Total Product</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
@endsection
@push('script')
<!-- DataTables -->
<script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-
responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-
responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script>
$(function() {
$("#table-suppliers").DataTable({
"responsive": true,
"autoWidth": false,
});
});

</script>
@endpush
@push('css')
<link rel="stylesheet" href="{{ asset('plugins/datatables-
bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-
responsive/css/responsive.bootstrap4.min.css') }}">
@endpush

Mei, 2021 PEMROGRAMAN WEB 41

 Laboratorium Teknik Informatika
Dari kode di atas kita dapat melihat pada bagian @foreach kita me-looping
data $suppliers yang telah dibawa oleh compact pada controller
sebelumnya, lalu kita set sebagai $supplier untuk mengambil data per
barisnya, penerapan ini juga berlaku untuk pengambilan data lainnya,
seperti memunculkan list berita ataupun memunculkan list produk.
Maka jika kita buka menu Suppliers yang berada pada menu sidebar
akan menghasilkan output seperti gambar di bawah ini :

b. Membuat Create Data

Untuk membuat create data, kita perlu membuka kembali SupplierController

dan menambahkan kode pada function create, seperti berikut :
public function create()
{
return view('suppliers.create');
}

Kode di atas akan mengembalikan views create pada folder suppliers. Setelah itu
kita tambahkan kode untuk form input pada views create di
resources/suppliers/create.blade.php, tambahkan kode seperti berikut :

@extends('layouts.master')
@section('title', 'Create Suppliers')
@section('content')

Mei, 2021 PEMROGRAMAN WEB 42

 Laboratorium Teknik Informatika
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Suppliers</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a
href="{{ route('dashboard.index') }}">Home</a></li>
<li class="breadcrumb-item"><a
href="{{ route('suppliers.index') }}">Suppliers</a></li>
<li class="breadcrumb-item active">Create</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->

<section class="content">
<div class="container-fluid">
<!-- Small boxes (Stat box) -->
<div class="card">
<div class="card-header">
<h3 class="card-title">Create Data</h3>
</div>
<!-- /.card-header -->
<form action="{{ route('suppliers.store') }}" method="POST">
@CSRF
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control @error('name')
is-invalid @enderror" placeholder="Supplier Name">
<small class="text-danger">@error('name') {{$message}}
@enderror</small>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="telp">Telp</label>
<input type="text" name="telp" class="form-control @error('telp')
is-invalid @enderror" placeholder="Supplier Number">

Mei, 2021 PEMROGRAMAN WEB 43

 Laboratorium Teknik Informatika
<small class="text-danger">@error('telp') {{$message}}
@enderror</small>
</div>
</div>
</div>
</div>
<!-- /.row -->
<div class="card-footer">
<div class="d-flex justify-content-end">
<a href="{{ route('suppliers.index') }}" class="m-1 btn btn-outline-
danger">Back</a>
<button type="submit" class="m-1 btn btn-success">Create</button>
</div>
</div>
</form>
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
@endsection

Lalu kita atur controller store nya agar dapat menyimpan data yang telah
diinputkan ke dalam database. Buka kembali SupplierController.php dan
tambahkan kode berikut ini ke dalam function store

public function store(Request $request)

{
$request->validate([
'name' => 'required|max:100',
'telp' => 'required|min:0|max:15|numeric'
]);
Supplier::create($request->all());
return redirect()->route('suppliers.index');
}

Dari kode di atas kita dapat melihat bahwa adanya sebuah validation yang
berguna untuk memeriksa inputan kita sesuai dengan metode pemeriksaan yang
kita buat, seperti misalnya pada request name kita mengatur pemeriksaan
validasinya bahwa inputan name harus wajib diisi dan panjang karakternya
maksimal adalah 100. Variabel $request didapatkan dari input field pada views dan
merupakan value dari attribut name. Maka dari itu sangat penting untuk

Mei, 2021 PEMROGRAMAN WEB 44

 Laboratorium Teknik Informatika
memerhatikan attribut name yang berada pada views, karena kita akan mengambil
data berdasarkan value dari attribut name dari input field. (Untuk mekanisme
validation, selengkapnya dapat dibaca di : https://laravel.com/docs/8.x/validation).
Selain itu, pada kode di atas juga dapat kita lihat bahwa kita mengambil
sebuah Model dari Supplier untuk menggunakan method create sebagai
mekanisme penyimpanan data yang telah di inputkan ke database. $request-
>all() berlaku jika value dari attribut name memiliki kesamaan dengan column
dari tabel kalian, jadi harus sama, jika tidak maka metode ini tidak dapat berlaku,
kalian dapat melakukan penyimpanan secara manual seperti berikut :

Supplier::create([
'name' => $request->name,
'telp' => $request->telp,
]);

Kedua kode akan memiliki fungsi yang sama, namun yang kode sebelumnya akan
terlihat lebih rapi, maka dari itu penting untuk menyamakan value dari attribut
name dengan nama kolom pada tabel, agar dapat memanfaatkan fitur $request-
>all().
Maka output dari create data supplier menjadi seperti berikut ini :

Mei, 2021 PEMROGRAMAN WEB 45

 Laboratorium Teknik Informatika

Dan coba untuk inputkan data baru

c. Membuat Edit Data

Hampir sama dengan create data, namun pada bagian ini, controller
membawa sebuah value dari item yang ingin kita edit datanya dan pada bagian
views, kita atur value nya sesuai data yang telah dibawa oleh controller. Pertama,
buka SupplierController.php, dan tambahkan kode berikut ke dalam function edit :
public function edit($id)
{
$supplier = Supplier::findOrFail($id);
return view('suppliers.edit', compact('supplier'));
}

Mei, 2021 PEMROGRAMAN WEB 46

 Laboratorium Teknik Informatika
Kode findOrFail di atas digunakan untuk mencari data berdasarkan id pada tabel
suppliers, $id pada parameter di dapatkan dari data id yang diteruskan views, lalu
jika data tidak ditemukan maka akan menghasilkan error 404 not found, namun
jika data ditemukan maka akan mengembalikan view edit dan membawa variabel
supplier. Selanjutnya salin seluruh kode pada views create.blade.php dan
tempelkan ke dalam views edit.blade.php pada suppliers, setelah itu edit beberapa
kode untuk menyesuaikan edit data, seperti berikut ini :
@extends('layouts.master')
@section('title', 'Edit Suppliers')
@section('content')
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Suppliers</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a
href="{{ route('dashboard.index') }}">Home</a></li>
<li class="breadcrumb-item"><a
href="{{ route('suppliers.index') }}">Suppliers</a></li>
<li class="breadcrumb-item active">Edit</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->

<section class="content">
<div class="container-fluid">
<!-- Small boxes (Stat box) -->
<div class="card">
<div class="card-header">
<h3 class="card-title">Edit Data</h3>
</div>
<!-- /.card-header -->
<form action="{{ route('suppliers.update', [$supplier->id]) }}" method="POST">
@CSRF
@method('put')
<div class="card-body">
<div class="row">

Mei, 2021 PEMROGRAMAN WEB 47

 Laboratorium Teknik Informatika
<div class="col-6">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control @error('name')
is-invalid @enderror" placeholder="Supplier Name" value="{{$supplier->name}}">
<small class="text-danger">@error('name') {{$message}}
@enderror</small>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="telp">Telp</label>
<input type="text" name="telp" class="form-control @error('telp')
is-invalid @enderror" placeholder="Supplier Number" value="{{$supplier->telp}}">
<small class="text-danger">@error('telp') {{$message}}
@enderror</small>
</div>
</div>
</div>
</div>
<!-- /.row -->
<div class="card-footer">
<div class="d-flex justify-content-end">
<a href="{{ route('suppliers.index') }}" class="m-1 btn btn-outline-
danger">Back</a>
<button type="submit" class="m-1 btn btn-success">Update</button>
</div>
</div>
</form>
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
@endsection

Lalu setelah itu, buka kembali SupplierController.php dan tambahkan kode berikut
ini ke dalam function update :
public function update(Request $request, $id)
{
$request->validate([
'name' => 'required|max:100',
'telp' => 'required|min:6|digits_between:6,15|numeric'
]);
Supplier::findOrFail($id)->update([
'name' => $request->name,
'telp' => $request->telp,
]);
return redirect()->route('suppliers.index');

Mei, 2021 PEMROGRAMAN WEB 48

 Laboratorium Teknik Informatika
}

Hampir sama dengan kode untuk create namun untuk update ini kita perlu
mencari terlebih dahulu data yang ingin kita update, dengan memanfaatkan variabel $id
para parameter yang diteruskan oleh views. Lalu kita menggunakan method update pada
fitur Models untuk mengubah data dari masing-masing kolom ke request input field. Maka
jika kita coba untuk edit salah satu data, akan memiliki tampilan seperti berikut ini :

Kita coba untuk update data dan berhasil

Mei, 2021 PEMROGRAMAN WEB 49

 Laboratorium Teknik Informatika
d. Membuat Delete Data
Untuk menghapus data kita hanya perlu menambahkan kode berikut
ini ke dalam SupplierController.php pada function destroy :
public function destroy($id)
{
Supplier::findOrFail($id)->delete();
return redirect()->back();
}

Selesai, kita telah menyelesaikan seluruh fitur dari CRUD Suppliers, untuk
CRUD Products akan memiliki langkah yang sama hanya butuh penyesuaiaan saja,
jadi untuk latihan kali ini cukup hanya 1 fitur saja, selebihnya dapat
dikembangkan sebagai latihan mandiri agar dapat lebih memahami lebih cepat.
Untuk projek latihan ini kalian juga dapat clone atau mengunduhnya di
repository github berikut ini : https://github.com/aprian1337/infotech-latihan-
modul. Untuk cara clone project dari github dapat melihat postingan labit.umm
berikut : https://www.instagram.com/p/CCXGHYBnehV

TUGAS PRAKTIKUM

KEGIATAN 1 (20%)

Buatlah sebuah web dengan menerapkan Framework Laravel 8, pindahkan seluruh

hasil kegiatan dari modul sebelumnya (modul 1-3) ke dalam Laravel, agar dapat diakses
seperti biasanya. Lalu buatlah sebuah master layouts dari tampilan web kalian, pisahkan
header, sidebar, dan footer dari konten web kalian menggunakan @yield.

KEGIATAN 2 (50%)

Buatlah halaman admin-side menggunakan AdminLTE (jika menggunakan template

lainnya akan mendapatkan poin lebih), dan buatlah sebuah sistem untuk
memanajemen web berita kalian (CRUD), dengan menggunakan skema database seperti
gambar berikut ini :

Mei, 2021 PEMROGRAMAN WEB 50

 Laboratorium Teknik Informatika

(relasi authors dengan news adalah many-to-many)

Ekspektasi :

(News)

Mei, 2021 PEMROGRAMAN WEB 51

 Laboratorium Teknik Informatika

(Authors)

Catatan :
● Pada Total Published News di data authors merupakan berita yang hanya memiliki
status published saja yang dihitung, jika status pada berita not published maka tidak
masuk ke hitungan total published news.
● Kolom dan value harus mengacu pada ekspektasi gambar di atas, namun jika ada
improvisasi dapat ditambahkan dengan tidak mengurangi ekspektasi kriteria.
● Harus menggunakan skema database yang telah disediakan di atas, namun jika ingin
menambahkan kolom juga diperbolehkan asal tidak mengurangi kolom yang ada.
● is_published merupakan tipe data tiny integer, untuk valuenya jika 1 adalah
published dan jika 0 maka not published
● Harus menerapkan Eloquent Relationship ketika membuat sebuah Models.
● Buatlah sekreatif mungkin :)

KEGIATAN 3 (30%)

Jika telah mengerjakan kegiatan 1 & kegiatan 2, maka selanjutnya hubungkan seluruh
data berita dari database ke dalam konten web kalian. Sesuaikan datanya dengan
keperluan yang kalian butuhkan pada web kalian masing-masing dan kalian juga dapat
meng-improvisasi pada kegiatan ini untuk mendapatkan nilai lebih dari asisten. Buatlah
sekreatif mungkin :)
Mei, 2021 PEMROGRAMAN WEB 52
 Laboratorium Teknik Informatika

RUBRIK PENILAIAN

1. Mengerjakan dan mampu menjelaskan kegiatan 1. (Point Max 20)

2. Mengerjakan dan mampu menjelaskan kegiatan 2. (Point Max 50)
3. Mengerjakan dan mampu menjelaskan kegiatan 3. (Point Max 30)

Mei, 2021 PEMROGRAMAN WEB 53