Haikal PG - XI RPL 1 - PWPB Sesi 42

Assalamualaikum Warahmatullahi Wabarokatuh
Kembali lagi dengan saya Haikal Putra di materi Pemrograman Web dan Perangkat Bergerak. Kali ini kita akan memperdalam materi laravel kita. Jika teman-teman belum mengikuti series laravel sebelumnya, harap dibaca terlebih dahulu ya.
Jadi, pada sesi kali ini kita akan membahas tentang create data, message, validasi. Laravel telah mempunyai fitur itu semua jadi kita hanya akan menggunaakannya saja untuk mempermudah kita dalam membuat codenya.

Create Data
Seperti yang dijelaskan judul, kita akan membuat form pembuatan data. Data ini berisi data siswa yang nantinya akan dimasukkan ke database yang pernah kita buat sebelumnya.
Pertama buka folder viewsnya dan buka file belajar.blade.php dan tambahkan code berikut:

<a href="{{ url('siswa/create') }}" class="btn btn-dark mt-5">Tambah data</a>

Code ini mengarahkan kita ke url siswa/create .
Selanjutnya buka file web.php yang berada di folder routes dan masukkan code berikut:

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

Code ini mengarahkan kita ke controller SiswaController dan mengakses method create.
Selanjutnya kita buka file SiswaController yang berada di app/http/controller dan masukkan code berikut:

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

Simpan method diatas untuk membuka file form.blade.php yang berada di folder siswa.

Nah, form.blade.php nya ternyata belum ada. Kita buat dahulu dan ini codenya:

<!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-dark" style="color: white;">
	<div class="container">
		<h1 align="center">
Form Siswa</h1>
@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-dark 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 style="margin: 0 auto;">
<tr>
					<td>NIS:</td>
					<td><input type="text" name="nis" value="{{ old('nis') }}"></td>
				</tr>
@csrf
<tr>
					<td>Nama Lengkap</td>
					<td><input type="text" name="nama_lengkap" value="{{ old('nama_lengkap') }}"></td>
				</tr>
<tr>
					<td>Jenis Kelamin:</td>
					<td>
						<label><input type="radio" name="jenkel" value="L">L</label><br>
						<label><input type="radio" name="jenkel" value="P">P</label>
					</td>
				</tr>
<tr>
					<td>Golongan Darah:</td>
					<td>
						<select name="goldar">
						<option value="">-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" class="btn btn-dark btn-block"></td>
				</tr>
</table>
</form>
</div>
</body>
</html>

Code diatas membuat form yang nantinya data dari form tersebut akan dikirmkan dan dimasukkan kedalam database. Oh ita, diatas terdapat @csrf. Nah, apa itu CSRF?CSRF (Cross-Site Request Forgery) merupakan bentuk eksploitasi website yang dieksekusi atas wewenang korban, tanpa dikehendakinya. CSRF menipu web site melalui request dari user yang dipercaya. Serangan bekerja melalui link atau script pada halaman site yangd iakses user. Yah intinya ini merupakan fitur laravel untuk mengamankan.

Sekarang buka web.php yang ada di folder routes dan masukkan code berikut.

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

Nah, diatas merupakan penangkapan data yang dikirimkan oleh form sebelumnya. Data tersebut dikimkan ke rute ini dan di proses di SiswaController di method store. Sekarang buat method store tersebut.

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

    	if ($status) {
    		return redirect('/belajar')->with('success','Data berhasil ditambahkan');
    	}else{
    		return redirect('/siswa/create')->with('error','Data gagal ditambahkan');
    	}
    }

Kita menangkap data yang di inputkan sembari menghapus token csrf dan memasukkannya ke database. Lalu ada pengkondisian, jika berhasil arahkan ke route belajar dengan session success,data berhasil di tambahkan. Jika tidak maka arahkan kembali ke form tadi sembari mengirimkan pesan error.

Message
Sekarang kita akan menggunakan pesan tadi karena belum dipakai. Tapi, di code sebelumnya sudah terdapat code untuk messagenya. Untuk jelasnya saya kirimkan kembali:

@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

Nah, itu dia.

