-->

Thursday, December 29, 2016

- 2 Comments

Assalammualaikum wr.wb.
Selamat malam semuanya pengunjung setia Syntax404, Saya berharap semua sehat sehat saja hehehe.
Sesuai dengan judul diatas "Cara Membuat Aplikasi Chat Room Sederhana Dengan bootstrap" saya akan sedikit share tentang judul diatas baiklah kita simak sama sama ya :) .


  • Pertama-tama download file pendukungnya (Wajib)!!! Disini password: syntax.tk
  •  Setelah itu buat file koneksi.php
    ini scriptnya:
    <?php
    try{
        $koneksi=new PDO('mysql:host=localhost;dbname=nge_chat','root','');  
    }catch(PDOException $e){
        echo "Koneksi Database gagal ".$e->getMessage();
        exit;
    }
    ?>
  • Kemudian buat file index.php
    ini scriptnya:
    <?php
    session_start();
    error_reporting(E_ALL);
    include "koneksi.php";
    if(empty($_SESSION['nick']))
    {
        if(isset($_COOKIE['nick']))
        {
            $_SESSION['nick']=$_COOKIE['nick'];
            header("location:".$_SERVER['PHP_SELF']);
        }
        else
        {
            belum_login();
        }
    }
    else
    {
        sudah_login();
    }
    function belum_login(){
    ?>
    <!doctype html>
    <html lang="en">
    <meta charset="utf-8">
    <head>
    <title> Selamat Datang Di Aplikasi Chat Room </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"> Aplikasi Chat Sederhana </h1>
                <p class="text-info text-center">Selamat Datang di Aplikasi Chat Sederhana</p>
            </div>
        </div>
        <div class="row">
            <div class="span4 offset4">
                <img src="chat-syntax404.tk.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 2016 syntax404.tk || jagocoding.com </p>
            </div>
        </div>
    <!-- MODAL -->
    <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>
    <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>
    <!-- END MODAL -->
    </div>
    </html>
    <?php }
    function sudah_login(){
    ?>
    <!doctype html>
    <html lang="en">
    <head>
    <title>Aplikasi Room Chat Sederhana</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"> Room Chat </h1>
            </div>
            <div class="span2">
                <a href="logout.php" class="btn btn-danger"  type="button" ><i class="icon-off icon-white"></i> Keluar </a>
            </div>
        </div>
        <div class="row">
            <div class="span6 offset2">
                    <div id="boxpesan">
                    </div>
            </div>
            <div class="span2">
                    <div class="boxonline">
                    </div>
            </div>
        </div>
        </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>
            <audio controls id="suara">
            <source src="../Nge_Chat/chat.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
            </audio>
            </div>
            <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>
            </div>
        </div>
    </div>
    </body>
    </html>
    <?php 
    }
  • Kemudian buat file login.php
    ini scriptnya:

    <?php
    session_start();
    include "koneksi.php";
    $nick=trim($_POST['nick']);
    $pass=md5(trim($_POST['pass']));

    $cari=$koneksi->prepare("select * from user where nick=:nick and pass=:pass ");
    $cari->BindParam(":nick",$nick);
    $cari->BindParam(":pass",$pass);
    $cari->execute();
    if($cari->rowCount()==0)
    {
    echo "failed";
    }
    else
    {
    $_SESSION['nick']=$nick;
    $waktu=date("h:m:s");
    $online=$koneksi->prepare("insert into online (nick,waktu) values (:nick,:waktu)");
    $online->BindParam(":nick",$nick);
    $online->BindParam(":waktu",$waktu);
    $online->execute();
    if(isset($_POST['cokie']))
    {
        if($_POST['cokie']=="ingataku")
        {
        setcookie("nick",$nick, time()+3600);
        }
    }
    echo "ok";
    }
    ?>
  • Kemudian buat file logout.php
    ini scriptnya:

    <?php
    session_start();
    include "koneksi.php";
    if(isset($_SESSION['nick']))
    {
    $nick=$_SESSION['nick'];
    $hapus=$koneksi->prepare("delete from online where nick=:nick");
    $hapus->BindParam(":nick",$nick);
    $hapus->execute();
    unset($_SESSION['nick']);
    if(isset($_COOKIE['nick']))
    {
        setcookie("nick","",time()-3600);
    }
    header("location:index.php");
    }
    ?>
  • Kemudian buat file ambil.php
    ini scriptnya:

    <?php
    include "koneksi.php";
    $ambil=$koneksi->prepare("select * from pesan order by id");
    $ambil->execute();
    while($ulangi=$ambil->fetch())
    {
        // this is emoticon's operation bro
        $text_awal=$ulangi['pesan'];
        $symbol=array("[kasmaran]","[kedip]","[ketawa]","[marah]","[melet]","[nangis]",
                    "[sakit]","[bye]","[maki-maki]","[cmarah]","[cmurung]","[cnangis]",
                    "[csedih]","[csenyum]","[bonus]");
                  
        $icon=array("<img src='../nge_chat//emot/akasmaran.gif' title='handup'>",
                "<img src='../nge_chat/emot/akedip.gif' title='bingung'>",
                "<img src='../nge_chat/emot/aketawa.gif' title='capek'>",
                "<img src='../nge_chat/emot/amarah.gif' title='cemen'>",
                "<img src='../nge_chat/emot/amelet.gif' title='cool'>",
                "<img src='../nge_chat/emot/anangis.gif' title='galau'>",
                "<img src='../nge_chat/emot/asakit.gif' title='hay'>",
                "<img src='../nge_chat/emot/bye.gif' title='kedip'>",
                "<img src='../nge_chat/emot/maki-maki.gif' title='kesetrum'>",
                "<img src='../nge_chat/emot/marah.gif' title='lol'>",
                "<img src='../nge_chat/emot/murung.gif' title='mewek'>",
                "<img src='../nge_chat/emot/nangis.gif' title='nangis'>",
                "<img src='../nge_chat/emot/sedih.gif' title='nyengir'>",
                "<img src='../nge_chat/emot/smile.gif' title='psimis'>",
                "<img src='../nge_chat/emot/bonus.png' title='rokok'>");
        $pesan=str_replace($symbol,$icon,$text_awal);
      
      
        // this is emoticon's operation bro
        echo "<p><span class='label label-info text-center'><i class='icon-user icon-white'></i> ".$ulangi['nick']." </span><small>&nbsp;".$pesan."</small>
        <small class='muted'>(".$ulangi['waktu'].")</small></p>";  
    }
    ?>
  • Kemudian buat file daftar.php
    ini scriptnya:

    <?php
    session_start();
    include "koneksi.php";
    $nick=trim($_POST['nick']);
    $email=trim($_POST['email']);
    $pass=md5($_POST['pass']);
    $periksadulu=$koneksi->prepare("select * from user where nick=:nick || email=:email");
    $periksadulu->BindParam(":nick",$nick);
    $periksadulu->BindParam(":email",$email);
    $periksadulu->execute();
    if($periksadulu->rowCount()>=1){
        echo "ada";
    }
    else
    {
        $daftarkan=$koneksi->prepare("insert into user (nick,email,pass) values (:nick,:email,:pass)");
        $daftarkan->BindParam(":nick",$nick);
        $daftarkan->BindParam(":email",$email);
        $daftarkan->BindParam(":pass",$pass);
        $daftarkan->execute();
        if($daftarkan->rowCount()==1)
        {
            $waktu=date("h:m:s");
            $online=$koneksi->prepare("insert into online (nick,waktu) values (:nick,:waktu)");
            $online->BindParam(":nick",$nick);
            $online->BindParam(":waktu",$waktu);
            $online->execute();
            $_SESSION['nick']=$nick;
            echo "yes";
        }
        else
        {
        echo "no";
        }
    }


    ?>
  • Kemudian buat file kirim.php
    ini scriptnya:

    <?php
    session_start();
    include "koneksi.php";
    $nick=$_SESSION['nick'];
    $pesan=strip_tags($_POST['pesan']);
    $waktu=date("h:m:s");
    $masukan=$koneksi->prepare("insert into pesan (nick,pesan,waktu) values (:nick,:pesan,:waktu) ");
    $masukan->BindParam(":nick",$nick);
    $masukan->BindParam(":pesan",$pesan);
    $masukan->BindParam(":waktu",$waktu);
    $masukan->execute();
    if($masukan->rowCount()==1)
    {
        print "terkirim";
    }
    else
    {
        print "gagal";
    }
    ?>
  • Kemudian buat file online.php
    ini scriptnya:

    <?php
    include "koneksi.php";
    $ambil=$koneksi->prepare("select * from online order by id desc");
    $ambil->execute();
    while($list=$ambil->fetch())
    {
        echo "<i class='icon-user'></i><span class='label label-info'>".$list['nick']."</span><span class='label'>".substr($list['waktu'],0,5)."</span><br>";
    }
    ?>
  • Kemudian kita buat javascript nya buatlah dengan nama file ajaxku.js
