In this tutorial, We will learn How to make PHP Login Register System by using AngularJS. Here we make simple login and register page by using AngularJS. We all know AngularJS is a javascript framework and this library has been written in pure javascript and it is developed and manage by Google. So, in Web development using of AngularJS has been increase. So, many web developers has been use AngularJS for their web development as front-end. For this here we have make this post in which we have describe how to make AngularJS Login Register page by using PHP.
Login and Register is a entry point of any website. So, if we want to access any web system feature then we want to make first registration and after registration we can login into system. So, Login and Registration is a required functionality of any web application. For this here we have make discuss how to create login and registration page in angularjs with PHP and Mysql. This tutorial will useful to AngularJS beginner tutorial becuase here we have discuss PHP Login Register Script by using AngularJS from scratch.
This very simple tutorial which will helps to AngularJS beginner developers to crate simple Register and Login page by using AngularJS with PHP and Mysql. Because by using AngularJS we can make single page web application. So here also we will make login and register form in single page. In this single page login and register application by using AngularJS when page has been load into browser then we can only see Login page on our index page. And suppose we want to go to register page then by click to Register link then AngularJS register form will be visible on web page and AngularJS login form will be hide. After successfully register into system then we can loign into system. In Login and Register we have also use PHP server side validation with AngularJS. After login into system page also redirect to index page. So in single page we have make login page, register page and after login and enter into system also in index page. For check user login into system or not for this we have use PHP Session variable. So, this way we have make single page Login Register system by using AngularJS with PHP & Mysql.
Source Code
index.php
<?php
//index.php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Register Login Script using PHP Mysql</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<style>
.form_style
{
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<br />
<h3 align="center">AngularJS Register Login Script using PHP Mysql</h3>
<br />
<div ng-app="login_register_app" ng-controller="login_register_controller" class="container form_style">
<?php
if(!isset($_SESSION["name"]))
{
?>
<div class="alert {{alertClass}} alert-dismissible" ng-show="alertMsg">
<a href="#" class="close" ng-click="closeMsg()" aria-label="close">×</a>
{{alertMessage}}
</div>
<div class="panel panel-default" ng-show="login_form">
<div class="panel-heading">
<h3 class="panel-title">Login</h3>
</div>
<div class="panel-body">
<form method="post" ng-submit="submitLogin()">
<div class="form-group">
<label>Enter Your Email</label>
<input type="text" name="email" ng-model="loginData.email" class="form-control" />
</div>
<div class="form-group">
<label>Enter Your Password</label>
<input type="password" name="password" ng-model="loginData.password" class="form-control" />
</div>
<div class="form-group" align="center">
<input type="submit" name="login" class="btn btn-primary" value="Login" />
<br />
<input type="button" name="register_link" class="btn btn-primary btn-link" ng-click="showRegister()" value="Register" />
</div>
</form>
</div>
</div>
<div class="panel panel-default" ng-show="register_form">
<div class="panel-heading">
<h3 class="panel-title">Register</h3>
</div>
<div class="panel-body">
<form method="post" ng-submit="submitRegister()">
<div class="form-group">
<label>Enter Your Name</label>
<input type="text" name="name" ng-model="registerData.name" class="form-control" />
</div>
<div class="form-group">
<label>Enter Your Email</label>
<input type="text" name="email" ng-model="registerData.email" class="form-control" />
</div>
<div class="form-group">
<label>Enter Your Password</label>
<input type="password" name="password" ng-model="registerData.password" class="form-control" />
</div>
<div class="form-group" align="center">
<input type="submit" name="register" class="btn btn-primary" value="Register" />
<br />
<input type="button" name="login_link" class="btn btn-primary btn-link" ng-click="showLogin()" value="Login" />
</div>
</form>
</div>
</div>
<?php
}
else
{
?>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Welcome to system</h3>
</div>
<div class="panel-body">
<h1>Welcome - <?php echo $_SESSION["name"];?></h1>
<a href="logout.php">Logout</a>
</div>
</div>
<?php
}
?>
</div>
</body>
</html>
<script>
var app = angular.module('login_register_app', []);
app.controller('login_register_controller', function($scope, $http){
$scope.closeMsg = function(){
$scope.alertMsg = false;
};
$scope.login_form = true;
$scope.showRegister = function(){
$scope.login_form = false;
$scope.register_form = true;
$scope.alertMsg = false;
};
$scope.showLogin = function(){
$scope.register_form = false;
$scope.login_form = true;
$scope.alertMsg = false;
};
$scope.submitRegister = function(){
$http({
method:"POST",
url:"register.php",
data:$scope.registerData
}).success(function(data){
$scope.alertMsg = true;
if(data.error != '')
{
$scope.alertClass = 'alert-danger';
$scope.alertMessage = data.error;
}
else
{
$scope.alertClass = 'alert-success';
$scope.alertMessage = data.message;
$scope.registerData = {};
}
});
};
$scope.submitLogin = function(){
$http({
method:"POST",
url:"login.php",
data:$scope.loginData
}).success(function(data){
if(data.error != '')
{
$scope.alertMsg = true;
$scope.alertClass = 'alert-danger';
$scope.alertMessage = data.error;
}
else
{
location.reload();
}
});
};
});
</script>
database_connection.php
<?php
//database_connection.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
?>
register.php
<?php
//register.php
include('database_connection.php');
$form_data = json_decode(file_get_contents("php://input"));
$message = '';
$validation_error = '';
if(empty($form_data->name))
{
$error[] = 'Name is Required';
}
else
{
$data[':name'] = $form_data->name;
}
if(empty($form_data->email))
{
$error[] = 'Email is Required';
}
else
{
if(!filter_var($form_data->email, FILTER_VALIDATE_EMAIL))
{
$error[] = 'Invalid Email Format';
}
else
{
$data[':email'] = $form_data->email;
}
}
if(empty($form_data->password))
{
$error[] = 'Password is Required';
}
else
{
$data[':password'] = password_hash($form_data->password, PASSWORD_DEFAULT);
}
if(empty($error))
{
$query = "
INSERT INTO register (name, email, password) VALUES (:name, :email, :password)
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
$message = 'Registration Completed';
}
}
else
{
$validation_error = implode(", ", $error);
}
$output = array(
'error' => $validation_error,
'message' => $message
);
echo json_encode($output);
?>
login.php
<?php
//login.php
include('database_connection.php');
session_start();
$form_data = json_decode(file_get_contents("php://input"));
$validation_error = '';
if(empty($form_data->email))
{
$error[] = 'Email is Required';
}
else
{
if(!filter_var($form_data->email, FILTER_VALIDATE_EMAIL))
{
$error[] = 'Invalid Email Format';
}
else
{
$data[':email'] = $form_data->email;
}
}
if(empty($form_data->password))
{
$error[] = 'Password is Required';
}
if(empty($error))
{
$query = "
SELECT * FROM register
WHERE email = :email
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
$result = $statement->fetchAll();
if($statement->rowCount() > 0)
{
foreach($result as $row)
{
if(password_verify($form_data->password, $row["password"]))
{
$_SESSION["name"] = $row["name"];
}
else
{
$validation_error = 'Wrong Password';
}
}
}
else
{
$validation_error = 'Wrong Email';
}
}
}
else
{
$validation_error = implode(", ", $error);
}
$output = array(
'error' => $validation_error
);
echo json_encode($output);
?>
logout.php
<?php
//logout.php
session_start();
session_destroy();
header("location:index.php");
?>
Database
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `register`
--
CREATE TABLE `register` (
`id` int(11) NOT NULL,
`name` varchar(250) NOT NULL,
`email` varchar(250) NOT NULL,
`password` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `register`
--
ALTER TABLE `register`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `register`
--
ALTER TABLE `register`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;
login not working
ReplyDeleteit is showing wrong password only
ReplyDeletenice
ReplyDeleteExcelent
ReplyDeleteExcellent PHP example with Angular, Thank you
ReplyDelete
ReplyDeleteExcellent PHP example with Angular, Thank you
es muy claro el ejemplo gracias
ReplyDeletehow to connect this one with my cpanel
ReplyDeleteangular tutorial with php to simulate a supermarket box?
ReplyDeleteIt allways shows me the error:
ReplyDeletename is Required, Email is Required, Password is Required
did u got the solution for this
DeleteThis is a really good script. However, is there a way i can check if a username or email already exists?
ReplyDeleteThanks
Nice!
ReplyDeletealert not working
ReplyDeletenice!
ReplyDeletethank you