Hari ini kami membuat sistem login / pendaftaran yang keren & sederhana. Ini akan memberi Anda kemampuan untuk dengan mudah membuat area khusus anggota di situs Anda dan memberikan proses pendaftaran yang mudah.
Ini akan didorong oleh PHP dan menyimpan semua pendaftaran ke dalam database MySQL. Untuk menambahkan bakat yang dibutuhkan, kami menggunakan panel jQuery geser yang luar biasa , yang dikembangkan oleh Web-kreation .
Langkah 1 – MySQL
Pertama kita harus membuat tabel yang akan menampung semua registrasi. Kode ini tersedia di table.sql
table.sql
Table structure for table `tz_members`
--
CREATE TABLE `tz_members` (
`id` int(11) NOT NULL auto_increment,
`usr` varchar(32) collate utf8_unicode_ci NOT NULL default '',
`pass` varchar(32) collate utf8_unicode_ci NOT NULL default '',
`email` varchar(255) collate utf8_unicode_ci NOT NULL default '',
`regIP` varchar(15) collate utf8_unicode_ci NOT NULL default '',
`dt` datetime NOT NULL default '0000-00-00 00:00:00',
PRIMARY KEY (`id`),
UNIQUE KEY `usr` (`usr`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
Perhatikan bahwa kita telah mendefinisikan id sebagai bilangan bulat dengan auto_increment – secara otomatis ditetapkan ke setiap anggota situs. Selain itu, kami telah menetapkan usr sebagai kunci unik – dua pengguna dengan nama pengguna yang sama tidak diperbolehkan. Kami kemudian menggunakan ini dalam pendaftaran untuk menentukan apakah nama pengguna telah digunakan.Setelah Anda membuat tabel, jangan lupa untuk mengisi kredensial database Anda di connect.php agar Anda dapat menjalankan demo di server Anda sendiri.
Langkah 2 – XHTML
Pertama, kita harus memasukkan formulir kreasi Web ke dalam halaman kita.
demo.php
<!-- Panel -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>The Sliding jQuery Panel</h1>
<h2>A register/login solution</h2>
<p class="grey">You are free to use this login and registration system in you sites!</p>
<h2>A Big Thanks</h2>
<p class="grey">This tutorial was built on top of <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Go to site">Web-Kreation</a>'s amazing sliding panel.</p>
</div>
<?php
if(!$_SESSION['id']):
// If you are not logged in
?>
<div class="left">
<!-- Login Form -->
<form class="clearfix" action="" method="post">
<h1>Member Login</h1>
<?php
if($_SESSION['msg']['login-err'])
{
echo '<div class="err">'.$_SESSION['msg']['login-err'].'</div>';
unset($_SESSION['msg']['login-err']);
// This will output login errors, if any
}
?>
<label class="grey" for="username">Username:</label>
<input class="field" type="text" name="username" id="username" value="" size="23" />
<label class="grey" for="password">Password:</label>
<input class="field" type="password" name="password" id="password" size="23" />
<label><input name="rememberMe" id="rememberMe" type="checkbox" checked="checked" value="1" /> Remember me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
</form>
</div>
<div class="left right">
<!-- Register Form -->
<form action="" method="post">
<h1>Not a member yet? Sign Up!</h1>
<?php
if($_SESSION['msg']['reg-err'])
{
echo '<div class="err">'.$_SESSION['msg']['reg-err'].'</div>';
unset($_SESSION['msg']['reg-err']);
// This will output the registration errors, if any
}
if($_SESSION['msg']['reg-success'])
{
echo '<div class="success">'.$_SESSION['msg']['reg-success'].'</div>';
unset($_SESSION['msg']['reg-success']);
// This will output the registration success message
}
?>
<label class="grey" for="username">Username:</label>
<input class="field" type="text" name="username" id="username" value="" size="23" />
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23" />
<label>A password will be e-mailed to you.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</form>
</div>
<?php
else:
// If you are logged in
?>
<div class="left">
<h1>Members panel</h1>
<p>You can put member-only data here</p>
<a href="registered.php">View a special member page</a>
<p>- or -</p>
<a href="?logoff">Log off</a>
</div>
<div class="left right">
</div>
<?php
endif;
// Closing the IF-ELSE construct
?>
</div>
</div> <!-- /login -->
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Hello <?php echo $_SESSION['usr'] ? $_SESSION['usr'] : 'Guest';?>!</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#"><?php echo $_SESSION['id']?'Open Panel':'Log In | Register';?></a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
</div> <!--panel -->
Di beberapa tempat dalam kode ini, ada beberapa operator PHP yang memeriksa apakah $_SESSION['usr'] atau $_SESSION['id'] didefinisikan. Ini benar hanya jika pengunjung halaman masuk ke situs, yang memungkinkan kami menampilkan konten tertentu kepada anggota situs. Kami akan membahasnya secara detail sebentar lagi.Setelah formulir, kami meletakkan sisa halaman.
<div class="pageContent">
<div id="main">
<div class="container">
<h1>A Cool Login System</h1>
<h2>Easy registration management with PHP & jQuery</h2>
</div>
<div class="container">
<p>This is a ...</p>
<div class="clear"></div>
</div>
</div>
Tidak ada yang istimewa di sini. Mari kita lanjutkan dengan backend PHP.
<div class="pageContent">
<div id="main">
<div class="container">
<h1>A Cool Login System</h1>
<h2>Easy registration management with PHP & jQuery</h2>
</div>
<div class="container">
<p>This is a ...</p>
<div class="clear"></div>
</div>
</div>