Cara Sederhana Import Data dari Excel (CSV) ke MySQL dengan PHP

Asalamualaikum,

Mengapload data secara massal mungkin sangat jarang digunakan untuk keperluan user tapi bagaimana dengan admin?
Ya, admin dengan segudang tugasnya untuk import data sana sini, pasti malas untuk import data satu persatu seperti data peserta didik baru atau nilai raport ke database dari form yang telah kita buat..
Ini adalah pengalaman saya saat saya PKL di SMP beberapa bulan yang lalu.
Admin sekolah menyuruh saya untuk membuat aplikasi rekap nilai raport dan data siswa, nah pada tengah-tengah membuat proyek itu tiba” admin SMP pun minta dibikinkan FORM import dari file CSV seperti layaknya SLIMS, dengan alasan “Repot banget kalo harus import nilai raport siswa sebanyak 600 anak secara satu-persatu dari form tiap semester”..
Yah dari pengalaman itulah saya ingin membagi sedikit ilmu saya ini..
Baik kita mulai tutorial..
Sekarang kita siapkan alat dan bahanya..

1. Excel atau program sejenisnya
2. Text Editor
3. Browser
4. XAMPP

Kita mulai..
Langkah 1
Buka XAMPP..
Jalankan Apache dan Mysql..
Buat sebuah database..
Buat table “tb_data” dengan struktur seperti ini..

Atau jalankan code ini di sql..

CREATE TABLE `coba`.`tb_data` ( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , `nama` VARCHAR( 50 ) NOT NULL , `alamat` TEXT NOT NULL ) ENGINE = MYISAM ;

Langkah 2
Buat data yang akan di import di excel..
Sebagai contoh Seperti ini saja..

lakaukan input data dari call A1, jangan diberi judul.

Lalu Save-As dengan nama nama sesuka anda ..
Pilih type file CSV File..

Perhatian, tipe file harus sama seperti ini..

Akan muncul pesan, click OK saja..


Langkah 3
Buat folder “coba” di dalam htdoc..

Langkah 4
Buka text editor anda..
Lalu pastekan code berikut, untuk fungsi dari barisan code sudah ada di komentar codenya..

$database='coba'; mysql_connect($host,$username,$password); mysql_select_db($database); if (isset($_POST['submit'])) {//Script akan berjalan jika di tekan tombol submit.. //Script Upload File..     if (is_uploaded_file($_FILES['filename']['tmp_name'])) {         echo "<h1>" . "File ". $_FILES['filename']['name'] ." Berhasil di Upload" . "</h1>";         echo "<h2>Menampilkan Hasil Upload:</h2>";         readfile($_FILES['filename']['tmp_name']);     }     //Import uploaded file to Database, Letakan dibawah sini..     $handle = fopen($_FILES['filename']['tmp_name'], "r"); //Membuka file dan membacanya     while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {         $import="INSERT into tb_data (id,nama,alamat) values(NULL,'$data[0]','$data[1]')"; //data array sesuaikan dengan jumlah kolom pada CSV anda mulai dari “0” bukan “1”         mysql_query($import) or die(mysql_error()); //Melakukan Import     }     fclose($handle); //Menutup CSV file     echo "<br><strong>Import data selesai.</strong>";     }else { //Jika belum menekan tombol submit, form dibawah akan muncul.. ?> <!-- Form Untuk Upload File CSV-->    Silahkan masukan file csv yang ingin diupload<br />    <form enctype='multipart/form-data' action='' method='post'>     Cari CSV File anda:<br />     <input type='file' name='filename' size='100'>    <input type='submit' name='submit' value='Upload'></form> <?php } mysql_close(); //Menutup koneksi SQL?> </body> </html><br><br><br>

Jangan lupa, Atur KONEKSInya..
Lalu save di folder coba yang tadi telah kita buat tadi..

Langkah 5
Buka browser dan dan masuk ke halaman yang kita buat tadi..
Contoh..
 
 Lalu cari file CSV yang sudah kita buat di awal tadi..
Dan click “Upload”
Hasilnya..
 
Selesai..
Silahkan Kembangkan sesuai dengan kebutuhan anda.
Semuga tutorial ini bermanfaat, untuk mendapat update tutorial dari saya silahkan masuk ke profil saya dan click “Follow”..
Terimakasih


Referensi : http://jagocoding.com/tutorial/593/Cara_Sederhana_Import_Data_dari_Excel_CSV_ke_MySQL_dengan_PHP

Read More

Cara Membuat Gambar Background Full Page

Waktu itu temen pernah nanya tentang backgroundnya biar full gk tile (yang nyambung nyambung) di halaman site..
setelah googling selama 2rb tahun lamanya, akhirnya ketemu juga yang pas.. :3

oke saya mulai saja... :D
disini saya menggunakan gambar berukuran 960 x 720 px untuk dijadikan background..

bg.jpg

Kode HTMLnya :

        <html >
        <head>
            <title><!-- Masukan Titlenya --></title>
        </head>
        <body>
<style>   
    body {
         margin: 0;
         padding: 0;
         text-align: center;
    }
    .bg {
         width: 100%;
         height: 100%;
         position: fixed;
         z-index: 1;
         float: left;
         left: 0;
    }
    .content {
         width: 80%;
         height: auto;
         margin: 0 auto;
         position: relative;
         z-index: 5;
         background: #fff;
         padding: 30px;
         text-align: left;
    }
    </style>
            <img src="bg.jpg" alt="gambar" class="bg" />
            <!-- tambahan content -->
            <div class="content">
                <p>I Dont Care What u think about me..</p>
                <p><a href="http://rpl4rt.blogspot.com">RPL4rt</a></p>
                <p>Simple site..</p>
            </div>
        </body>
        </html>

untuk demo bisa di lihat DISINi
Untuk Lebih Jelasnya Silahkan Masuk Sini
Sekian postingan dari saya..
Semoga membantu untuk belajar CSSnya dan semoga bermanfaat ;)
Referensi : http://rpl4rt.blogspot.com/2013/01/cara-membuat-gambar-background-full-page.html

