Cara Membuat Halaman Log In Page di Dreamweaver CS3, CS4 dan CS5



        Banyak para pengguna Dreamweaver CS3, CS4 dan CS5 belum banyak tahu bagaimana caranya membuat sebuah halaman untuk Log In. Dalam tutorial kali ini, Anda akan belajar membuat sebuah halaman untuk log in.
          Sebelum masuk ke dalam tutorial ini, saya asumsikan Anda telah memiliki memiliki tabel data MySQL yang menyimpan data username dan password yang akan digunakan untuk log in dan Anda telah membuat Database Connection.

Berikut ini adalah contoh form yang akan digunakan.

<!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>Untitled Document</title>
</head>  <body>
<form id=”form1″ name=”form1″ method=”post” action=”">
<p><label>Username:<input type=”text” name=”username” id=”username” /></label> </p>
<p><label>Password: <input type=”text” name=”password” id=”password” /></label></p>
<p><input type=”submit” name=”submit” id=”submit” value=”Log In” /></p>
</form>
</body>
</html>
 
Maka tampilannya akan tampak seperti gambar di bawah ini:





Menambahkan fasilitas Log In user

Setelah form diatas jadi, berikut adalah langkah selanjutnya:

1. Klik Server Behaviors > User Authentication > Log In User
2.  Window Log In User akan keluar, isikan beberapa parameter berikut ini.
3. Get input from form: form1
4. Username field: username
5. Password field: password
6. Validate using connection: ……………..pilih koneksi yang telah Anda buat
7. Table: administrator (bisa jadi nama tabelnya berbeda. Dalam tutorial ini diasumsikan fasilitas log in menggunakan data username dan password yang disimpan dalam tabel administrator).
8. Username column: username
9. Password column: password
10. If log in succeds, go to: index.php, link ini harus diisi untuk mengarahkan user ke halaman yang telah Anda tentukan setelah melakukan Log In
11. Go to previous URL (If exist), ini dapat Anda beri tanda check. Maksud dari ini adalah jika Anda mencoba memasukki halaman yang diproteksi, maka biasanya Anda akan diarahkan ke ke halaman log in. Begitu Anda melakukan log in, maka Anda otomatis akan diredirect ke halaman terproteksi tersebut
12. If log in fails, go to: login.php, ini artinya jika seseorang mengalami kegagalan log in mau diarahkan ke halaman mana.
13. Restrict access based on: Username and password. Jika Anda memilih Username, password and access level, pastikan tabel Administrator juga menyediakan kolom level administrator.
14. Klik OK.
15. Dreamweaver otomatis akan menambahkkan scripts Log In User di atas kode HTML yang sebelumnya Anda buat.

Berikut adalah kode akhirnya:

<?php require_once(‘Connections/llll.php’); ?>
<?php
if (!function_exists(“GetSQLValueString”)) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = “”, $theNotDefinedValue = “”)
{
if (PHP_VERSION < 6) {
$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['username'])) {
$loginUsername=$_POST['username'];
$password=$_POST['password'];
$MM_fldUserAuthorization = “”;
$MM_redirectLoginSuccess = “index.php”;
$MM_redirectLoginFailed = “login.php”;
$MM_redirecttoReferrer = true;
mysql_select_db($database_llll, $llll);
$LoginRS__query=sprintf(“SELECT username, password FROM administrator WHERE username=%s AND password=%s”,
GetSQLValueString($loginUsername, “text”), GetSQLValueString($password, “text”));

$LoginRS = mysql_query($LoginRS__query, $llll) or die(mysql_error());
$loginFoundUser = mysql_num_rows($LoginRS);
if ($loginFoundUser) {
$loginStrGroup = “”;

if (PHP_VERSION >= 5.1) {session_regenerate_id(true);} else {session_regenerate_id();}
//declare two session variables and assign them
$_SESSION['MM_Username'] = $loginUsername;
$_SESSION['MM_UserGroup'] = $loginStrGroup;

if (isset($_SESSION['PrevUrl']) && true) {
$MM_redirectLoginSuccess = $_SESSION['PrevUrl'];
}
header(“Location: ” . $MM_redirectLoginSuccess );
}
else {
header(“Location: “. $MM_redirectLoginFailed );
}
}
?>
<!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>Untitled Document</title>
</head>
<body>
<form id=”form1″ name=”form1″ method=”POST” action=”<?php echo $loginFormAction; ?>”>
<p><label>Username:<input type=”text” name=”username” id=”username” /></label> </p>
<p><label>Password: <input type=”text” name=”password” id=”password” /></label></p>
<p><input type=”submit” name=”submit” id=”submit” value=”Log In” /></p>
</form>
</body>
</html>

 SEMOGA BERMANFA'AT....



[Read More...]


