Sabtu, 17 November 2012


MEMBUAT FORM SIGNUP DAN LOGIN WEB DENGAN DREAMWEAVER



Untuk membuat Form sign up dan Login 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 saya akan menjelaskan tutorial untuk membuat form sign up dan login yang masih berbentuk sederhana. Untuk selanjutnya, anda dapat membuat sendiri pengembangan dari script ini.
1. 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.
2. 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.
<?php
include (”config.php”);
// connect to the mysql server
$link = mysql_connect($server, $db_user, $db_pass)
or die (”Could not connect to mysql because “.mysql_error());
// select the database
mysql_select_db($database)
or die (”Could not select database because “.mysql_error());
// create table on 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 “Mantap!!sekarang lanjut deh ke tahap yang ketiga”;
?>
3. 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 mengkopi script di bawah pada halaman baru dreamweaver .
<html><head>
<title>User Registration</title>
</head><body>
<form action=”register.php” method=”post”>
Pick a Username: <input type=”text” name=”username” size=”20″><br>
Pick a Password: <input type=”password” name=”password” size=”20″><br>
<input type=”submit” value=”Sign Up”>
</form>
</body></html>
4. 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.
<?php
include(”config.php”);
// connect to the mysql server
$link = mysql_connect($server, $db_user, $db_pass)
or die (”Could not connect to mysql because “.mysql_error());
// select the database
mysql_select_db($database)
or die (”Could not select database because “.mysql_error());
// check if the username is taken
$check = “select id from $table where username = ‘”.$_POST['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 ye, username $username sudah keduluan diambil orang.<br>”;
echo “<a href=register.html>Kata Wiswakarma, tidak boleh menyerah, coba lagi deh..</a>”;
exit;
} else {
// insert the data
$insert = mysql_query(”insert into $table values (’NULL’, ‘”.$_POST['username'].”‘,
‘”.$_POST['password'].”‘)”)
or die(”Could not insert data because “.mysql_error());
// print a success message
echo “Akun Anda Telah Selesai Dibuat!<br>”;
echo “Sekarang anda bisa <a href=login.html>Login sebagai member web Wiswakarma</a>”;
}
?>
5. Sekarang anda perlu membuat form member untuk Login. Beri file ini dengan nama ”login.html”. Isi dari file ini yaitu sbb.
<html><head>
<title>User Registration</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>
6. Sekarang anda perlu membuat file yang akan menghubungkan file login.html dengan database, berikan nama file ini dengan ”login.php”. Scriptnya dapat anda lihat dibawah.
<?php
include(”config.php”);
// connect to the mysql server
$link = mysql_connect($server, $db_user, $db_pass)
or die (”Could not connect to mysql because “.mysql_error());
// select the 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 “Sorry, there is no username $username with the specified password.<br>”;
echo “<a href=login.html>Try again</a>”;
exit;
} else {
setcookie(”loggedin”, “TRUE”, time()+(3600 * 24));
setcookie(”mysite_username”, “$username”);
echo “You are now logged in!<br>”;
echo “Continue to the <a href=members.php>members</a> section.”;
}
?>
7. perhatikan file tersebut pad baris ketiga paling bawah, disana berisi <a href=members.php> members.php ini adlah 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. Scriptnya sbb;
<?php if (!isset($_COOKIE['loggedin'])) die(”You are not logged in!
log in”);
$mysite_username = $HTTP_COOKIE_VARS["mysite_username"];
echo “you are logged in as $mysite_username.
“; ?>
8. Fiuuuhhh…akhirnya script yang terakhir yaitu script untuk logout. Script ini dapat dihubungkan dengan link pada html biasa. Link ini diletakkan pada area member. Untuk isi scriptnya dapat anda lihat sbb:
<?php
// expire cookie
setcookie (”loggedin”, “”, time() - 3600);
echo “You are now logged out.<br>”;
echo “<a href=\”login.html\”>Log in</a>.”;
?>

cara membuat website


