pada tutorial sebelumnya kita sudah membuat 2 modal, yaitu modal "Masuk" dan modal "Daftar" dan pada tahap ini kita akan membuat halaman Chatroom.
langsung saja kita buat halaman chatroomnya, kita masukkan kedalam function.
function sudah_login(){
?>
<!doctype html>
<html lang="en">
<head>
<title> Nge-Chatz, Ruang Percapakan </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="style_sesudah.css" rel="stylesheet">
<script src="bootstrap/js/jQuery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="ajaxku.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span6 offset2">
<h1 class="text-info pull-left"> Nge_Chat room </h1>
</div>
<div class="span2">
<a href="logout.php" class="btn btn-danger" type="button" ><i class="icon-off icon-white"></i> Keluar </a>
</div>
</div>
<div class="row">
<div class="span6 offset2">
<div id="boxpesan">
</div>
</div>
<div class="span2">
<div class="boxonline">
</div>
</div>
</div>
</br>
<div class="row">
<div class="span6 offset2">
<form method="post" action="" id="formpesan" class="form-inline">
<input class="input-xlarge" name="pesan" type="text" placeholder="Ketik Pesan kemudian Enter !" required x-moz-errormessage="Ketik pesannya gan !">
<input type='submit' value='Kirim' class='btn btn-info pull-right' id='pencet'>
</form>
</div>
<div class="span2">
<a href="#" class="btn btn-info" data-toggle="popover" id="emot" type="button" data-placement="top" title="Emoticons (klik)">
<i class="icon-eye-open icon-white"></i> Emoticons </a>
</div>
</div>
</div>
</body>
</html>
<?php
}
selanjutnya kita akan menambahkan css untuk tampilan Chatroom.
file "style_sesudah.css"
html {
height:100%;
}
body {
background: #f2f3f4; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #f2f3f4 28%, #828c95 78%, #375987 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(28%,#f2f3f4), color-stop(78%,#828c95), color-stop(100%,#375987)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #f2f3f4 28%,#828c95 78%,#375987 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #f2f3f4 28%,#828c95 78%,#375987 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #f2f3f4 28%,#828c95 78%,#375987 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #f2f3f4 28%,#828c95 78%,#375987 100%); /* W3C */
height:100%;
height:100%;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
.btn-danger {
margin-top:20px;
width:90%;
}
#emot{
width:90%;
}
#boxpesan, .boxonline {
overflow-y:auto;
overflow-y:scroll;
height:450px;
width:100%;
border:8px solid #404040;
background-color:white;
border-radius:10px;
}
input[type="text"]{
width:80%;
}
input[type="submit"]{
width:15%;
}
img{
height:30px;
width:30px;
cursor:pointer;
}
p{
line-height:25px;
font-size:15px;
}
.popover{
width:180px;
}
h1{
text-shadow: 2px 2px #333300;
}
halaman Chat room sudah jadi, tapi kita belum bisa melihatnya karna belum ada session nick atau kita belum login, sudah biarkan saja, kita lanjut ke proses pedaftaran ajax jquery agar bisa langsung login dan melihat halaman chat room.
sebelum melanjutkan ke pembuatan Ajax jquery, pastikan databasenya sudah siap, download pada bagian pertama tutorial. Jika sudah siap, buat koneksinya terlebih dahulu.
File “koneksi.php”
<?php
try{
$koneksi=new PDO('mysql:host=localhost;dbname=nge-chat','root','');
}catch(PDOException $e){
echo "Koneksi Database gagal ".$e->getMessage();
exit;
}
?>
kita sudah membuat koneksi database, dan sekrang kita akan lanjut ke pembuatan login dengan ajax jquery.
Buat file “ajaxku.js”.
$(document).ready(function()
{
//semua code ajax akan diletakkan disini
})
NOTE: untuk selanjutnya semua code javascript, jquery, dan ajax akan diletakkan didalam code diatas, hal tersebut untuk memastikan agar code dieksekusi apabila halaman sudah di load secara keseluruhan.
ok lanjut, Pertama kita buat ajax proses pendaftaran terlebih dahulu.
//ajax daftar
$("#formdaftar").submit(function()
{
var unick=$("#dnick").val();
var uemail=$("#email").val();
var upass=$("#dpass").val();
$.ajax({
url : 'daftar.php',
data : 'nick='+unick+'&email='+uemail+'&pass='+upass,
type : 'POST',
success : function(hasil){
if(hasil=="ada")
{
$("#dnotif").html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">×</button> Anda sudah terdaftar ! </div>');
return false;
}
else if(hasil=="yes")
{
$("#dnotif").html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button>Pendaftaran Berhasil, Tunggu Sebentar ! <img src="alihkan.gif"></div>');
function alihkan()
{
document.location="index.php";
}
setTimeout(alihkan,5000);
}
else
{
$("#dnotif").html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">×</button> Gagal Mendaftar ! </div>');
return false;
}
},
});
return false;
});
Penjelasan.
$("#formdaftar").submit(function()
var unick=$("#dnick").val();
var uemail=$("#email").val();
var upass=$("#dpass").val();
//jika tombol daftar dklik maka ambil ambil semua isi dari form kemudian simpan ke dalam variable.
$.ajax({})
//memulai ajax jquery.
url : 'daftar.php',
// file PHP yang akan memproses ajax
data : 'nick='+unick+'&email='+uemail+'&pass='+upass,
//data yang akan dikirim
type : 'POST',
// metode pengiriman
success : function(hasil)
//apabila data berhasil dkirim
if(hasil=="ada")
//jika kembaliannya berupa text “ada”,
// ada disini adalah kembalian dari file pemroses yaitu “daftar.php” yang menmberitahukan bahwa nick yang dimasukkan sudah ada di database, dengan kata lain, user tersebut sudah terdaftar sebelumnya.
$("#dnotif").html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">×</button> Anda sudah terdaftar ! </div>');
//maka akan menampilkan pemberitahuan berupa alert bootstraps,
return false;
//hentikan
else if(hasil=="yes")
//jika kembaliannya berupa text “yes”
$("#dnotif").html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button>Pendaftaran Berhasil, Tunggu sebentar !
//tampilkan pemberitahuan sukses berupa alert bootstrap,
<img src="alihkan.gif"></div>');
//kemudian tampilkan juga animasi loading
function alihkan()
{
document.location="index.php";
}
//Adalah fungsi yang akan mereload halaman
setTimeout(alihkan,5000);
//reload halaman dalam waktu 5 detik, ini agar tampilan loadingnya keliatan
//ceritanya pamer animasi
Berikut hasilnya.
else
//Jika kembaliannya bukan kata “ada” atau “yes”, dalam hal ini user belum terdaftar dan belum berhasil mendaftar.
$("#dnotif").html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">×</button> Gagal Mendaftar ! </div>');
//maka tampilkan alert gagal mendaftar
return false;
//hentikan.
Part 2 saya cukupkan sampai disini, pada tutorial selanjutnya kita akan membuat file "daftar.php", yang akan memproses request ajax diatas.
