Cara Membuat CRUD Laravel dengan Form Validasi

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.23

SET 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.
|
*/
//Index
Route::get('/', 'Controller@index');

//Tambah Data
Route::post('/form/tambahData','Controller@tambahData');

//EditData
Route::get('/form/edit/{noinduk}','Controller@editData');

//UpdateData
Route::post('/form/updateData/{noinduk}','Controller@updateData');

//DeleteData
Route::get('/form/delete/{noinduk}','Controller@deleteData');

Kita bahas sedikit ya,

//Tambah Data
Route::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.

//EditData
Route::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 :

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB; //Import class DB

use 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 siswa
return 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 row
return redirect('/');
}

public function editData($noinduk){
$data_edit = DB::table('tb_siswa')->where('noinduk',$noinduk)->get(); //Query get row berdasarkan noinduk

foreach ($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 noinduk
return redirect('/');
}

public function deleteData($noinduk){
DB::table('tb_siswa')->where('noinduk',$noinduk)->delete(); // Delete Data
return 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>


<div id="modalTambah" class="modal fade" role="dialog">
<div class="modal-dialog">


<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

Cara Membuat CRUD Laravel dengan Form Validasi

Database

Install Laravel

Siapkan Assets

Atur Routes

Konfigurasi Database Laravel