Cara Membuat Form Sign Up / Register, Login Dan Logout di website

Membuat Form Sign Up/Register, Login dan Logout 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 akan dijelaskan tutorial untuk membuat form sign up dan login serta logout yang masih berbentuk sederhana. Untuk selanjutnya, anda dapat membuat sendiri pengembangan dari script ini.

www.warung-alkautsar.blogspot.com

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.

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.
<?phpinclude ("config.php");// konek ke server MYSQL$link = mysql_connect($server, $db_user, $db_pass)or die ("Could not connect to mysql because ".mysql_error());// pilih databasemysql_select_db($database)or die ("Could not select database because ".mysql_error());// bikin tabel di 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 "Mangstabs!!sekarang lanjut ke tahap yang ketiga";?> 
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 meng-copy script di bawah pada halaman baru Dreamweaver.
<html><head><title>REGISTRASI MEMBER</title></head><body><form action="register.php" method="post">Pilih Username: <input type="text" name="username" size="20"><br>Pilih Password: <input type="password" name="password" size="20"><br><input type="submit" value="Sign Up"></form></body></html>
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.
<?phpinclude("config.php");// konek ke server MYSQL$link = mysql_connect($server, $db_user, $db_pass)or die ("Could not connect to mysql because ".mysql_error());// pilih databasemysql_select_db($database)or die ("Could not select database because ".mysql_error());// cek kesamaan 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, username $username sudah ada yang punya<br>";
echo "<a href=register.html>Anda belum beruntung, silakan dicoba kembali</a>";
exit;
} else {
// masukkan data
$insert = mysql_query("insert into $table values (’NULL’, '".$_POST['username']."',
'".$_POST['password']."')")
or die("Could not insert data because ".mysql_error());
// tampilkan pesan sukses
echo "Akun Anda Telah Selesai Dibuat!<br>";
echo "Sekarang anda bisa <a href=login.html>Login sebagai member web Cyber4rt</a>";
}
?>

  • Sekarang anda perlu membuat form member untuk Login. Beri file ini dengan nama "login.html". Isi dari file ini yaitu sebagai berikut :

    <html><head>
    <title>MEMBER LOGIN</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>
  • Sekarang anda perlu membuat file yang akan menghubungkan file login.html dengan database, berikan nama file ini dengan "login.php". Script-nya dapat anda lihat dibawah.

    <?php
    include("config.php");
    // konek ke server MYSQL
    $link = mysql_connect($server, $db_user, $db_pass)
    or die ("Could not connect to mysql because ".mysql_error());
    // pilih 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 "Maaf, tidak ada username $username dengan password tersebut.<br>";
    echo "<a href=login.html>Coba lagi</a>";
    exit;
    } else {
    setcookie("loggedin", "TRUE", time()+(3600 * 24));
    setcookie("mysite_username", "$username");
    echo "Anda telah login!<br>";
    echo "Lanjutkan ke <a href=members.php>member</a> area.";
    }
    ?>
Perhatikan file tersebut pad baris ketiga paling bawah, disana berisi <a href=members.php>members.php ini adalah 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. Script-nya sebagai berikut :
<?php if (!isset($_COOKIE['loggedin'])) die("Anda sedang tidak login! Silakan login terlebih dahulu");$mysite_username = $HTTP_COOKIE_VARS["mysite_username"];echo "Anda login sebagai $mysite_username."; ?>
Akhirnya script yang terakhir yaitu script untuk logout. Script ini dapat dihubungkan dengan link pada html biasa. Link ini diletakkan pada area member. Lihat isi script-nya di bawah ini :
<?php// masa aktif cookiesetcookie ("loggedin", "", time() - 3600);echo "Anda sudah logout.<br>";echo "<a href=\"login.html\">Login</a>.";?>
Untuk peng-aplikasi-an dari script-script yang saya jelaskan di atas, dapat anda kreasikan sendiri. Selamat berkreasi.!!!!

Related Posts:

Membuat Text Area

Assalamu'alaikum wr. wb
Teks Area adalah sesuatu yang sulit aku jelaskan, tetapi wujudnya seperti dibawah ini. Sebuah kotak disamping dan bawah ada papan yang bisa digerakkan naik-turun dan kiri-kanan. Guna dari teks area ini untuk menulis kode HTML atau hal lain yang bisa dikopi oleh orang lain.



