2017 Modul Praktikum

Pemrograman
Web Berbasis
Framework

Tumini, M.Kom
STMIK CIKARANG
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

DAFTAR ISI

BAB I MENGENAL LARAVEL ........................................................................................................................... 2

BAB II MIGRATION ........................................................................................................................................ 5
BAB III SEEDER ............................................................................................................................................... 7
BAB IV INTERAKSI ROUTING DAN CONTROLLER ......................................................................................... 10
BAB V INTERAKSI ROUTING, CONTROLLER DAN VIEW .............................................................................. 15
BAB VI INTERAKSI ROUTING, CONTROLLER, VIEW DAN MODEL ................................................................ 17
BAB VIII OPERASI CRUD PADA LARAVEL I (MENAMPILKAN DATA) ............................................................ 20

1
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

BAB I MENGENAL LARAVEL

Pengembangan website akan terasa lebih mudah jika menggunakan tool yang tepat. Contohnya
pemilihan framework php yang akan digunakan. Framework yang baik adalah framework yang sesuai
dengan kebutuhan aplikasi web yang akan Anda bangun. Tidak hanya itu, framework juga harus bisa
menyederhanakan proses pembuatan dan menghasilkan performa yang aplikasi web yang lebih
maksimal.
Nah! Salah satu framework yang sangat populer saat ini adalah Laravel. Framework ini terkenal
kesederhanaannya dan menghasilkan aplikasi web yang powerful. Saat ini Laravel merupakan framework
PHP yang paling populer. Hal tersebut berdasarkan data dari jumlah pencarian Google dan StackOverflow,
serta jumlah stars pada GitHub.

Dari sisi teknis, ada banyak kelebihan Laravel yang secara singkat bisa diuraikan sebagai berikut:
 Mudah untuk pemula
 Efisien untuk ahli
 Memiliki dokumentasi yang lengkap dan jelas
 Terdapat banyak magic atau helper
 Bisa digunakan untuk aplikasi kecil ataupun besar

Laravel diluncurkan sejak tahun 2011 dan mengalami pertumbuhan yang cukup eksponensial. Di
tahun 2015, Laravel adalah framework yang paling banyak mendapatkan bintang di Github. Sekarang
framework ini menjadi salah satu yang populer di dunia, tidak terkecuali di Indonesia.
Laravel fokus di bagian end-user, yang berarti fokus pada kejelasan dan kesederhanaan, baik
penulisan maupun tampilan, serta menghasilkan fungsionalitas aplikasi web yang bekerja sebagaimana
mestinya. Hal ini membuat developer maupun perusahaan menggunakan framework ini untuk
membangun apa pun, mulai dari proyek kecil hingga skala perusahaan kelas atas.
Laravel mengubah pengembangan website menjadi lebih elegan, ekspresif, dan menyenangkan,
sesuai dengan jargonnya “The PHP Framework For Web Artisans”. Selain itu, Laravel juga mempermudah

2
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

proses pengembangan website dengan bantuan beberapa fitur unggulan, seperti Template Engine,
Routing, dan Modularity.
Berikut ini beberapa fitur Laravel yang perlu Anda ketahui.

Laravel menggunakan Blade. Blade merupakan template engine untuk mendesain

layout yang unik. Layout yang didesain dapat digunakan di tampilan lain sehingga
Blade Template menyediakan konsistensi desain dan struktur selama proses pengembangan..
Engine Dibandingkan dengan template engine lain, Blade mempunyai kelebihan: tidak
membatasi pengembang untuk menggunakan kode PHP biasa di dalam tampilan;
desain tampilan blade akan tetap di-cache sampai dengan ada modifikasi.

Di Laravel, semua request dipetakan dengan bantuan rute. Dasar dari routing adalah
merutekan request ke kontroler terkait. Routing ini dianggap dapat mempermudah
Routing pengembangan website dan meningkatkan performanya.
Setidaknya ada tiga kategori routing di Laravel, yaitu basic routing, route parameters,
dan named routes.

Seperti yang sudah dibahas di bagian sebelumnya, di dalam Laravel terdapat

kumpulan modul dan library yang terkait dengan composer. Fitur ini membantu
Modularity
Anda untuk menyempurnakan dan meningkatkan fungsionalitas dari website yang
dibangun, serta mempermudah proses update.

