Materi Crud Laravel Umm

MODUL LARAVEL
VIEW DARI MVC
Oleh
Tim Komunitas Laravel UMM
Jurusan Teknik Informatika

Fakultas Teknik
Universitas Muhammadiyah Malang
2018.
a. Penggunaan view
Dalam mengembangkan aplikasi, sering kali terdapat backend developer dan designer yang
memiliki tugas yang berbeda (tentunya, beda cerita kalau Anda seorang Single Fighter
Developer). Backend developer yang mengerjakan logic aplikasi, sementara designer yang
mengerjakan bagaimana informasi tampil dalam aplikasi kita. Terkadang, ketika kita hendak
mengerjakan sebuah fitur, seorang designer harus menunggu logic dari Backend Developer
hingga selesai. Disinilah manfaat menggunakan View, kita dapat memisahkan tampilan aplikasi
dari logika pengelolaan data. Pada View, kita dapat membuat data dummy (palsu). Sehingga,
backend developer dan designer dapat bekerja secara parallel Untuk membuat view, kita dapat
membuat file baru di dalam folder resources/views dengan extensi .php. Misalnya kita buat view
untuk menampilkan kalimat motivasi dengan nama view motivasi.php:
resources/views/motivasi.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Yang Asli</title>
</head>
<body>
<h1>Yang Asli</h1>
<p>
Hari ini, kurangilah hal-hal yang palsu dalam kehidupan mu. Agar rezeki &
cinta yang datang lebih asli. - Mario Teguh
</p>
</body>
</html>
Terlihat disini, kita menggunakan html biasa pada view ini. Untuk menampilkan view ini, kita
dapat menggunakan method return view('nama-view'). Misalnya, kita buat route /motivasi untuk
menampilkannya:
routes/web.php
Route::get('/motivasi', function() {
return view('motivasi');
});
Hasilnya dapat diakses dengan alamat http:8000/motivasi seperti pada gambar berikut :
b. Konfigurasi
Kita dapat membuat view dalam sub-folder untuk merapihkan strukturnya. Misalnya, kita
dapat menyimpan view motivasi ke sub-folder quote.
Untuk memanggil view ini, kita dapat menggunakan dot notation untuk mengakses struktur
foldernya. Sehingga, pemanggilan view ini akan menjadi:
return view('quote.motivasi');
});
Dan view ini akan tetap berjalan:
c. Passing Variable
Kita dapat melakukan passing variable ke view dengan menambahkan variable yang hendak
kita kirimkan menggunakan array asosiatif sebagai parameter kedua pada saat memanggil view.
Misalnya, kita buat nama penulis quote menjadi dynamic:
app/Http/routes.php
return view('quote.motivasi', ["penulis" => "Joni"]);
});
Menggunakan syntax ini, kita dapat mengakses variable $penulis dari view:
<p>
Hari ini, kurangilah hal-hal yang palsu dalam kehidupan mu. Agar rezeki \
& cinta yang datang lebih asli. <strong>- <?php echo $penulis; ?> </strong>
</p>
Sehingga, kini nama penulis kalimat motivasi akan berubah:
Tentunya, kita dapat mengirimkan lebih dari satu variable. Misalnya, kita passing juga kalimat
motivasinya:
app/Http/routes.php
return view('quote.motivasi', [
'penulis' => 'Joni',
'kalimat' => 'Jatuh adalah cara maju yang rasanya tidak enak. Bangkit, m\
ove on! Jangan menyerah!'
]);
});
Kita ubah juga viewnya:

<p>
<?php echo $kalimat; ?> - <?php echo $penulis; ?>
</p>
Sehingga kita akan mendapatkan hasilnya berikut:
d. Passing Variable ke Beberapa View

