Ketemu lagi dengan saya, masih di jagocoding.com, pada kesempatan kali ini saya kembali menulis tutorial wacana Membuat Web Chatting dengan Ajax Jquery, PHP dan Bootstrap 2.3.2, saya yakin pembaca disini yaitu seorang aktifis jejaring social menyerupai 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 sanggup mengobrol, atau bertegur sapa antar user lewat mediator komunikasi visual.

Nah pada kesempatan kali ini kita akan membahas bagaimana cara menciptakan web chatting tersebut dengan cara yang sederhana, yakni hanya dengan memakai 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.

Membuat Web Chatting Dengan Ajax Jquery, Php, Dan Bootstrap 2.3.2 [Part 1]

Membuat Web Chatting Dengan Ajax Jquery, Php, Dan Bootstrap 2.3.2 [Part 1]

 

seperti biasa tutorial ini akan terbagi menjadi beberapa part karna penjelasannya cukup panjang, ok saya rasa cukup sebagai muqaddimahMembuat Web Chatting Dengan Ajax Jquery, Php, Dan Bootstrap 2.3.2 [Part 1]  kini 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.comMembuat Web Chatting Dengan Ajax Jquery, Php, Dan Bootstrap 2.3.2 [Part 1]

Ok sesudah 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 nickif(isset($_COOKIE['nick'])){//cek apakah ada cookie nick$_SESSION['nick']=$_COOKIE['nick'];//jika ada maka session nick mengambil dari cookie nick//jadi kalau cookie masih aktif, user bias eksklusif loginheader("location:".$_SERVER['PHP_SELF']);//reload halaman}Else{//jika belum ada cookie nickbelum_login();//brarti user belum login dan harus login}}else{//jika sudah terdapat session nicksudah_login();//brarti user sudah login}?>

Algoritma dari coding diatas sederhana, sanggup dibaca pada masing-masing komentar, cara kerjanya simple. Disini kita akan menciptakan web chat dalam 1 halaman (one page), code diatas cara kerjanya menyerupai mirip facebook, dikala kita pertama kali membuka browser lalu mengetikkan facebook.com maka kita akan disuguhkan pada halaman login. Dan dikala kita sudah login maka kita eksklusif dihadapkan pada halaman beranda.

Selanjutnya kita akan menciptakan 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}

 

Penjelasan.

Halaman interface login sudah jadi, disini kita  memakai bootstrap 2.3.2, alasan saya memakai bootstrap 2.3.2 yaitu karna tampilannya yang manis dan ada dampak 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 niscaya ada perbedaan hasil Antara gambar dan yang dipraktekkan oleh pembaca, yupss, perbedaan disini karna pembaca belum menciptakan file “style_sebelum.css”. xixixi. Coba perhatikan pada belahan 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;}

Css pada belahan selector body saya ambil dari situs http://www.colorzilla.com/gradient-editor/

Disana kita sanggup menciptakan dampak warna gradient, linier, dan lain sebagainya. Silahkan coba kapan-kapan. Sekarang focus ke tutorial.

selanjutnya kita akan menciptakan 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 yaitu href=”#modalmasuk”, yaitu modal yang ber id=modalmasuk.

sekarang mari kita buat modalnya, buka kembali file “index.php” lihat pada belahan .

<!—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 menyerupai ini.

Membuat Web Chatting Dengan Ajax Jquery, Php, Dan Bootstrap 2.3.2 [Part 1]

 

Sedikit klarifikasi bagi yang galau dengan code.

<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 yaitu validasi HTML5, tutorial singkatnya sanggup anda lihat disini.

required x-moz-errormessage=’Form harus diisi 5-10 Karakter !’

berfungsi sebagai pemberitahuan dikala inputan kosong,

kemudian

pattern=”[a-zA-Z]{5,10}”

adalah regular expression yang artinya, form hanya boleh diisi dengan huruf huruf (a s/d z) baik huruf besar maupun kecil, dan rentangnya minimal 5 huruf dan maksimal 10 huruf.

Membuat Web Chatting Dengan Ajax Jquery, Php, Dan Bootstrap 2.3.2 [Part 1]

 

Modal masuk sudah final dibuat, selanjutnya kita akan menciptakan 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 yaitu tombol untuk membangkitkan modal daftar. Sasarannya yaitu #modaldaftar, yaitu modal yang memiliki 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>

Membuat Web Chatting Dengan Ajax Jquery, Php, Dan Bootstrap 2.3.2 [Part 1]

 

Modal “Masuk” dan “Daftar” sudah jadi. ditutorial selanjutnya kita akan menciptakan tampilan Chat room.

 

Part 2