Read More

Membuat Server Lokal pada Laptop atau PC

Pada tutorial Website kali ini kita akan sedikit belajar tentang bagaimana cara membuat komputer atau laptop kita menjadi sebuah server (web server lokal atau dikenal dengan localhost). Server ini gunanya untuk menjalankan pemrograman PHP yang disertai DATABASE dan MySQL, JQUERY, maupun AJAX karena untuk menjalankan program - program scripting kita perlu menggunakan SERVER. Nah sebagai pemula maka kita terlebih dahulu belajar membuat website secara offline bukan? untuk itulah perlunya membuat server di PC atau Laptop kita sehingga kita bisa mengetes Program maupun Script yang telah kita buat.

Sebagai contoh, dalam keadaan OFFLINE web berformat *.Php dengan berformat *.Html. keduanya sama - sama bentuk extensi dari sebuah halaman website, namun ketika kita mengakses web dengan extensi php maka file web tersebut tidak akan terbuka pada browser kita. coba jika extensi tersebut adalah html (web statis) maka meskipun tanpa bantuan server, halaman web tersebut akan tetap bisa terbaca oleh browser kita.

Disini saya memberikan contoh file php dan contoh file html. bisa Didownload disini, agar tahu perbedaannya buka kedua file tersebut menggunakan browser anda (bisa firefox, chrome, internet explorer, safari, opera, dll)

Nah sekarang kembali ke cara membuatnya severnya (web server lokal atau localhost) bagaimana?
Ada beberapa jenis Software untuk Membangun Web Server lokal atau Localhost yang support Windows diantaranya adalah :

1. WampServer, Download di http://www.wampserver.com
2. XAMPP, Download di http://www.apachefriends.org/en/xampp-windows.html
3. AppServ, Download di http://www.appservnetwork.com
4. Php Triad, bisa dicari di Google Search atau http://sourceforge.net/projects/phptriad/

Software di atas merupakan gabungan dari php, mysql database dan apache. Semuanya memiliki fungsi dan kemampuan yang sama untuk membangun sebuah Webserver lokal pada Komputer PC maupun Laptop anda. Tidak perlu di instal semuanya, cukup pilih salah satu saja program dari 4 program yang saya contohkan di atas, disini saya menggunakan XAMPP. Program XAMPP merupakan sebuah paket instalasi untuk PHP, APACHE dan MySQL. Dengan menggunakan XAMPP, kita tidak perlu lagi repot menginstall ketiga software itu secara terpisah.

