• Tidak ada hasil yang ditemukan

LAPORAN PRAKTIKUM DESIGN DAN APPLIKASI WEB

N/A
N/A
Protected

Academic year: 2018

Membagikan "LAPORAN PRAKTIKUM DESIGN DAN APPLIKASI WEB"

Copied!
90
0
0

Teks penuh

(1)

LAPORAN PRAKTIKUM DESIGN DAN APPLIKASI WEB

Disusun oleh: Suharyanto

14330032

PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK

UNIVERSITAS JANABADRA YOGYAKARTA

(2)

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

(3)

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

(4)

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

(5)

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

(6)

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

(7)

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

(8)

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

(9)

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

(10)

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

(11)

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.

(12)

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.

(13)

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

(14)

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.

(15)

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.

(16)

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.

(17)

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

(18)

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

(19)

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 :

(20)

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

(21)

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

(22)

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>';

(23)

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

(24)

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')

{

(25)

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

(26)

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

(27)
(28)

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

(29)

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

(30)

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:

(31)

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>

(32)

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>

(33)

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.

(34)

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);

(35)

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>

(36)

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;

(37)

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">

(38)

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:

(39)

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,

(40)

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">

(41)

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.

(42)

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

(43)

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

(44)

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.

(45)

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.

(46)

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

(47)

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

(48)

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

(49)

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.

(50)

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.

(51)

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

(52)
(53)

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

(54)

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

(55)

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

(56)

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

(57)

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

(58)

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"

(59)

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) {

(60)

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>

(61)

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 :

(62)

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

(63)

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

(64)

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

(65)

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

(66)

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

Gambar

Gambar 2.2  Tampilan framework laravel secara default
Gambar 3.4  Setup composer
Gambar 3.6  Ready to Install
Gambar 3.8  Cek penginstalan composer
+7

Referensi

Dokumen terkait

Penghubung dinamik (Dynamic Links) adalah fasilitas khusus ER Mapper yang membuat pengguna dapat langsung menampilkan data file eksternal pada citra tanpa

Jika anda berhasil masuk (login) dengan menggunakan user dan password yang sudah ditentukan di atas, berarti Database Server , Service PHP dan sekaligus

Di masa yang sudah canggih ini kita sering menggunakan Web (website atau situs) dapat diartikan sebagai kumpulan halaman yang menampilkan informasi data teks,

Sebuah variabel juga dapat dicetak nama dan nilainya ke dalam suatu file dengan fungsi print yang mempunyai sintak sebagai berikut:. print(nama_file, x1, x2,

Setelah user berhasil melakukan otorisasi login , maka sistem akan menampilkan home – halaman depan dari aplikasi Helpdesk online sesuai dengan jabatan user yang

Sebelum mengkases sebuah file, maka kita harus membuka dulu file yang akan kita proses!. PHP menyediakan fungsi built-in untuk membuka file yaitu

Menampilkan direktori yang sedang aktif, dibawah ini menunjukkan bahwa direktori yang aktif/ yang sedang dibuka yaitu di direktori home dan di sub direktori labkom dan subdirektori

Praktikum Pengantar Komputer dan Internet 2009/2010 – Mengenal Windows dan MS-DOS [drive:] : Menampilkan daftar (listing) isi file yang ada di drive tersebut2. [path] :