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"...

Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap 2.3.2 [Part 2]

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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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.

 

Part 1              Part 3


About Author

d-newbie

Adalah seorang ninja dari Coding Gakure, Menguasai jurus HTML no jutsu, CSS no jutsu, Javascript no jutsu, PHP no jutsu, dan MySQL no jutsu, jurus andalan adalah KageLooping no jutsu, yg bisa memperbanyak output sekali coding , ninja yang berasal dari TIM W3, dan diasuh oleh petapa genit yang suka menjilat-jilat situs yaitu google.com. :D #xixixi


Comment & Discussions

  • Dimas Dwi
    bang ko yg part satu saya buka ga bisa button masuk saya klik lngsng keluar mlu

  • Please LOGIN before if you want to give the comment.