Laravel : Create Data, Validation, dan Old Input

Assalamualaikum WR.WB

Hai! kembali lagi ke blog saya,pada postingan kali ini saya akan memberikan materi Laravel yaitu Membuat data di Laravel (Create Read Update Delete) atau disebut juga dengan CRUD.Nah mari kita langsung ke pembahasannya!

Di postingan sebelumnya , kita telah membuat beberapa tabel diantaranya tabel siswa dan juga kelas, jadi sekarang kita akan membuat create data di tabel siswa caranya sebagai berikut:

1. Buat link untuk menghubungkan form utama dengan form tambah data

buka file resources/views/belajar.blade.php kemudian tambahkan ini di bawah tulisan data siswa

<a class="btn btn-sm btn-success" href="{{ url('/siswa/create') }}">Tambah Data</a>

2. Ubah Routes

buka file file routes/web.php lalu tambakan

Route::get('/siswa/create','SiswaController@create');

3. Menampilkan view dengan nama form yang terdapat pada folder siswa
buka file app/Http/Controllers/SiswaController.php lalu tambahkan

//create
public function create(){
return view('siswa.form');
}

4. Membuat form untuk tambah data
buka file resources/views/siswa/form.blade.php jika kalian belum membuat filenya, maka kalian buat saja dahulu kemudian tambahkan

<form action="{{url('/siswa')}}" method="POST">
@csrf
<div class="container">
<h3>Data Siswa</h3>
<div class="row">
   <div class="col-md-12">
<strong>NIS :</strong>
<input type="text" name="nis" class="form-control" placeholder="NIS" value="{{ old('nis') }}">
</div>
<div class="col-md-12">
<strong>Nama Siswa :</strong>
<input type="text" name="nama_lengkap" class="form-control" placeholder="Nama Siswa" value="{{ old('nama_lengkap') }}">
</div>
<div class="col-md-12">
<strong>Golongan Darah :</strong><br>
<select name="goldar"class="form-control" >
   <option value="">- Pilih Goldar -</option>
   <option value="A" {{ old('goldar') == 1 ? 'selected' : '' }}>A</option>
   <option value="B" {{ old('goldar') == 2 ? 'selected' : '' }}>B</option>
   <option value="O" {{ old('goldar') == 3 ? 'selected' : '' }}>O</option>
   <option value="AB" {{ old('goldar') == 4 ? 'selected' : '' }}>AB</option>
</select>
</div>
<div class="col-md-12">
   <b><label for="jenkel">Jenis Kelamin :</label></b>
   <div class="radio">
   <label>
   <input type="radio" name="jenkel" id="L" value="L" @if(old('jenkel')) checked @endif>
   Laki-laki
   </label>
   </div>
   <div class="radio">
   <label>
   <input type="radio" name="jenkel" id="P" value="P" @if(!old('jenkel')) checked @endif>
   Perempuan
   </label>
   </div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-block btn-primary" value="Simpan">Submit</button>
<a href="{{url('/siswa')}}" class="btn btn-block btn-danger">Back</a>
</div>
</div>
</form>
</div>
@endsection

Nah diatas terdapat sebuah fungsi @csrf yang berfungsi untuk memproteksi Laravel dari serangan yang mengerikan yaitu serangan CSRF.CSRF sendiri adalah cross site request forgery,Maksudnya adalah csrf ini merupakan salah satu lubang di web app yang bekerja dengan cara mengeksploitasi suatu aksi dan eksploitasi ini memanfaatkan otentikasi milik salah satu user.

5. Tambahkan route POST

buka file routes/web.php lalu tambahkan

Route::post('/siswa','SiswaController@store');

6. Tambahkan fungsi store

buka file app/Http/Controllers/SiswaController.php lalu tambahkan ini dibawah fungsi create

//store
public function store(Request $request){
   $rule=[
   'nis' => 'required|numeric|digits:10|unique:t_siswa',
   'nama_lengkap' => 'required|string',
   'jenkel' => 'required',
   'goldar' => 'required',
   ];
   $this->validate($request, $rule);

   $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 !!!');
   }
}
}

7. Menambah Feedback Pesan sukses/tidak
buka file resources/views/belajar.blade.php lalu tambahkan

<div class="container">
<div class="row">
@if(session('success'))
<div class="alert alert-success">
{{ session ('success') }}
</div>
@endif
@if(session('error'))
<div class="alert alert-error">
{{ session ('error') }}
</div>
@endif
</div>
</div>

8. Membuat Validasi Input
buka file app/Http/Controller/SiswaController lalu tambahkan ini di dalam fungsi store

$rule=[
   'nis' => 'required|numeric|digits:10|unique:t_siswa',
   'nama_lengkap' => 'required|string',
   'jenkel' => 'required',
   'goldar' => 'required',
   ];
   $this->validate($request, $rule);

Kemudain buka resources/views/siswa/form.blade.php lalu tambahkan ini

<div class="container">
@if(session('error'))
<div class="alert alert-error">
{{ session('error') }}
</div>
@endif

@if(count($errors) > 0)
<div class="alert alert-danger">
<strong>Warning !!!</strong>
<br>
<ul>
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
</div>

9. Terakhir tambahkan fungsi old
Fungsinya ketika form tidak lengkap atau tidak sesuai dengan rules, seharusnya form yang sudahdiisi oleh user yang sebelumnya harus tetap muncul
buka file resources/views/siswa/form.blade.php dan tambahkan

Bentuk umumnya:

Studi kasus 1
> Lakukan hal yang sama seperti yang sudah dijelaskan pada slide sebelumnya untuk tabel t_kelas. Buatlah tampilan form untuk menambahkan data kelas.
> Implementasikan validasi untuk tabel t_kelas, cobalah beberapa validasi yang berbeda selain yang sudah dijelaskan (tidak boleh validasi numeric, string dan max)