Selain passing variable dalam sebuah view, kita juga dapat melakukan passing variable
ke beberapa view secara sekaligus. Misalnya mari kita passing variable nama aplikasi ke
beberapa view. Untuk melakukannya kita perlu menggunakan View::share() pada service
provider. Kita dapat membuatnya atau menggunakan yang sudah ada. Untuk memudahkan, mari
kita gunakan service provider yang sudah ada, misalnya AppServiceProvider. Tambahkan baris
berikut pada method boot:
app/Providers/AppServiceProvider.php
public function boot()
{
Schema::defaultStringLength(191);
\View::share(['app_name'=>'Quote App v2.0'], 'quote.motivasi');
}
Di baris ini, kita melakukan passing variable $app_name ke view quote.motivasi. Mari kita
panggilvariable ini dari view:
resources/views/quote/motivasi.php
<p>
Made by <?php echo $app_name; ?>
</p>
Mari kita coba passing variable ini ke view lain, buatlah view quote.inspirasi seperti berikut:
resources/views/quote/inspirasi.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inspirasi</title>
</head>
<body>
<h1>Inspirasi</h1>
<p>
Saya tidak mau pengalaman dan pengetahuan yang saya miliki,
terkubur bersama tubuh saya kelak. - Bob Sadino
</p>
<p>
</p>
</body>
</html>
Kita buat juga route untuk view ini:
app/Http/routes.php
Route::get('/inspirasi', function() {
return view('quote.inspirasi');
});
Untuk passing variable $app_name ke view ini, kita ubah View::share() menjadi:
app/Providers/AppServiceProvider.php
public function boot()
{
Schema::defaultStringLength(191);
\View::share(['app_name'=>'Quote App v2.0'], ['quote.motivasi',
'quote.inspirasi']);
}
Mari kita coba akses view ini:
e. Blade, Templating Engine dari Laravel

Menggunakan Blade kita akan lebih mudah dalam mengatur view. Untuk menggunakan
Blade, kita cukup mengubah ekstensi file menjadi .blade.php. Misalnya view quote.inspirasi
dapat kita ubah namanya menjadi inspirasi.blade.php.
 Menampilkan data
Untuk menampilkan data (echo) kita dapat menggunakan syntax {{ }}. Pada contoh view
quote.inspirasi, kita dapat merubah syntaxnya menjadi:
resources/views/quote/inspirasi.blade.php
<p>
Made by {{ $app_name }}
</p>
Terkadang, kita ingin menampilkan nilai default pada view jika sebuah variable belum diset,
untuk itu kita dapat menggunakan syntax berikut:
{{ $app_name}}
Syntax {{ }} akan meng-escape data markup html, misalnya contoh berikut:
<p>
Saya tidak mau pengalaman dan pengetahuan yang saya miliki, terkubur bersama\
tubuh saya kelak. - {{ '<strong>Bob Sadino</strong>' }}
</p>
Maka output akan seperti berikut:
Ini sebenarnya bagus, agar user tidak dapat memasukan script javascript ke text box. Tapi,
terkadang kita ingin menghilangkan behaviour ini. Untuk itu, kita dapat menggunakan {{! !}}:
<p>
Saya tidak mau pengalaman dan pengetahuan yang saya miliki, terkubur bersama
tubuh saya kelak. - {!! '<strong>Bob Sadino</strong>' !!}
</p>
Kini, markupnya akan berjalan:
 Komentar
Dalam html kita dapat menggunakan <!-- --!> untuk memberikan komentar pada baris.
Menggunakan blade, kita dapat menggunakan syntax {{-- --}} untuk membuat komentar.
Misalnya seperti berikut:
resources/views/master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
{{-- Title untuk halaman --}}
<title>@yield('title','Quote App')</title>
</head>
<body>
{{-- Konten untuk halaman --}}
@yield('body')
</body>
</html>
 Blade Layout
