Laravel : 1. Templating
Apa itu CRUD?
CRUD adalah sebuah proses yang bertujuan untuk memanipulasi data pada database. untuk lebih jelasnya bisa lihat gambar dibawah.
Sebelum kita masuk kedalam proses CRUD, kita akan melakukan templating terlebih dahulu.
Apa itu Templating?
Templating adalah proses dimana kita memakai base template sehingga kita tidak perlu buat header baru kalau ingin membuat view baru.
Masih bingung? Yuk langsung aja kita praktek biar langsung paham.
Sebenarnya materi templating ini ingin saya buat terpisah dari CRUD, namun saya gabung karena template ini akan menjadi template untuk CRUD. Sekarang ayo kita buat sama-sama templatenya.
oh ya, folder yang akan kita pakai kali ini adalah folder yang sudah kita buat di materi say hi to laravel 8 , kalau kalian pakai folder lain silahkan sesuaikan.
Sekarang kita buka folder “latihan” lalu kita akan menuju folder resources ➡views terlebih dahulu. Nah, didalam folder views, kita akan membuat folder baru bernama template untuk memisahkan file base template dengan file view yang lain. Didalam folder template, kita buat file base templatenya dengan nama base.blade.php.
oh ya, untuk templating ini, kita akan memakai framework bootstrap. Bagi kalian yang belum paham bootstrap, kalian bisa kunjungi artikel bang hanas belajar bootstrap
resources ➡ views➡templates➡base.blade.php
lalu letakkan kode berikut didalam base.blade.php.
<!doctype html><html lang="en"><head><!-- Required meta tags --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><title>@yield('title')</title></head><body><nav class="navbar navbar-expand-lg navbar-dark bg-primary"><div class="container"><a class="navbar-brand" href="{{url('/')}}">Latihan CRUD</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="{{url('/')}}">Home</a></li><li class="nav-item active"><a class="nav-link" href="{{url('/daftar')}}">Daftar Siswa</a></li></ul></div></div></nav>@yield('container')<!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script></body></html>
Kode diatas akan menampilkan navbar seperti berikut.
untuk {{url(‘ ’)}} digunakan untuk menghubungkan antar halaman.
Sekarang kita akan membuat halaman utamanya, buatlah file baru dengan nama home.blade.php didalam folder views.
resources ➡ views➡home.blade.php
lalu letakkan kode berikut didalam home.blade.php.
@extends('template/base')@section('title','Home')@section('container')<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div class="container"><div class="row"><div class="col-10 mt-4"><h1>Selamat Datang di latihan CRUD</h1></div><div class="col-5 mt-2"><h6>Apa saja yang akan kita pelajari?</h6></div></div><div class="row row-cols-4"><div class="card mt-4 ml-4 shadow-sm p-3 mb-5 bg-white rounded" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Konfigurasi Database</h5><p class="card-text">Menhubungkan database dengan projek kita</p></div></div><div class="card mt-4 ml-4 shadow-sm p-3 mb-5 bg-white rounded" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Create</h5><p class="card-text">Proses memasukan data kedalam database</p></div></div><div class="card mt-4 ml-4 shadow-sm p-3 mb-5 bg-white rounded" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Read</h5><p class="card-text">Proses menampilkan data dari database</p></div></div><div class="card mt-4 ml-4 shadow-sm p-3 mb-5 bg-white rounded" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Update</h5><p class="card-text">Proses merubah data pada databse</p></div></div><div class="card mt-4 ml-4 shadow-sm p-3 mb-5 bg-white rounded" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Delete</h5><p class="card-text">Proses menghapus data dari database</p></div></div></div></div></body></html>@endsection
Ada hal menarik dari kode diatas,apakah itu? yup, terdapat
@extends('template/base')@section('title','Home')@section('container')
@endsection
Apa fungsi ketiganya? syntax @extends(‘template/base’) memiliki fungsi sebagai penanda bahwa kita memakai template dari base.blade.php .
Syntax @section(‘title’,’Home’) dan @section(‘container’) bisa dibilang berfungsi sebagai penghubung content ? gimana gimana wkwk. bingung? coba lihat gambar dibawah.
Ok lanjut, sekarang kita akan membuat view untuk pengolahan siswa atau daftar siswa.
resources ➡ views➡daftar.blade.php
lalu masukan kode berikut.
@extends('template/base')@section('title','Daftar Siswa')@section('container')<div class="container mt-4"><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li><li class="breadcrumb-item active" aria-current="page">@yield('title')</li></ol></nav></div><div class="container"><div class="row"><div class="my-4 col-12"><h1 class="float-left">Daftar Siswa</h1><a class="btn btn-primary float-right mt-2" href="{{url('/create')}}" role="button">Tambah Siswa</a></div><div class="col-12"><table class="table table-stripped"><thead class="thead-primary"><tr><th class="text-center">No</th><th>Nama Siswa</th><th>Jurusan</th><th class="text-center">Angkatan</th><th>Kelas</th><th>Action</th></tr></thead><tbody><tr><td class="text-center">1</td><td>Andi de mata</td><td>Sistem Informasi</td><td class="text-center">2019</td><td>2CC20</td><td><a href="{{url('/edit')}}" class="badge badge-success">edit</a><a href="" class="badge badge-danger">delete</a></td></tr></tbody></table></div></div></div>@endsection
Selanjutnya kita akan membuat halaman tambah siswa dan edit siswa. Untuk 2 halaman ini , kita akan memakai 1 template saja dikarenaka kedua halaman ini 90% sama, kita hanya sedikit megubahnya di beberapa bagian.
Sekarang buatlah file tambah.blade.php didalam folder view.
resources ➡ views➡tambah.blade.php
lalu letakkan kode berikut didalam tambah.blade.php
@extends('template/base')@section('title','Tambah Siswa')@section('container')<div class="container mt-4"><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li><li class="breadcrumb-item"><a href="{{url('/daftar')}}">Daftar Siswa</a></li><li class="breadcrumb-item active" aria-current="page">@yield('title')</li></ol></nav></div><div class="container"><div class="row"><div class="col-md-12 mt-3"><h3>Form Tambah Siswa</h3><form action="" method="post"><div class="form-group"><label for="name">Nama Siswa</label><input class="form-control" type="text" name="name" id="name" placeholder="Masukkan Nama Siswa"></div><div class="form-group"><label for="jurusan">Jurusan</label><input class="form-control" type="text" name="jurusan" id="jurusan" placeholder="masukkan Nama Jurusan"></div><div class="form-group"><label for="angkatan">Angkatan</label><input class="form-control" type="number" name="angkatan" id="angkatan" placeholder="masukkan Tahun Angkatan"></div><div class="form-group"><label for="kelas">Kelas</label><input class="form-control" type="text" name="kelas" id="kelas" placeholder="masukkan Kelas"></div><div class="form-group float-right"><button class="btn btn-lg btn-danger" type="reset">Reset</button><button class="btn btn-lg btn-primary" type="submit">Submit</button></div></form></div></div></div>@endsection
Terakhir kita akan membuat halaman edit, buatlah file baru dengan nama edit.blade.php didalam folder views.
resources ➡ views➡edit.blade.php
lalu copy paste kode yang ada di halaman tambah, lalu ubah @section(‘title’,’Tambah Siswa’) menjadi @section(‘title’,’Edit Siswa’) dan <h3>Form Tambah Siswa</h3> menjadi <h3>Form Edit Siswa</h3>.
Semua halaman sudah kita buah nih, sekarang apa lagi? tentu saja menghubungkan antar halaman. Pergi ke web.php di resources ➡views➡routes ➡ web.php.
Tetapi sebelum itu ada yang sadar tidak kalau nama @section di setiap halaman sama? lalu bagaimana cara membedakannya ketika terhubung dengan halaman base? tentu saja dengan memakai route. penjelasannya bisa lihat gambar dibawah, Kurang lebih seperti itu.
Jadi konten yang terhubung dengan halaman base tergantung dengan url yang kita akses.
Nah sekarang kita akan buat routenya.
jika sudah mengunjungi web.php maka kalian akan menemui codingan seperti dibawah
Route::get('/', function () {
return view('welcome');
});Itu adalah route default dari halaman pertama kali dibuka. Kita akan merubahnya agar route tersebut menuju halaman home dari projek kita. Rubah codenya seperti dibawah
Route::get('/', function () {
return view('home');
});Bagaimana dengan halaman lainnya?
nah, untuk halaman lain caranya seperti dibawah
Route::get('daftar', function () {
return view('daftar');
});Route::get('tambah', function () {
return view('tambah');
});Route::get('edit', function () {
return view('edit');
});
Sekarang kita akan menjalankan laravelnya untuk melihat hasil dari kodingan kita, buka terminal➡new terminal didalam visual studio code lalu ketikkan
php artisan servetunggu sampai muncul tulisan
Starting Laravel development server: http://127.0.0.1:8000jika sudah muncul, maka kalian bisa akses ke
http://127.0.0.1:8000Maka akan muncul tampilan seperti ini
sekarang coba kita akses ke http://127.0.0.1:8000/daftar atau klik Daftar Siswa yang ada dinavbar dan untuk hasilnya kalian bisa lihat dibawah
sekarang coba kita akses ke http://127.0.0.1:8000/tambah atau klik tombol Tambah Siswa dan bila kalian mau coba ke Edit Siswa kalian bisa coba http://127.0.0.1:8000/edit atau klik tombol edit.
Post a Comment