Bagaimana cara instalasinya? Seperti biasa tinggal download lalu instal seperti program windows pada umumnya.

Setelah selesai instalasi Langkah selanjutnya adalah menjalankan servicenya, maka Jalankan file xampp
Caranya:
1. klik kiri2x XAMPP Control Panel yang ada di desktop. Atau anda juga dapat menjalankan XAMPP Control Panel dari menu Start -> All Programs -> apachefriends -> xampp -> xampp control panel

Tekan Start pada Apache dan MySql

2. Buka web browser anda, lalu ketikkan ---> http://localhost <lalu tekan enter>. Jika tampilannya seperti di bawah ini, maka apache sudah terinstall dengan benar

3. Dari tampilan yang muncul Anda dapat melakukan berbagai administrasi untuk server Anda termasuk membuat database SQL di Phpmyadmin, pilih English


4. Untuk menonaktifkan server lokal Anda, keluar dari XAMPP Control Panel. Caranya, pada XAMPP Control Panel, klik [Stop] pada masing-masing [Apache] dan [MySql], lalu tutup jendela kontrol panel (klik X pada pojok kanan atas)

5. Agar terbaca pada server maka kita harus meletakkan file - file php kita di document root milik XAMPP terletak pada folder
(jika anda menginstal di directory file C) maka C:\Program Files\apachefriends\xampp\htdocs\(folder web anda)\index.php
Contoh: disini saya membuat offline www.ilmugrafis.com , maka di dalam htdocs saya membuat folder bernama "www.ilmugrafis.com" untuk project saya
(catatan penting: index.php --> file pertama yang dibaca oleh browser adalah index jadi untuk halaman utama wajib diberi nama index.php)

Untuk mengakses filenya, di browser tinggal ketik, http://localhost/(nama folder yang ada di htdocs)/index.php
Contoh: http://localhost/www.ilmugrafis.com/index.php

Maka di browser akan tampil isi dari index.php yang ada di folder www.ilmugrafis.com

Menarik bukan bermain web server di Komputer / Laptop. hehehe... Tunggu tutorial selanjutnya yang lebih seru, seperti membuat database sederhana di Server lokal, JQuery, dll
Terima kasih, Semoga Bermanfaat ^_^/

http://www.ilmugrafis.com/

Read More

BELAJAR Membuat WEBSITE - Basic HTML

Mungkin anda yang masih awam bertanya - tanya, bagaimanacara membuat website? Ada beberapa tahapan dan langkah yang harus kita lalui untuk membuat sebuah Website yang baik. Lain halnya dengan instan CMS maupun instan blog yang kita tinggal mendaftar saja di penyedia layanan blog seperti Blogspot, Wordpress, dll. Maupun CMS seperti Joomla, Mambo, dll yang tinggal instal saja seperti. Disini kita belajar manual web (membuat website secara manual) walaupun masih sederhana dan statis. Untuk membuat website pertama-tama kita harus belajar bahasa HTML yaitu sebuah "bahasa program" yang memungkinkan kita membuat halaman web yang bisa ditampilkan dalam browser (Chrome, Firefox, Internet Explorer, Netscape, Opera, dll).

Nah, kini kita mulai dari langkah awal yaitu belajar bahasa HTML.

BELAJAR WEBSITE

Dewasa ini, hampir semua dokumen web dibuat dengan bahasa HTML (Hypertext Mark-up Language). Meskipun anda bisa saja membuat web page (halaman web) tanpa mengerti sedikitpun HTML, Sangat disarankan bahkan nyaris diharuskan, agar anda mengerti bahasa HTML. Untuk itu langkah pertama bagi Anda yang bercita-cita memiliki website sendiri adalah belajar HTML.

HTML (Hypertext Markup Language) adalah bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan dalam Web. Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm atau *.html). Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan semua program teks editor biasa, mulai dari Notepad hingga Dreamweaver. Untuk mudahnya, kita gunakan program Dreamweaver.

Apa yang dimkasud dengan file HTML?

-    HTML merupakan kependekan dari Hyper Text markup Language

-    Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup

-    Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman

-    File HTML harus memiliki ekstensi htm atau html

-    File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai.

PENGENALAN KODE HTML
>>New >> Basic Page >> HTML , setelah itu atur ke mode Code

disini anda akan menemui tag - tag semacam ini:

