Modul 4

Laravel MVC

1
 REQUIREMENT
1. Web Browser (Google Chrome/Chromium (Ms Edge, Opera) atau Firefox)
2. Source Code Editor (disarankan Visual Studio Code)
3. Web Server Apache (XAMPP)
4. Composer
5. PHP Versi 8.2 ke atas

PENJELASAN
Memahami Laravel MVC
Laravel merupakan salah satu framework PHP berkembang saat ini, dengan
mendukung desain arsitektur software dengan menggunakan MVC atau Model View
Controller dimana untuk memisahkan logic untuk manipulasi data, antarmuka pengguna dan
kontrol aplikasi.

• Model : Pada framework PHP, model biasanya digunakan sebagai penghubung antara
controller dengan database untuk mengambil data pada database. Hal ini merujuk pada
konsep MVC di mana model digunakan sebagai representasi dari pengetahuan
(database).
• Controler : bagian yang mengatur hubungan antara bagian model dan bagian view,
controller berfungsi untuk menerima request dan data dari user kemudian menentukan
apa yang akan diproses oleh aplikasi.
• View : Merupakan bagian yang menangani presentation logic. Pada suatu aplikasi web
bagian ini biasanya berupa file template HTML, yang diatur oleh controller. View
berfungsi untuk menerima dan merepresentasikan data kepada user. Bagian ini tidak
memiliki akses langsung terhadap bagian model

1
Instalasi Laravel dan Pembuatan Project
A. Instalasi Composer
Composer merupakan tools dependency manager di bahasa pemrograman PHP. Dengan
menggunakan composer kita bisa melakukan instalasi atau menambahkan sebuah
paket/package dengan lebih mudah.

1. Link download composer : https://getcomposer.org/Composer-Setup.exe

2. Pilih yang install for all users

3. Klik next, bagian developer mode tidak perlu dicentang

2
4. Di bagian lokasi php, jika kalian sudah install xampp, maka akan otomatis terisi,
centang bagian add this php to your path

5. Kosongi bagian proxy setting, klik next lalu klik install.

3
6. Jika composer sudah terinstall, maka bisa dicek dengan menggunakan command
prompt lalu ketik composer, jika berhasil maka akan muncul halaman composer seperti
gambar di bawah ini.

7. Untuk mengetahui versi composer kalian, bisa gunakan command : composer -V

B. Pembuatan Project Laravel

1. Langkah awal dalam mempuat projek laravel adalah menuju kefolder dimana file
laravel ingin disimpan. Pada contoh ini saya akan meletakakn projek laravel pada folder
“E:\Guided”.

2. Pada folder tersebut ubahlah alamat menjadi “cmd” lalu tekan enter sehingga akan
terbuka terminal yang memiliki alamat file yang sesuai dengan yang difolder. Hal ini
ditujukan agar dapat membuka terminal command promt langsung pada lokasi file yang
ingin diletakkan file laravelnya.

4
 Jika sudah menekan enter maka akan terbuka terminal seperti gambar dibawah ini.
Pastikan lokasi pada tanda merah sudah sesuai tengan lokasi file yang ingin diisi dengan
file projek laravel nantinya.

3. Setelah itu kita akan ketikan composer create-project laravel/laravel example-app

yang merupakan perintah untuk membuat folder project. Mari kita bedah perintah
tersebut :
a. composer create-project laravel/laravel
Bagian dari perintah ini bertujuan untuk mendownload file laravelnya.
b. example-app
Bagian dari perintah ini bertujuan untuk memberikan nama file projek tersebut.

5
 Pastikan nama file projek sudah benar maka tekan enter. Jika sudah berhasil
tampilan akan berubah seperti ini.

Dan di folder tujuan tadi sudah ada file projeknya seperti gambar di bawah ini

6
4. Setelah Folder projek terbuat maka untuk menjalankannya kita akan buka file tersebut
dengan melalui code editor yaitu Visual Studio Code. Pertama kita buka dulu Visual
Studio Code.

