پلاگین نمایش هواداران در تویتر

پلاگین نمایش هواداران در تویتر

امروز ما در این آموزش قصد داریم تا به شما نحوه ایجاد یک فرم ثبت نام/ورود ساده اما جالب رو آموزش بدیم.از ویژگی هاب بارز این فرم این است که شما میتوانید با یک کلیک آن را از بالای صفحه به پایین کشیده و یا به بالا انتقال دهید.

برای مشاهده لینک وارد شود

ما کار را بانوشتن کدهای مربوط به پایگاه داده که قرار است اطلاعات ثبت نامی ما را نگه دارند شروع می کنیم.

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;

توجه کنید که ما یک id از نوع صحیح تعریف کردیم تا به هر یک از اعضای وبسایت اختصاص داده شود.(با هر ثبت نام جدید به طور اتوماتیک یک واحد اضافه میشود.)همچنین ما usr را به عنوان کلید تعریف کردیم تا هیچ دو کاربری ،نام کاربری نداشته باشند.ما بعدا از این کلید برای تعیین اینکه آیا نام کاربری از کاربر دریافت شده است استفاده خواهیم کرد.

در قدم دوم ما  کدهای HTML را که برای ایجاد فرم لازم داریم در صفحه وبسایتمان وارد می کنیم.

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" /> &nbsp;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">&nbsp;</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">&nbsp;</li>
</ul>

</div> <!-- / top -->
</div> <!--panel -->

