» » » Menyimpan Style Tertentu Pada Variabel PHP

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
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

0 Response to "Menyimpan Style Tertentu Pada Variabel PHP"

Post a Comment

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin

Subscribe to:Post Comments (Atom)
mahjongways menghadirkan evolusi visual digital melalui perpaduan animasi adaptif dan teknologi antarmuka modernintegrasi teknologi real time mengubah cara platform digital mengelola interaksi dan respons penggunaperan random number generator menjaga independensi hasil pada sistem permainan digital modernmengenal cara mahjongways mengembangkan pengalaman interaktif melalui sistem respons simbol dan desain grafis digitalarsitektur microservices menjadi fondasi penting dalam membangun infrastruktur platform digital yang lebih fleksibelmengenal volatilitas dan distribusi hasil dalam karakteristik matematis permainan digital berbasis rngmahjong ways dan evolusi budaya digital melalui perpaduan warisan tradisional dengan teknologi interaktif moderntransformasi infrastruktur digital memperlihatkan peran penting otomatisasi dalam menjaga stabilitas sistemmahjongways memperlihatkan perkembangan desain permainan digital melalui optimalisasi animasi dan transisi visualgame pg soft dan perubahan standar desain visual dalam industri hiburan digitalmengapa game pg soft sering dibahas dalam perkembangan permainan berbasis smartphonedi balik game pg soft bagaimana teknologi animasi membentuk pengalaman penggunagame pg soft dalam sorotan perbedaan antara fitur interaktif dan mekanisme acakketika tampilan game pg soft menjadi bahan diskusi tentang psikologi warnamengulas game pg soft dari sisi perkembangan antarmuka dan kenyamanan navigasigame pg soft dan tantangan membedakan informasi resmi dari klaim komunitasbagaimana game pg soft mengadaptasi elemen budaya dalam konsep visual permainangame pg soft dan pentingnya memahami perbedaan antara rtp serta hasil sesaatfenomena konten video pendek yang membentuk persepsi publik tentang game pg softgame online dan fenomena munculnya pemimpin komunitas dari kalangan pemain biasamengapa sistem reputasi menjadi bagian penting dalam interaksi game onlineketika game online menghadirkan tantangan baru dalam menjaga etika komunikasiperubahan pola kerja sama tim menjadi sorotan dalam perkembangan game onlinegame online dan peran sistem moderasi dalam membangun lingkungan bermain yang sehatbagaimana game online menghubungkan komunitas kecil menjadi jaringan globalfenomena pemain game online yang mengembangkan keterampilan organisasi komunitasgame online dalam kajian perubahan kebiasaan sosial di ruang virtualmengapa transparansi sistem peringkat menjadi perhatian dalam komunitas game onlineketika game online menjadi ruang kreatif bagi pembuat konten dan pemaingame digital dan perubahan cara pengembang membangun dunia virtual yang realistismengapa teknologi haptic feedback menjadi pembahasan menarik dalam game digitalketika game digital menghadirkan karakter yang bereaksi terhadap keputusan pemainperan pencahayaan dinamis dalam membangun suasana permainan game digitalgame digital dan tantangan menjaga identitas seni di tengah perkembangan aibagaimana sistem penyimpanan cloud mengubah pengalaman mengakses game digitalfenomena game digital yang mengangkat cerita rakyat menjadi petualangan interaktifgame digital dalam sorotan perubahan cara studio indie mengembangkan karyamengapa pelestarian game digital lama menjadi topik penting dalam arsip teknologiketika game digital digunakan untuk mengenalkan konsep sains melalui simulasigates of olympus dan kisah mitologi zeus yang diadaptasi menjadi hiburan digitalmengapa sweet bonanza menggunakan tema permen dalam membangun identitas visual gamestarlight princess dan peran karakter fantasi dalam perkembangan desain slot modernfenomena big bass bonanza yang menggabungkan tema memancing dengan mekanisme permainansugar rush 1000 dan cara animasi warna warni membentuk pengalaman visual penggunamengenal the dog house megaways dari sisi desain karakter dan variasi fitur gamegates of hades mengangkat dunia bawah mitologi yunani ke dalam konsep permainan digitaldi balik sweet rush bonanza ada konsep pengali yang menarik dibahas secara matematisfortune of olympus dan perbedaan desain mekanisme permainan bertema dewa yunanimengapa gates of olympus 2500 menarik dikaji dari sisi evolusi seri game digitalkasino online dan tantangan menjaga keamanan akun di tengah ancaman digitaldi balik istilah rtp kasino digital ada perhitungan yang sering disalahartikanketika kasino online menghadapi persoalan transparansi dalam penanganan keluhankasino digital dan fenomena kesalahan persepsi terhadap kemenangan beruntunmemahami peran autentikasi dua faktor dalam melindungi akun kasino onlinekasino online dalam sorotan praktik pengumpulan data dan persetujuan penggunaketika fitur batas pengeluaran menjadi bagian dari perlindungan pengguna kasino digitalkasino digital dan tantangan menjelaskan mekanisme permainan kepada pengguna barumenelusuri hubungan antara kasino online dan perubahan pola konsumsi konten videokasino online dan pentingnya memahami perbedaan antara risiko dan ketidakpastianmahjong ways 2 memiliki pengaturan animasi yang berkaitan dengan kelancaran tampilan pada smartphonepenggunaan refresh rate tinggi pada layar smartphone membawa perubahan dalam pengalaman game mobilemahjong ways menampilkan detail simbol yang dipengaruhi oleh pengaturan resolusi layar perangkatperkembangan teknologi browser membantu game berbasis web menampilkan konten lebih responsifmahjong ways 2 dan pengaruh koneksi internet terhadap kecepatan memuat elemen permainanpenggunaan mode hemat daya pada smartphone dapat memengaruhi kelancaran animasi game digitalmahjong ways menghadirkan tampilan bernuansa asia yang menarik dilihat dari sisi desain antarmukaperkembangan teknologi grafis mobile membuat efek transisi dalam game terlihat semakin haluspengelolaan cache browser menjadi bagian penting dalam menjaga pengalaman mengakses game digitalmahjong ways 2 memperlihatkan perpaduan mekanisme cascade dan penyajian informasi visualkasino online dan tantangan memahami syarat layanan di tengah kemudahan aksesdi balik tampilan kasino digital ada teknologi enkripsi yang melindungi informasiketika kasino online menjadi bagian dari diskusi tentang kecanduan digitalkasino digital dan peran pengawasan transaksi dalam mencegah penyalahgunaanmemahami mengapa klaim pola permainan kasino online perlu diperiksa secara kritiskasino online dalam sorotan perkembangan sistem pembayaran lintas negarafenomena kasino digital dan tantangan menjaga keseimbangan aktivitas sehari hariketika kasino online memanfaatkan desain responsif untuk berbagai ukuran layarkasino digital dan pentingnya memahami perbedaan antara privasi dan anonimitasmenelusuri hubungan antara kasino online dan perkembangan teknologi pencegahan penipuanmahjong ways 2 memiliki detail animasi yang bisa terlihat berbeda pada setiap jenis layar smartphonepenggunaan gpu pada smartphone memiliki peran penting dalam menampilkan efek visual game digitalmahjong ways menghadirkan susunan simbol yang menarik dipahami dari sisi desain antarmukaperkembangan teknologi layar oled membawa perubahan pada tampilan warna dalam game mobilemahjong ways 2 dan cara sistem permainan menampilkan perubahan simbol secara berurutanpengaturan kualitas grafis game mobile membantu menyesuaikan tampilan dengan kemampuan perangkatmahjong ways memadukan ornamen tradisional dengan elemen digital yang membentuk identitas visualperkembangan teknologi game berbasis browser membuka pilihan baru dalam hiburan digitalmahjong ways 2 menampilkan hubungan antara efek suara dan perubahan animasi selama permainanpenggunaan teknologi kompresi aset membantu game mobile mengurangi beban penyimpanan perangkatkasino online dan peran teknologi browser dalam menjaga kelancaran akses digitaldi balik sistem kasino digital ada proses sinkronisasi data yang jarang dibahasketika kasino online menghadapi tantangan keamanan pada perangkat selulermemahami pengaruh latensi jaringan terhadap respons layanan kasino digitalkasino digital dan fenomena penggunaan informasi pribadi dalam ekosistem internetmenelusuri cara sistem kasino online menangani gangguan koneksi mendadakkasino online dan pentingnya mengenali risiko ekstensi browser yang tidak terpercayaketika pembaruan sistem mengubah tampilan dan navigasi kasino digitalkasino digital dalam pembahasan tentang keamanan penyimpanan data penggunamemahami hubungan antara kasino online dan perkembangan teknologi deteksi aktivitas tidak wajar