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

    Sunday, 23 October 2016

    Cara Membuat Aplikasi Android Sederhana Tanpa Harus Coding

    Assalammualaikum wr.wb Hallo apakabar semua pengunjung setia Syntax404 saya pastikan sehat selalu ya hehehe. Kali ini saya akan share sedikit ilmu yang takseberapa ini sesuai judul diatas saya inigin berbagi tutorial tengan "Cara Membuat Aplikasi Android Sederhana Tanpa Harus Coding" langsung aja kita ke tutorialnya cekidot hehehe.
    Cara Membuat Aplikasi Android Sederhana Tanpa Harus Coding


    1. Langsung saja kalian masuk ke websitenya AppsGeyser.
    2. Lalu, klik login dikanan atas, atau bisa juga login with Facebook.
    3. Selanjutnya, pergi ke Dashboard lalu klik "CREATE APP" di pojok sebelah kanan atas.
    Nah sekarang kita coba membuat aplikasi web browser langkah-langkahnya sebagai berikut:
    Lihat gambar dibawah ini kalu sudah selesai:
    https://syntax404.blogspot.co.id/
    • Setelah itu klik tombol next dibawah.
    • Kemudian, anda diminta mengisi App Name kalau saya buat namanya (Browser Syntax404) heheheh, kalau anda terserah anda buat nama app nya.
    • Lalu, isi kolom Description nya sesuai keinginan anda, kalau saya buat isi Descriptionnya (Ini Web Browser saya yang pertama).
    • Setelah itu klik Next, lalu pilih icon app anda. Saya nyarik icon di IconFinder.
    • Kemudian klik Next, dan klik Create tunggu beberapa saat.
    • Selesai, Selamat anda dinobati sebagai programer aplikasi android hehehe.
    Klik Download apabila anda ingin memakai aplikasi itu.
    Sekian Tutorial tentang "Cara Membuat Aplikasi Android Sederhana Tanpa Harus Coding" dari saya, saya ucapkan terimakasih atas partisipasi anda untuk mengunjungi Syntax404 wasalammualaikum wr.wb jangan lupa Share dan Bookmark ya :)
    Read more

    Saturday, 22 October 2016

    Pengertian HTML, CSS, PHP, Javascript dan jQuery

    Assalammualaikum wr.wb selamat siang semua pengunjung setia Blog Syntax404 kali ini admin ingin berbagi tentang "Pengertian HTML, CSS, PHP, Javascript dan jQuery" langsung saja kita simak sama sama ya :)
    Pengertian HTML, CSS, PHP, Javascript dan jQuery

    HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).
    Contoh html:
     <html>

        <head>
            <title>Hello</title>
        </head>

        <body>
            <h1>Hallo Sahabat Blog Syntax404</h1>
            <p>Selamat datang visitor Syntax404</p>
        </body>

    </html>



    Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
    Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
    CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

    JavaScript adalah bahasa skrip yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
    JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript.
    Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript.
    JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX. JavaScript adalah bahasa yang digunakan untuk AJAX.

    Hypertext Preprocessor (PHP) adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.
    Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dari web.
    Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi sumber terbuka, maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP.
    Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.
    Contoh Tag php:
    <?php
    echo ("Selamt datang di blog syntax404");
    ?>

    jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah MIT dan GPL.
    jQuery merupakan sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuery dirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. Sesuai slogan nya, write less, do more. Menulis kode lebih sedikit, tetapi melakukan pekerjaan lebih banyak.

    jQuery ukurannya cukup kecil, sehingga tidak memperlambat proses loading blog yang kita buat. jQuery juga kompatibel dengan CSS3 dan yang tak kalah penting adalah jQuery bisa berjalan di semua browser – cross browser.
    Tanpa library seperti jQuery, menerapkan Javascript mungkin akan lebih sulit, terutama untuk pemula yang baru belajar Javascript. Plugin tambahan seperti JQuery UI (User Interface) semakin memudahkan kita mengembangkan blog yang cantik dan interaktif. Selain itu tersedia plugin-plugin lain yang semakin memperkaya kemampuan jQuery.

    Sekian itu saja yang bisa saya ketahui tentang Pengertian HTML, CSS, PHP, Javascript dan jQuery lebih dan kurang mohon dimaafkan bila ada yang mau ditanyakan silahkan comment di bawah Terimakasih saya ucapkan atas partisipasi anda untuk mengunjungi Syntax404 .
    Read more

    Wednesday, 12 October 2016

    Cara Mudah Aktivasi Windows7 All Version Menjadi Asli Genuine (99,9%)

    Hallo apa kabar pengunjung setia blog syntax404 saya harap baik baik saja ya hehehe. Kali ini Syntax404. Kali ini saya akan mengasih sedikit trik dan Tutorial mengenai Cara Mudah Aktivasi Windows7 All Version Menjadi Asli Genuine (99,9%) dimana ada tulisan 99,9% itu artinya kemungkinan ada yang tidak berhasil namanya juga free ada yang berhasil dan ada juga yang tidak hehehe. Ada kalanya kita baca dulu ulasan ulasan lengkapnya dibawah ya.

    Cara Mudah Aktivasi Windows7 All Version Menjadi Asli Genuine (99,9%)

    • Fitur yang disediakan:
      • bekerja pada 32-bit dan 64-bit sistem.
      • Ini kompatibel dengan Windows 7 SP1 dan semua sistem update 
      • Ini kompatibel dengan semua bahasa sistem. 
      • Hal ini dapat digunakan untuk pra-mengaktifkan Windows. 
      • Hal ini memungkinkan Anda untuk menginstal informasi OEM kustom 
      • Ini fitur integritas aplikasi memeriksa .
      • Ini mendukung partisi tersembunyi dan satu pengaturan yang kompleks. 
      • ini dapat bekerja bersama Linux GRUB atau boot manager lain .
      • Ia bekerja dengan VMware, VirtualBox dan Hyper-V .
      • Ia bekerja dengan sebagian enkripsi hard drive perangkat lunak misalnya TrueCrypt atau BitLocker .
      • Hal ini memungkinkan Anda untuk menambahkan sertifikat dan serial Anda sendiri eksternal .
      • Ini akan menginstal hanya sertifikat dan serial untuk pengguna dengan SLIC ada .
      • Ini fitur sistem profiling otomatis (Aplikasi ini cocok semuanya untuk Anda) .
      • Ini tidak akan mengubah file sistem apapun .
      • Ini berjalan sebelum Windows diluncurkan. 
      • ada proses ekstra dijalankan sehingga Anda telah ada makan di RAM Anda .
      • Semua bagian penting dari windows loader akan dienkripsi dengan enkripsi default .
      • Setiap pengguna memiliki versi unik dari windows loader yang diinstal pada sistem-nya.


    • OS yang didukung:
      • Windows 7 Ultimate
      • Windows 7 Ultimate E
      • Windows 7 Professional
      • Windows 7 Professional E
      • Windows 7 Home Premium
      • Windows 7 Home Premium E
      • Windows 7 Home Basic
      • Windows 7 Starter
      • Windows 7 Starter E
      • Windows Vista Ultimate
      • Windows Vista Business
      • Windows Vista Business N
      • Windows Vista Home Premium
      • Windows Vista Home Basic
      • Windows Vista Home Basic N
      • Windows Vista Starter
      • Windows Server 2008 Enterprise
      • Windows Server 2008 Enterprise (Without Hyper-V)
      • Windows Server 2008 Foundation
      • Windows Server 2008 Standard
      • Windows Small Business Server 2008
      • Windows Storage Server 2008 Standard
      • Windows Storage Server 2008 R2 Essentials
      • Windows Server 2008 R2 Enterprise
      • Windows Server 2008 R2 Foundation
      • Windows Server 2008 R2 Standard
      • Windows Server 2008 R2 Datacenter
      • Windows Small Business Server 2011 Standard
      • Windows Small Business Server 2011 Essentials
      • Windows Home Server 2011
      • Windows Server 2012 Standard
      • Windows Server 2012 Essentials
      • Windows Server 2012 Foundation
      • Windows Server 2012 Datacenter
      • Windows Storage Server 2012 Standard
      • Windows Storage Server 2012 Workgroup
      • Windows MultiPoint Server 2012 Standard
      • Windows MultiPoint Server 2012 Premium
      • Windows Server 2012 R2 Standard


    Cara Aktivasi Windows 7 Ultimate Agar Menjadi Genuine :
    Windows Loader V2.2

    1. Seperti biasa Download Windows Loader v2.2
    2. Kemudian ekstarct rar (password rar: syntax404)
    3. Install seperti biasa
    4. Kemudian Reboot/Restart (PC/Laptop)
    5. Selesai
    Jangan lupa di bookmark ya (CTRL+D) dan Subscribe Via Email biar agan bisa dapat artikel yang update dari Blog Syntax404
    Read more