saat'y posting,... :)
kali ini saya akan membahas tentang membuat miniChat/shoutbox sederhana dengan menggunakan ajax, ini nantinya bisa di terapkan di blog anda atau web anda. Dengan membuat sendiri miniChat dengan script ajax akan membuat web anda lebih ringan,.
Langsung saja ke scipt'y.....
Buat database dan tabelnya, untuk lebih mudah bisa copas text dibawah ini ke Query SQL anda,.
CREATE DATABASE chat ;
CREATE TABLE datachat (
idUser int(4) NOT NULL auto_increment,
namaUser varchar(25) NOT NULL,
isiChat varchar(250) NOT NULL,
date varchar(40) NOT NULL,
PRIMARY KEY (idUser)
);
Langkah berikutnya adalah membuat halaman Ajax, perhatikan script Ajax berikut:
index.php
<html>
<head>
<title>minichat / shoutbox </title>
<script language="javascript">
//tes browser support
function createRequestObject() {
var ro;
//Firfox, Opera, Safari, Chrome
if(window.XMLHttpRequest)
{
ro=new XMLHttpRequest();
}
//IE
else if(windows.ActiveXObject)
{
ro=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("browser suport ajax");
return false;
}
return ro;
}
var xmlhttp = createRequestObject();
function ambilData()
{
var post = "nama="+null;
xmlhttp.open("post", "dataChat.php?data="+Math.random(), true);
xmlhttp.onreadystatechange = function() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
document.getElementById("hasil").innerHTML= xmlhttp.responseText;
}
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(post);
setTimeout("ambilData()",4000);
}
function kirim()
{
var post = "nama="+document.chat.nama.value;
post=post+"&isiChat="+document.chat.isiChat.value;
xmlhttp.open("post", "inputData.php?data="+Math.random(), true);
xmlhttp.onreadystatechange = function() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
document.getElementById("hasil").innerHTML= xmlhttp.responseText;
document.getElementById("isiChat").value=null;
}
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(post);
setTimeout("ambilData()",4000);
}
</script>
</head>
<body onLoad="setTimeout('ambilData()',1000)">
<table align="center" width="326" height="192" border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="326" height="250">
<div id="hasil" style="overflow:auto; height:250;"></div>
</td>
</tr>
<tr>
<td height="24">
<form name="chat" id="chating">
nama : <input type="text" name="nama" size="15" /><br />
<input id="isiChat" type="text" name="isiChat" size="30" onChange="kirim()" />
<input type="button" value="kirim" onClick="kirim()" />
</form>
</td>
</tr>
</table>
</body>
</html>
Script di atas berisi srcript Ajax, script Javascript dan HTML.
Langkah berikutnya buat koneksi ke SQL dengan script PHP, untuk yang kurang jelas bisa lihat postingan saya sebelumnya Tes koneksi ke server MySQL menggunakan script PHP.
<?php
//koneksi ke database
$hostname_conn="localhost";
$username_conn="root";
$password_conn="";
$db_conn="chat";
mysql_connect($hostname_conn,$username_conn,$password_conn,$db_conn) or die ("Koneksi gagal total");
mysql_select_db ($db_conn);
?>
Selanjutnya membuat script PHP untuk menyimpan vareabel javascript/data chating yang ada pada form minichat tadi,.
<?php
//memasukan konfigurasi
include"config.php";
//ambil vareabel
$nama=$_POST['nama'];
$isiChat=$_POST['isiChat'];
$date=date("d F Y H:i:s");
if($nama!="" and $isiChat!="" and $isiChat!=null and $isiChat!="null")
{
//masukan vareable ke database
$insert=mysql_query("INSERT INTO datachat ( idUser , namaUser , isiChat , date )VALUES ('', '$nama', '$isiChat', '$date')");
if($insert)
{
$query=mysql_query("SELECT * FROM datachat ORDER BY idUser DESC");
while($i<=30 and $row=mysql_fetch_array($query))
{
$i++;
echo"$row[namaUser] : $row[isiChat] >> $row[date] <br />";
}
}
else
{
echo"gagal";
}
}
else
{
$query=mysql_query("SELECT * FROM datachat ORDER BY idUser DESC");
while($i<=30 and $row=mysql_fetch_array($query))
{
$i++;
echo"$row[namaUser] : $row[isiChat] >> $row[date] <br />";
}
}
?>
Terakhir membuat buat untuk mempilkan data-data chat dengan script PHP, yang di panggil secara auto refresh dengan script Ajax.
dataChat.php
<?php
//include koneksi
include"config.php";
$query=mysql_query("SELECT * FROM datachat ORDER BY idUser DESC");
while($i<=30 and $row=mysql_fetch_array($query))
{
$i++;
echo"$row[namaUser] : $row[isiChat] >> $row[date] <br />";
}
?>
miniChat dengan Ajax yang tadi saya bahas masih sangat sederhana, untuk tampilan dan lain-lain anda bisa kembangkan sendiri,.
<html>
<body>
<center>
<table border="1px" width="180">
<tr>
<td>
<ul>
<li>
<input type="checkbox" name="check_ctrl" onClick="Check(document.myform.check_list)" /> <b id=message>Check All</b>
</li>
<li><input type="button" name="button" id="button" onClick="Check(document.myform.check_list)" value="Check All" /></li>
</ul>
<hr>
<ol>
<li><input type="checkbox" name="check_list" value="1"> ASP</li>
<li><input type="checkbox" name="check_list" value="2"> PHP</li>
<li><input type="checkbox" name="check_list" value="3"> JavaScript</li>
<li><input type="checkbox" name="check_list" value="4"> HTML</li>
<li><input type="checkbox" name="check_list" value="5"> MySQL</li>
</ol>
</td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
<!--
function Check(chk)
{
if(document.myform.check_ctrl.checked==true || document.getElementById("button").value=="Check All")
{
for(i=0;i<chk.length;i++)
chk[i].checked=true ;
document.getElementById("message").innerHTML="UnCheck All";
document.getElementById("button").value="UnCheck All";
}
else
{
for(i=0;i<chk.length;i++)
chk[i].checked=false;
document.getElementById("message").innerHTML="Check All";
document.getElementById("button").value="Check All";
}
}
//-->
</script>
</center>
</body>
</html>
Sebelumnya saya sudah pernah menulis tentang CSS atau Cascading Style Sheet. Tapi kali ini saya akan sharing trik penggunaan script CSS untuk menghilangkan garis bawah pada Link Text, dan menhhilangkan border pada Link Gambar.
Menghilangkan Garis Bawah Semua Link pada Halaman Web
Pada dasarnya sebuah link otomatis akan mempunyai garis bawah. Tapi dengan menggunakan CSS/Cascading Style Sheet, garis bawah itu bisa dihilangkan dengan mudah. Caranya, tempatkan script CSS berikut di bagian <head>...</head> halaman web yang Anda buat (bersama title, description, dan keyword). Dengan menggunakan kode ini, garis bawah pada seluruh link di halaman web Anda akan hilang.
Menghilangkan Garis Bawah Sebagian Link pada Halaman Web
Jika hanya ingin menghilangkan garis bawah pada link-link tertentu, bukan pada seluruh link seperti yang terjadi kalau memakai kode di atas, anda dapat menyisipkan kode script ke dalam style Link atau memanggilnya dengan class. Contoh dan kodenya seperti yang berikut ini.
Menghilangkan Border Semua Link Gambar pada Halaman Web
Pada dasarnya apabila kita membuat Link Gambar akan terdapat border di sekeliling gambar yang di buat Link, tapi ada sebagian browser yang tidak memunculkan border tersebut. Apabila anda pengguna Opera dan Firefox, border tersebut muncul pada browser Opera dan Firefox. Dengan CSS border tersebut dapat dihilangkan,caranya sisipkan kode CSS ke tag <head>...</head>.contoh scriptnya sebagai berikut:
Promtbox adalah fungsi bawaan dari javascript yang berfungsi untuk memasukan vareabel, tampilan dari promptbot dapat dilihat seperti gambar di atas,.<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("masukan nama","");
if (name!=null && name!="")
{
document.write("Apa kabar " + name + "?????");
}
else if (name=="")
{
alert("anda belum memasukan nama");
}
}
</script>
</head>
<body>
<input type="button" onClick="show_prompt()" value="prompt box" />
</body>
</html>
