RZDev: Belajar Programming!

Untuk membuat sistem login dengan multi level user, pertama - tama kita harus membuat database SQL nya.

-- phpMyAdmin SQL Dump
-- version 4.7.0
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Feb 05, 2018 at 06:30 AM
-- Server version: 10.1.25-MariaDB
-- PHP Version: 5.6.31

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";

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

--
-- Database: `final`
--

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

--
-- Table structure for table `pengguna`
--

CREATE TABLE `pengguna` (
`id_pengguna` int(4) NOT NULL,
`username` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL,
`peran` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `pengguna`
--

INSERT INTO `pengguna` (`id_pengguna`, `username`, `password`, `peran`) VALUES
(1, 'admin', '21232f297a57a5a743894a0e4a801fc3', 'admin'),
(2, 'rezkycpp', '2c7ef4281d0d5aaf23b436d3fb36ff0f', 'member');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `pengguna`
--
ALTER TABLE `pengguna`
ADD PRIMARY KEY (`id_pengguna`),
ADD UNIQUE KEY `username` (`username`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `pengguna`
--
ALTER TABLE `pengguna`
MODIFY `id_pengguna` int(4) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;COMMIT;

/*!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 */;

Setelah database dibuat selanjutnya kita membuat connection.php untuk menghubungkan database tadi dengan page loginnya.

<?php

$servername = "localhost";
$username    = "root";
$password    = "";
$db          = "final";

$conn = new mysqli($servername, $username, $password, $db);

if ($conn->connect_error) {
    die("Database belum terhubung : " . $conn->connect_error);
}

?>

Untuk servername bisa kalian isi sesuaikan, begitu pula username dan passwordnya, dan juga nama databasenya bisa kalian sesuaikan sendiri dan save dengan nama connection.php.

Berikutnya kita membuat Session Loginnya.

<?php

$error='';

include "config.php";
if(isset($_POST['submit']))
{
    $username   = $_POST['username'];
    $password   = md5($_POST['password']);


    $query = mysqli_query($conn, "SELECT * FROM pengguna WHERE username='$username' AND password='$password'");
    if(mysqli_num_rows($query) == 0)
    {
        $error = "Username or Password is invalid!";
    }
    else
    {
        $row = mysqli_fetch_assoc($query);
        $_SESSION['username']   = $row['username'];
        $_SESSION['peran']      = $row['peran'];
        $_SESSION['id_pengguna']= $row['id_pengguna'];

        if($row['peran'] == "admin")
        {

            header("Location: admin/index.php");
        }
        else if($row['peran'] == "member")
        {
            header("Location: member/index.php");
        }
        else
        {
            $error = "Failed Login, check again!";
        }
    }
}
?>

Save dengan nama login.php, jika sudah lanjut kita akan membuat indexnya atau tampilan dari loginnya.

<?php
session_start();
if($_SESSION){
    if($_SESSION['peran']=="admin")
    {
        header("Location: admin/index.php");
    }
    if($_SESSION['peran']=="member")
    {
        header("Location: member/index.php");
    }
}

include('login.php');
?>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>LOGIN PAGE</title>

        
        <link href="src/css/bootstrap.min.css" rel="stylesheet">
        <link rel="icon" href="src/icon/favicon.ico">
        <style>
            body {
                background-image: url(src/img/login.jpg);
                background-position: center;
                background-repeat: no-repeat;
            }

            .row {
                margin: 100px auto;
                width: 300px;
                text-align: center;
            }

            .login {
                background-color: #fff;
                padding: 20px;
                margin-top: 20px;
            }

        </style>
        
    </head>

    <body>
        <div class="container">

            <div class="row">

                <div class="login">
                    <h2>Login first!</h2>
                    <?php
               /*if(isset($_POST['login'])){
                   include("config.php");

                   $username   = $_POST['username'];
                   $password   = md5($_POST['password']);

                   $query = mysqli_query($conn, "SELECT * FROM pengguna WHERE username='$username' AND password='$password'");
                   if(mysqli_num_rows($query) == 0){
                       echo '<div class="alert alert-danger">Upss...!!! Login gagal.</div>';
                   }else{
                       $row = mysqli_fetch_assoc($query);

                       if($row['peran'] == 'admin' && $peran == 'admin'){
                           $_SESSION['username']=$username;
                           $_SESSION['peran']='admin';
                           header("Location: ../admin/index.php");
                       }else if($row['peran'] == 'member' && $peran == 'member'){
                           $_SESSION['username']=$username;
                           $_SESSION['peran']='member';
                           header("Location: ../member/index.php");
                       }else{
                           echo '<div class="alert alert-danger">Upss...!!! Login gagal.</div>';
                       }
                   }
               }*/
               ?>

                        <form role="form" action="" method="post">
                            <div class="form-group">
                                <input type="text" name="username" class="form-control" id="username" placeholder="Username" required autofocus />
                            </div>
                            <div class="form-group">
                                <input type="password" name="password" class="form-control" id="password" placeholder="Password" required autofocus />
                            </div>
                            
                            <div class="form-group">
                                <input type="submit" name="submit" class="btn btn-primary btn-block" value="Login" />
                            </div>
                            <div class="form-group">
                                <input type="button" name="register" class="btn btn-primary btn-block" value="Register" />
                            </div>
                            <?php echo $error; ?>
                        </form>
                </div>
                Copyright © Kelompok 7 - DPW
            </div>
        </div>

        <script src="src/js/jquery-3.3.1.js"></script>
        <script src="src/js/bootstrap.min.js"></script>
    </body>

    </html>

Kode diatas save dengan nama index.php dan jangan lupa saya disini menggunakan framework bootstrap kalian harus download sendiri ya.

Kemudian buat 2 folder baru admin dan user seperti gambar dibawah ini ...

Kemudian dimasing - masing folder kalian buat lagi 3 file yaitu index.php, config.php dan cek_admin.php / cek_user.php. Gunanya adalah agar ketika login sebagai admin kalian akan dilempar kedalam page khusus admin begitu pula jika kalian login sebagai user biasa kalian akan dilempar ke halaman user biasa.

config.php sama saja buat di folder user dan admin

<?php

$conn=mysqli_connect("localhost","root","","final")or die("Can't Connect...");

?>

cek_admin.php

<?php
session_start();

//cek apakah user sudah login
if(!isset($_SESSION['username'])){
die("Anda belum login");//
}
//cek level user
if($_SESSION['peran']!="admin")
{
die("Anda bukan admin");
}
?>

cek_member.php

<?php
session_start();

//cek apakah user sudah login
if(!isset($_SESSION['username'])){
die("Anda belum login");//
}

//cek level user
if($_SESSION['peran']!="member")
{
die("Anda bukan member, reg first!");
}

?>

index.php untuk indexnya kalian bisa sesuaikan saja

<!DOCTYPE html>
<html>
<head>
<title>INI PAGE ADMIN/USER</title>
</head>
<body>
<p> SELAMAT DATANG ADMIN/USER </p>
</body>
</html>

Setelah semuanya selesai, coba jalankan dan coba login menggunakan kedua usernya yang sudah dibuat tadi...

Admin :
username : admin | password : admin
User :
username : rezkycpp | password : rezkycpp

Sekian dan terima kasih, semoga bermanfaat !!!

rezky Monday, February 05, 2018 New Google SEO Purwokerto, Indonesia

Membuat Sistem Login Multi Level User dengan PHP, Bootstrap dan Database MySQL

Posted by RZDev: Belajar Programming! on Monday, February 5, 2018

Contoh Project Arduino Uno Sederhana + Rangkaian Fritzing (Light Alarm)

Posted by RZDev: Belajar Programming! on Tuesday, January 16, 2018

Presentasi Tentang Operasi Sistem BlackBerry

Posted by RZDev: Belajar Programming! on Monday, January 15, 2018

Cara Mudah Membuat Form Sederhana di HTML 5

Berikut beberapa input type yang sering digunakan di HTML 5

Berikut syntaxnya, semoga bermanfaat dan lancar buat tugasnya

<!DOCTYPE html>


<html>

<head>
    <meta charset="UTF-8">
    <title>Latihan web desain</title>
</head>

<body>
    <h1> New HTML5 Input types Demo</h1>
    <p>This form demonstrates the new HTML5 input types and the placeholder, required and autofocus attributes
    </p>

    <form method="post" action="http://www.deitel.com">
        <p>
            <label>Color:
        <input type = "color" autofocus />
            (Hexadecimal code such as #ffffff)
        </label>
        </p>

        <p>
            <label>Date:
        <input type ="date" />
            (yyyy-mm-dd)
        </label>
        </p>

        <p>
            <label>Datetime-local:
        <input type = "datetime-local"/>
            (yyyy-mm-ddThh:mm+ff:gg, such as 2012-01-27T03:15)
        </label>
        </p>

        <p>
            <label>Email:
        <input type ="email" placeholder ="nama@domain.com" required />
        (nama@domain.com)
        </label>
        </p>

        <p>
            <label>Month:
        <input type ="month" /> (yyyy-mm)
        </label>
        </p>

        <p>
            <label>Number:
        <input type = "number"
               sin ="0"
               max ="7"
               step="1"
               value="4"/>
        </label> (enter a number between 0 and 7)
        </p>

        <p>
            <label>Range: 0
            <input type = "range"
                min = "0"
                max = "20"
                value = "10"/> 20
        </label>
        </p>

        <p>
            <label>Search:
        <input type = "search" placeholder = "search query"/>
        </label> (enter your search query here.
        </p>

        <p>
            <label>Tel:
        <input type = "tel" placeholder = "(###) ###-####" pattern = "$\d{3}$+\d{3}-\d{4}" required />
        (###) ###-####
        </label>
        </p>

        <p>
            <label>Time:
        <input type = "time" /> (hh:mm:ss.ff)
        </label>
        </p>

        <p>
            <label>URL:
        <input type = "url" placeholder = "http://www.domainname.com" />
            (http://www.domainname.com)
        </label>
        </p>

        <p>
            <label>Week:
        <input type = "week" />
        (yyyy-Wnn, such as 2012-W01)
        </label>
        </p>

        <p>
            <input type="submit" value="Submit" />
            <input type="reset" value="Clear" />
        </p>
    </form>
</body>

</html>

rezky Saturday, January 13, 2018 New Google SEO Purwokerto, Indonesia

Berikut Beberapa Input Type yang ada di HTML 5

Posted by RZDev: Belajar Programming! on Saturday, January 13, 2018

Struktur Dasar HTML 5

Recursion Faktorial Javascript

Posted by RZDev: Belajar Programming! on Friday, December 1, 2017

Berikut script javascriptnya, semoga dapat membantu, jika ada yang kurang paham bisa tanyakan langsung ke saya atau kotak komentar dibawah ini.

<!DOCTYPE html>
<html>
<head>
   <title>Random Number Generator</title>
   <style type="text/css">
       ul { margin: 10px; }
       li {display: inline; margin-right: 10px; }
   </style>

   <script type="text/javascript">
       //variables used to interact with the img elements
       var die1image;
       var die2image;
       //register button listener and get the img elements
       function start(){

           var button = document.getElementById("rollButton");

           button.addEventListener("click", rollDice);

           die1image = document.getElementById("die1");
           die2image = document.getElementById("die2");
       }

       //roll the dice
       function rollDice (){
var gambar1 = getNum();
var gambar2 = getNum();
           setImage(die1image,gambar1);
           setImage(die2image,gambar2);
var total = parseInt(gambar1) + parseInt(gambar2);

           if (total<5){
       document.getElementById("total").innerHTML = "Total : " + total + ", maaf anda kalah.";
           //window.alert("Total : " + total + ", maaf anda kalah.");
       }else{
           document.getElementById("total").innerHTML = "Total : " + total + ", selamat anda menang.";
       }
}

   function getNum(){
return Math.floor(1 + Math.random() * 6 );
}
       //set image source
       function setImage(dieImg,nomer){
           //var dieValue = Math.floor(1 + Math.random() * 6 );
           dieImg.setAttribute ("src", "image/" + nomer + ".jpg");
           dieImg.setAttribute ("alt", "die image with " + nomer + " spots");
   }

       window.addEventListener("load", start, false);
   </script>
</head>
<body>
   <form>
       <input type="button" id="rollButton" value="Roll Dice">
   </form>
   <ul>
       <li>
           <img id="die1" src="image/1.png" alt="blank png" width="50px" height="50px">
           <img id="die2" src="image/1.png" alt="blank png" width="50px" height="50px">
       </li>
   </ul>
   <p id="total">Total : 0, tekan tombol untuk memulai</p>
</body>
</html>

rezky Friday, December 01, 2017 New Google SEO Purwokerto, Indonesia