Kelebihan utama penggunaan blade adalah kita dapat menggunakan templating untuk
merapikan struktur folder aplikasi. Untuk menggunakannya, kita harus membuat file layout yang
akan digunakan oleh berbagai view. Misalnya kita buat di resorces/views/master.blade.php:
resorces/views/master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Quote App</title>
</head>
<body>
@yield('body')
</body>
</html>
Pada file ini, kita menggunakan syntax @yield() yang menandakan lokasi untuk child view
mengisi konten yang diinginkan. View yang kita gunakan sebagai layout biasanya disebut parent
view. Mari kita gunakan layout ini untuk view quotes.inspirasi
@extends('master')
@section('body')
<h1>Inspirasi</h1>
<p>
Saya tidak mau pengalaman dan pengetahuan yang saya miliki, terkubur bersama tubuh saya
kelak. - {!! '<strong>Bob Sadino</strong>' !!}
</p>
<p>
</p>
@stop
View yang menggunakan layout, kita namakan child view. Pada view ini, kita
menggunakan syntax @extends('master') untuk menandakan bahwa view ini akan menggunakan
layout master.blade.php. Selanjutnya, terdapat syntax @section('body') dan diakhiri dengan
@stop. Syntax ini menandakan bahwa child view ini akan mengisi tempat @yield('body') pada
parent view (master.blade.php). Silahkan cek kembali view ini, pastikan bahwa view ini tetap
berjalan. Sebagai latihan ubah juga view quote.motivasi agar menggunakan blade dan
menggunakan layout master.blade.php. Fitur lain dari layouting ini adalah kita dapat menentukan
nilai default yang dapat di overide oleh child view. Misalnya, mari kita buat title dari halaman
quote ini menjadi dinamis dengan default berisi tulisan Qoute App.
<!DOCTYPE html>
<html lang="en">
<head>
<title>@yield('title','Quote App')</title>
</head>
<body>
@yield('body')
</body>
</html>
Kita overide pada tampilan halaman motivasi..
resources/views/quote/motivasi.blade.php
@extends('master')
@section('title', 'Kalimat Motivasi')
@section('body')
<p>
<h1>Asli</h1>
</p>
<p>
</p>
@stop
Sehingga akan tampil..

Sedangkan pada tampilan halaman /inspirasi akan menggunakan nilai default..
 Sub View
Syntax @extends() digunakan untuk memberitahu parent view yang akan dia gunakan oleh
sebuah view. Namun, adakalanya kita ingin memasukan view lain ke dalam view yang sedang
aktif. Contoh penggunaannya untuk form, sidebar, footer, dll. Teknik ini dinamakan “sub view”,
sementara view yang akan kita masukan ke dalam view aktif biasanya dinamakan “partial view”.
Untuk menggunakannya kita dapat menggunakan syntax @include(). Umumnya, nama file untuk
partial view diawali dengan underscore “_”. Misalnya, kita buat footer menjadi partial view
dengan file resources/views/partials/_footer.blade.php:
resources/views/partials/_footer.blade.php
<p>
</p>
Kemudian kita ubah view quote.motivasi dan quote.inspirasi:
resources/views/quote/motivasi.blade.php
@extends('master')
@section('body')
<p>
<h1>Asli</h1>
</p>
<p>
@include('partials._footer')
</p>
@stop
@extends('master')
@section('body')
<h1>Inspirasi</h1>
<p>
Saya tidak mau pengalaman dan pengetahuan yang saya miliki, terkubur bersama tubuh saya
kelak. - {!! '<strong>Bob Sadino</strong>' !!}
</p>
<p>
@stop
Silahkan cek kembali kedua view tersebut dan pastikan footer pada kedua view masih berjalan.
f. Form
Semenjak Laravel versi 5, helper untuk form dari Laravel telah dihilangkan. Tentunya, kita
bias menggunakan cara manual dengan menulis setiap element html dari sebuah form. Tapi, saya
sendiri lebih suka menggunakan cara otomatis dengan menambah package laravelcollective/html
dengan menambah baris berikut pada file composer.json:
composer.json
"require": {
…………
"laravelcollective/html": "~5.0",
……………………………………..
},
Jalankan composer update untuk menginstallnya. Tunggu hingga selesai. Setelah selesai,
masukan isian berikut pada bagian providers di config/app.php:
config/app.php
'providers' => [
Collective\Html\HtmlServiceProvider::class,
],
Dan isian berikut pada isian aliases:
'aliases' => [
'Form' => Collective\Html\FormFacade::class,
'Html' => Collective\Html\HtmlFacade::class,
],
g. Membuat Form
Untuk membuat form, kita dapat menggunakan syntax Form::open() dan diakhiri dengan
Form::close(). Method open() menerima berbagai parameter berupa array opsi form yang akan
kita buat. Ubah pula isian master.blade.php menjadi:
<!DOCTYPE html>
<html lang="en">
<head>
{{-- Title untuk halaman --}}
<title>@yield('title')</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
{{-- Konten untuk halaman --}}
<div class="container">
<div class="row">
@yield('body')
</div>
</div>
</body>
</html>
Syntax asset('css/app.css') menandakan kita akan menggenerate url ke file css/app.css di folder
public. Untuk form pembuatan news, buat file di dalam folder views yang baru seperti berikut :
resources/views/news/create.blade.php
@extends('master')
@section('title', 'Create Berita')
@section('body')
{!! Form::open(['url'=>'/store']) !!}
<legend>Create Berita</legend>
<div class="form-group">
{!! Form::label('title', 'Title') !!}
{!! Form::text('title', null, ['class'=>'form-control']) !!}
</div>
{!! Form::label('content', 'Konten') !!}
{!! Form::textarea('content', null, ['class'=>'form-control']) !!}
</div>
{!! Form::label('published', 'Published') !!}
{!! Form::select('published', ['yes' => 'Yes', 'no' => 'No'],
null, ['class'=>'form-control']) !!}
</div>
{!! Form::submit('Save', ['class'=>'btn btn-primary']) !!}

