Download Aplikasi Buku Tamu Sederhana

 Download Aplikasi Buku Tamu Sederhana | Aplikasi ini masih masih dalam tahap uji coba, perlu penyempurnaan lebih lanjut, tapi tetep saya share aja, siapa tau di luar sana ada yang download truss disempurnakan. Dalam sebuah website biasanya kita temui ada sebuah formulir buku tamu yang di sediakan untuk pengunjung web tersebut. Seperti apa aplikasinya, kurang lebih seperti di bawah ini :

Download Aplikasi Buku Tamu Sederhana

Untuk halaman Daftar Tamu seperti di bawah ini

Download Aplikasi Buku Tamu Sederhana
Dan untuk halaman formulirnya seperti ini :

Download Aplikasi Buku Tamu Sederhana
Demo bisa langsung di cek Disini 

Dan Aplikasi ini bisa langsung di Download Disini

Semoga bermanfaat.. 

Related Posts:

Download Aplikasi CRUD Sederhana

Web Hosting

Download Aplikasi CRUD Sederhana | CRUD atau Create Read Update Delete ini adalah aplikasi sederhana yang saya buat sebagai media pembelajaran, anda bisa mengembangkan lebih luas mengenai aplikasi ini,

Berikut adalah screenshot nya

Aplikasi CRUD Sederhana
Gambar di atas adalah untuk menampilkan data yang sudah masuk, sedang form untuk input data seperti di bawah ini

Aplikasi CRUD Sederhana
Dan Berikut adalah halaman edit data nya

Aplikasi CRUD Sederhana
Untuk Demo bisa langsung di coba Disini

Dan Aplikasi ini bisa di download Disini

Semoga bermanfaat

Related Posts:

Download Templete Blogger Brosense Responsive

Templete Blogger Brosense Responsive

Download Templete Blogger Brosense Responsive | Templete ini buatan Mas Sugeng Yang Mengelola Website http://www.evotemplates.net/ Templete buatannya bagus bagus, ada banyak pilihannya, yang free atau yang premium, tinggal pilih aja dech.

Berikut adalah Fitur yang dimilikiTemplete Brosense Responsive


  • SEO Ready Banget
  • Responsive
  • Fully Customizable
  • Auto Readmore
  • Breadcrumb
  • Related Post
  • Social Share Buttons
  • Fcebook Comments
  • Dan masih banyak lagi.
Untuk Screen shotnya kurang lebih seperti gambar di atas dan untuk demo langsung bisa dilihat Disini

Teruss templetenya bisa langsung di Download Disini

Semoga Bermanfaat

Related Posts:

Cara Membuat Aplikasi Input Data Sederhana

Web Hosting
Cara Membuat Aplikasi Input Data Sederhana | Saat ini aplikasi input data sudah banyak di terapkan untuk berbagai macam keperluan, diantaranya pendaftaran online, laporan online dan masih banyak lagi. keistimewaan aplikasi berbasis web ini adalah bisa di akses di manapun atau kapan pun melalui komputer yang terhubung dengan internet.

Pada kesempatan kali ini kita akan bahas Cara Membuat Aplikasi Input Data Sederhana menggunakan PHP dan MySQL.

Untuk Screenshot aplikasi yang akan kita buat kurang lebih seperti ini 

Aplikasi Input Data Sederhana

Gambar di atas adalah halaman untuk menampilkan data sedang halaman untuk input data seperti ini 

Aplikasi Input Data Sederhana

Baiklah, langsung saja kita mulai pembuatannya pertama buat dulu database nya beri nama "data_barang" lalu tabel nya beri nama "data" atau konfigurasikan persis seperti gambar di bawah ini 

Aplikasi Input Data Sederhana

Jika belum faham, silahkan pelajari tutorial singkat Cara Membuat Tabel Database MySQL Di PHPMyAdmin yang bisa dilihat Disini 

