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

Baca Selengkapnya »

Menu Drop Down dengan Css v.0.1

Hi teman-teman semua, mari belajar dropdown menu bersama-sama. Kali ini saya memberikan tutorial menu dropdown dengn css. Ada juga menu dropdown ini dibuat menggunakan jquery namun lebih mudah kita membuatnya menggunakan css. Langsung ke pokok pembahasan.
Disini saya menggunakan metode pemanggilan external style sheet. Apa yang dimaksud metode ini? metode ini adalah dimana penulisan kode css disimpan di file pribadi dengan ektensi *.css.
Dan berikut cara pemanggilannya.Pasang kode dibawah ini diantara <head> dan </head>.

Pemanggilan file css

<link href="gayaTutorMenu.css" rel="stylesheet" type="text/css"/>

Selanjutnya pasang kode-kode HTML dibawah ini dan letakkan dimana anda ingin menaruh menu dropdown tersebut.

Kode HTML menu dropdown

<div id="exam_menu">
<div id="tutorMenuDropDown">
Beranda
</div>
<div id="tutorMenuDropDown">link
<div class="dropTMDD">
<a href="http://mmlpro21.blogspot.com/"><div>blog mmlpro21</div></a>
<a href="http://animepeople.twomini.com/"><div>animepeople</div></a>
<a href="http://owlscript.zz.mu/"><div>owlscript</div></a>
</div>
</div>
<div id="tutorMenuDropDown">About
<div class="dropTMDD">
<div>mmlpro21</div>
<div>free all</div>
</div>
</div>
</div>

Buat file css dengan nama gayaTutorMenu. Dan berikut kode cssnya. Anda bisa mengganti nama file cssnya dengan sarat pemanggilan external style sheet tadi juga diganti sesuai nama file css dropdown.

gayaTutorMenu.css

#exam_menu{
    background: #555555;
    border: 1px solid #555555;
    color:#fff;
    width:500px;
    font-family: sans-serif;
    }
#exam_menu #tutorMenuDropDown{
    display: inline-table;
    padding: 5px;
    font-weight: bold;
    }
#exam_menu #tutorMenuDropDown:hover{
    background: #fff;
    cursor: pointer;
    color:#555555;
    }
#tutorMenuDropDown .dropTMDD{
    display: none;
    background:#fff;
    border-right:2px solid #555555;
    border-bottom:2px solid #555555;
    border-left:2px solid #555555;
    margin-top: 5px;
    margin-left:-7px;
    }
#tutorMenuDropDown .dropTMDD a{text-decoration: none;}
#tutorMenuDropDown:hover .dropTMDD{
    z-index:30;
display: block;
position: absolute;
-webkit-border-radius:0px 0px 7px 7px;
-o-border-radius:0px 0px 7px 7px;
-moz-border-radius:0px 0px 7px 7px;
-ms-border-radius:0px 0px 7px 7px;
border-radius:0px 0px 7px 7px;
padding-bottom:5px;
}
#tutorMenuDropDown .dropTMDD div{
    padding:5px;
    font-weight: normal;
    min-width: 120px;
    transition: 1s;
    }
#tutorMenuDropDown .dropTMDD div:hover{
    background: #ccc;
    cursor: pointer;
}

Pembahasan :
A : Mengapa menu jika kita sorotkan oleh mouse dapat muncul menu dibawahnya?
B : itu karena dikode cssnya selector diberi hover.
A : Lantas kenapa menu dropdown dibawahnya bisa muncul dan hilang?
B : Pada selector menu drop akan hilang atau hidden jika kita memberikan propertis display dan valuenya none. Dan kita perintahkan jika disorot diselectornya propertis display dengan value none diganti dengan value block.

Amati contoh dibawah ini :

sorot disini

Ini dia menu dropdown.

Kode HTML

<div id="contohDropdownv01">sorot disini
<div>Ini dia menu dropdown.</div>
</div>

Kode CSS

#contohDropdownv01{
    cursor: pointer;
    border: 1px solid black;
    width:100px;
    }
#contohDropdownv01:hover div{
    display: block;
    cursor: pointer;
    }
#contohDropdownv01 div{
    background:#ccc;
    border:1px solid black;
    display: none;
    position: absolute;
    }

Lihat selector #contohDropdownv01 div. Arti dari kode ini adalah tag Div yang berada di dalam tag berselector #contohDropdownv01 akan mengeksekusi perintah background:#ccc;border:1px solid black;display: none;position: absolute;

• background:#ccc; = warna background pada menu drop.
• border:1px solid black; = garis batas pada menu drop.
• display: none; = kode ini yang membuat menu drop hilang jika tidak tersorot oleh cursor.
• position: absolute; = berposisi absolute.

Lihat pada selector #contohDropdownv01:hover div. Arti dari kode tersebut adalah jika tag yang mengandung selector #contohDropdownv01 disorot maka tag div didalam tag berselector #contohDropdownv01 akan mengeksekusi perintah display: block;cursor: pointer;

• display: block; = kode ini yang membuat menu drop akan muncul.(tidak terhiden lagi oleh display none.)
• cursor: pointer; = mengganti tampilan cursor menjadi bentuk tangan yang menunjuk.

Demikian pembahasan dari saya tentang menu dropdown css, kurang lebihnya mohon maaf. Bagi yang ingin mengunduh filenya, anda bisa klik download dibawah ini.
O iya dimohon jangan copy paste diblog anda, kalau ingin copy mohon diberi referensi.

Baca Selengkapnya »