Pemrograman Web~ Creat menggunakan laravel
Assalamualikum Warohmatullahi Wabarokatu
Haloo semuanya kembali lagi dengan saya dalam artikel Pemrograman Web , setelah sekian lama saya tidak membuat artikel karena satu dua hal akhrinya saya membuat artikel kembali
Kali ini saya akan melanjutkan materi tentang laravel. yaitu CRUD menggunakan laravel tetapi hanya di Creat nya dulu , tanpa basa basi lagi mari kita mulaii...
Creat Data
Pertama buka folder viewsnya dan buka file belajar.blade.php dan tambahkan code berikut:
<a href="{{ url('siswa/create') }}" class="btn btn-success">Tambah Data</a>
Penjelasan : Code ini bertujuan mengarahkan ke page form yang nanti akan dibuat
Selanjutnya buka file web.php yang berada difolder routes dan masukkan code berikut :
Route::get('/siswa/create', 'SiswaController@create');
Penjelasan : untuk Code ini bertujuan untuk mengarahkan kita ke controller SiswaController dan mengakses method create.
Selanjutnya kita buka file app/http/controller/SiswaController dan tambahkan code berikut :
public function create()
{return view('siswa.form');}
Penjelasan :untuk membuat file form.blade.php yang berada di folder siswa
Lalu buat folder siswa dan buat file form.blade.php didalam foldernya dan tambahkan code berikut didalam filenya :
<!DOCTYPE html>
<html>
<head>
<title>Tambah data</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js
/bootstrap.min.js"></script>
</head>
<body class="bg-white" style="color: black;">
<div class="container">
@if(session('error'))
<div class="alert alert-error">
{{ session('error') }}
</div>
@endif
@if(count($errors) > 0)
<!-- Button trigger modal -->
<button type="button" class="btn btn-danger btn-block"
data-toggle="modal" data-target="#exampleModal">
Error occured. Click to see an error
</button>
<!-- Modal -->
<div class="modal fade " id="exampleModal" tabindex="-1"
role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Error</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<strong>Perhatian!</strong>
<br>
<ul>
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
</div>
@endif
<form action="{{ url('siswa') }}" method="POST">
<table class="form-grup" style="margin: auto">
<h1 align="center">
Form Siswa</h1>
<tr>
<td>NIS</td>
<td><input type="text" name="nis" value="{{ old('nis') }}"
class="form-control"></td>
</tr>
@csrf
<tr>
<td>Nama Lengkap</td>
<td><input type="text" name="nama_lengkap"
value="{{ old('nama_lengkap') }} " class="form-control"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td class="form-check form-check-inline">
<label><input type="radio" name="jenkel" value="L"
class="form-check-input">L</label><br>
<label><input type="radio" name="jenkel" value="P"
class="form-check-input" style="margin-left: 10px">P</label>
</td>
</tr>
<tr>
<td>Golongan Darah</td>
<td>
<select name="goldar" class="form-control">
<option value="{{ old('goldar') }}">-Pilih Goldar-</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="AB">AB</option>
<option value="O">O</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Simpan"
style="margin-top:10px" class="btn btn-warning btn-block"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Penjelasan : Code diatas membuat form yang nantinya data dari form tersebut akan dikirimkan dan dimasukkan kedalam database. diatas ada @csrf , @csrf(Cross-Site Request Forgery) merupakan bentuk eksploitasi website yang dieksekusi atas wewenang korban, tanpa dikehendakinya. Jadi CSRF menipu web site melalui request dari user yang dipercaya .atau singkatnya @csrf itu fitur laravel untuk mengamankan script.
Hasil
Sekarang buka web.php lalu tambahkan route berikut
Route::post('/siswa', 'SiswaController@store');
Penjelasan : code diatas merupakan penangkapan data yang dikirimkan oleh form sebelumnya. Data tersebut dikirimkan ke rute ini dan diproses di SiswaController.
Lalu buat methos store di SiswaController. buka dan tambahkan code berikut :
public function store(Request $request)
{
$input = $request->all();
unset($input['_token']);
$status = DB::table('t_siswa')->insert($input);
if ($status) {
return redirect('/siswa')->with('success', 'Data berhasil ditambahkan');
} else {
return redirect('/siswa/create')->with('error', 'Data gagal ditambahkan');
}
}
Penjelasan : Script diatas menangkap data yang diinputkan sembari menghapus token csrf dan memasukkan ke database. Lalu ada pengkodisian , jika berhasil arahkan ke route belajar dengan session success, data berhasil ditambahkan. Jika tidak maka arahkan kembali ke form tadi sembari mengrimkan pesan error.
Massage
Sekarang kita akan menggunakan pesan tadi karena belum dipakai . Tapi, di code sebelumnya sudah terdapat code untuk massegenya. Langsung saja kita tambahkan code di belajar.blade.php :
@if(session('success'))
<div class="alert alert-success alert-dismissable fade show">
{{ session('success') }}
<button class="close" type="button" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@endif
@if(session('error'))
<div class="alert alert-error">
{{ session('error') }}
</div>
@endif
Penjelasannya : Code diatas akan menampilkan massage bila data berhasil ditambahkan atau error ditambahkan. *jangan lupa link kan ke file boostrap offline/online
Hasil
Validation/Validasi
Merupakan prosess pengecekan form yang belum terisi dan tidak memperbolehkan dibiarkan kosong. Laravel sendiri sudah memiliki fitur validasi yang dimana kita hanya diperuntuhkan untuk menggunkannya dengan sangat mudah. Langsung saja kita coba dengan menambahkan Code berikut pada method store di SiswaController:
$rule = [
'nis' => 'required|numeric',
'nama_lengkap' => 'required|string',
'jenkel' => 'required',
'goldar' => 'required'
];
$this->validate($request, $rule);
Kita hanya perlu memberi syarat-syarat yang diperlukan dan selesai. Tidak hanya itu, kita coba untuk mengirimkan pesan error jika form tidak diisi . Saya disini menggunakan frameworknya boostrap untuk frontendnya, dapat disesuaikan .
Hasil
Study Kasus 1
Membuat form data untuk tabel kelas dan validasinya . Langsung saja buat link ke form dari kelas.blade.php :
<a href="{{ url('kelas/create') }}"class="btnbtn-warningbtn-block">TambahKelas</a>
Lalu buat routesnya :
Route::get('/kelas/create', 'KelasController@create');
Selanjutnya buat method creat di KelasController :
public function create()
{return view('kelas.form');}
Lalu kita buat file formnya sama seperti cara sebelumnya dan tambahkan code berikutnya:
<!DOCTYPE html>
<html>
<head>
<title>Tambah data</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1
/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1
/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7
/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1
/js/bootstrap.min.js"></script>
</head>
<body class="bg-white" style="color: black;">
<div class="container">
@if(session('error'))
<div class="alert alert-error">
{{ session('error') }}
</div>
@endif
@if(count($errors) > 0)
<!-- Button trigger modal -->
<button type="button" class="btn btn-danger btn-block"
data-toggle="modal" data-target="#exampleModal">
Error occured. Click to see an error
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1"
role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Error</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<strong>Perhatian!</strong>
<br>
<ul>
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
</div>
@endif
<h1 align="center"> Form Kelas</h1>
<form action="{{ url('kelas') }}" method="POST">
@csrf
<table style="margin: 0 auto;" class="form-grup">
<tr>
<td>Nama Kelas:</td>
<td><input type="text" name="nama_kelas"
value="{{ old('nama_kelas') }}" class="form-control"></td>
</tr>
<tr>
<td>Nama Jurusan</td>
<td><input type="text" name="jurusan"
value="{{ old('nama_jurusan') }}" class="form-control"></td>
</tr>
<tr>
<td>Lokasi Ruangan</td>
<td><input type="text" name="lokasi_ruangan"
value="{{ old('lokasi_ruangan') }}" class="form-control"></td>
</tr>
<tr>
<td>Nama Wali Kelas</td>
<td><input type="text" name="nama_wali_kelas"
value="{{ old('lokasi_ruangan') }}" class="form-control"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Simpan"
class="btn btn-warning btn-block" style="margin-top: 10px"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Selanjutnya buat route untuk methode store di web.php :
Route::post('/kelas', 'KelasController@store');
Lalu buat method dengan menambahkan code berikut di KelasController :
public function store(Request $request)
{
$rule = [
'nama_kelas' => 'required|string',
'jurusan' => 'required|string',
'lokasi_ruangan' => 'required|string',
'nama_wali_kelas' => 'required|string'
];
$this->validate($request, $rule);
$input = $request->all();
unset($input['_token']);
$status = DB::table('t_kelas')->insert($input);
if ($status) {
return redirect('/kelas')->with('success', 'Data berhasil ditambahkan');
} else {
return redirect('/kelas/create')->with('error', 'Data gagal ditambahkan');
}
}
Coba jelankan dan hasilnya seperti berikut
Form
Massage
Validasi
Studi Kasus 2
Temukan Bug pada Codingan yang sudah dibuat !!
Langsung saja kalian coba buka form untuk data siswa lalu coba isi 'AB' pada input goldar lalu submitkan, maka akan ada error seperti berikut :
Jadi error nya adalah pada database di kolom goldar lengthnya hanya 1 jadi terjadi error seperti yang diatas. untuk solusinya kalian tinggal edit databasenya lalu ubah menjadi 2 untuk panang typenya
Setelah itu kalian dapat merefresh page formnya lalu coba submit maka hasilnya akan dapat diinput
Studi Kasus 3
Gunakan fungsi old pada radio button data comobox !!
Untuk itu kalian hanya tinggal memasukkan codingan berikut di form.blade.php:
<tr><td>Jenis Kelamin</td>
<td class="form-check form-check-inline">
<label><input type="radio" name="jenkel" value="L"
@if(old('jenkel')) checked @endif class="form-check-input">L</label><br>
<label><input type="radio" name="jenkel" value="P" @if(old('jenkel')) checked @endif class="form-check-input" style="margin-left: 10px">P</label>
</td>
</tr>
<tr>
<td>Golongan Darah</td><td>
<select name="goldar" class="form-control">
<option value="">-Pilih Goldar-</option>
<option value="A" {{ old('goldar') == 'A' ? 'selected' : '' }}>A</option>
<option value="B" {{ old('goldar') == 'B' ? 'selected' : '' }}>B</option>
<option value="AB" {{ old('goldar') == 'AB' ? 'selected' : '' }}>AB</option>
<option value="O" {{ old('goldar') == 'O' ? 'selected' : '' }}>O</option>
</select></td>
</tr>
Untuk hasilnya seperti berikut :
Meski inputan gagal tapi masih ada inputan yang disimpan agar tidak perlu mengetik ulang
Okee mungkin segitu saja untuk artikel kali inii , tunggu updatean berikutnya , cyaa..
Comments
Post a Comment