Ketemu lagi dengan saya, masih di blog saya, pada kesempatan kali ini saya kembali menulis tutorial
tentang Membuat Web Chatting dengan Ajax Jquery, PHP dan Bootstrap
2.3.2, saya yakin pembaca disini adalah seorang aktifis jejaring social
seperti facebook, twitter, dan jagocoding ini sendiri, sebagaimana kita
ketahui pada situs jejaring social tersebut terdapat fitur chatting atau
private message, chatting/private message sangat bermanfaat sekali,
kita bisa mengobrol, atau bertegur sapa antar user lewat perantara
komunikasi visual.
Nah pada kesempatan kali ini kita akan
membahas bagaimana cara membuat web chatting tersebut dengan cara yang
sederhana, yakni hanya dengan menggunakan Bahasa pemrograman standart
web. Diantaranya ajax jquery sebagai interaktifenya, php sebagai
mesinnya, bootstrap 2.3.2 sebagai interfacenya dan tentu saja mysql
sebagai databasenya. berikut penampakannya.
seperti biasa tutorial ini akan terbagi
menjadi beberapa part karna penjelasannya cukup panjang, ok saya rasa
cukup sebagai muqaddimah sekarang lanjut ke tutorial.
Pertama silahkan download dulu perlengkapannya disini.
Didalam file archive tersebut sudah terdapat beberapa file. Diantaranya
database, bootstrap 2.3.2, emoticon, dan image. Sudah dpaketkan khusus
untuk pembaca setia jagocoding.com
Ok setelah semua file sudah siap, lanjut kita buat codingnya. Pertama kita buat dulu file “index.php”,
<?php session_start();//memulai sessionif(empty($_SESSION['nick'])){//jika belum ada session nick if(isset($_COOKIE['nick'])) { //cek apakah ada cookie nick $_SESSION['nick']=$_COOKIE['nick']; //jika ada maka session nick mengambil dari cookie nick //jadi jika cookie masih aktif, user bias langsung login header("location:".$_SERVER['PHP_SELF']); //reload halaman } Else { //jika belum ada cookie nick belum_login(); //brarti user belum login dan harus login }}else{//jika sudah terdapat session nick sudah_login(); //brarti user sudah login}?> |
Algoritma dari coding diatas sederhana,
bisa dibaca pada masing-masing komentar, cara kerjanya simple. Disini
kita akan membuat web chat dalam 1 halaman (one page), code diatas cara
kerjanya mirip seperti facebook, ketika kita pertama kali membuka
browser kemudian mengetikkan facebook.com maka kita akan disuguhkan pada
halaman login. Dan ketika kita sudah login maka kita langsung
dihadapkan pada halaman beranda.
Selanjutnya kita akan membuat function belum_login() , berikut codenya.
function belum_login(){//pisahkan Antara PHP dan HTML,?><!doctype html><html lang="en"><meta charset="utf-8"><head><title> Selamat Datang </title><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_sebelum.css" rel="stylesheet"><script src="bootstrap/js/jQuery.js"></script><script src="ajaxku.js"></script><script src="bootstrap/js/bootstrap.js"></script></head><body><!-- CONTAINER --><div class="container"> <div class="row"> <div class="span4 offset4"> <h1 class="text-center text-info"> Nge_Chat </h1> <p class="text-info text-center">Selamat Datang di Nge_Chat </br> Aplikasi Chatting sederhana ! </p> </div> </div> <div class="row"> <div class="span4 offset4"> <img src="chat-icon.png" class="img-circle"> </div> </div> </br> <div class="row"> <div class="span4 offset4"> <button href="#modalmasuk" class="btn btn-primary btn-block btn-large" data-toggle="modal" type="button"><i class="icon-share-alt icon-white"></i> Masuk</button> <button href="#modaldaftar" class="btn btn-primary btn-large btn-block" data-toggle="modal" type="button"><i class="icon-user icon-white"></i> Daftar</button> <p class="text-center text-danger" > Copyright 2015 d-newbie @jagocoding.com </p> </div> </div><!—TEMPAT MODAL --> <!-- END MODAL --></div></html><?php //tutup lagi dengan PHP} |
Halaman interface login sudah jadi,
disini kita menggunakan bootstrap 2.3.2, alasan saya menggunakan
bootstrap 2.3.2 adalah karna tampilannya yang bagus dan ada efek 3Dnya,
jujur karna saking cakepnya bootstrap 2.3.2 ini saya jadi sulit move on
dan dibikin galau Antara migrasi ke versi 3, atau tetap bersamanya . :(
Ah sudahlah. Lanjut ke tutorial. berikut hasil dari coding diatas.
Saya yakin pasti ada perbedaan hasil
Antara gambar dan yang dipraktekkan oleh pembaca, yupss, perbedaan
disini karna pembaca belum membuat file “style_sebelum.css”. xixixi.
Coba perhatikan pada bagian head diatas, terdapat statement.
Mari kita buat file “style_sebelum.css” berikut codenya.
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%); height:100%;height: 100%;margin: 0;background-repeat: no-repeat;background-attachment: fixed;}h1{text-shadow: 2px 2px #333300;} |
Disana kita bisa membuat efek warna gradient, linier, dan lain sebagainya. Silahkan coba kapan-kapan. Sekarang focus ke tutorial.
selanjutnya kita akan membuat popop modal untuk Tombol "Masuk" dan tombol "Daftar"
Tombol “Masuk” akan membangkitkan modal login.
<button href="#modalmasuk" class="btn btn-primary btn-block btn-large" data-toggle="modal" type="button"><i class="icon-share-alt icon-white"></i> Masuk</button>
Bisa dilihat, targetnya adalah href="#modalmasuk", yaitu modal yang ber id=modalmasuk.
sekarang mari kita buat modalnya, buka kembali file "index.php" lihat pada bagian .
<!—TEMPAT MODAL -->
<!-- END MODAL -->
isikan code berikut ditengah-tengah komentar tersebut.
<div id="modalmasuk" class="modal hide fade"> <div class="modal-header"> <h3> Masuk Nge_Chat</h3> </div> <div class="modal-body"> <!-- modal form login --> <form class="form-horizontal" id="formmasuk" method="post" action=""> <div class="control-group"> <label class="control-label" for="inputEmail">Nickname</label> <div class="controls"> <input type="text" id="nick" placeholder="Nickname" required x-moz-errormessage='Form harus diisi 5-10 Karakter !' pattern="[a-zA-Z]{5,10}" > </div> </div> <div class="control-group"> <label class="control-label" for="inputPassword" >Password</label> <div class="controls"> <input type="password" id="pass" placeholder="Password" required x-moz-errormessage='Form harus diisi 5-10 Karakter !' pattern=".{5,10}" > </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox" id="cokie" value="ingataku"> Ingat Saya Dalam 1 Jam ! </label> </div> </div> <div class="control-group"> <div class="controls"> <button type="submit" class="btn" id="masuk">Masuk</button> <button type="submit" class="btn btn-danger" data-dismiss="modal">Tutup</button> </div> </div> </form> <p id="notif"></p> </div> <div class="modal-footer"> </div></div> |
Modal login sudah jadi, coba jalankan,hasilnya kurang lebih seperti ini.
<input type="text" id="nick" placeholder="Nickname" required x-moz-errormessage='Form harus diisi 5-10 Karakter !' pattern="[a-zA-Z]{5,10}" >
Code diatas adalah validasi HTML5, tutorial singkatnya bisa anda lihat disini.
required x-moz-errormessage='Form harus diisi 5-10 Karakter !'
berfungsi sebagai pemberitahuan ketika inputan kosong,
kemudian
pattern="[a-zA-Z]{5,10}"
adalah regular expression yang artinya, form hanya boleh diisi dengan huruf abjad (a s/d z) baik huruf besar maupun kecil, dan rentangnya minimal 5 huruf dan maksimal 10 huruf.
Modal masuk sudah selesai dibuat, selanjutnya kita akan membuat modal daftar.
<button href="#modaldaftar" class="btn btn-primary btn-large btn-block" data-toggle="modal" type="button"><i class="icon-user icon-white"></i> Daftar</button>
Code diatas adalah tombol untuk membangkitkan modal daftar. Sasarannya adalah #modaldaftar, yaitu modal yang mempunyai id=modaldaftar.
Berikut code pop-up modal daftarnya, letakkan dibawah modal login yang sudah kita buat.
<div id="modaldaftar" class="modal hide fade"> <div class="modal-header"> <h3> Daftar Nge_Chat</h3> </div> <div class="modal-body"> <form class="form-horizontal" id="formdaftar"> <div class="control-group"> <label class="control-label">Nickname</label> <div class="controls"> <input type="text" id="dnick" placeholder="Nickname" required x-moz-errormessage='Form harus diisi 5-10 Karakter !' pattern="[a-zA-Z]{5,10}"> </div> </div> <div class="control-group"> <label class="control-label" >Email</label> <div class="controls"> <input type="email" id="email" placeholder="Email" required required x-moz-errormessage='Email tidak valid !'> </div> </div> <div class="control-group"> <label class="control-label">Password</label> <div class="controls"> <input type="password" id="dpass" placeholder="Password" required required x-moz-errormessage='Form harus diisi 5-10 Karakter !' pattern=".{5,10}"> </div> </div> <div class="control-group"> <div class="controls"> <button type="submit" class="btn" id="daftar">Daftar</button> <button type="submit" class="btn btn-danger" data-dismiss="modal">Tutup</button> </div> </div> </form> <p id="dnotif"></p> </div> <div class="modal-footer"> </div></div> |
Modal "Masuk" dan "Daftar" sudah jadi. ditutorial selanjutnya kita akan membuat tampilan Chat room.
0 komentar:
Post a Comment