Belajar membuat Form login dengan PHP dan MySQL

11:56 AM
3 comments

Form login akan sangat perlukan  pada situs website. Jika kita hanya menginginkan orang-orang tertentu yang bisa melihat bahkan merubah konten pada website, atau istilahnya admin. Ini merupakan salah satu cara yang baik untuk menjaga data kita aman dari orang-orang yang tidak dikehendaki.

Silahkan Download Script Form login with PHP dan Mysql


Langkah Cara Membuat Form Login Menggunakan PHP dan MySQL

Langkah 1: Membuat Tabel MySQL User/Pengguna

membuat database (DB) dan tabel, jalankan Code berikut di software MySQL , bisa menggunakan phpMyAdmin  

  Script MySql:

-- phpMyAdmin SQL Dump
-- version 4.7.3
-- https://www.phpmyadmin.net/
--
-- Host: localhost:3306
-- Generation Time: 09 Des 2017 pada 20.32
-- Versi Server: 5.6.38
-- PHP Version: 5.6.30

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: `introver_masa`
--

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

--
-- Struktur dari tabel `user`
--

CREATE TABLE `user` (
  `foto` varchar(100) CHARACTER SET latin1 NOT NULL,
  `saldo` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_swedish_ci NOT NULL,
  `id_user` int(11) NOT NULL,
  `username` varchar(100) COLLATE utf8_swedish_ci NOT NULL,
  `password` varchar(100) COLLATE utf8_swedish_ci NOT NULL,
  `nama` varchar(100) COLLATE utf8_swedish_ci NOT NULL,
  `level` enum('ADMIN','Member') COLLATE utf8_swedish_ci NOT NULL,
  `Masa` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_swedish_ci NOT NULL,
  `uplink` varchar(100) COLLATE utf8_swedish_ci NOT NULL,
  `fbid` varchar(100) COLLATE utf8_swedish_ci NOT NULL,
  `datetime` varchar(100) CHARACTER SET latin1 NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_swedish_ci;

--
-- Dumping data untuk tabel `user`
--

INSERT INTO `user` (`foto`, `saldo`, `id_user`, `username`, `password`, `nama`, `level`, `Masa`, `uplink`, `fbid`, `datetime`) VALUES
('', '50000', 313, 'Ojan', 'Ojan123', 'Ojan', 'Member', '2', '1ntr0ver7', '', ''),
('', '50000', 326, 'test', 'test', 'test', 'Member', '2', '1ntr0ver7', '', ''),
('https://postimg.org/image/8txn45nth/', '1e20', 304, '1ntr0ver7', 'team', '', 'ADMIN', '', '', '', ''),
('', '50000', 312, 'SSPIOL', 'rafiramndani123', 'Rafi Ramndani', 'Member', '2', '1ntr0ver7', '', ''),
('', '50000', 307, 'edo123', '1ntr0ver7', 'Edo Romadon', 'Member', '2', '1ntr0ver7', '', ''),
('', '50000', 327, 'Zie', 'gans', 'Zie Gans >:(', 'Member', '2', '1ntr0ver7', '', ''),
('', '50000', 319, 'akatsuchan', 'akatsuchan', 'akatsuchan', 'Member', '2', '1ntr0ver7', '', ''),
('', '50000', 320, './r00tCode', 'lupalagi', 'Zakir', 'Member', '2', '1ntr0ver7', '', ''),
('', '50000', 321, 'Zaccheo', 'lupalagi', 'Azis Mutaqin', 'Member', '2', '1ntr0ver7', '', ''),
('', '50000', 322, 'bac0t.jinxx', 'IndonesianDarknet', 'Kaneki Ken', 'Member', '2', '1ntr0ver7', '', ''),
('', '50000', 323, 'halah@gmail.com', 'halah123', 'saha we', 'Member', '2', '1ntr0ver7', '', ''),
('', '50000', 324, 'xlo_id', 'xlo.id404', 'xlon3ly', 'Member', '2', '1ntr0ver7', '', ''),
('', '50000', 325, 'x1x1pezo1x1x', '123456789m', 'pezo pezoo', 'Member', '2', '1ntr0ver7', '', '');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `user`
--
ALTER TABLE `user`
  ADD PRIMARY KEY (`id_user`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `user`
--
ALTER TABLE `user`
  MODIFY `id_user` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=328;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 */;

Langkah 2: Membuat Form Login PHP

skrip ini kita membuat form tempat untuk memasukkan username dan password.  Simpan skrip berikut dalam file dengan nama login.php

  Script login:

<?php
// Script by Zie

session_start();
if(isset($_SESSION['username'])) {
header('location:/'); }
require_once("koneksi.php");
?>

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Tools & Exploiter Online by 1ntr0ver7">
        <meta name="author" content="Aditya Mahendra">

        <link rel="shortcut icon" href="landing/images/favicon.ico">

    <title>Login - Tools - 1NTR0VER7</title>

    <!-- GLOBAL STYLES -->
    <link href="css/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel="stylesheet" type="text/css">
    <link href="icons/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <!-- PAGE LEVEL PLUGIN STYLES -->

    <!-- THEME STYLES -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/plugins.css" rel="stylesheet">

    <!-- THEME DEMO STYLES -->
    <link href="css/demo.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

</head>

<body class="login">

    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="login-banner text-center">
                    <h1><i class="fa fa-skuls"></i>Tools   1NTR0VER7</h1>
                   
                </div>
                <div class="portlet portlet-blue">
                    <div class="portlet-heading login-heading">
                        <div class="portlet-title">
                            <h4><strong>Login Kaca - Tools - 1NTR0VER7</strong>
                            </h4>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="portlet-body">
<?PHP
    if (isset($_SERVER['HTTP_REFERER'])){
    if (isset($_GET['pesan'])){
    $pesan = $_GET['pesan'];
    $isi = $_GET['isi'];
    if ($pesan == 1){
    echo "
    <div class='alert alert-danger'>
    <a class='close' data-dismiss='alert'>×</a>
    <strong>Gagal!</strong> $isi.
    </div><br />
    ";
    }
    if ($pesan == 2){
    echo "
    <div class='alert alert-success'>
    <a class='close' data-dismiss='alert'>×</a>
    <strong>Sukses!</strong> $isi.
    </div><br />
    ";
    }
    }
    }
    ?>
                        <form accept-charset="UTF-8" role="form" action="loginact.php" method="post">
                            <fieldset>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Username" name="username" id="username" type="text">
                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Password" name="password" id="password" type="password">
                                </div>
                                <br>
                                <button type="submit" class="btn btn-lg btn-blue btn-block">Login</button>
                                <br>
                            </fieldset>
                        </form>
<br />


    <!-- GLOBAL SCRIPTS -->
    <script src="js/jquery.min.js"></script>
    <script src="js/plugins/bootstrap/bootstrap.min.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <!-- HISRC Retina Images -->
    <script src="js/plugins/hisrc/hisrc.js"></script>

    <!-- PAGE LEVEL PLUGIN SCRIPTS -->

    <!-- THEME SCRIPTS -->
    <script src="js/flex.js"></script>


</body>


</html>

Langkah 3: Membuat Index PHP

Index berguna agar setelah user melakukan login dan akan dibawa ke halaman index oleh server melalui script php yang kita buat . maka buatlah File bernama index.php

  Script index:

<?php
// Script by Zie

session_start();
if(!isset($_SESSION['username'])) {
header('location:login.php'); }
else { $username = $_SESSION['username']; }
require_once("koneksi.php");

$query = mysql_query("SELECT * FROM user WHERE username = '$username'");
$get = mysql_fetch_array($query);

$user = mysql_query("SELECT * FROM user");
$transaksi = mysql_query("SELECT * FROM historyall");
$totaluser = mysql_num_rows($user);
$totaltransaksi = mysql_num_rows($transaksi);

$nama = $get['nama'];
$level = $get['level'];
$uplink = $get['uplink'];
$Masa = $get['Masa'];
$foto = $get['foto'];
?>

<!DOCTYPE html>
<html lang="en">


<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Auto Visitor">
        <meta name="author" content="Aditya Mahendra">

        <link rel="shortcut icon" href="https://1ntr0ver7.id/LOGO.png">

    <title>Home - Tools  1NTR0VER7</title>

    <!-- PACE LOAD BAR PLUGIN - This creates the subtle load bar effect at the top of the page. -->
    <link href="css/plugins/pace/pace.css" rel="stylesheet">
    <script src="js/plugins/pace/pace.js"></script>

    <!-- GLOBAL STYLES - Include these on every page. -->
    <link href="css/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel="stylesheet" type="text/css">
    <link href="icons/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <!-- PAGE LEVEL PLUGIN STYLES -->

    <!-- THEME STYLES - Include these on every page. -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/plugins.css" rel="stylesheet">

    <!-- THEME DEMO STYLES - Use these styles for reference if needed. Otherwise they can be deleted. -->
    <link href="css/demo.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="wrapper">

        <!-- begin TOP NAVIGATION -->
        <nav class="navbar-top" role="navigation">

            <!-- begin BRAND HEADING -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".sidebar-collapse">
                    <i class="fa fa-bars"></i> Menu
                </button>
                <div class="navbar-brand">
                    <a href="/">
                        <span style="color:white;">Tools - 1NTR0VER7</span>
                    </a>
                </div>
            </div>
            <!-- end BRAND HEADING -->

            <div class="nav-top">

                <!-- begin LEFT SIDE WIDGETS -->
                <ul class="nav navbar-left">
                    <li class="tooltip-sidebar-toggle">
                        <a href="#" id="sidebar-toggle" data-toggle="tooltip" data-placement="right" title="Sidebar Toggle">
                            <i class="fa fa-bars"></i>
                        </a>
                    </li>
                    <!-- You may add more widgets here using <li> -->
                </ul>
                <!-- end LEFT SIDE WIDGETS -->

                <!-- begin MESSAGES/ALERTS/TASKS/USER ACTIONS DROPDOWNS -->
                <ul class="nav navbar-right">

                    <!-- begin USER ACTIONS DROPDOWN -->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-user"></i>  <?php echo $nama ?><i class="fa fa-caret-down"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="profile.html">
                                    <i class="fa fa-user"></i> Username : <?php echo $username ?>
                                </a>
                            </li>
                            <li>
                                <a href="mailbox.html">
                                    <i class="fa fa-shield"></i> Level : <?php echo $level ?>
                                </a>
                            </li>
                            <li>
                                <a class="logout_open" href="#logout">
                                    <i class="fa fa-sign-out"></i> Logout
                                </a>
                            </li>
                        </ul>
                        <!-- /.dropdown-menu -->
                    </li>
                    <!-- /.dropdown -->
                    <!-- end USER ACTIONS DROPDOWN -->

                </ul>
                <!-- /.nav -->
                <!-- end MESSAGES/ALERTS/TASKS/USER ACTIONS DROPDOWNS -->

            </div>
            <!-- /.nav-top -->
        </nav>
        <!-- /.navbar-top -->
        <!-- end TOP NAVIGATION -->

        <!-- begin SIDE NAVIGATION -->
        <nav class="navbar-side" role="navigation">
            <div class="navbar-collapse sidebar-collapse collapse">
                <ul id="side" class="nav navbar-nav side-nav">
                    <!-- begin SIDE NAV USER PANEL -->
                    <li class="side-user hidden-xs">
                        <img class="img-circle" src="https://tools.1ntr0ver7.id/profile-pic.png">
                        <p class="welcome">
                            <i class="fa fa-user"></i> <?php echo $username ?>
                        </p>
                        <p class="name tooltip-sidebar-logout">
                            <span class="last-name"><?php echo $nama ?></span> <a style="color: inherit" class="logout_open" href="#logout" data-toggle="tooltip" data-placement="top" title="Logout"><i class="fa fa-sign-out"></i></a>
                        </p>
                        <div class="clearfix"></div>
                    </li>
                    <!-- end SIDE NAV USER PANEL -->
                    <!-- begin DASHBOARD LINK -->
                    <li>
                        <a href="/">
                            <i class="fa fa-home"></i> Home
                        </a>
                    </li>
                   <li>
                        <a href="aksesfile">
                            <i class="fa fa-home"></i> tools yang dibuat
                        </a>
                    </li>
                        <li>                  
                </ul>
                <!-- /.side-nav -->
            </div>
            <!-- /.navbar-collapse -->
        </nav>
        <!-- /.navbar-side -->
        <!-- end SIDE NAVIGATION -->

        <!-- begin MAIN PAGE CONTENT -->
        <div id="page-wrapper">

            <div class="page-content">
<br />
                <div class="row">

<div class="alert alert-warning">
<marquee>
<?php
$hariini = date("Y-m-d");
$i=0;

$tampil = mysql_query("SELECT * FROM historyall WHERE tanggal = '$hariini' ORDER BY id DESC");
$data = mysql_num_rows($tampil);

if ($data == 0) {
echo "<b>Welcome , Gunakan waktu sebaik mungkin ( ".$hariini." )</b> ";
} else {


while($data = mysql_fetch_array($tampil))
 {
 $i++;

echo " <b>( ".$data[tanggal]." )</b> <i>".$data[pembeli]."</i> telah melakukan pembelian ".$data[barang]." ~ ";
}
}
?>
</marquee>
</div>
                <!-- end CIRCLE TILES -->


                <div class="row">

                    <div class="col-lg-8">
                        <div class="portlet portlet-blue" id="konten">
                            <div class="portlet-heading">
                                <div class="portlet-title">
                                    <h4>NOTICE!!!</h4>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="portlet-body">
                            <h4>Tools 1ntr0ver7 telah membuat aplikasi untuk android <a href="http://yoineer.com/hz7" target="_blank"> klik disini untuk download </a></h4><br>
                            </div>
                        </div>
                    </div>
                    <!-- /.col-lg-8 -->

                    <div class="col-lg-4">
                        <div class="portlet portlet-green">
                            <div class="portlet-heading">
                                <div class="portlet-title">
                                    <h4>Result Box</h4>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="portlet-body" id="result">
Laporan hasil Orderan Kamu ada disini...
                            </div>
                        </div>
                    </div>
                    <!-- /.col-lg-4 -->

                </div>
                <!-- /.row -->

            </div>
            <!-- /.page-content -->

        </div>
        <!-- /#page-wrapper -->
        <!-- end MAIN PAGE CONTENT -->

    </div>
    <!-- /#wrapper -->

    <!-- GLOBAL SCRIPTS -->
    <script src="js/jquery.min.js"></script>
    <script src="js/plugins/bootstrap/bootstrap.min.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/plugins/popupoverlay/jquery.popupoverlay.js"></script>
    <script src="js/plugins/popupoverlay/defaults.js"></script>
    <!-- Logout Notification Box -->
    <div id="logout">
        <div class="logout-message">
            <img class="img-circle img-logout" src="https://tools.1ntr0ver7.id/profile-pic.png" alt="">
            <h3>
                <i class="fa fa-sign-out text-green"></i> Yakin ingin Logout?
            </h3>
            <p>Klik Logout jika yakin, jika tidak klik Kembali.</p>
            <ul class="list-in
           
            ">
                <li>
                    <a href="logout.php" class="btn btn-red">
                        <strong>Logout</strong>
                    </a>
                </li>
                <li>
                    <button class="logout_close btn btn-green">Kembali</button>
                </li>
            </ul>
        </div>
    </div>
    <!-- /#logout -->
    <!-- Logout Notification jQuery -->
    <script src="js/plugins/popupoverlay/logout.js"></script>
    <!-- HISRC Retina Images -->
    <script src="js/plugins/hisrc/hisrc.js"></script>

    <!-- PAGE LEVEL PLUGIN SCRIPTS -->

    <!-- THEME SCRIPTS -->
    <script src="js/flex.js"></script>

<script>
// Script by Sebastian Wirajaya

function buka(nama) {
$("#konten").html('<div class="portlet-heading"><div class="portlet-title"><h4>Loading konten...</h4></div><div class="clearfix"></div></div><div class="portlet-body"><div class="progress progress-striped active"><div class="progress-bar progress-bar-info" style="width: 100%"></div></div></div>');
    $.ajax({
        url    : nama+'.php',
        type    : 'GET',
        dataType: 'html',
        success    : function(isi){
            $("#konten").html(isi);
        },
    });
}

function post(){
    $('#result').html('<div class="progress progress-striped active"><div class="progress-bar progress-bar-inverse" style="width: 100%"></div></div>');
    $("input").attr("disabled", "disabled");
    $("select").attr("disabled", "disabled");
    $("button").attr("disabled", "disabled");
    $("textarea").attr("disabled", "disabled");
}
function hasil(){
    $("input").removeAttr("disabled");
    $("select").removeAttr("disabled");

    $("button").removeAttr("disabled");
    $("textarea").removeAttr("disabled");
}
</script>
</body></html>

Langkah 4: Membuat logout PHP

logout adalah dimana kita keluar dari halaman index website . maka buatlah file bernama logout.php

  Script logout:

<?php
session_start();
unset($_SESSION['username']);
     header("location:login.php?pesan=2&isi=Anda berhasil logout. Silahkan login kembali untuk menggunakan fitur.");
?>

Langkah 5: Membuat loginact PHP

buatlah file bernama loginact.php

  Script loginact:

<?php
// Script by Zie
session_start();
require_once("koneksi.php");
$username = mysql_real_escape_string($_POST['username']);
$pass = $_POST['password'];
$cekuser = mysql_query("SELECT * FROM user WHERE username = '$username'");
$jumlah = mysql_num_rows($cekuser);
$hasil = mysql_fetch_array($cekuser);
if($jumlah == 0) {
   header("location:login.php?pesan=1&isi=Username : $username belum terdaftar.");
} else {
   if($pass <> $hasil['password']) {
     header("location:login.php?pesan=1&isi=Password yang anda masukkan salah.");
   } else {
     $_SESSION['username'] = $hasil['username'];
     header('location:/');
   }
}
?>

Langkah 6: Membuat Koneksi antara PHP & MySql

buatlah file bernama koneksi.php

  Script koneksi:

<?php
// Script by Zie

$host = "localhost";
$user = "introver_masa";
$pass ="introver_masa";
$db = "introver_masa";
$konek = mysql_connect($host, $user, $pass) or die ('Koneksi Gagal! ');
mysql_select_db($db);
?>

3 comments:

  1. Martin12:02 PM

    Begitu indah dilihat begitu susah untuk di kerjakan :)

    ReplyDelete
    Replies
    1. Techhinfocom12:09 PM

      Terima Kasih Atas kunjungan dan comment nya
      Nah benar itu,tapi yang terpenting itu didirikita harus di awali dengan niat.

      Delete
  2. Dzaki Ahmad7:43 PM

    belom paham, kodenya taro dimana

    ReplyDelete

Created By Sora Templates & Free Blogger Templates