در قسمتهایی از کد بالا ما از کدهای PHP استفاده کردیم که آنها تعدادی از عملگرهای PHP هستند که [‘SESSION[‘usr_$ یا [ ‘SESSION[‘id_$ را چک می کنند که تعریف شده باشند.ما از این برای این استفاده می کنیم که کاربران حتما عضو سایت باشند و وارد سایت شده باشند.شما از این امکان میتونید برای نمایش مطالبی خاص فقط برای کاربران وارد شده  استفاده کنید.
بعد از کدهای فرم ،ما بقیه کدهای صفحه را قرار می دهیم.

<div class="pageContent">

<div id="main">

<div class="container">
<h1>A Cool Login System</h1>
<h2>Easy registration management with PHP &amp; jQuery</h2>
</div>

<div class="container">
<p>This is a ...</p>
<div class="clear"></div>

</div>

</div>

چیز خاصی در کدهای بالا وجود ندارد.اجازه بدید به سراغ نوشتن کدهای PHP برویم.

i21

خوب ما کدهای PHP رو در دو بخش مجزا آموزش می دهیم تا درک آنها آسانتر بشود.خوب به سراغ بخش اول کدها می رویم.

demo.php

define('INCLUDE_CHECK',true);

require 'connect.php';
require 'functions.php';

// Those two files can be included only if INCLUDE_CHECK is defined

session_name('tzLogin');
// Starting the session

session_set_cookie_params(2*7*24*60*60);
// Making the cookie live for 2 weeks

session_start();

if($_SESSION['id'] && !isset($_COOKIE['tzRemember']) && !$_SESSION['rememberMe'])
{
	// If you are logged in, but you don't have the tzRemember cookie (browser restart)
	// and you have not checked the rememberMe checkbox:

	$_SESSION = array();
	session_destroy();

	// Destroy the session
}

if(isset($_GET['logoff']))
{
	$_SESSION = array();
	session_destroy();
	header("Location: demo.php");
	exit;
}

if($_POST['submit']=='Login')
{
	// Checking whether the Login form has been submitted

	$err = array();
	// Will hold our errors

	if(!$_POST['username'] || !$_POST['password'])
		$err[] = 'All the fields must be filled in!';

	if(!count($err))
	{
		$_POST['username'] = mysql_real_escape_string($_POST['username']);
		$_POST['password'] = mysql_real_escape_string($_POST['password']);
		$_POST['rememberMe'] = (int)$_POST['rememberMe'];

		// Escaping all input data

		$row = mysql_fetch_assoc(mysql_query("SELECT id,usr FROM tz_members WHERE usr='{$_POST['username']}' AND pass='".md5($_POST['password'])."'"));

		if($row['usr'])
		{
			// If everything is OK login

			$_SESSION['usr']=$row['usr'];
			$_SESSION['id'] = $row['id'];
			$_SESSION['rememberMe'] = $_POST['rememberMe'];

			// Store some data in the session

			setcookie('tzRemember',$_POST['rememberMe']);
			// We create the tzRemember cookie
		}
		else $err[]='Wrong username and/or password!';
	}

	if($err)
		$_SESSION['msg']['login-err'] = implode('<br />',$err);
		// Save the error messages in the session

	header("Location: demo.php");
	exit;
}

درکد بالا tzRemember با استفاده از کوکی کنترل می کند تا در صورتی که کاربر تیک گزینه”مرا به خاطر داشته باش” را نزده باشد پس از بستن مرورگر و باز کردن دوباره آن از کاربر نام کاربری و رمز عبور را در خواست نماید ولی اگر تیک گزینه را زده باشد دیگر لزومی برای وارد کردن آنها نیست.
sessionها بطور معمولا اطلاعات را تا ۲ هفته در خود نگه میدارند
خوب به سراغ بخش دوم کد میرویم.

else if($_POST['submit']=='Register')
{
	// If the Register form has been submitted
	$err = array();

	if(strlen($_POST['username'])<4 || strlen($_POST['username'])>32)
	{
		$err[]='Your username must be between 3 and 32 characters!';
	}

	if(preg_match('/[^a-z0-9\-\_\.]+/i',$_POST['username']))
	{
		$err[]='Your username contains invalid characters!';
	}

	if(!checkEmail($_POST['email']))
	{
		$err[]='Your email is not valid!';
	}

	if(!count($err))
	{
		// If there are no errors
		$pass = substr(md5($_SERVER['REMOTE_ADDR'].microtime().rand(1,100000)),0,6);
		// Generate a random password

		$_POST['email'] = mysql_real_escape_string($_POST['email']);
		$_POST['username'] = mysql_real_escape_string($_POST['username']);
		// Escape the input data

		mysql_query("	INSERT INTO tz_members(usr,pass,email,regIP,dt)
					VALUES(
					'".$_POST['username']."',
					'".md5($pass)."',
					'".$_POST['email']."',
					'".$_SERVER['REMOTE_ADDR']."',
					NOW()
		)");

		if(mysql_affected_rows($link)==1)
		{
			send_mail(	'demo-test@tutorialzine.com',
					$_POST['email'],
					'Registration System Demo - Your New Password',
					'Your password is: '.$pass);
					$_SESSION['msg']['reg-success']='We sent you an email with your new password!';
		}
		else $err[]='This username is already taken!';
	}

	if(count($err))
	{
		$_SESSION['msg']['reg-err'] = implode('<br />',$err);
	}

	header("Location: demo.php");
	exit;
}

$script = '';
if($_SESSION['msg'])
{
	// The script below shows the sliding panel on page load
	$script = '
	<script type="text/javascript">
	$(function(){
		$("div#panel").show();
		$("#toggle a").toggle();
	});
	</script>';
}

ما تمام خطاهایی را که احتمالا با آنها مواجه بشویم را در داخل یک آرایه با نامerr $ قرار دادیم که بعدا به متغییر SESSION_$ اختصاص خواهیم داد.
شما شاید تا حالا با سایت هایی مواجه شده اید که هنگام زدن دکمه ثبت نام ،صفحه دوباره بارگذاری میشود تا اطلاعات را ارسال کند و به صفحه دیگری منتقل میشود..این کمی باعث ایجاد مشکل میشود.
ما با استفاده از تابع بالایی این مشکل را حل کردیم یعنی اطلاعات در همان صفحه و بدون رفتن به صفحه جدید ارسال میشود.
در آخر کد نیز ما نحوه نمایش فرم را برای کاربران مشخص کرده ایم.
i12
حالا به سراغ نوشتن کدهای CSS می رویم.ما با استفاده از کدهای CSS استایل مربوط به فرم کشویی را خواهیم نوشت.

demo.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* The reset rules */
	margin:0px;
	padding:0px;
}

body{
	color:#555555;
	font-size:13px;
	background: #eeeeee;
	font-family:Arial, Helvetica, sans-serif;
	width: 100%;
}

h1{
	font-size:28px;
	font-weight:bold;
	font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
	letter-spacing:1px;
}

h2{
	font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
	font-size:10px;
	font-weight:normal;
	letter-spacing:1px;
	padding-left:2px;
	text-transform:uppercase;
	white-space:nowrap;
	margin-top:4px;
	color:#888888;
}

#main p{
	padding-bottom:8px;
}

.clear{
	clear:both;
}

#main{
	width:800px;
	/* Centering it in the middle of the page */
	margin:60px auto;
}

.container{
	margin-top:20px;

	background:#FFFFFF;
	border:1px solid #E0E0E0;
	padding:15px;

	/* Rounded corners */
	-moz-border-radius:20px;
	-khtml-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius:20px;
}

.err{
	color:red;
}

.success{
	color:#00CC00;
}

a, a:visited {
	color:#00BBFF;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

.tutorial-info{
	text-align:center;
	padding:10px;
}

در آخرین بخش این آموزش به سراغ نوشتن کدهای جی کوئری می رویم.

demo.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<!-- PNG FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte IE 6]>
<script type="text/javascript" src="login_panel/js/pngfix/supersleight-min.js"></script>
<![endif]-->

<script src="login_panel/js/slide.js" type="text/javascript"></script>

<?php echo $script; ?>

ما ابتدا کتابخانه جی کوئری مورد نیاز خود را از گوگل CDN وارد کردیم.
در آخر کد هم ما با استفاده از متغییر script در صورت لزوم فرم ثبت نام را در صفحه هنگام بارگذاری نمایش خواهیم داد.

پایان

0
-1


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


هفت + 9 =