Validation/Validasi
Merupakan process pengecekan form yang belum terisi dan tidak memperbolehkan dibiarkan kosong. Laravel sendiri sudah memiliki fitur validasi yang dimana kita hanya diperuntukkan untuk menggunakannya dengan sangat mudah. Bagaimana? Coba tambahkan code berikut di method store yang berada 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 di isi. Saya disini menggunakan framework bootstrap untuk frontendnya, teman-teman bisa menyesuaikan.
Untuk hasil keseluruhannya seperti ini:

Homepage

Form pengisian data

Validasi

Message

Mungkin segini saja materinya. Sekarang waktunya STUDY KASUS!!.

Study Kasus 1
1,Membuat form data untuk tabel kelas dan validasinya.
Ok langsung kita buat... ini dia codenya:

<a href="{{ url('kelas/create') }}" class="btn btn-dark mt-5">Tambah Kelas</a>

Lalu kita buka routesnya

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

Selanjutnya buat method create di KelasController:

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

Next, kita buat viewsnya dan buat folder kelasnya juga:

<!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-dark" style="color: white;">
	<div class="container">
		<h1 align="center">
Form Kelas</h1>
@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-dark 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('kelas') }}" method="POST">
			@csrf
			<table style="margin: 0 auto;">
<tr>
					<td>Nama Kelas:</td>
					<td><input type="text" name="nama_kelas" value="{{ old('nama_kelas') }}"></td>
				</tr>
<tr>
					<td>Nama Jurusan</td>
					<td><input type="text" name="jurusan" value="{{ old('nama_jurusan') }}"></td>
				</tr>
<tr>
					<td>Lokasi Ruangan</td>
					<td><input type="text" name="lokasi_ruangan" value="{{ old('lokasi_ruangan') }}"></td>
				</tr>
<tr>
					<td>Nama Wali Kelas</td>
					<td><input type="text" name="nama_wali_kelas" value="{{ old('lokasi_ruangan') }}"></td>
				</tr>
<tr>
					<td></td>
					<td><input type="submit" value="Simpan" class="btn btn-dark btn-block"></td>
				</tr>
</table>
</form>
</div>
</body>
</html>

Code diatas terdapat form dan kita masukkan ke route untuk dikirimkan ke controller untuk dimasukkan datanya:

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

Method store:

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('/daftar_kelas')->with('success','Data berhasil ditambahkan');
    	}else{
    		return redirect('/kelas/create')->with('error','Data gagal ditambahkan');
    	}
    }

dan kita coba jalankan!:

Homepage

Form

Validasi

Data dimasukkan

Study Kasus 2
Temukan bug pada code materi ini...:v
Ok, langsung saja bug nya ada di golongan darah... Saat kita memasukkan gologan darah tipe AB maka akan error seperti ini:

Kenapa? karena pada tutorial sebelumnya kita membuat gologan darah dengan kapasitas 1 saja, yang artinya 1 karakter saja sedangkan disini kita memasukkan 2 karakter. Cara mengatasinya yaitu masuk ke database migration lalu ubah value goldar menjadi 2.

Done

Study Kasus 3
Gunakan fungsi old pada radio button data combobox.
Ok, tinggal masukkan code seperti ini:
Radio button:

<label><input type="radio" name="jenkel" value="L" @if(old('jenkel')) checked @endif>L</label><br>
						<label><input type="radio" name="jenkel" value="P" @if(!old('jenkel')) checked @endif>P</label>

Combobox:

<select name="goldar">
							<option>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>

Untuk hasilnya seperti ini:

Meski inputan gagal tapi masih ada inputan yang disimpan agar tidak perlu mengetik ulang.

Mungkin sekian saja pada pertemuan kali ini, Maaf bila ada kesalahan. Wassalamualaikum Warahmatullahi Wabarokatuh

Pemrograman Web Dan Perangkat Bergerak

Cari Blog Ini

Haikal PG - XI RPL 1 - PWPB Sesi 42

Komentar

Posting Komentar

Postingan populer dari blog ini

Haikal PG - XI RPL 1 - PWPB Sesi 25

Haikal PG - XI RPL 1 - PWPB Sesi 7

Haikal PG - XI RPL 1 - PWPB Sesi 19