Laravel dibangun dengan fitur proses pengecekan yang cukup lengkap. Framework
ini mendukung proses pengecekan dengan PHPUnit dan file phpunit.xml yang dapat
Testability disesuaikan dengan aplikasi web yang sedang dibangun.
Framework ini juga dibangun menggunakan metode pembantu yang nyaman.
Metode ini memungkinkan Anda untuk menguji website secara ekspresif.

Laravel database query builder menyediakan antarmuka yang lancar untuk

Query Builder membuat dan menjalankan database query. Fitur ini dapat digunakan untuk
and ORM menjalankan berbagai operasi database di dalam website dan mendukung berbagai
sistem database.

Laravel membuat pengimplementasian otentikasi menjadi sangat sederhana. Seluruh

proses konfigurasi otentikasi sudah berjalan secara otomatis.
Authentication Anda bisa menemukan file konfigurasi otentikasi ini di ‘config/auth.php’. Di dalam
file ini terdapat beberapa opsi otentifikasi yang sudah terdokumentasikan dengan
baik dan sewaktu-waktu dapat Anda sesuaikan dengan kebutuhan sistem.

Class Laravel Schema menyediakan database agnostic untuk memanipulasi tabel.

Schema Builder Schema ini berjalan baik di berbagai tipe database yang didukung Laravel dan
mempunyai API yang sama di seluruh sistem.

Configuration Seluruh file konfigurasi Laravel disimpan di dalam direktori config. Setiap opsi
Management didokumentasikan dengan baik. Jadi Anda tidak perlu khawatir untuk mengubah
Features setiap konfigurasi yang tersedia.

3
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

Laravel menyediakan API beberapa library SwiftMailer yang cukup populer dengan
koneksi ke SMTP, Postmark, Mailgun, SparkPost, Amazon SES, dan sendmail. Fitur ini
E-mail Class
memungkinkan Anda untuk mengirimkan email dengan cepat melalui aplikasi lokal
maupun layanan cloud.

Laravel menggunakan Redis untuk menghubungkan antara sesi yang sudah ada
dengan cache general-purpose. Redis terkoneksi dengan session secara langsung.
Redis Redis merupakan aplikasi open source yang menyimpan key-value. Redis juga sering
dikenal dengan server struktur data yang dapat menyimpan key dengan
tipe strings, hashes, lists, sets, dan sorted sets.

Event and Laravel Command Bus menyediakan metode pengumpulan tugas yang dibutuhkan
Command Bus aplikasi supaya dapat berjalan secara simpel dan perintah yang mudah dimengerti.

PERSIAPAN SEBELUM INSTALL LARAVEL

CARA INSTALL LARAVEL

4
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

BAB II MIGRATION
Migration bekerja seperti version control untuk database yang membuat anggota tim lebih mudah dalam
memodifikasi skema database yang digunakan oleh aplikasi kita. Atau dalam kata yang lebih mudah, jika
biasanya kita mendesign table didalam database menggunakan phpmyadmin, maka dalam laravel kita
bisa mendsign table menggunakan kode-kode program. Loh, apa malah ga susah? Sekilas memang terasa
malah lebih susah, namun akan banyak keuntungan ketika kita membuat table menggunakan migration,
yaitu :

1. Migration membuat kerja tim menjadi lebih efisien.

