Baca juga: Peluang Pekerjaan di Bidang Web
Kali ini saya akan menerangkan cara untuk membuat buku tamu sederhana dengan menggunakan HTML, CSS, PHP, dan MySQLi.
Sedikit informasi yang perlu anda ketahui MySQLi (MySQL Improved Extension) ini merupakan pengembangan dari MySQL yang sudah berstatus usang, karena MySQL hanya berlaku untuk penggunaan PHP versi 5 kebawah. Sedangkan PHP sekarang ini sudah mencapai versi 7.0.6.
Berikut tutorialnya
Pertama yang harus anda siapkan adalah:
- Xampp (penting)
- Notepad ++ (rekomendasi di instal)
Selanjutnya
- Buka Xampp Control Panel, Aktifkan Modul Apache dan MySQL
Lalu tekan tombol start pada modul apache dan mysql.Perlu diketahui fungsinya xampp adalah sebagai server yang berdiri sendiri (localhost), dengan mengaktifkan apache maka kita bisa menggunakan bahasa pemrogaman php, dan mengaktifkan mysql maka kita bisa membuat database.
- Membuat Database
Database inilah yang berfungsi sebagai tempat menyimpan data yang di inputkan pengunjung (user yang mengisi buku tamu anda).Anda bisa membuatnya dengan cara membuka localhost/phpmyadmin pada web browser anda, atau di xampp contral panel tadi anda klik tombol admin pada tombol mysql. Selanjutnya membuat database, klik new yang ada pada pojok kiri atas layar komputer anda (dibawah logo phpMyAdmin)
Lalu buat database baru dengan nama bukutamu dan klik create.
Lalu langkah selanjutnya membuat tabel database dengan nama dataku lalu isi number of columns menjadi 5. Lalu klik Go.
Lalu isi tabel databasenya seperti gambar dibawah ini, dan save.
Selesai. - Membuat Halaman Buku Tamunya
Perlu anda ketahui untuk menggunakan xampp maka anda menyimpan setiap kode simpanan notepad anda di C:\xampp\htdocs anda boleh langsung menaruhnya di luar, ataupun membuat folder baru. Tapi saya sarankan membuat folder baru, jadi jika anda banyak menggunakan xampp maka file-file tidak akan tertukar, terlihat rapi dan mudah dalam pencarian file.Buat folder proweb di C:\xampp\htdocs lalu....
Buka notepad++ anda, lalu buat file baru copykan kode dibawah ini
simpan dengan nama koneksi.php file ini yang berguna menghubungkan php dengan database yang baru saja anda buat tadinya.
<?php
$host="localhost";
$user_db="root";
$pass_db="";
$db="bukutamu";
$koneksi=mysqli_connect ($host,$user_db,$pass_db) or die (mysqli_error());
mysqli_select_db ($koneksi,$db) or die (mysqli_error());
?>Buat file baru lagi di notepad++, copy kode dibawah ini
lalu simpan dengan nama simpan.php file ini yang berguna memproses data yang dimasukan dari user (pengunjung).
<?php
include("koneksi.php");
$nama=$_POST['nama'];
$email=$_POST['email'];
$website = $_POST['website'];
$pesan = $_POST['pesan'];
$tanggal = $_POST['tanggal'];
$sql="insert into dataku(nama,email,website,pesan,tanggal) values ('$nama','$email','$website','$pesan','$tanggal')";
mysqli_query($koneksi,$sql) or die (mysqli_error());
header('location:buku-tamu.php');
?>Buat file baru lagi di notepad++, copy kode dibawah ini
lalu simpan dengan nama buku-tamu.php file ini yang akan tampil pada user, memberikan inputan data dari user untuk diproses, dikoneksikan, dan disimpan didatabase, serta ditampilkan kembali.
<html>
<head>
<title>Buku Tamu Sederhana - Masarif.id</title>
<style>
body{font-family:'Arial';font-size:18px;margin:0}
.kecil{font-size:10px}
a{color:#3498db}
a:hover{color:#2980b9}
input[type=text]{margin:5px auto 15px;padding:10px;color:#444;width:300px}
fieldset{border:1px solid #ccc;width:50%;margin-left:auto;margin-right:auto;margin-top:10px;}
input[type=submit]{color:#FFF;padding:0 20px;margin:10px 0 5px;cursor:pointer;background-color:#333;border:0;height:30px}
.tanggal{float:right;font-size:12px}
input[type=submit]:hover{background-color:#444}
input[type=submit]:active{position:relative;top:2px}
</style>
</head>
<body>
<fieldset>
<legend>Buku Tamu</legend>
<form action="simpan.php" method="post">
<p>Nama Lengkap :
<input placeholder="Nama lengkap anda" type="text" name="nama" required/>
</p>
<p>Email (opsional) :
<input placeholder="arifrachmanhakim3@gmail.com" type="text" name="email"/>
</p>
<p>Website (opsional) :
<input type="text" placeholder="http://www.masarif.id" name="website"/>
</p>
<p>Pesan:
<textarea placeholder="Ketikan suatu pesan anda" cols="90" rows="10" name="pesan" required></textarea>
</p>
<textarea name="tanggal" style="display:none"><?php echo date("h:i:s d/m/Y ");?></textarea>
<p>
<input type="submit" value="Simpan"/>
</p>
</form>
<?php
include("koneksi.php");
$query=mysqli_query($koneksi,'select * from dataku');
while($data=mysqli_fetch_array($query))
{
$nama = $data['nama'];
$email= $data['email'];
$website = $data['website'];
$pesan = $data['pesan'];
$tanggal = $data['tanggal'];
echo "
<b>$nama</b> said <div class='tanggal'>$tanggal</div><br/><i class='ganti'>'$pesan'</i> <br/>
<a class='kecil' id='emoticon' href='$website' target='_blank' rel='nofollow' title='Website'>[WEB]</a> | <a class='kecil' title='Kirim Email' href='mailto:$email'>[EMAIL]</a> <br/><br/>
";}
?>
</fieldset>
</body>
</html>Ketiga file diatas disimpan satu folder pada folder yang baru anda buat sebelumnya dengan nama proweb.
- Mencoba Buku Tamu
Caranya dengan mengetikan http://localhost/PROWEB/buku-tamu.php pada browser anda, lalu silakan di enter.
Silakan dicoba sendiri.
Semoga bermanfaat.
Comments