{!! Form::close() !!}
@stop
Untuk melihat hasil akhir dari form ini, buatlah route berikut:
Route::get('/create', function() {
return view('news.create');
});
Untuk melihat hasilnya dapat diakses dengan alamat http://localhost:8000/create

 Form ini akan memiliki tiga field: title, content dan published. Terlihat disini, untuk
membuat form kita menggunakan syntax {!! Form::open(['url'=>'/store'])!!}
yang diakhiri dengan {!! Form::close() !!}. Pada syntax ini kita memberitahu
Laravel bahwa kita akan mengirim form ke url /store dengan method post. Cara lain
untuk membuat form dapat kita lihat di, diantaranya:
 Menggunakan method selain post (get, put atau delete). {!! Form::open(array('url'
=> '/quote', 'method' => 'get')) !!}
 Menggunakan named route. Pada contoh ini, misalnya kita telah membuat route dengan
nama quote.store {!! Form::open(array('route' => 'quote.store')) !!}
 Mengizinkan file upload. {!! Form::open(array('url' => '/quote', 'files' =>
true)) !!}
Selanjutnya kita menambah field untuk form. Banyak sekali field yang didukung oleh
package ini, berikut beberapa jenis field yang kita gunakan pada form ini.
 Label. Kita gunakan untuk menamai setiap field pada form{!! Form::label('title,
'Title') !!} Dari syntax diatas akan didapatkan: <label
for="title">Title</label>
 Text field. Kita gunakan pada field title {!! Form::text('title', null,
['class'=>'form-control']) !!} Pada field ini, parameter pertama adalah nama

field, kedua adalah isian field, dan ketiga adalah opsi field. Dari syntax diatas akan
digenerate: <input class="form-control" name="title" type="text"
id="title">
 Textarea. Kita dapat menggunakan {!! Form::textarea('content', null,
['class'=>'form-control']) !!} dari syntax tersebut dapat <textarea

name=”content” class=”form-control”></textarea>
 Dropdown List. Kita gunakan pada field tipe. {!! Form::select('published',

['yes' => 'Yes', 'no' => 'No'], null, ['class'=>'form-control']) !!}
Pada field ini, parameter pertama adalah nama field, kedua adalah array asosiatif berisi
element dropdown, ketiga adalah nilai dari field dan terakhir opsi dari field ini. Sehingga
akan digenerate:
<select class="form-control" id="published" name="published">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
Sebagai catatan, dengan menggunakan syntax Form::open(), secara default field
_token akan digenerate. Field ini akan berisi token csrf yang akan digunakan oleh Laravel untuk
mengamankan form dari serangan CSRF.
CSRF (Cross Site Request Forgery) secara sederhana adalah teknik yang digunakan hacker
untuk menjalankan action pada suatu website sebagai user yang sedang login tanpa
sepengetahuan user yang bersangkutan.
Untuk mengecek apakah form ini berhasil di submit, mari kita buat route POST dengan url
/quote dengan isi:
app/Http/routes.php
Route::post('/store', function() {
dd(Input::all());
});
Syntax dd(Input::all()); akan menampilkan semua inputan yang telah kita isi. Silahkan coba
isi form, kemudian submit. Kalau errror
Maka tambahkan script berikut

config\app.php
'aliases' => [
………………………………………………
'Input' => Illuminate\Support\Facades\Input::class,
………………………………………………
],
Hasilnya lebih kurang akan seperti berikut:
h. Form Model Binding

