Skip to content
  • Home
  • Blog
    • yttags
    • Youtube
  • Categories
  • Tools
  • Server-Side
    • php
    • Node.js
    • ASP.NET
    • Magento
    • Codeigniter
    • Laravel
    • Yii
  • JS
    • AngularJS
    • Ajax
    • VueJs
    • jQuery
    • ReactJS
    • JavaScript
  • Full Form
  • Guest Post
  • Advertise
  • About
  • Contact Us
Pakainfo

Pakainfo

Web Development & Good Online education

AngularJS Login Script using PHP MySQL

June 13, 2018 Pakainfo Technology, AngularJS, Mysql, Mysqli, php, Programming Leave a comment
Rate this post

AngularJS Login Script using PHP MySQL

In this Post We Will Explain About is AngularJS Login Script using PHP MySQL With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS Login Script using PHP MySQL Bootstrap Example

In this post we will show you Best way to implement AngularJS Insert Update Delete Using PHP MySQL, hear for Restful insert, update, edit, delete using angularjs and php with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

PHP Login and Registration Script with PDO and OOP

In this Example,First of all Add or Include External Libs Like as a(jQuery, css etc..), and then create a simple index.php or index.html page.After that crate a simple javascript file like as a index.js or main.js, It is also add your web-application First Header Part to some priority set.After that Include your relevant CSS Class.

Free Live Chat for Any Issue

Phase-1) Make Database

CREATE DATABASE live-angular-login-module;

Phase-2) Make Database Table

CREATE TABLE `student` (
  `student_id` int(11) NOT NULL,
  `student_email` varchar(50) NOT NULL,
  `student_password` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Phase-3) Insert Student with Query

INSERT INTO `student` (`student_id`, `student_email`, `student_password`) VALUES
(1, '[email protected]', 'Live24u');

Phase-4) AngularJS PUT Libraries & Bootstrap Links

  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

Phase-5) Make Login Form

<div class="container">
      <div id="loginbox" style="margin-top:20px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
          <div class="panel panel-info" >
                  <div class="panel-heading">
                      <div class="panel-title">AngularJS User authentication using PHP Login Script and MySQL</div>

                  </div>

                  <div style="padding-top:30px" class="panel-body" >
                      <form name="login" ng-submit="liveCtrl.studloginFrm()" class="form-horizontal" method="POST">

                          <div style="margin-bottom: 30px" class="form-group">
                                      <span class="form-group-addon"><i class="liveicon liveicon-student"></i></span>
                                      <input type="email" id="inputemail" class="form-control" required autofocus ng-model="liveCtrl.inputData.email">
                          </div>

                          <div style="margin-bottom: 30px" class="form-group">
                                      <span class="form-group-addon"><i class="liveicon liveicon-lock"></i></span>
                                      <input type="password" id="inputpassword" class="form-control" required ng-model="liveCtrl.inputData.password">
                          </div>
                          <div class="form-group">
                              <!-- Button -->
                              <div class="col-sm-12 controls">
                                  <button type="submit" class="btn btn-Success pull-left"><i class="liveicon liveicon-log-in"></i> Log in</button>
                              </div>
                          </div>
                              <div class="alert alert-danger" ng-show="dispErrormsg">
                                  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                      Ă—</button>
                                  <span class="liveicon liveicon-hand-right"></span>  {{dispErrormsg}}
                              </div>
                          </form>
                      </div>
                  </div>
      </div>
  </div>

Phase-6) AngularJS Script

<script>
	angular.module('LiveAuthModule', [])
	.controller('LiveAuthCtrl', ['$scope', '$http', function($scope, $http) {
		this.studloginFrm = function() {

			var student_data='student_email=' +this.inputData.email+'&student_password='+this.inputData.password;

			$http({
				method: 'POST',
				url: 'do_login.php',
				data: student_data,
				headers: {'Content-Type': 'application/x-www-form-urlencoded'}
			})
			.success(function(data) {
        
				if ( data.trim() === 'correct') {
					window.location.href = 'stud_dashboard.php';
				} else {
					$scope.dispErrormsg = "Sorry,Invalid Your Email and Your Password";
				}
			})
		}

	}]);
	</script>

Phase-7) Complete “index.php” AngularJS Login File