Studi kasus 2
> Mencari bug yang terdapat pd program di atas

Studi kasus 3
> Menambahkan fungsi old pada radio button dan select option

Jawab

Studi Kasus 1 (Create Data, Validation dan Old Input pada t_kelas)
Langkah pertama, tentu saja kita harus membuat url yang menghubungkan form tampilan awal dengan form untuk menambah datanya.

<a href = " {{ url('/kelas/create') }} "> Tambah Data </a>

URL bertujuan untuk menghubungkan satu form / halaman tertentu dengan form / halaman lainnya. Yang biasanya akan ditambahkan base_url dari project yang kita buat. Contohnya adalah url('kelas/create') maka yang akan muncul pada HTML nya adalah http://localhost/laravel5.7-fresh/public/kelas/create.

Langkah kedua, tambahkan route beberapa route yang akan digunakan pada web.php

Route::get('/kelas', 'KelasController@index');
Route::get('/kelas/create', 'KelasController@create');
Route::post('/kelas', 'KelasController@store');

Setelah membuat beberapa route diatas, maka jangan lupa untuk membuat function pada file Controller yang akan kalian gunakan.

public function create()
{
return view('kelas.form');

}

Function diatas digunakan untuk menghubungkan form utama dengan form Tambah Data. Sehingga ketika kita menekan tombol Tambah Data yang telah diberi URL, maka secara otomatis akan menampilkan form Tambah Data Tersebut. Nah contoh isi dari form Tambah Data tersebut adalah sebagai berikut :

@CSRF
Fitur dari blade, yang sama dengna @csrf_field() yang berfungsi untuk membuat input hidden _token beserta tokennya. Namun untuk menggunakan @csrf ini tidak perlu menggunakan bracket ( {{ }} ) didalam HTML

Setiap request yang memiliki method selain GET yaitu (POST, PUT, PATCH, DELETE), syntax diatas wajib digunakan didalam form sebagai fungsi keamanan.

CSRF (Cross-Site Request Forgery) merupakan bentuk eksploitasi website yang dieksekusi atas wewenang korban, tanpa dikehendakinya. CSRF menipu website melalui request dari user yang dipercaya. Serangan bekerja melalui link atau script pada halaman site yang diakses user.

Tak lupa kita juga harus menambahkan function store yang telah kita definisikan dalam file Controller tadi.

public function store(Request $request)
{
$rule = [
'nama_kelas'=>'required|bail',
'jurusan'=>'required|alpha|min:10',
'lokasi_ruangan'=>'required|alpha',
'nama_walikelas'=>'required|alpha',
];
$this->validate($request, $rule);

$input = $request->all();
unset($input['_token']);
$status = \DB::table('t_siswa')->insert($input);

if ($status) {
return redirect('/kelas')->with('success', 'Data Berhasil Ditambahkan');
} else {
return redirect('/kelas/create')->with('error', 'Data Gagal Ditambahkan');
}

}

Old Input berfungsi ketika apabila data gagal untuk dibuat, hasil inputan sebelumnya tidak akan hilang setelah muncul error message tersebut. Saya juga telah menambahkan beberapa jenis validasi yaitu :

Bail : Apabila user melakukan kesalahan, maka perintah selanjutnya tidak akan dijalankan sebelum perintah sebelumnya dibenarkan oleh user
Alpha : Inputan harus berupa huruf, ketika kita memasukan selain huruf maka akan muncul error message
Require : Data harus diisi dan tidak boleh dikosongkan, apabila data dikosongkan maka akan muncul error message
Min : Tidak berbeda dengan Max, validasi min ini akan memerika jumlah character pada suatu data, apabila jumlah character kurang dari yang telah ditetapkan maka akan muncul error message
Untuk lebih jelasnya kalian juga dapat mencarinya di google, dengan keyword Validasi Framework PHP.

Cara Menambahkan Validasi / Error Message

@if(session('error'))
<div class = "alert alert-error">
{{ session('error') }}
</div>
@endif

@if (count($errors) > 0)
<div class = "alert alert-danger">
<strong> Perhatian </strong>
<br/>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>

@endif

Maksud dari codingan diatas adalah, apabila terdapat sebuah error maka secara otomatis sistem akan menghitung berapa banyak jenis error yang dijalankan. Kemudian sistem akan menampilkan error message sebanyak jumlah error yang dijalankan. Hasilnya seperti ini :

Studi Kasus 2 (Analisis BUG yang terdapat dalam Tutorial)

Bug nya adalah dikarena NIS tidak termasuk kedalam Foreign Key dalam database maka ketika kita akan menambahkan data yang sama akan terjadi duplicate. Solusinya adalah dengan menambahkan |unique:t_siswa untuk membuat variable NIS menjadi unique sehingga tidak akan terjadi duplicate
'variable'=>'required|unique:nama_table',

Hasilnya setelah menambahkan codingan diatas adalah sebagai berikut :

Studi Kasus 2 (Implementasikan Function Old pada Radio / Option Button)
Berikut adalah codingan pengimplementasian Function Old pada Radio / Option Button :

Hasilnya adalah sebagai berikut

Nah, setelah ditambahkan maka isi data yang terdapat dalam Radio / Option Button tidak akan hilang karena telah menggunakan function Old.

Mungkin cukup sekian postingan kali ini semoga postingan ini menjadi manfaat untuk kita semua.Mohon maaf apabila ada kesalahan dan kekurangan,Sampai ketemu di postingan selanjutnya.

Salam Coding!

Wasslamualaikum WR.WB

Cari Blog Ini

Tamvan Bloggers