Menyimpan Style Tertentu Pada Variabel PHP

Awalnya waktu itu saya berfikir untuk bagaimana menampilkan class tertentu pada saat terjadi error pada sebuah formulir (from) menggunakan style yang terdapat pada bootstrap seperti 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 seperti itu, maka ketika tidak terjadi error pun classnya akan tetap dipanggil terutama untuk yang mengandung nilai seperti background, border, box shadow ataupun iconnnya.

Menyimpan Style Tertentu Pada Variabel PHP.

Sebelumnya saya sudah pernah menulis artikel tentang validasi form input menggunakan PHP, nah dengan menggunakan cara yang sama, kita akan mencoba menaruh style/gaya tertentu pada text baik saat terjadi error ataupun saat 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 jika tidak ada request yang terjadi yang bisa membuat variabel dalam percabangan aktif.

Style yang dimaksudkan untuk disimpan disini, merupakan tag yang biasa digunakan pada halaman HTML/CSS untuk membuat/memanggil gaya tertentu di halaman website. Jadi 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 tidak boleh kurang dari 3 karakter";
}elseif(strlen($_POST["nama_mahasiswa"])>5){
        $nameErr="$background  Data tidak boleh 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 tidak boleh kurang 1 karakter";
}elseif(strlen($_POST["umur_mahasiswa"])>2){
  $umurErr="$background Data umur tidak boleh 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 adat data yang salah otomatis variabel benar akan bernilai kosong alias null
//maka cek kembali kalau ada data yang bernilai null jangan lakukan eksekusi 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 kode diatas dieksekusi, kemudia terjadi error atau kesalahan pada percabangan, maka hasilnya akan muncul pesan kesalahan yang ditandai dengan background pink seperti berikut ini

Hasil

Menyimpan Style Tertentu Pada Variabel PHP

Ket :

$background merupakan variabel yang menyimpan data untuk style/gaya
error-daftar didefinisikan sebagai class/tag seperi pada CSS, error-daftar bisa saja diganti jadi tag html lainnya

Menampilkan Pesaan Error Dengan Bootstrap dan PHP

Selanjutnya kita akan mencoba menggunakan bootstrap untuk menampilkan pesan error dengan class yang tyerdapat pada framework bootstrap. Cara kerjanya sama seperti yang sebelumnya, hanya saja disini kita hanya akan memanggil classnya saja, tidak menuliskan detail dari properti untuk style/gaya saat 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 tidak boleh kurang dari 3 karakter";
    $nameClass=$class1;
    $nameClass_icon=$class2_icon; 
}elseif(strlen($_POST["nama_mahasiswa"])>30){
        $nameErr="Data tidak boleh 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 tidak boleh kurang 1 karakter";
$umurClass=$class1;
  $umurClass_icon=$class2_icon;
}elseif(strlen($_POST["umur_mahasiswa"])>2){
  $umurErr="Data umur tidak boleh 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 menggunakan 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, seperti $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 jika 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 = "";

Jadi kalau tidak terjadi error, maka class yang didalam variabel akan didefinisikan dalam kondisi kosong ="";

Menampilkan Pesan Error Dengan Bootstrap dan PHP

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 memiliki 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, semoga bermanfaat

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

Menyimpan Style Tertentu Pada Variabel PHP

0 Response to "Menyimpan Style Tertentu Pada Variabel PHP"

Post a Comment