$(document).ready(function()
{
                // ajax login
                $("#formmasuk").submit(function()
                {
                var unick=$.trim($("#nick").val());
                var upass=$.trim($("#pass").val());
                if($("#cokie").is(':checked'))
                {
                    var cokie=$("#cokie").val();
                }
                $.ajax({
                url : 'login.php',
                data : 'nick='+unick+'&pass='+upass+'&cokie='+cokie,
                type : 'POST',
                success : function(hasil){
                                if(hasil=="ok")
                                {
                                document.location="index.php";
                                }
                                else
                                {
                                $("#masuk").html('Masuk');
                                $("#notif").html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button>Nickname atau Password Salah ! </div>');
                                return false;
                                }
                            },
                    });
                    return false;
                });
          
            //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('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button> Anda sudah terdaftar ! </div>');
                            return false;  
                            }
                            else if(hasil=="yes")
                            {
                            $("#dnotif").html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button>Pendaftaran Berhasil, Tunggu Sebentar ! <img src="alihkan.gif"></div>');
                                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">&times;</button> Gagal Mendaftar ! </div>');
                            return false;
                            }
                        },
                });
                return false;
            });
            //load pesan
            function ambilpesan()
            {
                $(".boxpesan").load("ambil.php");
                var con = document.getElementById("boxpesan");
                con.scrollTop = con.scrollHeight;
            }
            setInterval(ambilpesan,1000);
            //load online
            function ol()
            {
            $(".boxonline").load("online.php");  
            }
            setInterval(ol,1000);
            //kirim pesan chat
            $("#formpesan").submit(function()
            {
                var pesan=$(".input-xlarge").val();
                $.ajax({
                    url : 'kirim.php',
                    type : 'POST',
                    data : 'pesan='+pesan,
                    success : function(pesan)
                    {
                        // html5 DOM audio play
                        var suara=document.getElementById("suara");
                        suara.play();
                        if(pesan=="terkirim")
                        {
                            $(".input-xlarge").val("");
                        }
                        else
                        {
                            return false;
                        }
                    },
                    });
                return false;
          
            });
            //hide html audio
            var audio=$('#suara');
            audio.hide();
            //load pesan chat
            function ambilpesan()
            {
                $("#boxpesan").load("ambil.php");
                var con = document.getElementById("boxpesan");
                con.scrollTop = con.scrollHeight;
            }
            setInterval(ambilpesan,1000);
            //load emoticon
            $("#emot").popover({
            html: true,
            content: function(){
            // emoticon from www.animated-gifs.eu
            return "<img src='../nge_chat/emot/akasmaran.gif' title='[kasmaran]' onClick=\"addemot('[kasmaran]')\">"+
            "<img src='../nge_chat/emot/akedip.gif' title='[kedip]' onClick=\"addemot('[kedip]')\">"+
            "<img src='../nge_chat/emot/aketawa.gif' title='[ketawa]' onClick=\"addemot('[ketawa]')\">"+
            "<img src='../nge_chat/emot/amarah.gif' title='[marah]' onClick=\"addemot('[marah]')\">"+
            "<img src='../nge_chat/emot/amelet.gif' title='[melet]' onClick=\"addemot('[melet]')\">"+
            "<img src='../nge_chat/emot/anangis.gif' title='[nangis]' onClick=\"addemot('[nangis]')\">"+
            "<img src='../nge_chat/emot/asakit.gif' title='[sakit]' onClick=\"addemot('[sakit]')\">"+
            "<img src='../nge_chat/emot/bye.gif' title='[bye]' onClick=\"addemot('[bye]')\">"+
            "<img src='../nge_chat/emot/maki-maki.gif' title='[maki-maki]' onClick=\"addemot('[maki-maki]')\">"+
            "<img src='../nge_chat/emot/marah.gif' title='[cmarah]' onClick=\"addemot('[cmarah]')\">"+
            "<img src='../nge_chat/emot/murung.gif' title='[cmurung]' onClick=\"addemot('[cmurung]')\">"+
            "<img src='../nge_chat/emot/nangis.gif' title='[cnangis]' onClick=\"addemot('[cnangis]')\">"+
            "<img src='../nge_chat/emot/sedih.gif' title='[csedih]' onClick=\"addemot('[csedih]')\">"+
            "<img src='../nge_chat/emot/smile.gif' title='[csenyum]' onClick=\"addemot('[csenyum]')\">"+
            "<img src='../nge_chat/emot/bonus.png' title='[bonus]' onClick=\"addemot('[bonus]')\">";
            }
            });
          
          
});
// function add emot to chat form
function addemot(emot)
{
    document.forms[0].pesan.value+=" "+emot;
}
  • Setelah semua nya sudah selesai jangan lupa buat css nya dengan nama file style_sesudah.css

    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;
    }
Setelah semua sudah dibuat steep by steep, maka tampilan nya menjadi seperti gambar dibawah:
Download source code lengkapnya Disini (password: syntax404.tk).
Jangan Lupa Share dan dipelajari semua script diatas sudah ada penjelasan nya didalan script tersebut.
  • Thanks to allah
  • Thanks to jagocoding.com
Saya akhiri artikel tutorial ini semoga bermanfaat buat para pengunjung setia syntax404 sukses selalu ya Terima Kasih sudah membaca :)

Label:

BlogPemrogramanTutorialWeb Design
Disclaimer: Gambar dan video artikel pada website ini terkadang berasal dari berbagai sumber media lain. Hak cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami disini.
Ilmu Informatika

Tentang Penulis Nama Saya M. Iqbal Yazi. Saya hanya seorang lulusan SMK. Saya mempunyai hobi sebagai penulis artikel blog tentang tutorial IT jaman now kalau ada yang ingin di pertanyakan silahkan inbox ke email pribadi saya iqbalyazi25@gmail.com atau bisa melalui Contact us disini.

Delivered by FeedBurner

2 comments

Berkomentarlah Dengan Baik!
EmoticonEmoticon