<HTML> </HTML>

Penjelasan:
Masing-masing baris di atas disebut tag. Tag adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing. 
Ada tag pembuka yaitu <HTML> dan ada tag penutup yaitu </HTML> yang ditandai dengan tanda slash (garis miring) di depan awal tulisannya.
Tag di atas memberikan faidah bahwa yang akan ditulis diantara kedua tag tersebut adalah isi dari dokumen HTML. Perlu anda ketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun huruf kecil. Artinya, penulisan <HTML> atau <html> atau <Html> sama saja hasilnya. Namun perlu selalu diingat bahwa penulisan tag yang salah meskipun hanya satu karakter akan berpengaruh terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML anda tidak bisa ditampilkan dalam browser.

Sekarang kita akan beralih pada tag selanjutnya.

<HTML> <BODY> </BODY> </HTML>

Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag <BODY>. Coba tuliskan:

<HTML> <BODY> Tulisan ini akan tampak dalam browser by ilmugrafis. </BODY> </HTML>

Sekarang simpanlah file ini dengan meng-klik menu File lalu Save. Nah, lihatlah hasil karya anda yang pertama dengan menekan F12 disitu akan muncul tulisan "Tulisan ini akan tampak dalam browser by ilmugrafis." tanpa tag HTML. Sekarang anda mungkin mulai mengerti cara kerja HTML dan markup tag, begitulah cara kerjanya, jadi yg muncul di broser hanya tulisan saja sedangkan tagnya hanya merupakan suatu perintah bagi browser untuk menampilkan perintah kita.

Apakah tag BODY fungsinya sekedar penanda tubuh atau isi dari dokumen web? Tidak, dalam tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan berpengaruh terhadap format atau tampilan halaman web secara keseluruhan. Pada kesempatan ini kita mengambil contoh bagaimana mengubah warna latar belakang dan warna tulisan dari halaman web dengan penambahan atribut ke dalam tag BODY.

<HTML> <BODY BGCOLOR="yellow" TEXT="red"> Tulisan ini akan tampak dalam browser by ilmugrafis. </BODY> </HTML>

Simpanlah kembali file ini (klik File lalu Save). Untuk melihat bagaimana hasilnya tekan F12 atau klik tombol Refresh pada browser atau bisa juga dengan menekan tombol F5 pada keyboard. Dengan demikian, browser akan memanggil ulang file yang kini sudah mengalami perubahan. Maka akan tampaklah hasilnya:

Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam format heksa contohnya seperti #rrggbb.

Ok setelah menguasai tag di atas maka kita lanjutkan ke inspeksi tag HEAD dan TITLE. Di sini terlihat bahwa kita mempunyai tag <HEAD> dan tag <TITLE>. Tag HEAD berfungsi untuk mengapit berbagai macam fungsi dan informasi yang berkenan dengan halaman web yang bersangkutan. Pada latihan kali ini, kita memasukkan tag TITLE diantara tag HEAD. Sesuai namanya, tag TITLE ini berfungsi untuk mengapit kalimat yang menjadi judul dari halaman web tersebut. Sekarang mari kita tuliskan judul halaman web ini:

<HTML> <HEAD> <TITLE>WEBSITE BUATANKU</TITLE> </HEAD> <BODY BGCOLOR="yellow" TEXT="red"> Tulisan ini akan tampak dalam browser. </BODY> </HTML>

Simpan lagi file ini dengan meng-klik File lalu Save. Sekarang kita akan melihat bagaimana perubahannya dalam browser. Lakukan lagi Refresh seperti di atas. Maka anda akan melihat di baris teratas (yang dinamakan Title Bar) dari program browser akan menampilkan judul atau titel dari halaman web anda yaitu: WEBSITE BUATANKU
previewnya kurang lebih seperti ini, disini saya menggunakan browser Firefox:

Alhamdulillah, selesailah latihan pertama Belajar Membuat Website - HTML.
Selamat belajar HTML di Dreamweaver
Sampai ketemu lagi di Tutorial berikutnya
Semoga Bermanfaat ^_^/

http://www.ilmugrafis.com/

Read More

Menu - Menu Animasi Menarik di Dreamweaver

