Thursday, 29 December 2016

Cara Membuat Aplikasi Chat Room Sederhana Dengan bootstrap

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 :)
Read more

Tuesday, 13 December 2016

Cara Membuat Sistem Login Multi Level / User menggunakan PHP dan MySQL

Assalammualaikum wr.wb.
Selamat sore semuanya pengunjung setia Syntax404, Saya berharap semua sehat sehat saja hehehe.
Sudah lama juga ya tidak posting artikel maaf ya karna gak sempat sempat lagi sibuk heheeh (sok orang sibuk).
Sesuai dengan judul diatas "Cara Membuat Sistem Login Multi Level / User menggunakan PHP dan MySQL" saya akan sedikit share tentang judul diatas baiklah kita simak sama sama ya.

Pertama-tama anda harus punya webserver (Xampp, apache, dll), bila belum punya bisa download disini
    Buat database dengan nama: dbuser
    Script database:
    -- Database: `dbuser`
    --

    -- --------------------------------------------------------

    --
    -- Table structure for table `tb_login`
    --

    CREATE TABLE IF NOT EXISTS `tb_login` (
    `kode_user` int(11) NOT NULL AUTO_INCREMENT,
    `username` varchar(50) NOT NULL,
    `password` varchar(50) NOT NULL,
    `nama` varchar(50) NOT NULL,
    `level` enum('admin','operator') NOT NULL,
    PRIMARY KEY (`kode_user`)
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

    --
    -- Dumping data for table `tb_login`
    --

    INSERT INTO `tb_login` (`kode_user`, `username`, `password`, `nama`, `level`) VALUES
    (1, 'admin', '81dc9bdb52d04dc20036dbd8313ed055', 'Admin', 'admin'),
    (2, 'User', '81dc9bdb52d04dc20036dbd8313ed055', 'Pengunjung', 'operator');

    /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
    /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
    /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

    Kemudian setelah buat database dan tbl_login maka kita akan membuat file baru dengan nama koneksi.php
    <?php
    $host_name="localhost";
    $user_name="root";
    $password="";
    $database="dbuser";

    mysql_connect($host_name, $user_name, $password);
    mysql_select_db($database);

    ?>
    file koneksi.php berguna untuk mengoneksikan database saat kita memasukkan username dan password yang telah kita buat tadi didatabase.

    Setelah itu buat file baru lagi dengan nama index.php

    <?php
    @session_start(); // memulai session
    include "koneksi.php"; // memanggil koneksi

    if(@$_SESSION['admin'] || @$_SESSION['operator']) { // jika sudah ada session admin atau session operator, maka ke halaman index

    ?>

    <?php

     if(@$_SESSION['admin']) { //apabila sessionnya admin
      $userlogin = @$_SESSION['admin'];

     } else if(@$_SESSION['operator']) { //apabila sessionnya admin
      $userlogin = @$_SESSION['operator'];
     }

     // menuliskan query mysql dimana kode_user = $userlogin
     // yaitu session pada script di atas
     $sql = mysql_query("select * from tb_login where kode_user = '$userlogin'") or die(mysql_error());

     //menjadikan data sebagai arrray
     $data = mysql_fetch_array($sql);
    ?>
         <!--Menampilkan nama berdasarkan
         user yang login atau session-->
    <h1>Selamat Datang <?php echo $data['nama']; ?></h1><br />

    <!--Menuju halaman logout/keluar-->
    <a href="logout.php">Keluar</a>

    <?php
    }else {
      header("location: login.php");
      //jika tidak maka kembali ke halaman login.php

    }
    ?>

    Kemudian buat file baru lagi dengan nama login.php

    <?php 
    @session_start(); // memulai session
    include "koneksi.php"; // memanggil koneksi

    if (@$_SESSION['admin'] || @$_SESSION['operator']) { //apabila session admin ataupun operator sudah ada maka
     // langsung menuju kehalaman index.php
        header("location: index.php");
        //jika tidak ada
    } else {
     // menuju ke halaman login di bawah ini
    ?>

    <html>
        <head>
             <title>Login</title>
        </head>
            <body>
         <h1>LOGIN MULTI USER</h1>
             <table>
                  <form action="proses.php" method="post">
             <tr>
              <td>Username</td>
              <td><input type="text" name="user" /></td>
         </tr>
             <tr>
              <td>Password</td>
              <td><input type="password" name="pass" /></td>
         </tr>
             <tr>
              <td></td>
              <td><input type="submit" value="Masuk" name="login" /></td>
         </tr>
      </form>
     </table>
    </body>
    </html>

    <?php
    }
    ?>

     Kemudian kita buat file logoutnya agar bisa keluar, kita buat file baru lagi dengan nama logout.php

     <?php
    @session_start(); // memulai session

    session_destroy(); // menghancurkan session

    header("location: login.php"); //kembali ke halaman login.php
    ?>

    Setelah semua sudah jadi jangan lupa pula kita membuat file prosesnya agar dapat diproses oleh webserver, mari kita buat file baru dengan nama proses.php
    <?php 
    @session_start(); // memulai session
    include "koneksi.php"; // memanggil koneksi

    ?>

     <?php
            $user = @$_POST['user']; // variabel user untuk user
            $pass = @$_POST['pass']; // variabel pass untuk pass
            $login = @$_POST['login']; // variabel login untuk login
           
            if($login) { // jika login di klik
             if($user == "" || $pass == "" ) { // dan jika text user dan pass masih kosong
        ?>
            <!-- muncul peringatan dari javascript -->
            <script type="text/javascript">alert("Username atau password masih kosong"); window.location.href="login.php"</script> <?php
            }
            //jika tidak kosong
            else {
            // menuliskan query mysql dimana username = '$user' dan password = $ pass yang sudah di beri md5
            $sql = mysql_query("select * from tb_login where username = '$user' and password = md5('$pass') ") or die(mysql_error());
            //menjadikan data sebagai array
            $data = mysql_fetch_array($sql);
            //untuk mendapatkan jumlah baris pada database
            $cek = mysql_num_rows($sql);
            //jika kode user lebih sama dengan 1
            if($cek >= 1) {
             //dan jika levelnya admin
             if($data['level'] == "admin") {
                 @$_SESSION['admin'] = $data['kode_user'];
                  // maka menuju ke halaman index.php
                  header("location: index.php");
                //dan jika levelnya operator
                } else if($data['level'] == "operator") {
                 @$_SESSION['operator'] = $data['kode_user'];
                  // maka menuju ke halaman index.php
                  header("location: index.php");
               }
                //jika tidak
            }else {
               ?>
              <!-- muncul peringatan kalau login gagal dan langsung kembali ke halaman login.php-->
              <script type="text/javascript">alert("Login Gagal ."); window.location.href="login.php"</script> <?php
                }
                }
          }
     ?>

    Jika berhasil maka akan seperti gambar dibawah ini:
    Login Multi User
     catatan penting.
    Admin
    username: admin
    password: 1234
    User
    username: user
    password: 1234

    Anda juga bisa download scriptnya disini biar gak capek ngetik tapi saran saya sih lebih baik ketik sendiri agar dapat dipahami,
    Semoga bermanfaat artikel saya ini, saya akhiri Tutorial ini, Assalammualaikum wr.wb.
    Jangan lupa di bookmark dan coment kalok ada yang error semoga sukses pengunjung semua amin :)
    Read more