Cara Membuat CRUD Laravel dengan Form Validasi - Hal semua, pada kesempatan kali ini Kompi kaleng bakal membahas dan membagikan cara membuat CRUD laravel. Setelah pada artikel sebelumnya kita belajar membuat CRUD dengan Codeigniter dan AJAX, kini saatnya kita pindah ke framework Laravel. Laravel merupakan salah satu framework PHP yang paling populer. Karena dianggap reliable dan future proof, penggunaan dan pemilihan framework laravel dalam berbagai project kian meningkat khususnya projek WEB. Nah, bagi kalian yang ingin intense ke web programming anda harus mulai belajar laravel.
Sebenarnya, saya (penulis) juga masih baru dalam laravel hehe. Jadi, saya masih belum bisa sharing banyak tentang laravel ini. Tapi, sebenarnya hampir semua framework laravel itu memiliki ciri dan konsep yang sama yaitu MVC, MVC merupakan konsep yang bisa dibilang menggunakan 3 proses dalam transaksi datanya. 3 Proses transaksi ini dimuat oleh 3 file yaitu Model, View, Controller. Baik Codeigniter, laravel, dan berbagai framework php lain juga banyak yang menggunakan konsep MVC ini. Jadi, seharusnya bagi kalian yang sudah punya basic MVC dan basic PHP seharusnya tidak susah untuk belajar laravel.
Kalau begitu langsung aja yuk, ke artikel cara membuat crud laravel.
Database
Sebelum kita mulai menginstall laravel, kita siapkan dulu databasenya untuk kita tampilkan di tabel.
Disini saya menggunakan Phpmyadmin (Mysql) sebagai databasenya.
Buatlah database dengan nama db_siswa.
Buatlah tabel dengan nama tb_siswa dengan struktur seperti gambar berikut :
Atau bisa juga dengan mengimport kode SQL berikut untuk membuat sekaligus menambah data di tb_siswa.
-- phpMyAdmin SQL Dump-- version 4.5.2-- http://www.phpmyadmin.net---- Host: 127.0.0.1-- Generation Time: Dec 11, 2019 at 02:31 AM-- Server version: 5.5.64-MariaDB-1ubuntu0.14.04.1-- PHP Version: 5.6.23SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";SET time_zone = "+00:00";/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;/*!40101 SET NAMES utf8mb4 */;---- Database: `db_siswa`---- ------------------------------------------------------------ Table structure for table `tb_siswa`--CREATE TABLE `tb_siswa` (`noinduk` varchar(5) NOT NULL,`nama` varchar(50) DEFAULT NULL,`alamat` varchar(100) DEFAULT NULL,`hobi` varchar(50) DEFAULT NULL) ENGINE=InnoDB DEFAULT CHARSET=latin1;---- Dumping data for table `tb_siswa`--INSERT INTO `tb_siswa` (`noinduk`, `nama`, `alamat`, `hobi`) VALUES('1', 'Alfansyah', 'Jalan Merdeka', 'Bermain Bola'),('2', 'Wawan Aja', 'Jalan Kebenaran', 'Mancing'),('3', 'Bubun', 'Jalan Istimewa', 'Dagang'),('5', 'Caca', 'Jalan Markisa', 'Nari');---- Indexes for dumped tables------ Indexes for table `tb_siswa`--ALTER TABLE `tb_siswa`ADD UNIQUE KEY `noinduk` (`noinduk`);/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Install Laravel
Langkah pertama untuk memulai projek ini tentu saja dengan menginstall framework laravelnya terlebih dahulu.
Untuk menginstallnya kalian bisa lewat composer. Jadi sebelumnya install composer terlebih dahulu ya hehe. Kalian bisa lihat 2 artikel sebelumnya tentang cara menginstall laravel dan composer disini :
- Cara Menginstall Composer
- Cara Menginstall Framework Laravel
Siapkan Assets
Pada tutorial kali ini kita akan menggunakan beberapa file assets untuk tampilannya. Seperti dataTables untuk tampilan tablenya dan SweetAlert untuk UI Alertnya.
Untuk itu kita siapkan dulu beberapa file assetsnya ya.
Buatlah folder pada /public dan atur menjadi seperti berikut :
Atur Routes
Tahap selanjutnya akan kita mulai dengan mengatur Routesnya terlebih dahulu. Routing adalah proses untuk mengatur bagaimana sebuah fungsi / controller dapat diakses.
Buka file routes.php untuk mengatur routing pada laravel. Dapat kalian temukan di app->Http->routes.php.
Setelah buka pada text editor, kemudian tambahkan kode berikut pada routes.php :
<?php/*|--------------------------------------------------------------------------| Application Routes|--------------------------------------------------------------------------|| Here is where you can register all of the routes for an application.| It's a breeze. Simply tell Laravel the URIs it should respond to| and give it the controller to call when that URI is requested.|*///IndexRoute::get('/', 'Controller@index');//Tambah DataRoute::post('/form/tambahData','Controller@tambahData');//EditDataRoute::get('/form/edit/{noinduk}','Controller@editData');//UpdateDataRoute::post('/form/updateData/{noinduk}','Controller@updateData');//DeleteDataRoute::get('/form/delete/{noinduk}','Controller@deleteData');
Kita bahas sedikit ya,
//Tambah DataRoute::post('/form/tambahData','Controller@tambahData');
maksud dari kode di atas kita akan mengakses URL /form/tambahData dengan tipe request POST pada fungsi tambahData() di controller Controller.
//EditDataRoute::get('/form/edit/{noinduk}','Controller@editData');
maksud dari route di atas adalah kita mengakses URL /form/edit dengan membawa parameter noinduk ke fungsi editData.
Konfigurasi Database Laravel
Untuk menghubungkan Laravel dengan database, kita bisa mengaturnya lewat file config.php yang ada di /config.
Setelah kalian buka file tersebut, kalian bisa mulai mengatur database yang kalian gunakan pada bagian connections berikut :
'connections' => ['sqlite' => ['driver' => 'sqlite','database' => env('DB_DATABASE', database_path('database.sqlite')),'prefix' => '',],'mysql' => ['driver' => 'mysql','host' => env('DB_HOST', '127.0.0.1'),'port' => env('DB_PORT', '3306'),'database' => env('DB_DATABASE', 'db_siswa'),'username' => env('DB_USERNAME', 'root'),'password' => env('DB_PASSWORD', '123'),'charset' => 'utf8','collation' => 'utf8_unicode_ci','prefix' => '','strict' => false,'engine' => null,],'pgsql' => ['driver' => 'pgsql','host' => env('DB_HOST', 'localhost'),'port' => env('DB_PORT', '5432'),'database' => env('DB_DATABASE', 'forge'),'username' => env('DB_USERNAME', 'forge'),'password' => env('DB_PASSWORD', ''),'charset' => 'utf8','prefix' => '','schema' => 'public',],],
Sesuaikan jenis database, username, dan password kalian dengan konfigurasi database kalian ya. Karena disini saya menggunakan MySQL, jadi saya atur pada bagian ‘mysql’.
Controller
Setelah laravel kita terhubung dengan databsae tahap selanjutnya kita atur controllernya, disini kita akan menggunakan Query Builder bawaan laravel untuk berinteraksi dengan database untuk proses Create, Read, Update, dan Delete.
Oh iya, karena disini kita akan mengggunakan query builder laravel kita harus menginclude kan class DB.
Membuat Controller
Buatlah Controller baru dengan membuat file baru seperti biasa dengan nama Controller.php sesuai dengan projek kita kali ini.
Atau kalian bisa menggunakan command artisan seperti berikut :
php artisan make:controller Controller --invokable
Atur Controller
Setelah selesai membuat controller, kali ini kita akan mengisinya dengan fungsi – fungsi CRUD.
Buka Controller.php kemudian isikan dengan script berikut :
<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;use Illuminate\Support\Facades\DB; //Import class DBuse Illuminate\Foundation\Bus\DispatchesJobs;use Illuminate\Routing\Controller as BaseController;use Illuminate\Foundation\Validation\ValidatesRequests;use Illuminate\Foundation\Auth\Access\AuthorizesRequests;use Illuminate\Foundation\Auth\Access\AuthorizesResources;class Controller extends BaseController{use AuthorizesRequests, DispatchesJobs, ValidatesRequests;public function index(){$data['siswa'] = DB::table('tb_siswa')->get(); //Mengambil data dari table siswareturn view('home',$data); //Meload View Home dengan mereturn $data}public function kirimPesan(){return view('mail'); // Meload View Mail}public function postPesan(Request $request){$nama = $request->input('nama');$umur = $request->input('umur');$hobi = $request->input('hobi');$data = array('info' => ['nama'=>$nama,'umur'=>$umur,'hobi'=>$hobi]);return view('home',$data);}public function tambahData(Request $request){$this->validate($request,['noinduk' => 'required','nama' => 'required|','alamat' => 'required','hobi' => 'required']); // Form Validation untuk inputan$noinduk = $request->input('noinduk');$nama = $request->input('nama');$alamat = $request->input('alamat');$hobi = $request->input('hobi');$data = ['noinduk'=>$noinduk,'nama'=>$nama,'alamat'=>$alamat,'hobi'=>$hobi];DB::table('tb_siswa')->insert($data); //Query insert rowreturn redirect('/');}public function editData($noinduk){$data_edit = DB::table('tb_siswa')->where('noinduk',$noinduk)->get(); //Query get row berdasarkan noindukforeach ($data_edit as $key => $value) {$data['noinduk'] = $value->noinduk;$data['nama'] = $value->nama;$data['alamat'] = $value->alamat;$data['hobi'] = $value->hobi;}return view('edit_data',$data);}public function updateData($noinduk,Request $request){$noinduk = $request->input('noinduk');$nama = $request->input('nama');$alamat = $request->input('alamat');$hobi = $request->input('hobi');$data = ['noinduk'=>$noinduk,'nama'=>$nama,'alamat'=>$alamat,'hobi'=>$hobi];DB::table('tb_siswa')->where('noinduk',$noinduk)->update($data); //Query update row berdasarkan noindukreturn redirect('/');}public function deleteData($noinduk){DB::table('tb_siswa')->where('noinduk',$noinduk)->delete(); // Delete Datareturn redirect('/');}}
Keterangan setiap baris sudah saya tambahkan di setiap baris ya. Kalau ada yang ingin ditanyakan bisa disampaikan lewat kolom komentar.
Views
Setelah itu, kita akan mengatur viewsnya. Uniknya, dalam laravel layouting views dapat dilakukan lebih mudah karena kita bisa menggunakan sistem template blade dari laravel.
master.blade.php
Views pertama kita akan membuat master viewnya. Di view ini kita akan meload file assets, membuat navbar dan mengatur templating bladenya.
Buat view baru di /resources beri nama master.blade.php (Jangan lupa ekstensi blade.php)
Isikan dengan script berikut :
<!DOCTYPE html><html><head><title>Laravel Alfan</title><link rel="stylesheet" href="{{ URL::asset('assets/bootstrap/css/bootstrap.css') }}"><link rel="stylesheet" href="{{ URL::asset('assets/bootstrap/css/datatables.css') }}"><link rel="stylesheet" href="{{ URL::asset('assets/sweet-alert/sweetalert2.min.css') }}"><script type="text/javascript" src="{{ URL::asset('assets/jquery/jquery-3.3.1.min.js') }}"></script><script type="text/javascript" src="{{ URL::asset('assets/jquery/datatables.js') }}"></script><script type="text/javascript" src="{{ URL::asset('assets/bootstrap/js/bootstrap.js') }}"></script><script type="text/javascript" src="{{ URL::asset('assets/sweet-alert/sweetalert2.all.js') }}"></script></head><body><style type="text/css">a:hover{color: blue;}</style><div class="container"><header><h1 style="color: black;"><a id="title" href="/">Laravel</a></h1><nav><a href="/">Home</a><a href="/blog/kirimPesan">Kirim Pesan</a></nav></header><hr/><h2>@yield('judul_halaman')</h2><br/><br/><div>@yield('konten')</div></div></body></html>
home.blade.php
Pada home, kita akan mengisikannya dengan tampilan tables dengan data – data yang sudah kita ambil di Controller sebelumnya.
Isikan dengan script berikut :
@extends('master')@section('judul_halaman','Home')@section('konten')<div class="table-responsive"><?php if(count($errors) > 0) : ?><script type="text/javascript">$(document).ready(function(){alert('Gagal Menginput Data')})</script><?php endif; ?><div class="row"><div class="col-md-12"><div class="col-md-10"></div><div class="col-md-2" align="right"><button style="margin-bottom: 10px;" class="btn btn-success" data-toggle="modal" data-target="#modalTambah">Tambah Data</button></div></div></div><table id="tbl_siswa" class="table table-bordered table-striped table-hover"><thead><tr><th>No</th><th>Nomor Induk</th><th>Nama</th><th>Alamat</th><th>Hobi</th><th>Action</th></tr></thead><tbody><?php $no=0; foreach ($siswa as $key => $value):$no++; ?><tr><td>{{$no}}</td><td>{{$value->noinduk}}</td><td>{{$value->nama}}</td><td>{{$value->alamat}}</td><td>{{$value->hobi}}</td><td style="width: 15%"><span><a class="btn btn-warning" href="/form/edit/{{$value->noinduk}}">Edit</a><a onclick="return confirm('Ingin Menghapus Data?')" class="btn btn-danger" href="/form/delete/{{$value->noinduk}}">Delete</a></span></td></tr><?php endforeach; ?></tbody></table></div><!-- Modal Tambah --><div id="modalTambah" class="modal fade" role="dialog"><div class="modal-dialog"><!-- Modal content--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4 class="modal-title">Tambah Data</h4></div><div class="modal-body"><form method="post" action="/form/tambahData">{{ csrf_field() }}<div class="row"><div class="form-group col-md-12"><label for="noinduk">Nomor Induk</label><input type="text" id="noinduk" name="noinduk" class="form-control"></input></div></div><div class="row"><div class="form-group col-md-12"><label for="nama">Nama</label><input type="text" id="nama" name="nama" class="form-control"></input></div></div><div class="row"><div class="form-group col-md-12"><label for="alamat">Alamat</label><input type="text" id="alamat" name="alamat" class="form-control"></input></div></div><div class="row"><div class="form-group col-md-12"><label for="hobi">Hobi</label><input type="text" id="hobi" name="hobi" class="form-control"></input></div></div></div><div class="modal-footer"><button type="submit" class="btn btn-success">Submit</button><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></form></div></div></div><script type="text/javascript">$("#tbl_siswa").DataTable();</script>@endsection
edit_data.blade.php
View ini digunakan sebagai tampilan data yang akan diedit. Sebelumnya kita juga sudah get data berdasarkan noinduk pada controller. Tujuannya yaitu untuk mendapatkan data berdasarkan noinduk untuk diupdate.
Isikan dengan script berikut :
@extends('master')@section('konten')<form method="post" action="/form/updateData/{{$noinduk}}"><input type = "hidden" name = "_token" value = "<?php echo csrf_token() ?>"><div class="row"><div class="form-group col-md-6"><label for="noinduk">Nomor Induk</label><input id="noinduk" type="text" name="noinduk" class="form-control" value="{{$noinduk}}"></input></div></div><div class="row"><div class="form-group col-md-6"><label for="nama">Nama</label><input id="nama" type="text" name="nama" class="form-control" value="{{$nama}}"></input></div></div><div class="row"><div class="form-group col-md-6"><label for="alamat">Alamat</label><input id="alamat" type="text" name="alamat" class="form-control" value="{{$alamat}}"></input></div></div><div class="row"><div class="form-group col-md-6"><label for="hobi">Hobi</label><input id="hobi" type="text" name="hobi" class="form-control" value="{{$hobi}}"></input></div></div><button class="btn btn-primary" type="submit">Submit</button></form>@endsection
Selesai
Projek kita sudah selesai, kini saatnya untuk menjalankan projek kita. Akses projek kalian dengan menjalankan php artisan server kemudian akses http://localhost:8000.
Screenshot
Bagaimana? apa projek kalian juga sudah berhasil?. Kalau berhasil, artinya kamu siap untuk melangkah lebih jauh dengan laravel hehe.
Jangan lupa tinggalkan komentar ya, Terima Kasih
Share This :
comment 0 komentar
more_vert