Kali ini saya akan berbagi cara membuat form kontak yang terkoneksi dengan database mysql, tahapanya sebagai berikut :
pertama buatlah database kontak di phpmyadmin dengan nama dbkontak, dan klik tombol create
setelah itu beri nama dengan tblpesan dengan fields berjumlah 5, setelah itu klik Go
kemudian setelah pada tahap ini isi fields dengan:
isi field nama type varchar values 20
isi field email type varchar values 20
isi field ponsel type varchar values 20
isi field web type varchar values 20
isi field pesan type varchar values 200
setelah itu klik Save
pada tahap ini jadikan ponsel sebagai primary key dengan mengklik icon kunci di kolom ponsel
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Import Google Font - Yanone Kaffeesatz -->
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />
<title>HTML5,CSS3 dan PHP Kontak Form</title>
<style type="text/css">
* { margin: 0px; padding: 0px; }
body {
margin: 0 auto;
background: #B0E0E6;
color: #555;
width: 800px;
/* make reference to the Yanone Kaffeesatz font */
font-family: 'Yanone Kaffeesatz', arial, sans-serif;
}
h1 {
color: #555;
margin: 0 0 20px 0;
}
label {
font-size: 20px;
color: #666;
}
form {
float: left;
border: 1px solid #ddd;
padding: 30px 40px 20px 40px;
margin: 75px 0 0 0;
width: 715px;
background: #fff;
/* -- CSS3 - define rounded corners for the form -- */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* -- CSS3 - membuat background graident -- */
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFFFFF));
background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
/* -- CSS3 - add a drop shadow -- */
-webkit-box-shadow:0px 0 50px #ccc;
-moz-box-shadow:0px 0 50px #ccc;
box-shadow:0px 0 50px #ccc;
}
fieldset { border: none; }
#user-details {
float: left;
width: 230px;
}
#user-message {
float: right;
width: 405px;
}
input, textarea {
padding: 8px;
margin: 4px 0 20px 0;
background: #fff;
width: 220px;
font-size: 14px;
color: #555;
border: 1px #ddd solid;
/* -- CSS3 Shadow - membuat efek bayangan sekitar input elemen-- */
-webkit-box-shadow: 0px 0px 4px #aaa;
-moz-box-shadow: 0px 0px 4px #aaa;
box-shadow: 0px 0px 4px #aaa;
/* -- CSS3 Transition - untuk background -- */
-webkit-transition: background 0.3s linear;
}
textarea {
width: 390px;
height: 175px;
}
input:hover, textarea:hover {
background: #eee;
}
input.submit {
width: 150px;
color: #eee;
text-transform: uppercase;
margin-top: 10px;
background-color: #18a5cc;
border: none;
/* -- CSS3 Transition - animasi bayangan -- */
-webkit-transition: -webkit-box-shadow 0.3s linear;
/* -- CSS3 - Rounded Corners -- */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
/* -- CSS3 Shadow - membuat bayangan sekitar elemen -- */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8));
background: -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc);
}
input.submit:hover {
-webkit-box-shadow: 0px 0px 20px #555;
-moz-box-shadow: 0px 0px 20px #aaa;
box-shadow: 0px 0px 20px #555;
cursor: pointer;
}
</style>
</head>
<body>
<form method = "post" action = "mskontak.php">
<h1>Kontak Kami</h1>
<fieldset id="user-details">
<label for="nama">Nama:</label>
<input id=nama name=nama type=text placeholder="Nama lengkap anda" required autofocus>
<label for="email">Email:</label>
<input id=email name=email type=email placeholder="contoh@sayacoba.org" required>
<label for="ponsel">Ponsel:</label>
<input id=ponsel name=ponsel type=tel placeholder="Contoh. +6283000" required>
<label for="website">Website / Blog:</label>
<input id=url type=url placeholder="http://jagajala.web.id/" name=website required/>
</fieldset><!--end user-details-->
<fieldset id="user-message">
<label for="pesan">Pesan Anda:</label>
<textarea name="pesan" rows="0" cols="0"></textarea>
<input type="submit" value="Kirim Pesan" name="submit" class="submit" />
</fieldset><!-- end user-message -->
</form>
<p class="note">Tampilan Terbaik pada Google Chrome v13 dan Mozila Firefox v5.0.</p>
</body>
</html>
dengan tampilan hasil akhir seperti berikut :
kemudian buatlah dokumen php untuk koneksi database dengan nama file koneksidb.php
<?php
$link=mysql_connect("localhost","root","");
mysql_select_db("dbkontak",$link);
?>
dilanjut dengan membuat dokumen untuk memperoses ke database dengan nama mskontak.php
<?php
include "koneksidb.php";
//definisikan variabel dari Form
$nama = $_POST['nama'];
$email = $_POST['email'];
$ponsel = $_POST['ponsel'];
$website = $_POST['web'];
$pesan = $_POST['pesan'];
//simpan data
$input ="insert into tblpesan(nama,email,ponsel,web,pesan)
values('$nama','$email','$ponsel','$web','$pesan')";
mysql_query($input);
if ($input)
{
header("location:kontak.html");
}
else
{
echo "Proses Input Gagal";
}
?>
simpanlah semua dokumen dalam folder htdoc di xampp / wamp
ciri-ciri dokumen kita berhasil, dokumen kontak form yang telah kita buat terkoneksi dengan database, akseslah phpmyadmin dan klik dbkontak dan lihat apakah data yang kita isi di form kontak masuk ke database?
misal dicontohkan kita memasukan data seperti gambar di bawah ini :
maka hasilnya dapat dilihat di database dbkontak telah terisi:
Selamat mencoba, semoga bermanfaat!
Tidak ada komentar:
Posting Komentar