এই টিউটোরিয়ালে, আমরা পিএইচপি ব্যবহার করে সাইনআপ এবং লগইন অপারেশন সম্পর্কে শিখব।
সাইন আপ এবং লগইন অপারেশনের জন্য ফাইল স্ট্রাকচার
signup.php- ব্যবহারকারীর সাইনআপ বা ব্যবহারকারীর নিবন্ধনের জন্য
check_availability.php- ব্যবহারকারীর নাম এবং ইমেল-আইডি উপলব্ধতা
index.php- ব্যবহারকারীর লগইনের জন্য
welcome.php- লগইন করার পর ব্যবহারকারী এই পৃষ্ঠায় পুনঃনির্দেশ করুন
logout.php – লগআউট পৃষ্ঠা
config.php– ডাটাবেস সংযোগ ফাইল
pdosignup.sql– সাইন আপের জন্য Sql টেবিল কাঠামো
ধাপ 1- একটি ডাটাবেস তৈরি করুন
ব্রাউজার টাইপ http://localhost/phpmyadmin খুলুন, ‘pdosignup’ নামে একটি ডাটাবেস তৈরি করুন। ডাটাবেস তৈরি করার পরে sql স্ক্রিপ্ট চালান বা প্যাকেজের ভিতরে দেওয়া sql ফাইল আমদানি করুন।
sql টেবিল ব্যবহারকারী ডেটার জন্য কাঠামো
CREATE TABLE IF NOT EXISTS `userdata` (
`id` int(11) NOT NULL,
`FullName` varchar(200) DEFAULT NULL,
`UserName` varchar(12) DEFAULT NULL,
`UserEmail` varchar(200) DEFAULT NULL,
`UserMobileNumber` varchar(10) DEFAULT NULL,
`LoginPassword` varchar(255) DEFAULT NULL,
`RegDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=latin1;
-- Indexes for table `userdata`
--
ALTER TABLE `userdata`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `userdata`
--
ALTER TABLE `userdata`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=8;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
ধাপ 2- একটি ডাটাবেস কনফিগারেশন ফাইল config.php তৈরি করুন
<?php
// DB credentials.
define('DB_HOST','localhost'); // Host name
define('DB_USER','root'); // db user name
define('DB_PASS',''); // db user password name
define('DB_NAME','pdosignup'); // db name
// Establish database connection.
try
{
$dbh = new PDO("mysql:host=".DB_HOST.";dbname=".DB_NAME,DB_USER, DB_PASS);
}
catch (PDOException $e)
{
exit("Error: " . $e->getMessage());
}
?>
ধাপ 3- একটি সাইনআপ বা নিবন্ধন ফর্ম signup.php তৈরি করুন
Fullname can contain any letters only with spaces
pattern=”[a-zA-Z\s]+”
Username can contain any letters or numbers, without spaces 6 to 12 chars
pattern=”^[a-zA-Z][a-zA-Z0-9-_.]{5,12}$”
email accepts valid email address
type=“email”
Mobile Number Contain only 10 digit numeric values
pattern=”[0-9]{10}” maxlength=”10″
Password should be at least 4 characters
pattern=”^\S{4,}$”
onchange=”this.setCustomValidity(this.validity.patternMismatch ? ‘Must have at least 4 characters’ : ”); if(this.checkValidity()) form.password_two.pattern = this.value;”
Confirm Password should be same as password
pattern=”^\S{4,}$”
onchange=”this.setCustomValidity(this.validity.patternMismatch ? ‘Please enter the same Password as above’ : ”)”
<form class="form-horizontal" action='' method="post">
<div class="control-group">
<!-- Full name -->
<label class="control-label" for="fullname">Full Name</label>
<div class="controls">
<input type="text" id="fname" name="fname" pattern="[a-zA-Z\s]+" title="Full name must contain letters only" class="input-xlarge" required>
<p class="help-block">Username can contain any letters or numbers, without spaces</p>
</div>
</div>
<div class="control-group">
<!-- Username -->
<label class="control-label" for="username">Username</label>
<div class="controls">
<input type="text" id="username" name="username" onBlur="checkUsernameAvailability()" pattern="^[a-zA-Z][a-zA-Z0-9-_.]{5,12}$" title="User must be alphanumeric without spaces 6 to 12 chars" class="input-xlarge" required>
<!-- Message for username availability-->
<span id="username-availability-status" style="font-size:12px;"></span>
<p class="help-block">Username can contain any letters or numbers, without spaces</p>
</div>
</div>
<div class="control-group">
<!-- E-mail -->
<label class="control-label" for="email">E-mail</label>
<div class="controls">
<input type="email" id="email" name="email" placeholder="" onBlur="checkEmailAvailability()" class="input-xlarge" required>
<!-- Message for Email availability-->
<span id="email-availability-status" style="font-size:12px;"></span>
<p class="help-block">Please provide your E-mail</p>
</div>
</div>
<div class="control-group">
<!-- Mobile Number -->
<label class="control-label" for="mobilenumber">Mobile Number </label>
<div class="controls">
<input type="text" id="mobilenumber" name="mobilenumber" pattern="[0-9]{10}" maxlength="10" title="10 numeric digits only" class="input-xlarge" required>
<p class="help-block">Mobile Number Contain only numeric values,net</p>
</div>
</div>
<div class="control-group">
<!-- Password-->
<label class="control-label" for="password">Password</label>
<div class="controls">
<input type="password" id="password" name="password" pattern="^\S{4,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Must have at least 4 characters' : ''); if(this.checkValidity()) form.password_two.pattern = this.value;" required class="input-xlarge">
<p class="help-block">Password should be at least 4 characters</p>
</div>
</div>
<div class="control-group">
<!-- Confirm Password -->
<label class="control-label" for="password_confirm">Password (Confirm)</label>
<div class="controls">
<input type="password" id="password_confirm" name="password_confirm" pattern="^\S{4,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '')"" class="input-xlarge">
<p class="help-block">Please confirm password</p>
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls">
<button class="btn btn-success" type="submit" name="signup">Signup </button>
</div>
</form>
ধাপ 3.2: j-query ব্যবহার করে ডেটাতে ব্যবহারকারীর নাম এবং ইমেল উপলব্ধতা পরীক্ষা করুন
<!--Javascript for check username availability-->
<script>
function checkUsernameAvailability() {
$("#loaderIcon").show();
jQuery.ajax({
url: "check_availability.php",
data:'username='+$("#username").val(),
type: "POST",
success:function(data){
$("#username-availability-status").html(data);
$("#loaderIcon").hide();
},
error:function (){
}
});
}
</script>
<!--Javascript for check email availability-->
<script>
function checkEmailAvailability() {
$("#loaderIcon").show();
jQuery.ajax({
url: "check_availability.php",
data:'email='+$("#email").val(),
type: "POST",
success:function(data){
$("#email-availability-status").html(data);
$("#loaderIcon").hide();
},
error:function (){
event.preventDefault();
}
});
}
</script>
ডাটাবেসে উপলব্ধতা পরীক্ষা করার জন্য পিএইচপি কোড (check_availability.php)
<?php
require_once("config.php");
// Code for checking username availabilty
if(!empty($_POST["username"])) {
$uname= $_POST["username"];
$sql ="SELECT UserName FROM userdata WHERE UserName=:uname";
$query= $dbh -> prepare($sql);
$query-> bindParam(':uname', $uname, PDO::PARAM_STR);
$query-> execute();
$results = $query -> fetchAll(PDO::FETCH_OBJ);
if($query -> rowCount() > 0)
{
echo "<span style='color:red'> Username already exists.</span>";
} else{
echo "<span style='color:green'> Username available for Registration.</span>";
}
}
// Code for checking email availabilty
if(!empty($_POST["email"])) {
$email= $_POST["email"];
$sql ="SELECT UserEmail FROM userdata WHERE UserEmail=:email";
$query= $dbh -> prepare($sql);
$query-> bindParam(':email', $email, PDO::PARAM_STR);
$query-> execute();
$results = $query -> fetchAll(PDO::FETCH_OBJ);
if($query -> rowCount() > 0)
{
echo "<span style='color:red'>Email-id already exists.</span>";
} else{
echo "<span style='color:green'>Email-id available for Registration.</span>";
}
}
?>
ধাপ: 3.3 – ডাটাবেসে সাইন আপ মান সন্নিবেশ করার জন্য কোড
<?php
//Database Configuration File
include('config.php');
error_reporting(0);
if(isset($_POST['signup']))
{
//Getting Post Values
$fullname=$_POST['fname'];
$username=$_POST['username'];
$email=$_POST['email'];
$mobile=$_POST['mobilenumber'];
$password=md5($_POST['password']);
// Query for validation of username and email-id
$ret="SELECT * FROM userdata where (UserName=:uname || UserEmail=:uemail)";
$queryt = $dbh -> prepare($ret);
$queryt->bindParam(':uemail',$email,PDO::PARAM_STR);
$queryt->bindParam(':uname',$username,PDO::PARAM_STR);
$queryt -> execute();
$results = $queryt -> fetchAll(PDO::FETCH_OBJ);
if($queryt -> rowCount() == 0)
{
// Query for Insertion
$sql="INSERT INTO userdata(FullName,UserName,UserEmail,UserMobileNumber,LoginPassword) VALUES(:fname,:uname,:uemail,:umobile,:upassword)";
$query = $dbh->prepare($sql);
// Binding Post Values
$query->bindParam(':fname',$fullname,PDO::PARAM_STR);
$query->bindParam(':uname',$username,PDO::PARAM_STR);
$query->bindParam(':uemail',$email,PDO::PARAM_STR);
$query->bindParam(':umobile',$mobile,PDO::PARAM_INT);
$query->bindParam(':upassword',$password,PDO::PARAM_STR);
$query->execute();
$lastInsertId = $dbh->lastInsertId();
if($lastInsertId)
{
$msg="You have signup Scuccessfully";
}
else
{
$error="Something went wrong.Please try again";
}
}
else
{
$error="Username or Email-id already exist. Please try again";
}
}
?>
এখানে আমরা সাইনআপ (signup.php) এর জন্য যে সম্পূর্ণ কোড লিখেছি তা হল:
<?php
//Database Configuration File
include('config.php');
error_reporting(0);
if(isset($_POST['signup']))
{
//Getting Post Values
$fullname=$_POST['fname'];
$username=$_POST['username'];
$email=$_POST['email'];
$mobile=$_POST['mobilenumber'];
$password=md5($_POST['password']);
// Query for validation of username and email-id
$ret="SELECT * FROM userdata where (UserName=:uname || UserEmail=:uemail)";
$queryt = $dbh -> prepare($ret);
$queryt->bindParam(':uemail',$email,PDO::PARAM_STR);
$queryt->bindParam(':uname',$username,PDO::PARAM_STR);
$queryt -> execute();
$results = $queryt -> fetchAll(PDO::FETCH_OBJ);
if($queryt -> rowCount() == 0)
{
// Query for Insertion
$sql="INSERT INTO userdata(FullName,UserName,UserEmail,UserMobileNumber,LoginPassword) VALUES(:fname,:uname,:uemail,:umobile,:upassword)";
$query = $dbh->prepare($sql);
// Binding Post Values
$query->bindParam(':fname',$fullname,PDO::PARAM_STR);
$query->bindParam(':uname',$username,PDO::PARAM_STR);
$query->bindParam(':uemail',$email,PDO::PARAM_STR);
$query->bindParam(':umobile',$mobile,PDO::PARAM_INT);
$query->bindParam(':upassword',$password,PDO::PARAM_STR);
$query->execute();
$lastInsertId = $dbh->lastInsertId();
if($lastInsertId)
{
$msg="You have signup Scuccessfully";
}
else
{
$error="Something went wrong.Please try again";
}
}
else
{
$error="Username or Email-id already exist. Please try again";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PDO | Registration Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<style>
.errorWrap {
padding: 10px;
margin: 0 0 20px 0;
background: #fff;
border-left: 4px solid #dd3d36;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
}
.succWrap{
padding: 10px;
margin: 0 0 20px 0;
background: #fff;
border-left: 4px solid #5cb85c;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
}
</style>
<!--Javascript for check username availability-->
<script>
function checkUsernameAvailability() {
$("#loaderIcon").show();
jQuery.ajax({
url: "check_availability.php",
data:'username='+$("#username").val(),
type: "POST",
success:function(data){
$("#username-availability-status").html(data);
$("#loaderIcon").hide();
},
error:function (){
}
});
}
</script>
<!--Javascript for check email availability-->
<script>
function checkEmailAvailability() {
$("#loaderIcon").show();
jQuery.ajax({
url: "check_availability.php",
data:'email='+$("#email").val(),
type: "POST",
success:function(data){
$("#email-availability-status").html(data);
$("#loaderIcon").hide();
},
error:function (){
event.preventDefault();
}
});
}
</script>
</head>
<body>
<form class="form-horizontal" action='' method="post">
<fieldset>
<div id="legend" style="padding-left:4%">
<legend class="">Register | <a href="index.php">Sign in</a></legend>
</div>
<!--Error Message-->
<?php if($error){ ?><div class="errorWrap">
<strong>Error </strong> : <?php echo htmlentities($error);?></div>
<?php } ?>
<!--Success Message-->
<?php if($msg){ ?><div class="succWrap">
<strong>Well Done </strong> : <?php echo htmlentities($msg);?></div>
<?php } ?>
<div class="control-group">
<!-- Full name -->
<label class="control-label" for="fullname">Full Name</label>
<div class="controls">
<input type="text" id="fname" name="fname" pattern="[a-zA-Z\s]+" title="Full name must contain letters only" class="input-xlarge" required>
<p class="help-block">Full can contain any letters only</p>
</div>
</div>
<div class="control-group">
<!-- Username -->
<label class="control-label" for="username">Username</label>
<div class="controls">
<input type="text" id="username" name="username" onBlur="checkUsernameAvailability()" pattern="^[a-zA-Z][a-zA-Z0-9-_.]{5,12}$" title="User must be alphanumeric without spaces 6 to 12 chars" class="input-xlarge" required>
<span id="username-availability-status" style="font-size:12px;"></span>
<p class="help-block">Username can contain any letters or numbers, without spaces 6 to 12 chars </p>
</div>
</div>
<div class="control-group">
<!-- E-mail -->
<label class="control-label" for="email">E-mail</label>
<div class="controls">
<input type="email" id="email" name="email" placeholder="" onBlur="checkEmailAvailability()" class="input-xlarge" required>
<span id="email-availability-status" style="font-size:12px;"></span>
<p class="help-block">Please provide your E-mail</p>
</div>
</div>
<div class="control-group">
<!-- Mobile Number -->
<label class="control-label" for="mobilenumber">Mobile Number </label>
<div class="controls">
<input type="text" id="mobilenumber" name="mobilenumber" pattern="[0-9]{10}" maxlength="10" title="10 numeric digits only" class="input-xlarge" required>
<p class="help-block">Mobile Number Contain only 10 digit numeric values</p>
</div>
</div>
<div class="control-group">
<!-- Password-->
<label class="control-label" for="password">Password</label>
<div class="controls">
<input type="password" id="password" name="password" pattern="^\S{4,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Must have at least 4 characters' : ''); if(this.checkValidity()) form.password_two.pattern = this.value;" required class="input-xlarge">
<p class="help-block">Password should be at least 4 characters</p>
</div>
</div>
<div class="control-group">
<!-- Confirm Password -->
<label class="control-label" for="password_confirm">Password (Confirm)</label>
<div class="controls">
<input type="password" id="password_confirm" name="password_confirm" pattern="^\S{4,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '')"" class="input-xlarge">
<p class="help-block">Please confirm password</p>
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls">
<button class="btn btn-success" type="submit" name="signup">Signup </button>
</div>
</div>
</fieldset>
</form>
<script type="text/javascript">
</script>
</body>
</html>
ধাপ 4- সাইন ইন বা লগইন করুন
একটি HTML সাইন ফর্ম তৈরি করুন
<form id="loginForm" method="post">
div class="form-group">
<label for="username" class="control-label">Username / Email id</label>
<input type="text" class="form-control" id="username" name="username" required="" title="Please enter you username or Email-id" placeholder="email or username" >
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="password" class="control-label">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password" value="" required="" title="Please enter your password">
<span class="help-block"></span>
</div>
<button type="submit" class="btn btn-success btn-block" name="login">Login</button>
</form>
ব্যবহারকারী বৈধ ব্যবহারকারীর নাম/ইমেল এবং পাসওয়ার্ডের মাধ্যমে লগইন করতে পারেন।
সাইন ইন বা লগইন করার জন্য পিএইচপি কোড
<?php
session_start();
//Database Configuration File
include('config.php');
error_reporting(0);
if(isset($_POST['login']))
{
// Getting username/ email and password
$uname=$_POST['username'];
$password=md5($_POST['password']);
// Fetch data from database on the basis of username/email and password
$sql ="SELECT UserName,UserEmail,LoginPassword FROM userdata WHERE (UserName=:usname || UserEmail=:usname) and (LoginPassword=:usrpassword)";
$query= $dbh -> prepare($sql);
$query-> bindParam(':usname', $uname, PDO::PARAM_STR);
$query-> bindParam(':usrpassword', $password, PDO::PARAM_STR);
$query-> execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
if($query->rowCount() > 0)
{
$_SESSION['userlogin']=$_POST['username'];
echo "<script type='text/javascript'> document.location = 'welcome.php'; </script>";
} else{
echo "<script>alert('Invalid Details');</script>";
}
}
?>
ধাপ 5- একটি স্বাগত পৃষ্ঠা তৈরি করুন।
লগইন করার পর ব্যবহারকারী এই পৃষ্ঠায় পুনঃনির্দেশ করবে। ব্যবহারকারী সেশন ব্যবহার করে এই পৃষ্ঠাটি যাচাই করুন যদি কেউ লগইন ছাড়াই এই পৃষ্ঠাটি অ্যাক্সেস করতে চান তাহলে স্বয়ংক্রিয়ভাবে index.php-এ রিডাইরেক্ট হবে।
welcome.php এর জন্য কোড
<?php
session_start();
include('config.php');
// Validating Session
if(strlen($_SESSION['userlogin'])==0)
{
header('location:index.php');
}
else{
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PDO | Welcome Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<style type="text/css">
.center {text-align: center; margin-left: auto; margin-right: auto; margin-bottom: auto; margin-top: auto;}
</style>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="hero-unit center">
<?php
// Code for fecthing user full name on the bassis of username or email.
$username=$_SESSION['userlogin'];
$query=$dbh->prepare("SELECT FullName FROM userdata WHERE (UserName=:username || UserEmail=:username)");
$query->execute(array(':username'=> $username));
while($row=$query->fetch(PDO::FETCH_ASSOC)){
$username=$row['FullName'];
}
?>
<h1>Welcome Back <font face="Tahoma" color="red"><?php echo $username;?> ! </font></h1>
<br />
<p>Lorem ipsum dolor sit amet, sit veniam senserit mediocritatem et, melius aperiam complectitur an qui. Ut numquam vocibus accumsan mel. Per ei etiam vituperatoribus, ne quot mandamus conceptam has, pri molestiae constituam quaerendum an. In molestiae torquatos eam.
</p>
<a href="logout.php" class="btn btn-large btn-info"><i class="icon-home icon-white"></i> Log me out</a>
</div>
<br />
</div>
<br />
<!-- By ConnerT HTML & CSS Enthusiast -->
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
<?php } ?>
ধাপ 6- পৃষ্ঠা লগআউট করুন।
লগআউট পৃষ্ঠাটি সেশন ধ্বংস করতে বা সেশন ভেরিয়েবল আনসেট করতে ব্যবহৃত হয়।
logout.php পৃষ্ঠার জন্য কোড
<?php
session_start();
unset($_SESSION['userlogin']); // unset session variable
session_destroy(); // destroy session
header("location:index.php");
?>