Awalnya waktu itu saya berfikir untuk bagaimana menampilkan class tertentu pada ketika terjadi error pada sebuah formulir (from) memakai style yang terdapat pada bootstrap menyerupai berikut :
<div class="alert alert-danger" role="alert"> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <span class="sr-only">Error:</span> Enter a valid email address </div> Masalahnya kalau ditampilkan apa adanya menyerupai itu, maka ketika tidak terjadi error pun classnya akan tetap dipanggil terutama untuk yang mengandung nilai menyerupai background, border, box shadow ataupun iconnnya.
Menyimpan Style Tertentu Pada Variabel PHP.
Sebelumnya saya sudah pernah menulis artikel wacana validasi form input memakai PHP, nah dengan memakai cara yang sama, kita akan mencoba menaruh style/gaya tertentu pada text baik ketika terjadi error ataupun ketika data berhasil disimpan, dimana gaya/style tersebut akan disimpan dalam variabel PHP. Kemudian variabel tersebut akan disimpan dalam percabangan elseif sehingga style tidak akan terpanggil kalau tidak ada request yang terjadi yang sanggup menciptakan variabel dalam percabangan aktif.
Style yang dimaksudkan untuk disimpan disini, merupakan tag yang biasa dipakai pada halaman HTML/CSS untuk membuat/memanggil gaya tertentu di halaman website. Makara sederhananya kita menyelipkan atau menyimpan tag html didalam variabel PHP
Contoh :
<!DOCTYPE HTML> <html> <head> <style> .error {color: #FF0000;} </style> </head> <body> <?php $background="<error-daftar style='background:pink; padding:10px; border-radius:3px'>"; ?> <?php include('koneksi.php'); //mengeset nilai variabel data yang kosong $nameErr = $umurErr = $errErr = ""; $name = $umur = $err = ""; if ($_SERVER["REQUEST_METHOD"] == "POST") { if (empty($_POST["nama_mahasiswa"])) { $nameErr = "$background Name is required"; }elseif(!preg_match("/^[a-zA-Z ]*$/",$_POST["nama_mahasiswa"])) { $nameErr = "$background Hanya krakter alphabet yang diperbolehkan"; }elseif(strlen($_POST["nama_mahasiswa"])<3){ $nameErr="$background Data dilarang kurang dari 3 karakter"; }elseif(strlen($_POST["nama_mahasiswa"])>5){ $nameErr="$background Data dilarang lebih dari 5 karakter"; }else{ //kondisi benar kumpulkan nilai variabel $name=test_input($_POST["nama_mahasiswa"]); $name = mysqli_real_escape_string($koneksi,$name); } if(empty($_POST["umur_mahasiswa"])){ $umurErr="$background Umur is Required"; }elseif(!preg_match("/^[0-9]*$/",$_POST["umur_mahasiswa"])){ $umurErr="$background Hanya data angka yang diperbolehkan"; }elseif(strlen($_POST["umur_mahasiswa"])<1){ $umurErr="$background Data umur dilarang kurang 1 karakter"; }elseif(strlen($_POST["umur_mahasiswa"])>2){ $umurErr="$background Data umur dilarang lebih dari 2 karakter"; }else{ //kondisi benar kumpulkan nilai variabel $umur=test_input($_POST["umur_mahasiswa"]); $umur= mysqli_real_escape_string($koneksi,$umur); } //Eksekusi Terakhir if(empty($name)) { //Ketika adab data yang salah otomatis variabel benar akan bernilai kosong alias null //maka cek kembali kalau ada data yang bernilai null jangan lakukan sanksi database echo "Masih ada data yang kosong"; }elseif(empty($umur)){ echo "umur masih kosong"; }else{ //terakhir lakukan $perintah=sprintf("INSERT INTO mhs VALUES('null','%s','%d')",$name,$umur); $jalankan=mysqli_query($koneksi, $perintah); if(!$jalankan){ $errErr="Gagal menyimpan data=".mysqli_error(); }else{ $err="Berhasil Menyimpan data"; } } // } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } ?> <h2>PHP Form Validation Example</h2> <p><span class="error">* required field.</span></p> <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> Name: <input type="text" name="nama_mahasiswa" id="nama_mahasiswa" value="<?php echo $name; ?>" /> <span class="error"><?php echo $nameErr;?></span> <br><br> Umur: <input type="text" name="umur_mahasiswa" id="umur_mahasiswa" value="<?php echo $umur; ?>" /> <span class="error"><?php echo $umurErr;?></span> <br><br> <input type="submit" name="submit" id="submit" value="Submit"> <input type="reset" name="batal" id="batal" value="Batal"> </form> <br/> <span class="error"><?php echo $err;?></span> <span class="error"><?php echo $errErr;?></span> </body> </html> Jika instruksi diatas dieksekusi, kemudia terjadi error atau kesalahan pada percabangan, maka akhirnya akan muncul pesan kesalahan yang ditandai dengan background pink menyerupai berikut ini
Hasil
Ket :
$background merupakan variabel yang menyimpan data untuk style/gayaerror-daftar didefinisikan sebagai class/tag seperi pada CSS, error-daftar sanggup saja diganti jadi tag html lainnya
Menampilkan Pesaan Error Dengan Bootstrap dan PHP
Selanjutnya kita akan mencoba memakai bootstrap untuk menampilkan pesan error dengan class yang tyerdapat pada framework bootstrap. Cara kerjanya sama menyerupai yang sebelumnya, hanya saja disini kita hanya akan memanggil classnya saja, tidak menuliskan detail dari properti untuk style/gaya ketika terjadi error didalam variabel PHP, jadi class/gayanya sudah ada di bootstrap, namun variabel classnya disimpan didalam variabel PHP, ketika terjadi error, php akan memangil class tersebut dan ditempatkan didalm div
Contoh :
<!DOCTYPE HTML> <html> <head> <!-Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style> </style> </head> <body> <?php //simpan class bootstrap untuk error $class1="alert alert-danger"; $class2_icon="glyphicon glyphicon-exclamation-sign"; $class2="alert alert-success"; include('koneksi.php'); //mengeset nilai variabel data yang kosong $nameErr = $umurErr = $gagalErr = ""; $name = $umur = $berhasil = $nameClass = $nameClass_icon = $umurClass = $umurClass_icon = ""; if ($_SERVER["REQUEST_METHOD"] == "POST") { if (empty($_POST["nama_mahasiswa"])) { $nameErr = "Name is required"; $nameClass=$class1; $nameClass_icon=$class2_icon; }elseif(!preg_match("/^[a-zA-Z ]*$/",$_POST["nama_mahasiswa"])) { $nameErr = "Hanya krakter alphabet yang diperbolehkan"; $nameClass=$class1; $nameClass_icon=$class2_icon; }elseif(strlen($_POST["nama_mahasiswa"])<3){ $nameErr="Data dilarang kurang dari 3 karakter"; $nameClass=$class1; $nameClass_icon=$class2_icon; }elseif(strlen($_POST["nama_mahasiswa"])>30){ $nameErr="Data dilarang lebih dari 30 karakter"; }else{ //kondisi benar kumpulkan nilai variabel $name=test_input($_POST["nama_mahasiswa"]); $name = mysqli_real_escape_string($koneksi,$name); } if(empty($_POST["umur_mahasiswa"])){ $umurErr="Umur is Required"; $umurClass=$class1; $umurClass_icon=$class2_icon; }elseif(!preg_match("/^[0-9]*$/",$_POST["umur_mahasiswa"])){ $umurErr="Hanya data angka yang diperbolehkan"; $umurClass=$class1; $umurClass_icon=$class2_icon; }elseif(strlen($_POST["umur_mahasiswa"])<1){ $umurErr="Data umur dilarang kurang 1 karakter"; $umurClass=$class1; $umurClass_icon=$class2_icon; }elseif(strlen($_POST["umur_mahasiswa"])>2){ $umurErr="Data umur dilarang lebih dari 2 karakter"; $umurClass=$class1; $umurClass_icon=$class2_icon; }else{ //kondisi benar kumpulkan nilai variabel $umur=test_input($_POST["umur_mahasiswa"]); $umur= mysqli_real_escape_string($koneksi,$umur); } if(empty($name&&$umur)){ //cek data terakhir }else{ //Query Terakhir $perintah=sprintf("INSERT INTO mhs VALUES('null','%s','%d')",$name,$umur); $jalankan=mysqli_query($koneksi, $perintah); if(!$jalankan){ $gagalErr="Gagal menyimpan data=".mysqli_error(); $gagalErr_gaya=$class2; }else{ $berhasil="Berhasil Menyimpan data"; $berhasil_gaya=$class2; } } // } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } ?> <div class="container"> <div class="row"> <h2>PHP Form Validation Example</h2> <p><span class="error">* required field.</span></p> <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> <div class="form-group"> <label>Nama Mahasiswa :</label> <input class="form-control" placeholder="Nama siswa" id="nama_mahasiswa" name="nama_mahasiswa" value="<?php echo $name;?>" /> </div> <div class="form-group"> <label>Umur :</label> <input type="number" class="form-control" placeholder="Nama siswa" id="umur_mahasiswa" name="umur_mahasiswa" value="<?php echo $umur;?>" /> </div> <input class="btn btn-default" type="submit" name="submit" id="submit" value="Submit"> <input class="btn btn-default" type="reset" name="batal" id="batal" value="Batal"> </form> <br/> <div class="<?php echo $nameClass; ?>" role="alert"> <span class="<?php echo $nameClass_icon;?>" aria-hidden="true"></span> <span class="sr-only">Error:</span> <?php echo"$nameErr";?> </div> <div class="<?php echo $umurClass; ?>" role="alert"> <span class="<?php echo $umurClass_icon;?>" aria-hidden="true"></span> <span class="sr-only">Error:</span> <?php echo"$umurErr";?> <br/> <div class="<?php echo $berhasil_gaya; ?>" role="alert"><?php echo $berhasil; ?></div> <div class="<?php echo $gagalErr_gaya; ?>" role="alert"><?php echo $gagalErr; ?></div> </div> </div> </body> </html>Hasil :
 |
| Menampilkan gaya tertentu ketika terjadi form eror memakai PHP Bootstrap |
Penjelasan :
Variabel berikut : $class1="alert alert-danger"; $class2_icon="glyphicon glyphicon-exclamation-sign"; $class2="alert alert-success"; akan ditambahkan kedalam setiap percabangan yang sesuai atau yang kita inginkan .
Variabel yang tersimpan tersebut akan disimpan/dipanggil dengan nama variabel lain atau yang sesuai dengan data yang terdapat pada percabangan, menyerupai $nameClass=$class1; $nameClass_icon=$class2_icon; // $umurClass=$class1 umurClass_icon=$class2_icon;
Hal tersebut dimaksudkan supaya data yang mengalami error saja yang akan dipanggil gayanya, sedangkan kalau tidak ada error, class yang ada didalam div akan berada dalam posisi kosong, dimana sebelumnya data class/gaya untuk error telah didefinisikan terlebih dahulu dengan variabel berikut :
$berhasil = $nameClass = $nameClass_icon = $umurClass = $umurClass_icon = "";
Makara kalau tidak terjadi error, maka class yang didalam variabel akan didefinisikan dalam kondisi kosong ="";
Terakhir, pada div class untuk pemanggil errornya pun didefinisikan secara berbeda beda sesuai dengan gaya yang terdapat pada percabangan masing masing data. Ketika terjadi error, maka secara otomatis variabel yang semula dalam kondisi kosong, akan secara otomatis mempunyai nilai variabel.
<br/> <div class="<?php echo $nameClass; ?>" role="alert"> <span class="<?php echo $nameClass_icon;?>" aria-hidden="true"></span> <span class="sr-only">Error:</span> <?php echo"$nameErr";?> </div> <div class="<?php echo $umurClass; ?>" role="alert"> <span class="<?php echo $umurClass_icon;?>" aria-hidden="true"></span> <span class="sr-only">Error:</span> <?php echo"$umurErr";?> <br/> <div class="<?php echo $berhasil_gaya; ?>" role="alert"><?php echo $berhasil; ?></div> <div class="<?php echo $gagalErr_gaya; ?>" role="alert"><?php echo $gagalErr; ?></div> Selamat mencoba, supaya bermanfaat
