PWPB | Validasi
Validasi pada Form
Assalamualaikum warahmatullahi wabarakatuh. Pada blog kali ini saya akan berbagi ilmu mengenai Validasi pada Form menggunakan bahasa pemogramman PHP. Langsung saja kita ke materinya dan siapkan seperti biasa text editor, xampp, dan DBMS.
Langkah - Langkah :
1. Rubah kodingan di file v_tambah.php dengan kodingan di bawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="stylesheet" type="text/css" href="Assets/css/style_tambah.css">
</head>
<body>
<?php
$action = 'tambah.php';
$disabled = '';
$judul = 'Input Data Siswa';
if (!empty($siswa)){
$action = 'edit.php';
$disabled = 'readonly';
$judul = 'Edit Data Siswa';
}
?>
<center>
<!-- action diisi sesuai kondisi diatas -->
<form action="<?= $action ?>" method="POST" enctype="multipart/form-data">
<fieldset>
<legend><?= $judul ?></legend>
<table align="center" width="100%">
<tr>
<td><label for="">Foto</label></td>
<td>
<?php if ($action == "edit.php"){ ?>
<img width="100" height="110" src="<?php echo base_url()?>/Assets/image/<?php echo @$siswa['file']?>">
<br>
<input type="hidden" name="foto" value="<?php echo @$siswa['file']?>">
<?php } ?>
<img src="Assets/img/ava1.png" id="output" style="width:100px;height:100px;">
<input type="file" name="foto" class="border" autocomplete="off" onchange="loadFile(event)"></td>
</tr>
<?php if(!empty($success)) { ?>
<tr>
<td></td>
<td><p><?= $success?></p></td>
</tr>
<?php } ?>
<?php if(!empty($error)) { ?>
<tr class="alert">
<td></td>
<td><p style="color:red; margin-top:0px; font-style: italic; height:0px;"><?= $error?></p></td>
</tr>
<tr class="error">
<td><label for="nis">NIS</label></td>
<td><input autocomplete="off" style="border:2px solid red;" type="text" name="nis" value="<?= @$siswa['nis'] ?>" <?= $disabled ?>></td>
</tr>
<?php } else { ?>
<tr>
<td><label for="nis">NIS</label></td>
<td><input autocomplete="off" type="text" name="nis" value="<?= @$siswa['nis'] ?>" <?= $disabled ?>></td>
</tr>
<?php } ?>
<?php if(!empty($error1)) { ?>
<tr class="alert">
<td></td>
<td><p style="color:red; margin-top:0px; font-style: italic; height:0px;"><?= $error1?></p></td>
</tr>
<tr class="error">
<td><label for="nama_lengkap">Nama Lengkap</label></td>
<td><input autocomplete="off" style="border:2px solid red;" type="text" name="nama_lengkap" value="<?= @$siswa['nama_lengkap'] ?>"></td>
</tr>
<?php } else { ?>
<tr>
<td><label for="nama_lengkap">Nama Lengkap</label></td>
<td><input autocomplete="off" type="text" name="nama_lengkap" value="<?= @$siswa['nama_lengkap'] ?>"></td>
</tr>
<?php } ?>
<tr>
<td><label for="jenis_kelamin">Jenis Kelamin</label></td>
<td>
<input autocomplete="off" type="radio" name="jenis_kelamin" value="L" <?= @$siswa['jenis_kelamin'] == 'L' ? 'checked' : '' ?>>Laki - Laki
<input autocomplete="off" type="radio" name="jenis_kelamin" value="P" <?= @$siswa['jenis_kelamin'] == 'P' ? 'checked' : '' ?>>Perempuan
</td>
</tr>
<tr>
<td><label for="kelas">Kelas</label></td>
<td>
<select name="id_kelas" class="select1">
<option value="">[ Pilih Kelas ]</option>
<?php while($murid = @$dataKelas->fetch_array()) { ?>
<option value="<?php echo $murid['id_kelas'] ?>" <?php echo @$siswa['id_kelas'] == $murid['id_kelas'] ? 'selected' : '' ?>>
<?php echo $murid['nama_kelas'] ?>
</option>
<?php } ?>
</select>
</td>
</tr>
<tr>
<td><label for="jurusan">Jurusan</label></td>
<td><input autocomplete="off" type="text" name="jurusan" value="<?= @$siswa['jurusan'] ?>"></td>
</tr>
<tr>
<td valign="top"><label for="alamat">Alamat</label></td>
<td><textarea name="alamat"cols="40" rows="10"><?= @$siswa['alamat'] ?></textarea></td>
</tr>
<tr>
<td><label for="golongan_darah">Golongan Darah</label></td>
<td>
<select name="golongan_darah" class="select2">
<option value="A" <?= @$siswa['golongan_darah'] == 'A' ? 'selected' : '' ?>>A</option>
<option value="AB" <?= @$siswa['golongan_darah'] == 'AB' ? 'selected' : '' ?>>AB</option>
<option value="B" <?= @$siswa['golongan_darah'] == 'B' ? 'selected' : '' ?>>B</option>
<option value="O" <?= @$siswa['golongan_darah'] == 'O' ? 'selected' : '' ?>>O</option>
</select>
</td>
</tr>
<tr>
<td><label for="nama_ibu">Nama Ibu</label></td>
<td><input autocomplete="off" type="text" name="nama_ibu" value="<?= @$siswa['nama_ibu'] ?>"></td>
</tr>
<tr>
<td><label for="nama_ayah">Nama Ayah</label></td>
<td><input autocomplete="off" type="text" name="nama_ayah" value="<?= @$siswa['nama_ayah'] ?>"></td>
</tr>
<tr>
<td colspan="3" valign="middle" ><br>
<input type="submit" value="Submit">
<a href="index.php"><div class="link"><div class="br"></div>Kembali</div></a>
</td>
</tr>
</table>
</fieldset>
</form><br><br><br>
</center>
<!-- preview image -->
<script>
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>
</body>
</html>
Penjelasan :
Kodingan yang terbaru ini berfungsi untuk memvalidasi inputan dari user jika user menginput data yang salah (tidak menginput field nis dan nama lengkap) dan program akan memberitahu kepada user bahwa itu salah lalu menyuruh user menginput kembali data yang sesuai.
2. Rubah kodingan di file tambah.php dengan kodingan di bawah ini :
<?php
include 'lib/library.php';
if($_SERVER['REQUEST_METHOD']=='POST') {
// Digunakan untuk memeriksa apakah ada request dalam bentuk POST yang dikirim ke halaman ini? (Halaman tambah.php)
$nis = htmlspecialchars(@$_POST['nis']);
$nama_lengkap = htmlspecialchars(@$_POST['nama_lengkap']);
$jenis_kelamin = htmlspecialchars(@$_POST['jenis_kelamin']);
$kelas = htmlspecialchars(@$_POST['id_kelas']);
$jurusan = htmlspecialchars(@$_POST['jurusan']);
$alamat = htmlspecialchars(@$_POST['alamat']);
$golongan_darah = htmlspecialchars(@$_POST['golongan_darah']);
$nama_ibu = htmlspecialchars(@$_POST['nama_ibu']);
$nama_ayah = htmlspecialchars(@$_POST['nama_ayah']);
$foto = @$_FILES['foto'];
$file = $foto['name'];
if (empty ($nis)) {
flash('error','Mohon Masukan NIS Dengan Benar');
} else if (empty($nama_lengkap)) {
flash('error1','Mohon Masukan Nama Lengkap Dengan Benar');
} else {
if (!empty($foto) AND $foto['error'] == 0) {
$path = './Assets/image/';
$upload = move_uploaded_file($foto['tmp_name'], $path.$foto['name']);
if (!$upload) {
flash('error', "Upload file gagal!");
header('location:index.php');
}
$file = $foto['name'];
}
// Untuk membuat SQL string untuk memasukan data ke tabel siswa
$sql = "INSERT INTO siswa VALUES ('$nis','$nama_lengkap', '$jenis_kelamin', '$kelas', '$jurusan', '$alamat', '$golongan_darah', '$nama_ibu', '$nama_ayah', '$file' )";
// Digunakan untuk melakukan query ke SQL. Apabila error maka akan memunculkan pesan error nya
$mysqli->query($sql) or die ($mysqli->error);
header('location: index.php');
// Digunakan untuk mengarahkan (redirect) halaman ke index.php
}
}
$success = flash('success');
$error = flash('error');
$error1 = flash('error1');
$sql = "SELECT * FROM kelas";
$dataKelas = $mysqli->query($sql) or die ($mysqli->error);
include 'views/v_tambah.php';
?>
Penjelasan :
Kodingan yang terbaru di file tambah.php berfungsi untuk menentukan kondisi saat user salah atau tidak mengisi form dengan benar dan membuat pesan kesalahan.
3. Alur Validasi dalam sistem tambah data :
Tester
1. Input data pada form dan coba jangan isikan NIS, seperti di bawah ini :
3. Input data pada form dan coba jangan isikan Nama Lengkap, seperti di bawah ini :
5. Validasi sudah bisa digunakan dalam program tersebut dan jika menginput dengan lengkap, data akan masuk ke database seperti di bawah ini :
Cukup sekian penjelasan yang dapat saya sampaikan semoga teman teman semua dapat mengerti dengan materi yang saya jelaskan dan dapat bermanfaat, jangan lupa untuk berikan komentar di bawah jika masih ada yang membingungkan. Wassalamualaikum wr wb
1 Comments
sip
ReplyDelete