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: