We will create a
Login Security System using AngularJS, PHP, and MySQL that will provide
security features in your web, or mobile applications.
nd application development, programming projects, thesis and capstone projects, IT consulting work, computer tutorials, and web development work kindly contact me at the following email address for further details. If you want to advertise on my website kindly contact me also in my email address also. Thank you.My email address is the following jakerpomperada@gmail.com, jakerpomperada@aol.com, and jakerpomperada@yahoo.com.
My mobile number here in the Philippines is 09173084360.
Program Listingangular_login.sql
-- phpMyAdmin SQL Dump
-- version 5.0.3
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Oct 23, 2021 at 05:06 AM
-- Server version: 10.4.14-MariaDB
-- PHP Version: 7.4.11
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `angular_login`
--
-- --------------------------------------------------------
--
-- Table structure for table `members`
--
CREATE TABLE `members` (
`memid` int(11) NOT NULL,
`username` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `members`
--
INSERT INTO `members` (`memid`, `username`, `password`) VALUES
(1, 'admin', 'admin'),
(2, '123', '123'),
(3, 'jake', 'jake'),
(4, 'jacob', 'jacob'),
(5, 'iya', 'iya'),
(6, 'allie', 'allie');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `members`
--
ALTER TABLE `members`
ADD PRIMARY KEY (`memid`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `members`
--
ALTER TABLE `members`
MODIFY `memid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
COMMIT;
/*!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 */;
Controllers Folder
loginCtrl.js
'use strict';
app.controller('loginCtrl', function($scope, loginService){
$scope.errorLogin = false;
$scope.successLogin = false;
$scope.login = function(user){
loginService.login(user, $scope);
}
$scope.clearMsg = function(){
$scope.errorLogin = false;
$scope.successLogin = false;
}
});
Services Folder
loginService.js
'use strict';
app.factory('loginService', function($http) {
return {
login: function(user, $scope) {
var validate = $http.post('login.php', user);
validate.then(function(response) {
if (response.data.error == true) {
$scope.successLogin = false;
$scope.errorLogin = true;
$scope.errorMsg = response.data.message;
} else {
window.location.href = 'home.html';
}
});
}
}
});
angular.js
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'login.html',
controller: 'loginCtrl'
})
.when('/home', {
templateUrl: 'home.html'
})
.otherwise({
redirectTo: '/'
});
});
login.php
<?php
$conn = new mysqli("localhost", "root", "", "angular_login");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$out = array('error' => false);
$user = json_decode(file_get_contents('php://input'));
$username = $user->username;
$password = $user->password;
$sql = "SELECT * FROM members WHERE username='$username' AND password='$password'";
$query = $conn->query($sql);
if($query->num_rows>0){
$out['message'] = 'Login Successful';
}
else{
$out['error'] = true;
$out['message'] = 'Invalid Login';
}
echo json_encode($out);
?>
style.css
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
:root {
--black: #343a40;
--gray: #6c757d;
--white: #ffffff;
}
body {
font-family: 'Roboto', sans-serif;
min-height: 100vh;
height: 100%;
}
.section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.bg-dark {
background-color: var(--black);
}
h1 {
margin: 20px 0;
}
.title {
color: var(--white);
}
.welcome {
margin-top: 100px;
color: var(--black);
}
.welcome h1:nth-of-type(2) {
margin-top: 80px;
}
.titlehr {
border-top: 3px double #8c8b8b;
width: 100%;
max-width: 300px;
}
form {
width: 400px;
color: var(--black);
}
h1,
input,
.btn {
margin-bottom: 30px;
}
.btn-dark {
color: var(--white);
background-color: var(--black);
border-color: var(--black);
}
.btn-dark:hover {
color: var(--white);
background-color: #23272b;
border-color: #23272b;
}
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>AngularJS Login with PHP/MySQLi</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 section bg-dark">
<div class="title text-center">
<hr class="titlehr">
<h1 class="text-white">
AngularJS Login<br>
with PHP/MySQLi
<br>
</h1>
<h4 class="text-uppercase">Created By:</h3>
<h4>Prof. Jake Rodriguez Pomperada, MAED-IT, MIT</h4>
<hr class="titlehr">
</div>
</div>
<div class="col-lg-7 section">
<div ng-view></div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/controllers/loginCtrl.js"></script>
<script src="js/services/loginService.js"></script>
</body>
</html>
login.html
<form role="form" name="logform" autocomplete="off">
<h1 class="text-center">
<span class="glyphicon glyphicon-lock"></span> Login
</h1>
<fieldset>
<div class="form-group">
<label for="txtUser">Username</label>
<input class="form-control" id="txtUser" type="text" autofocus ng-model="user.username" placeholder="Enter your username here" required>
</div>
<div class="form-group">
<label for="txtPass">Password</label>
<input class="form-control" id="txtPass" type="password" ng-model="user.password" placeholder="Enter your password here" required>
</div>
<button type="submit" id="loginbutton" class="btn btn-dark btn-block" ng-disabled="logform.$invalid" ng-click="login(user)">
<span class="glyphicon glyphicon-log-in"></span> <span id="logtext">Login</span>
</button>
</fieldset>
</form>
<div class="alert alert-danger text-center" ng-show="errorLogin">
<button type="button" class="close" ng-click="clearMsg()"><span aria-hidden="true">×</span></button>
{{ errorMsg }}
</div>
home.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>AngularJS Login with PHP/MySQLi</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="title text-center welcome">
<hr class="titlehr">
<h1 class="text-uppercase">
AngularJS Login<br>
<small> with PHP/MySQLi</small>
<br>
</h1>
<h4 class="text-uppercase">Created By:</h3>
<h4>Prof. Jake Rodriguez Pomperada, MAED-IT, MIT</h4>
<hr class="titlehr">
<h1>Welcome to the homepage!</h1>
<a href="index.html">Back to login page</a>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/controllers/loginCtrl.js"></script>
<script src="js/services/loginService.js"></script>
</body>
</html>
DOWNLOAD THE COMPLETE SOURCE CODE HERE