7
 Pilih Open Folder, lalu sesuaikan pada lokasi folder projek kalian.

Pastikan lokasi folder sudah benar lalu tinggal klik “Select Folder”. Maka File projek
akan terbuka.

5. Setelah berhasil membuka folder projek di VSCode maka untuk menjalankan projek
tersebut kita harus membuka terminal terlebih dahulu.

6. Setelah terminal terbuka ketikan perintah “php artisan serve” untuk menjalankan
projektersebut . Jika sudah maka tinggal buka saja link yang tampil.

8
 Jika link tersebut di klik maka akan mengarahkan ke tampilan pada web browser teman
– teman seperti gambar dibawah ini.

7. Jika kalian ingin membuat lebih dari 1 project dan tidak menginginkan untuk
mendownload Laravel berulang kali, kalian bisa mendownload master laravelnya,
ketikkan di command prompt : composer global require laravel/installer

Jadi ketika kalian membuat project baru, cukup dengan menggunakan perintah :

1. laravel new nama_project

9
 Jika ada pilihan seperti gambar di atas, pilih yang none dengan mengetikkan none
lalu enter

Ketik 1 dan enter

Ketikkan no

Ketikan sqlite

Ketikan yes
2. cd nama_project (change directory ke project yang baru dibuat)
3. php artisan serve (jalankan project Laravel)

10
Struktur Laravel
Untuk melihat struktur Laravel, kalian bisa menggunakan kode editor yang kalian gunakan.
Secara singkat, Laravel menggunakan konsep MVC (model, view dan controller)
• model terdapat pada folder app/Models
• view terdapat pada folder resources/views
• controller terdapat pada folder Http/Controllers

Folder yang lain yang akan digunakan yaitu:

• folder routes, yang nanti akan digunakan untuk penjaluran baik dari user maupun api
• folder public, yang digunakan untuk menyimpan asset-aset statis (misal file css,
javascript, gambar, dll)
• file .env yang digunakan untuk menentukan environment dari aplikasi (misal
databasenya dll)

11
jika file .env kalian tidak terlihat, itu dikarenakan file .gitignore yang membuat file .env kalian
tidak terlihat, jika mau terlihat, kalian buka .gitignore lalu hapus tulisan .env

Konsep routes
File di folder routes yang bernama web.php secara singkat digunakan untuk menampilkan
sebuah halaman web yang mau dituju, meskipun nanti juga akan digunakan untuk fungsi-fungsi
yang lainnya.

Misal pada gambar diatas maka ini dapat diartikan, jika terdapat user yang mengakses halaman
“/”, maka tampilkan view welcome. View welcome dapat dilihat di
resources/views/welcome.blade.php (tulisan .blade.php tidak perlu ditulis)

Pembuatan Website Statis Sederhana dengan Laravel

1. Pada routes, ketikkan kode ini

Maksud dari kode ini adalah terdapat 3 rute di aplikasi Laravel,

• jika pengguna mengakses halaman rootnya, maka akan ditampilkan halaman home
• kalau mengakses /about, maka akan ditampilkan halaman about
• kalau mengakses /post, maka akan ditampilkan halaman post

Lalu coba akses, di http://127.0.0.1:8000/about, maka akan error karena tidak terdapat
halaman about. Hal ini juga akan terjadi di halaman home, dan juga post.

12
2. Kita akan melengkapi halaman home about dan post. Pada folder view, buat 3 file
bernama about.blade.php, home.blade.php dan post.blade.php

3. Lalu isi file tersebut dengan basic html, namun diganti title dan bodynya

4. Ketika disimpan dan dijalankan, maka sekarang aplikasi tidak ada error dan akan
menampilkan halaman yang kita tuju

13
5. Untuk mempercantik tampilan, kita bisa menambahkan css di folder public/style.css.
Jika ingin lebih rapi, kalian juga bisa memasukan file css ke dalam folder.

6. Kemudian isi style.css

7. Setelah itu tambahkan link ke css pada halaman about, home, dan post