Cara membuatnya sebagai berikut:
Supaya lebih praktis, silahkan kopi semua kode di bawah ini:

<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode di sini. Kode HTML untuk tukeran link juga bisa </textarea></p>

Keterangan :
rows="6" menunjukkan tinggi dari teks area, bisa dirubah
cols="20" menunjukkan lebar dari teks area, bisa dirubah

Semoga menambah pengetahuan kita. Selamat mencoba

Wassalamu'alaikum wr. wb.

Related Posts:

Menambahkan Blogger Emoticons ke Postingan

Assalamu'alaikum wr. wb.
Bila suatu saat panjenengan semua mem-posting suatu artikel, agar kelihatan berbeda, boleh ditambahkan gambar-gambar dari blogger ini. Tertawa, cemberut, sedih dll. Tinggal di copy paste kodenya dan tempatkan dimana saja, di tengah kalimat, ataupun ujung kalimat.


<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif">


<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif">


<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif">


<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif">


<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif">


<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif">


<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif">

Semoga bisa menambah suasana yang lain dipostingan panjenengan. Semoga sukses dan terus semangat.

Wassalamu'alaikum wr. wb.

Related Posts:

Tips Dasar SEO

Teknik Dasar Optimisasi SEO adalah teknik agar blog menjadi dikenal dan diketahui. Tanpa adanya pengoptimalan SEO yang baik dan benar, suatu blog tidak akan berkembang dengan baik. Cara yang sering digunakan agar blog lebih mudah ditemukan oleh mesin pencari adalah:

PEMILIHAN KEYWORD YANG TEPAT
Pemilihan "keyword" yang tepat dan sesuai dengan content blog adalah teknik yang harus diterapkan. Yang terpenting adalah bagaimana keterkaitan antara keyword dengan tema postingan pada blog. Keterkaitan itulah yang membuat optimisasi SEO berhasil.Hal yang perlu diperhatikan : Jangan mengulang keyword sebanyak tiga kali karena jika terjadi, maka blog Sobat bisa dianggap spam/sampah.

TENTUKAN DOMAIN
Lebih lanjut mengenai "Pemilihan nama blog yang baik", Baca : Membuat nama blog yang tepat . Gunakanlah domain yang sesuai dengan blog Sobat. Gunakan nama blog yang sesuai dengan konten dari blog Sobat. Akan lebih baik jika Domain atau nama blog mengandung keyword.

JUDUL YANG MENARIK
Judul yang mengandung keyword. Gunakanlah judul yang mengandung keyword dari blogmu. Selain itu, buatlah judul post yang menarik. Misal : 5 teknik dasar SEO, 8 Cara berpromosi lewat facebook, dan sebagainya.

GUNAKAN META TAG DESCRIPTION
Meta Tag , ada banyak sekali, dan yang paling pokok adalah Title, Meta Tag Keyword, dan Meta Description. Nah, untuk Meta Tag description adalah komponen yang penting, karena meta ini akan muncul pada SERP. (Baca : Definisi SERP )

KEYWORD PADA POSTINGAN
Sisipkanlah keyword pada postingan. Akan lebih baik jika keyword diletakkan pada awal-awal pembuka postingan. Atau pada isi tulisan (terutama 20 kata pertama), link, alt text, dan nama file.

Nah, demikianlah 5 Teknik Dasar SEO. Jika Sobat ingin benar-benar mengoptimalkan SEO dan ingin mendapatkan rank, maka teruslah mengupdate blog Sobat dan carilah banyak backlink yang berkualitas.

Related Posts:

Cara menghilangkan tampilkan posting dengan label

www.warung-alkautsar.blogspot.com

Untuk menghilangkan tulisan tersebut ternyata tidaklah sulit. Pertama, masuk ke akun blogger, setelah itu masuk ke menu Design > Edit HTML > dan jangan lupa untuk mencentang Expand Widget template.

Jika sudah, silahkan cari kode di bawah ini:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Tinggal hapus saja kode tersebut dan ganti dengan kode berikut:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Related Posts: