Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap 2.3.2 [Part 2] Oleh: d-newbie

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(){ ?>
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(){ ?> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="bootstrap/js/jQuery.js"> <script src="bootstrap/js/bootstrap.js"> <script src="ajaxku.js">
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”

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(''); return false; } else if(hasil=="yes") { $("#dnotif").html(''); function alihkan() { document.location="index.php"; } setTimeout(alihkan,5000); } else { $("#dnotif").html(''); 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(''); //maka akan menampilkan pemberitahuan berupa alert bootstraps,

return false; //hentikan else if(hasil=="yes") //jika kembaliannya berupa text “yes” $("#dnotif").html(''); //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(''); //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

Tentang Penulis 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