Menampilkan Data dari MySQL Dengan PHP - Membuat Form Login dan Registrasi

Bismillahirrohmanirrohim.

Pada artikel ini kita akan membahas tentang Menampilkan data dari MySQL serta membuat Form Register dan Login menggunakan PHP pada aplikasi web Sekolah.

Adapun urutan langkah yang akan kita kelompokan diataranya :
- Buat database
- Membuat Koneksi PHP MySQL
- Membuat File PHP yang di butuhkan

Berikut screen shoot tampilan aplikasi webnya :

Jika ingin melihat demo sebelum praktek silahkan klik link dibawah ini :

Untuk mencoba bisa login langsung dengan:
email : user@gmail.com
password : 12345

Atau mendaftar terlebih dahulu.

Jika butuh soucre code lengkapnya bisa di download di bawah ini :

Oke kita langsung aja PRAKTEK !!

Kita buat dulu database nya dengan nama tutorial-login, buka aplikasi MySQL Administration anda, dalam tutorial ini saya menggunakan phpMyAdmin. Klik menu SQL lalu paste query di bawah ini :

CREATE DATABASE tutorial-login;

Selanjutnya kita akan membuat table dan kita hanya butuh satu table saja yaitu users tapi jika anda ingin merubah namanya boleh-boleh saja, silahkan copy-paste query berikut :

CREATE TABLE users (
    id_user INT(3) AUTO_INCREMENT NOT NULL,
    nama VARCHAR(20) NOT NULL,
    email VARCHAR(20) NOT NULL,
    password VARCHAR(60) NOT NULL,
    PRIMARY KEY (id_user)
);

Membuat Koneksi PHP MySQL
silahkan buat sebuah file baru dengan nama koneksi.php dan ketikklan script berikut ini :

<?php
// konfigurasi database
$host = "localhost";
$user = "root";
$password = "";
$database = "tutorial-login";
// perintah php untuk akses ke database
$koneksi = mysqli_connect($host, $user, $password, $database);
?>

Membuat File Index.php
silahkan buat sebuah file baru dengan nama index.php dan ketikklan script berikut ini :

<?php
require_once "config.php";
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tutorial Login PHP MySQL</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
margin-top: 40px;
}
</style>
</head>
<body>
<div class="container">
<?php if (isset($_SESSION['is_logged'])): ?>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">SMK INDONESIA MAS</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="?page=home">Home <span class="sr-only">(current)</span></a></li>
<li><a href="?page=organisasi">Organisasi</a></li>
<li><a href="?page=galery">Galery</a></li>
<li><a href="?page=kontak">Kontak</a></li>
<li><a href="?page=user">Data User</a></li>
<li><a href="?page=logout">Logout</a></li>
</ul>
</div>
</div>
</nav>
<?php endif ?>
<div class="row">
<?php include_once "pages/" . $page . ".php"; ?>
</div>
<hr>
<div class="row">
<p class="text-center">Copyright © 2017 Atang Wiharto - <a href="https://laptopemas.blogspot.com">Laptop Emas</a></p>
</div>
</div>
</body>
</html>

Membuat File config.php
silahkan buat sebuah file baru dengan nama config.php dan ketikklan script berikut ini :

<?php

$connection = new Mysqli("localhost", "root", "", "tutorial-login");

if (!$connection) {
echo "<h1>Whoops! Koneksi database gagal</h1>";
}

if (isset($_GET['page'])) {
$page = $_GET['page'];
} else {
$page = "home";
}

switch ($page) {
case 'home':
$page = "home";
break;
case 'organisasi':
$page = "organisasi";
break;
case 'galery':
$page = "galery";
break;
case 'user':
$page = "user";
break;
case 'kontak':
$page = "kontak";
break;
case 'login':
$page = "login";
break;
case 'register':
$page = "register";
break;
case 'logout':
$page = "logout";
break;
default:
$page = "home";
break;
}

Membuat File home.php
silahkan buat sebuah file baru dengan nama home.php dan ketikklan script berikut ini :

<?php
if (!isset($_SESSION['is_logged'])) {
echo "
<script>
alert('Login dulu!');
window.location='?page=login';
</script>
";
}
?>

<div class="col-md-12">
<div class="page-header">
<h1 class="text-center">SELAMAT DATANG DI WEB SMK INDONESIAMAS</h1>
</div>
<center>
<body>
<div class="wrapper">
<section class="courses">
<article>
<center>
<hgroup>
<h3>SEJARAH SINGKAT</h3>
<img src="images/Utama.jpg" alt="CbtDomas" width=450 height=200>
</hgroup>
<p>SMK Indonesia Mas diselenggarakan oleh Yayasan Wiraperbangsa Indonesia dengan Surat Keputusan Menteri Hukum dan Hak Asasi Manusia Republik Indonesia Nomor : AHU- 2113.AH.01.04.Tahun 2011 yang berkedudukan di Graha Pratama Permai Blok A2 Nomor 41 Desa Kondang Jaya Kecamatan Karawang Timur Kabupaten Karawang Provinsi Jawa Barat dan telah mendapat ijin operasional melalui SK Bupati Karawang Nomor: 421.3/Kep.246-Huk/2012. NPSN: 20276402, NSS: 402022112195.</p>
</center>
</article>
</section>
</div>
</body>
</div>

Membuat File organisasi.php
silahkan buat sebuah file baru dengan nama organisasi.php dan ketikklan script berikut ini :

Membuat File galery.php
silahkan buat sebuah file baru dengan nama galery.php dan ketikklan script berikut ini :

<?php
if (!isset($_SESSION['is_logged'])) {
echo "
<script>
alert('Login dulu!');
window.location='?page=login';
</script>
";
}
?>