Seorang Web desainer pasti akan melakukan segala cara untuk membuat tampilan websitenya menarik, salah satunya mungkin dengan cara membuat menu animasi. Cara itu antara lain dengan belajar Photoshop, Flash, dan juga Firework. Namun Pada tutorial Dreamweaver kali ini kita lupakan dulu hal itu karena kita akan belajar membuat menu yang menarik tanpa harus belajar animasi flash karena pada dreamweaver terdapat template - template animasi siap pakai yang sayang jika dilewatkan :)

Ok, berikut langkah - langkahnya:

1. Buka Program Dremaweaver anda, disini saya menggunakan Dremweaver 8 , namun cara ini bisa diterapkan untuk semua versi Dremweaver mulai dari MX , 8 hingga yang terbaru yaitu Adobe Dremweaver CS5
Start >> All Program >> Dreamweaver

2. kalau anda tidak / belum punya website untuk project anda bisa mengklik Create new: pilih HTML

3. Sebelum kita mulai membuat menunya maka kita diharuskan save (menyimpan) dulu project kita dengan menekan CTRL + S , pilih direktori / tempat penyimpanan lalu berikan nama file yang anda inginkan. klik Save

4. Setelah itu pilih menu Insert >> Media >> Flash Button


5. Pilih template tombol menu animasi yang anda inginkan

Disini ada berbagai macam tombol yang WOW, menarik bukan... sebagai contoh maka saya pilih saja salah satunya yaitu Glass-Silver
Button Text berfungsi untuk menambahkan judul / kata apa yang terdapat di dalam button nantinya
Font : jenis font yang dipakai
Size : ukuran font yang diinginakan
Link : tautan untuk menu nantinya

Tekan OK, untuk title isi saja

OK

klo 1 menu kurang maka buat lagi sebanyak yang anda perlukan untuk menu di website anda dengan mengulangi langkah di atas
Contoh hasilnya:

untuk mengetesnya tekan F12 untuk melihat hasilnya :)
Sampai ketemu lagi di Tutorial Dremweaver berikutnya
Semoga Bermanfaat ^_^/

By : http://www.ilmugrafis.com/

Read More

Membuat Drop Down Menu Sederhana di Website

Pada tutorial Dreamweaver kali ini saya akan mencoba memberikan penjelasan bagaimana cara membuat drop down menu yang simple dan sederhana agar bisa dan mudah dipelajari serta dikembangkan mungkin nantinya oleh para calon web developer maupun web designer yang singgah di website ilmugrafis. Sedikit penjelasan, Dropdown Menu merupakan menu yang bila kita sorot dengan mouse maka menu tersebut akan memunculkan menu yang lain (sub menu). Saat ini banyak sekali yang sudah menggunakan Drop Down menu karena alasan terlihat lebih modern dan canggih, menambah keindahan website sampai menghemat space/ruang di websitenya karena dengan drop down kita bisa memberikan sub menu tersembunyi pada menu di website kita.

Ok, mari kita mencoba membuatnya:

1. Buka aplikasi dreamweaver kita, disini saya menggunakan Dreamweaver 8 karena ringan di komputer saya. Bagi yang sudah menggunakan dreamweaver CS5 bahkan CS6 tenang saja karena cara ini bisa diaplikasikan untuk semua dreamweaver
(start >> all program >> Dreamweaver)

2. buat CSS file, caranya. Klik File >> New >> Tab General >> Basic Page >> Css


tulis Kode CSS di bawah ini

/* CSS untuk drop down menu dimulai */ ul { list-style:none; padding:0px; margin:0px } ul li { display:inline; float:left; } ul li a { color:#ffffff; background:#990E00; margin-right:5px; font-weight:bold; font-size:12px; font-family:verdana; text-decoration:none; display:block; width:100px; height:25px; line-height:25px; text-align:center; -webkit-border-radius:5px; -moz-border-radius:5px; border: 1px solid #560E00; } ul li a:hover { color:#cccccc; background:#560E00; font-weight:bold; text-decoration:none; display:block; width:100px; text-align:center; -webkit-border-radius:5px; -moz-border-radius:5px; border: 1px solid #000000; } ul li.sublinks a { color:#000000; background:#f6f6f6; border-bottom:1px solid #cccccc; font-weight:normal; text-decoration:none; display:block; width:100px; text-align:center; margin-top:2px; } ul li.sublinks a:hover { color:#000000; background:#FFEFC6; font-weight:normal; text-decoration:none; display:block; width:100px; text-align:center; } ul li.sublinks { display:none; } /* CSS drop down menu sederhana end */

wow banyak bener, tenang copy dan paste saja CSS ini ke CSS yang baru anda buat dengan dreamweaver,

save dan beri nama "dropdown.css"

3. Sekarang buat halaman web, pakai saja HTML agar lebih simple, karena jika memilih format PHP butuh bantuan Sever untuk mengoprasikannya
caranya mirip css tadi, cuma urutannya File >> New >> Basic Page >> Html >> Ok
sekarang panggil css yang kita buat, caranya:

klik browse, lalu ambil "dropdown.css", OK
Nah setelah langkah di atas benar maka akan ada code seperti ini di halaman html kita.

itu artinya style (CSS) yang kita buat telah masuk ke halaman html

4. Masukkan kode ini ke code html kita. pilih code

<!-- Menu Pertama Dimulai --> <ul> <li><a href="#" class="dropdown">Menu One</a></li> <li class="sublinks"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </li> </ul> <!-- Menu Pertama Selesai --> <!-- Menu Kedua Dimulai --> <ul> <li><a href="#" class="dropdown">Menu Two</a></li> <li class="sublinks"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </li> </ul> <!-- Menu Kedua Selesai --> <!-- dan seterusnya -->

copy dan paste code di atas di bagian antara <body> .... </body> , bagi yang belum mengerti tag seperti ini lihat tutorial BELAJAR WEBSITE HTML

4. Tambahkan JQuery Script, wow apa lagi ini ya? tenang... lebih jelasnya klik Pengenalan JQuery Website

tulis codenya, Letakkan di bawah tag Title

setelah itu tambahkan code Javascript ini,
letakkan di bawah tag JQuery

<script type="text/javascript"> $(function(){ $('.dropdown').mouseenter(function(){ $('.sublinks').stop(false, true).hide(); var submenu = $(this).parent().next(); submenu.css({ position:'absolute', top: $(this).offset().top + $(this).height() + 'px', left: $(this).offset().left + 'px', zIndex:1000 }); submenu.stop().slideDown(300); submenu.mouseleave(function(){ $(this).slideUp(300); }); }); }); </script>

ini gambarnya

Selesai, dan hasilnya kira - kira seperti ini

Gambar: Drop down menu sederhana

Drop down menu telah selesai dibuat, Lihat Demo Drop Down menu ini Disini. Anda bisa mengganti menu - menu sesuai keinginan anda dengan mengedit teks "Menu One" atau "Menu Two" dan Sub menu "Link 1" sampai dengan "Link 5" pada halaman coding HTML, silahkan dikembangkan sesuai keinginan. Sampai ketemu di tutorial website lainnya. Source code Drop Down menu ini bisa anda download disini. Terima kasih, semoga bermanfaat. Jika ada Saran maupun pertanyaan silahkan kontak saya. Terima kasih, semoga bermanfaat

Read More

Cara Membuat Form Login Sederhana dengan Dreamweaver

Kita sering menemui fitur login pada beberapa website yang menyediakan fitur lebih yang bisa diakses namun mengharuskan user untuk terlebih dahulu login. Pada artikel kali ini, kita akan belajar membuat sebuah form login menggunakan php dan mysql untuk database.

Untuk latihan, buat terlebih dahulu sebuah tabel pada database dan
beri nama user, dengan field-field seperti pada gambar di bawah ini :

Database : db_admin
Table :Admin

Field	Type	Extra	Action
id_admin	int(2)	auto_increment	Primary Key
uname_admin	varchar(20)	-	-
pswd_admin	varchar(20)	-	-

Sebenarnya ada kode php dan mysql lagi untuk memberikan inputan data secara efektif, tpi karena ini latihan login yang sederhana, Input yang saya berikan hanya secara manual dengan mengisi databasenya terlebih dahulu seperti berikut, atau dengan nama yang anda inginkan yang akan kita pakai untuk verifikasi pada saat user login nanti.

id_admin	uname_admin	pswd_admin
1	admin	admin

Berikutnya buat sebuah file index.php dan masukan code html di bawah ini :

<body> <form name="form1" method="post" action="cek_login.php"> <table align="center" width="300"> <tr><td colspan="center" colspan="2">..::LOGIN ADMINISTRATOR::..</td></tr> <tr><td><b>Admin</b></td> <td><input name="uname_admin" type="text"></td></tr> <tr><td><b>Password</b></td> <td><input name="pswd_admin" type="password"></td></tr> </table> </form> </body>


Kemudian buat sebuah file cek_login.php dan masukan code di bawah ini :

<?php session_start(); mysql_connect("localhost","root","password"); mysql_select_db("bukutamu"); ?> <? $uname_admin= $_POST['uname_admin']; $pswd_admin = $_POST['pswd_admin']; $query="SELECT * FROM admin WHERE uname_admin='$uname_admin' AND pswd_admin='$pswd_admin'"; $hasil=mysql_query($query) or die("Query Error : ".mysql_error()); if(mysql_num_rows($hasil)==1)//jika id admin ditemukan dan password benar { $data=mysql_fetch_array($hasil); session_register("uname_admin","pswd_admin"); $_SESSION['uname_admin']=$data['uname_admin']; $_SESSION['pswd_admin']=$data['pswd_admin']; ?> <b><script language="JavaScript">alert('Selamat datang di halaman Administrator'); document.location='../Admin/admin_home.php'</script></b> <? } else { ?><script language="JavaScript">alert('Username atau password Anda salah'); document.location='../Admin/index.php'</script> <? } ?> 

Kemudian buat sebuah file tujuan login yaitu admin_home.php dan masukan code di bawah ini :

<body> Selamat Datang di Halaman Admin... </body>

Selamat mencoba dan smoga bermanfaat.. : )

