Belajar PHP mungkin bagi sebagian orang merasa susah, tapi ada juga yang merasa mudah, menurut saya, belajar PHP akan lebih mudah jika kita selalu berfikir kreatif. 
Sudah dulu basa basinya. Langsung aja kita lanjut ke tofiq, jangan lupa siapin
biar mantaf, dan makin varokah 
Disini saya punya 1 project saya kasih nama AJAX Chat yang paling sederhana. Hal pertama yang harus dilakukan tentunya membuat koneksi ke database nya dong.
Buat file baru. kasih nama "konek.php" lalu masukkan script dibawah ini:
<?php $dbhost = 'localhost'; // host $dbuser = 'username'; // username. defaultnya root $dbpassword = 'password'; // password. defaultnya kosong $dbname = 'jar_cbox'; // nama database $koneksi = mysql_connect($dbhost,$dbuser,$dbpassword); mysql_select_db($dbname,$koneksi); ?>
Langsung ke MySQL. buat database, kasih nama "jar_cbox". masukkan script dibawah ini:
CREATE TABLE IF NOT EXISTS `jar_cbox` ( `id` int(20) NOT NULL AUTO_INCREMENT, `nama` varchar(20) NOT NULL, `email` varchar(20) NOT NULL, `komen` text NOT NULL, `tgl` date NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
Selanjutnya, buat file lagi. kasih nama "index.php" lalu masukkan script dibawah ini:
<?php include("konek.php"); ?>
<link rel="stylesheet" href="jarstyle.css">
<body><div id="jar_btamu"><div class="btamu">
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td colspan="2">
<div class="pesan" style="height:200px;overflow:auto;">
<?php
$query = mysql_query("SELECT * FROM jar_cbox order by (id+0) desc");{
while ($data = mysql_fetch_array($query)) {
echo '<a href="'.$data['email'].'" target="blank"><h2 class="judul_post" style="font-size:12px;background:#E2E3E4;padding:1px 1px;">'.$data['nama'].'</h2></a>';
echo '<em style="font-size:9px;float:right;">'.$data['tgl'].'</em><br>';
echo '<p style="font-size:12px;">'.$data['komen'].'</p><br>';
}
}
?>
</div>
</tr>
<tr>
<td colspan="2">
<form method="post" name="buku_tamu" action="post.php">
<input class="form1" type="text" name="nama" size="24" autocomplete="off" placeholder="Nama">
<input class="form1" type="text" name="email" size="24" autocomplete="off" placeholder="Email" style="margin-left:-3px;"><br>
<input class="form1" type="text" name="komen" size="46" autocomplete="off" placeholder="Pesan/Komentar" maxlength="500">
<input class="tombol" type="submit" name="submit" value="Post">
</form>
</td></tr>
</tbody></table>
</div></body>
Simpan. dan buat lagi file "post.php" masukkan script dibawah ini:
<?php
include("konek.php");
$nama = $_POST['nama'];
$email = $_POST['email'];
$komen = $_POST['komen'];
$tgl = date('Y-m-d');
$query = mysql_query("INSERT INTO jar_cbox VALUES ('','$nama','$email','$komen','$tgl')");
mysql_close();
?>
<script lang="javascript">
setTimeout("location.href='index.php'", 0);
</script>
Terakhir, saatnya Styling. buat file baru. kasih nama "jarstyle.css" dan dibawah ini adalah style default dari saya:
*{margin: 0px;padding: 0px;}
a{color:#090;text-decoration:none;text-shadow:rgb(110,110,110) 1px 1px 3px;}
::-webkit-scrollbar {width: 13px; background: #CCCCCC;opacity:0.5;}
::-webkit-scrollbar-thumb {background-color:#000000;opacity:0.5;}
::selection { background: #e30000; color: #fff; }
::-moz-selection { background: #e30000; color: #fff; }
a:hover{color:black;text-decoration:none;}
body{
font-family:Segoe UI;
}
#jar_btamu .btamu{
font-size:12px;
}
.form1{
font-family:Segoe UI;
font-size:12px;
border: 1px solid #E2E3E4;
color: #878787;
padding: 5px 5px;
-webkit-transition: 0.35s linear;
-moz-transition:0.35s linear;
-o-transition:0.35s linear;outline:0;
}
.form1:hover{
background: white;
color: black;
border: 1px solid #878787;
}
.form1:focus{
background: white;
color: black;
border: 1px solid #878787;
}
.tombol{
background:white;
border:1px solid #E2E3E4;
margin-left:-3px;
padding:4.5px 5.5px;
color:#878787;
}
.tombol:hover{
background: white;
color: black;
border: 1px solid #878787;
}
.tombol:focus{
background: white;
color: black;
border: 1px solid #878787;
}
.btamu a{
text-shadow:none;
color:black;
}
.pesan{
width:336px;
padding:4.5px 4.5px;
}
Selesai.
Catatan:
- Pastikan semua file berada dalam 1 folder. (Ya iyalah
). - Kalau ada masalah, bingung, atau pertanyaan, komen lah atau Inbox saya di Facebook.
- Source Code bisa didownload di bawah.
0 Komentar
Posting Komentar