Jika sudah faham, langkah selanjutnya adalah membuat file php, silahkan pelajari tutorial singkat Cara Membuat File PHP Di Localhost bisa dilihat Disini

Setelah database dibuat, langkah selanjutnya adalah buat file php dengan menggunakan script di bawah ini :

<style>
body{margin-top:100px;}th{padding-left:5px;padding-right:5px;}td{padding-left:5px;padding-right:5px;}
</style>
<?php
include"koneksi.php";
echo"
<center> <a ><b>APLIKASI INPUT DATA SEDERHANA</b> <p> Oleh : </a><a href='http://indo-webst.blogspot.com'><b>PHP Indonesia</b></a></p> <br></center>

";


$view=mysql_query("SELECT * FROM data ");
$jumlah = mysql_num_rows($view);
if ($jumlah > 0){
echo"
<center><b><a href='form_input.php'>INPUT DATA</a></b></center>
<table border='1' align='center' style='border-collapse:collapse;border:1px #000 solid;margin-top:5px;'>
<tr>
<th>
Kode Barang
</th>
<th>
Nama Barang
</th>
<th>
Harga Barang
</th>
</tr>
<tr>";
while($r=mysql_fetch_array($view))
{
echo"
<td>$r[kode_barang]</td><td>$r[nama_barang]</td><td>$r[harga_barang]</td></tr>";}
echo"</table>";
}
else{
echo"
<center><b><p>Belum ada Data</p>
<a href='form_input.php'>INPUT DATA</a></b></center>";
}
echo"<br><p><b><center><a>Copyright @ 2015 by : </a><a href='https://www.facebook.com.pendeta.mokong' target='_blank'>Maz Rully-W</a><a> All rights reserved.</a></center></b></p>";

?>

Simpan dengan nama index.php 

Selanjutnya buat file yang kedua, ambil script dibawah ini

<style>
body{
margin-top:100px;
}
table{border-collapse:collapse;}
</style>
<html>
<title>
</title>
<head>
</head>
<body>
<center> <a ><b>APLIKASI INPUT DATA SEDERHANA</b> <p> Oleh : </a><a href='http://indo-webst.blogspot.com'><b>PHP Indonesia</b></a></p> <br></center>
<form action='input.php' method='post'>
<center><p><b><a href='index.php'>LIHAT DATA</a></b></p></center>
<table border="1" align=center>
<tr>
<td style="padding-left:5px;padding-right:5px;">
Nama Barang
</td>
<td >
<input type='text' name='nama_barang'>
</td>
</tr>
<tr>
<td style="padding-left:5px;padding-right:5px;" >
Harga Barang
</td>
<td  style="padding-right:0px">
<input type='text' name='harga_barang'>
</td>
</tr>
<tr>
<td align="right" colspan="2">
<input type='submit' value='Input'>
</td>
</tr>
</table>
</form>
<br>
<br>
<p>
<b><center><a>Copyright @ 2015 by : </a><a href="https://www.facebook.com.pendeta.mokong" target="_blank">Maz Rully-W</a><a> All rights reserved.</a></center></b>
</p>
</body>
</html>

lalu simpan dengan nama form_input.php
setelah itu buat file ketiga, file ini nantinya yang akan memproses form_input.php dan mengirimkan ke database, 
Oke, ambil script di bawah ini 

<?php
include"koneksi.php";
$sqlSimpan="INSERT INTO data (nama_barang,harga_barang)
                            VALUES( '$_POST[nama_barang]','$_POST[harga_barang]')";

mysql_query($sqlSimpan)
or die ("Gagal Perintah SQL".mysql_error());
echo"
<br>
<br>
<br>
<center> <a ><b>Aplikasi Input Barang Sederhana</b> <p> Oleh : </a><a href='http://indo-webst.blogspot.com'><b>PHP Indonesia</b></a></p> <br></center>

<center>Data anda berhasil di Input <a href='index.php'><b>Lihat Data</b></a></center>

<br>
<br>
<p>
<b><center><a>Copyright @ 2015 by : </a><a href='https://www.facebook.com.pendeta.mokong' target='_blank'>Maz Rully-W</a><a> All rights reserved.</a></center></b>
</p>";
?>

Simpan dengan nama input.php 
Selanjutnya kita tinggal membuat satu file lagi, file berikut ini berfungsi untuk menghubungkan Script PHP dengan Database MySQL
berikut ini adalah script nya

<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "data_barang";

// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");
?>

Simpan dengan nama koneksi.php 

Jika semua file sudah dibuat kurang lebih ada 4 file php seperti ini 

Aplikasi Input Data Sederhana

Nah, sampai disini aplikasi ini sudah siap untuk di uji coba, tampilannya tidak lebih seperti gambar di atas. tapi jika ingin demo bisa langsung di coba Disini 

Dan untuk Source Code Lengkapnya bisa di download Disini

Demikian tutorialnya, Semoga bermanfaat

Related Posts:

Download Aplikasi Input Data Sederhana

Download Aplikasi Input Data Sederhana | Aplikasi ini saya buat dengan bahasa yang sederhana agar mudah di fahami dan dipelajari, ketika anda telah memahami nya suatu saat nanti mungkin, anda akan mengembangkan aplikasi ini sesuai dengan selera dan keinginan anda sendiri,

Berikut adalah screenshotnya halaman untuk menampilkan data yang telah masuk

Aplikasi Input Data Sederhana
Sedang untuk halaman inputnya kurang lebih seperti ini

Aplikasi Input Data Sederhana

Namun jika ingin Demo cara kerja aplikasi ini, bisa langsung dicoba Disini
Anda bisa mempelajari tutorial detail pembuatan Aplikasi Input Data Sederhana ini Disini

Dan untuk Source Code lengkapnya bisa langsung di Download Disini

Semoga bermanfaat.

Related Posts:

Cara Membuat Aplikasi Reg Login Sederhana


Cara Membuat Aplikasi Reg Login Sederhana | Dalam sebuah aplikasi website kadang kita temukan sistem dimana hanya user yang telah terdaftar saja yang bisa mengakses halaman tersebut, seperti facebook, twiter, dan masih banyak aplikasi web lainnya.

Dalam tutorial kali ini kita akan coba membuat Sistem Registrasi dan Login Sederhana menggunakan PHP. Screen shotnya kurang lebih seperti ini

Halaman Registrasi

Itu adalah halaman Registrasinya, dan untuk halaman Loginnya seperti ini

Halaman Login

Oke, langsung saja kita mulai pembuatannya. Langkah pertama adalah kita buat file php nya dulu, silahkan pelajari tutorial Cara Membuat File PHP Di Localhost yang bisa dilihat Disini jika anda belum faham caranya tapi jika sudah faham kita langsung lanjutkan membuat file php. dalam hal ini kita membutuhkan 7 file php diantaranya adalah

daftar.php bisa diambil Disini
input.php bisa diambil Disini
login.php bisa diambil Disini
cek.php bisa diambil Disini
index.php bisa diambil Disini
logout.php bisa diambil Disini
koneksi.php bisa diambil Disini

kalau ketujuh file nya sudah jadi, kurang lebih akan seperti ini


Kemudian kita akan buat database nya, Jika belum pernah membuat database sebelumnya silahkan pelajari Cara Membuat Tabel Database Di PHPMyAdmin yang bisa dilihat Disini

Konfigurasikan persis seperti di bawah ini


Nah, kalau sudah, saat uji coba, tampilannya kurang lebih seperti gambar di atas, untuk demo bisa langsung di coba Disini

Dan untuk Source Code lengkapnya bisa di Download Disini 

Related Posts:

Download Aplikasi Reg Login Sederhana

Download Aplikasi Reg Login Sederhana | Aplikasi Registrasi dan Login ini saya custom sesederhana mungkin, agar mudah difahami, anda bisa pelajari dengan mudah sript yang ada di dalamnya kemudian mengcustom ulang sesuai dengan selera.

Berikut ini adalah Screen shot halaman Registari dan Login Sederhana yang saya buat

Aplikasi Registrasi dan Login
Itu adalah halaman Registrasinya untuk halaman Loginnya seperti di bawah ini

Aplikasi Registrasi dan Login

Jika ingin mempelajari detail pembuatannya bisa langsung disimak tutorial singkat Cara Membuat Aplikasi Reg Login Sederhana yang bisa di lihat Disini

Untuk Demo nya bisa langsung dicoba Disini

Dan Untuk Source Code lengkapnya bisa di Download langsung Disini

Semoga Bermanfaat

Related Posts:

Membuat Tombol Cantik Dengan CSS


Membuat Tombol Cantik Dengan CSS | Tombol dalam website atau blog bisa digunakan untuk berbagai macam keperluan, diantaranya adalah untuk download, menampilkan detail artikel, atau untuk pembelian produk dalam website toko online, ataupun untuk submit pendaftaran secara online.

Dalam mendesain tombol para developer / pengembang menggunakan versi yang sangat bervariasi, sesuai dengan jiwa seni mereka, tiap pengembang memiliki versi dan gaya yang berbeda pula.

Dalam tutorial kali ini, kita akan coba Membuat Tombol Cantik Dengan CSS seperti pada gambar di atas.

Baiklah, kita akan mulai dari membuat file html, silahkan pelajari tutorial singkat  Belajar HTML Dasar yang bisa dilihat Disini Jika anda belum mengerti, tapi jika sudah mengerti langsung saja buat dengan mengetikkan script di bawah ini :

<html>
<title>Tombol Cantik</title>
<head>
<link href='style.css' rel='stylesheet' type='text/css'/>
</head>
<body>
<center> <a >Desain Tombol Cantik <p> Oleh : </a><a href='http://indo-webst.blogspot.com'>PHP Indonesia</a></p> <br></center>
<a class='hijau' href='http://indo-webst.blogspot.com'>Tombol</a>
<a class='merah' href='http://indo-webst.blogspot.com'>Tombol</a>
<a class='biru' href='http://indo-webst.blogspot.com'>Tombol</a>
<a class='hitam' href='http://indo-webst.blogspot.com'>Tombol</a>
<a class='kuning' href='http://indo-webst.blogspot.com'>Tombol</a>
<br>
<br>
<p>
<center><a>Copyright @ 2015 by : </a><a href="https://www.facebook.com.pendeta.mokong" target="_blank">Maz Rully-W</a><a> All rights reserved.</a></center>
</p>
</body>
</html>

Simpan dengan nama index.html, File ini hanya akan menampilkan tulisan jika di buka dibrowser, agar tampilannya lebih menarik, kita akan tambahkan CSS.

Untuk membuat file bisa ambil script di bawah ini

body{
margin:170px;
}
a {
font:bold 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-decoration:none;
}
.hijau {
background: -moz-linear-gradient(top, #1BFD30, #02650B);
background: -ms-linear-gradient(top, #1BFD30, #02650B);
background: -o-linear-gradient(top, #1BFD30, #02650B);
background: -webkit-linear-gradient(top, #1BFD30, #02650B);
background: linear-gradient(top, #1BFD30, #02650B);
padding-top:15px;
padding-bottom:15px;
padding-left:35px;
padding-right:35px;
text-decoration:none;
font:bold 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
border-radius:5px;
color:#000000;
}
.hijau:hover {
background: -moz-linear-gradient(top, #ACFDDB, #025734);
background: -ms-linear-gradient(top, #ACFDDB, #025734);
background: -o-linear-gradient(top, #ACFDDB, #025734);
background: -webkit-linear-gradient(top, #ACFDDB, #025734);
background: linear-gradient(top, #ACFDDB, #025734);
color:#000000;
}


.merah {
background: -moz-linear-gradient(top, #FD0000, #5C010C);
background: -ms-linear-gradient(top, #FD0000, #5C010C);
background: -o-linear-gradient(top, #FD0000, #5C010C);
background: -webkit-linear-gradient(top, #FD0000, #5C010C);
background: linear-gradient(top, #FD0000, #5C010C);
padding-top:15px;
padding-bottom:15px;
padding-left:35px;
padding-right:35px;
text-decoration:none;
font:bold 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
border-radius:5px;
color:#fff;
}
.merah:hover {
background: -moz-linear-gradient(top, #FD5D5D, #910112);
background: -ms-linear-gradient(top, #FD5D5D, #910112);
background: -o-linear-gradient(top, #FD5D5D, #910112);
background: -webkit-linear-gradient(top, #FD5D5D, #910112);
background: linear-gradient(top, #FD5D5D, #910112);
color:#000000;
}


.biru {
background: -moz-linear-gradient(top, #2534FE, #01085F);
background: -ms-linear-gradient(top, #2534FE, #01085F);
background: -o-linear-gradient(top, #2534FE, #01085F);
background: -webkit-linear-gradient(top, #2534FE, #01085F);
background: linear-gradient(top, #2534FE, #01085F);
padding-top:15px;
padding-bottom:15px;
padding-left:35px;
padding-right:35px;
text-decoration:none;
font:bold 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
border-radius:5px;
color:#fff;
}
.biru:hover {
background: -moz-linear-gradient(top, #D169FC, #4F036F);
background: -ms-linear-gradient(top, #D169FC, #4F036F);
background: -o-linear-gradient(top, #D169FC, #4F036F);
background: -webkit-linear-gradient(top, #D169FC, #4F036F);
background: linear-gradient(top, #D169FC, #4F036F);
color:#fff;
}
.hitam {
background: -moz-linear-gradient(top, #ACACAF, #000000);
background: -ms-linear-gradient(top, #ACACAF, #000000);
background: -o-linear-gradient(top, #ACACAF, #000000);
background: -webkit-linear-gradient(top, #ACACAF, #000000);
background: linear-gradient(top, #ACACAF, #000000);
padding-top:15px;
padding-bottom:15px;
padding-left:35px;
padding-right:35px;
text-decoration:none;
font:bold 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
border-radius:5px;
color:#fff;
}
.hitam:hover {
background: -moz-linear-gradient(top, #E4E4E5, #7D7D7E);
background: -ms-linear-gradient(top, #E4E4E5, #7D7D7E);
background: -o-linear-gradient(top, #E4E4E5, #7D7D7E);
background: -webkit-linear-gradient(top, #E4E4E5, #7D7D7E);
background: linear-gradient(top, #E4E4E5, #7D7D7E);
color:#000000;
}

.kuning {
background: -moz-linear-gradient(top, #FFFC0F, #E4E104);
background: -ms-linear-gradient(top, #FFFC0F, #E4E104);
background: -o-linear-gradient(top, #FFFC0F, #E4E104);
background: -webkit-linear-gradient(top, #FFFC0F, #E4E104);
background: linear-gradient(top, #FFFC0F, #E4E104);
padding-top:15px;
padding-bottom:15px;
padding-left:35px;
padding-right:35px;
text-decoration:none;
font:bold 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
border-radius:5px;
color:#000000;
}
.kuning:hover {
background: -moz-linear-gradient(top, #FEC37D, #FE8B04);
background: -ms-linear-gradient(top, #FEC37D, #FE8B04);
background: -o-linear-gradient(top, #FEC37D, #FE8B04);
background: -webkit-linear-gradient(top, #FEC37D, #FE8B04);
background: linear-gradient(top, #FEC37D, #FE8B04);
color:#000000;
}

Simpan dengan nama style.css, jangan lupa file css ini harus diletakkan satu folder dengan file index.html tadi.

Kalau sudah kurang lebih tampilannya akan seperti gambar di atas, untuk demo nya bisa langsung dicoba Disini

Dan untuk Source Code lengkapnya bisa langsung di download Disini

Demikian tutorial singkat nya. Semoga bermanfaat...


Related Posts:

Download Source Code Tombol Cantik


Download Source Code Tombol Cantik | Source code ini dibuat dengan menggunakan file html dan css, script yang digunakan juga sangat sederhana, jadi anda bisa mengcustom sendiri sesuai dengan selera anda baik itu dari warna atau ukurannya.

Screen shotnya kurang lebih seperti gambar di atas, tapi jika ingin demo, bisa langsung dicoba Disini
Anda bisa langsung download Source Code ini melalui link yang saya sediakan di bawah, namun jika anda lebih suka praktek membuat sendiri langkah demi langkah sehingga anda faham, anda bisa langsung pelajari tutorial singkatnya Disini.

Dan Source Code lengkapnya bisa langsung di Download Disini.

Semoga bermanfaat

Related Posts:

Cara Membuat Menu Dtree Dengan PHP


Cara Membuat Menu Dtree Dengan PHP | Menu dTree adalah menu seperti pohon bercabang yang biasa kita lihat pada saat kita membuka windows explorer pada komputer. Fungsi menu ini hampir sama dengan menu navigasi yang lain, yaitu untuk lebih memudahkan seorang pengunjung menjelajahi isi website kita. Untuk tampilannya kurang lebih seperti gambar di atas.

Baiklah, mari kita mulai Cara Membuat Menu Dtree Dengan PHP, pertama buatlah file php atau html, tutorial  Cara Membuat File PHP Di Localhost bisa dilihat Disini jika belum faham, dan jika sudah faham maka langsung kita buat filenya.


Ketikkan script di bawah ini 

<html>
<head>
<script type="text/javascript" src="tremenu.js"></script>

<style type="text/css">
.treeview ul {
    margin: 0;
    padding: 0;
}

.treeview li {
    background: white url(list.gif) no-repeat left center;
    list-style-type: none;
    padding-left: 22px;
    margin-bottom: 3px;
}

.treeview li.submenu {
    background: white url(closed.gif) no-repeat left 1px;
    cursor: hand !important;
    cursor: pointer !important;
}

.treeview li.submenu ul {
    display: none;
}

.treeview .submenu ul li {
    cursor: default;
}</style>
<body>
<h4> Menu Tree Simple</h4>

<ul id="treemenu1" class="treeview">
<li> Home </li>
<li> Profil </li>

<li> Kategori
    <ul>
    <li> <a href='http://indo-webst.blogspot.com'>PHP Indonesia </a></li>
    <li> PHP </li>
    <li> CSS </li>
    <li> Delphi </li>
    </ul>
</li>
<li> Kontak </li>

<li> Info 
    <ul>
    <li> PHP Indonesia adalah blog pemula </li>
    <li> Css dynamiic </li>
    <li> Mudah Belajar PHP</li>
    </ul>
</li>
<li> Download </li>
</ul>
<script type="text/javascript">
ddtreemenu.createTree("treemenu1", true)
ddtreemenu.createTree("treemenu2", false)
</script>
</body>
</html> 

lalu simpan dengan nama index.php 

Langkah selanjutnya adalah kita siapkan gambar kecil sebagai icon folder dan sub folder, silahkan download gambar nya Disini lalu extrak gambarnya, letakkan pada folder yang sama dengan file index.php tadi

Setelah mempersiapkan gambar, yang harus kita persiapkan selanjutnya adalah file JQuery, silahkan lihat scriptnya Disini, Copy semuanya lalu paste di text editor anda dan simpan dengan nama tremenu.js, Jangan lupa, letakkan juga pada folder yang sama dengan gambar kecil dan file index.html 

Nah kalau sudah kurang lebih tampilan menu dtree seperti gambar di atas, dan jika ingin Demo, bisa langsung dilihat Disini

Truss, Soure Code lengkapnya bisa langsu di Download Disini

Semoga bermanfaat

Related Posts:

Download Source Code Menu Dtree


Download Source Code Menu Dtree | Saat kita mengoperasikan OS Window kita akan melihat menu yang mengakar, sehingga memudahkan user untuk menjelajahi isi komputer, dalam hal ini karna menu ini akan diterapkan di website, tentu juga akan lebih memudahkan pengunjung website untuk menjelajahi isi website.

Gambar diatas merupakan screen shoot menu dtree, anda bisa langsung download melalui link yang saya sediakan di bawah, atau mempraktekkan Membuat sendiri menu dtree. Jika ingin mempraktekkan membuat sendiri Tutorial Cara Membuat Menu Dtree Dengan PHP bisa dilihat Disini,

Untuk Demo langsung tampilan menu dtree bisa dicek Disini

Dan Source Code lengkapnya bisa langsung di Download Disini

Semoga bermanfaat

Related Posts:

Cara Membuat Menu Cantik Dengan Jquery


Cara Membuat Menu Cantik Dengan Jquery | Ketika mendesain sebuuah website, kita tidak akan pernah lepas dari yang namanya menu, karena dari menu atau navigasi ini yang membuat website kita menjadi semakin kaya akan fitur dan juga lebih interaktif dengan pengunjung website.

Berikut ini kita akan bahas cara Cara Membuat Menu Cantik Dengan Jquery, sebenarnya kita bisa saja membuat menu navigasi sederhana, yang hanya menampilkan kata lalu diberikan link di dalamnya, tapi kita akan mencoba yang lebih baik, tentu saja akan lebih indah juga.

Oke, langsung saja kita mulai, pertama kita buat file php di localhost, jika belum faham silahkah dipelajari dulu tutorial singkat Cara Membuat File PHP di Localhost bisa dilihat Disini 

Ketikkan script dibawah ini

<html>
<head>
<title>Menu</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu-vertical li, #menu-horizontal li").has("ul").addClass("parent");
$("#menu-vertical li, #menu-horizontal li").hover(function(e){
e.preventDefault();
$(this).find("ul:first").slideToggle();
});
});
</script>
<style>
html, body, div, ul, li {
border: 0;
margin: 0;
padding: 0;
font-family:arial;
vertical-align:baseline;
}
#container{
width:1000px;
margin:0 auto !important;
}
#menu-vertical{
display:block;
float:left;
left:0;
font-size:12px;
margin:0;
}
#menu-vertical ul{
list-style: none;
margin: 0;
}
#menu-vertical li {
position:relative;
float:left;
background-color:#1026fc;
border-right: 1px solid rgba(30, 30, 30, 0.125);
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}
#menu-vertical ul li.parent {
background:#1026fc url(down.png) no-repeat center bottom;
}
#menu-vertical ul ul li.parent {
background:#1026fc url(right.png) no-repeat center;
display:inline;
}
#menu-vertical li:hover, #menu-vertical li > ul li{
background-color:#b50613 !important;
}
#menu-vertical li > ul li:hover, #menu-vertical li > ul li:hover > ul li {
background-color:1026fc !important;
}
#menu-vertical li > ul li:hover > ul li:hover{
background-color:#b50613 !important;
}
#menu-vertical a{
color: #fff;
display: block;
line-height: 35px;
padding: 0 10px;
text-decoration: none;
vertical-align:baseline;
left:0;
}
#menu-vertical ul ul{
display: none;
position: absolute;
top: 35px;
left: 0;
float: left;
min-width: 180px;
background-color:#1026fc;
z-index:1;
}
#menu-vertical ul ul a{
line-height: 0.7em;
padding: 10px;
width: 180px;
height: auto;
}
#menu-vertical ul ul li{
min-width: 180px;
}
#menu-vertical ul ul ul{
left: 100%;
top: 0;
}


/* HORIZONTAL */
#menu-horizontal {
display:block;
float:left;
left:0;
font-size:12px;
margin:0;
background-color:#1026fc;
}
#menu-horizontal ul{
list-style: none;
margin: 0;
}
#menu-horizontal li {
position:relative;
border-bottom: 1px solid rgba(30, 30, 30, 0.125);
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
background-color:#1026fc;
}
#menu-horizontal a{
color: #fff;
display: block;
line-height: 30px;
padding: 0 10px;
text-decoration: none;
}
#menu-horizontal ul ul{
display: none;
position: absolute;
min-width: 180px;
background-color:#1026fc;
left:100%;
float:left;
top:0;
z-index:1;
}
#menu-horizontal ul ul a{
width: 180px;
line-height: 30px;
}
#menu-horizontal ul ul li{
min-width: 180px;
}
#menu-horizontal ul ul ul{
left:100%;
top:0;
}
#menu-horizontal ul li.parent {
background:#1026fc url(right.png) no-repeat center right;
padding:0 10px 0 0;
}

#menu-horizontal li:hover, #menu-horizontal li > ul li{
background-color:#b50613 !important;
}
#menu-horizontal > ul li:hover, #menu-horizontal li > ul li:hover > ul li {
background-color:#1026fc !important;
}
#menu-horizontal li > ul li:hover > ul li:hover{
background-color:#b50613 !important;
}
</style>
</head>
<body>
<div id="container">
<br>
<h4 style="margin-bottom:5px;">Vertikal</h3>
<div id="menu-vertical">
<ul>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a>
<ul>
<li><a href="">Sub Menu 2.0</a></li>
<li><a href="">Sub Menu 2.1</a></li>
<li><a href="">Sub Menu 2.2</a></li>
<li><a href="">Sub Menu 2.3</a></li>
</ul>
</li>
<li><a href="">Menu 3</a>
<ul>
<li><a href="">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="">Menu 4</a></li>
<li><a href="">Menu 5</a>
<ul>
<li><a href="">Sub Menu 5.0</a>
<ul>
<li><a href="">Sub Menu Sub Menu 5.0.1</a></li>
<li><a href="">Sub Menu Sub Menu 5.0.2</a></li>
</ul>
</li>
<li><a href="">Sub Menu 5.1</a></li>
</ul>
</li>
<li><a href="">Menu 6</a></li>
</ul>
</div>
<br clear="all"/>
<h4 style="margin-bottom:5px;">Horizontal</h3>
<div id="menu-horizontal">
<ul>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a>
<ul>
<li><a href="">Sub Menu 2.0</a></li>
<li><a href="">Sub Menu 2.1</a></li>
<li><a href="">Sub Menu 2.2</a></li>
<li><a href="">Sub Menu 2.3</a></li>
</ul>
</li>
<li><a href="">Menu 3</a>
<ul>
<li><a href="">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="">Menu 4</a></li>
<li><a href="">Menu 5</a>
<ul>
<li><a href="">Sub Menu 5.0</a>
<ul>
<li><a href="">Sub Menu Sub Menu 5.0.1</a></li>
<li><a href="">Sub Menu Sub Menu 5.0.2</a></li>
</ul>
</li>
<li><a href="">Sub Menu 5.1</a></li>
</ul>
</li>
<li><a href="">Menu 6</a></li>
</ul>
</div>
</div>
</body>
</html>

Kemudian simpan dengan nama index.html

selanjutnya download gambar kecil yang akan digunakan sebagai penanda sub menu, gambar bisa di download Disini lalu extrak ke dalam satu folder dengan file index.html tadi 

Selanjutnya kita buat file jquery, lihat script jquerynya Disini, Copy semua lalu paste di text editor anda dan simpan dengan nama jquery.min.js letakkan juga ke dalam satu folder dengan file index.html 

kalau sudah semua silahkan klik dua kali file index.html kalau scriptnya tidak ada yang salah kurang lebih tampilannya bisa dilihat Disini.

Dan Source Code lengkapnya bisa langsung di Download Disini

Demikian Tutorial singkatnya. Semoga bermanfaat.

Related Posts: