To create a login page using Angular JS and set SESSION with PHP/MySQLi. Angular JS is a javascript framework maintained by Google and is capable of creating Single-Page Applications. In this tutorial, we’ll set up PHP Session to prevent users from going into our homepage if not authenticated. Getting Started I’ve have used CDN for …
Login with Session using PHP/MySQLi in Angular JS Read More »
Creating our Database First, we are going to create our database and insert sample users to test our app. 1. Open phpMyAdmin. 2. Click databases, create a database and name it as angular. 3. After creating a database, click the SQL and paste the below codes
|
1 2 3 4 5 6 |
CREATE TABLE `members` ( `memid` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(30) NOT NULL, `password` varchar(30) NOT NULL, PRIMARY KEY(`memid`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; |
|
1 2 3 4 |
INSERT INTO `members` (`memid`, `username`, `password`) VALUES (1, 'neovic', 'devierte'), (2, 'julyn', 'divinagracia'), (3, 'gemalyn', 'cepe'); |
Index.html html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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"> </head> <body> <div class="container"> <h1 class="page-header text-center">AngularJS Login with PHP/MySQLi</h1> <div ng-view></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 html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class="col-md-4 col-md-offset-4"> <div class="login-panel panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><span class="glyphicon glyphicon-lock"></span> Login </h3> </div> <div class="panel-body"> <form role="form" name="logform"> <fieldset> <div class="form-group"> <input class="form-control" placeholder="Username" type="text" autofocus ng-model="user.username" required> </div> <div class="form-group"> <input class="form-control" placeholder="Password" type="password" ng-model="user.password" required> </div> <button type="button" id="loginbutton" class="btn btn-lg btn-primary 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> </div> <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> <div class="alert alert-success text-center" ng-show="successLogin"> <button type="button" class="close" ng-click="clearMsg()"><span aria-hidden="true">×</span></button> {{ successMsg }} </div> </div> |
Angular.js JavaScript …
Creating our Main Page First this is our main page named index.html. In here, we’re gonna create a simple bootstrap navbar for navigation between routes. html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html ng-app="app"> <head> <title>AngularJS How to Create Routes</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.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">AngularJS Route</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#/">Home</a></li> <li><a href="#/about">About</a></li> <li><a href="#/blog">Blog</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div ng-view></div> <script src="angular.js"></script> </body> </html> |
Angular.js Lastly, this contains our Angular.js scripts and our router. Take note that in routing, we need to add the dependency ngRoute to our app for it to work. JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var app = angular.module('app', ['ngRoute']); app.config(function($routeProvider){ $routeProvider .when('/', { templateUrl: 'home.html' }) .when('/about', { templateUrl: 'about.html' }) .when('/blog', { templateUrl: 'blog.html' }) .otherwise({ redirectTo: '/' }); }); |
…
AngularJS (1.x) example that shows a file preview before upload (image preview, plus filename/size for any file), using CDN for Bootstrap and AngularJS. Creating our HTML html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html > <head> <title>AngularJS File Preview before Upload</title> <meta charset="utf-8"> <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.4.8/angular.min.js"></script> </head> <body ng-app="app" ng-controller="uploader"> <div class="container"> <h1 class="page-header text-center">AngularJS File Preview before Upload</h1> <div class="row"> <div class="col-md-3"> <h3 class="text-center">Upload File</h3> <hr> <label>File:</label> <input type="file" file-input="files"> </div> <div class="col-md-9"> <div ng-show="filepreview"> <img ng-src="{{filepreview}}" height="300px" width="300px"> <h4>Filename: {{ name }}</h4> <h4>Size: {{ size }}</h4> </div> </div> </div> </div> <script src="angular.js"></script> </body> </html> |
Angular.js JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var app = angular.module('app', []); app.directive('fileInput', ['$parse', function ($parse) { return { $scope: { fileinput: "=", filepreview: "=" }, link: function($scope, element, attributes) { element.bind("change", function(changeEvent) { $scope.fileinput = changeEvent.target.files[0]; var reader = new FileReader(); reader.onload = function(loadEvent) { $scope.$apply(function() { $scope.filepreview = loadEvent.target.result; }); } reader.readAsDataURL($scope.fileinput); $scope.name = $scope.fileinput.name; $scope.size = $scope.fileinput.size; }); } } }]); app.controller('uploader', function($scope, $http){ }); |
Download Code of Angular Preview
1. HTML (index.html) html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <html ng-app="loaderApp"> <head> <meta charset="utf-8" /> <title>AngularJS Loader Example</title> <!-- CDN dependencies --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="..." crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="..." crossorigin="anonymous"> <style> /* Simple overlay loader styling */ .loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.75); display: flex; align-items: center; justify-content: center; z-index: 9999; flex-direction: column; } .loader-text { margin-top: 10px; font-weight: bold; } </style> </head> <body ng-controller="MainCtrl as vm"> <div class="container mt-5"> <h3>AngularJS Loader Demo</h3> <button class="btn btn-primary" ng-click="vm.doManualAction()">Manual Action (spinner)</button> <button class="btn btn-success" ng-click="vm.doHttpAction()">HTTP Action (interceptor)</button> <div class="mt-3"> <p><strong>Note:</strong> The loader shows automatically during the simulated HTTP call; the manual one uses explicit toggling.</p> </div> </div> <!-- Loader overlay: shows when vm.loading is true --> <div class="loader-overlay" ng-show="vm.loading"> <!-- Font Awesome spinner --> <i class="fa-solid fa-spinner fa-spin fa-3x"></i> <div class="loader-text">Loading, please wait...</div> <!-- Or optionally a GIF --> <!-- <img src="https://i.gifer.com/ZZ5H.gif" alt="loader gif" width="80" /> --> </div> <!-- AngularJS & app script --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script> <script src="angular.js"></script> </body> </html> |
2. AngularJS Logic (angular.js) javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
(function () { angular.module('loaderApp', []) // HTTP interceptor to auto-toggle loader during $http requests .factory('loaderInterceptor', ['$q', 'LoaderService', function($q, LoaderService) { return { request: function(config) { LoaderService.show(); return config; }, response: function(response) { LoaderService.hide(); return response; }, responseError: function(rejection) { LoaderService.hide(); return $q.reject(rejection); } }; }]) .config(['$httpProvider', function($httpProvider) { $httpProvider.interceptors.push('loaderInterceptor'); }]) .service('LoaderService', ['$timeout', function($timeout) { var _visible = false; return { show: function() { _visible = true; }, hide: function() { // optional small delay to avoid flicker $timeout(function() { _visible = false; }, 100); }, isVisible: function() { return _visible; } }; }]) .controller('MainCtrl', ['$timeout', '$http', 'LoaderService', function($timeout, $http, LoaderService) { var vm = this; vm.loading = false; // Watch the service's visibility vm._syncLoader = function() { vm.loading = LoaderService.isVisible(); }; // Poll sync (could also use $scope.$watch with a getter) setInterval(vm._syncLoader, 100); // Manual toggle example vm.doManualAction = function() { vm.loading = true; // simulate some async work $timeout(function() { vm.loading = false; }, 1500); }; // HTTP call example (interceptor manages loader) vm.doHttpAction = function() { // Example: simulate HTTP call (you can replace with real endpoint) $http.get('https://jsonplaceholder.typicode.com/posts/1') .then(function(resp) { console.log('HTTP success', resp.data); }) .catch(function() { console.log('HTTP error'); }); }; }]); })(); |
3. Explanation & Best Practices ng-show=”vm.loading”: Toggles the loader overlay. You can switch to ng-if if you want DOM removal instead of visibility toggling. Interceptor (loaderInterceptor): Automatically shows the loader on every $http request and hides it when the response returns or errors. This …
