Desain Pemberitahuan Eror dan Sukses

Pesan pemberitahuan yang gagal atau berhasil bisa dibilang sangat penting. Sebab pesan ini untuk memberitahukan kepada user tentang gagal atau berhasilkah suatu program yang dijalankannya. Kita akan membuat sebuah pesan sederhana yang dibuat menggunakan bahasa php dan css.

Untuk kode di phpnya saya memanfaatkan sebuah metode GET dan tag html meta untuk menampilkan sebuah pesan ini.Untuk css seperti biasa saya gunakan untuk desainnya.Lanjut kepemebahasan

Kode HTML

<div id="Pemberitahuan">
<?php $sukses=$_GET['sukses'];
if($sukses=="false"){
?>
<div class="eror">Eror, (Oops, ada kesalahan)</div>
<?}else if($sukses=="true"){?>
<div class="sukses">Sukses, (Selamat datang)</div>
<?}else{echo "";}?>
</div>
<div id="form">
<form action="proses.php" method="Post">
<select name="pesan">
<option value="eror">Tampilkan pesan eror</option>
<option value="sukses">Tampilkan pesan sukses</option>
</select>
<input type="submit" value="Jalankan"/>
</form>
</div>

Keterangan :

Keterangan percabangan

<?php 
$sukses=$_GET['sukses'];
if($sukses=="false"){
?>

Percabangan diatas membaca sebuah URL yang kondisinya sukses = false dan akan mengeksekusi kode dibawah ini.

Eksekusi kondisi sukses = false

<div class="eror">Eror, (Oops, ada kesalahan)</div>

Untuk percabangan selanjutnya sebuah kondisi sukses = true

Percabangan (sukses = true)

<?}else if($sukses=="true"){?>

Dengan sarat diatas akan menampilkan sebuah kode dibawah ini.

Eksekusi kondisi sukses = true

<div class="sukses">
Sukses, (Selamat datang)
</div>

Untuk terahir percabangan yang saratnya selain kondisi true atau false.

Eksekusi kondisi sukses = true

<?}else{echo "";}?>

Dengan kondisi diatas maka hasilnya tidak akan menampilkan apapun.

Berikut pengeksekusian nilai variabel yang dikirim dari sebuah form dengan metode POST.Untuk kode-kode dibawah ini anda bisa mengganti dengan kode anda, sesuai tujuan perogram anda, asalkan kondisi percabangannya seperti dibawah ini.

proses.php

<?php
$pesan=$_POST['pesan'];
if($pesan=="eror"){
    echo "<meta http-equiv='refresh' content='0; URL=index.php?sukses=false'  />";
}
else if($pesan=="sukses")
{
    echo "<meta http-equiv='refresh' content='0; URL=index.php?sukses=true'  />";
}
?>

Keterangan :

$pesan=$_POST['pesan'];

Nilai yang diambil dari form dan akan dibaca pada percabangan dan akan dikirim ketempat pemberitahuan.

if($pesan=="eror"){
    echo "<meta http-equiv='refresh' content='0; URL=index.php?sukses=false'  />";
}

Kode diatas jika kondisi false akan mengeksekusi tag html meta (<meta http-equiv='refresh' content='0; URL=index.php?sukses=false' />).

else if($pesan=="sukses")
{
    echo "<meta http-equiv='refresh' content='0; URL=index.php?sukses=true'  />";
}

Kode diatas jika kondisi true akan mengeksekusi tag html meta (<meta http-equiv='refresh' content='0; URL=index.php?sukses=true' />).

Berikut untuk kode cssnya.

styleing.css

#Pemberitahuan{
    margin-left: auto;
    margin-right: auto;
    width:300px;
    }
#Pemberitahuan .eror{
    border: 1px solid #555555;
    font-weight: bold;
    background: url(eror.png) no-repeat #9B1515;
    background-size: 30px;
    padding:5px 5px 5px 35px;
    color:#fff;
    box-shadow: 0px 3px 5px #4A4949;
    }
#Pemberitahuan .sukses{
    border: 1px solid #555555;
    font-weight: bold;
    background: url(sukses.png) no-repeat #519066;
    color: #fff;
    background-size: 30px;
    padding:5px 5px 5px 35px;
    box-shadow: 0px 3px 5px #4A4949;
    }
#form{
    margin-left: auto;
    margin-right: auto;
    width:300px;
    margin-top: 20px;
    }
#form select{
    color:#555555;
    padding:5px;
    font-weight: bold;
}
#form input[type=submit]{
    color:#555555;
    padding:5px;
    font-weight: bold;
    cursor: pointer;
}
#info{
    margin-left: auto;
    margin-right: auto;
    width:300px;
    margin-top: 20px;
}

Untuk kode css diatas silahkan copy paste. Untuk keterangan kegunaan mohon ditanyakan saja. Soalnya banyak banget tuh kalau diterangin satu-satu.hehehe
Bagi yang ingin mendownload silahkan klik tombol dibawah ini