LAPORAN PRAKTIKUM DESIGN DAN APPLIKASI WEB
Disusun oleh: Suharyanto
14330032
PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK
UNIVERSITAS JANABADRA YOGYAKARTA
ii
DAFTAR ISI
DAFTAR ISI ... ii
PERKENALAN DAN CARA INSTALL LARAVEL ... 1
BAB I PENDAHULUAN ... 1
1.1 Latar Belakang ... 1
1.2 Tujuan Praktikum ... 1
BAB II PEMBAHASAN PRAKTIKUM ... 2
2.1 Persiapan Praktikum ... 2
2.1.1 Perangkat Keras ... 2
2.1.2 Perangkat Lunak ... 2
2.2 Dasar Teori ... 2
BAB III PELAKSANAAN PRAKTIKUM ... 4
3.1 Installasi Composer ... 4
3.2 Installasi Laravel ... 8
BAB IV PENUTUP ... 10
4.1 Kesimpulan ... 10
4.2 Saran ... 10
MENGENAL DATA ROUTING ... 11
BAB I PENDAHULUAN ... 11
1.1 Latar Belakang ... 11
1.2 Tujuan Praktikum ... 11
BAB II PEMBAHASAN PRAKTIKUM ... 12
2.1 Persiapan Praktikum ... 12
2.1.1 Perangkat Keras ... 12
2.1.2 Perangkat Lunak ... 12
2.2 Dasar Teori ... 12
BAB III PELAKSANAAN PRAKTIKUM ... 14
3.1 Routing Dasar ... 14
iii
BAB IV PENUTUP ... 19
4.3 Kesimpulan ... 19
4.4 Saran ... 19
MENGENAL MVC (MODUL-VIEW-C0NTROLLER)... 21
BAB I PENDAHULUAN ... 21
1.1 Latar Belakang ... 21
1.2 Tujuan Praktikum ... 21
BAB II PEMBAHASAN PRAKTIKUM ... 22
2.1 Persiapan Praktikum ... 22
2.1.1 Perangkat Keras ... 22
2.1.2 Perangkat Lunak ... 22
2.2 Dasar Teori ... 22
BAB III PELAKSANAAN PRAKTIKUM ... 24
3.1 Membuat Model View Controller Baru ... 24
3.2 Membuat View Page Responsive pada Laravel ... 25
BAB IV TUGAS ... 27
PERSIAPAN PEMBUATAN CRUD PADA LARAVEL ... 36
BAB I PENDAHULUAN ... 36
1.1 Latar Belakang ... 36
1.2 Tujuan Praktikum ... 36
BAB II PEMBAHASAN PRAKTIKUM ... 37
2.1 Persiapan Praktikum ... 37
iv
2.1.2 Perangkat Lunak ... 37
2.2 Dasar Teori ... 37
BAB III PELAKSANAAN PRAKTIKUM ... 38
3.1 Mempersiapkan File ... 38
3.2 Membuat Database ... 38
3.3 Mengsetting Database Laravel ... 39
3.4 Menghapus Url Public Pada Laravel ... 39
3.5 Integrasi Bootstrap Di Laravel ... 41
BAB IV PENUTUP ... 44
4.1 Kesimpulan ... 44
4.2 Saran ... 44
MEMBUAT CRUD DENGAN RESTful DI LARAVEL ... 46
BAB I PENDAHULUAN ... 46
1.1 Latar Belakang ... 46
1.2 Tujuan Praktikum ... 46
BAB II PEMBAHASAN PRAKTIKUM ... 47
2.1 Persiapan Praktikum ... 47
2.1.1 Perangkat Keras ... 47
2.1.2 Perangkat Lunak ... 47
2.2 Dasar Teori ... 47
BAB III PELAKSANAAN PRAKTIKUM ... 49
3.1 Membuat Tabel ... 49
3.2 Compile Database ... 49
3.3 Membuat Database den Mengubah Connection Database ... 49
3.4 Membuat Controller ... 50
3.5 Menambahkan routes ... 50
3.6 Membuat Controller ... 50
3.7 Menambahkan laravelcollection pada composer.json ... 50
3.8 Membuat file pendukung ... 50
v
3.10 Mengisi file app/mobil.php ... 51
3.11 Mengisi file MobilController.php ... 52
3.12 Mengisi file Create.blade.php ... 53
3.13 Mengisi file index.blade.php ... 53
3.14 Mengisi file edit.blade.php ... 54
BAB IV PENUTUP ... 55
4.1 Kesimpulan ... 55
4.2 Saran ... 55
MEMBUAT LOGIN AUTENTIKA DEFAULT PADA LARAVEL ... 56
BAB I PENDAHULUAN ... 56
1.1 Latar Belakang ... 56
1.2 Tujuan Praktikum ... 56
BAB II PEMBAHASAN PRAKTIKUM ... 57
2.1 Persiapan Praktikum ... 57
2.1.1 Perangkat Keras ... 57
2.1.2 Perangkat Lunak ... 57
2.2 Dasar Teori ... 57
BAB III PELAKSANAAN PRAKTIKUM ... 59
3.1 Konfigurasi / Setting Koneksi ke Database ... 59
3.2 Konfigurasi Database dan Migration ... 59
3.3 Membuat database ... 59
3.4 Instalasi Project Laravel ... 60
3.5 Regristasi User ... 60
3.6 Regristasi User dengan Form Regristasi ... 60
3.7 Menampilkan data user yang login pda bagian halaman isi body. 61 BAB IV PENUTUP ... 63
4.1 Kesimpulan ... 63
4.2 Saran ... 63
UPLOAD FILE DENGAN LARAVEL ... 64
vi
1.1 Latar Belakang ... 64
1.2 Tujuan Praktikum ... 64
BAB II PEMBAHASAN PRAKTIKUM ... 65
2.1 Persiapan Praktikum ... 65
2.1.1 Perangkat Keras ... 65
2.1.2 Perangkat Lunak ... 65
2.2 Dasar Teori ... 65
BAB III PELAKSANAAN PRAKTIKUM ... 66
3.1 Merubah sintak yang asli Laravel ... 66
3.2 Menambahkan route pada routes.php ... 67
3.3 Membuat UploadContoller.php ... 68
3.4 Melengkapi Sintak Upload Controller ... 68
BAB IV PENUTUP ... 71
4.1 Kesimpulan ... 71
4.2 Saran ... 71
MEMBUAT HALAMAN PROFILE GAMBAR PADA LARAVEL ... 72
BAB I PENDAHULUAN ... 72
1.1 Latar Belakang ... 72
1.2 Tujuan Praktikum ... 72
BAB II PEMBAHASAN PRAKTIKUM ... 73
2.1 Persiapan Praktikum ... 73
2.1.1 Perangkat Keras ... 73
2.1.2 Perangkat Lunak ... 73
2.2 Dasar Teori ... 73
BAB III PELAKSANAAN PRAKTIKUM ... 74
3.1 Membuat database ... 74
3.2 Melakukan konfigurasi database ... 74
3.3 Merubah Create User Table ... 74
3.4 Mengakses PHP Artisan ... 75
vii
3.6 Menambahkan Route ... 76
3.7 Membuat Controller UserProfileController ... 76
3.8 Merubah sintak UserProfileController ... 76
3.9 Membuat view Profile ... 76
3.10 Membuat username dan foto Profile ... 77
3.11 Menambahkan form update pada view Profil ... 78
3.12 Menambahkan Route untuk Update foto ... 79
3.13 Menambahkan Sintak pada UserProfileController ... 79
3.14 Membuka Command Prompt ... 80
3.15 Menambahkan sintak pada app.php ... 80
3.16 Menambahkan sintak pada app.blade.php ... 80
BAB IV PENUTUP ... 82
4.1 Kesimpulan ... 82
4.2 Saran ... 82
DAFTAR PUSTAKA ... 83
1
BAB I PERKENALAN DAN CA RA INSTALL LARAVEL
BAB I PENDAHULUAN
1.1 Latar Belakang
Dengan semakin berkembangnya teknologi dunia maya terutama aplikasi
web yang semakin berkembang pada saat ini menjadi aplikasi web sebagai suatu
wadah yang digunakan oleh banyak kalangan industri dalam proses bisnis maupun
non-bisnis. Teknologi WEB merupakan salah satu pengembangan teknologi
dalam aplikasi WEB. Istilah ini dicetukan pertama kali oleh O’Reilly Media pada
tahun 2003 dan dipopulerkan pada konferensi WEB pertama pada tahun 2004.
Secara singkat, Web adalah merupakan sebuah revolusi bisnis dalam industri
komputer yang terjadi akibat pergeseran ke internet sebagai salah satu platform
bisnis.
Salah satu halnya dengan WEB penggunaan server side scripting ikut
berkembang. Salah satunya adalah PHP. PHP (Hypertext Preprocessor) yang
merupakan salah satu bahasa pemrograman web yang paling populer digunakan.
PHP pertama kali dibuat oleh Rasmus Lerdroft. PHP sering digunakan untuk
membangun web dinamis dimana proses keseluruhan berjalan pada web-server
dan menampilkan hasilnya pada web–server. Penggunaan PHP salah satunya
digunakan oleh framework saat ini mempunyai ratting tertingg di media
informasu yakni Laravel.
1.2 Tujuan Praktikum
Setelah menyelesaikan percobaan ini diharapkan mahasiswa mampu:
a. Memahami apa itu laravel
2
BAB II
BAB II PEMBAHASAN PRAKTIKUM
2.1 Persiapan Praktikum 2.1.1 Perangkat Keras
Perangkat keras yang dipergunakan untuk melaksanakan praktikum
meliputi :
1. Komputer / Laptop
2. Perangkat Aksesosis (Mouse, Keyboard)
2.1.2 Perangkat Lunak
Perangkat lunak untuk mendukung kegiatan praktikum adalah :
1. XAMPP v3.2.1
2. Composer Created Project
3. Framework Laravel
2.2 Dasar Teori
2.2.1 Definisi Laravel
Laravel adalah sebuah Framework PHP yang bersifat opensource
yang ditulis oleh Taylor Otwell dengan lisensi dibawah MIT License.
Laravel dibuat untuk membatu para developer khususnya dalam membuat
sebuah web dengan sintak yang sederhana, elegan, ekspresif dan
menyenangkan. Seperti yang ditulis dalam website nya. (Olbers 2016a)
Gambar 2.1 Logo framework laravel
Laravel sebuah framework yang terbilang baru dalam PHP. Berbeda
3 memprograman sebuah aplikasi web menjadi lebih menyenangkan versi
baru Laravel, yaitu Laravel 5 diadaptasi framework yang telah telah ada
sebelumnya yaitu simfony, hanya tentu saja Laravel lebih expressif dalam
hal syntax.
Gambar 2.2 Tampilan framework laravel secara default
2.2.2 Perangkat Lunak Matlab
PHP (Personal Home Page) merupakan salah satu bahasa
pemrograman yang saat ini terus berkembang dan paling banyak digunakan
oleh programmer. PHP bersifat open source dan berada di bawah lisensi
GPL (GNU Publick License) sehingga bebas menggunakan
danmendistribusikannya.
PHP juga mendukung semua sistem operasi varian Linux, Microsoft,
Mac OS, dan varian UNIX. Jenis webserver yang dapat diaplikasikan, selain
Apache, adalah Personel Webserve, Netscape andPlanet Servers, Xitami,
OmniHTTP, dan Microsoft Internet Information Server. Seluruh aplikasi
berbasisweb dapat dibuat dengan menggunakan PHP. Namun demikian,
kelebihan utama PHP adalah kemudahan koneksinya dengan berbagai
4
BAB III
BAB III PELAKSANAAN PRAKTIKUM
Insatallasi Laravel
Dalam menginstallasi laravel dibagi menjadi 2 (dua) bagian yakni
menginstall laravel dengan bantuan via composer, dan pada insatallasi laravel via
composer yang dipraktekan dengan menggunakan composer create project.
Yang pertama dipraktekkan sebelum menginstal laravel adalah menginstall
composer terlebih dahulu.
3.1 Installasi Composer
a. Mendownload Composer
Mendownload composer di https://getcomposer.org
Gambar 3.1 Tampilan halaman utama https://getcomposer.org
b. Menginstall Composer Created Project
Mengklik dua kali file Composer.exe yang baru saja didownlaod.
5
c. SetupComposer
Tampil Composer Setup, lalu mengklik NEXT untuk melanjutkan install
Gambar 3.3 Setup composer
d. Settings Check
Pada proses settings check ini memasukkan path php yang sudah diinstall
bersama dengan xampp. Pada proses ini path php yang dimasukkan adalah
F:/xampp/php/php.exe lalu mengklik NEXT.
6 Selanjutnya tampil proxy setting, biarkan dan menekan NEXT
Gambar 3.5 Proxy Settings
Lalu tampil form ready install untuk memberi konfimasi installasi.
Gambar 3.6 Ready to Install
e. Proses install selesai
Pada form ini menampilkan Completing Composer Setup. Dengan
7 Gambar 3.7 Tampilan setelah selesai installasi
f. Mengecek kondi si installasi composer
Pada proses ini membutuhkan Command Prompt untuk mengecek
apakah composer sudah dapat berjalan dengan baik. Menuliskan “composer –v” pada command prompt.
8
3.2 Installasi Laravel
a. Membuka command prompt
Mengarahakan ke direktori htdocs dengan mengetikkan dengan
mengetikkan peritah seperti gambar 3.9
Gambar 3.9 Mengearahkan ke file htdocs
b. Mengetikkan sintak untuk install laravel
Memberikan perintah pada gambar 3.10 untuk memnginstall laravel
Gambar 3.10 Menginstall laravel
c. Menunggu proses installasi
Waktu yang digunakan untuk menginstall membutuhkan waktu 20 menit
dengan kecepatan internet 136kb/s.
9 d. Mencek installasi laravel
Melakukan cek installasi dengan menghidupkan apache, lalu membuka
browser kemuadian mengetikkan http://localhost/laravel/public/ maka
tampil halaman laravel 5 pada browser.
10
BAB IV BAB IV PENUTUP
4.1 Kesimpulan
Setelah melaksanakan kegiatan praktikum Design dan Aplikasi WEB
tentang Perkenalan dan Cara Install laravel, maka dapat diambil kesimpulan
bahwa dalam proses installasi laravel membutuhkan software tambahan, yakni
composer.
4.2 Saran
Adapun saran untuk praktikum ini adalah :
- Mahasiswa yang mengikuti praktikum mempunyai kemampuan yang
sama, tanpa ada pengantar dari dosen dan assistent dosen mustahil jika
mahasiswa akan memahaminya.
- Pengantar dari assisten dosen sebelum pelaksanaan praktikum sangat
11
BAB I MENGENAL DATA ROUTING
BAB I PENDAHULUAN
1.1 Latar Belakang
Dengan Routing kita dapat kita dapat menuliskan atau mensetting nama url
website yang akan kita bangun. contohnya saja www.mylaravel.com/{uri maupun
parameter yang kita inginkan}. (Ribudi 2016)
Mengenai Routing di framework laravel 5.2 kita akan mengenal metode
yaitu GET dan POST, pastinya sudah tidak asing lagi bagi yang terbiasa belajar
atau membuat website. GET data dan parameter akan terlihat di url sedangkan
POST tidak terlihat di url. Tapi di framework laravel 5.2 bagian routing GET dan
POST ini mempunyai cara kerja yang berbeda dan yang dimaksud bukan $_GET
maupun $_POST kalau dilaravel $_GET dan $_POST ini bisa kita pelajari di
bagian basic input di laravel.com contohnya Input::get('name'); . Tapi ditutorial
ini atau didalam routing laravel GET disini digunakan untuk menampilkan,
parsing atau mengirimkan data. Sedangkan POST digunakan untuk menangani
sebuah form untuk menerima hasil inputan data. Pada laravel 5.2 routing dapat
didefinisikan atau dituliskan di foder app > Http > routes.php.
GET , method ini dalam laravel biasanya digunakan untuk menampilkan
view maupun data. Buka Project yang telah di install, Jika belum menginstall
laravel silahkan ikuti tutorial cara install laravel. Jika sudah silahkan dibuka
projectnya cari file routes.php berada dalam folder app > Http > routes.php.
1.2 Tujuan Praktikum
Setelah menyelesaikan percobaan ini diharapkan mahasiswa mampu:
a. Memahami apa itu routing
12
BAB II
BAB II PEMBAHASAN PRAKTIKUM
2.1 Persiapan Praktikum 2.1.1 Perangkat Keras
Perangkat keras yang dipergunakan untuk melaksanakan praktikum
meliputi :
1. Komputer / Laptop
2. Perangkat Aksesosis (Mouse, Keyboard)
2.1.2 Perangkat Lunak
Perangkat lunak untuk mendukung kegiatan praktikum adalah :
1. XAMPP v3.2.1
2. Framework Laravel
2.2 Dasar Teori
Routing digunakan untuk meng-handle request yang kita berikan ke aplikasi
web. Bisa jadi routing adalah jembatan yang menghubungkan kita denga
respon yang akan diberikan oleh web aplikasi. Jadi setiap ada permintaan
requestterhadap alamat tertentu maka alamat tersebut akan dieksekusi
terlebih dahulu dalam routing sebelum akhirnya akan manampilkan haril
(response). (Olbers 2016b)
Dalam routing kita akan mengenal GET dan POST, yang sudah tidk
asing lagi bagi website. Secara gamblang terlihat perbedaannya, jika GET
data dan parameter akan terlihat di URL dedangkan POST tidak terlihat.
Namun didalam framework laravel bagian routing GET dan POST ini
mempunyai cara kerja yang berbeda dan yang dimaksud bukan $_GET
maupun $_POST kalau dilaravel $_GET dan $_POST ini bisa dipelajari di
bagian basic input di laravel.com.
Contoh :
13 Pada modul atau didalam routing laravel GET digunakan untuk
menampilan, parsing atau mengiriman data. Sedangkan POST digunakan
unutuk menangani sebiah form untuk menerima hasil inputan data.
Dilaravel maupun didunia programming pasti mengenal istilah
RESTful. RESTful mempunyai beberapa method selain $_GET dan
$_POST yaitu PUT/PATCH dan DELETE. RESTfu merupakan sebuah
tenik di arsitektur software untuk sistem terdistribusi seperti WWW.
GET, method ini dalam laravel biasanya digunakan untuk
menampilkan view maupun data. Routing dapat didefinisikan atau ditulis di
14
BAB III
BAB III PELAKSANAAN PRAKTIKUM
Didalam praktikum Mengenal Data Routing ini yang dipelajari adalah
mengenai Routing Dasar dan Routing Parameter. Adapun praktikum yang
dilakukan adalah sebagai berikut :
3.1 Routing Dasar
Membuka folder laravel yang sudah diinstall pada praktikum sebelumnya.
Lalu membuka directory xampp\htdocs\laravel\app\Http. Selanjunya merubah
sintak pada routes.php original dari laravel menjadi sintak berikut:
Route::get('/', function () {
return 'Ini adalah Halaman Utama/Home'; });
Setelah mengganti source code pada routes lalu membuka URL :
http://localhost/laravel/public/. Dan hasil tampilannya menjadi seperti gambar 3.1.
Gambar 3.1 Tampilan web setelah dimodifikasi
Penjelasan dari sintak diatas adalah :
- Route::get adalah method yang digunakan untuk route dengan menthod get
- Tanda “/” menunujkkan route yang di definisikan atau dibuat untuk route
utama atau halaman utama return ‘Ini Adalah Halaman Utama/Home’;
3.2 Routing Parameter
Fungsi dari routes paramaters adalah untuk mengirimkan sebuah nilai atau
parameter ke router atau ke controller. Sedangkan parameter sendiri dibagi
15 1. Basic Route Paramenters (Dasar Route Berparameter)
2. Route Parameter (Route Berparameter Labih dari Satu)
3. Optional Route Parameters (Opsional Route Parameter)
4. Optional Route Parameter With Defaults (Opsional Route Parameter
dengan Nilai Default
Penggunaan dari setiap parameter dalam pratikum:
1. Basic Route Paramenters (Dasar Route Berparameter)
Menambahkan sintak kedalam file routes.php :
Route::get('profil/{nama}',function($nama) {
return 'Profil Nama : '.$nama; });
Setelah menambahkan source code pada file routes.php lalu membuka
URL : http://localhost/laravel/public/profil/Suharyanto. Dan hasil
tampilannya menjadi seperti gambar 3.2.
Gambar 3.2 Praktik Basic Route Parameter
2. Route Parameter (Route Berparameter Labih dari Satu)
Route berparameter ini digunakan untuk mengirimkan parameter lebih
dari satu. Dengan hanya menambahkan parameter baru seperti pada sintak
berikut:
Route::get('profil/{nim}/{nama}', function ($nim,$nama) { return '<table>
<tr><td>NIM </td><td>: '.$nim.'</td></tr> <tr><td>NAMA </td><td>: '.$nama;'</td></tr>
</table>';
16 Setelah menambahkan parameter baru pada file routes.php lalu membuka
URL : http://localhost/laravel/public/profil/14330032/Suharyanto. Dan hasil
tampilannya menjadi seperti gambar 3.3.
Gambar 3.3 Praktik Route Parameter
Profil/{nim}/{nama} digunakan untuk definisi parameter penamaan URLnya. Sedangkan {nim} merupakan parameter yang dikirimkan lalu
{nama} adalah parameter ke dua.
Function($nim,$nama) digunakan untuk mengambil parameter yang dikirimkan.
3. Optional Route Parameters (Opsional Route Parameter)
Opsional route parameter adalah merupakan sebuah pilihan jika
parameter tidak mempunyai sebuah nilai maka akan digantikan dengan null.
Sehingga jika nilai dari sebuah parameter tidak mempunyai nilai tidak akan
menyebabkan error pada program, karena nilai variablenya digantikan dengan
null. Praktik opsional route parameter adalah sebagai berikut :
Route::get('profil/{nama?}',function($nama = null) {
return $nama; });
Profil/{nama?} digunakan untuk define / penanaman route, sedangkan
{nama?} jika parameter tidak ditemukan maka akan diganti dengan null
dengan code persamaan $nama = null.
Setelah membuat sintak opsioanl route patameter pada file routes.php
lalu dicoba dengan membuka URL : http://localhost/laravel/public/profil
17
http://localhost/laravel/public/profil/Suharyanto. Dan hasil tampilannya
menjadi seperti gambar 3.4.
Tanpa Parameter
Menggunakan Parameter
Gambar 3.4 Praktik Optional Route Parameter
4. Optional Route Parameter With Defaults (Optional Route Parameter dengan Nilai Default
Optional Route Parameter dengan Nilai Default ini hampir sama dengan
Optional Route Parameter namun pada Optional Route Parameter with
Default mepunyai nilai defaut jika parameter tidak ditemukan maka akan
menggunakan niali default variabel. Praktik ini menggunakan nilai parameter
default “Suharyanto Takma Ad Annas”.
Route::get('profil/{nama?}',function($nama ='Suharyanto Takma Ad Annas')
{
18 Profil/{nama?} digunakan untuk define / penanaman route, sedangkan
{nama?} jika parameter tidak ditemukan maka akan diganti dengan null
dengan code persamaan $nama = ‘Suharyanto Takma Ad Annas’.
Setelah membuat sintak opsioanl route patameter with default pada file
routes.php lalu dicoba dengan membuka URL :
http://localhost/laravel/public/profil untuk uji coba tanpa parameter dan
membuka URL : http://localhost/laravel/public/profil/Suharyanto. Dan hasil
tampilannya menjadi seperti gambar 3.5.
Tanpa Parameter
Menggunakan Parameter
19
BAB IV BAB IV PENUTUP
4.3 Kesimpulan
Setelah melaksanakan kegiatan praktikum Design dan Aplikasi WEB
tentang Mengenal Data Routing, maka dapat diambil kesimpulan bahwa routing
di dalam framework laravel menggunakan GET dan POST, namun fungsi
keseluruhannya berbeda dengan method GET dan POST, namun mempunyai
kesamaan jika alamat URL dapat terlihat dan tidak.
4.4 Saran
Adapun saran untuk praktikum ini adalah :
- Mahasiswa yang mengikuti praktikum mempunyai kemampuan yang
sama, tanpa ada pengantar dari dosen dan assistent dosen mustahil jika
mahasiswa akan memahaminya.
- Pengantar dari assisten dosen sebelum pelaksanaan praktikum sangat
21
BAB I
MENG ENAL MVC (MODU L-VIEW-C0NTR OLLER)
BAB I PENDAHULUAN
1.1 Latar Belakang
Dengan Model-View-Controller adalah pola desain software yang
membantu anda secara logic memisahkan kode, membuatnya lebih reusable,
mudah dikelola(maintainable), dan membuat lebih baik pada umumnya. Model
View Controller dijelaskan pertama kali oleh grup penulis Gang of Four. Dean Helman menulis (intisari dari white paper Objective Toolkit Pro): Paradigma
MVC adalah suatu cara memecah aplikasi atau cukup beberapa bagian antar muka
aplikasi ke dalam 3 bagian: model, view dan controller. MVC pada dasarnya
dibangun untuk memetakan aturan tradisional yaitu input, proses dan output ke
dalam GUI yang nyata.
Input user, pemodelan terhadap dunia luar/nyata, dan tampilan visual ke
user dipisahkan dan dihandel oleh objek model, objek view dan objek controller.
Controller mengipretesaikan input mouse dan keyboard dari user dan memetakan
aksi user ke dalam perintah-perintah yang dikirim ke objek model dan/atau objek
view untuk memberi efek terhadap perubahan yang sesuai. Model mengatur satu
atau lebih elemen data, merespon queri-queri dan merespon instruksi-instruksi
perubahan status.
Bagian view mengatur area rectangular dari tampilan dan bertanggung
jawab untuk menyajikan data ke user melalui kombinasi antara grafik dan text.
1.2 Tujuan Praktikum
Setelah menyelesaikan percobaan ini diharapkan mahasiswa mampu:
a. Dapat memahami apa itu MVC
22
BAB II
BAB II PEMBAHASAN PRAKTIKUM
2.1 Persiapan Praktikum 2.1.1 Perangkat Keras
Perangkat keras yang dipergunakan untuk melaksanakan praktikum
meliputi :
1. Komputer / Laptop
2. Perangkat Aksesosis (Mouse, Keyboard)
2.1.2 Perangkat Lunak
Perangkat lunak untuk mendukung kegiatan praktikum adalah :
1. XAMPP v3.2.1
2. Framework Laravel
3. Edit text Sublime 3
2.2 Dasar Teori
2.2.1 Mengenal Model View Controller Laravel
MVC adalah merupakan kepanjangan dari Model-View-Controller
merupaan sebuah metode yang digunakan dalama pengembangan suatu
aplikasi yang memiisahkan data (model) dari tampilan / frontend (view) dan
login dari aplikasi (controller). MVC memisahkan pengembangan aplikasi
berdasarkan komponen utama yang membangun sebuah aplikasi seperti
manipulasi data, antarmuka pengguna dan kontrol dalam sebuah aplikasi.
Model digunakan utnuk proses query atau manipulasi data ke/dari
database. Sedangkan view kaitannya erat dengan antarmuka / frontend
tampilan sebuah web dengan HTML, CSS dan JS dan data yang bersifat
client. Controller adalah logika dari sebuah web. Menjembatani komunikasi
antara model dan view. (Olbers 2016c)
Model view controller merupakan suatu konsep yang cukup populer
dalam pembangunan aplikasi WEB, berawal pada bahasa pemrograman
23 komponen utama yang membangun sebuah aplikasi seperti manipulasi data,
user intervace dan bagian yang menjadi kontrol aplikasi . terdapat 3 jenis
kompinen yang membangun suatu MVC pattern dalam suatu aplikasi,
yaitu :
1. View, merupakan bagian yang menangani presentation logic.
Pada suatu aplikasi web. Bagian ini biasanya berupa file template
HTML, yhang diatur oleh controller. View berfungsi untuk
menerima dan merepresentasikan data kepada user. Bagian ini
tidak memiliki akses langsung terhadap bagian model.
2. Model, biasanya berhubungan langsung sengan database untuk
memanipulasi data (insert, update, delete, search), menangani
validasi dari bagian controller, namun tidak dapat berhubungan
langsung dengan bagian view.
3. Controller, merupakan bagian yang mengatur hubungan antara
baigan model dan bagian view, controller berfungsi untuk
menerima request dan data dari user kemudian menentukan apa
yang akan diproses oleh aplikasi.
2.2.2 Basic Controller (Dasar Controller)
Dasar controller ini adalah bagian secara dasar dapat menjalankan
controller tersebut dengan bantuan route. Sintaknya adalah sebagai berikut:
Route::get('/', function () {
return 'Ini adalah Halaman Home'; });
Code diatas terletak di file routes.php seperti pada pertemuan
sebelumnya. Hasil tampilannya adalah seperti gambar berikut:
24
BAB III
BAB III PELAKSANAAN PRAKTIKUM
Didalam praktikum Mengenal MVC (Model-View-Controller) ini yang
dipelajari adalah cara membuat Model-View-Controller yang baru dan cara
pemanggilannya. Adapun praktikum yang dilakukan adalah sebagai berikut :
3.1 Membuat Model View Controller Baru
Langkah – langkah yang dipraktikkan adalah :
1. Membuat sebuah router baru dengan nama “demo”. Dalam membuat
router yang dibuka adalah router.php yang ada didalam directory
xampp/htdocs/laravel/app/http/routes.php
Lalu memasukkan sintak kedalam routes.php tersebut :
Route::get('demo','DemoController@demofunction');
2. Membuat file baru dengan nama DemoController.php dan memasukkan
sintak sebagai berikut:
<?php namespace App\Http\Controllers;
class DemoController extends Controller { public function __construct()
berfungsi unttuk menampilkan page pada browser. Yang dilaksanakan adalah
membuat file dengan nama demoview.blade.php dan menyimpan didalam
directory : xampp/htdocs/laravel/resources/views/demoview.blade.php
lalu mengetikkan source code dibawah ini:
<center>
25
<p>
Ini adalah pmebelajaran bagaimana memahami sebuah model-controller-view
<p>
yang ada pada laravel 5. <strong> Semoga Bermanfaat </strong>
4. setelah selesai mengetikkan source code lalu menjalankan URL :
http://localhost/laravel/public/demo, dan hasilnya adalah :
Gambar 3.1 Tampilan demo pada laravel
3.2 Membuat View Page Responsive pada Laravel
Melengkapi demo.blade.php dengan perintah sintak seperti dibawah ini untuk
membentuk page responsive dengan 3 kolom yang akan ditampilkan dalam
<link rel="stylesheet" type="text/css" href="{!! asset('../bootstrap/css/bootstrap.css') !!}">
</head> <body>
<div class="jumbotron text-center"> <h1>Bootstrap Halaman Judul</h1>
<p>Untuk melihat halaman page responsive silahkan max halaman page anda</p>
26
<p>Belajar membuat web responsive dengan menggunakan framework Laravel 5...</p>
</div>
<div class="col-sm-4"> <h3>Kolom 2</h3>
<p>Belajar model View Controller pada Laravel...</p> <p>Belajar membuat web responsive dengan menggunakan framework Laravel 5...</p>
</div>
<div class="col-sm-4"> <h3>Kolom 3</h3>
<p>Belajar model View Controller pada Laravel...</p> <p>Belajar membuat web responsive dengan menggunakan framework Laravel 5...</p>
</div> </div> </div> </body> </html>
Setelah melengekapi program didalam file demoview.blade.php lalu
manjalankan program dengan mengetikkan kedalam URL :
http://localhost/laravel/public/demo, dan hasil yang tampil adalah seperti
gambar 3.2.
27
BAB IV BAB IV TUGAS
4.1 Tugas
Tugas dari praktikum MVC diantaranya adalah:
1. Buatlah program page view untuk menampilkan data profil probadi anda.
Contoh data yang ditampilkan yatu : nama, nim, tampat dan tanggal
lahir, no hp, alamat, email dan lain-lain.
2. Buatlah sebuah page view untuk menampilkan tabel, dan
3. Buatlah sebuah halaman page view untuk menampilkan form.
Keterangan : untuk membuat form silahkan mengikuti keinginan anda.
4.2 Penyelesaian
1. Membuat page view untuk menampilkan data profil pribadi
a. Router
Menambahkan sintak untuk memanggil controller dan functionnya:
Route::get('profil','Sh\sh_profil_c@index');
b. Controller
Membuat file controller dengan nama “sh_profil_c.php”, lalu
memasukkan sintak dan data pribadi.
<?php
namespace App\Http\Controllers\Sh; use App\Http\Controllers\Controller;
class sh_profil_c extends Controller { public function index()
{
$data['nim'] = "14330032";
$data['nama'] = "Suharyanto";
$data['tgl_lahir'] = "Kulon Progo, 10 April 1990";
$data['alamat'] = "Sidorejo, Lendah, Kulon
Progo";
$data['no_telp'] = "0857 6557 XXXX";
$data['email'] =
"suharyanto@student.janabadra.ac.id";
return view('sh/sh_profil_v')->with('data',$data);
28 c. View
Membuat file baru dengan nama “sh_profil_v.blade.php. Didalam
view ini menggunakan framework CSS dari bootstrap untuk
memperindah tampilan. Adapun sintak programnya adalah sebagai
berikut:
<!DOCTYPE html> <html>
<head>
<title>Biodata</title> <meta charset="utf-8">
<meta name="vewport" content="width-device-width, initial-scale-1">
<link rel="stylesheet" type="text/css" href="<?php echo asset('../bootstrap/css/bootstrap.css') ?>" /> <script type="text/javascript" src="{!!
asset('../bootstrap/js/bootstrap.js') !!}"></script> </head>
<body>
<nav class="navbar navbar-default"> <div class="container-fluid "> <div class="navbar-header">
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home" <div class="col-sm-4"> <div class="list-group">
<a href="#" class="list-group-item disabled"> Tugas
</a>
<a href="#" class="list-group-item">Biodata</a> <a href="#" class="list-group-item">Tabel
Mahasiswa</a>
<a href="#" class="list-group-item">Form Pendaftaran Mahasiswa</a>
</div> </div>
<div class="col-sm-8">
<div class="panel panel-default"> <div class="panel-body">
<center>Biodata Pribadi</center><br>
29
</body> </html>
Tampilan webnya adalah dengan URL : localhost/laravel/public/profil.
Gambar 4.1 Tampilan profil pribadi
2. Membuat page view untuk menampilkan tabel
a. Router
Menambahkan sintak untuk memanggil controller dan functionnya:
Route::get('mahasiswa','Sh\sh_mahasiswa_c@daftar');
b. Controller
Membuat file controller dengan nama “sh_mahasiswa_c.php”, lalu
memasukkan sintak barikut.
<?php
namespace App\Http\Controllers\Sh; use App\Http\Controllers\Controller;
30
return view('sh/sh_mahasiswa_v')->with('data',$data);
} }
c. View
Membuat file baru dengan nama “sh_mahasiswa_v.blade.php”, lalu
memasukkan sintak didalam file yang telah dibuat, adapun sintaknya
adalah sebagai berikut:
<!DOCTYPE html> <html>
<head>
<title>Biodata</title> <meta charset="utf-8">
<meta name="vewport" content="width-device-width, initial-scale-1">
<link rel="stylesheet" type="text/css" href="<?php echo asset('../bootstrap/css/bootstrap.css') ?>" /> <script type="text/javascript" src="{!!
asset('../bootstrap/js/bootstrap.js') !!}"></script> <style type="text/css">
th{ <div class="container-fluid "> <div class="navbar-header">
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home" <div class="col-sm-8">
<div class="panel panel-default"> <div class="panel-body">
31
Dalam hal ini menggunakan fungsi @foreach untuk melakukan
perulangan dalam menampilkan data mahasiswa.
Hasil dari sintak tersebut tampilanya adalah dengan membuka URL :
http://localhost/laravel/public/mahasiswa
Gambar 4.2 Tampilan tabel data mahasiswa
3. Membuat page view untuk menampilkan form
a. Routes
Menambahkan sintak didalam routes untuk memanggil controller
dan functionnya:
32 b. Controller
Controller ini menggunakan file yang sama dengan tugas, yakni
menggunakan file “sh_mahasiswa_c”, namun menggunakan
function yang berbeda dengan daftar mahasiswa, yakni
menggunakan function form. Sehingga dalam hal ini hanya
menambahkan sintak didalam file “sh_mahasiswa_c” sebagai
menjadi:
<?php
namespace App\Http\Controllers\Sh; use App\Http\Controllers\Controller;
class sh_mahasiswa_c extends Controller { public function daftar()
return view('sh/sh_mahasiswa_v')->with('data',$data);
} }
public function form(){
return view('sh/sh_form_v');
}
c. View
Membuat file baru didalam folder view dengan nama sh_form_v,
33
<!DOCTYPE html> <html>
<head>
<title>Form Input Mahasiswa</title> <meta charset="utf-8">
<meta name="vewport" content="width-device-width, initial-scale-1">
<link rel="stylesheet" type="text/css" href="<?php echo asset('../bootstrap/css/bootstrap.css') ?>" /> <script type="text/javascript" src="{!!
asset('../bootstrap/js/bootstrap.js') !!}"></script> <style type="text/css">
th{ <div class="container-fluid "> <div class="navbar-header">
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home" <div class="col-sm-8">
34
<tr>
<td>No Handphone</td> <td>:</td>
<td><input class="form-control input-sm" type="text" name="no_hp"></td>
</tr><tr><td>.</td></tr> <tr>
<td align="right" colspan="3"> <input class="btn btn-warning" type="reset" name="batal" value="Batal"> <input class="btn btn-success" type="submit" name="simpan" value="Simpan"> </td>
</tr> </table> </form> </div> </div> </div> </div> </body> </html>
Hasil tampilan dari sintak diatas adalah seperti gambar 4.3. dengan
membuka URL : http://localhost/laravel/public/form.
35
BAB IV BAB V PENUTUP
4.1 Kesimpulan
Setelah melaksanakan kegiatan praktikum Design dan Aplikasi WEB
tentang Pengenalan MVC (Model-View-Controller) , maka dapat diambil
kesimpulan bahwa pola desain software yang membantu anda secara logic
memisahkan kode, membuatnya lebih reusable, mudah dikelola(maintainable)
4.2 Saran
Adapun saran untuk praktikum ini adalah :
- Mahasiswa yang mengikuti praktikum mempunyai kemampuan yang
sama, tanpa ada pengantar dari dosen dan assistent dosen mustahil jika
mahasiswa akan memahaminya.
- Pengantar dari assisten dosen sebelum pelaksanaan praktikum sangat
36
BAB I
PERSIAPAN PEMBUATAN CRUD PADA LARAVEL
BAB I PENDAHULUAN
1.1 Latar Belakang
Dalam pemrograman komputer Create, Read, Update and Delete (sebagai
akronim CRUD) yaitu empat fungsi dasar dari penyimpanan persisten . kata
Alternatif kadang-kadang digunakan ketika mendefinisikan empat fungsi dasar
CRUD, mengambil alih-alih membaca , memodifikasi bukannya pembaruan, atau
menghancurkan bukannya menghapus CRUD juga kadang-kadang digunakan
untuk menggambarkan. antarmuka pengguna konvensi yang memfasilitasi melihat,
mencari, dan mengubah informasi ; sering menggunakan komputer berbasis
bentuk dan laporan . Istilah ini mungkin pertama kali dipopulerkan oleh James
Martin pada tahun 1983 bukunya Mengelola data-base Lingkungan. akronim yang
dapat diperpanjang untuk CRUD untuk menutupi daftar set data yang besar yang
membawa kompleksitas tambahan seperti pagination ketika data set terlalu besar
untuk menampung mudah dalam memori.
Karena akronim CRUD mengacu pada semua fungsi utama yang
diimplementasikan dalam database relasional aplikasi . Setiap huruf dalam
akronim dapat memetakan dengan standar SQL pernyataan, metode HTTP.
1.2 Tujuan Praktikum
Setelah menyelesaikan percobaan ini diharapkan mahasiswa mampu:
a. Dapat memahami CRUD pada Laravel
b. Mempu membuat database MySQL
37
BAB II
BAB II PEMBAHASAN PRAKTIKUM
2.1 Persiapan Praktikum 2.1.1 Perangkat Keras
Perangkat keras yang dipergunakan untuk melaksanakan praktikum
meliputi :
1. Komputer / Laptop
2. Perangkat Aksesosis (Mouse, Keyboard)
2.1.2 Perangkat Lunak
Perangkat lunak untuk mendukung kegiatan praktikum adalah :
1. XAMPP v3.2.1
2. Framework Laravel
3. Edit text Sublime 3
2.2 Dasar Teori
CRUD (Create, Read, Update, Delete) merupakan suatu operasi yang
digunakan hampir di setiap project aplikasi. Dan Laravel membantu membuat
proses operasi CRUD menjadi lebih mudah dengan menggunakan controller.
Dengan controller dan penggunaan teknik RESTful pada routing Laravel telah
memberikan kemudahan pada pengembang project. Kali ini kita akan mencoba
membuat operasi CRUD sederhana menggunakan RESTful pada Laravel 5.
Dalam pelaksanaan pratikum kali ini kita akan menggunakan Laravel untuk
membuat proses create, read, update, dan delete (CRUD) sederhana. CRUD
merupakan proses standar yang biasa ditemukan pada sebuah sistem aplikasi web.
Contoh CRUD seperti berikut:
a. Pengguna dapat melihat semua data yang ada dalam aplikasi.
b. Pengguna dapat menambahkan data dengan memasukkan data email,
nama serta password.
c. Pengguna data melihat informasi secara mendetil.
d. Pengguna dapat memperbaharui data dalam suatu aplikasi.
38
BAB III
BAB III PELAKSANAAN PRAKTIKUM
Didalam praktikum Persiapan pembuatan CRUD pada Laravel ini yang
dipelajari adalah cara membuat membuat database dan setting untuk connection
database. Adapun praktikum yang dilakukan adalah sebagai berikut :
3.1 Mempersiapkan File
Membuka Laravel yang telah diinstal pada pertemuan sebelumnya, dengan
memanggil url : localhost/Laravel/public, dan tampilanya seperti gambar 3.1.
Gambar 3.1 Tampilan url default Laravel
Setelah merubah folder Laravel dan membuka lalu mempersiapkan database
untuk persiapan pembuatan CRUD pada Laravel.
3.2 Membuat Database
Membuat database dengan nama db_laravel dan sebuah tabel dengan nama
tb_siswa, dengan ketetuan fieldnya adalah : id(int)10 autoincrement, nama(var) 50,
alamat(var) 50, dan kelas(var) 50.
39
3.3 Mengsetting Database Laravel
Setelah membuat database dan table selanjutnya adalah melakukan
pengaturan database pada Laravel, yaitu dengan masuk ke directory
Laravel/app/config/database.php. Karena yang digunakan pada pemrograman
adalah MySQL dan database default dari Laravel adalah MySQL juga maka pada
database.php tidak dillakukan perubahan.
Setelah memastikann basisdata yang digunakan pada database.php pada
Laravel adalah MySQL selanjunya adalah melakukan pengaturan basisdata
pada .env yang teletak dibagian luar, yakni Laravel/.env. melakukan perubahan
untuk koneksi database pada .env sebagai berikut:
APP_ENV=local
3.4 Menghapus Url Public Pada Laravel
Setelsh melakukan pengaturan basisdata selanjutnya adalah menghapus
/public yang merupakan default dari Laravel. Yang awalnya dalam mengakses
Laravel dengan url : localhost/Laravel/public dirubah menjadi localhost/public
40 Yang dipraktikkan adalah membuat folder ‘privasi’ yang berfungsi untuk
menampung data Laravel kecuali data public. karena data pada folder public akan
diletakkan pada bagian luar. Maka hasilnya setelah dilakukan perubahan adalah
sebagai berikut:
Gambar 3.3 Tampilan management file pada Laravel yang baru
Setealah melakukan perubahan pada directory selajutnya adalah mengubah
index.php pada file Laravel. Menjadi seperti sintak dibawah ini :
require __DIR__.'/privasi/bootstrap/autoload.php';
$app = require_once __DIR__.'/privasi/bootstrap/app.php';
$kernel =$app->make(Illuminate\Contracts\Http\Kernel::class);
$response = $kernel->handle(
$request = Illuminate\Http\Request::capture() );
$response->send();
$kernel->terminate($request, $response);
Setelah dilakuakan perubahan pada index.php menjadi seperti sintak diatas
maka ada perubahan pula pada pemanggilan urlnya. Yakni dengan hanya
membuka url : localhost/Laravel maka sudah tanpil seperti tampilan default tanpa
41 Gambar 3.4 Setelah dilakukan perubahan tanpa menggunakan public
3.5 Integrasi Bootstrap Di Laravel
Selanjutnya adalah melakukan integrasi bootstrap pada Laravel. Yakni yang
dilakukan adalah dengan mengunduh bootstrap di http://getbootstrap.com. Lalu
memmbuat folder baru didalam folder Laravel, salanjutnya mengextract hasil
unduhan bootstrap didalam folder asset yang telah dibuat sebelumnya.
Setelah memasukkan file dari bootstrap ke dalam folder asset, selanjutnya
adalah membuat folder template lalu membuat file dengan nama
t_index.blade.php, dimana file ini untuk menyimpan link rel dan template
bootstrap. Lalu memasukkan sintak kedalam file t_index.blade.php tersebut :
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge"> <title>Laravel</title>
{!! Html::style(asset/css/bootstrap.css) !!} </head>
<body>
@yield('content')
{!! Html::script(asset/js/jquery.js) !!} {!! Html::script(asset/js/bootstrap.js) !!} </body>
</html>
Setelah menyelesaikan daalam membuat field yield selanjutnya adalah
membuka file routes.php lalu merubah return view(welcome) menjadi return
42 home.index.blade.php. Lalu langkah selanjutnya yang dilakukan adalah membuat
file home.index.blade.php didalam folder privasi/resources/views/home.index.
blade.php dan memasukkan sintak kedalam file tersebut:
@extends('template/t_index') @section('content')
<div class="well"><h2>BELAJAR LARAVEL 5.1</h2></div>
Keterangan :
Extends diguankan untuk mengambil template bootstrap, @section digunakan
untuk memasukkan data home.index.blade.php ke template bootstrap tersebut.
Lalu membuka browser dengan url : localhost/Laravel. Dan hasilnya adalah:
Gambar 3.5 Tampilan saat dijalankan
Permaslahan diatas disebabkan kareana home.index tidak ditemukan.
Selanjutnya merubah file home.index.blade.php menjadi home.blade.php saja.
Namun masih menemui error seperi gambat 3.6.
43 Langkah selnajutnya adalah dengan merubah link untuk memanggil css
dengan cara lainnya tanpa dengan menggunakan link src biasa. Sintak yang
digunakan adalah sebagai berikut untuk memanggil css.
<link rel="stylesheet" type="text/css" href="<?php echo asset('assets/css/bootstrap.css') ?>" />
atau
<script type="text/javascript" src="{!! asset('assets/js/
bootstrap.js') !!}"></script>
Dan hasilnya menjadi seperti pada gambar 3.7.
44
BAB IV BAB IV PENUTUP
4.1 Kesimpulan
Setelah melaksanakan kegiatan praktikum Design dan Aplikasi WEB
tentang Persiapan pembuatan CRUD pada Laravel , maka dapat diambil
kesimpulan bahwa CRUD adalah akronim dari Create, Read, Update and Delete
dan CRUD merupakan suatu operasi yang digunakan hampir di setiap project
aplikasi.
4.2 Saran
Adapun saran untuk praktikum ini adalah :
- Mahasiswa yang mengikuti praktikum mempunyai kemampuan yang
sama, tanpa ada pengantar dari dosen dan assistent dosen mustahil jika
mahasiswa akan memahaminya.
- Pengantar dari assisten dosen sebelum pelaksanaan praktikum sangat
46
BAB I
MEMBUAT CRUD DENG AN RESTful D I LARAV EL
BAB I PENDAHULUAN
1.1 Latar Belakang
Di era globalisasi seperti saat ini dunia teknologi dan informasi
perkembangannya sangat pesat, khususnya dunia komputer. Komputer saat ini
merupakan kebutuhan manusia di dalam melakukan berbagai kegiatan, ditambah
dengan adanya teknologi informasi yang semakin berperan di dalam dunia
pekerjaan. Salah satu piranti teknologi adalah internet, yaitu sebuah jaringan
online global tanpa batas yang menyediakan berjuta jenis informasi.
Tak lepas dari pelayanan cepat dan efisien dari sebuah kebutuhan wisata
yaitu hotel. Maka perlu dibangun sebuah sistem yang one stop service solution
atau sebuah aplikasi E-commerce layanan terpadu. E-commerce merupakan suatu
metode yang memanfaatkan media internet untuk menjalankan aplikasi transaksi
secara online .
Dengan web service yang mampu mengintegrasikan data-data dari seluruh
cabang group sebuah hotel dan sebagai sebuah aplikasi layanan terpadu.
Penggunaan teknologi RESTful web-service dapat meningkatkan performansi
dengan mengurangi format pada paket, sehingga mengurangi juga penggunaan
memori dan komputasi pada device. Dengan layanan RESTful web-service,
memudahkan dalam fungsi invoke (request) yang memanfaatkan query request
provider melalui HTTP dengan menggunakan URI (Uniform Resource Identifier).
1.2 Tujuan Praktikum
Setelah menyelesaikan percobaan ini diharapkan mahasiswa mampu:
a. Memahami apa itu RESTful
47
BAB II
BAB II PEMBAHASAN PRAKTIKUM
2.1 Persiapan Praktikum 2.1.1 Perangkat Keras
Perangkat keras yang dipergunakan untuk melaksanakan praktikum
meliputi :
1. Komputer / Laptop
2. Perangkat Aksesosis (Mouse, Keyboard)
2.1.2 Perangkat Lunak
Perangkat lunak untuk mendukung kegiatan praktikum adalah :
1. XAMPP v3.2.1
2. Framework Laravel
3. Edit text Sublime 3
2.2 Dasar Teori
RESTfull laravel menyediakan sebuah controller yang memiliki sekumpulan
fungsi lengkap yang bisa melakukan create, read,update, dan delete. Hal ini dapat
membantu menghemat waktu kita, karena tidak perlu membuat fungsi tersebut
dan mendefinisikan tiap-tiap fungsi tersebut pada route.
CRUD (Create, Read, Update, Delete)
merupakan suatu operasi yang digunakan hampir di setiap project aplikasi.
Dan laravel membantu membuat proses operasi CRUD menjadi lebih mudah
dengan menggunakan controller. Dengan controller dan penggunaan teknik
RESTful pada routing laravel telah memberikan kemudahan pada pengembang
project. Kali ini kita akan mencoba membuat operasi CRUD sederhana dengan
menggunakan RESTful pada Laravel 5.
Anda bisa melihat fungsi dan format url yang dapat diakses dari
UserController dengan menggunakan perintah php artisan routes pada CMD anda.
Informasi yang ada dalam garis bewarna hijau pada gambar di bawah merupakan
url yang dapat Anda akses dari browser. Informasi yang ada pada kotak garis
48 garis putus-putus bewarna orange menandakan controller yang diakses dan garis
putus-putus bewarna kuning menandakan fungsi yang digunakan pada controller.
Jadi, jika Anda membuka alamat /users maka Route akan memanggil fungsi index
49
BAB III
BAB III PELAKSANAAN PRAKTIKUM
Didalam praktikum membuat CRUD dengan RESTful di Laravel ini yang
dipelajari adalah cara membuat membuat crud dengan mengupdate ke Laravel5.2.
Adapun praktikum yang dilakukan adalah sebagai berikut :
3.1 Membuat Tabel
Membuat sebuah rabel baru dengan mengetikkan di terminal
F:\xampp\htdocs\laravel\privasi>php artisan make:model mobil -m
Schema::create('mobil', function (Blueprint $table){ $table->increments('id');
Membuat database dengan nama “mobil” dan mengubah connection pada.env
menjadi seperti
F:\xampp\htdocs\laravel\privasi>php artisan migrate Migration table created successfully.
Migrated: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_100000_create_password_resets_table Migrated: 2016_12_01_165906_create_mobils_table
3.3 Membuat Database den Mengubah Connection Database
50
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=mobil DB_USERNAME=root DB_PASSWORD=
3.4 Membuat Controller
Membuat controller MobilController dengan mengetikkan di terminal
F:\xampp\htdocs\laravel\privasi>php artisan make:controller MobilController --resource
Controller created successfully.
3.5 Menambahkan routes
Menambahkan sintak tambahan pada file routes.php
Route::resource('mobil','MobilController');
3.6 Membuat Controller
Membuat controller baru dengan mengetikkan di terminal
F:\xampp\htdocs\laravel\privasi>php artisan make:model Mobil Model created successfully.
3.7 Menambahkan laravelcollection pada composer.json
Selanjutnya Menambahkan laravelcollection5.2 pada composer.json dengan
mengupdate laravel dengan cara :
F:\xampp\htdocs\laravel\privasi>composer update
3.8 Membuat file pendukung
Selanjutnya membuat file pendukung didalam view dengan membuat folder
51
3.9 Mengisi file app.blede.php
Selanjutnya mengisi file app.blade.php
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Comtible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scala=1">
<link rel="stylesheet" type="text/css"
href="assets/css/bootstrap.css">
3.10 Mengisi file app/mobil.php
Selanjutnya mengisi file app/Mobil.php
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Comtible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scala=1">
<link rel="stylesheet" type="text/css"
52
</div>
@yield('footer') </body>
</html>
3.11 Mengisi file MobilController.php
Selanjutnya mengisi file MobilController.php
<?php
class MobilController extends Controller {
public function store(Request $request) {
public function update(Request $request, $id) {
53
3.12 Mengisi file Create.blade.php
Selanjutnya mengisi file create.blade.php
@extends('app')
$section('content')
<h1>Tambah Data</h1>
{!! Form::open(['url'=>'mobil']) !!} <div class="from-group">
{!! Form::label('NOPOL','Nomor Polisi : ') !!} {!! Form::text('NOPOL',null, ['class' => 'form-control']) !!}
{!! Form::label('merek_mobil','Merek
Mobil :') !!}
{!! Form::text('merek_mobil',null, ['class' => 'form-control']) !!}
{!! Form::submit([Tambah Data']) !!} {!! Form::close() !!}
</div> @stop
3.13 Mengisi file index.blade.php
Selanjutnya mengisi file index.blade.php
@extends('app')
@section('content') <h1>Data Mobil</h1>
<table class="table table-bordered table-striped"> <thead>
<td><a href="{{ url('mobil/'.$data->id.'/edit') }}">{{ $data -> NOPOL }}</a></td>
54
{!! Form::open(['method' =>
'DELETE', 'route' =>['mobil.destroy', $data->id]]) !!} {!! Form::submit('Hapus') !!}
3.14 Mengisi file edit.blade.php
Selanjutnya mengisi file edit.blade.php
@extends('app')
@section('content')
<h1>Edit Data <small>{{ $mobil->NOPOL }}</small></h1>
{!! Form::model($mobil, ['method'=>'PATCH', 'action'
=>['MobilController@update', $mobil->id]]) !!} <div class="form-group">
{!! Form::label('NOPOL', 'Nomor Polisi') !!}
{!! Form::text('NOPOL', null, array('class'=>'form-control')) !!}
</div>
<div class="form-group">
{!! Form::label('merek_mobil', 'Merek Mobil') !!}
{!! Form::text('merk_mobil', null,
array('class'=>'form-control')) !!}
Lalu membuka url : localhost/laravel/mobil, dan hasilnya menjadi :
55
BAB IV BAB IV PENUTUP
4.1 Kesimpulan
Setelah melaksanakan kegiatan praktikum Design dan Aplikasi WEB
tentang Membuat Crud dengan RESTful , maka dapat diambil kesimpulan bahwa
CRUD adalah akronim dari Create, Read, Update and Delete dan CRUD
merupakan suatu operasi yang digunakan hampir di setiap project aplikasi.
RESTfulllaravel menyediakan sebuah controller yang memiliki sekumpulan
fungsi lengkap yang bisa melakukan create, read,update, dan delete. Hal ini dapat
membantu menghemat waktu kita, karena tidak perlu membuat fungsi tersebut
dan mendefinisikan tiap-tiap fungsi tersebut pada route.
4.2 Saran
Adapun saran untuk praktikum ini adalah :
- Mahasiswa yang mengikuti praktikum mempunyai kemampuan yang
sama, tanpa ada pengantar dari dosen dan assistent dosen mustahil jika
mahasiswa akan memahaminya.
- Pengantar dari assisten dosen sebelum pelaksanaan praktikum sangat
56
BAB I
MEMBUAT LOG IN DENG AN AUTENTIKA D EFAULT PADA LARAVEL
BAB I PENDAHULUAN
1.1 Latar Belakang
Dalam pemrograman, satu hal yang hampir pasti kita jumpai ketika
membuat sebuah website adalah proses autentikasi yang meliputi login, logout,
registrasi, dan reset password. Fungsi-fungsi standard seperti itu biasanya cukup
straightforward (tidak ribet) dan mudah diimplementasi. Tetapi harus membuat
fungsi tersebut berulang-ulang setiap kali memulai suatu proyek jelas bukan
pilihan yang bagus.
Programmer yang berpengalaman biasanya sudah mempunyai senjata
berupa template aplikasi (base application) dengan fungsi-fungsi standard di
dalamnya yang bisa digunakan kembali (reuse). Nah, bagi Anda yang belum
memilikinya bisa memanfaatkan proses autentikasi bawaan Laravel yang memang
sudah disediakan secara default. Kita tinggal memakai dan atau memodifikasinya
sesuai keperluan. (Anonim 2016)
1.2 Tujuan Praktikum
Setelah menyelesaikan percobaan ini diharapkan mahasiswa mampu:
a. Dapat memahami konsep auth default pada laravel
b. Dapat memahami konsep login auth default laravel, dan
57
BAB II
BAB II PEMBAHASAN PRAKTIKUM
2.1 Persiapan Praktikum 2.1.1 Perangkat Keras
Perangkat keras yang dipergunakan untuk melaksanakan praktikum
meliputi :
1. Komputer / Laptop
2. Perangkat Aksesosis (Mouse, Keyboard)
2.1.2 Perangkat Lunak
Perangkat lunak untuk mendukung kegiatan praktikum adalah :
1. XAMPP v3.2.1
2. Framework Laravel
3. Edit text Sublime 3
2.2 Dasar Teori
CRUD Autentikasi dengan laravel versi baru lebih praktis jika dibandingkan
dengan laravel versi sebelumnya. Semua yang kita butuhkan untuk login
autentikasi sudah dikonfigurasi. Di laravel versi baru secara default kita akan
mendapatkan form dasar seperti register, login, dan password reset. Sehingga kita
tidak perlu menghabiskan banyak waktu untuk melakukan konfigurasi dan
menulis kode.(Olbers 2016f)
Setelah melakukan instalasi laravel, Anda akan mendapatkan autentikasi file
58 File-file diataslah yang akan membuat Anda mudah untuk konfigurasi user
login, register, password reset di laravel. Anda bisa bebas untuk menyesuaikan
secara manual user login autentikasi dan proses registrasi.
Untuk menyesuaikan user register menggunakan proses dalam file
app/Services/Registrar.php, jika mau Anda bisa merubah proses sesuai dengan kebutuhan Anda. Untuk merubah tampilannya bisa melalui resources/views/auth
dan membuat tampilan login, register dan lainya yang sesuai dengan Anda
inginkan.
Untuk melakukan konfigurasi autentikasi kita memerlukan beberapa proses
seperti berikut:
a. Konfigurasi database
b. Buat table pada database menggunakan migrations
c. Cek proses user register dan user login
d. Dan lainnya yang sesuai keinginan anda
i. Konfigurasi Database
Masuk ke direktori file config/database.php. konfigurasi database
host, user, password sesuai dengan database yang dibuat.
ii. Membuat table pada database menggunakan migrations
Migrations merupakan cara untuk memodifikasi skema database dan
tetap up to date pada keadaan skema saat ini. Pada dasarnya migrations
adalah cara kita untuk dapat memanipulasi database menggunakan kode.
Kita tidak perlu menggunakan phpmyadmin untuk memanipulasi database,
sehingga kita langsung dapat memanipulasi database menggunakan kode.
Untuk membuat migrations, kita perlu menggunakan perintah pada Artisan
CLI. Untuk mengetahui lebih banyak tentang migrations Anda dapat
59
BAB III
BAB III PELAKSANAAN PRAKTIKUM
Didalam praktikum design dan aplikasi web tentang membuat login dengan
autentika default pada laravel ini yang dipelajari adalah cara membuat membuat
database dan membuat table pada database menggunakan migrations. Adapun
praktikum yang dilakukan adalah sebagai berikut :
3.1 Konfigurasi / Setting Koneksi ke Database
Membuka Laravel yang telah diinstal pada pertemuan sebelumnya, dengan
memanggil url : localhost/home, dan tampilanya seperti gambar 3.1.
Gambar 3.1 Tampilan url laravel/home
3.2 Konfigurasi Database dan Migration
Mensetting konfigurasi database dengan merubah sintak didalam .env dengan
system konfigurasi database, host = “localhost”, database= “db_ijoal”, user= “root” dan password= “”.
DB_CONNECTION=MySQL DB_HOST=localhost DB_PORT=3306
DB_DATABASE=db_ijoal DB_USERNAME=root DB_PASSWORD=
3.3 Membuat database
Setelah mensetting sistem konfigurasi lalu membuat database dengan nama