Fitur ini merupakan salah satu fitur menarik dari penggunaan package HTML. Bayangkan
kita sedang meng-edit sebuah quote, tentunya isian setiap field nya harus diisi dengan data yang
telah tersimpan di database. Menggunakan cara manual, kita harus mengisi setiap field tersebut.
Misalnya: {!! Form::text('title', $posts->author, ['class'=>'form-control'])
!!} Tidak masalah jika fieldnya sedikit. Tapi, jika field nya banyak, tentu hal ini akan sangat
merepotkan. Menggunakan form model binding, syntax untuk tiap field akan sama seperti saat
kita membuat form baru. {!! Form::text('title', null, ['class'=>'form-control']) !!} Tapi telah terisi
dengan data yang telah tersimpan di database. Selain manfaat diatas, penggunaan form model
binding juga memungkinkan kita untuk menggunakan form yang sama untuk membuat maupun
meng-edit sebuah resource. Mari kita praktekan dengan membuat form untuk mengedit Post.
Sebagaimana dijelaskan pada bagian sebelumnya, dengan menggunakan form model binding kita
dapat menggunakan form yang sama untuk membuat maupun meng-edit resource. Untuk itu,
mari kita pisahkan field dari form new-qoute ke file _news-form.blade.php:
resources/views/news/_news-form.blade.php
@extends('master')
@section('body')
<legend>Create Berita</legend>
{!! Form::label('title', 'Title') !!}
{!! Form::text('title', null, ['class'=>'form-control']) !!}
</div>
{!! Form::label('content', 'Konten') !!}
{!! Form::textarea('content', null, ['class'=>'form-control']) !!}
</div>
{!! Form::label('published', 'Published') !!}
{!! Form::select('published', ['yes' => 'Yes', 'no' => 'No'],
null, ['class'=>'form-control']) !!}
</div>

@stop
Dan isian create.blade.php menjadi:
resources/views/news/create.blade.php
@extends('master')
@section('body')
<legend>New Quote</legend>
@include('news._news-form')
@stop
Untuk mengedit quote, kita akan menggunakan url /edit-news/{id}. Dimana {id}
merupakan id dari quote yang hendak kita edit. Mari kita buat route nya:
routes/web.php
Route::get('/edit-news/{id}', function($id) {
$news = App\Post::findOrFail($id);
return view('news.edit-news', compact('news'));
});
Pada route ini, kita menggunakan method findOrFail() pada model App\Post untuk mencari
quote dengan id yang kita kirim. Kemudian menampilkan view edit-news.blade.php sambil
mengirim variable $news. Isian dari edit-news.blade.php akan seperti berikut:
resources/views/news/edit-news.blade.php
@extends('master')
@section('body')
{!! Form::model($news, ['url'=>'/news/' . $news->id, 'method'=>'put']) !!}
<legend>Update News</legend>
@include('news._news-form')
{!! Form::submit('Update', ['class'=>'btn btn-primary']) !!}
@stop
Terlihat disini, kita menggunakan Form::model() dengan parameter variable $news yang telah
kita kirim. Jika kita mengakses url /edit-news/{id} dengan id yang benar, maka form akan
otomatis terisi dengan data yang tersimpan di database:

Materi Crud Laravel Umm

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Materi Crud Laravel Umm

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL LARAVEL

VIEW DARI MVC

Jurusan Teknik Informatika

Dan view ini akan tetap berjalan:

Kita ubah juga viewnya:

Sehingga kita akan mendapatkan hasilnya berikut:

d. Passing Variable ke Beberapa View

Mari kita coba akses view ini:

e. Blade, Templating Engine dari Laravel

Maka output akan seperti berikut:

Kini, markupnya akan berjalan:

Kita overide pada tampilan halaman motivasi..

Sehingga akan tampil..

Kemudian kita ubah view quote.motivasi dan quote.inspirasi:

Dan isian berikut pada isian aliases:

{!! Form::submit('Save', ['class'=>'btn btn-primary']) !!}

Untuk melihat hasilnya dapat diakses dengan alamat http://localhost:8000/create

['class'=>'form-control']) !!} Pada field ini, parameter pertama adalah nama

 Textarea. Kita dapat menggunakan {!! Form::textarea('content', null,

['class'=>'form-control']) !!} dari syntax tersebut dapat <textarea

 Dropdown List. Kita gunakan pada field tipe. {!! Form::select('published',

Maka tambahkan script berikut

h. Form Model Binding

{!! Form::submit('Save', ['class'=>'btn btn-primary']) !!}

Dan isian create.blade.php menjadi:

Anda mungkin juga menyukai