Ketemu lagi dengan saya, masih di jagocoding.com, 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, sebagaim...

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

Ketemu lagi dengan saya, masih di jagocoding.com, 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 session
if(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
}

 

Penjelasan.

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;
}

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

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.

 

Sedikit penjelasan bagi yang bingung 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 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.

 

Part 2


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

  • Rizky Ariss
    kenapa ya mas ? ketika masuk dengan user yang sudah ada di database tidak bisa login makasih mas...

  • Arif Ninegrafh
    kalau cara menambahkan melampirkan gambar bisa tidak om..

  • Dimas Dwi
    itu yg script belum login digabung sama index?

  • Dimas Dwi
    oi
    lama bales

  • Riyan Firmansyah
    mas saya udah ikutin semua tutorialnya yang jadi pertanyaan saya bagaimana cara untuk membuka file tersebut atau bisa di masukkan ke website ?

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