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

Ukuran: px

Mulai penontonan dengan halaman:

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

Ratna Kurnia
7 tahun lalu
Tontonan:

2 Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap [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()?> <!doctype html> <html lang="en"... 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 class="span2"> <a href="logout.php" class="btn btn-danger" type="button" ><i class="icon-off icon-white"></i> Keluar </a> <div class="row"> <div class="span6 offset2">

3 <div id="boxpesan"> <div class="span2"> <div class="boxonline"> </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 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> </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%, # %); /* 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%,# %); /* Chrome10+,Safari5.1+ */

4 background: -o-radial-gradient(center, ellipse cover, #f2f3f4 28%,#828c95 78%,# %); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #f2f3f4 28%,#828c95 78%,# %); /* IE10+ */ background: radial-gradient(ellipse at center, #f2f3f4 28%,#828c95 78%,# %); /* 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;

5 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 u =$("# ").val(); var upass=$("#dpass").val(); $.ajax( url : 'daftar.php', data : 'nick='+unick+'& ='+u +'&pass='+upass,

6 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! '); 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">'); 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! ');, ); ); Penjelasan. $("#formdaftar").submit(function() var unick=$("#dnick").val(); var u =$("# ").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',

7 // file PHP yang akan memproses ajax data : 'nick='+unick+'& ='+u +'&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! '); //maka akan menampilkan pemberitahuan berupa alert bootstraps, //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">'); //kemudian tampilkan juga animasi loading function alihkan() document.location="index.php"; //Adalah fungsi yang akan mereload halaman

8 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! '); //maka tampilkan alert gagal mendaftar //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

dokumen-dokumen yang mirip

SImple Pop-Up Modal dengan CSS3 dan Jquery

SImple Pop-Up Modal dengan CSS3 dan Jquery Oleh: d-newbie Assalamualaikum wr.wb. bertemu lagi dengan saya, kali ini saya akan menulis tutorial tentang pop-up, apa itu pop-up? Kalo menurut wikipedia pop-up