Cara membuat menu CSS dropdown

Diposting oleh Unknown | Rabu, 22 Mei 2013

Membuat Aplikasi Login Menggunakan PHP - Mungkin ini hanya sebagai referensi aja buat Teman-teman yang lagi membuat aplikasi web dan lagi mencari tutorial bagaimana Cara Membuat Aplikasi Login Menggunakan PHP. Saya akan memberikan scrip PHP Aplikasi Login untuk Teman-teman.


Cara Membuat Aplikasi Login Menggunakan PHP

Saya asumsikan Teman-teman sudah membuat sebuah database yang terdiri dari Username dan Password. Pada script ini nama databasenya adalah "database_ku", mungkin Teman-teman bisa menggantinya dengna nama database Teman-teman. Perhatikan script dibawah ini:

Nama file koneksi.php

<?php
$dbhost ="localhost";
$dbusername ="root";
$dbpassword ="";
$dbname ="database_ku";

//Koneksi dengan database di server
mysql_connect( $dbhost, $dbusername, $dbpassword) or die ("Koneksi gagal");
mysql_select_db($dbname) or die("Databse tidak bisa di buka");
?>
Script diatas adalah scrip untuk koneksi ke database Teman-teman. Perhatikan tulisan yang berwarna biru, ganti tulisan yang berwarna biru tersebut dengan nama database Teman-teman.

Nama file login.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</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<h3>Masukan Username dan Password</h3>
<div class="content">
<form action="login-logout.php?act=login" method="post" id="loginForm">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Username</td>
<td align="left" valign="middle">:
<input type="text" name="username" id="username" size="30" /></td>
</tr>
<tr>
<td>Password</td>
<td align="left" valign="middle">:
<input type="password" name="password" id="password" size="30" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="left" valign="middle">: <input type="submit" name="login" id="login" value="Login" /></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
Script diatas adalah untuk menampilkan halaman login pada browser. Teman-teman bisa mengeditnya sesuai dengan kebutuhan Teman-teman.

Nama file login-logout.php

<?php
session_start();

//Koneksi dengan database
include "koneksi.php";

//Aksi Login
if($_GET['act']=='login'):
//cek username dan password user dalam table users database
$username =$_POST['username'];
$password =md5($_POST['password']);
$query =mysql_query("SELECT * FROM users WHERE username='$username' AND password='$password'");
$data_user =mysql_fetch_array($query);
if($data_user['username'] == $username and $data_user['password'] == $password){
//men-set data sesi
session_register('username','password');
header('location:index.php');
}
else {
//penanganan error
$error ="";
if(empty($username) and empty($_POST['password'])){
$error ="<b>Username</b> dan <b>Password</b> kosong";
}else if(empty($username)){
$error ="<b>Username</b> kosong";
}else if(empty($_POST['password'])){
$error ="<b>Password</b> kosong";
}else{
$error ="<b>Username</b> dan <b>Password</b> tidak sesuai";
}

echo "<h3>Login Gagal:</h3><p>$error. <br /><a href='login.php'>Kembali</a><p>";
}

//Aksi Logout
else:
//menghapus data sesi
session_destroy();
header('location:index.php');
endif;
?>
Script diatas adalah proses untuk menjalankan fungsi login dan fungsi logout pada aplikasi. Perhatikan script diatas dengan seksama dan pelajari. Setelah Teman-teman pelajari, sesuaikan dengan kebutuhan Teman-teman. Jika ada kekurangan dari script diatas Teman-teman dapat menambahkannya pada aplikasi yang Teman-teman buat.

Nama file index.php

<?php
session_start();
//cek user logged in
if(!isset($_SESSION['username']) and !isset($_SESSION['password'])){
header('location:login.php'); //ke halaman login
}
?>
<!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>Skripku</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<?php
//koneksi dengan database
include "koneksi.php";
?>

<div id="wrapper">
<h3>Halaman Users</h3>
<div class="content">
<p>Hi,<?php echo $_SESSION['username'];?>. Anda berhak mengakses halaman ini.
<a href="login-logout.php?act=logout"><b>Logout</b></a></p>

<!--Begin Data Users-->
<p class="heading">Data users :</p>
<table width="1004" border="0" cellpadding="0" cellspacing="0">
<tr class="db-title">
<td width="39">No.</td>
<td width="58">id</td>
<td width="137">username</td>
<td width="196">password</td>
<td width="137">email</td>
<td width="164">first name</td>
<td width="189">last name</td>
<td width="84">aksi</td>
</tr>
<?php
//SELECT yang diikuti oleh pengurutan data ORDER BY
//SELECT nama_field FROM nama_tabel ORDER BY nama_field
$query =mysql_query('SELECT * FROM users ORDER BY id');
$no=1;
while($row=mysql_fetch_array($query)):
?>
<tr>
<td align="left" valign="top"><?=$no?></td>
<td align="left" valign="top"><?=$row['id']?></td>
<td align="left" valign="top"><?=$row['username']?></td>
<td align="left" valign="top"><?=$row['password']?></td>
<td align="left" valign="top"><?=$row['email']?></td>
<td align="left" valign="top"><?=$row['first_name']?></td>
<td align="left" valign="top"><?=$row['last_name']?></td>
<td align="left" valign="top"><a href="index.php?act=edit&id=<?=$row['id']?>">Edit</a> |
<a href="manipulasi.php?act=delete&id=<?=$row['id']?>" onclick="return confirm('Anda yakin akan menghapus user: <?=$row['username']?>')">Hapus</a></td>
</tr>
<?php
$no++;
endwhile;
?>
</table>
<!--End Data Users-->

<?php if($_GET['act']=='edit'): //tampilkan form edit jika menekan link Edit
//SELECTyang diikuti kriteria data WHERE
$query =mysql_query("SELECT * FROM users WHERE id='$_GET[id]'");
$no=1;
$row=mysql_fetch_array($query);
?>
<!--Begin Form Edit User-->
<p class="heading">Edit user :</p>
<form action="manipulasi.php?act=update" method="post" name="form-edit-user">
<input name="id" id="id" type="hidden" size="40" value="<?=$row['id']?>" />
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="middle">username</td>
<td align="left" valign="top">:
<input name="username" id="username" type="text" size="40" value="<?=$row['username']?>" /></td>
</tr>
<tr>
<td align="left" valign="middle">password</td>
<td align="left" valign="top">:
<input name="pass" id="pass" type="password" size="40" /></td>
</tr>
<tr>
<td align="left" valign="middle">pass cof.</td>
<td align="left" valign="top">:
<input name="pass-conf" id="pass-conf" type="password" size="40" /></td>
</tr>
<tr>
<td align="left" valign="middle">email</td>
<td align="left" valign="top">:
<input name="email" id="email" type="text" size="40" value="<?=$row['email']?>" /></td>
</tr>
<tr>
<td align="left" valign="middle">first name</td>
<td align="left" valign="top">:
<input name="first" id="first" type="text" size="40" value="<?=$row['first_name']?>" /></td>
</tr>
<tr>
<td align="left" valign="middle">last name</td>
<td align="left" valign="top">:
<input name="last" id="last" type="text" size="40" value="<?=$row['last_name']?>" /></td>
</tr>
<tr>
<td align="left" valign="middle">aksi</td>
<td align="left" valign="top">:
<input name="upadate" type="submit" value="Update" /></td>
</tr>
<tr>
<td align="left" valign="middle"><a href="index.php">Hide</a></td>
<td align="left" valign="top">Jika Password tidak diubah, <br />password dan pas conf. di kosongkan saja.</td>
</tr>
</table>
</form>
<!--End Form Edit User-->
<?php endif; ?>

<!--End Form Tambah User-->
<p class="heading">Tambah user :</p>
<form action="manipulasi.php?act=insert" method="post" name="form-tambah-user">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="middle">username</td>
<td align="left" valign="top">:<input name="username" id="username" type="text" size="30" /></td>
</tr>
<tr>
<td align="left" valign="middle">password</td>
<td align="left" valign="top">:<input name="pass" id="pass" type="password" size="30" /></td>
</tr>
<tr>
<td align="left" valign="middle">pass cof.</td>
<td align="left" valign="top">:<input name="pass-conf" id="pass-conf" type="password" size="30" /></td>
</tr>
<tr>
<td align="left" valign="middle">email</td>
<td align="left" valign="top">:<input name="email" id="email" type="text" size="30" /></td>
</tr>
<tr>
<td align="left" valign="middle">first name</td>
<td align="left" valign="top">:<input name="first" id="first" type="text" size="30" /></td>
</tr>
<tr>
<td align="left" valign="middle">last name</td>
<td align="left" valign="top">:<input name="last" id="last" type="text" size="30" /></td>
</tr>
<tr>
<td align="left" valign="middle">aksi</td>
<td align="left" valign="top">:<input name="tambah" type="submit" value="Insert" /></td>
</tr>
</table>
</form>
<!--End Form Tambah User-->
</div>
</div>

</body>
</html>
Script diatas gunanya menampilkan halaman depan pada web. Halaman diatasa bisa dibuka setelah login berhasil. Jika login belum berhasil maka halaman diatas tidak akan terbuka. Sesuaikan dengan kebutuhan Teman-teman.

Nama file manipulasi.php

<?php 
session_start();
//cek user logged in
if(!isset($_SESSION['username']) and !isset($_SESSION['password'])){
header('location:login.php'); //jump ke halaman login
}

//koneksi dengan database
include "koneksi.php";

//pilih aksi/manipulasi yang akan di terapkan pada tabel database
$act =$_GET['act'];

