Anda di halaman 1dari 11

Membuat Form Sign Up/Register, Login dan Logout untuk pembangunan sebuah web dengan

berbasiskan member saat ini sudah menjadi tren bagi para webmaster yang ingin membangun
web yang "look professional". Pada artikel ini akan dijelaskan tutorial untuk membuat form
sign up dan login serta logout yang masih berbentuk sederhana. Untuk selanjutnya, anda
dapat membuat sendiri pengembangan dari script ini.

Langkah pertama, anda harus membuat file "Config.php". File ini berfungsi menghubungkan
script yang anda buat dengan database. Isi dari file "config.php" ini dapat anda lihat di bawah
<?php
$server = "localhost"; // server web anda.
$database = "mydata"; // nama dari database yang anda buat.
$db_user = "myusername"; // username dari mysql anda.
$db_pass = "mypassword"; // password untuk mengakses mysql anda tersebut.
$table = "users"; //nama table yang akan dibuat di database.
?>
Simpan file tersebut di root web anda. Setelah selesai, anda dapat melanjutkan pada tahap
yang kedua. Buat file dengan nama "create.php". File ini berfungsi menjalankan perintah
query database dalam pembuatan table signup dan login ini. Isi dari file ini dapat anda lihat
dibawah.
<?
phpinclude ("config.php");// konek ke server MYSQL
$link = mysql_connect($server, $db_user, $db_pass)or die ("Could not connect to mysql
because ".mysql_error());// pilih database
mysql_select_db($database)or die ("Could not select database because ".mysql_error());//
bikin tabel di database
$create = "create table $table (id smallint(5) NOT NULL auto_increment,username
varchar(30) NOT NULL,password varchar(32) NOT NULL,PRIMARY KEY (id),UNIQUE
KEY username (username));";mysql_query($create)or die ("Could not create tables because
".mysql_error());echo "Mangstabs!!sekarang lanjut ke tahap yang ketiga";
?>
Sekarang anda perlu membuat form yang digunakan pengunjung untuk sign up dan berikan
nama "register.html". File yang anda buat ini boleh berupa halaman HTML biasa yang
nantinya akan terhubung pada script php yang nantinya anda akan buat. Untuk percobaan
yang sederhana, anda dapat meng-copy script di bawah pada halaman baru Dreamweaver.
<html><head><title>REGISTRASI MEMBER</title></head><body><form
action="register.php" method="post">Pilih Username: <input type="text" name="username"
size="20"><br>Pilih Password: <input type="password" name="password"

size="20"><br><input type="submit" value="Sign Up"></form></body></html>


Setelah itu buat file dengan nama "register.php". File ini akan berfungsi sebagai perantara
yang menghubungkan file register.html diatas dengan database yang sudah anda buat. Untuk
isi dari file "register.php dapat anda lihat dibawah.

<?phpinclude("config.php");// konek ke server MYSQL$link = mysql_connect($server,