<?php
/*
Devloped by Pakainfo.com
Developer:  Jaydeep Gondaliya
Site:       Pakainfo.com
Script:     AngularJS User authentication using PHP Login Script and MySQL
File:       index.php
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<title>AngularJS User authentication using PHP Login Script and MySQL</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="LiveAuthModule" ng-controller="LiveAuthCtrl as liveCtrl">
<div class="container">
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
  <div class="panel panel-info" >
		  <div class="panel-heading">
			  <div class="panel-title">AngularJS User authentication using PHP Login Script and MySQL</div>

		  </div>

		  <div style="padding-top:30px" class="panel-body" >
			  <form name="login" ng-submit="liveCtrl.studloginFrm()" class="form-horizontal" method="POST">

				  <div style="margin-bottom: 30px" class="form-group">
							  <span class="form-group-addon"><i class="liveicon liveicon-student"></i></span>
							  <input type="email" id="inputemail" class="form-control" required autofocus ng-model="liveCtrl.inputData.email">
				  </div>
					<!-- Devloped by Pakainfo.com free download examples -->
				  <div style="margin-bottom: 30px" class="form-group">
							  <span class="form-group-addon"><i class="liveicon liveicon-lock"></i></span>
							  <input type="password" id="inputpassword" class="form-control" required ng-model="liveCtrl.inputData.password">
				  </div>
				  <div class="form-group">
					  <!--Live24u Button -->
					  <div class="col-sm-12 controls">
						  <button type="submit" class="btn btn-Success pull-left"><i class="liveicon liveicon-log-in"></i> Log in</button>
					  </div>
				  </div>
					  <div class="alert alert-danger" ng-show="dispErrormsg">
						  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
							  Ă—</button>
						  <span class="liveicon liveicon-hand-right"></span>  {{dispErrormsg}}
					  </div>
				  </form>
			  </div>
		  </div>
</div>
</div>
<script>
angular.module('LiveAuthModule', [])
.controller('LiveAuthCtrl', ['$scope', '$http', function($scope, $http) {
this.studloginFrm = function() {

	var student_data='student_email=' +this.inputData.email+'&student_password='+this.inputData.password;

	$http({
		method: 'POST',
		url: 'do_login.php',
		data: student_data,
		headers: {'Content-Type': 'application/x-www-form-urlencoded'}
	})
	.success(function(data) {
console.log(data);
		if ( data.trim() === 'correct') {
			window.location.href = 'stud_dashboard.php';
		} else {
			$scope.dispErrormsg = "Invalid Email and Password";
		}
	})
}

}]);
</script>

</body>
</html>

Phase-8) Make db_config.php

<?php
/*
Developer:  Jaydeep Gondaliya
Site:       Pakainfo.com
Script:     AngularJS User authentication using PHP Login Script and MySQL
File:       db_config.php
*/
$DB_host = "localhost";
$DB_student = "live24u";
$DB_pass = "[email protected]#jshjsf123456";
$DB_name = "live-angular-login-module";
//Connect with database
 try
 {
	//connection
     $myDb = new PDO("mysql:host={$DB_host};dbname={$DB_name}",$DB_student,$DB_pass);
	 //setAttribute
     $myDb->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 }
 catch(PDOException $e)
 {
	//generate error
     echo "ERROR : ".$e->getMessage();
 }

 ?>

Phase-9) Make “do_login.php”

<?php
/*
Devloped by Pakainfo.com
Developer:  Jaydeep Gondaliya
Site:       Pakainfo.com
Script:     AngularJS User authentication using PHP Login Script and MySQL
File:       do_login.php
*/

//Devloped by Pakainfo.com include simple database connection file
require_once 'db_config.php';


//Devloped by Pakainfo.com verifying student HTML from database using PDO
$sql_stmt = $myDb->prepare("SELECT student_email, student_password from student WHERE student_email='".$_POST['student_email']."' && student_password='".$_POST['student_password']."'");
$sql_stmt->execute();
$row = $sql_stmt->rowCount();
if ($row > 0){
    echo "Good Luck correct";
} else{
    echo 'Sorry,wrong';
}

?>

Phase-10) Welcome_dashboard.php

<h1>Welcome to Pakainfo.com Angularjs Login Dashboard.</h1>

AngularJS Login Script using PHP MySQL Bootstrap

Read Also:  Dropdown List using Angular Example

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

Download

I hope you have Got What is AngularJS CRUD Operations with PHP and MySQL And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.

Read Also:  NodeJS RESTful API User Authentication with AngularJS using PHP MYSQL

Related posts:

  1. Vue.js Simple Login Script using PHP MySQLi Bootstrap
  2. Angularjs Login And Registration Modal Template
  3. jQuery Ajax Login Script using PHP MySQLi
  4. AngularJS Simple Login Form
  5. Secure Login System with PHP and MySQLi – login page in php
  6. Rregistration and login form in php and mysql with validation code free download
  7. Login and Signup System using PHP MySQLi
  8. NodeJS RESTful API User Authentication with AngularJS using PHP MYSQL
  9. How to create a Login page with PHP and MySQL
  10. PHP login logout script with session Example
Read Also:  Laravel create Dynamic Email Templates from Database
AngularJSangularjs login form with mysqlangularjs php login sessionangularjs php login tutorialangularjs php mysql projectangularjs user registration form exampleangularjs with php backend examplesimple login page using angularjssimple session with angularjs and php

Post navigation

Previous Post:AngularJS Random Strong Password Generator
Next Post:Simple VueJS Modal Popup Example

Search

Write For Us

We’re accepting well-written informative guest posts and this is a great opportunity to collaborate.
Submit a guest post to [email protected]
Contact Us

Freelance web developer

Do you want to build a modern, lightweight, responsive website quickly?
Need a Website Or Web Application Contact : [email protected]
Note: Paid Service
Contact Me
Cricday

Categories

3movierulz (48) Ajax (464) AngularJS (377) ASP.NET (61) Bollywood (92) Codeigniter (174) CSS (96) Earn Money (61) Education (53) Entertainment (108) fullform (77) Google Adsense (62) Highcharts (77) Hollywood (93) JavaScript (1354) Jobs (39) jQuery (1421) Laravel (1083) LifeStyle (50) movierulz4 (47) Mysql (1029) Mysqli (890) Node.js (38) php (2110) Programming (2320) Python (96) ReactJS (37) Software (102) Software (77) Stories (78) tamilrockers (88) Tamilrockers kannada (48) Tamilrockers telugu (47) Tech (101) Technology (2359) Tips and Tricks (107) Tools (111) Top10 (293) Trading (49) Trending (45) VueJs (250) Web Technology (83) webtools (129) wordpress (165) World (121)

Advertise With Us

Increase visibility and sales with advertising. Let us promote you online.
Click Here

A To Z Full Forms

Access a complete full forms list with the meaning, definition, and example of the acronym or abbreviation.
Click Here

Web Development & Good Online education : Pakainfo by Pakainfo.
Top
Subscribe On YouTube : Download Source Code & New itsolutionstuck
We accept paid guest Posting on our Site : Guest Post Chat with Us On WhatsApp