Membuat Halaman Login di Dreamweaver ~ Rino Sumarno

Membuat Halaman Login

Sebelum memulai tutorial ini anda harus membuat tabel untuk admin silahkan lihat disini. Bagi anda yang mengikuti tutorial ini dari awal silahkan buka file index.php yang ada di dalam folder fileadmin.
Halaman login pada website tentunya berisi login form, pertama kita akan membuat login formnya terlebih dahulu.
Setelah anda membuka file index.php dalam folder fileadmin, klik ke dalam area kerja dreamweaver anda, kemudian ikuti langkah – langkahnya :
Klik Insert > Form > Form
Klik Insert >Table, isikan table propertynya sbb :

Row : 3
Collomns : 3
Table Width : kosongkan saja
Border thickness : kosongkan saja
Cell padding : 5
Cell spacing : 5
Klik ok.

Maka akan terlihat 9 buah kotak dengan garis putus – putus. Pada baris kotak pojok kiri atas isikan Nama, kotak di sebelah kanan nama isikan : (titik dua).
Kotak di bawah Nama isikan Password, dan di sebelah kanan Password isikan : (titik dua).
Pada baris Nama, klik di dalam kotak paling kanan, kemudian klik Insert > Form > Text Field, pada Id isikan nama, yang lain biarkan secara default, kalau sudah klik Ok.
Pada baris Password, klik di dalam kotak paling kanan, kemudian klik Insert > Form > Text Field, pada Id isikan password, yang lain biarkan secara default, kalau sudah klik Ok.
Setelah muncul TextField untuk memasukkan password, klik TextField tersebut, pada panel Properties di bagian bawah pada bagian Type pilih Password
Selanjutnya kita akan menyatukan atau me Merge Cell pada baris paling bawah agar menjadi satu kotak saja, caranya arahkan cursor anda kesebelahnya, kemudian klik Row tersebut, perhatikan gambar berikut.
seleksi rw Membuat Halaman Login

Jika sudah terseleksi, pada bagian panel Properties klik icon Merges selected cells using spans, kemudian pada Horz rubah menjadi Right.
merge cells di dreamweaver cs3 Membuat Halaman Login

merge cells di dreamweaver cs3 Membuat Halaman Login

Kalau sudah, klik kembali di dalam kotak tersebut, lalu klik Insert > Form > Button, pada Id isi login terakhir klik Ok. Untuk merubah tulisan di dalam tombol login tersebut ubah Value‘nya pada panel Properties.
Sampai disini, jika anda perhatikan melalui Code View maka kodenya akan seperti ini :

<form id="form1" name="form1" method="post" action="">

  <table cellspacing="5" cellpadding="5">

    <tr>

      <td>Nama</td>

      <td>:</td>

      <td><label>

        <input type="text" name="nama" id="nama" />

      </label></td>

    </tr>

    <tr>

      <td>Password</td>

      <td>:</td>

      <td><label>

        <input type="text" name="password" id="password" />

      </label></td>

    </tr>

    <tr align="right">

      <td colspan="3"><label>

        <input type="submit" name="login" id="login" value="Login" />

      </label></td>

    </tr>

  </table>

</form>

Simpan pekerjaan anda Ctrl + S, kemudian preview tekan F12
ebelum Membuat halaman login ini, buatlah 2 file php baru, beri nama :

home.php
login-gagal.php

Simpan dalam folder fileadmin
File home.php ini adalah halaman depan administrator anda, sedangkan login-gagal.php ini adalah halaman yang dituju jika password dan username yang dimasukkan tidak cocok, isikan saja file login-gagal.php dengan kata – kata
“Ooops, login gagal. Silahkan coba kembali”
Pada kata Silahkan coba kembali berikan link menuju halaman index.php.
Buka kembali file index.php milik anda, klik Insert > Data Objects > User Authecation > Log In User
Setelah muncul jendela Log In User, isikan pengaturannya seperti gambar berikut
setting login user Membuat Halaman Login Part 2

setting login user Membuat Halaman Login Part 2

Jika sudah klik ok.
Sedikit penjelasan isian dari Log In User :

Get Input From Form : form login yang telah anda buat sebelumnya
Username field : kolom tempat anda mengisikan nama / username anda
Password field : kolom tempat anda mengisikan password anda
Validate usig connection : adalah koneksi dari website yang telah anda buat, jika anda belum membuatnya silahkan baca disini
Table : pada kali ini anda memilih table admin yang ada dalam database websiteku yang telah anda buat sebelumnya.
If login succeeds, go to : halaman yang dituju jika login berhasil
If login fails, go to : halaman yang dituju jika login gagal
Restric access base on : hak batasan login.

Selanjutnya kita akan memberikan fungsi MD5 pada login form ini, melalui code view tekan CTRL + F (find) ketikkan

$password=$_POST['password'];

kemudian klik Find Next, jika sudah ketemu ubah kodenya seperti ini

$password=md5 ($_POST['password']);

jadi kode keseluruhannya menjadi seperti ini

<?php require_once('../Connections/websiteku.php'); ?>

<?php

if (!function_exists("GetSQLValueString")) {

function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")

{

  $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {

    case "text":

      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

      break;    

    case "long":

    case "int":

      $theValue = ($theValue != "") ? intval($theValue) : "NULL";

      break;

    case "double":

      $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";

      break;

    case "date":

      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

      break;

    case "defined":

      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;

      break;

  }

  return $theValue;

}

}

?>

<?php

// *** Validate request to login to this site.

if (!isset($_SESSION)) {

  session_start();

}

$loginFormAction = $_SERVER['PHP_SELF'];

if (isset($_GET['accesscheck'])) {

  $_SESSION['PrevUrl'] = $_GET['accesscheck'];

}

if (isset($_POST['nama'])) {

  $loginUsername=$_POST['nama'];

  $password=md5 ($_POST['password']);

  $MM_fldUserAuthorization = "";

  $MM_redirectLoginSuccess = "home.php";

  $MM_redirectLoginFailed = "login-gagal.php";

  $MM_redirecttoReferrer = false;

  mysql_select_db($database_websiteku, $websiteku);

  $LoginRS__query=sprintf("SELECT nama, password FROM `admin` WHERE nama=%s AND password=%s",

    GetSQLValueString($loginUsername, "text"), GetSQLValueString($password, "text"));

  $LoginRS = mysql_query($LoginRS__query, $websiteku) or die(mysql_error());

  $loginFoundUser = mysql_num_rows($LoginRS);

  if ($loginFoundUser) {

     $loginStrGroup = "";

    //declare two session variables and assign them

    $_SESSION['MM_Username'] = $loginUsername;

    $_SESSION['MM_UserGroup'] = $loginStrGroup;          

    if (isset($_SESSION['PrevUrl']) && false) {

      $MM_redirectLoginSuccess = $_SESSION['PrevUrl'];    

    }

    header("Location: " . $MM_redirectLoginSuccess );

  }

  else {

    header("Location: ". $MM_redirectLoginFailed );

  }

}

?>

ya cukup sekian tutorial membuat halaman login di dreamweaver cs kali ini, silahkan simpan pekerjaan anda tekan CTRL + S kemudian preview tekan F12, jika anda mencoba form login tersebut maka anda akan di bawa kehalaman login gagal, karena kita belum mengisi data2 dalam table admin dalam database websiteku.

sumber :http://mous-design.com