IMPLEMENTASI MVC (MODEL VIEW CONTROLLER) SMK NEGERI 1

TANJUNG PURA
PADA FRAMEWORK LARAVEL 6 DENGAN
BOOTSTRAP 4

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

SPESIFIKASI KOMPUTER DAN DEVELOPMENT ENVIRONMENT

1. PC/Laptop OS Windows 10/Linux 64 bit.

2. Xampp Versi 7.4.2 https://www.apachefriends.org/download.html
3. Composer https://getcomposer.org/download/
4. Teks Editor Visual Studio Code https://code.visualstudio.com/
5. node.js https://nodejs.org/en/
6. Web Browser Google Chrome

INSTALASI LARAVEL

1. Buka Windows Explorer buat sebuah folder dengan nama Project_Laravel contoh: E:\
Project_Laravel
2. Buka Visual Studio Code, lalu buka Terminal masuk ke folder E:\Project_Laravel.

Kemudian ketikan perintah:

composer create-project --prefer-dist laravel/laravel appperjalanan "6.*"

3. Tunggu hingga proses instalasi selesai sampai muncul “application key set
successfully”. Cepat lambatnya instalasi tergantung koneksi Internet yang digunakan.

Hal | 1
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

4. Uji hasil instalasi laravel. Buka Terminal masuk ke folder E:\Project_Laravel\

appsiswaku_taupan lalu ketikan perintah: php artisan serve

Kemudian buka browser ketik alamat : http://localhost:8000

MEMBUAT TEMPLATE

Menginstall Bootstrap and Vue Scaffolding

1. Buka Terminal masuk ke folder appsiswaku_taupan, kemudian ketikan perintah:
composer require laravel/ui:^1.0 –dev

2. Kemudian lanjutkan ketikan perintah : php artisan ui bootstrap, php artisan ui vue, php
artisan ui react, php artisan ui bootstrap –auth

Hal | 2
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

3. Kemudian lanjutkan ketikan perintah : npm install && npm run dev

Membuat template.blade.php
1. Buat file template.blade.php di dalam folder appsiswaku_taupan\resources\views\
layouts.

2. Kemudian lengkapi kode program seperti dibawah ini.

Membuat menu.blade.php
1. Buat file menu.blade.php di dalam folder appsiswaku_taupan\resources\views\
layouts.

2. Kemudian lengkapi kode program seperti dibawah ini.

Hal | 3
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

Menguji Template
1. Buka file web.php yang berada di folder appsiswaku\routes. Kemudian lengkapi kode
program seperti dibawah ini.

2. Kemudian buka browser ketik alamat : http://localhost:8000

Hal | 4
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

DATABASE MIGRATION

Menentukan Nama Database

1. Buka file .env yang berada di folder appsiswaku_taupan
2. Ubah menjadi seperti di bawah ini

Membuat Migration
Migration untuk tabel siswa
1. Buka Terminal masuk ke folder appsiswaku_taupan. Kemudian ketikan perintah:
php artisan make:migration create_siswa_table

2. Maka akan terbentuk file yang mengandung kata create_siswa_table.php di

appsiswaku_taupan\database\migrations
3. Buka file create_siswa_table.php tersebut, tambahkan method up() pada class
CreateSiswaTable. Lengkapi kode program seperti dibawah ini.

Hal | 5
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

4. Buka file AppServiceProvider.php di appsiswaku_taupan\app\Providers. Lengkapi

kode program seperti dibawah ini.

Menjalankan Migration
1. Buat database dbsekolah di MySQL. Untuk lebih mudahnya, gunakan phpMyAdmin.
http://localhost/phpmyadmin

2. Buka Terminal masuk ke folder appsiswaku_taupan, kemudian ketikan perintah:

php artisan migrate:fresh

Hal | 6
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

3. Buka phpMyAdmin kembali perhatikan pada database dbsekolah terdapat beberapa

tabel yang dihasilkan dari proses migration salah satunya adalah tabel siswa.

MODEL (MENGOLAH DATA CRUD) DENGAN ELOQUENT

Membuat Model Siswa

1. Buka Terminal masuk ke folder appsiswaku_taupan. Kemudian ketikan perintah:
php artisan make:model Siswa -r (-r adalah berserta dengan resources controller siswa)

2. Maka akan terbentuk file Siswa.php di appsiswaku_taupan\app.

3. Buka file Siswa.php tersebut.

CONTROLLER

Membuat/membuka Controller Siswa

1. Buka file SiswaController.php di appsiswaku_taupan\app\Http\Controllers.

Hal | 7
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

MENAMPILKAN DATA SISWA

1. Buka file Siswa.php yang berada di folder appsiswaku_taupan\app. Lengkapi kode
program seperti dibawah ini.

2. Buka file SiswaController.php yang berada di folder