Kini saatnya kita melanjutkan tutorial web kita yang membahas cara membuat web dengan menggunakan Macromedia DreamweaverDibagian pertamatutorial berkelanjutan ini kita telah mengenal sekilas mengenai profil Dreamweaversebagai salah satu software web design. Bahkan pembaca mungkin sudah mencoba mendownload dreamweaver cs4 yang merupakan versi terbaru saat posting ini saya rilis. Oke deh, saya asumsikan pembaca sudah mendownload dan sudah menginstal dreamweaver baik itu yang asli dan sudah di-purchasetrial, maupun yang versi tak asli yangserial number-nya didapat dari crack-crack-an, kayak saya ini :D. Atau kalau belum menginstal juga tidak masalah kok. Dreamweaver tidak membuat kita pintar, tapi kita yangmembuat dreamweaver menjadi pintar. Gimana caranya? Dibagian ini kita akan mempelajaridasar-dasar dreamweaver untuk membuat website.
  1. Silahkan jalankan program Dreamweaver jika pembaca telah menginstalnya.
  2. Pada menu utama, pilih File --> New, maka akan muncul tampilan pilihan jenis dokumen baru yang ingin kita buat. Maksudnya adalah kita memilih apakah ingin membuat halaman web basic (statis), web dinamis (biasanya untuk web berbasis database), halaman template, dan lain-lain. Setiap kategori terdiri dari beberapa jenis dokumen. Menurut saya jenis ini dibedakan berdasarkan bahasa dan fungsi yang akan digunakan untuk halaman website yang akan kita buat. Karena saat ini kita mencoba belajar yang dasar terlebih dahulu, maka silahkan pilih kategori Basic Page dan jenisnya HTML.
  3. Tampilan layar desain Dreamweaver terdiri dari 3 jenis, yaitu code, split, dan design. 
    Layar Code berfungsi sebagai tempat kita membuat halaman web dengan mengetik bahasa pemograman secara langsung. Artinya, layar inilah yang menampilkan struktur bahasa pemograman web yang dipakai pada halaman web yang sedang kita buat. Pada bagian design, kita membuat website dengan menggunakan menu-menu yang tersedia, misalnya menu menambahkan gambar, membuat tabel, mengatur tampilan tulisan, dan lain-lain. Kita tidak perlu mengetik bahasa pemograman halaman web yang kita buat karena secara otomatis, setiap kita menambahkan sebuah elemen, maka dreamweaver akan menerjemaahkannya kedalam kalimat-kalimat bahasa pemograman yang kita gunakan. Inilah keunggulan dreamweaverdibanding notepad, frontpage, dan mungkin yang lainnya. Karena pada dreamweaver sudah tersedia menu-menu yang siap pakai untuk mendesain halaman web. Selain itu, interface-nya juga sangat bagus dan mudah digunakan. Bagian split berguna untuk membagi halaman kerja dreamweaver menjadi 2, separuh untuk menampilkan layar code, dan separuh lagi menampilkan layar design. Hal ini berguna jika kita ingin mendesain halaman melalui layar design namun ingin melihat perubahan kode bahasa webnya, dan juga sebaliknya. Jika pembaca masuk ke layarCode, Anda akan melihat struktur HTML seperti yang pernah saya tunjukkan pada postingan yang ini. Sebagai contoh struktur:

    <title>Untitled Document</title>
    dimana struktur tersebut berfungsi untuk mendefenisikan judul halaman web kita yang akan muncul di title bar browser.
  4. Dibagian kiri atas dibawah menu File, terdapat menu dropdown yang terdiri dari beberapa pilihan. Pilihan ini berguna untuk memilih menu-menu desain yang akan kita gunakan. Misalnya kita ingin menambah gambar, maka pilih Common, maka disebelah kanannya akan muncul menu-menu bergambar yang bisa kita gunakan, salah satunya untuk memasukkan gambar ke halaman website.
  5. Coba pembaca masuk ke layar Design seperti yang saya jelaskan pada poin 3. Setelah memilih bagian tersebut, dibagian bawah pembaca akan melihat bagian Properties. Bagian ini berfungsi untuk mengatur tampilan dari elemen-elemen yang kita tambahkan kedalam halaman web yang kita buat. Menu-menu Properties ini hanya terlihat jika kita bekerja pada layar Design.
  6. Dibagian samping, terdapat pula bagian yang bernama Panel. Salah satu fungsi panel ini adalah untuk mengatur file-file web yang telah kita buat.
  7. Dibagian atas tepatnya disamping menu pilihan layar, ada kotak isian bernama Title. Bagian berfungsi untuk memberikan judul halaman web yang sedang kita buat yang akan muncul padatitle bar browser. 
    Fungsi ini sama seperti yang dijelaskan pada poin 3 diatas mengenai tag title. Coba pembaca ganti tulisan yang ada di kotak tersebut menjadi misalnya "Tutorial Website Dengan Dreamweaver". Setelah itu, kembali ke layar code dan lihat perubahan yang terjadi pada bagian tag