Cara membuat css menggunakan Dreamweaver



          Editor untuk membuat CSS (Cascading Style Sheet) sebenarnya sudah banyak tersedia, baik dalam bentuk aplikasi yang gratis, berbayar, maupun yang secara online. Bahkan jika sudah mengerti cara penulisan dan penyimpanannya, kita bisa gunakan editor yang sangat sederhana dan mendukung penyimpanan format text seperti notepad. Kali ini saya akan sedikit berbagi tentang bagaiman cara membuat css dengan dreamweaver.

         Sekilas info, Dreamweaver adalah sebuah perangkat lunak yang digunakan untuk membuat atau menyunting halaman web yang dinamis maupun statis. Editor ini mendukung semua bahasa pemrograman web seperti ASP, PHP, XML, JSP, JS, CSS dan lainya. Program ini banyak digunakan oleh para pengembang web karena fitur-fitur yang disediakan sangat membantu dan mudah untuk digunakan.

          Masih sekilas info, Dreamweaver pada awal kemunculanya diberi nama Macromedia Dreamweaver karena mulanya dikembangkan oleh sebuah perusahaan yang bernama Macromedia, sampai dengan versi 8 masih menggunakan nama yang sama. Setelah itu, sekitar tahun 2005 Macromedia Dreamweaver bersama dengan produk yang lainya seperti Macromedia Flash, Macromedia Firework dll dikembangkan oleh Adobe System dengan sedikit perubahan nama menjadi Adobe Macromedia CS (Creative Suite). Dimulai dari Macromedia CS 1 atau versi 9, sampai sekarang tahun 2012 sudah CS 6.

Sekilas info sudah habis, sekarang info yang anda tunggu-tunggu yaitu bagaimana cara membuat css dengan dreamweaver.

        Cara membuat css dengan dreamweaver sangat mudah, kita bisa gunakan beberapa cara dengan bantuan fitur yang tersedia dalam dreamweaver. cara yang termudah diantaranya adalah :

1. Mengetikkan langsung kode css pada bagian layar code view (kalau sudah banyak hafal perintah dan atributnya cara ini recomended)


           Dengan cara ini kita akan dibantu dengan auto complete sehingga walaupun tidak sepenuhnya hafal tinggal memilih perintah yang sesuai.

2. Menambahkan css dengan menggunakan fitur tab css yang ada dikanan layar dreamweaver, lihat gambar dengan lingkaran merah.


              Pada lingkaran merah ke 2, ada beberapa tombol kecil yang dapat digunakan untuk mengelola css. Klik gambar rantai jika anda ingin melampirkan file css yang sudah jadi, klik gambar yang ada tanda  plus (+) untuk menambah css baru, gambar pensil untuk mengedit dan gambar tong sampah untuk menghapus.
Untuk menambahkan css, kita harus menekan tombol +, nanti akan muncul seperti gambar berikut :


            Di layar tersebut kita diminta memilih jenis css yang akan dibuat. Pilihan pertama untuk membuat css class yang dapat digunakan oleh banyak objek/tag (silahkan nanti cari referensi tentang css class), pilihan kedua jika anda ingin menempelkan css pada tag html, dan pilihan ketiga untuk membuat ID khusus sesuai dengan nama objek yang nanti dibuat. Trus ada pilihan define in, pilih yang pertama (New Style..) jika ingin cssnya tersimpan di file tersendiri, atau pilihan kedua This document only jika anda ingin cssnya diletakkan dalam bagian header (<head>) dokumen yang aktif.

Saya akan pandu untuk membuat dengan pilihan selector type yang kedua yaitu tag.
Kita akan coba menambahkan pada tag H1, dan This documen only.


 Kemudian tekan oke, maka akan muncul tampilan seperti gambar berikut :


          Semua isian tidak harus diisi, jika tidak perlu boleh dibiarkan kosong. Karena contoh ini membuat css untuk tag H1 maka diantaranya yang diubah adalah jenis font, dan ukuran. Jika anda ingin menambahkan yang lainya seperti kotak, warna latar, silahkan buka tab pilihan selanjutnya. Setelah semuanya selesai, tekan tombol ok.

Hasil cssnya bisa anda lihat di bagian code view seperti berikut :





3. Menambahkan css lewat page properties, ini standard penggunaan css di dreamweaver versi 8 sd CS 6. Pada saat kita mengubah pengaturan halaman melalui page properties dreamweaver otomatis menambahkan css pada halaman yang kita buat. Page Properties bisa dibuka dimenu Modify atau Tombol Page Properties pada bagian bar properties dibagia bawah layar. Lihat gambar :




Semoga bermanfaat.
[Read More...]


 

Categories

Recent Comments

Popular Posts

Return to top of page Copyright © 2010 | Platinum Theme Converted into Blogger Template by HackTutors