Membuat Form Registrasi , Login, dan Home Sederhana Dengan Mysql dan PHP dan Session

Kali ini postingan saya setelah lama beristirahat di dunia maya, dan untuk membukannya kali ini saya akan mulai dengan bahasan yang baru dari sebelumnya yaitu tentang website. Jadi disini kita akan mulai membahas dan belajar tentang bahasa pemrograman PHP dan juga database MySQL.
Sebelum memulainya pastikan kalian sudah menginstall xampp dan dreamweaver di laptop atau PC kalian. kalo belum search di google aja yo... ^_^.

Dalam tutorial ini kita akan membahas tentang cara membuat form registrasi dan form login dengan PHP dan MySQL dengan cara prosedural yang sederhana. form registrasi dan login merupakan hal yang paling penting untuk setiap jenis aplikasi web dan pada tutorial ini kita akan menggunakan session yang mana session ini akan memainkan peran penting dalam sistem kali ini, , kita akan menggunakan session PHP untuk tetap mempertahankan status user login.

Pertama-tama membuat database dan tabel seperti di bawah ini.
nama database: dbtoufikDemo
nama tabel : users

Atau bisa langsung copas code dibawah ke SQL di PHPMyAdmin anda:


CREATE DATABASE `dbtoufikDemo` ;
CREATE TABLE `dbtoufikDemo`.`users` (
`user_id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 25 ) NOT NULL ,
`email` VARCHAR( 35 ) NOT NULL ,
`password` VARCHAR( 50 ) NOT NULL ,
UNIQUE (`email`)
) ENGINE = MYISAM ;

Setelah database selesai dibuat kita akan membuat file  koneksiDB.php untuk menghubungkan web dengan database nya...

<?php
if(!mysql_connect("localhost","root",""))
{
     die('oops connection problem ! --> '.mysql_error());
}
if(!mysql_select_db("dbtoufikDemo"))
{
     die('oops database selection problem ! --> '.mysql_error());
}
?>

Oke jika sudah selanjutnya kita akan membuat file register.php untuk melakukan registrasi user.
Oke pada file ini akan terdapat form untuk menginputkan  username email dan password. Untuk ID nya akan dibuat otomatis sehingga tidak perlu di inputkan. Tampilannya akan seperti dibawah ini:


dan berikutnya adalah Code Register.PHP
masukkan kode berikut ke editor anda baik itu dreamweaver notepad dll, lalu save as dengan nama register.php



<?php
session_start();
if(isset($_SESSION['user'])!="")
{
 header("Location: beranda.php");
}
include_once 'koneksiDB.php';

if(isset($_POST['btn-signup']))
{
 $uname = mysql_real_escape_string($_POST['uname']);
 $email = mysql_real_escape_string($_POST['email']);
 $upass = md5(mysql_real_escape_string($_POST['pass']));
 
 if(mysql_query("INSERT INTO users(username,email,password) VALUES('$uname','$email','$upass')"))
 {
  ?>
        <script>alert('successfully registered ');</script>
        <?php
 }
 else
 {
  ?>
        <script>alert('error while registering you...');</script>
        <?php
 }
}
?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login & Registration System</title>
<link rel="stylesheet" href="style.css" type="text/css" />

</head>
<body>
<center>
<div id="login-form">
<form method="post">
<table align="center" width="30%" border="0">
<tr>
<td><input type="text" name="uname" placeholder="Masukkan Username" required /></td>
</tr>
<tr>
<td><input type="email" name="email" placeholder="Masukkan Email" required /></td>
</tr>
<tr>
<td><input type="password" name="pass" placeholder="Masukkan Password" required /></td>
</tr>
<tr>
<td><button type="submit" name="btn-signup">Daftar Sekarang</button></td>
</tr>
<tr>
<td><a href="index.php">Login Disini</a></td>
</tr>
<tr>
<td><a href="htttp://www.toufik.web.id"><h6 align="right">By toufik's Blog</h6></a></td>
</tr>
</table>
</form>
</div>
</center>
</body>
</html>

Yup setelah file register.php selesai selanjutnya kita akan membuat file index.php  yang mana file ini merupakan halaman login. berikut adalah tampilan halaman login nya.
Oke berikut kode untuk halaman login nya. jangan lupa namakan pake index.php

 
<?php
session_start();
if(isset($_SESSION['user'])!="")
{
 header("Location: beranda.php");
}
include_once 'koneksiDB.php';

if(isset($_POST['btn-signup']))
{
 $uname = mysql_real_escape_string($_POST['uname']);
 $email = mysql_real_escape_string($_POST['email']);
 $upass = md5(mysql_real_escape_string($_POST['pass']));
 
 if(mysql_query("INSERT INTO users(username,email,password) VALUES('$uname','$email','$upass')"))
 {
  ?>
        <script>alert('successfully registered ');</script>
        <?php
 }
 else
 {
  ?>
        <script>alert('error while registering you...');</script>
        <?php
 }
}
?>




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login & Registration System</title>
<link rel="stylesheet" href="style.css" type="text/css" />

</head>
<body>
<center>
<div id="login-form">
<form method="post">
<table align="center" width="30%" border="0">
<tr>
<td><input type="text" name="uname" placeholder="Masukkan Username" required /></td>
</tr>
<tr>
<td><input type="email" name="email" placeholder="Masukkan Email" required /></td>
</tr>
<tr>
<td><input type="password" name="pass" placeholder="Masukkan Password" required /></td>
</tr>
<tr>
<td><button type="submit" name="btn-signup">Daftar Sekarang</button></td>
</tr>
<tr>
<td><a href="index.php">Login Disini</a></td>
</tr>
<tr>
<td><a href="htttp://www.toufik.web.id"><h6 align="right">By toufik's Blog</h6></a></td>
</tr>
</table>
</form>
</div>
</center>
</body>
</html>

Jika ini sudah selesai, berikutnya kita buat halaman tujuan yang di arahkan jika user berhasil login alias telah memasukkan data login dengan benar. namakan file nya dengan beranda.php
code beranda.php

<?php
session_start();
include_once 'koneksiDB.php';

if(!isset($_SESSION['user']))
{
 header("Location: index.php");
}
$res=mysql_query("SELECT * FROM users WHERE user_id=".$_SESSION['user']);
$userRow=mysql_fetch_array($res);
?>




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome - <?php echo $userRow['email']; ?></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header">
 <div id="left">
    <label>Demo From toufik.web.id</label>
    </div>
    <div id="right">
     <div id="content">
         hi' <?php echo $userRow['username']; ?>&nbsp;<a href="logout.php?logout">Sign Out</a>
        </div>
    </div>
</div>
</body>
</html>
Berikutnya buat file logout.php  untuk logout dan kembali ke index halaman.

<?php
session_start();

if(!isset($_SESSION['user']))
{
 header("Location: index.php");
}
else if(isset($_SESSION['user'])!="")
{
 header("Location: beranda.php");
}

if(isset($_GET['logout']))
{
 session_destroy();
 unset($_SESSION['user']);
 header("Location: index.php");
}
?>

Terakhir untuk memperindah tampilan pastinya file css nya.. namain dengan style.css
 @charset "utf-8";
/* CSS Document */

*
{
 margin:0;
 padding:0;
}
#login-form
{
 margin-top:70px;
}
table
{
 border:solid #000 1px;
 padding:25px;
 box-shadow: 0px 0px 1px rgba(0,0,0,0.2);
}
table tr,td
{
 padding:15px;
}
table tr td input
{
 width:97%;
 height:45px;
 border:solid #e1e1e1 1px;
 border-radius:3px;
 padding-left:10px;
 font-family:Verdana, Geneva, sans-serif;
 font-size:16px;
 background:#FFC;
 transition-duration:0.5s;
 box-shadow: inset 0px 0px 1px rgba(0,0,0,0.4);
}

table tr td button
{
 width:100%;
 height:45px;
 border:0px;
 background:rgba(90,45,78,11);
 background:-moz-linear-gradient(top, #595959 , #515151);
 border-radius:3px;
 box-shadow: 1px 1px 1px rgba(1,0,0,0.2);
 color:#FFC;
 font-family:Verdana, Geneva, sans-serif;
 font-size:18px;
 font-weight:bolder;
 text-transform:uppercase;
}
table tr td button:active
{
 position:relative;
 top:1px;
}
table tr td a
{
 text-decoration:none;
 color:#300;
 font-family:Verdana, Geneva, sans-serif;
 font-size:18px;
}

/* css for home page  */

*
{
 margin:0;
 padding:0;
}
#header
{
 width:100%;
 height:60px;
 background:rgba(00,11,22,33);
 color:#FF6;
 font-family:Verdana, Geneva, sans-serif;
}
#header #left
{
 float:left;
 position:relative;
}
#header #left label
{
 position:relative;
 top:5px;
 left:100px;
 font-size:35px;
}
#header #right
{
 float:right;
 position:relative;
}
#header #right #content
{
 position:relative;
 top:20px;
 right:100px;
 color:#fff;
}
#header #right #content a
{
 color:#3C3;
}

/* css for home page */
Oke sampai disini selesai program kita silahkan cek demo atau download langsung projectnya... ^_^

Demo username: admin@toufik.web.id
Demo password: toufik.web.id

1 komentar:

Ada pertanyaan atau sekedar ninggalin jejak silahkan comment di bawah
==komen anda berarti buat kami==