Zaman sekarang developer sering bekerja secara tim untuk menyelesaikan sebuah project. Klien
yang requestnya sangat dinamis memungkinkan kita melakukan modifikasi (perubahan field,
penambahan field) tabel pada database ketika project sedang dikerjakan. Daripada anggota tim
saling mengirimkan SQL file hasil perubahan tabel atau memberi tahu tim mereka bahwa
perubahan di Tabel A baru saja dilakukan, maka lebih efisien ketika mereka menggunakan fitur
Migration di Laravel. Dengan Migration, anggota tim lain hanya perlu melakukan perintah php
artisan migrate untuk mengupdate database mereka agar sesuai dengan perubahan yang baru
saja dilakukan oleh anggota tim lainnya. Dengan demikian waktu mereka bisa digunakan untuk
hal lain yang lebih berfaedah.
2. Migration seperti version control untuk database kita.
Kalau kita membuat program baik secara individu maupun dalam tim, kita sering memanfaatkan
VCS (Version Control System) seperti Git untuk mengetahui perubahan-perubahan apa saja yang
dilakukan di code kita. Mirip seperti itu, Migration memungkinkan kita untuk mengetahui
perubahan dan penambahan apa saja yang telah dilakukan di database project kita dengan
mudah. Dengan begitu anggota tim lain bisa lebih aware apabila ada code mereka yang perlu
diadjust terkait dengan perubahan tabel tersebut.
3. Memudahkan ketika pindah environment coding.
Semisal seorang developer mengerjakan project A di Laptop perjuangan dia semasa kuliah.
Setelah bekerja, strata sosialnya meningkat drastis dan dia berinisiatif membeli laptop Macbook
Pro. Apabila dia menggunakan Migration, dia tidak perlu membackup semua database-database
di Laptop lama nya dan mengimport semuanya di Macbook Pro barunya secara manual. Dengan
bantuan Git dan fitur Migration di Laravel dia hanya perlu menyimpan code nya di cloud
repository seperti GitHub dan clone repository tersebut di Macbook Pro barunya. Setelah itu dia
hanya tinggal menjalankan perintah php artisan migrate untuk mengimport skema database
project A tersebut di Macbook Pro barunya.

CARA MEMBUAT MIGRATION :

Dalam latihan ini, kita akan coba membuat table mahasiswa dalam database. Langkah-langkah yang harus
dikerjakan adalah :

1. Buat database dbakademik dengan menggunakan phpmyadmin. (Bisa kan tanpa dijelaskan
detail?)
2. Mengkonfigurasi file .env pada project laravel kita. Yang perlu diperhatikan adalah DB_DATABASE,
sesuaikan dengan nama database yang sudah kita buat.

5
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

3. Membuat file migration.

Dengan menggunakan bash atau command prompt, ketikkan perintah berikut :

Php artisan make:migration create_mahasiswa_table

4. Mengatur field pada table yang akan dibuat

File dengan nama create_mahasiswa_table akan otomatis terbentuk dan dapat ditemukan di
dalam folder databasemigration. Buka file tersebut dan modifikasi menjadi seperti gambar
dibawah ini :

5. Menjalankan migration
Jika file sudah dimofidikasi, save file tersebut dan bukan kembali bash atau command prompt,
jalankan perintah berikut :

php artisan migrate

Jika tidak ada error atau masalah lainnya, akan ada notifikasi sukses. Dan hasilnya adalah ketika
anda cek di phpmyadmin, akan otomatis ada table terbentuk dengan nama table mahasiswa yang
design table nya seperti gambar dibawah ini :

6
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

BAB III SEEDER

Seeder berasal dari kata Seed yaitu benih, jadi Seeder adalah pembenihan. Jadi Seeder merupakan
data dummy yang kita buat ketika kita membuat sebuah aplikasi berbasis web, data hasil seeder dapat
kita gunakan sebagai data awal untuk keperluan testing ataupun untuk keperluan lain, misalnya data user.
Dengan adanya Seeder kita tidak perlu mengimputkan data satu-satu ke database melalui phpmyadmin,
cukup dengan file seeder kita dapat membuat data dummy. Mudah bukan?? penasaran bagaimana
membuatnya? Mudah kok, ikutin yuk langkah-langkah berikut ini :

1. Kemarin kan kita sudah punya table mahasiswa hasil dari membuat migration. Nah, seeder ini kita
gunakan untuk menginput data dummy untuk table mahasiswa.
2. Dengan bash atau command prompt, jalankan perintah dibawah ini :

php artisan make:seeder MahasiswaTableSeeder

Dengan perintah ini maka akan otomatis terbentuk file dengan nama MahasiswaTableSeeder.php
di dalam folder DatabaseSeeds

7
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

3. Buka file MahasiswaTableSeeder.php dan modifikasi kode programnya menjadi seperti dibawah
ini :

<?php

use Illuminate\Database\Seeder;

class mahasiswaSeeder extends Seeder

