Membuat Login , Register unik dan Logout PHP Mysql

Membuat Login Register elegant dan Logout menggunkan PHP Mysql

register login elegant php mysql


Baik kali ini saya akan membuat artikel tutorial yaitu bagaimana caranya membuat login user, Register User dengan tampilan yang elegant sekaligus logout.
login dan register ini menggunakan sistem SESSION.  Di desain menggunkan HTML 5 dan CSS 3 dan menggunkan Background yang elegant dan responsive. Seperti biasa jika anda ingin mendownload dapat di akhir tutorial ini ikuti tuorial dengan seksama supaya anda paham.


Ya langsung saja pertama buat database dengan nama zlearn -> Kemudian buat sebuah table dengan nama user  seperti berikut:

Setalah membaut database zlearn masuk ke sql dan pastekan script berikut:

-- phpMyAdmin SQL Dump
-- version 4.5.2
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Jun 12, 2017 at 11:11 AM
-- Server version: 10.1.19-MariaDB
-- PHP Version: 5.6.24

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
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: `diary`
--

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

--
-- Table structure for table `user`
--

CREATE TABLE `user` (
  `no_user` int(11) NOT NULL,
  `email` varchar(200) NOT NULL,
  `cp` varchar(99) NOT NULL,
  `password` varchar(200) NOT NULL,
  `level` int(11) NOT NULL,
  `nama_lengkap` varchar(200) NOT NULL,
  `alamat` text NOT NULL,
  `kelamin` varchar(200) NOT NULL,
  `tanggal_lahir` varchar(200) NOT NULL,
  `tempat_lahir` varchar(200) NOT NULL,
  `moto` text NOT NULL,
  `biodata` text NOT NULL,
  `bukti_bayar` varchar(200) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `user`
--

INSERT INTO `user` (`no_user`, `email`, `cp`, `password`, `level`, `nama_lengkap`, `alamat`, `kelamin`, `tanggal_lahir`, `tempat_lahir`, `moto`, `biodata`, `bukti_bayar`) VALUES
(1003, 'root@gmail.com', '0000000', '827ccb0eea8a706c4c34a16891f84e7b', 1, 'root akar', 'Indonesia', 'Laki-laki', '11-2-1998', 'Korea', 'Rome Is Not Build In One Night', 'No ', ''),
(1004, 'user@gmail.com', '', 'ee11cbb19052e40b07aac0ca060c23ee', 0, '', '', '', '', '', '', '', '');

--
-- Indexes for dumped tables
--

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

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `user`
--
ALTER TABLE `user`
  MODIFY `no_user` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1005;
/*!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 itu pastikan folder sebagai berikut:
zlearn.id

Kemudian Buat file koneksi.php di Folder Koneksi
<?php
$db="zlearn";
$server="localhost";
$user="root";
$sandi="";
$koneksi=mysql_connect($server,$user,$sandi);
mysql_select_db($db,$koneksi);


?>


Selanjutnya Buat Index.php  Berfungsi sebagai Form Login Seklaigus Register

<!doctype html>
<html>
<head>
<title>ZLearn.id Login and Register</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="My Secret Keep Your Secrets" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- font files -->
<link href='//fonts.googleapis.com/css?family=Muli:400,300,300italic,400italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Comfortaa:400,300,700' rel='stylesheet' type='text/css'>
<!-- /font files -->
<!-- css files -->
<link href="css/animate-custom.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- /css files -->
<style>
p.change_link {
    position: absolute;
    color: #fff;
    left: 0px;
    height: 80px;
    width: 100%;
    text-align: center;
    border-top: 1px solid rgb(219, 229, 232);
    background: rgb(32, 203, 203);
}

#register, #login {
    position: absolute;
    top: 0px;
    width: 88%;
    padding: 18px 6% 60px 6%;
    margin: 0 0 35px 0;
    background: rgba(1, 18, 0, 0.7);
}

</style>
</head>
<body>
<h1 class="w3ls">ZLearn.id</h1>
<div id="container_demo" >
    <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
    <a class="hiddenanchor" id="toregister"></a>
    <a class="hiddenanchor" id="tologin"></a>
    <div id="wrapper">
        <div id="login" class="animate form">
<form action="login_proses.php" method="POST" autocomplete="on"> 
                <h2>Log in</h2> 
                <p> 
<label for="username" class="uname" data-icon="u" ><span>Email Anda</span></label>
                    <input id="username" name="email" required="required" type="text" placeholder="EMAIL"/>
                </p>
                <p> 
                    <label for="password" class="youpasswd" data-icon="p"><span>Password Anda</span></label>
                    <input type="password" id="password" name="password" required="required"  placeholder="eg. X8df!90EO" /> 
                </p>
                <p class="keeplogin"> 
<input type="checkbox" id="brand" value="">
<label for="brand"><span></span> Ingat Saya?</label>
</p>
                <p class="login button"> 
                    <input type="submit" value="Login" /> 
</p>
                <p class="change_link">
<span>Gabung  ?</span>
<a href="#toregister" class="to_register">Daftar Sekarang ?</a>
</p>
            </form>
        </div>
<div id="register" class="animate form">
            <form  action="register_proses.php" method="POST" autocomplete="on"> 
                <h2> Daftar </h2> 
                <p> 
<label for="usernamesignup" class="uname" data-icon="u"><span>Nama</span></label>
                    <input id="usernamesignup" name="nama_lengkap" required="required" type="text" placeholder="Ex ZidniRyi" />
                </p>
                <p> 
                    <label for="emailsignup" class="youmail" data-icon="e" ><span>Email</span></label>
                    <input id="emailsignup" name="email" required="required" type="email" placeholder="EXAMPLE@MAIL.COM"/> 
                </p>
                <p> 
                    <label for="passwordsignup"  class="youpasswd" data-icon="p"><span>Password</span></label>
                    <input type="password" id="passwordsignup"  name="password" required=  placeholder="eg. X8df!90EO"/>
</p>
<p> 
                    <label for="emailsignup" class="youmail" data-icon="A"><span>Alamat</span></label>
                    <input id="emailsignup" name="alamat" required="required" type="text" placeholder="Madukara RT 02 RW 07"/>
                </p>
                <p class="signin button"> 
<input type="submit" value="Daftar"/> 
</p>
                <p class="change_link">  
<span>Silahkan Login?</span>
<a href="login_new" class="to_register">Log In</a>
</p>
            </form>
        </div>
</div>
</div>
<p class="agileits">
Mysecret| Tulis Diary online,Tulis Ide, Simpan Momen, Ingat Hal Penting| © 2017 BY Myseas</p>  
</body>
</html>


Setelah itu buat login_proses.php

<?php
include('koneksi/koneksi.php');

$email=$_POST['email'];
$password=MD5($_POST['password']);
$lihat_login="SELECT * FROM user WHERE email='$email' ";
$data_user=mysql_query($lihat_login);
$data_login=mysql_fetch_array($data_user);
$no_user=$data_login['no_user'];
$email_db=$data_login['email'];
$password_db=$data_login['password'];
$level_user=$data_login['level'];


if ($password==$password_db) {
session_start();
$_SESSION['email']=$email_db;
$_SESSION['no_user']=$no_user;
$_SESSION['level']=$level_user;
echo'berhasil login horeee';
header('location:dasbor.php');
}
else{
header('location:index.php');

}

?>

Setelah Itu Buat logout.php
<?php
session_start();
session_destroy();
header('location:index.php')
?>

Kemudian buat register_proses.php


<?php
session_start();
include ('koneksi/koneksi.php');
$nama_lengkap=$_POST['nama_lengkap'];
$email=$_POST['email'];
$password=MD5($_POST['password']);
$alamat=$_POST['alamat'];

$q_daftar="INSERT INTO user SET nama_lengkap='$nama_lengkap', email='$email', password='$password', alamat='$alamat'";
mysql_query($q_daftar);
echo $nama_lengkap;
echo $email;
echo $alamat;
echo $password;
header('location:index.php');

?>


Terakhir Kita Buat dasbor.php
<?php
echo "Selamat Anda Berhasi login";
echo "<a href='logout.php'>Keuar</a>";


?>
 Tentang login untuk kemanan menggunakan hash MD5
cara menggunkan source kode  yaitu Buat databse dengan nama zlearn -> kemudian import user.sql

Oh iya Untuk Login username: root@gmail.com |password: 12345
anda bisa melihatnya di database
Bagi yang ingin mendownload source kode silahkan unduh tautan dibawah ini:

Downloads

Baca Juga:

Share this

Related Posts

Previous
Next Post »

2 komentar

komentar

Berita Unik

loading...