<div class="col-md-12">
<div class="page-header">
<h1 class="text-center">GALERY SMK INDONESIA MAS</h1>
</div>
<center>
<section class="courses">
<article>
<figure>
<center><img src="images/1.jpg" alt="CbtDomas" width=500 height=500>
<figcaption><center>Juara 1 Kepala Sekolah</figcaption>
</figure>
<figure>
<center><img src="images/2.jpg" alt="CbtDomas" width=500 height=500>
<figcaption><center>Juara 3 RobotikS</figcaption>
</figure>
<figure>
<center><img src="images/3.jpg" alt="CbtDomas" width=500 height=500>
<figcaption><center>UNBK 2017</figcaption>
</figure>
<figure>
<center><img src="images/4.jpg" alt="CbtDomas" width=500 height=500>
<figcaption><center>Motor Berbahan Air</figcaption>
</figure>
</article>
</section>
</div>

Membuat File kontak.php
silahkan buat sebuah file baru dengan nama kontak.php dan ketikklan script berikut ini :

<?php
if (!isset($_SESSION['is_logged'])) {
echo "
<script>
alert('Login dulu!');
window.location='?page=login';
</script>
";
}
?>

<div class="col-md-12">
<div class="page-header">
<h1 class="text-center">KONTAK KAMI</h1>
</div>
<center>
<section class="courses">
<article>
<center>
<hgroup>
<h3>SMK INDONESIA MAS</h3>
<img src="images/ldw.png" alt="CbtDomas" width=200 height=200>
</hgroup>
<p>JALAN CILAMAYA GANG CIPANCUH DESA TEGALWARU KECAMATAN CILAMAYA WETAN, KARAWANG, JAWA BARAT, 41384.</p>
<p>Atau Hubungi Admin Web di 081 29 6666 444 ( Atang Wiharto )</p>
</center>
</article>
</section>
</div>

Membuat File user.php
silahkan buat sebuah file baru dengan nama user.php dan ketikklan script berikut ini :

<?php
if (!isset($_SESSION['is_logged'])) {
echo "
<script>
alert('Login dulu!');
window.location='?page=login';
</script>
";
}
?>

<div class="col-md-12">
<div class="page-header">
<h1 class="text-center">DATA PENGGUNA YANG SUDAH TERDAFTAR</h1>
</div>
<center>
<h2>List User</h2>
<table border="1">
<tr><th>NO</th><th>ID</th><th>NAMA</th><th>EMAIL</th></tr>
<?php
include 'koneksi.php';
$users = mysqli_query($koneksi, "SELECT * from users");
$no=1;
foreach ($users as $row){
echo "<tr>
<td>$no</td>
<td>".$row['id_user']."</td>
<td>".$row['nama']."</td>
<td>".$row['email']."</td>
</tr>";
$no++;
}
?>
</table>
</div>

Membuat File logout.php
silahkan buat sebuah file baru dengan nama logout.php dan ketikklan script berikut ini :

<?php

session_start();
unset($_SESSION['is_logged']);
header('location: ?page=login');

Membuat File register.php
silahkan buat sebuah file baru dengan nama register.php dan ketikklan script berikut ini :

<?php
if (isset($_POST['_form']) AND $_POST['_form'] == 'on') {
$query = "INSERT INTO users VALUES(NULL, '$_POST[nama]', '$_POST[email]', md5('$_POST[password]'))";
if ($connection->query($query)) {
echo "
<script>
alert('Registrasi Berhasil!');
window.location='?page=login';
</script>
";
} else {
echo "
<script>
alert('Whoops! Registrasi gagal silahkan coba lagi');
window.location='?page=register';
</script>
";
}
}
?>

<div class="col-md-4"></div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading"><h3 class="text-center">REGISTRASI USER</h3></div>
<div class="panel-body">
<form action="<?=$_SERVER['REQUEST_URI']?>" method="POST">
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" name="nama" class="form-control" placeholder="Nama Lengkap">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary btn-block">Daftar</button>
<input type="hidden" name="_form" value="on">
</form>
</div>
</div>
</div>
<div class="col-md-4"></div>

Membuat File login.php
silahkan buat sebuah file baru dengan nama login.php dan ketikklan script berikut ini :

<?php
if (isset($_POST['_form']) AND $_POST['_form'] == 'on') {
$query = "SELECT * FROM users WHERE email='$_POST[email]' AND password='" . md5($_POST['password']) . "'";
if ($query = $connection->query($query)) {
if ($query->num_rows) {
session_start();
while ($data = $query->fetch_array()) {
$_SESSION['is_logged'] = true;
$_SESSION['nama'] = $data['nama'];
$_SESSION['email'] = $data['email'];
}
header('location: ?page=home');
} else {
echo "
<script>
alert('Email dan Password tidak cocok! Periksa kembali');
window.location='?page=login';
</script>
";
}
} else {
echo "<h1>Whooops! query error</h1>";
}
}
?>
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading"><h3 class="text-center">LOGIN USER</h3></div>
<div class="panel-body">
<form action="<?=$_SERVER['REQUEST_URI']?>" method="POST">
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary btn-block">Login</button>
<p class="text-center">Belum punya akun? <a href="?page=register">Daftar</a></p>
<input type="hidden" name="_form" value="on">
</form>
</div>
</div>
</div>
<div class="col-md-4"></div>

Sekian tutorial yang saya sampaikan dan mudah mudahan bermanfaat.

Menampilkan Data dari MySQL Dengan PHP - Membuat Form Login dan Registrasi

Written By Atang Wiharto on Selasa, 25 Juli 2017 | 02.41

0 komentar:

Posting Komentar

Popular Posts

Sudahkah Anda Shalat ?

Arsip Blog

Support

CHAT DAN FACEBOOK