membuat form login dan registrasi dengan php dan mysql

kali ini saya akan membuat formulir login dan registrasi dengan menggunakan bahasa PHP dan database mysql dengan CSS.


#Apa itu CSS? 


CSS kepanjangan dari  (Cascading Style Sheet). CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.

jadi inti dari aplikasi login ini nanti setiap orang yang mau login harus sudah terdaftar terlebih dahulu, jika belum terdaftar maka harus registrasi.
kurang lebih tampilan halaman login dan registrasi seperti berikut ini :


#Database


Buatlah struktur di mysql dengan 
nama database : login_latihan
nama tabel : users


#Script Program 


simpanlah program berikut ini kedalam LocadiskC==>Xampp==>Htdocs==>Buat folder baru dengan nama login, letakkan didalam folder tersebut

didalam folder login buat folder "csslogin", sehingga keseluruhan menjadi seperti berikut ini :

style.css


file ini untuk mendesain tampilan dari halaman login/registrasi
simpan dengan  style.css (letakkan di dalam folder csslogin)

body{
    background:#191970;
    font-family: sans-serif;
}
#kotak{
    width: 530px;
    height: 350px;
    background: #fff;
    margin: 150px auto 100px auto;
    color:#000080;
}
#atas{
    height: 35px;
    width: 520px;
    text-align: center;
    font-size: 15pt;
    padding-top:20px;
}
#bawah{
    height: 200px;
    width: 520px;
}
.masuk{
    width: 400px;
    height:40px;
    margin-top:10px;
    margin-left: 60px;
    font-size: 12pt;
    border: 1px solid #2ECC71;
    padding-left:10px;
    color:#2ECC71;
}
.masuk:focus{
    width: 400px;
    height:40px;
    margin-top:10px;
    margin-left: 60px;
    font-size: 12pt;
    padding-left:10px;
    color:#1ABC9C;
    outline: none;
    box-shadow: 0 0 5px #2ECC71;
}
#tombol{
    width: 400px;
    height:40px;
    margin-top:10px;
    margin-left: 60px;
    background: #2ECC71;
    border:none;
    color:#fff;
    font-size: 14pt;
    outline:none;
}


ceklogin.php


file ini untuk mengecek data login yang dimasukkan oleh admin, apakah sudah terdaftar atau belum, jika sudah terdaftar akan berhasil masuk, jika belum terdaftar akan menampilkan kesalahan

<?php
include "koneksi.php";
$username = $_POST['username'];
$password = $_POST['password'];
if (empty($username)){
echo "<script>alert('Username belum diisi')</script>";
echo "<meta http-equiv='refresh' content='1 url=login.php'>";
}else if (empty($password)){
echo "<script>alert('Password belum diisi')</script>";
echo "<meta http-equiv='refresh' content='1 url=login.php'>";
}else{
session_start();
$login = mysql_query("select * from users where username='$username' and password='$password'");
if (mysql_num_rows($login) > 0){
$_SESSION['username'] = $username;
header("location:index.php");
}else{
echo "<script>alert('Username atau Password salah')</script>";
echo "<meta http-equiv='refresh' content='1 url=login.php'>";
}
}
?>



daftar.php


file ini untuk menangani proses pendaftaran
<html>
<head>
<title>Pendaftaran</title>
<link rel="stylesheet" type="text/css" href="csslogin/style.css">
</head>
<body>
 <div id="kotak">
 <div id="atas"><b>PLEASE Daftar </b><br>(Pendaftaran Akun anggota)
 </div>
 <div id="bawah">
  <form method="post" name="pendaftaran" action="proses_daftar.php">
   <table border=0 align="center" cellpadding=5 cellspacing=0>
   <input type="text" class="masuk"  placeholder="Isi Nama" name="nama">
   <input class="masuk"  type="text" placeholder="Isi Email" name="email">
   <input class="masuk"  type="text" placeholder="Isi Username Untuk Login" name="username">
   <input class="masuk"  type="password" placeholder="Isi Password Login" name="password">
  <form>
   <input id="tombol" type="submit" name="submit" value="DAFTAR"></td>
  </form
 </div>
 </div>
  <form method="post"action="login.php">
   <input id="tombol" type="submit" name="submit" value="Login"></td>
  </form>