appsiswaku_taupan\app\Http\Controllers. Pada function index() lengkapi kode
program seperti dibawah ini.

3. Buka file web.php yang berada di folder appsiswaku\routes dengan menambahkan

route baru. Kemudian lengkapi kode program seperti dibawah ini.

Hal | 8
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

4. Buat folder baru dengan nama siswa di dalam folder appsiswaku_taupan\resources\

views
5. Buat file index.blade.php di dalam folder appsiswaku_taupan\resources\views\
layouts\siswa

6. Kemudian lengkapi kode program seperti dibawah ini.

Hal | 9
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

7. Buka browser ketik alamat : http://localhost:8000/siswa. Maka Data Siswa akan

ditampilkan.

MEMBUAT FORM TAMBAH DATA SISWA

1. Buat file create.blade.php di dalam folder appsiswaku_taupan\resources\views\
layouts\siswa

2. Kemudian lengkapi kode program seperti dibawah ini.

Hal | 10
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

3. Buka file SiswaController.php yang berada di folder

appsiswaku_taupan\app\Http\Controllers. Pada function create() lengkapi kode
program seperti dibawah ini.

4. Buka browser ketik alamat : http://localhost:8000. Kemudian klik menu Siswa, lalu klik
tombol Tambah, maka Form Tambah Data Siswa akan ditampilkan.

MENYIMPAN DATA SISWA

1. Buka file SiswaController.php yang berada di folder
appsiswaku_taupan\app\Http\Controllers. Pada function store() lengkapi kode
program seperti dibawah ini.

Hal | 11
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

2. Buka Form Tambah Data Siswa kembali, lalu isi data form tersebut.
3. Kemudian klik tombol Tambah untuk menyimpan dan tombol Batal untuk membatalkan.

4. Data yang dimasukkan kedalam form telah tersimpan di database dan langsung
ditampilkan ke halaman Data Siswa.

5. Masukkan 4 buah data siswa kembali hingga jumlah siswa sebanyak 5 orang.

Hal | 12
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

MENAMPILKAN DETAIL DATA SISWA

1. Buat file detail.blade.php di dalam folder appsiswaku_taupan\resources\views\
layouts\siswa

2. Kemudian lengkapi kode program seperti dibawah ini.

3. Buka file SiswaController.php yang berada di folder

appsiswaku_taupan\app\Http\Controllers. Pada function show() lengkapi kode
program seperti dibawah ini.

Hal | 13
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

4. Buka browser ketik alamat : http://localhost:8000. Kemudian klik menu Siswa, lalu pilih
data siswa yang akan di lihat detailnya. Lalu klik tombol Detail, maka Detail Data Siswa
akan ditampilkan.

MEMBUAT FORM EDIT DATA SISWA

1. Buat file edit.blade.php di dalam folder appsiswaku_taupan\resources\views\layouts\
siswa

Hal | 14
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

2. Kemudian lengkapi kode program seperti dibawah ini.

3. Buka file SiswaController.php yang berada di folder

appsiswaku_taupan\app\Http\Controllers. Pada function edit() lengkapi kode program
seperti dibawah ini.

Hal | 15
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

4. Buka browser ketik alamat : http://localhost:8000. Kemudian klik menu Siswa, lalu pilih
data siswa yang akan di edit datanya. Lalu klik tombol Edit, maka Form Edit Data Siswa
akan ditampilkan.

MENGUPDATE DATA SISWA

1. Buka file SiswaController.php yang berada di folder
appsiswaku_taupan\app\Http\Controllers. Pada function update() lengkapi kode
program seperti dibawah ini.

Hal | 16
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

2. Buka browser ketik alamat : http://localhost:8000. Kemudian klik menu Siswa, lalu pilih
data siswa yang akan di edit datanya. Lalu klik tombol Edit, maka Form Edit Data Siswa
akan ditampilkan.
3. Lakukan perubahan pada data yang dipilih. Kemudian klik tombol Update untuk
menyimpan dan tombol Batal untuk membatalkan.

4. Data yang diedit ke dalam form telah terupdate di database dan langsung ditampilkan ke
halaman Data Siswa.

MENGHAPUS DATA SISWA

1. Buka file SiswaController.php yang berada di folder
appsiswaku_taupan\app\Http\Controllers. Pada function destroy() lengkapi kode
program seperti dibawah ini.

Hal | 17
Pemrograman Web dan Perangkat Bergerak Taupan Syah Putra, S.Kom

2. Buka browser ketik alamat : http://localhost:8000. Kemudian klik menu Siswa, lalu pilih
data siswa yang akan di hapus datanya. Lalu klik tombol Delete, maka akan muncul allert
konfirmasi, pilih OK untuk menghapus data siswa.

3. Data sekarang berjumlah 4 orang setelah 1 data berhasil di hapus.

Hal | 18