$db_user, $db_pass)or die ("Could not connect to mysql because ".mysql_error());// pilih
databasemysql_select_db($database)or die ("Could not select database because
".mysql_error());// cek kesamaan username
$qry = mysql_query($check) or die ("Could not match data because ".mysql_error());
$num_rows = mysql_num_rows($qry);
if ($num_rows != 0) {
echo "Maaf, username $username sudah ada yang punya<br>";
echo "<a href=register.html>Anda belum beruntung, silakan dicoba kembali</a>";
exit;
} else {
// masukkan data
$insert = mysql_query("insert into $table values (NULL, '".$_POST['username']."',
'".$_POST['password']."')")
or die("Could not insert data because ".mysql_error());
// tampilkan pesan sukses
echo "Akun Anda Telah Selesai Dibuat!<br>";
echo "Sekarang anda bisa <a href=login.html>Login sebagai member web Cyber4rt</a>";
}
?>
Sekarang anda perlu membuat form member untuk Login. Beri file ini dengan nama
"login.html". Isi dari file ini yaitu sebagai berikut :
<html><head>
<title>MEMBER LOGIN</title>
</head><body>
<form action="login.php" method="post">
Username: <input type="text" name="username" size="20"><br>
Password: <input type="password" name="password" size="20"><br>
<input type="submit" value="Log In">
</form>
</body></html>
Sekarang anda perlu membuat file yang akan menghubungkan file login.html dengan
database, berikan nama file ini dengan "login.php". Script-nya dapat anda lihat dibawah.
<?php
include("config.php");// konek ke server MYSQL
$link = mysql_connect($server, $db_user, $db_pass)
or die ("Could not connect to mysql because ".mysql_error());// pilih database
mysql_select_db($database) or die ("Could not select database because ".mysql_error());
$match = "select id from $table where username = '".$_POST['username']."'

and password = '".$_POST['password']."';";


$qry = mysql_query($match)
or die ("Could not match data because ".mysql_error());
$num_rows = mysql_num_rows($qry);
if ($num_rows <= 0) {
echo "Maaf, tidak ada username $username dengan password tersebut.<br>";
echo "<a href=login.html>Coba lagi</a>";
exit;
} else {
setcookie("loggedin", "TRUE", time()+(3600 * 24));
setcookie("mysite_username", "$username");
echo "Anda telah login!<br>";
echo "Lanjutkan ke <a href=members.php>member</a> area.";
}
?>
Perhatikan file tersebut pad baris ketiga paling bawah, disana berisi <a
href=members.php>members.php ini adalah sebuah area yang hanya bisa dilihat oleh para
member. Anda dapat membuat file members.php dengan kreasi sendiri. Sekarang saya akan
menjelaskan script yang digunakan untuk mengecek cookie, apakah orang tersebut sudah
login atau tidak. Simpan scipt ini di seluruh area members. Script-nya sebagai berikut :

<?php if (!isset($_COOKIE['loggedin'])) die("Anda sedang tidak login! Silakan login terlebih


dahulu");$mysite_username = $HTTP_COOKIE_VARS["mysite_username"];echo "Anda
login sebagai $mysite_username."; ?>
Akhirnya script yang terakhir yaitu script untuk logout. Script ini dapat dihubungkan dengan
link pada html biasa. Link ini diletakkan pada area member. Lihat isi script-nya di bawah ini :

<?php// masa aktif cookiesetcookie ("loggedin", "", time() - 3600);echo "Anda sudah
logout.<br>";echo "<a href=\"login.html\">Login</a>.";?>
Untuk peng-aplikasi-an dari script-script yang saya jelaskan di atas, dapat anda kreasikan
sendiri. Selamat berkreasi.!!!! ( www.seowaps.com )

Terima Kasih Membaca Artikel tentang cara Membuat Form Sign Up / Register, Login Dan Logout
di website. Jika Ingin Copy dan Paste Artikel cara Membuat Form Sign Up / Register, Login Dan
Logout di website ini, Diharapkan Mencantumkan Sumber Link
http://www.seowaps.com/2013/07/cara-membuat-form-sign-up-register.html. Terimakasih.

Sistem Login dengan Tipe User & Hak


Akses Berbeda
Otentikasi atau Authentication adalah proses mengkonfirmasi identitas dari seseorang atau suatu
benda. Misalkan pada saat pulang ke rumah dan mengetuk pintu masuk, maka ibu Anda akan
menanyakan siapa yang mengetuk pintu, sebelum mempersilahkan Anda masuk.
Otorisasi atau Authorization adalah proses memberi izin seseorang atau suatu benda untuk
melakukan sesuatu. Contoh, setelah Anda dipersilahkan masuk, maka Anda akan diizikan untuk
duduk di ruang tamu, menonton tv, membaca majalah di meja, masuk ke kamar tidur Anda. Namun
tidak mengizinkan Anda menggunakan laptop ayah Anda atau membuka kotak penyimpanan.
Proses otentikasi & otorisasi menyangkut 4 komponen penting.
1. Orang atau benda yang akan melakukan sesuatu dan dikonfirmasi indentitasnya, dalam
contoh di atas Anda sendiri;
2. Aksi yang dilakukan, misal membaca, menonton;
3. Benda yang dikenakan Aksi, misal tv, buku, kamar tidur;
4. Peran atau role dari orang di dalam sistem, misal peran Anda di rumah yaitu sebagai Anak.
Perlu ditekankan di komponen terakhir peran. Pada saat Anda berdiri di depan pintu rumah, saat
mengetuk pintu, maka peran Anda adalah "TAMU" atau "GUEST". Setelah ibu Anda mengkonfirmasi
diri Anda dan mengizinkan Anda masuk ke dalam rumah, maka peran Anda berubah menjadi
"ANAK". Jika yang mengetuk pintu ayah Anda maka setelah diizinkan masuk perannya berubah dari
"TAMU" ke "KEPALA KELUARGA". Peran inilah yang menentukan aksi apa yang boleh Anda lakukan
terhadap sebuah benda. Aksi Aksi apa saja yang bisa Anda lakukan berdasarkan peran Anda sering
disebut dengan hak akses.

Menyiapkan Tabel Database


Langkah pertama yang perlu dilakukan adalah membuat tabel yang akan digunakan pada tutorial ini.
Buatlah tabel dengan nama "user" seperti di bawah:
_______________________________________________________________________
| kolom
| tipe data
| keterangan
|
----------------------------------------------------------------------| user_id
| varchar(40)
| primary key
|
----------------------------------------------------------------------| name
| varchar(50)
|
|
----------------------------------------------------------------------| password
| varchar(50)
|
|
----------------------------------------------------------------------| type
| varchar(20)
| mencatat tipe/peran user
|
----------------------------------------------------------------------1. CREATE TABLE `user` (
2.
`user_id` VARCHAR(40) NOT NULL ,
3.
`name` VARCHAR(50) NULL ,

4.
`password` VARCHAR(50) NULL ,
5.
`type` VARCHAR(20) NULL ,
6.
PRIMARY KEY (`user_id`) )
7. DEFAULT CHARACTER SET = utf8
8. COLLATE = utf8_general_ci;

Perlu diperhatikan di tabel di atas ada satu kolom type, kolom type digunakan untuk
mencatat/menentukan peran pengguna setelah berhasil login.

Membatasi Hak Akses Pengguna Berdasarkan Tipe/Peranan (Otorisasi)


Pada bagian ini akan dimulai membuat kode php untuk membatasi hak akses. Seperti dijelaskan di
atas otentikasi & otorisasi menyangkut 4 komponen. Jika dikaitkan dengan contoh kode di tutorial
ini maka 4 komponen tersebut adalah sebagai berikut:
1.
2.
3.
4.

Orang atau benda-> pengguna atau pengunjung website;


Aksi-> mengakses/menload/mengunjungi halaman web;
Benda-> halaman web, misal: index.php, login.php, admin.php;
Peran-> guest,admin,user ditentukan dari kolom type di tabel user.

File Konfigurasi
Pertama buat file config.php untuk menyimpan semua konfigurasi umum seperti konfigurasi koneksi
database.
1. <?php
2. if(!defined('__NOT_DIRECT')){
3.
//mencegah akses langsung ke file ini
4.
die('Akses langsung tidak diizinkan!');
5. }
6.
7. define('BASE_URL', '/tutorial/multi-login/');
8. //koneksi database
9. define('DB_HOST','localhost');
10. define('DB_USER','root');
11. define('DB_PASS', 'blah');
12. define('DB_NAME' ,'test');

Pada baris ke-2 sampai ke-5 digunakan untuk mencegah akses langsung ke file config.php, file harus
di-include oleh file lain dengan mendifinisikan konstanta __NOT_DIRECT terlebih dahulu.
Baris ke-7 adalah bagian terpenting, mendifinisikan konstanta BASE_URL jika Anda mengakses
tutorial ini di browser seperti http://localhost/tutorial/multi-login/ maka BASE_URL diisi dengan
/tutorial/multi-login/. Jika http://localhost/multi-login/ maka isi BASE_URL dengan /multi-login/.
Tinggal hilangkan localhost, lebih mudahnya lagi jika Anda membuat tutorial ini di folder
htdocs/tutorial/multi-login maka isi BASE_URL dengan tutorial/multi-login.
Baris selanjutnya adalah mendefinisikan konstanta untuk koneksi ke database.
Konfigurasi Hak Akses Masing Masing Tipe User
Setelah selesai mendefinisikan konfigurasi global, selanjutnya adalah membuat file konfigurasi hak
akses masing masing tipe user, halaman web mana saja yang bisa diakses setiap tipe user.
1. Pertama buat folder dengan nama "akses".

2. Di dalam folder akses buatlah 3 file, file admin.php untuk pengguna dengan peran admin,
file user.php untuk pengguna dengan peran user (user biasa), dan file guest.php untuk
pengguna dengan peran guest.
Masing masing file tersebut adalah sebagai berikut:
file admin.php
1. <?php
2. $__akses_config = array(
3.
'login.php',
4.
'logout.php',
5.
'admin/index.php',
6.
'admin/list-user.php',
7.
'admin/add-user.php',
8.
'admin/edit-user.php',
9.
'admin/delete-user.php',
10.
'admin/add-artikel.php',
11.
'admin/edit-artikel.php',
12.
'admin/list-artikel.php',
13.
'admin/delete-artikel.php',
14.
'index.php',
15.
'view-artikel.php'
16. );

file user.php
1. <?php
2. $__akses_config = array(
3.
'login.php',
4.
'logout.php',
5.
'admin/index.php',
6.
'admin/add-artikel.php',
7.
'admin/edit-artikel.php',
8.
'admin/list-artikel.php',
9.
'admin/delete-artikel.php',
10.
'index.php',
11.
'view-artikel.php'
12. );

file guest.php
1. <?php
2. $__akses_config = array(
3.
'login.php',
4.
'logout.php',
5.
'register.php',
6.
'index.php',
7.
'view-artikel.php'
8. );

ketiga file di atas berisi satu variabel dengan nama $__akses_config dengan tipe data array, variabel
$__akses_config berisi data array dari halaman halaman mana saja yang bisa diakses masing masing
tipe user. Contoh admin boleh mengakses halaman admin/list-user.php sedangkan user dan guest
tidak bisa, kemudian semua pengguna bisa mengakses halaman login.php.

Jumlah file di folder akses tidak terpaku hanya 3 buah, bisa ditambah sesuai dengan kebutuhan,
sesuai dengan tipe user yang diinginkan.
File Untuk Otorisasi User
Langkah selanjutnya adalah membuat file cek-akses.php. File ini digunakan untuk menentukan apa
peran pengguna dan halaman apa saja yang bisa dikunjungi.
Pertama mencegah akses langsung ke file cek-akses.php, file harus di-include oleh file lain dengan
mendifinisikan konstanta __NOT_DIRECT terlebih dahulu.
1. <?php
2. if(!defined('__NOT_DIRECT')){
3.
//mencegah akses langsung ke file ini
4.
die('Akses langsung tidak diizinkan!');
5. }

Kedua mengecek apakah user sudah login atau belum dan menentukan tipe/peran pengguna.
6.
7.
8.
9.

// ....
session_start();
include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'config.php';
if(!isset($_SESSION['my_user_agent']) ||
($_SESSION['my_user_agent']!=md5($_SERVER['HTTP_USER_AGENT']))){
10.
//user belum login
11.
$__tipe_user = 'guest';
12. }else{
13.
$__tipe_user = $_SESSION['tipe_user'];
14. }

Membuka session di baris ke-7, baris ke-8 meng-include file config.php yang telah dibuat
sebelumnya. Baris ke-9 sampai 14 mengecek apakah pengguna sudah login, jika belum login maka
tipenya adalah "guest" dan sebaliknya tipe user sesuai dengan nilai $_SESSION['tipe_user'] (sesuai
dengan nilai dari tabel user).
Catatan:
Berikut penjelasan beberapa fungsi yang mungkin baru Anda ketahui:

DIRECTORY_SEPARATOR adalah konstanta yang berisi nilai 'pemisah folder', di windows


nilainya \ dan di linux /.
__FILE__ adalah konstanta yang berisi nilai nama lengkap file beserta nama foldernya misal,
file cek-akses.php ada di folder C:\xampp\htdocs\multi-login maka __FILE__ akan berisi
C:\xampphtdocsmulti-logincek-akses.php.
dirname fungsi untuk mendapatkan nama folder dari sebuah file atau folder,
dirname('C:\xampp\htdocs\multi-login\cek-akses.php'); akan menghasilkan
'C:\xampp\htdocs\multi-login'.

Ketiga meng-include salah satu file yang ada di folder akses yang dibuat sebelumnya, sesuai dengan
tipe pengguna yang diperoleh pada kode di atas. Jika tipe pengguna guest maka include file
akses/guest.php, jika admin maka include file akses/admin.php

15. //.....
16. $aksesFilename =
dirname(__FILE__).DIRECTORY_SEPARATOR.'akses'.DIRECTORY_SEPARATOR.$__
tipe_user.'.php';
17. if(!file_exists($aksesFilename)){
18.
die('Terjadi kesalahan sistem');
19. }
20. include $aksesFilename;

Keempat menentukan file yang sedang diakses oleh pengguna dan mengecek apakah pengguna
diperbolehkan mengakses file tersebut.
21.
22.
23.
24.
25.

//.........
$arrayCurrentPath = explode('?',$_SERVER['REQUEST_URI']);
$currentPath = substr($arrayCurrentPath[0], strlen(BASE_URL));
$allow = in_array($currentPath, $__akses_config);

Kelima jika pengguna tidak diizinkan dan pengguna belum login maka pengguna dialihkan ke
halaman login (baris 28 dan 29), sebaliknya ditampilkan text "Anda tidak diizinkan mengakses
halaman ini!" (baris 31).
26. //..........
27. if(!$allow){
28.
if($__tipe_user == 'guest' && $currentPath != 'login.php'){
29.
header("Location: ".BASE_URL.'login.php');
30.
}else{
31.
echo "Anda tidak diizinkan mengakses halaman ini!";
32.
}
33.
exit;
34. }

Setelah semua langkah di atas digabungkan maka file cek-akses.php akan seperti:
1. <?php
2. if(!defined('__NOT_DIRECT')){
3.
//mencegah akses langsung ke file ini
4.
die('Akses langsung tidak diizinkan!');
5. }
6.
7. session_start();
8.
9. require_once dirname(__FILE__).DIRECTORY_SEPARATOR.'config.php';
10.
11. if(!isset($_SESSION['my_user_agent']) ||
($_SESSION['my_user_agent']!=md5($_SERVER['HTTP_USER_AGENT']))){
12.
//user belum login
13.
$__tipe_user = 'guest';
14. }else{
15.
$__tipe_user = $_SESSION['tipe_user'];
16. }
17.
18. $aksesFilename =
dirname(__FILE__).DIRECTORY_SEPARATOR.'akses'.DIRECTORY_SEPARATOR.$__
tipe_user.'.php';

19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.

if(!file_exists($aksesFilename)){
die('Terjadi kesalahan sistem');
}
include $aksesFilename;
$arrayCurrentPath = explode('?',$_SERVER['REQUEST_URI']);
$currentPath = substr($arrayCurrentPath[0], strlen(BASE_URL));
$allow = in_array($currentPath, $__akses_config);
if(!$allow){
if($__tipe_user == 'guest' && $currentPath != 'login.php'){
header("Location: ".BASE_URL.'login.php');
}else{
echo "Anda tidak diizinkan mengakses halaman ini!";
}
exit;
}

Otentikasi Pengguna
Setelah membuat skrip untuk otorisasi pengguna di atas, langkah selanjutnya adalah membuat skrip
untuk Otentikasi user.
File Login.php
Berikut adalah langkah langkah untuk membuat file login.php, langkah langkah mengotentikasi
pengguna.
Pertama mendefinisikan konstanta __NOT_DIRECT dan meng-include file cek-akses.php
1. defined('__NOT_DIRECT') || define('__NOT_DIRECT',1);
2. include 'cek-akses.php';

Kedua cek apakah pengguna sudah menginput user_id & password dan menekan tombol login,
kemudian membuka koneksi ke database
3. //....
4. if($_POST){
5.
mysql_connect(DB_HOST,DB_USER,DB_PASS);
6.
mysql_select_db(DB_NAME);

Ketiga cek kebenaran user_id dan password yang diinput pengguna. Jika benar buat 3 session
$_SESSION['tipe_user'], $_SESSION['user_id'], dan $_SESSION['my_user_agent'] dan alihkan
pengguna ke halaman admin/index.php. Sebaliknya jika user_id atau password salah tampilkan
pesan "ID User atau password salah!"
7.
8.
9.

//..........
$userId = mysql_real_escape_string($_POST['user_id']);
$data = mysql_fetch_array(mysql_query("select * from user where
user_id='".$userId."'"));
10.
if($data !== false && $data['password'] ==
md5($_POST['password'])){
11.
//login berhasil
12.
$_SESSION['tipe_user'] = $data['type'];

13.
14.

$_SESSION['user_id'] = $data['user_id'];
$_SESSION['my_user_agent'] =
md5($_SERVER['HTTP_USER_AGENT']);
15.
header("Location: admin/index.php");
16.
}else{
17.
echo "ID User atau password salah!";
18.
}
19. }?>

Keempat membuat form login


19.
20.
21.
22.
23.
24.

//.......
<form method="post" action="">
ID User: <input type="text" name="user_id"/>
Password: <input type="password" name="password"/>
<input type="submit" value="Login"/>
</form>

Jika digabungkan file login.php akan menjadi:


1.
2.
3.
4.
5.
6.
7.
8.

<?php
defined('__NOT_DIRECT') || define('__NOT_DIRECT',1);
include 'cek-akses.php';
if($_POST){
mysql_connect(DB_HOST,DB_USER,DB_PASS);
mysql_select_db(DB_NAME);
$userId = mysql_real_escape_string($_POST['user_id']);
$data = mysql_fetch_array(mysql_query("select * from user where
user_id='".$userId."'"));
9.
if($data !== false && $data['password'] ==
md5($_POST['password'])){
10.
//login berhasil
11.
$_SESSION['tipe_user'] = $data['type'];
12.
$_SESSION['user_id'] = $data['user_id'];
13.
$_SESSION['my_user_agent'] =
md5($_SERVER['HTTP_USER_AGENT']);
14.
header("Location: admin/index.php");
15.
}else{
16.
echo "ID User atau password salah!";
17.
}
18. }
19. ?>
20. <form method="post" action="">
21. ID User: <input type="text" name="user_id"/>
22. Password: <input type="password" name="password"/>
23. <input type="submit" value="Login"/>
24. </form>

Cara Menggunakan File cek-akses.php


Untuk menggunakan cek-akses.php sangat sederhana seperti
1. defined('__NOT_DIRECT') || define('__NOT_DIRECT',1);
2. include 'cek-akses.php';

Sekarang buatlah folder admin dan file admin/index.php, admin/add-user.php dan admin/addartikel.php. Masing masing file ditambahkan kode di bawah di bagian paling atas.

1.
2.
3.
4.

<?php
defined('__NOT_DIRECT') || define('__NOT_DIRECT',1);
include '../cek-akses.php';
?>

Uji Coba
Gunakanlah sql berikut untuk menambahkan user di tabel user
1. INSERT INTO USER (user_id, name, password, TYPE) VALUES ('admin1',
'Admin', md5('admin'), 'admin');
2. INSERT INTO USER (user_id, name, password, TYPE) VALUES ('test',
'Test', md5('123456'), 'user');

Sekarang akses dari browser http://localhost/multi-login/admin/index.php maka Anda akan


dialihkan ke halaman login. Masukkan user id test dan password 123456. Setelah berhasil login akses
http://localhost/multi-login/admin/add-user.php maka akan muncul text "Anda tidak diizinkan
mengakses halaman ini!". Dengan langkah yang sama coba login dengan admin dan password
admin, lalu akses http://localhost/multi-login/admin/add-user.php maka Anda akan diperbolehkan
mengaksesnya serta text "Anda tidak diizinkan mengakses halaman ini!" akan hilang.

Anda mungkin juga menyukai