Membuat Menu Login

1. Buat form login sederhana saja..tampilannya username password sama tombol masuk. ada 3 objek yang harus dibuat , pertama input text untuk username, kemudian input text untuk password dan button untuk tombol masuk.

2. Seperti biasa buat 2 layer, layer yang pertama untuk objek dan layer yang kedua untuk script . pada layer pertama (untuk objek) buat 3 frame kosong (tau kan caranya??klik di frame kosong kemudian insert blank key frame) fungsi dari frame pertama adalah tampilan form login, frame kedua adalah tampilan jika user berhasil masuk (username dan passwordnya cocok) dan frame ke tiga adalah kondisi jiga user gagal masuk (username dan passwordnya tidak cocok atau dikosongkan) isi ketiga frame tersebut dengan skrip stop();

4. Setelah selesai membuat tiga frame dan mengisi tiap frame dengan action script stop(); maka melanjutkan pada langkah selanjutnya yaitu membuat form login. Klik pada frame pertama layer objek. kemudian buat form login. desain terserah anda

5. untuk tombol masuk beri instance name "tombol" (tanpa tanda petik) selanjutnya dengan menggunakan text tool kita akan membuat kolom username dan password.
6. untuk kolom username Pilih text tool kemudian ubah tipenya menjadi input text beri instance name username dan beri nama var username. Sesuaikan dengan ukuran rectangle yang telah dibuat agar tulisan pas dengan kolom , untuk kolom password lakukan hal yang sama seperti diatas akan tetapi ganti instance name nya menjadi katakunci dan var nya menjadi password .

7. Selanjutnya membuat tamppilan pada frame ke 2 dan ke 3, sederhana saja untuk tampilan ke 2 buat saja tulisan dengan text tools "ANDA BERHASIL MASUK" dan untuk Frame ke 3 buat tulisan "PASSWORD/USERNAME YANG ANDA MASUKAN SALAH" dan buat tombol untuk kembali ke form utama.

8. Setelah semua desain kita buat sekarang tinggal memasukan script kondisi pada layer Script. Script ini dimasukan untuk mengecek kondisi apabila username dan password cocok maka frame pindah ke frame 2, sedangkan jika gagal/ salah password/username maka frame akan pindah ke frame ke tiga. Untuk isi username dan password terserah anda.

username.text = "";
password.text = "";
tombol.onRelease = function (){
if (username == "data" and password == "indranugraha") {
gotoAndStop(2);
} else {
gotoAndStop(3);
}
}

Membuat Preload atau Loading pada Flash

Sebelum masuk ke sebuah halaman aplikasi biasanya terdapat tampilan load yang bergerak sampai akhirnya masuk ke suatu halaman.

Berikut cara pembuatan preload sederhana flash.

Pertama buat file pada flash.

Lalu import gambar background untuk bar preload nya. Seperti gambar berikut.

Lalu masukan bagian bar yang nantinya yang bergerak. Dengan cara import dan drag seperti tadi.

Pilih bagian bar load ( yang merah ) lalu tekan f8 dan pilih convert to symbols- movie clip.

Setelah itu klik dua kali bagian bar merah tsb. Hingga muncul jendela baru bernama symbol 1.

Pada jendela symbol1, pilih bar merahnya dan klik kanan (insert key frame pada timeline 60)

Buat layer baru (insert new layer), lalu buat jadi mask (klik kanan layer – pilih mask )

Beri nama layer 2 jadi mask supaya mempermudah.

Pada layer mask, insert keyframe pada timeline 1. Dan buat shape kotak pada sisi kiri load bar seperti gambar berikut.

Convert kotak mask tersebut jadi movie clip. Dan buat keyframe pada timeline 60.

Pada timeline 60, besarkan kotak mask hingga menutupi bagian bar load (yg merah pada gambar saya) liat gambar berikut.

Setelah itu beri motion tween (klik kanan di timeline mana saja antara timeline 1 – 60 lalu pilih  create motion tween). Lihat gambar berikut.

Buat layer baru dan Beri actionscript stop pada timeline 60 supaya tidak terjadi looping.

\

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 di atas telah 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>

Java Web Media adalah perusahaan yang bergerak di bidang web desain dan web development. Java Web Media berkantor di kota Depok. Kami siap membantu Anda mewujudkan website Anda.