</body>
</html>



index.php


file ini untuk menampilkan halaman awal dengan memanggil file login.php
<?php
include "koneksi.php";
session_start();
if (!isset($_SESSION['username'])){
header ("location:login.php");
}
?>
Berhasil Login, 

<a href="logout.php">Logout</a>


koneksi.php


file ini untuk menghubungkan kedalam database mysql
<?php
mysql_connect("localhost","root","") or die ("Gagal Mengkoneksikan Ke Database");
mysql_select_db("login_latihan") or die ("Database Tidak Ditemukan");
?>


login.php


file ini untuk menampilkan halaman formulir login
<?php
include "koneksi.php";
session_start();
if (isset($_SESSION['username'])){
header ("location:index.php");
}
?>

<html><form method="post" name="login" action="cek_login.php">
<head> 
<title>Login</title>
<link rel="stylesheet" type="text/css" href="csslogin/style.css">
</head>
<body>
  <div id="kotak">
  <div id="atas"><b>PLEASE LOGIN </b><br>(hanya untuk anggota)
  </div>
  <div id="bawah">
   <form method="post" action="proses.php">
    <input class="masuk" type="text" autocomplete="off" placeholder="Username" name="username"><br/>
    <input class="masuk" type="password" autocomplete="off" placeholder="Password" name="password"><br/>
   <input id="tombol" type="submit" name="login" value="Login">
   </form>
    <form method="post" action="daftar.php">
    <input id="tombol" type="submit" name="daftar" value="Dafar Dulu">
   </form
  </div>
  </div>
   <form method="post" action="keluarga.php">
   <input id="tombol" type="submit" name="login" value="Kembali Ke Web">
  </form>
</body>
</html>


logout.php


file ini untuk logout/keluar dari halaman login
<?php
session_start();
session_destroy();
echo "<script>alert('Terima kasih, Anda Berhasil Logout')</script>";
echo "<meta http-equiv='refresh' content='1 url=login.php'>";
?>


proses_daftar.php


file ini untuk memproses pendaftaran yang telah dilakukan
<?php
include "koneksi.php";
$nama = $_POST['nama'];
$email = $_POST['email'];
$username = $_POST['username'];
$password = $_POST['password'];
if (empty($nama)){
echo "<script>alert('Nama belum diisi')</script>";
echo "<meta http-equiv='refresh' content='1 url=daftar.php'>";
}else
if (empty($email)){
echo "<script>alert('Email belum diisi')</script>";
echo "<meta http-equiv='refresh' content='1 url=daftar.php'>";
}else
if(empty($username)){
echo "<script>alert('Username belum diisi')</script>";
echo "<meta http-equiv='refresh' content='1 url=daftar.php'>";
}else
if (empty($password)){
echo "<script>alert('Password belum diisi')</script>";
echo "<meta http-equiv='refresh' content='1 url=daftar.php'>";
}else{
$daftar = mysql_query("INSERT INTO users (id_user,nama,username,password) values ('$nama','$email','$username','$password')");
if ($daftar){
echo "<script>alert('Berhasil Mendaftar')</script>";
echo "<meta http-equiv='refresh' content='1 url=daftar.php'>";
}else{
echo "<script>alert('Gagal Mendaftar')</script>";
echo "<meta http-equiv='refresh' content='1 url=daftar.php'>";
}
}
?>


#Lalu bagaimana cara menjalankannya?


  • pastikan anda sudah menginstall aplikasi xampp
  • import database login_latihan.sql kedalam localhost/phpmyadmin/
  • kemudian letakkan script file-file diatas kedalam localdiskC==>xampp==>htdocs==>buatfolderbaru 
  • aktifkan aplikasi xampp control panel, start pada apache dan mysql
  • pastikan apache dan mysql berjalan dengan baik seperti gambar diatas
  • buka browser, ketikkan localhost/namafolder
  • jika berhasil berjalan maka tampilannya seperti berikut ini


Demikianlah cara Membuat form login, logout, dan register dengan PHP MySQL
selamat mencoba dan semoga berhasil...

Posting Komentar untuk "membuat form login dan registrasi dengan php dan mysql"