14
8. Ketika dijalankan, maka halaman tadi akan berubah sesuai dengan file css yang kita
buat. Selain css, kita juga bisa menambahkan javascript ke halaman web yang kita buat.
Kita buat file javascript dulu di folder public

9. Lalu isi file script.js

10. Setelah itu tambahkan javascript ke halaman yang dituju

11. Ketika dijalankan, javascript akan terpanggil

15
 12. Di halaman about, selain kita menuliskan data secara manual, kita juga bisa menuliskan
data melalui routes. Pada web.php di routes, ganti route yang bagian about dengan ini

13. Lalu pada bagian about.blade.php ganti bagian body dengan

<?php echo $makul; ?> bisa disingkat dengan <?= $makul; ?>

Ketika dijalankan, maka halaman akan menampilkan hasil yang sama, namun bedanya kita
mendapatkan data makul, nama dan email dari routes.

16
 GUIDED

Untuk guided kali ini kita akan membuat halaman website yang sudah dibuat di Guided 1
(HTML & CSS) menjadi sebuah project laravel. Ikuti langkah-langkah berikut :

1. Buka command prompt dimana kalian ingin menyimpan folder guided laravel ini. Lokasi
penyimpanan folder bebas dimanapun.

2. Buatlah project laravel dengan nama PW4_X_YYYYY (X = kelas, Y = 5 digit terakhir

NPM) dengan cara yang ada di halaman 4 di bagian subjudul “Pembuatan project
laravel”

3. Kemudian setelah project berhasil dibuat pada web.php yang berada di folder routes

Ubah route yang ada menjadi seperti ini

17
 Ketika mengakses route “ / “ dan “/halaman1” akan menampilkan view halaman1
(halaman1.blade.php)
Ketika mengakses route “/halaman2” akan menampilkan view halaman2
(halaman2.blade.php)

4. Buatlah folder baru bernama images di dalam folder public. Masukkan sebuah gambar
dari guided 1 kalian ke folder images.

5. Buat sebuah file baru bernama halaman1.blade.php pada folder resources -> views.
Untuk welcome.blade.php bisa dihapus atau dibiarkan karena tidak terpakai.

18
6. Copy code dari file html GD Modul1-1 yang berisikan halaman Profile dan paste ke
halaman1.blade.php

7. Buat sebuah file baru bernama halaman2.blade.php pada folder resources -> views.

8. Copy code dari GD Modul1-2 yang berisikan tabel “Jadwal Kuliah” dan paste ke
halaman2.blade.php

9. Ubah title pada halaman1 menjadi PW4 - Halaman 1 – NPM (NPM disesuaikan)

Ubah title pada halaman2 menjadi PW4 Halaman 2 – Nama Mahasiswa (Nama
mahasiswa disesuaikan)

10. Ubah

Menjadi dua halaman saja dan sesuaikan cara penulisannya.

19
 Lakukan hal tersebut pada kedua halaman. (halaman1.blade.php dan
halaman2.blade.php)

url('halaman1') digunakan untuk menghasilkan URL ke rute dengan nama 'halaman1'

dalam proyek Laravel, sesuai dengan konfigurasi pada routes yang sudah dilakukan di
langkah 4. Begitu juga dengan url(‘halaman2’).

11. Kemudian pada halaman1.blade.php, ubah cara pemanggilan gambar menjadi seperti
Berikut

12. Jika semua sudah selesai, jalankan project dengan cara membuka terminal di Visual
Studio Code

Jalankan project dengan mengetikkan php artisan serve pada terminal. Kemudian copas
url web ke web browser kalian atau langsung membuka link tersebut dengan cara tekan
ctrl + klik pada link yang tertampil.

20
Hasil :

21
Format pengumpulan GD:
Project diupload ke GitHub dengan nama repository = PW4_X_YYYYY dan visibility =
private.
X = kelas
Y = 5 digit NPM

Setelah diupload, invite collaborator Ayass23

Kemudian kumpulkan link repository GitHub ke situs kuliah maks jam 23.59 di hari itu.

22