//insert
if($act=='insert'){
 if(validasiForm()):
  $password =md5($_POST['pass']);
//INSERT INTO nama_tabel (field ke-1, field ke-2….field ke-n) VALUES (nilai_field ke-1, nilai_field ke-2….nilai_field ke-n)
  mysql_query("INSERT INTO users(username,
password,
email,
first_name,
last_name) 
  VALUES('$_POST[username]',
'$password',
'$_POST[email]',
'$_POST[first]',
'$_POST[last]')");
  header('location:index.php');
endif;

}

//update
else if($act=='update'){
//jika password di ubah
if(!empty($_POST['pass'])):
//validasi password
if($_POST['pass'] == $_POST['pass-conf']){
$password =md5($_POST['pass']);
//UPDATE nama_tabel SET nama_field=data_baru WHERE nama_field=data_lama
  mysql_query("UPDATE users SET username = '$_POST[username]',
                                password   = '$password',
                                email   = '$_POST[email]',
                                first_name = '$_POST[first]',
                                last_name  = '$_POST[last]'
                          WHERE id='$_POST[id]'");
  header('location:index.php');
}else {
die("<b>UPDATE Gagal</b>. password dan konfirmasi password (pass conf) harus sama. 
<a href='index.php?act=edit&id=$_POST[id]'>kembali</a>");
}
//jika password tidak di ubah
else:
mysql_query("UPDATE users SET username = '$_POST[username]',
                                email   = '$_POST[email]',
                                first_name = '$_POST[first]',
                                last_name  = '$_POST[last]'
                          WHERE id='$_POST[id]'");
  header('location:index.php');
endif;
}

//delete (hapus) user
else if($act='delete'){
//DELETE FROM nama_tabel WHERE kondisi
mysql_query("DELETE FROM users WHERE id='$_GET[id]'");
  header('location:index.php');
}


//validasi form
function validasiForm(){
$pesanError ='';
if(empty($_POST['username'])) 
$pesanError .='username harus diisi. ';
if (empty($_POST['pass'])) 
$pesanError .='password harus diisi. ';
if (empty($_POST['pass-conf'])) 
$pesanError .='pass-conf harus diisi. ';
if ($_POST['pass'] != $_POST['pass-conf']) 
$pesanError .='password dan konfirmasi password (pass conf) harus sama. ';

if(strlen($pesanError) > 0){
die("<b>INSERT Gagal</b>. ".$pesanError." <a href='index.php'>kembali</a>");
}else {
return true;
}

}
?>

Untuk script diatas berguna untuk melakukan proses insert(menambah data), update(mengubah data), delete(menghapus data), dan validasi form pada halaman index.php. Sesuikan dengan kebutuhan Teman-teman. Jika masih ada yang kurang Teman-teman dapat menambahinya.

Untuk mempercantik tampilan Teman-teman membutuhkan file css. Untuk file css projek diatas perhatikan script dibawah ini:

Nama file style.css

body {
margin-top: 0px;
margin-bottom: 0px;

}
#wrapper {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #CCCCCC;
padding: 10px;
}
#wrapper h3 {
font-size: 18px;
color: #330000;
text-decoration: underline;
}
#wrapper .content .heading {
font-size: 16px;
font-weight: bold;
}
#wrapper .content .db-title {
font-size: 14px;
font-weight: bold;
color: #330000;
background-color: #CCCCCC;
text-align: center;
}
#wrapper .content td {
padding: 2px;
border: 1px solid #999999;
}
File css diatas berguna untuk mempercantik halaman web yang kita buat tadi. Silahkan Teman-teman pelajari.

Ok itulah tadi script-script yang dibutuhkan untuk Membuat Aplikasi Login Menggunakan PHP. Jika Teman-teman masih bingung bagaimana Cara Membuat Aplikasi Login Menggunakan PHP Teman-teman dapat mempelajari script-script diatas. Menurut saya script diatas sudah lumayan jika diterapkan pada projek pembuatan website yang membutuhkan aplikasi login. Jika masih ada kekurangan pada script diatas Teman-teman dapat menambahinya sesuai dengan kebutuhan Teman-teman. Semoga postingan ini berguna untuk Teman-teman yang lagi membuat projek web dan yang sedang mencari tutorial bagaimana Cara Membuat Aplikasi Login Menggunakan PHP. Selamat mencoba.

source : ganoox
Label: | 2 komentar

2 komentar:

  1. Anonim31 Mei 2013 pukul 22.35

    Gan salah judul tuh ? :D

    BalasHapus
    Balasan
    1. Unknown31 Mei 2013 pukul 22.56

      hehehe
      iya,salah judul neh,lupa mau ganti judul xD
      gomen ne gan (> w ~)7

      Hapus

Next → ← Prev
Rss: Top
▲Top▲