{

public function run()

{

//\App\Mahasiswa::insert([
DB::table('mahasiswa')->insert([
[
'npm' => '18429090',
'nama' => 'Cantik Jelita',
'prodi' => 'TI',
'tahunmasuk'=>'2018',
'created_at' => \Carbon\Carbon::now('Asia/Jakarta')
],

[
'npm' => '18428090',
'nama' => 'Ganteng Maksimal',
'prodi' => 'SI',
'tahunmasuk'=>'2018',
'created_at' => \Carbon\Carbon::now('Asia/Jakarta')
],

[
'npm' => '18326090',
'nama' => 'Cetar Membahana',
'prodi' => 'MI',
'tahunmasuk'=>'2018',
'created_at' => \Carbon\Carbon::now('Asia/Jakarta')
],

[
'npm' => '18327090',
'nama' => 'Glowing',
'prodi' => 'KA',
'tahunmasuk'=>'2018',
'created_at' => \Carbon\Carbon::now('Asia/Jakarta')
],
]);
}
}

4. Selanjutnya, buka file DatabaseSeeder.php yang ada didalam folder databaseSeeder untuk
meregistrasi file MahasiswaSeeder. Kode program sebagai berikut :

8
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

5. Buka bash atau command prompt dan jalankan perintah berikut :

php artisan db:seed

hasilnya seperti pada gambar berikut :

6. Jika sukses, maka akan otomatis data terisi kedalam table mahasiswa. Cek dengan menggunakan
phpmyadmin

7. Mudah bukan? Selamat mencoba..

9
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

BAB IV INTERAKSI ROUTING DAN CONTROLLER

MEMBUAT CONTROLLER & ROUTE PADA LARAVEL

1. Dengan menggunakan command prompt atau bash, masuk ke direktori project anda seperti
gambar berikut :

2. Dengan menggunakan perintah artisan, command untuk membuat controller

MahasiswaController adalah sebagai berikut :

Php artisan make:controller MahasiswaController –resource

(Note:pada contoh dibawah, controller saya bernama Mahasiswa1Controller karena

MahasiswaController sudah ada)

Jika sukses maka akan dapat message seperti dibawah ini :

10
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

3. Sehingga anda mendapatkan file MahasiswaController.

4. Menggunakan Text editor, buka file MahasiswaController :

11
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

5. Modifikasi pada function index menjadi sbb:

6. Agar bias diakses dari browser, maka harus kita kenalkan dulu pada route. Route ada di file
web.php dalam folder route.

7. Dengan menggunakan text editor, buka file web.php dan tambahkan kode di baris paling akhir
seperti ini:

Route::resource('mahasiswa', 'MahasiswaController');

Kode diatas memiliki arti bahwa, jika web diarahkan ke alamat localhost:8000/mahasiswa maka
akan langsung membaca file MahasiswaController pada function index.

12
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

Jangan lupa untuk save file web.php

8. Jalankan server laravel dengan perintah :

Php artisan serve

9. Untuk memcobanya, latihan diatas, silahkan buka browser dan masukkan alamat dibawah ini,
namun jangan lupa :

localhost:8000/mahasiswa

10. Hasil yang benar tampilan menjadi seperti ini :

Jadi kesimpulannya alur dari laravel ke controller sbb:

Web
Route Controller
Address

1. Web Address : localhost:8000/mahasiswa

2. Akan dicari route dengan parameter awal mahasiswa. Hasilnya seperti ini :
Route:resource(mahasiswa,mahasiswaController);

13
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

3. Parameter kedua : Route:resource(mahasiswa,mahasiswaController); akan mengarahkan pada

mahasiswaController, karena tidak disebutkan nama functionnya, otomatis yang dibaca adalah
function index.
4. Perintah pada function index akan dijalankan.

Semoga dapat dipahami, ada pertanyaan silahkan kita diskusi di kelas online.

14
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

BAB V INTERAKSI ROUTING, CONTROLLER DAN VIEW

Masih dengan menggunakan materi pada sesi sebelumnya yang hanya melibatkan route dan controller,
maka pada materi kali ini akan kita tambahkan view. Jadi prosesnya menjadi seperti ini :

Web
Route Controller View
Address

Alur prosesnya :

5. Web Address : localhost:8000/mahasiswa

6. Akan dicari route dengan parameter awal mahasiswa. Hasilnya seperti ini :
Route:resource(mahasiswa,mahasiswaController);

7. Parameter kedua : Route:resource(mahasiswa,mahasiswaController); akan mengarahkan pada

mahasiswaController, karena tidak disebutkan nama functionnya, otomatis yang dibaca adalah
function index.
8. Function index akan mengarahkan controller untuk me return / mengambil view index yang ada
di folder resourceview. Kode programnya :