Read More

Cara Membuat Menu Sederhana Dengan Dreamweaver

Pada artikel kali ini, kita akan belajar membuat sebuah Menu Sederhana dengan menggunakan Adobe Dreamweaver. Langsung saja yha, dari pada berlama-lama komat kamit. :)

Buat sebuah file Menu.php dan masukan code php dan css di bawah ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- td { height: 30px; width: 200px; text-align: center; } a { font-family: Arial, Helvetica, sans-serif; color: #FF0000; font-size: 18px; text-decoration: none; font-weight: bold; } a:hover { color: #000099; } --> </style> </head> <body> <table border="0" align="center"> <tr> <td><a href="index.php">Home</a></td> <td><a href="aboutus.php">About Us</a></td> <td><a href="gallery.php">Gallery</a></td> <td><a href="guestbook.php">Guest Book</a></td> <td><a href="contact.php">Contact Us</a></td> </tr> </table> </body> </html>
Simple kan, Smoga bermanfaat dan Selamat mencoba... : )

Read More

Cara Membuat Form Komentar Sederhana dengan Dreamweaver

Pada artikel kali ini, kita akan belajar membuat sebuah form komentar menggunakan php dan mysql.

Untuk latihan, buat terlebih dahulu sebuah tabel pada database dan
beri nama dengan field-field seperti pada gambar di bawah ini :
Database : Bukutamu.
Table : Komentar

Field
id_komentar int(3) auto_increment Primary Key
nama varchar(50)
email varchar(50)
komentar text

Berikutnya buat sebuah file komentar.php dan masukan code php di bawah ini :
<body> <form action="konfirmasi.php" method="post"> <table width="53%" border="0"> <tr> <td>Nama</td> <td>:</td> <td><input name="nama" type="text" /></td> </tr> <tr> <td>Email</td> <td>:</td> <td><input name="email" type="text" /></td> </tr> <tr> <td>Komentar</td> <td>:</td> <td><input name="komentar" type="text"></td> </tr> <tr> <td> </td> <td> </td> <td><input value="Komentar" type="submit" /></td> </tr> </table> </form> </body>
Kemudian buat sebuah file simpan.php dan masukan code di bawah ini :
<body> <? mysql_connect("localhost","root","root"); mysql_select_db("bukutamu"); $nama=$_POST['nama']; $email=$_POST['email']; $komentar=$_POST['komentar']; $hasil=mysql_query("Insert into komentar (nama,email,komentar) values ('$nama','$email','$komentar')"); if ($hasil) { echo "Data Berhasil Tersimpan";} else { echo "Data Tidak Berhasil Tersimpan";} include "komentar.php"; ?> </body>
Smoga bermanfaat dan Selamat mencoba... : )

Read More