Return view(‘nama view);

Langkah-langkah praktikum :

1. silahkan modifikasi pada MahasiswaController dengan kode sebagai berikut :

15
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

2. Buat file baru pada folder resourceview dengan nama file : viewmahasiswa.blade.php
dengan kode program sebagai berikut :

3. Sehingga ketika kita panggil di browser dengan alamat localhost:8000/mahasiswa

tampilannya menjadi sbb :

4. Mudah bukan? Semoga alurnya bisa dipahami. Happy coding 

16
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

BAB VI INTERAKSI ROUTING, CONTROLLER, VIEW DAN MODEL

1. MEMBUAT MODEL
Dengan menggunakan bash atau command prompt, ketikkan perintah berikut ini :

php artisan make:model Mahasiswa

maka secara otomatis akan tercipta file dengan nama Mahasiswa di folder app.

Modifikasi file model tersebut menjadi seperti gambar dibawah ini :

Penjelasan dari kode diatas adalah sebagai berikut :

Baris 10 : memberitahu model bahwa table yang akan disambungkan dengan file model ini adalah
table mahasiswa. Karena secara default jika tidak kita setting, laravel mengenal konsep tunggal dan
jamak dengan penambahan huruf “s” dibelakangnya. Jadi artinya jika model adalah mahasiswa maka
secara default laravel akan mencari table dengan nama mahasiswas.

Baris 11 : bahwa field pada table mahasiswa yang dapat dimodifikasi dari aplikasi adalah field yang
disebutkan di dalam tanda kurung siku.

2. MODIFIKASI CONTROLLER
Seperti namanya, controller bertugas mengontrol antara view dan model. Atau dalam kata lain,
controller yang menyambungkan antara view dan model. Modifikasi file controller menjadi seperti
gambar dibawah ini :

17
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

Baris 6 : Kode ini ditambahkan untuk menyambungkan controller dengan model. Nama model ini
bersifat case sensitive. Mahasiswa berbeda dengan mahasiswa. Teliti ya.

Baris 17 : ini adalah kode untuk membaca semua data dari model.

Baris 18 :output function untuk menampilkan view dengan nama viewmahasiswa dan menyertakan
data yang disimpat pada variable data_mahasiswaa.

3. MODIFIKASI VIEW
Pada praktek sebelumnya, kita sudah memiliki view dengan nama viewmahasiswa. Modifikasi file
view tersebut menjadi seperti gambar dibawah ini :

Menulis kodenya sudah selesai, yuk kita liat hasilnya. Sebelum dibuka dibrowser, jangan lupa untuk
menjalankan servernya dengan perintah : php artisan serve

18
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

Kemudian buka browser dan ketikkan alamat localhost:8000/mahasiswa. Kalau tidak ada error,
hasilnya seperti gambar berikut :

Mudah bukan?? Happy Coding 

19
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

BAB VIII OPERASI CRUD PADA LARAVEL I

(MENAMPILKAN DATA)

Pada bagian ini kita akan buat halaman depan mahasiswa dengan menampilkan data dalam bentuk table
atau grid yang lebih rapi. Oke, mari kita mulai. Modikfikasi halaman viewmahasiswa menjadi tampilan
seperti dibawah ini :

@extends('layouts.app')

@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Data Mahasiswa</div>
<div class="card-body">
<table class="table table-striped" >
<tr>
<th>No</th>
<th>NPM</th>
<th>Nama Mahasiswa</th>
<th>Program Studi</th>
<th>Tahun Masuk</th>
</tr>

@php
$no=1;
@endphp

@foreach ($data_mahasiswa as $rs)

<tr>
<td>{{ ++$no }}</td>
<td>{{ $rs->npm }}</td>
<td>{{ $rs->nama }}</td>
<td>{{ $rs->prodi }}</td>
<td>{{ $rs->tahunmasuk }}</td>
</tr>

@php
$no++;
@endphp
@endforeach
</table>
</div>
</div>
</div>
</div>
@endsection

20
 MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

Kita cukup memodifikasi pada file viewmahasiswa.php saja. Karena model dan controller sudah kita
sesuaikan pada bab sebelumnya.

Sehingga, ketika kita buka browser, hasilnya menjadi seperti dibawah ini :

21
MODUL PRAKTIKUM PEMROGRAMAN WEB BERBASIS FRAMEWORK

22