Category Archives: Blog

Blog

AngularJS User Registration Login Authentication Example

User authentication is very common in modern web application. User authentication is a security mechanism that is used to identify whether a user is someone who he claimed to be and to restrict unauthorized access to member only areas in a web application. In this tutorial we’ll show you how to create simple user registration and login system using angularjs. In our previous articles we have demonstrated you how to create simple user login in angularjs and how to create simple user registration in angularjs.

In this tutorial, we’ll guide you through the complete process of creating a user registration system where users can create an account by providing username, email and password, login and logout using Angularjs. We’ll also show you how you can make some pages accessible only to logged-in users. In this tutorial we will first create user registration form in angularjs, and then we’ll create user authentication or login form in angularjs, as well as a welcome page and a logout script.

Project’s Directory Structure :-

angularjs-user-authentication-registration-login-1

AngularJS Application Layout

Before starting with this tutorial we will create base layout i.e. index.html file where all our application views will be loaded. Let’s create index.html file and put the following code in it –

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS User Registration Login Example - W3Adda</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="header">AngularJS User Registration Login Example - W3Adda</div>
<div class="col-sm-8 col-sm-offset-2">
<div ng-view></div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.9/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.6.9/angular-cookies.min.js"></script>
<script src="app.js"></script>
<script src="homeController.js"></script>
<script src="loginController.js"></script>
<script src="registerController.js"></script>
<script src="userService.svc.js"></script>
<script src="authenticationService.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>AngularJS User Registration Login Example - W3Adda</title>

</head>

<body>

<div class="header">AngularJS User Registration Login Example - W3Adda</div>

</div>

</body>

</html>

AngularJS Application

Every angular application starts from creating a angular module. Module is a container that holds the different parts of your application such as controllers, service, etc. In this step we will create a main javascript file app.js that will hold all the required configuration to run an angularjs application. We will also configure application routes in this file using AngularJS UI Router module. Let’s create app.js file and put the following code in it –

app.js

(
function () {
'use strict';
angular
.module('app', ['ngRoute', 'ngCookies'])
.config(config)
.run(run);
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
controller: 'LoginController',
templateUrl: 'login.html',
controllerAs: 'vm'
})
.when('/home', {
controller: 'HomeController',
templateUrl: 'home.html',
controllerAs: 'vm',
})            
.when('/register', {
controller: 'RegisterController',
templateUrl: 'register.html',
controllerAs: 'vm'
})
.otherwise({ redirectTo: '/login' });
}    
run.$inject = ['$rootScope'];
function run(){
console.clear();
}
})();

(

function () {

'use strict';

angular

.module('app', ['ngRoute', 'ngCookies'])

.config(config)

.run(run);

config.$inject = ['$routeProvider', '$locationProvider'];

function config($routeProvider, $locationProvider) {

$routeProvider

.when('/', {

controller: 'LoginController',

templateUrl: 'login.html',

controllerAs: 'vm'

})

.when('/home', {

controller: 'HomeController',

templateUrl: 'home.html',

controllerAs: 'vm',

})

.when('/register', {

controller: 'RegisterController',

templateUrl: 'register.html',

controllerAs: 'vm'

})

.otherwise({ redirectTo: '/login' });

}

run.$inject = ['$rootScope'];

function run(){

console.clear();

}

})();

The app variable is initialized as angular module, notice that we have used ng-app directive in index.html file to bind the angular application to a container in base layout file. Now, we have created an app module and added ngRoute and ngCookies module for application routing and for storing user information in cookies. Here, we are using $routeProvider in config() function to configure our application routing. In routing configuration, every route you specify have a template file and a controller attached to it.

AngularJS Template and Controller

As you can see in routing configuration, every route you specify have a template and controller attached to it. Angularjs Template file holds all html that is being used to display route specific page. The angularjs controller hold the actual business logic attached with the route. In this step we will create separate template and controller files for user registration, login and home page respectively.

User Registration :-

In this step we’ll create a registration form that allows users to create a new account by filling out a web form. User Registration form will have First Name, Last Name, Username and Password along with Register and Cancel buttons. Let’s create a register.html file in your project’s root directory and put the following code in it –

register.html

<div class="col-md-6 col-md-offset-3">
<h4 style="text-align:center;color:blue">Register</h4>
<form name="form" ng-submit="vm.register()" role="form">
<div class="form-group" ng-class="{ 'has-error': form.firstName.$dirty && form.firstName.$error.required }">
<label for="username">First name</label>
<input type="text" name="firstName" id="firstName" class="form-control" ng-model="vm.user.firstName" required />
<span ng-show="form.firstName.$dirty && form.firstName.$error.required" class="help-block">First name is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.lastName.$dirty && form.lastName.$error.required }">
<label for="username">Last name</label>
<input type="text" name="lastName" id="Text1" class="form-control" ng-model="vm.user.lastName" required />
<span ng-show="form.lastName.$dirty && form.lastName.$error.required" class="help-block">Last name is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" ng-model="vm.user.username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" ng-model="vm.user.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="form-actions">
<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Register</button>
<img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgA" /> <!-- truncated line -->
<a href="#!/" class="btn btn-link">Cancel</a>
</div>
</form>
</div>

<h4 style="text-align:center;color:blue">Register</h4>

<label for="username">First name</label>

<span ng-show="form.firstName.$dirty && form.firstName.$error.required" class="help-block">First name is required</span>

</div>

<span ng-show="form.lastName.$dirty && form.lastName.$error.required" class="help-block">Last name is required</span>

</div>

<label for="username">Username</label>

<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>

</div>

<label for="password">Password</label>

<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>

</div>

<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Register</button>

<a href="#!/" class="btn btn-link">Cancel</a>

</div>

</form>

</div>

Now, we’ll create registerController.js file and define our registration controller. Let’s create registerController.js file and put the following code in it –

registerController.js

//registerController.js
(function () {
'use strict';
angular
.module('app')
.controller('RegisterController', RegisterController);
RegisterController.$inject = ['UserService', '$location'];
function RegisterController(UserService, $location) {
var vm = this;
vm.dataLoading = false;
vm.register = register;
function register() {
vm.dataLoading = true;
UserService.create(vm.user)
.then(function (response) {
if (response.success) {
alert('Registration successful');
$location.path('/');
} else {
alert(response.message);
vm.dataLoading = false;
}
});
}
}
})();

//registerController.js

(function () {

'use strict';

angular

.module('app')

.controller('RegisterController', RegisterController);

RegisterController.$inject = ['UserService', '$location'];

function RegisterController(UserService, $location) {

var vm = this;

vm.dataLoading = false;

vm.register = register;

function register() {

vm.dataLoading = true;

UserService.create(vm.user)

.then(function (response) {

if (response.success) {

alert('Registration successful');

$location.path('/');

} else {

alert(response.message);

vm.dataLoading = false;

}

});

}

})();

Here, register() function is invoked when Register button is clicked. The register() function takes the user input and pass it to create() function in UserService. UserService will process the user input and respond back with either success or failure.

User Login :-

In this step we’ll create a simple login form having two input fields ( UserName and Password) along with a login button. Here, user will input their username and password and submit the login form using login button. As the login form is submitted it will call login() function from our login controller(loginController.js) which will further use Authentication Service(AuthenticationService.js) to authenticate user. if the user is authenticated successfully they will be redirected to a user home page using $location service. If authentication fails, the user is notified with an error message.

login.html

In this step we’ll create a simple login form that allows users login using their username and password. Let’s create a login.html file in your project’s root directory and put the following code in it –

<!--login.html-->
<div class="col-md-6 col-md-offset-3">
<h4 style="text-align:center;color:blue">Login</h4>
<form name="form" ng-submit="vm.login()" role="form">
<div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" ng-model="vm.username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" ng-model="vm.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="form-actions" layout="row">
<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Login</button>
<img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///" /> <!-- truncated line -->
<span style="float:right">Not a member?<a href="#!/register" class="btn btn-link">Register</a></span>
</div>
</form>
</div>

<h4 style="text-align:center;color:blue">Login</h4>

<label for="username">Username</label>

<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>

</div>

<label for="password">Password</label>

<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>

</div>

<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Login</button>

<span style="float:right">Not a member?<a href="#!/register" class="btn btn-link">Register</a></span>

</div>

</form>

</div>

Now, we’ll create loginController.js file and define our login controller. Let’s create loginController.js file and put the following code in it –

loginController.js

//loginController.js
(function () {
'use strict';
angular
.module('app')
.controller('LoginController', LoginController);
LoginController.$inject = ['$location','AuthenticationService'];
function LoginController( $location, AuthenticationService) {
var vm = this;
vm.login = login;
(function initController() {
// reset login status
AuthenticationService.ClearCredentials();
})();
function login() {
console.log("login method executing");
vm.dataLoading = true;
AuthenticationService.Login(vm.username, vm.password, function (response) {
if (response.success) {
AuthenticationService.SetCredentials(vm.username, vm.password);
$location.path('/home');
} else {
alert(response.message);
vm.dataLoading = false;
}
});
}
}
})();

//loginController.js

(function () {

'use strict';

angular

.module('app')

.controller('LoginController', LoginController);

LoginController.$inject = ['$location','AuthenticationService'];

function LoginController( $location, AuthenticationService) {

var vm = this;

vm.login = login;

(function initController() {

// reset login status

AuthenticationService.ClearCredentials();

})();

function login() {

console.log("login method executing");

vm.dataLoading = true;

AuthenticationService.Login(vm.username, vm.password, function (response) {

if (response.success) {

AuthenticationService.SetCredentials(vm.username, vm.password);

$location.path('/home');

} else {

alert(response.message);

vm.dataLoading = false;

}

});

}

})();

User Home :-

Once a user is successfully logged in the home page (home.html) will be loaded. Here, we have simple welcome message along with a list of registered users. Let’s create a home.html file in your project’s root directory and put the following code in it –

home.html

<!--home.html-->
<div class="col-md-6 col-md-offset-3">
<h2 style="text-align:center;color:blue">Home</h2>
<div align="right"><a href="#!/">Logout</a></div>
<h3>Hi {{vm.currentUser.firstName + " " + vm.currentUser.lastName}}</h3>
<div>Welcome.. You're logged in successfuly!!
<br/>To view all the users please click on below link.</div>
<div align="right">
<a href="" ng-click="vm.showUsers = !vm.showUsers">View Users</a>
</div>
<div ng-if="vm.showUsers">
<h4>Registered Users:</h4>
<table class = "table table-striped table-bordered table-hover">
<thead>
<tr class = "info">
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "user in vm.allUsers track by $index">
<td>{{ user.firstName }}</td>
<td>{{ user.lastName }}</td>
<td>{{ user.username }}</td>
</tr>
</tbody>
</table>
</div>
</div>

<div align="right"><a href="#!/">Logout</a></div>

<h3>Hi {{vm.currentUser.firstName + " " + vm.currentUser.lastName}}</h3>

<div>Welcome.. You're logged in successfuly!!

<br/>To view all the users please click on below link.</div>

<a href="" ng-click="vm.showUsers = !vm.showUsers">View Users</a>

</div>

<h4>Registered Users:</h4>

<thead>

<th>First Name</th>

<th>Username</th>

</tr>

</thead>

<tbody>

<td>{{ user.firstName }}</td>

<td>{{ user.lastName }}</td>

<td>{{ user.username }}</td>

</tr>

</tbody>

</table>

</div>

Now, we’ll create homeController.js file and define our home page controller. Let’s create homeController.js file and put the following code in it –

homeController.js

(function () {
'use strict';
angular
.module('app')
.controller('HomeController', HomeController);
HomeController.$inject = ['UserService', '$rootScope'];
function HomeController(UserService, $rootScope) {
var vm = this;
vm.showUsers = false;
vm.currentUser = null;
vm.allUsers = [];
initController();
function initController() {
loadCurrentUser();
loadAllUsers();
}
function loadCurrentUser() {
UserService.getByUsername($rootScope.globals.currentUser.username)
.then(function (user) {
vm.currentUser = user;
});
}
function loadAllUsers() {
UserService.get()
.then(function (users) {
vm.allUsers = users;
});
}
}
})();

(function () {

'use strict';

angular

.module('app')

.controller('HomeController', HomeController);

HomeController.$inject = ['UserService', '$rootScope'];

function HomeController(UserService, $rootScope) {

var vm = this;

vm.showUsers = false;

vm.currentUser = null;

vm.allUsers = [];

initController();

function initController() {

loadCurrentUser();

loadAllUsers();

}

function loadCurrentUser() {

UserService.getByUsername($rootScope.globals.currentUser.username)

.then(function (user) {

vm.currentUser = user;

});

}

function loadAllUsers() {

UserService.get()

.then(function (users) {

vm.allUsers = users;

});

}

})();

This will have loadCurrentUser() and loadAllUsers() functions to display currently logged in user details and to to display a list of all the registered users.

AngularJS Services

In this step, we will define angualrjs service for user authentication and to store and fetch user information form local storage.

Authentication Service :-

Here, we will create a authentication service(authenticationService.js) that will be used to authenticate user with login credentials provided and to set and clear user credentials from angularjs rootScope object. Let’s create authenticationService.js file and put the following code in it –

authenticationService.js

//authenticationService.js
(function () {
'use strict';
angular
.module('app')
.factory('AuthenticationService', AuthenticationService);
AuthenticationService.$inject = ['$http', '$cookies', '$rootScope', '$timeout', 'UserService'];
function AuthenticationService($http, $cookies, $rootScope, $timeout, UserService) {
var service = {};
service.Login = Login;
service.SetCredentials = SetCredentials;
service.ClearCredentials = ClearCredentials;
return service;
function Login(username, password, callback) {
/* Dummy authentication for testing, uses $timeout to simulate api call
----------------------------------------------*/
$timeout(function () {
var response;
UserService.getByUsername(username)
.then(function (user) {
if (user !== null && user.password === password) {
response = { success: true };
} else {
response = { success: false, message: 'Username or password is incorrect' };
}
callback(response);
});
}, 1000);
/* Use this for real authentication
----------------------------------------------*/
//$http.post('/api/authenticate', { username: username, password: password })
//    .success(function (response) {
//        callback(response);
//    });
}
function SetCredentials(username, password) {
var authdata = Base64.encode(username + ':' + password);
$rootScope.globals = {
currentUser: {
username: username,
authdata: authdata
}
};
// set default auth header for http requests
$http.defaults.headers.common['Authorization'] = 'Basic ' + authdata;
// store user details in globals cookie that keeps user logged in for 1 week (or until they logout)
var cookieExp = new Date();
cookieExp.setDate(cookieExp.getDate() + 7);
$cookies.putObject('globals', $rootScope.globals, { expires: cookieExp });
}
function ClearCredentials() {
$rootScope.globals = {};
$cookies.remove('globals');
$http.defaults.headers.common.Authorization = 'Basic';
}
}
// Base64 encoding service used by AuthenticationService
var Base64 = {
keyStr: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
encode: function (input) {
var output = "";
var chr1, chr2, chr3 = "";
var enc1, enc2, enc3, enc4 = "";
var i = 0;
do {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
this.keyStr.charAt(enc1) +
this.keyStr.charAt(enc2) +
this.keyStr.charAt(enc3) +
this.keyStr.charAt(enc4);
chr1 = chr2 = chr3 = "";
enc1 = enc2 = enc3 = enc4 = "";
} while (i < input.length);
return output;
},
decode: function (input) {
var output = "";
var chr1, chr2, chr3 = "";
var enc1, enc2, enc3, enc4 = "";
var i = 0;
// remove all characters that are not A-Z, a-z, 0-9, +, /, or =
var base64test = /[^A-Za-z0-9\+\/\=]/g;
if (base64test.exec(input)) {
window.alert("There were invalid base64 characters in the input text.\n" +
"Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" +
"Expect errors in decoding.");
}
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
do {
enc1 = this.keyStr.indexOf(input.charAt(i++));
enc2 = this.keyStr.indexOf(input.charAt(i++));
enc3 = this.keyStr.indexOf(input.charAt(i++));
enc4 = this.keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
chr1 = chr2 = chr3 = "";
enc1 = enc2 = enc3 = enc4 = "";
} while (i < input.length);
return output;
}
};
})();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

//authenticationService.js

(function () {

'use strict';

angular

.module('app')

.factory('AuthenticationService', AuthenticationService);

AuthenticationService.$inject = ['$http', '$cookies', '$rootScope', '$timeout', 'UserService'];

function AuthenticationService($http, $cookies, $rootScope, $timeout, UserService) {

var service = {};

service.Login = Login;

service.SetCredentials = SetCredentials;

service.ClearCredentials = ClearCredentials;

return service;

function Login(username, password, callback) {

/* Dummy authentication for testing, uses $timeout to simulate api call

----------------------------------------------*/

$timeout(function () {

var response;

UserService.getByUsername(username)

.then(function (user) {

if (user !== null && user.password === password) {

response = { success: true };

} else {

response = { success: false, message: 'Username or password is incorrect' };

}

callback(response);

});

}, 1000);

/* Use this for real authentication

----------------------------------------------*/

//$http.post('/api/authenticate', { username: username, password: password })

// .success(function (response) {

// callback(response);

// });

}

function SetCredentials(username, password) {

var authdata = Base64.encode(username + ':' + password);

$rootScope.globals = {

currentUser: {

username: username,

authdata: authdata

}

};

// set default auth header for http requests

$http.defaults.headers.common['Authorization'] = 'Basic ' + authdata;

// store user details in globals cookie that keeps user logged in for 1 week (or until they logout)

var cookieExp = new Date();

cookieExp.setDate(cookieExp.getDate() + 7);

$cookies.putObject('globals', $rootScope.globals, { expires: cookieExp });

}

function ClearCredentials() {

$rootScope.globals = {};

$cookies.remove('globals');

$http.defaults.headers.common.Authorization = 'Basic';

}

// Base64 encoding service used by AuthenticationService

var Base64 = {

keyStr: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',

encode: function (input) {

var output = "";

var chr1, chr2, chr3 = "";

var enc1, enc2, enc3, enc4 = "";

var i = 0;

do {

chr1 = input.charCodeAt(i++);

chr2 = input.charCodeAt(i++);

chr3 = input.charCodeAt(i++);

enc1 = chr1 >> 2;

enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);

enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);

enc4 = chr3 & 63;

if (isNaN(chr2)) {

enc3 = enc4 = 64;

} else if (isNaN(chr3)) {

enc4 = 64;

}

output = output +

this.keyStr.charAt(enc1) +

this.keyStr.charAt(enc2) +

this.keyStr.charAt(enc3) +

this.keyStr.charAt(enc4);

chr1 = chr2 = chr3 = "";

enc1 = enc2 = enc3 = enc4 = "";

} while (i < input.length);

return output;

decode: function (input) {

var output = "";

var chr1, chr2, chr3 = "";

var enc1, enc2, enc3, enc4 = "";

var i = 0;

// remove all characters that are not A-Z, a-z, 0-9, +, /, or =

var base64test = /[^A-Za-z0-9\+\/\=]/g;

if (base64test.exec(input)) {

window.alert("There were invalid base64 characters in the input text.\n" +

"Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" +

"Expect errors in decoding.");

}

input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

do {

enc1 = this.keyStr.indexOf(input.charAt(i++));

enc2 = this.keyStr.indexOf(input.charAt(i++));

enc3 = this.keyStr.indexOf(input.charAt(i++));

enc4 = this.keyStr.indexOf(input.charAt(i++));

chr1 = (enc1 << 2) | (enc2 >> 4);

chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);

chr3 = ((enc3 & 3) << 6) | enc4;

output = output + String.fromCharCode(chr1);

if (enc3 != 64) {

output = output + String.fromCharCode(chr2);

}

if (enc4 != 64) {

output = output + String.fromCharCode(chr3);

}

chr1 = chr2 = chr3 = "";

enc1 = enc2 = enc3 = enc4 = "";

} while (i < input.length);

return output;

}

};

})();

User Service :-

Next, we will create a user service(userService.svc.js) to store and fetch user details from the localStorage object. Let’s create userService.svc.js file and put the following code in it –

userService.svc.js

//userService.svc.js
(function () {
'use strict';
angular.module("app")
.service("UserService" , UserService);
UserService.$inject = ['$timeout', '$filter', '$q'];
function UserService($timeout, $filter, $q){
var service = {};
service.get = get;
service.getByUsername = getByUsername;
service.create = create;
return service;
function get(){
var deferred = $q.defer();
deferred.resolve(getUsers());
return deferred.promise;
}
function getByUsername(username) {
var deferred = $q.defer();
var filtered = $filter('filter')(getUsers(), { username: username });
var user = filtered.length ? filtered[0] : null;
deferred.resolve(user);
return deferred.promise;
}
function create(user){
var deferred = $q.defer();
// simulate api call with $timeout
$timeout(function () {
getByUsername(user.username)
.then(function (duplicateUser) {
if (duplicateUser !== null) {
deferred.resolve({ success: false, message: 'Username "' + user.username + '" is already exists' });
} else {
var users = getUsers();
// assign id
var lastUser = users[users.length - 1] || { id: 0 };
user.id = lastUser.id + 1;
// save to local storage
users.push(user);
createUser(users);
deferred.resolve({ success: true });
}
});
}, 1000);
return deferred.promise;
}
function getUsers(){
if(!localStorage.users){
localStorage.users = JSON.stringify([]);
}
return JSON.parse(localStorage.users);
}
function createUser(users){
localStorage.users = JSON.stringify(users);
}
}
})();

//userService.svc.js

(function () {

'use strict';

angular.module("app")

.service("UserService" , UserService);

UserService.$inject = ['$timeout', '$filter', '$q'];

function UserService($timeout, $filter, $q){

var service = {};

service.get = get;

service.getByUsername = getByUsername;

service.create = create;

return service;

function get(){

var deferred = $q.defer();

deferred.resolve(getUsers());

return deferred.promise;

}

function getByUsername(username) {

var deferred = $q.defer();

var filtered = $filter('filter')(getUsers(), { username: username });

var user = filtered.length ? filtered[0] : null;

deferred.resolve(user);

return deferred.promise;

}

function create(user){

var deferred = $q.defer();

// simulate api call with $timeout

$timeout(function () {

getByUsername(user.username)

.then(function (duplicateUser) {

if (duplicateUser !== null) {

deferred.resolve({ success: false, message: 'Username "' + user.username + '" is already exists' });

} else {

var users = getUsers();

// assign id

var lastUser = users[users.length - 1] || { id: 0 };

user.id = lastUser.id + 1;

// save to local storage

users.push(user);

createUser(users);

deferred.resolve({ success: true });

}

});

}, 1000);

return deferred.promise;

}

function getUsers(){

if(!localStorage.users){

localStorage.users = JSON.stringify([]);

}

return JSON.parse(localStorage.users);

}

function createUser(users){

localStorage.users = JSON.stringify(users);

}

})();

Fially, we will have css(style.css) file that will hold all the styling rules for our application/ Let’s create a style.css file and put the following code in it –

style.css

.header{
text-align:center;
color:black;
font-weight:bold;
font-size:16px;
margin:0 0 25px 0;
}

.header{

text-align:center;

color:black;

font-weight:bold;

font-size:16px;

margin:0 0 25px 0;

}

Run AngularJS Application

Now start the application server and visit the application to view the output.

Registration Page :-

angularjs-user-authentication-registration-login-2

Login Page :-

angularjs-user-authentication-registration-login-3

Home Page :-

angularjs-user-authentication-registration-login-4

Simple User Login Example in AngularJS

Leave a reply

In our previous article, we have learned how to create simple user registration form In AngularJS . Once a user is registered on the website can be obtain login credentials(username and password). In this article, we will learn how to to create simple login form in AngularJS. We will create a simple login page where user input their username and password, if the user is authenticated successfully they will be redirected to a user home page. If authentication fails, the user is notified with an error message.

Project’s Directory Structure :-

angularjs-simple-login-1

AngularJS Application Layout

index.html

<!doctype html>
<html ng-app="myApp" >
<head>
<meta charset="utf-8">
<title>AngularJS Simple Login Example - W3Adda</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="app.js"></script>
<script src="loginController.js"></script>
<script src="homeController.js"></script>
<script src="loginService.js"></script>
</head>
<body>
<div class = "container" style="width:675px;text-align:center;">
<h2>AngularJS Simple Login Example - W3Adda</h2>
<div ui-view></div>
</div>
</body>
</html>

<!doctype html>

<head>

<title>AngularJS Simple Login Example - W3Adda</title>

</head>

<body>

<h2>AngularJS Simple Login Example - W3Adda</h2>

</div>

</body>

</html>

AngularJS Application

app.js

(function() {
var app = angular.module('myApp', ['ui.router']);
app.run(function($rootScope, $location, $state, LoginService) {
	console.clear();
	console.log('running');
	if(!LoginService.isAuthenticated()) {
		$state.transitionTo('login');
	}
});
app.config(['$stateProvider', '$urlRouterProvider', 
function($stateProvider, $urlRouterProvider) {
	$stateProvider
	.state('login', {
		url : '/login',
		templateUrl : 'login.html',
		controller : 'LoginController'
	})
	.state('home', {
		url : '/home',
		templateUrl : 'home.html',
		controller : 'HomeController'
	});
	$urlRouterProvider.otherwise('/login');
}]);
})();

(function() {

var app = angular.module('myApp', ['ui.router']);

app.run(function($rootScope, $location, $state, LoginService) {

console.clear();

console.log('running');

if(!LoginService.isAuthenticated()) {

$state.transitionTo('login');

}

});

app.config(['$stateProvider', '$urlRouterProvider',

function($stateProvider, $urlRouterProvider) {

$stateProvider

.state('login', {

url : '/login',

templateUrl : 'login.html',

controller : 'LoginController'

})

.state('home', {

url : '/home',

templateUrl : 'home.html',

controller : 'HomeController'

});

$urlRouterProvider.otherwise('/login');

}]);

})();

The app variable is initialized as angular module and named as “myApp”, notice that we have used ng-app directive in index.html file to bind the angular application to a container in base layout file. It is important to use the same module name to bind using ng-app directive.

AngularJS Routing

Since we are making a single page application and we don’t want any page refreshes. Here we have used Angular’s UI Routing capabilities to setup single page application.We are using ui.router module for that, notice that we have added ui.router as a part of the parameter passed to our angular module. The ui.router module provides routing, deeplinking services and directives to our angular applications. Here, we are using $urlRouteProvider in app.config to configure our application routing. As you can see in routing configuration, every route you specify have a template file and a controller attached to it.

AngularJS Template

Now, in this step we will create login and home page template files for our angularjs simple login application. Let’s create login.html and home.html files and put the following code in it respectively.

login.html

In login page, we have two input fields ( UserName and Password) with a login button.

<div class="col-md-12">
<form ng-submit="formSubmit()" class="form">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" ng-model="username" placeholder="username" required=""/>
</div> 
<div class="form-group">
<input type="password" class="form-control" ng-model="password" placeholder="password" required=""/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">Login</button><br>
<span class="text-danger" style="color:red">{{ error }}</span>
</div>
</div>
</form>
</div>

</div>

</div>

<button type="submit" class="btn btn-info">Login</button><br>

<span class="text-danger" style="color:red">{{ error }}</span>

</div>

</form>

</div>

home.html

Once a user is successfully logged in the home page (home.html) will be loaded. Here, we have simple welcome message along with a logout button.

<div class="col-md-12" style="width:500px;">
<div align="right"><a ui-sref="login">Logout</a></div>
<h4>Welcome {{user}}! </h4>
<p><strong>User Dashboard</strong></p>
</div>

<div align="right"><a ui-sref="login">Logout</a></div>

<h4>Welcome {{user}}! </h4>

<p><strong>User Dashboard</strong></p>

</div>

AngularJS Controller

As you can see in routing configuration, every route you specify have a controller attached to it. Angularjs controller hold the actual business logic attached with the route. In this step we will create separate controller files for login page and home page. Let’s create loginController.js and homeController.js file and put the following code in it respectively.

loginController.js

var app = angular.module('myApp');
app.controller('LoginController', function($scope, $rootScope, $stateParams, $state, LoginService) {
	$rootScope.title = "AngularJS Login Sample";
	$scope.formSubmit = function() {
		if(LoginService.login($scope.username, $scope.password)) {
			$rootScope.userName = $scope.username;
			$scope.error = '';
			$scope.username = '';
			$scope.password = '';
			$state.transitionTo('home');
		} else {
			$scope.error = "Incorrect username/password !";
		}   
	};    
});

var app = angular.module('myApp');

app.controller('LoginController', function($scope, $rootScope, $stateParams, $state, LoginService) {

$rootScope.title = "AngularJS Login Sample";

$scope.formSubmit = function() {

if(LoginService.login($scope.username, $scope.password)) {

$rootScope.userName = $scope.username;

$scope.error = '';

$scope.username = '';

$scope.password = '';

$state.transitionTo('home');

} else {

$scope.error = "Incorrect username/password !";

}

};

});

homeController.js

var app = angular.module('myApp');
app.controller('HomeController', 
function($scope, $rootScope, $stateParams, $state, LoginService) {
	$scope.user = $rootScope.userName;
});

var app = angular.module('myApp');

app.controller('HomeController',

function($scope, $rootScope, $stateParams, $state, LoginService) {

$scope.user = $rootScope.userName;

});

AngularJS Services

Here, we will create a simple authentication service that authenticate user with default login credentials. As the user enters login credentials and clicks on the login button we authenticate the user and redirect them to user home page. We store the user data in angularjs scope object and binding it to the variable. If can also authenticate user with their registered credentials in database using a webservice or API that talks to database server. For now we will be creating a simple authentication service that authenticate user with default login credentials. Let’s create a loginService.js and put the following code in it –

loginService.js

var app = angular.module('myApp');
app.factory('LoginService', function() {
	var admin = 'admin';
	var pass = 'admin';
	var isAuthenticated = false;
	return {
		login : function(username, password) {
			isAuthenticated = username === admin && password === pass;
			return isAuthenticated;
		},
		isAuthenticated : function() {
			return isAuthenticated;
		}
	};
});

var app = angular.module('myApp');

app.factory('LoginService', function() {

var admin = 'admin';

var pass = 'admin';

var isAuthenticated = false;

return {

isAuthenticated = username === admin && password === pass;

return isAuthenticated;

isAuthenticated : function() {

return isAuthenticated;

}

};

});

Run AngularJS Application

Now start the application server and visit the application to view the output.

Login Page :-

angularjs-simple-login-2

Home Page :-

angularjs-simple-login-3

Simple User Registration Form Example in AngularJS

Leave a reply

Simple User Registration Form in AngularJS

User Registration is very basic and common feature in modern web application. It is one of the basic and most important feature for a web application that is used to authenticate or restrict unauthorized access to member only areas and features in a web application. The user is required to register a account using the registration form provided on the application so the username and password is created in order to login in the application.

In this tutorial we’ll create a simple registration using AngularJS. In this tutorial, I’ll guide you through the step by step process to understand the User Registration in an AngularJS platform. This tutorial is comprised of two key components, in the first part we’ll create a user registration form, and in the second part we’ll list all the user.

Project Directory Structure :-

angularjs-simple-user-registration-form-1

Creating the Registration Form In AngularJS

In this step we’ll create a registration form that allows users to create a new account by filling out a web form. User Registration form will have Name, Email, Password and Phone as basic registration fields. Registration form will look like as following –

angularjs-simple-user-registration-form-2

Let’s create a index.html and app.js file in your project’s root directory and put the following code in it –

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>User Registraion Form - W3Adda</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="app.js"></script>
</head>
<body>
<div ng-app = "myApp" class = "container" style="width:550px">
<div style="text-align:center;">
<h3><b>User Registraion Form - W3Adda</b></h3>
</div>
<div ng-controller = "RegisterController">
<div align="right">
<a href="#" ng-click="searchUser()">{{title}}</a>
</div>
<form role = "form" class="well" ng-hide="ifSearchUser">
<div class = "form-group">
<label for = "name"> Name:  </label>
<input type = "text" id = "name" class = "form-control" placeholder = "Enter Name " ng-model = "newuser.name">
</div>
<div class = "form-group">
<label for = "email"> Email:  </label>
<input type = "email" id = "email" class = "form-control" placeholder = "Enter Email " ng-model = "newuser.email">
</div>
<div class = "form-group">
<label for = "password"> Password:  </label>
<input type = "password" id = "password" class = "form-control" placeholder = "Enter Password " ng-model = "newuser.password">
</div>
<div class = "form-group">
<label for = "phone"> Phone:  </label>
<input type = "text" id = "phone" class = "form-control" placeholder = "Enter Phone " ng-model = "newuser.phone">
</div>
<br>
<input type="hidden" ng-model="newuser.id">
<input type="button" class="btn btn-primary" ng-click="saveUser()" class="btn btn-primary" value = "Submit">
</form>
<div><h4><b>Registered Users</b></h4>
<table ng-if="users.length" class = "table table-striped table-bordered table-hover">
<thead>
<tr class = "info">
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th ng-if="!ifSearchUser">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "user in users">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.phone }}</td>
<td ng-if="!ifSearchUser">
<a href="#" ng-click="edit(user.id)" role = "button" class = "btn btn-info">edit</a> &nbsp;
<a href="#" ng-click="delete(user.id)" role = "button" class = "btn btn-danger">delete</a>
</td>
</tr>
</tbody>
</table>
<div ng-hide="users.length > 0">No Users Found</div>
</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>User Registraion Form - W3Adda</title>

</head>

<body>

<h3><b>User Registraion Form - W3Adda</b></h3>

</div>

<a href="#" ng-click="searchUser()">{{title}}</a>

</div>

</div>

<label for = "email"> Email: </label>

</div>

<label for = "password"> Password: </label>

</div>

<label for = "phone"> Phone: </label>

</div>

<br>

</form>

<div><h4><b>Registered Users</b></h4>

<thead>

<th>Email</th>

<th>Phone</th>

<th ng-if="!ifSearchUser">Action</th>

</tr>

</thead>

<tbody>

<td>{{ user.email }}</td>

<td>{{ user.phone }}</td>

<a href="#" ng-click="delete(user.id)" role = "button" class = "btn btn-danger">delete</a>

</td>

</tr>

</tbody>

</table>

<div ng-hide="users.length > 0">No Users Found</div>

</div>

</body>

</html>

On top of the the form we have a link User List to list all the registered users. Right below the form, you have a list of registered users along with Edit/Delete button.

Create AngularJS Application

In this step, we will first create a javascript file app.js in our project’s root directory and define a AngularJS application. Let’s create app.js file and put the following code in it –

app.js

var myApp = angular.module("myApp", []);

1	var myApp = angular.module("myApp", []);

AngularJS Registration Service

Now we will create a registration service that will be used add, list, edit and delete users. Let’s open app.js file and append the following code in it –

// Register Service
myApp.service("RegisterService" , function(){
var uid = 1;
var users = [{
'id' : 0,
'name' : 'John Doe',
'email' : 'johndoe@gmail.com',
'password': 'johndoe',
'phone' : '123-45-678-901'}];	

	// Save User
	this.save = function(user)  
	{
		if(user.id == null)                       
		{
			user.id = uid++;
			users.push(user);
		}
		else
		{
			for(var i in users)
			{
				if(users[i].id == user.id)
				{
					users[i] = user;
				}
			}
		}
	};

	// Search User
	this.get = function(id)
	{
		for(var i in users )
		{
		if( users[i].id == id)
		{
		return users[i];
		}
		}
	};

	// Delete User
	this.delete = function(id)
	{
	for(var i in users)
	{
	if(users[i].id == id)
	{
	users.splice(i,1);
	}
	}
	};	

	// List Users
	this.list = function()
	{
	return users;
	};	
});

// Register Service

myApp.service("RegisterService" , function(){

var uid = 1;

var users = [{

'id' : 0,

'name' : 'John Doe',

'email' : 'johndoe@gmail.com',

'password': 'johndoe',

'phone' : '123-45-678-901'}];

// Save User

this.save = function(user)

{

if(user.id == null)

{

user.id = uid++;

users.push(user);

}

else

{

for(var i in users)

{

if(users[i].id == user.id)

{

users[i] = user;

}

};

// Search User

this.get = function(id)

{

for(var i in users )

{

if( users[i].id == id)

{

return users[i];

}

};

// Delete User

this.delete = function(id)

{

for(var i in users)

{

if(users[i].id == id)

{

users.splice(i,1);

}

};

// List Users

this.list = function()

{

return users;

};

});

AngularJS Registration Controller

Now we will create a registration controller that will be bind add, list, edit and delete action to registration service. Let’s open app.js file and append the following code in it –

app.js

// Register Controller 
myApp.controller("RegisterController" , function($scope , RegisterService){
console.clear();
$scope.ifSearchUser = false;
$scope.title ="User List";
$scope.users = RegisterService.list();
$scope.saveUser = function()
{
	console.log($scope.newuser);
	if($scope.newuser == null || $scope.newuser == angular.undefined)
	return;
	RegisterService.save($scope.newuser);
	$scope.newuser = {};
};		
$scope.delete = function(id)
{
	RegisterService.delete(id);
	if($scope.newuser != angular.undefined && $scope.newuser.id == id)
	{
		$scope.newuser = {};
	}
};		
$scope.edit = function(id)
{
	$scope.newuser = angular.copy(RegisterService.get(id));
};		
$scope.searchUser = function(){
	if($scope.title == "User List"){
		$scope.ifSearchUser=true;
		$scope.title = "Back";
	}
	else
	{
		$scope.ifSearchUser = false;
		$scope.title = "User List";
	}		  
};
});

// Register Controller

myApp.controller("RegisterController" , function($scope , RegisterService){

console.clear();

$scope.ifSearchUser = false;

$scope.title ="User List";

$scope.users = RegisterService.list();

$scope.saveUser = function()

{

console.log($scope.newuser);

if($scope.newuser == null || $scope.newuser == angular.undefined)

return;

RegisterService.save($scope.newuser);

$scope.newuser = {};

};

$scope.delete = function(id)

{

RegisterService.delete(id);

if($scope.newuser != angular.undefined && $scope.newuser.id == id)

{

$scope.newuser = {};

}

};

$scope.edit = function(id)

{

$scope.newuser = angular.copy(RegisterService.get(id));

};

$scope.searchUser = function(){

if($scope.title == "User List"){

$scope.ifSearchUser=true;

$scope.title = "Back";

}

else

{

$scope.ifSearchUser = false;

$scope.title = "User List";

}

};

});

Our final app.js file will look like as following –

app.js

var myApp = angular.module("myApp", []);
// Register Service
myApp.service("RegisterService" , function(){
var uid = 1;
var users = [{
'id' : 0,
'name' : 'John Doe',
'email' : 'johndoe@gmail.com',
'password': 'johndoe',
'phone' : '123-45-678-901'}];	

	// Save User
	this.save = function(user)  
	{
		if(user.id == null)                       
		{
			user.id = uid++;
			users.push(user);
		}
		else
		{
			for(var i in users)
			{
				if(users[i].id == user.id)
				{
					users[i] = user;
				}
			}
		}
	};

	// Search User
	this.get = function(id)
	{
		for(var i in users )
		{
		if( users[i].id == id)
		{
		return users[i];
		}
		}
	};

	// Delete User
	this.delete = function(id)
	{
	for(var i in users)
	{
	if(users[i].id == id)
	{
	users.splice(i,1);
	}
	}
	};	

	// List Users
	this.list = function()
	{
	return users;
	};	
});

// Register Controller 
myApp.controller("RegisterController" , function($scope , RegisterService){
console.clear();
$scope.ifSearchUser = false;
$scope.title ="User List";
$scope.users = RegisterService.list();
$scope.saveUser = function()
{
	console.log($scope.newuser);
	if($scope.newuser == null || $scope.newuser == angular.undefined)
	return;
	RegisterService.save($scope.newuser);
	$scope.newuser = {};
};		
$scope.delete = function(id)
{
	RegisterService.delete(id);
	if($scope.newuser != angular.undefined && $scope.newuser.id == id)
	{
		$scope.newuser = {};
	}
};		
$scope.edit = function(id)
{
	$scope.newuser = angular.copy(RegisterService.get(id));
};		
$scope.searchUser = function(){
	if($scope.title == "User List"){
		$scope.ifSearchUser=true;
		$scope.title = "Back";
	}
	else
	{
		$scope.ifSearchUser = false;
		$scope.title = "User List";
	}		  
};
});

100

var myApp = angular.module("myApp", []);

// Register Service

myApp.service("RegisterService" , function(){

var uid = 1;

var users = [{

'id' : 0,

'name' : 'John Doe',

'email' : 'johndoe@gmail.com',

'password': 'johndoe',

'phone' : '123-45-678-901'}];

// Save User

this.save = function(user)

{

if(user.id == null)

{

user.id = uid++;

users.push(user);

}

else

{

for(var i in users)

{

if(users[i].id == user.id)

{

users[i] = user;

}

};

// Search User

this.get = function(id)

{

for(var i in users )

{

if( users[i].id == id)

{

return users[i];

}

};

// Delete User

this.delete = function(id)

{

for(var i in users)

{

if(users[i].id == id)

{

users.splice(i,1);

}

};

// List Users

this.list = function()

{

return users;

};

});

// Register Controller

myApp.controller("RegisterController" , function($scope , RegisterService){

console.clear();

$scope.ifSearchUser = false;

$scope.title ="User List";

$scope.users = RegisterService.list();

$scope.saveUser = function()

{

console.log($scope.newuser);

if($scope.newuser == null || $scope.newuser == angular.undefined)

return;

RegisterService.save($scope.newuser);

$scope.newuser = {};

};

$scope.delete = function(id)

{

RegisterService.delete(id);

if($scope.newuser != angular.undefined && $scope.newuser.id == id)

{

$scope.newuser = {};

}

};

$scope.edit = function(id)

{

$scope.newuser = angular.copy(RegisterService.get(id));

};

$scope.searchUser = function(){

if($scope.title == "User List"){

$scope.ifSearchUser=true;

$scope.title = "Back";

}

else

{

$scope.ifSearchUser = false;

$scope.title = "User List";

}

};

});

Run AngularJS Application

Now start the application server and visit the application to view the output.

Output:-

angularjs-simple-user-registration-form-3

What Is Single Page Application In Angularjs?

Leave a reply

What Is Single Page Application In Angularjs?

Single page application (SPA) is a web application that is contained in a single page. In a single page application all our code (JS, HTML, CSS) is loaded when application loads for the first time. Loading of the dynamic contents and the navigation between pages is done without refreshing the page. Single page application (SPA) is usually created using javascript based front-end web application framework.

What Is AngularJS?

AngularJS is one of the widely used front-end web application framework used for building Single Page Application (SPA). It extends the traditional HTML with new attributes and data-binding components that enable us to serve dynamic page content. In Our Next article, we’ll learn how to build a Single Page Application (SPA) using AngularJS Routing and AngularJS Template.

What Are Single Page Application Advantages (Pros)

Building any application as single page application will comes with significant number of benefits. In this article, we will talk about some of the key single page application advantages listed as below –

Improved User Experience :- Single page application bring a much-improved experience to the user.

No Page Refresh :- In a Single Page Application, there is no need to refresh the whole page for every request, all our code (JS, HTML, CSS) is loaded when application loads for the first time. Loading of the dynamic contents and the navigation between pages is done without refreshing the page.

Faster and Responsive :- Single Page Applications are faster because they require less bandwidth, and no full page refreshes when user navigates through the application.

Caching capabilities :- Single Page Applications comes with caching capabilities which allows it to cache any local data effectively. Single Page Application sends single request to server and then stores all the data it receives locally. Which it can use it and work even offline.

What Are Single Page Application Disadvantages (Cons)

While building single page application will comes with significant number of benefits. It also has some disadvantages that must be considered while building a single page application –

Javascript Must Be Enabled :- Single Page Application requires javascript to enabled. Fortunately, almost everyone has javascript enabled.

Initial load is slow :- All our code (JS, HTML, CSS) is loaded when application loads for the first time which cause it slow initially.

Complex to build :- You must have understanding of single page application architecture and front end technologies. It also requires you to have pretty much javascript knowledge for building single page applications.

Search Engine Optimization(SEO) :- Single Page Applications are not considered as much seo friendly. Fortunately, Google and Bing started indexing Single Page Applications.

Single Page Application (SPA) Architecture

Single Page Application with AngularJS Routing and Templating

Leave a reply

Single Page Application with AngularJS Routing and Templating

AngularJS is a javascript based front-end web application framework, it is widely used for building Single Page Application (SPA). It extends the traditional HTML with new attributes and data-binding components that enable us to serve dynamic page content. In this article, we’ll learn how to build a Single Page Application (SPA) using AngularJS Routing and AngularJS Template.

How to Create Single Page Application Using AngularJS

Leave a reply

Create Single Page Application Using AngularJS

AngularJS is an open source front-end web application framework based on javascript, it is widely used for building Single Page Application (SPA). It extends the traditional HTML with new attributes and data-binding components that enable us to serve dynamic page content. In this article, we’ll learn how to build a Single Page Application (SPA) using AngularJS and AngularJS Route library.

What Is Single Page Application?

AngularJS Single page application (SPA) is a web application that is contained in a single page. In a single page application all our code (JS, HTML, CSS) is loaded when application loads for the first time. Loading of the dynamic contents and the navigation between pages is done without refreshing the page.

Step 1:- This is the simple part. Here we will create a simple index.html file and add a simple layout with a navigation bar. We will also load angular and angular route library via CDN.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>
        Angular Routing
    </title>
</head> 
<style>
    #nav{
        width: 19%;
        display: inline-block;
        background: #429cd6;
        border: 1px solid #3c87b2;

    }
    #page-content{
        width: 79%;
        display: inline-block;
        vertical-align: top;
        padding: 8px;
        padding-top: 0px;
    }
    ul{
        list-style: none;
        padding-right: 10px;
    }
    li{
        background-color: #ffffff;
        color: white;
        margin: 5px;
        text-decoration: none;
        text-align: center;
        padding: 3px;
        font-size: 20px;
        font-family: 'Helvetica', sans-serif;
    }
    a{
        color: black;
        text-decoration: none;
    }
</style>
<!-- Load AngularJS and Angular Route JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

<body ng-app="myApp">

<!-- AngularJS Navigation -->    
<div id="nav">
    <ul>
        <li><a href="#!">Home</a></li>
        <li><a href="#!about">About</a></li>
        <li><a href="#!services">Services</a></li>
        <li><a href="#!projects">Projects</a></li>
    </ul>
</div>
<div id="page-content">
    <h1>AngularJS Single Page Application - W3Adda</h1>

    <!-- this is where page content will be loaded -->
    <div ng-view></div>
</div>
<!-- Load AngularJS Module and Angular Route Configuration -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>

Angular Routing

</title>

</head>

<style>

#nav{

width: 19%;

display: inline-block;

background: #429cd6;

border: 1px solid #3c87b2;

}

#page-content{

width: 79%;

display: inline-block;

vertical-align: top;

padding: 8px;

padding-top: 0px;

}

ul{

list-style: none;

padding-right: 10px;

}

li{

background-color: #ffffff;

color: white;

margin: 5px;

text-decoration: none;

text-align: center;

padding: 3px;

font-size: 20px;

font-family: 'Helvetica', sans-serif;

}

color: black;

text-decoration: none;

}

</style>

<ul>

<li><a href="#!about">About</a></li>

<li><a href="#!services">Services</a></li>

<li><a href="#!projects">Projects</a></li>

</ul>

</div>

<h1>AngularJS Single Page Application - W3Adda</h1>

</div>

</body>

</html>

Step 2:-

Angular Application

script.js

// create the module and name it myApp
var app = angular.module("myApp", ['ngRoute']);

1 2	// create the module and name it myApp var app = angular.module("myApp", ['ngRoute']);

The app variable is initialized as angular module and named as “myApp”, the ng-app directive is used to bind the angular application to a container. It is important to use the same module name to bind using ng-app directive.

Step 3:-

Configure Routes

Since we are making a single page application and we don’t want any page refreshes. Here we’ll use Angular’s routing capabilities to setup single page application.We will use ngRoute module for that. Notice that we have added ngRoute as a part of the parameter passed to our angular module. The ngRoute module provides routing, deeplinking services and directives to our angular applications. We will be using $routeProvider in app.config to configure our application routing. Let’s open our script.js file and put the following in it –

script.js

// create the module and name it scotchApp
var app = angular.module("myApp", ['ngRoute']);

// configure routes
app.config(function($routeProvider){
    $routeProvider
    .when("/", {template:"<p>AngularJS Single Page Application(SPA).</p>"})
    .when("/about", {templateUrl : "about.html"})
    .when("/services", {templateUrl : "services.html"})
    .when("/projects", {templateUrl : "projects.html"})
    });

// create the module and name it scotchApp

var app = angular.module("myApp", ['ngRoute']);

// configure routes

app.config(function($routeProvider){

$routeProvider

.when("/", {template:"<p>AngularJS Single Page Application(SPA).</p>"})

.when("/about", {templateUrl : "about.html"})

.when("/services", {templateUrl : "services.html"})

.when("/projects", {templateUrl : "projects.html"})

});

Now we have defined our routes with $routeProvider. As you can see by the configuration, you can specify the route, the template file to use, and even a controller.

AngularJS Template

Writing HTML code inside template is very constraining and to counter it one can use templateURL and instead of writing HTML code directly we specify the HTML file that will be injected corresponding to route. Now, we just need to define the page templates that will be injected.

about.html

<!-- about.html -->
<h2>About</h2>
<p>About Page Contents</p>

<h2>About</h2>

<p>About Page Contents</p>

services.html

<!-- services.html -->
<h2>Services</h2>
<p>Service Page Contents</p>

<h2>Services</h2>

<p>Service Page Contents</p>

projects.html

<!-- projects.html -->
<h2>Projects</h2>
<p>Project Page Contents</p>

<h2>Projects</h2>

<p>Project Page Contents</p>

AngularJS View

To finish off with this tutorial, we need to specify the container where content of each page will be loaded in our layout. In AngularJS, there is a ng-view directive that will injects the template file of the current route (/about , /services or /projects) in the main layout file. Notice that we have added ng-view directive in main (index.html) layout file.

<div id="page-content">
    <h1>AngularJS Single Page Application - W3Adda</h1>

    <!-- this is where page content will be loaded -->
    <div ng-view></div>
</div>

<h1>AngularJS Single Page Application - W3Adda</h1>

</div>

Now, start the server and visit the project. You will see following screen as output –

Output:-

angularjs-single-page-application-1

About Page:-

angularjs-single-page-application-2

Services Page :-

angularjs-single-page-application-3

Projects Page :-

angularjs-single-page-application-4

AngularJS CRUD With Php MySql REST API or Webservice Example

Leave a reply

AngularJS CRUD With Php MySql REST API or Webservice

In this AngularJS CRUD with Php/MySql tutorial, I’ll show you how to create a simple AngularJS CRUD application with PHP/MySql REST API or Webservice . In this step by step tutorial, we will be creating a simple AngularJS SPA blog application with PHP/MySql restful API. In this article, you will learn how to create fully functional CRUD (Create, Read, Update and Delete) REST API using PHP/MySql and integrate it with AngularJS Single Page Application. So, you have to just follow this step by step angularJS crud application tutorial to create a fully functional angularjs blog application.

Projects Directory Structure :-

angularjs-crud-php-mysql-rest-api-webservices-1

Create Database Table and Configuration File

Step 1:- Create DB and Posts Table

In this step we will create a database and posts table in it. I have created a database with name “crudone” and created a “posts” table inside in it. So you also need to create a database with name of your choice and put “posts” table in it. You can create “posts” table using the mysql query given as following –

CREATE TABLE `posts` (
  `id` int(10) UNSIGNED NOT NULL,
  `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `description` text COLLATE utf8_unicode_ci NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE `posts` (

`id` int(10) UNSIGNED NOT NULL,

`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,

`description` text COLLATE utf8_unicode_ci NOT NULL,

`created_at` timestamp NULL DEFAULT NULL,

`updated_at` timestamp NULL DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Step 2:- Create DB Config file

Now, we will create a database configuration file to hold database credentials and database connection. Let’s create db_config.php file in your project root directory and put the following code in it –

db_config.php

<?php
define ('DB_USER', "root");
define ('DB_PASSWORD', "");
define ('DB_DATABASE', "crudone");
define ('DB_HOST', "localhost");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
?>

<?php

define ('DB_USER', "root");

define ('DB_PASSWORD', "");

define ('DB_DATABASE', "crudone");

define ('DB_HOST', "localhost");

$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);

Step 3:- Create index.php file

Next, we will create index.php file in project root directory and put the following code in it –

index.php

<html lang="en">

<head>
	<title>AngularJS Simple CRUD Application - W3Adda</title>

	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
	<!-- Angular JS -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.min.js"></script>

	<!-- My App -->
	<script src="app/routes.js"></script>
	<script src="app/helper/myHelper.js"></script>

	<!-- App Controller -->
	<script src="app/controllers/PostController.js"></script>

</head>

<body ng-app="main-App">

	<div class="container">
		<ng-view></ng-view>
	</div>
</body>
</html>

<head>

<title>AngularJS Simple CRUD Application - W3Adda</title>

</head>

<ng-view></ng-view>

</div>

</body>

</html>

Create PHP/MySql CRUD REST API

Now, after creating database and posts table in it we are ready to implement Restful CRUD (Create, Read, Update and Delete) API. We will create a separate api directory in our project folder to keep all API files in it like as below.

angularjs-crud-php-mysql-rest-api-webservices-2

now we will be creating separate files for each of the individual CRUD operation and put the given code accordingly.

api/add.php

This file holds the logic to add blog posts into the database.

<?php
	require '../db_config.php';
	$post = file_get_contents('php://input');
	$post = json_decode($post);

	$sql = "INSERT INTO posts (title,description) VALUES ('".$post->title."','".$post->description."')";
	$result = $mysqli->query($sql);

	$sql = "SELECT * FROM posts Order by id desc LIMIT 1"; 
	$result = $mysqli->query($sql);
	$data = $result->fetch_assoc();
	
	echo json_encode($data);
?>

<?php

require '../db_config.php';

$post = file_get_contents('php://input');

$post = json_decode($post);

$sql = "INSERT INTO posts (title,description) VALUES ('".$post->title."','".$post->description."')";

$result = $mysqli->query($sql);

$sql = "SELECT * FROM posts Order by id desc LIMIT 1";

$result = $mysqli->query($sql);

$data = $result->fetch_assoc();

echo json_encode($data);

api/edit.php

This file holds the logic to fetch and return a single blog post with given id for editing.

<?php
	require '../db_config.php';
	$id  = $_GET["id"];

	$sql = "SELECT * FROM posts WHERE id = '".$id."'"; 
	$result = $mysqli->query($sql);
	$data = $result->fetch_assoc();
	
	echo json_encode($data);
?>

<?php

require '../db_config.php';

$id = $_GET["id"];

$sql = "SELECT * FROM posts WHERE id = '".$id."'";

$result = $mysqli->query($sql);

$data = $result->fetch_assoc();

echo json_encode($data);

api/update.php

This file holds the logic to update blog posts with given id into the database.

<?php
require '../db_config.php';

$id  = $_GET["id"];

$post = file_get_contents('php://input');
$post = json_decode($post);
$sql = "UPDATE posts SET title = '".$post->title."', description = '".$post->description."' WHERE id = '".$id."'";
$result = $mysqli->query($sql);

$sql = "SELECT * FROM posts WHERE id = '".$id."'"; 
$result = $mysqli->query($sql);
$data = $result->fetch_assoc();

echo json_encode($data);
?>

<?php

require '../db_config.php';

$id = $_GET["id"];

$post = file_get_contents('php://input');

$post = json_decode($post);

$sql = "UPDATE posts SET title = '".$post->title."', description = '".$post->description."' WHERE id = '".$id."'";

$result = $mysqli->query($sql);

$sql = "SELECT * FROM posts WHERE id = '".$id."'";

$result = $mysqli->query($sql);

$data = $result->fetch_assoc();

echo json_encode($data);

api/getData.php

This file holds the logic to fetch and return all blog posts from the database.

<?php
require '../db_config.php';

$sql = "SELECT * FROM posts"; 
$result = $mysqli->query($sql);

while($row = $result->fetch_assoc()){
     $json[] = $row;
}

$data['data'] = $json;
$result =  mysqli_query($mysqli,$sql);
echo json_encode($data);
?>

<?php

require '../db_config.php';

$sql = "SELECT * FROM posts";

$result = $mysqli->query($sql);

while($row = $result->fetch_assoc()){

$json[] = $row;

}

$data['data'] = $json;

$result = mysqli_query($mysqli,$sql);

echo json_encode($data);

api/delete.php

This file holds the logic to delete a single blog post from the database.

<?php
require '../db_config.php';
$id  = $_GET["id"];
$sql = "DELETE FROM posts WHERE id = '".$id."'";
$result = $mysqli->query($sql);

echo json_encode([$id]);
?>

<?php

require '../db_config.php';

$id = $_GET["id"];

$sql = "DELETE FROM posts WHERE id = '".$id."'";

$result = $mysqli->query($sql);

echo json_encode([$id]);

Create AngularJS CRUD Appilication

Now, after done with all the backend Rest Api we are ready to create frontend AngularJS CRUD application. We will creating a separate app directory in our project’s root directory to keep all AngularJS files in it like as below.

angularjs-crud-php-mysql-rest-api-webservices-3

Create AngularJS Routing File

So first we will create a routes.js file inside app folder to hold all of the application routing logic. Let’s create routes.js file and put bellow code in it.

app/routes.js

var app =  angular.module('main-App',['ngRoute']);
app.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
	        when('/', {
	            templateUrl: 'templates/posts.html',
	            controller: 'PostController'
	        });
}]);

var app = angular.module('main-App',['ngRoute']);

app.config(['$routeProvider',

function($routeProvider) {

$routeProvider.

when('/', {

templateUrl: 'templates/posts.html',

controller: 'PostController'

});

}]);

Create AngularJS Controller File

Now we will create a AngularJS controller file “app/controller/PostController.js” to hold CRUD Operation logic. We will create a separate controller directory in app folder and create PostController.js file in it and put the following code in it.

app/controller/PostController.js

var URL = "http://localhost/w3adda-angularjs/angularjs-simple-crud";
app.controller('PostController', function($scope,$http){
 
  $scope.data = [];

  getResultsPage();

  function getResultsPage() {
    $http({
      url: URL + '/api/getData.php',
      method: 'GET'
    }).then(function(res){
      $scope.data = res.data.data;
    });
  }

  $scope.saveAdd = function(){
    $http({
      url: URL + '/api/add.php',
      method: 'POST',
      data: $scope.form
    }).then(function(data){
      $scope.data.push(data.data);
      $(".modal").modal("hide");
    });
  }

  $scope.edit = function(id){
    $http({
      url: URL + '/api/edit.php?id='+id,
      method: 'GET'
    }).then(function(data){
      $scope.form = data.data;
    });
  }

  $scope.saveEdit = function(){
    $http({
      url: URL + '/api/update.php?id='+$scope.form.id,
      method: 'POST',
      data: $scope.form
    }).then(function(data){
      $(".modal").modal("hide");
        $scope.data = apiModifyTable($scope.data,data.data.id,data.data);
    });
  }

  $scope.remove = function(post,index){
    var result = confirm("Are you sure delete this post?");
   	if (result) {
      $http({
        url: URL + '/api/delete.php?id='+post.id,
        method: 'DELETE'
      }).then(function(data){
        $scope.data.splice(index,1);
      });
    }
  }
   
});

var URL = "http://localhost/w3adda-angularjs/angularjs-simple-crud";

app.controller('PostController', function($scope,$http){

$scope.data = [];

getResultsPage();

function getResultsPage() {

$http({

url: URL + '/api/getData.php',

method: 'GET'

}).then(function(res){

$scope.data = res.data.data;

});

}

$scope.saveAdd = function(){

$http({

url: URL + '/api/add.php',

method: 'POST',

data: $scope.form

}).then(function(data){

$scope.data.push(data.data);

$(".modal").modal("hide");

});

}

$scope.edit = function(id){

$http({

url: URL + '/api/edit.php?id='+id,

method: 'GET'

}).then(function(data){

$scope.form = data.data;

});

}

$scope.saveEdit = function(){

$http({

url: URL + '/api/update.php?id='+$scope.form.id,

method: 'POST',

data: $scope.form

}).then(function(data){

$(".modal").modal("hide");

$scope.data = apiModifyTable($scope.data,data.data.id,data.data);

});

}

$scope.remove = function(post,index){

var result = confirm("Are you sure delete this post?");

if (result) {

$http({

url: URL + '/api/delete.php?id='+post.id,

method: 'DELETE'

}).then(function(data){

$scope.data.splice(index,1);

});

}

});

Create AngularJS Helper File

Now we will create a AngularJS Helper file “app/helper/myHelper.js“ to hold all helper function . We will create a separate helper directory in app folder to hold all helper functions in it. Let’s create myHelper.js file in “app/helper/” directory and put the following code in it.

app/helper/myHelper.js

function apiModifyTable(originalData,id,response){
    angular.forEach(originalData, function (item,key) {
        if(item.id == id){
            originalData[key] = response;
        }
    });
    return originalData;
}

function apiModifyTable(originalData,id,response){

angular.forEach(originalData, function (item,key) {

if(item.id == id){

originalData[key] = response;

}

});

return originalData;

}

Create AngularJS Template File

Finally we will create a template file. In AngularJS when we visit any angularjs route then it will output using one of the angularjs template file. We will create a separate template directory in app folder to hold all the project template files in it. Here we will create posts.html file in it and put the code given below for all the CRUD Operations.

templates/posts.html

<div class="row">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
            <h1 style="color:#3276B1"><strong>AngularJS Simple CRUD Application - W3Adda</h1>
        </div>
        <div class="pull-right" style="padding-top:30px">
            <button class="btn btn-success" data-toggle="modal" data-target="#create-user">Add New</button>
        </div>
    </div>
</div>


<table class="table table-bordered pagin-table">
    <thead>
        <tr>
            <th>No</th>
            <th>Title</th>
            <th>Description</th>
            <th width="220px">Action</th>
        </tr>
    </thead>
    <tbody>
            <tr ng-repeat="value in data">
            <td>{{ $index + 1 }}</td>
            <td>{{ value.title }}</td>
            <td>{{ value.description }}</td>
            <td>
            <button data-toggle="modal" ng-click="edit(value.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
            <button ng-click="remove(value,$index)" class="btn btn-danger">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

<!-- Create Modal -->
<div class="modal fade" id="create-user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="POST" name="addItem" role="form" ng-submit="saveAdd()">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Add Post</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div>
                            <strong>Title : </strong>
                            <div class="form-group">
                                <input ng-model="form.title" type="text" placeholder="Name" name="title" class="form-control" required />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div>
                            <strong>Description : </strong>
                            <div class="form-group" >
                                <textarea ng-model="form.description" class="form-control" required>
                                </textarea>
                            </div>
                        </div>
                    </div>
                    <div class="text-right">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" ng-disabled="addItem.$invalid" class="btn btn-primary">Submit</button>
                    </div>
                    
                </div>
            </div>
            </form>
        </div>
    </div>
</div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="edit-data" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="POST" name="editItem" role="form" ng-submit="saveEdit()">
                <input ng-model="form.id" type="hidden" placeholder="Name" name="name" class="form-control" />
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Edit Post</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div>
                            <strong>Title : </strong>
                            <div class="form-group">
                               <input ng-model="form.title" type="text" placeholder="Name" name="title" class="form-control" required />
                            </div>
                        </div>
                        
                    </div>
                    <div class="row">
                        <div>
                            <strong>Description : </strong>
                            <div class="form-group">
                               <textarea ng-model="form.description" class="form-control" required>
                                </textarea>
                            </div>
                        </div>
                    </div>
                    <div class="text-right">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" ng-disabled="editItem.$invalid" class="btn btn-primary create-crud">Submit</button>
                    </div>
                    
                </div>
            </div>
            </form>
        </div>
    </div>
</div>
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<h1 style="color:#3276B1"><strong>AngularJS Simple CRUD Application - W3Adda</h1>

</div>

</div>

<thead>

<tr>

<th>Title</th>

<th>Description</th>

<th width="220px">Action</th>

</tr>

</thead>

<tbody>

<td>{{ $index + 1 }}</td>

<td>{{ value.title }}</td>

<td>{{ value.description }}</td>

<td>

<button ng-click="remove(value,$index)" class="btn btn-danger">Delete</button>

</td>

</tr>

</tbody>

</table>

</div>

<div>

<strong>Title : </strong>

</div>

<div>

<strong>Description : </strong>

</textarea>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="submit" ng-disabled="addItem.$invalid" class="btn btn-primary">Submit</button>

</div>

</form>

</div>

</div>

<div>

<strong>Title : </strong>

</div>

<div>

<strong>Description : </strong>

</textarea>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="submit" ng-disabled="editItem.$invalid" class="btn btn-primary create-crud">Submit</button>

</div>

</form>

</div>

Start Application

Lets start the application and visit it to see following output –

Output :-

angularjs-crud-php-mysql-rest-api-webservices-4

Create Post –

angularjs-crud-php-mysql-rest-api-webservices-5

List Posts –

angularjs-crud-php-mysql-rest-api-webservices-6

Edit Post –

angularjs-crud-php-mysql-rest-api-webservices-7

Update Post –

angularjs-crud-php-mysql-rest-api-webservices-8

Delete Post –

angularjs-crud-php-mysql-rest-api-webservices-9

Laravel 5.8 Multiple Authentication Using Middleware

Leave a reply

Laravel 5.8 Multiple Authentication Using Middleware

In this Laravel multi (auth) authentication tutorial we will learn how to create separate admin panel or login using middleware. Laravel multi (auth) authentication system allows to create multiple users login in single application.

While developing a laravel application there comes situations where we want create separate user login or separate user/admin panel for users having different privileges or access rights in same application. In laravel this can be achieved in following ways –

1. Laravel multi (auth) authentication using middleware

2. Laravel multi (auth) authentication Using Guards

In one of my previous article we have created separate admin login using laravel multi (auth) authentication using Guards. In this article we will creating separate admin login using laravel multi (auth) authentication system with middleware.

Install Laravel 5.8

First of all we need to create a fresh laravel project, download and install Laravel 5.8 using the below command

composer create-project --prefer-dist laravel/laravel larablog

1	composer create-project --prefer-dist laravel/laravel larablog

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larablog

DB_USERNAME=root

DB_PASSWORD=

Generate Application Key

Open terminal and switch to the project directory and run the following command to generate application key and configure cache.

php artisan key:generate

1	php artisan key:generate

php artisan config:cache

1	php artisan config:cache

Set Default String Length

Locate the file “app/Providers/AppServiceProvider”, and add following line of code to the top of the file

use Illuminate\Support\Facades\Schema;

1	use Illuminate\Support\Facades\Schema;

and inside the boot method set a default string length as given below –

Schema::defaultStringLength(191);

1	Schema::defaultStringLength(191);

So this is how “app/Providers/AppServiceProvider” file looks like –

<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider
{
 public function boot() {
 //
 Schema::defaultStringLength(191);
}
 public function register()
 {
 //
 }
}

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider

{

public function boot() {

Schema::defaultStringLength(191);

}

public function register()

{

}

Migrations and User Model

After installing laravel, you will see the some migration files created inside database/migrations directory for creating default create users table and password reset table. Open app/database/create_users_table.php migration file and add/update the following field for admin.

$table->boolean('is_admin')->nullable();

1	$table->boolean('is_admin')->nullable();

After you added a column “is_admin” to user table run the migration using following command.

php artisan migrate

1	php artisan migrate

After this, go to app/User.php and add is_admin to fillable attribute in the User Model.

protected $fillable = [
'name', 'email', 'password', 'is_admin'
];

protected $fillable = [

'name', 'email', 'password', 'is_admin'

];

Authentication Scaffolding

Laravel comes with in-built basic authentication system, use the below command to generate default authentication scaffolding –

php artisan make:auth

1	php artisan make:auth

This command will generate required Controller files, views and add routes in our web.php routes file that are required for basic authentication system.

Create Admin Middleware

Now, we will create a middleware that authenticate users. This middleware will help to make sure who can access the admin area or who can access the normal user area. Use the following command to generate a middleware for Admin.

php artisan make:middleware Admin

1	php artisan make:middleware Admin

Next, open app/Http/ Middleware/Admin.php file, and here in handle() method implement the logic to authenticate users like below.

public function handle($request, Closure $next){

    if(auth()->user()->is_admin == 1){
        return $next($request);
    }
        return redirect('home')->with('error','You have no admin access');
}

public function handle($request, Closure $next){

if(auth()->user()->is_admin == 1){

return $next($request);

}

return redirect('home')->with('error','You have no admin access');

}

Register Admin Routes

Now, we need to register admin route in $routeMiddleware property in the app/Http/Kernel.php file. Lets open app/Http/Kernel.php file and update the $routeMiddleware property like below –

protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
        'admin' => \App\Http\Middleware\Admin::class,
    ];

protected $routeMiddleware = [

'auth' => \App\Http\Middleware\Authenticate::class,

'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,

'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,

'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,

'can' => \Illuminate\Auth\Middleware\Authorize::class,

'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,

'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,

'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,

'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,

'admin' => \App\Http\Middleware\Admin::class,

];

Set Admin Protected Route

Next, create the route for admin. Open the routes/web.php file and add the following code in it.

routes/web.php

Route::get('admin/routes', 'HomeController@admin')->middleware('admin');

1	Route::get('admin/routes', 'HomeController@admin')->middleware('admin');

Create Controller Methods

Open the app/Http/Controllers/HomeController.php controller file and create two separate methods to handle admin and normal users.

app/Http/Controllers/HomeController.php

public function index(){

	return view('home');
}

public function admin(){

	return view('admin');
}

public function index(){

return view('home');

}

public function admin(){

return view('admin');

}

Create Blade/View

Now we will have two separate view files, first is for home page and second is for after login admin page. Open the resources/views/home.blade.php file and update the following code.

resources/views/home.blade.php

@extends('layouts.app')
 
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>
 
                <div class="card-body">
                    @if(auth()->user()->is_admin == 1)
                    <a href="{{url('admin/routes')}}">Admin</a>
                    @else
                    <div class="panel-heading">Normal User</div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<div class="card-header">Dashboard</div>

@if(auth()->user()->is_admin == 1)

<a href="{{url('admin/routes')}}">Admin</a>

@else

<div class="panel-heading">Normal User</div>

@endif

</div>

@endsection

Here, if(auth()->user()->is_admin == 1) is used to check user is a normal user or an admin user, it will navigate to the admin area. Otherwise, it will redirect to users area.

Now, create a view file called admin.blade.php in the root of the views folder, and add the following code to it.

resources/views/admin.blade.php

@extends('layouts.app')

@section('content')

<div class="row">

<div class="col-md-8 col-md-offset-2">

<div class="panel panel-default">

<div class="panel-heading btn-primary">WELCOME TO ADMIN ROUTE</div>

</div>

</div>

</div>

@endsection

@extends('layouts.app')

@section('content')

<div class="panel-heading btn-primary">WELCOME TO ADMIN ROUTE</div>

</div>

@endsection

Start Development Server

Start the development server using following artisan command –

php artisan serve

1	php artisan serve

In order to test laravel multi auth system first register a user through laravel register and then change the is_admin=1; and try to login again.

User Home 1 :-

laravel-multi-auth-2

After Login Admin Page :-

laravel-multi-auth-1

User Home 2 :-

laravel-multi-auth-3

How to Ban, Suspend or Block User Account in Laravel

Leave a reply

How to Ban, Suspend or Block User Account in Laravel

In this laravel ban / suspend user account tutorial, I’ll show you how to ban, block or suspend a user account using laravel middleware.

Sometimes in laravel application we may identify user account with some suspicious activity, policy violation, spamming or any other misuse of the application. In such situation we may want to ban, block or suspend a user account for some time, after that ban is revoked. when a blocked user account’s ban is revoked it can use the application same as before the account is suspended or banned

In this tutorial, you will learn to ban, block or suspend a user account using laravel middleware. In this example, we will create a laravel middleware to check if the user is banned. In this example we will add a database field named blocked_until in users table then we will check user is suspend/banned or not using the blocked_until field. If an user is found banned or blocked we log them out and redirect back to login page with an error message.

Before starting with tutorial, we are assuming that you already have a fresh installation of a Laravel 5.8. If you have not installed it follow Laravel Installation Step.

Install Laravel 5.8

First of all we need to create a fresh laravel project, download and install Laravel 5.8 using the below command

composer create-project --prefer-dist laravel/laravel larablog

1	composer create-project --prefer-dist laravel/laravel larablog

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lara58blog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara58blog

DB_USERNAME=root

DB_PASSWORD=

Now, use the below command to create default laravel tables automatically.

php artisan migrate

1	php artisan migrate

Authentication Scaffolding

Now, use the below command to generate laravel default authentication scaffolding –

php artisan make:auth

1	php artisan make:auth

This command will generate required Controller files, views and add routes in our web.php routes file that are required for the authentication.

Add New column Using Migration

Now, lets a add a timestamp field named blocked_until that allows you check if user is banned or not. If its null then user is not banned, otherwise we know the date, until when user is banned. Use the following artisan command to generate laravel migration that adds blocked_until field to users table.

php artisan make:migration add_blocked_until_to_users_table

1	php artisan make:migration add_blocked_until_to_users_table

Once this command is executed you will find a migration file created under “database/migrations”. lets open migration file and modify up method with following code –

class AddBlockedUntilToUsersTable extends Migration
{
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->timestamp('blocked_until')->nullable();
        });
    }
}

class AddBlockedUntilToUsersTable extends Migration

{

public function up()

{

Schema::table('users', function (Blueprint $table) {

$table->timestamp('blocked_until')->nullable();

});

}

We also need to add that field to $fillable array in app/User.php model. We will put it into $dates array to.

app/User.php

class User extends Authenticatable
{
    protected $fillable = [
        'name', 'email', 'password', 'blocked_until'
    ];

    protected $dates = [
        'blocked_until'
    ];
}

class User extends Authenticatable

{

protected $fillable = [

'name', 'email', 'password', 'blocked_until'

];

protected $dates = [

'blocked_until'

];

}

Create Laravel Middleware CheckBlocked

Lets create a laravel middleware to check if the user is banned/suspended/blocked. If a blocked user will try to login we log them out and redirect back to login form with an error message. Create a laravel middleware using below command.

php artisan make:middleware CheckBlocked

1	php artisan make:middleware CheckBlocked

Once this command is executed you will find a middleware file created under “app/Http/Middleware/”. Open middleware file and implement logic of to check banned/blocked/suspended users. In that time, we will log them out and redirect to login screen with message.

app/http/middleware/CheckBlocked.php

class CheckBLocked
{
    public function handle($request, Closure $next)
    {
        if (auth()->check() && auth()->user()->blocked_until && now()->lessThan(auth()->user()->blocked_until)) {
			$blocked_days = now()->diffInDays(auth()->user()->blocked_date); 
			$message = 'Your account has been suspended for '.$blocked_days.' '.str_plural('day', $blocked_days).'. Please contact administrator.';
			auth()->logout();     
			return redirect()->route('login')->withMessage($message); 
        }

        return $next($request);
    }
}

class CheckBLocked

{

public function handle($request, Closure $next)

{

if (auth()->check() && auth()->user()->blocked_until && now()->lessThan(auth()->user()->blocked_until)) {

$blocked_days = now()->diffInDays(auth()->user()->blocked_date);

$message = 'Your account has been suspended for '.$blocked_days.' '.str_plural('day', $blocked_days).'. Please contact administrator.';

auth()->logout();

return redirect()->route('login')->withMessage($message);

}

return $next($request);

}

Register Laravel Middleware

Open app/Http/Kernel.php file and register CheckBlocked middleware here, like below –

protected $middlewareGroups = [
 'web' => [
     \App\Http\Middleware\EncryptCookies::class,
     
     // ... other middleware classes

     \App\Http\Middleware\CheckBlocked::class,
 ],

protected $middlewareGroups = [

'web' => [

\App\Http\Middleware\EncryptCookies::class,

// ... other middleware classes

\App\Http\Middleware\CheckBlocked::class,

Add Error Message

Finally, we need to add a error message in login.blade.php. let’s open app/resources/views/auth/login.blade.php file and add error message on above of login form body, like below –

...
<div class="card-body">

    @if (session('message'))
        <div class="alert alert-danger">{{ session('message') }}</div>
    @endif

    <form method="POST" action="{{ route('login') }}">
...

...

@if (session('message'))

<div class="alert alert-danger">{{ session('message') }}</div>

@endif

...

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser and try to login with blocked or suspended user account to see the output –

http://localhost:8000/login

Output:-

laravel-ban-user-account-1

Laravel 5.8 Passport Authentication | Create REST API with Passport authentication

Leave a reply

Laravel 5.8 Create REST API with Passport Authentication

In one of my previous articles, we have learn How to Create REST API With JWT Authentication In Laravel using Laravel JWT package for REST authentication API. In this article, we will learn to create fully functional restful API with Passport Authentication in Laravel. In this tutorial, we will be creating fully functional CRUD APIs for Blog Posts along with Passport Authentication In laravel.

What is Passport Authentication?

Laravel comes with default login authentication, but when we want to create APIs we have to use tokens instead of sessions for authenticating users, as APIs does not support session variables. After login via API, user must be assigned a token and sent back to the user which is further used for authenticating API requests. Authentication token is used to securely transmit data between third-parties. Laravel provides Passport authentication which makes it easy creating REST APIs in laravel.

Install Laravel 5.8

First of all we need to create a fresh laravel project, download and install Laravel 5.8 using the below command

composer create-project --prefer-dist laravel/laravel passportauth

1	composer create-project --prefer-dist laravel/laravel passportauth

Install Laravel Passport Package

In this step, we need to install Laravel Passport package via the composer dependency manager. Use the following command to install passport package.

composer require laravel/passport

1	composer require laravel/passport

After Installing ‘laravel/passport’ package, we need to add Passport service provider in config/app.php file as following.

config/app.php

'providers' => [
    ....
    Laravel\Passport\PassportServiceProvider::class,
]

'providers' => [

....

Laravel\Passport\PassportServiceProvider::class,

]

Run Migration and Install Laravel Passport

After successfully installing ‘laravel/passport’ package, we require to create default passport tables in our database. so let’s run the following command to migrate Laravel Passport tables to your database.

php artisan migrate

1	php artisan migrate

Now, it is mandatory to install passport using the command below. This command will generate encryption keys required to generate secret access tokens.

php artisan passport:install

1	php artisan passport:install

Laravel Passport Configuration

Now, we need to make following changes in our model, service provider and auth config file to complete passport configuration. Open App/User.php model file and add ‘Laravel\Passport\HasApiTokens’ trait in it.

app/User.php

<?php
 
namespace App;
 
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Laravel\Passport\HasApiTokens;
 
class User extends Authenticatable
{
    use HasApiTokens, Notifiable;
 
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];
 
    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];
}

<?php

namespace App;

use Illuminate\Notifications\Notifiable;

use Illuminate\Foundation\Auth\User as Authenticatable;

use Laravel\Passport\HasApiTokens;

class User extends Authenticatable

{

use HasApiTokens, Notifiable;

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'name', 'email', 'password',

];

/**

* The attributes that should be hidden for arrays.

* @var array

protected $hidden = [

'password', 'remember_token',

];

}

Next Register passport routes in App/Providers/AuthServiceProvider.php, open App/Providers/AuthServiceProvider.php and add Passport::routes method in the boot method of your AuthServiceProvider. It will generate necessary routes. This is how the app/Providers/AuthServiceProvider.php will look like after changes.

<?php

namespace App\Providers;
use Laravel\Passport\Passport;
use Illuminate\Support\Facades\Gate;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;

class AuthServiceProvider extends ServiceProvider
{
    /**
     * The policy mappings for the application.
     *
     * @var array
     */
    protected $policies = [
        // 'App\Model' => 'App\Policies\ModelPolicy',
    ];

    /**
     * Register any authentication / authorization services.
     *
     * @return void
     */
    public function boot()
    {
        $this->registerPolicies();

        //
        Passport::routes();
    }
}

<?php

namespace App\Providers;

use Laravel\Passport\Passport;

use Illuminate\Support\Facades\Gate;

use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;

class AuthServiceProvider extends ServiceProvider

{

/**

* The policy mappings for the application.

* @var array

protected $policies = [

// 'App\Model' => 'App\Policies\ModelPolicy',

];

/**

* Register any authentication / authorization services.

* @return void

public function boot()

{

$this->registerPolicies();

Passport::routes();

}

Now open config/auth.php file and set api driver to passport instead of session.

config/auth.php

return [
    ....
 
    'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],
 
        'api' => [
            'driver' => 'passport',
            'provider' => 'users',
        ],
    ],
 
    ....
]

return [

....

'guards' => [

'web' => [

'driver' => 'session',

'provider' => 'users',

'api' => [

'driver' => 'passport',

'provider' => 'users',

....

]

Create API Routes

Let’s create API routes. Open routes/api.php file create api routes as below –

Route::post('login', 'PassportController@login');
Route::post('register', 'PassportController@register');
 
Route::middleware('auth:api')->group(function () {
    Route::get('user', 'PassportController@details');
});

Route::post('login', 'PassportController@login');

Route::post('register', 'PassportController@register');

Route::middleware('auth:api')->group(function () {

Route::get('user', 'PassportController@details');

});

Create Authentication Controller

Now, create a Authentication Controller name PassportController. Use the below command to create controller.

php artisan make:controller PassportController

1	php artisan make:controller PassportController

Once the above command executed, it will create a resource controller file “AuthController.php” in “app/Http/Controllers/” directory. Go to “PassportController.php” and put the following code in it.

<?php
 
namespace App\Http\Controllers;
 
use App\User;
use Illuminate\Http\Request;
 
class PassportController extends Controller
{
    /**
     * Handles Registration Request
     *
     * @param Request $request
     * @return \Illuminate\Http\JsonResponse
     */
    public function register(Request $request)
    {
        $this->validate($request, [
            'name' => 'required|min:3',
            'email' => 'required|email|unique:users',
            'password' => 'required|min:6',
        ]);
 
        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => bcrypt($request->password)
        ]);
 
        $token = $user->createToken('TutsForWeb')->accessToken;
 
        return response()->json(['token' => $token], 200);
    }
 
    /**
     * Handles Login Request
     *
     * @param Request $request
     * @return \Illuminate\Http\JsonResponse
     */
    public function login(Request $request)
    {
        $credentials = [
            'email' => $request->email,
            'password' => $request->password
        ];
 
        if (auth()->attempt($credentials)) {
            $token = auth()->user()->createToken('TutsForWeb')->accessToken;
            return response()->json(['token' => $token], 200);
        } else {
            return response()->json(['error' => 'UnAuthorised'], 401);
        }
    }
 
    /**
     * Returns Authenticated User Details
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function details()
    {
        return response()->json(['user' => auth()->user()], 200);
    }
}

<?php

namespace App\Http\Controllers;

use App\User;

use Illuminate\Http\Request;

class PassportController extends Controller

{

/**

* Handles Registration Request

* @param Request $request

* @return \Illuminate\Http\JsonResponse

public function register(Request $request)

{

$this->validate($request, [

'name' => 'required|min:3',

'email' => 'required|email|unique:users',

'password' => 'required|min:6',

]);

$user = User::create([

'name' => $request->name,

'email' => $request->email,

'password' => bcrypt($request->password)

]);

$token = $user->createToken('TutsForWeb')->accessToken;

return response()->json(['token' => $token], 200);

}

/**

* Handles Login Request

* @param Request $request

* @return \Illuminate\Http\JsonResponse

public function login(Request $request)

{

$credentials = [

'email' => $request->email,

'password' => $request->password

];

if (auth()->attempt($credentials)) {

$token = auth()->user()->createToken('TutsForWeb')->accessToken;

return response()->json(['token' => $token], 200);

} else {

return response()->json(['error' => 'UnAuthorised'], 401);

}

/**

* Returns Authenticated User Details

* @return \Illuminate\Http\JsonResponse

public function details()

{

return response()->json(['user' => auth()->user()], 200);

}

Building the Post CRUD API

Next, we will be creating a simple blog application with post table and implement CRUD (Create, Read, Update and Delete) APIs. To create the blog posts APIs we have to define table schema for posts table. Open terminal and use the following artisan command to generate <timestamp>create_posts_table.php migration.

php artisan make:migration create_posts_table

1	php artisan make:migration create_posts_table

Once this command is executed you will find a migration file created under “database/migrations”. Lets open migration file and put following code in it –

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->unsignedBigInteger('user_id');
            $table->string('title');
            $table->string('body');
            $table->timestamps();
            $table->foreign('user_id')->references('id')->on('users');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->bigIncrements('id');

$table->unsignedBigInteger('user_id');

$table->string('title');

$table->string('body');

$table->timestamps();

$table->foreign('user_id')->references('id')->on('users');

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Create Model

In this step, we will use the following command to create post model –

php artisan make:model Post

1	php artisan make:model Post

Once, the above command executed it will create a model file Post.php in app directory. Next, we have to assign fillable fields using fillable property inside Post.php file. Open app/Post.php file and put the following code in it –

app/Post.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    //
    protected $fillable = ['title','body'];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $fillable = ['title','body'];

}

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the posts table will be created in database.

Now, we have to add a relationship in the User model to retrieve the related posts. In app/User.php add the following method.

public function posts()
{
    return $this->hasMany(Post::class);
}

public function posts()

{

return $this->hasMany(Post::class);

}

Create Controller

In this step, we will use the following command to create post controller.

php artisan make:controller PostController

1	php artisan make:controller PostController

Once the above command executed, it will create a controller file “PostController.php” in “app/Http/Controllers/” directory. Open the PostController.php file and put the following code in it.

app/Http/Controllers/PostController.php

<?php
 
namespace App\Http\Controllers;
 
use App\Post;
use Illuminate\Http\Request;
 
class PostController extends Controller
{
    public function index()
    {
        $posts = auth()->user()->posts;
 
        return response()->json([
            'success' => true,
            'data' => $posts
        ]);
    }
 
    public function show($id)
    {
        $post = auth()->user()->posts()->find($id);
 
        if (!$post) {
            return response()->json([
                'success' => false,
                'message' => 'Post with id ' . $id . ' not found'
            ], 400);
        }
 
        return response()->json([
            'success' => true,
            'data' => $post->toArray()
        ], 400);
    }
 
    public function store(Request $request)
    {
        $this->validate($request, [
            'title' => 'required',
            'body' => 'required'
        ]);
 
        $post = new Post();
        $post->title = $request->title;
        $post->body = $request->body;
 
        if (auth()->user()->posts()->save($post))
            return response()->json([
                'success' => true,
                'data' => $post->toArray()
            ]);
        else
            return response()->json([
                'success' => false,
                'message' => 'Post could not be added'
            ], 500);
    }
 
    public function update(Request $request, $id)
    {
        $post = auth()->user()->posts()->find($id);
 
        if (!$post) {
            return response()->json([
                'success' => false,
                'message' => 'Post with id ' . $id . ' not found'
            ], 400);
        }
 
        $updated = $post->fill($request->all())->save();
 
        if ($updated)
            return response()->json([
                'success' => true
            ]);
        else
            return response()->json([
                'success' => false,
                'message' => 'Post could not be updated'
            ], 500);
    }
 
    public function destroy($id)
    {
        $post = auth()->user()->posts()->find($id);
 
        if (!$post) {
            return response()->json([
                'success' => false,
                'message' => 'Post with id ' . $id . ' not found'
            ], 400);
        }
 
        if ($post->delete()) {
            return response()->json([
                'success' => true
            ]);
        } else {
            return response()->json([
                'success' => false,
                'message' => 'Post could not be deleted'
            ], 500);
        }
    }
}

100

101

102

103

104

105

106

<?php

namespace App\Http\Controllers;

use App\Post;

use Illuminate\Http\Request;

class PostController extends Controller

{

public function index()

{

$posts = auth()->user()->posts;

return response()->json([

'success' => true,

'data' => $posts

]);

}

public function show($id)

{

$post = auth()->user()->posts()->find($id);

if (!$post) {

return response()->json([

'success' => false,

'message' => 'Post with id ' . $id . ' not found'

], 400);

}

return response()->json([

'success' => true,

'data' => $post->toArray()

], 400);

}

public function store(Request $request)

{

$this->validate($request, [

'title' => 'required',

'body' => 'required'

]);

$post = new Post();

$post->title = $request->title;

$post->body = $request->body;

if (auth()->user()->posts()->save($post))

return response()->json([

'success' => true,

'data' => $post->toArray()

]);

else

return response()->json([

'success' => false,

'message' => 'Post could not be added'

], 500);

}

public function update(Request $request, $id)

{

$post = auth()->user()->posts()->find($id);

if (!$post) {

return response()->json([

'success' => false,

'message' => 'Post with id ' . $id . ' not found'

], 400);

}

$updated = $post->fill($request->all())->save();

if ($updated)

return response()->json([

'success' => true

]);

else

return response()->json([

'success' => false,

'message' => 'Post could not be updated'

], 500);

}

public function destroy($id)

{

$post = auth()->user()->posts()->find($id);

if (!$post) {

return response()->json([

'success' => false,

'message' => 'Post with id ' . $id . ' not found'

], 400);

}

if ($post->delete()) {

return response()->json([

'success' => true

]);

} else {

return response()->json([

'success' => false,

'message' => 'Post could not be deleted'

], 500);

}

Create Resource Route

After this, we need to add resource route for post controller. Lets open “routes/api.php” file and add following route in it.

Route::resource('posts', 'PostController');

1	Route::resource('posts', 'PostController');

our final route file looks as following –

routes/api.php

Route::post('login', 'PassportController@login');
Route::post('register', 'PassportController@register');
 
Route::middleware('auth:api')->group(function () {
    Route::get('user', 'PassportController@details');
    Route::resource('posts', 'PostController');
});

Route::post('login', 'PassportController@login');

Route::post('register', 'PassportController@register');

Route::middleware('auth:api')->group(function () {

Route::get('user', 'PassportController@details');

Route::resource('posts', 'PostController');

});

Start Application Server

Lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Testing the REST API

Our Authentication API is ready to test. I will use Postman to test the API.

Register Api :-
Verb: POST
URL :http://localhost:8000/api/register

Login Api :-
Verb: POST
URL :http://localhost:8000/api/login

User Api :-
Verb: GET
URL: http://localhost:8000/api/user

userinfo

Add Post Api :-
Verb: POST
URL: http://localhost:8000/api/posts

add_post

List User Post Api :-
Verb: GET
URL: http://localhost:8000/api/posts

user_posts

Single Post Api :-
Verb: GET
URL: http://localhost:8000/api/posts/{ID}

get_single_post

Update Post Api :-
Verb: PUT
URL: http://localhost:8000/api/posts/{ID}

update_single_post

Delete Post Api :-
Verb: DELETE
URL: http://localhost:8000/api/posts/{ID}

delete_single_post

Laravel jwt Authentication API | Laravel 5.8 Create REST API with jwt Authentication

Leave a reply

Laravel 5.8 Create REST API with jwt Authentication

In one of my previous articles, we have learn How to Create REST API With Passport Authentication In Laravel using Laravel passport for REST API authentication. In this article, we will learn to create fully functional restful API with JWT Authentication in Laravel. In this tutorial, we will be creating fully functional CRUD APIs for Blog Posts along with JWT Authentication.

What is JWT?

JWT stands for JSON Web Tokens. JSON Web Token (JWT) is an authentication token which is used to securely transmit data between third-parties as a JSON object. The JSON Web token usually remains valid for 3600s or one hour. Nowdays API’s are mostly developed with JWT authentication.

Install Laravel 5.8

First of all we need to create a fresh laravel project, download and install Laravel 5.8 using the below command

composer create-project --prefer-dist laravel/laravel jwtauth

1	composer create-project --prefer-dist laravel/laravel jwtauth

Install JWT Auth Package Using Composer

In this step, we will install tymon jwt auth package via the composer dependency manager. Use the following command to install laravel jet authentication package.

If you are using Laravel version 5.5 or above, run the following command to install jwt package.

composer require tymon/jwt-auth:dev-develop --prefer-source

1	composer require tymon/jwt-auth:dev-develop --prefer-source

If you are using the laravel version 5.4 or less, run the following command to install jwt package.

composer require tymon/jwt-auth

1	composer require tymon/jwt-auth

After Installing tymon/jwt-auth package, we need to add service provider and alias in config/app.php file as following.

config/app.php

For versions less than 5.5, you are also required to set service provider and alias in config/app.php file.

'providers' => [
    ....
    Tymon\JWTAuth\Providers\JWTAuthServiceProvider::class,
    ....
],
'aliases' => [
    ....
    'JWTAuth' => Tymon\JWTAuth\Facades\JWTAuth::class,
    'JWTFactory' => 'Tymon\JWTAuth\Facades\JWTFactory',
    ....
],

'providers' => [

....

Tymon\JWTAuth\Providers\JWTAuthServiceProvider::class,

....

'aliases' => [

....

'JWTAuth' => Tymon\JWTAuth\Facades\JWTAuth::class,

'JWTFactory' => 'Tymon\JWTAuth\Facades\JWTFactory',

....

If you are using Laravel version 5.5 or above, laravel does it automatically using Package Auto-Discovery.

Publishing Configuration File

Publish the configuration file using the following command for versions 5.5 or above

php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"

1	php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"

If you are using previous versions of laravel, run the following command to publish the configuration

php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\JWTAuthServiceProvider"

1	php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\JWTAuthServiceProvider"

Above command will generate a config/jwt.php configuration file.

config/jwt.php

<?php
 
return [
 
    'secret' => env('JWT_SECRET'),
 
    'keys' => [
 
        'public' => env('JWT_PUBLIC_KEY'),
 
        'private' => env('JWT_PRIVATE_KEY'),
 
        'passphrase' => env('JWT_PASSPHRASE'),
    ],
 
    'ttl' => env('JWT_TTL', 60),
 
    'refresh_ttl' => env('JWT_REFRESH_TTL', 20160),
 
    'algo' => env('JWT_ALGO', 'HS256'),
 
    'required_claims' => [
        'iss',
        'iat',
        'exp',
        'nbf',
        'sub',
        'jti',
    ],
 
    'persistent_claims' => [
        // 'foo',
        // 'bar',
    ],
 
    'lock_subject' => true,
 
    'leeway' => env('JWT_LEEWAY', 0),
 
    'blacklist_enabled' => env('JWT_BLACKLIST_ENABLED', true),
 
    'blacklist_grace_period' => env('JWT_BLACKLIST_GRACE_PERIOD', 0),
 
    'decrypt_cookies' => false,
 
    'providers' => [
        'jwt' => Tymon\JWTAuth\Providers\JWT\Lcobucci::class,
 
        'auth' => Tymon\JWTAuth\Providers\Auth\Illuminate::class,
 
        'storage' => Tymon\JWTAuth\Providers\Storage\Illuminate::class,
    ],
];

<?php

return [

'secret' => env('JWT_SECRET'),

'keys' => [

'public' => env('JWT_PUBLIC_KEY'),

'private' => env('JWT_PRIVATE_KEY'),

'passphrase' => env('JWT_PASSPHRASE'),

'ttl' => env('JWT_TTL', 60),

'refresh_ttl' => env('JWT_REFRESH_TTL', 20160),

'algo' => env('JWT_ALGO', 'HS256'),

'required_claims' => [

'iss',

'iat',

'exp',

'nbf',

'sub',

'jti',

'persistent_claims' => [

// 'foo',

// 'bar',

'lock_subject' => true,

'leeway' => env('JWT_LEEWAY', 0),

'blacklist_enabled' => env('JWT_BLACKLIST_ENABLED', true),

'blacklist_grace_period' => env('JWT_BLACKLIST_GRACE_PERIOD', 0),

'decrypt_cookies' => false,

'providers' => [

'jwt' => Tymon\JWTAuth\Providers\JWT\Lcobucci::class,

'auth' => Tymon\JWTAuth\Providers\Auth\Illuminate::class,

'storage' => Tymon\JWTAuth\Providers\Storage\Illuminate::class,

];

Generate JWT Key

Run the following command for laravel 5.5 or above to generate the secret key used to sign the tokens.

php artisan jwt:secret

1	php artisan jwt:secret

For versions below 5.5

php artisan jwt:generate

1	php artisan jwt:generate

Registering Middleware

app/Http/Kernel.php

protected $routeMiddleware = [
    ....
    'auth.jwt' => \Tymon\JWTAuth\Http\Middleware\Authenticate::class,
    'jwt.refresh' => \Tymon\JWTAuth\Middleware\RefreshToken::class,
];

protected $routeMiddleware = [

....

'auth.jwt' => \Tymon\JWTAuth\Http\Middleware\Authenticate::class,

'jwt.refresh' => \Tymon\JWTAuth\Middleware\RefreshToken::class,

];

Update User Model

In this step we will require to implement JWTSubject interface in User model. It is mandatory to implement the Tymon\JWTAuth\Contracts\JWTSubject interface on the User model. This interface requires implementing two methods getJWTIdentifier and getJWTCustomClaims. Let’s update app/User.php model file with the following lines of code.

app/User.php

<?php
 
namespace App;
 
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Tymon\JWTAuth\Contracts\JWTSubject;
 
class User extends Authenticatable implements JWTSubject
{
    use Notifiable;
 
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];
 
    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];
 
    /**
     * Get the identifier that will be stored in the subject claim of the JWT.
     *
     * @return mixed
     */
    public function getJWTIdentifier()
    {
        return $this->getKey();
    }
 
    /**
     * Return a key value array, containing any custom claims to be added to the JWT.
     *
     * @return array
     */
    public function getJWTCustomClaims()
    {
        return [];
    }
}

<?php

namespace App;

use Illuminate\Foundation\Auth\User as Authenticatable;

use Illuminate\Notifications\Notifiable;

use Tymon\JWTAuth\Contracts\JWTSubject;

class User extends Authenticatable implements JWTSubject

{

use Notifiable;

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'name', 'email', 'password',

];

/**

* The attributes that should be hidden for arrays.

* @var array

protected $hidden = [

'password', 'remember_token',

];

/**

* Get the identifier that will be stored in the subject claim of the JWT.

* @return mixed

public function getJWTIdentifier()

{

return $this->getKey();

}

/**

* Return a key value array, containing any custom claims to be added to the JWT.

* @return array

public function getJWTCustomClaims()

{

return [];

}

Create Authentication API Routes

In this step, We will setup authentication routes to register a new user, login with their user credentials and get the authenticated user details by using JWT token. So add the following route in routes/api.php

routes/api.php

Route::post('login', 'AuthController@login');
Route::post('register', 'AuthController@register');
 
Route::group(['middleware' => 'auth.jwt'], function () {
    Route::get('logout', 'AuthController@logout');
    Route::get('user', 'AuthController@getAuthUser');
});

Route::post('login', 'AuthController@login');

Route::post('register', 'AuthController@register');

Route::group(['middleware' => 'auth.jwt'], function () {

Route::get('logout', 'AuthController@logout');

Route::get('user', 'AuthController@getAuthUser');

});

Create Authentication Controller

Now, create a Authentication Controller name AuthController. Use the below command to create controller.

php artisan make:controller AuthController

1	php artisan make:controller AuthController

Once the above command executed, it will create a resource controller file “AuthController.php” in “app/Http/Controllers/” directory. Go to “AuthController.php” and put the following code in it.

<?php
 
namespace App\Http\Controllers;
 
use App\Http\Requests\RegisterFormRequest;
use App\User;
use Illuminate\Http\Request;
use JWTAuth;
use Tymon\JWTAuth\Exceptions\JWTException;
use Validator;
 
class AuthController extends Controller
{
     public function register(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'email' => 'required|string|email|max:255|unique:users',
            'name' => 'required',
            'password'=> 'required'
        ]);
        if ($validator->fails()) {
            return response()->json($validator->errors());
        }
        $user = new User();
        $user->name = $request->name;
        $user->email = $request->email;
        $user->password = bcrypt($request->password);
        $user->save();
        $user = User::first();
        $token = JWTAuth::fromUser($user);

        return response()->json([
            'success' => true,
            'token' => $token,
        ]);
    }

    public function login(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'email' => 'required|string|email|max:255',
            'password'=> 'required'
        ]);
        if ($validator->fails()) {
            return response()->json($validator->errors());
        }

        $input = $request->only('email', 'password');
        $jwt_token = null;
 
        if (!$jwt_token = JWTAuth::attempt($input)) {
            return response()->json([
                'success' => false,
                'message' => 'Invalid Email or Password',
            ], 401);
        }
 
        return response()->json([
            'success' => true,
            'token' => $jwt_token,
        ]);
    }
 
    public function logout(Request $request)
    {
        $this->validate($request, [
            'token' => 'required'
        ]);
 
        try {
            JWTAuth::invalidate($request->token);
 
            return response()->json([
                'success' => true,
                'message' => 'User logged out successfully'
            ]);
        } catch (JWTException $exception) {
            return response()->json([
                'success' => false,
                'message' => 'Sorry, the user cannot be logged out'
            ], 500);
        }
    }
 
    public function getAuthUser(Request $request)
    {
        $this->validate($request, [
            'token' => 'required'
        ]);
 
        $user = JWTAuth::authenticate($request->token);
 
        return response()->json(['user' => $user]);
    }
}

<?php

namespace App\Http\Controllers;

use App\Http\Requests\RegisterFormRequest;

use App\User;

use Illuminate\Http\Request;

use JWTAuth;

use Tymon\JWTAuth\Exceptions\JWTException;

use Validator;

class AuthController extends Controller

{

public function register(Request $request)

{

$validator = Validator::make($request->all(), [

'email' => 'required|string|email|max:255|unique:users',

'name' => 'required',

'password'=> 'required'

]);

if ($validator->fails()) {

return response()->json($validator->errors());

}

$user = new User();

$user->name = $request->name;

$user->email = $request->email;

$user->password = bcrypt($request->password);

$user->save();

$user = User::first();

$token = JWTAuth::fromUser($user);

return response()->json([

'success' => true,

'token' => $token,

]);

}

public function login(Request $request)

{

$validator = Validator::make($request->all(), [

'email' => 'required|string|email|max:255',

'password'=> 'required'

]);

if ($validator->fails()) {

return response()->json($validator->errors());

}

$input = $request->only('email', 'password');

$jwt_token = null;

if (!$jwt_token = JWTAuth::attempt($input)) {

return response()->json([

'success' => false,

'message' => 'Invalid Email or Password',

], 401);

}

return response()->json([

'success' => true,

'token' => $jwt_token,

]);

}

public function logout(Request $request)

{

$this->validate($request, [

'token' => 'required'

]);

try {

JWTAuth::invalidate($request->token);

return response()->json([

'success' => true,

'message' => 'User logged out successfully'

]);

} catch (JWTException $exception) {

return response()->json([

'success' => false,

'message' => 'Sorry, the user cannot be logged out'

], 500);

}

public function getAuthUser(Request $request)

{

$this->validate($request, [

'token' => 'required'

]);

$user = JWTAuth::authenticate($request->token);

return response()->json(['user' => $user]);

}

Building the Post CRUD API

php artisan make:migration create_posts_table --create=posts

1	php artisan make:migration create_posts_table --create=posts

Once this command is executed you will find a migration file created under “database/migrations”. Lets open migration file and put following code in it –

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->unsignedBigInteger('user_id');
            $table->string('title');
            $table->string('body');
            $table->timestamps();
            $table->foreign('user_id')->references('id')->on('users');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->bigIncrements('id');

$table->unsignedBigInteger('user_id');

$table->string('title');

$table->string('body');

$table->timestamps();

$table->foreign('user_id')->references('id')->on('users');

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the posts table will be created in database.

Create Model

In this step, we will use the following command to create post model –

php artisan make:model Post

1	php artisan make:model Post

app/Post.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    //
    protected $fillable = ['title','body'];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $fillable = ['title','body'];

}

Now, we have to add a relationship in the User model to retrieve the related posts. In app/User.php add the following method.

public function posts()
{
    return $this->hasMany(Post::class);
}

public function posts()

{

return $this->hasMany(Post::class);

}

Create Controller

In this step, we will use the following command to create post controller.

php artisan make:controller PostController

1	php artisan make:controller PostController

app/Http/Controllers/PostController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;

class PostController extends Controller
{

    public function index()
    {
        $posts = auth()->user()->posts;
 
        return response()->json([
            'success' => true,
            'data' => $posts
        ]);
    }
 
    public function show($id)
    {
        $post = auth()->user()->posts()->find($id);
 
        if (!$post) {
            return response()->json([
                'success' => false,
                'message' => 'Post with id ' . $id . ' not found'
            ], 400);
        }
 
        return response()->json([
            'success' => true,
            'data' => $post->toArray()
        ], 400);
    }
 
    public function store(Request $request)
    {
        $this->validate($request, [
            'title' => 'required',
            'body' => 'required'
        ]);
 
        $post = new Post();
        $post->title = $request->title;
        $post->body = $request->body;
 
        if (auth()->user()->posts()->save($post))
            return response()->json([
                'success' => true,
                'data' => $post->toArray()
            ]);
        else
            return response()->json([
                'success' => false,
                'message' => 'Post could not be added'
            ], 500);
    }
 
    public function update(Request $request, $id)
    {
        $post = auth()->user()->posts()->find($id);
 
        if (!$post) {
            return response()->json([
                'success' => false,
                'message' => 'Post with id ' . $id . ' not found'
            ], 400);
        }
 
        $updated = $post->fill($request->all())->save();
 
        if ($updated)
            return response()->json([
                'success' => true
            ]);
        else
            return response()->json([
                'success' => false,
                'message' => 'Post could not be updated'
            ], 500);
    }
 
    public function destroy($id)
    {
        $post = auth()->user()->posts()->find($id);
 
        if (!$post) {
            return response()->json([
                'success' => false,
                'message' => 'Post with id ' . $id . ' not found'
            ], 400);
        }
 
        if ($post->delete()) {
            return response()->json([
                'success' => true
            ]);
        } else {
            return response()->json([
                'success' => false,
                'message' => 'Post could not be deleted'
            ], 500);
        }
    }

}

100

101

102

103

104

105

106

107

108

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Post;

class PostController extends Controller

{

public function index()

{

$posts = auth()->user()->posts;

return response()->json([

'success' => true,

'data' => $posts

]);

}

public function show($id)

{

$post = auth()->user()->posts()->find($id);

if (!$post) {

return response()->json([

'success' => false,

'message' => 'Post with id ' . $id . ' not found'

], 400);

}

return response()->json([

'success' => true,

'data' => $post->toArray()

], 400);

}

public function store(Request $request)

{

$this->validate($request, [

'title' => 'required',

'body' => 'required'

]);

$post = new Post();

$post->title = $request->title;

$post->body = $request->body;

if (auth()->user()->posts()->save($post))

return response()->json([

'success' => true,

'data' => $post->toArray()

]);

else

return response()->json([

'success' => false,

'message' => 'Post could not be added'

], 500);

}

public function update(Request $request, $id)

{

$post = auth()->user()->posts()->find($id);

if (!$post) {

return response()->json([

'success' => false,

'message' => 'Post with id ' . $id . ' not found'

], 400);

}

$updated = $post->fill($request->all())->save();

if ($updated)

return response()->json([

'success' => true

]);

else

return response()->json([

'success' => false,

'message' => 'Post could not be updated'

], 500);

}

public function destroy($id)

{

$post = auth()->user()->posts()->find($id);

if (!$post) {

return response()->json([

'success' => false,

'message' => 'Post with id ' . $id . ' not found'

], 400);

}

if ($post->delete()) {

return response()->json([

'success' => true

]);

} else {

return response()->json([

'success' => false,

'message' => 'Post could not be deleted'

], 500);

}

Create Resource Route

After this, we need to add resource route for post controller. Lets open “routes/api.php” file and add following route in it.

Route::resource('posts', 'PostController');

1	Route::resource('posts', 'PostController');

our final route file looks as following –

routes/api.php

Route::post('login', 'AuthController@login');
Route::post('register', 'AuthController@register');

Route::group(['middleware' => 'auth.jwt'], function () {
Route::get('logout', 'AuthController@logout');
Route::get('user', 'AuthController@getAuthUser');
Route::resource('posts', 'PostController');
});

Route::post('login', 'AuthController@login');

Route::post('register', 'AuthController@register');

Route::group(['middleware' => 'auth.jwt'], function () {

Route::get('logout', 'AuthController@logout');

Route::get('user', 'AuthController@getAuthUser');

Route::resource('posts', 'PostController');

});

Start Application Server

Lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Testing the REST API

Our Authentication API is ready to test. I will use Postman to test the API.

Register Api :-
Verb: POST
URL :http://localhost:8000/api/register

Login Api :-
Verb: POST
URL :http://localhost:8000/api/login

User Api :-
Verb: GET
URL: http://localhost:8000/api/user

userinfo

Add Post Api :-
Verb: POST
URL: http://localhost:8000/api/posts

add_post

List Post Api :-
Verb: GET
URL: http://localhost:8000/api/posts

user_posts

Single Post Api :-
Verb: GET
URL: http://localhost:8000/api/posts/{ID}

user_single_post

Update Post Api :-
Verb: PUT
URL: http://localhost:8000/api/posts/{ID}

user_post_update

Delete Post Api :-
Verb: DELETE
URL: http://localhost:8000/api/posts/{ID}

user_post_delete

Laravel 5.8 Jquery UI Autocomplete Search Example

Leave a reply

Laravel 5.8 Jquery UI Autocomplete Search Example

In this article, I will show you how to create a dynamic database driven ajax jquery autocomplete in Laravel. In this tutorial we will create a dynamic search dropdown autocomplete which will fetch options from database table using jquery autocomplete.

The jquery autocomplete plugin is used to create dynamic autocomplete input with several options. In this example you will learn how to implement jquery autocomplete in laravel.

Before starting with example I assume that you already have fresh laravel 5.8 installation ready, if you have not installed it yet you can follow laravel 5 installation instruction here.

Install Laravel 5.8

First of all we need to create a fresh laravel project, download and install Laravel 5.8 using the below command

composer create-project --prefer-dist laravel/laravel larablog

1	composer create-project --prefer-dist laravel/laravel larablog

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larablog

DB_USERNAME=root

DB_PASSWORD=

Create Model and Migration

Now, we have to define table schema for contact table. Open terminal and let’s run the following command to generate a Contact model along with a migration file to create contact table in our database.

php artisan make:model Contact -m

1	php artisan make:model Contact -m

Once this command is executed you will find a migration file created under “database/migrations”. Lets open migration file created and put following code in it –

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email');
            $table->string('phone');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('contacts', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('name');

$table->string('email');

$table->string('phone');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('contacts');

}

Run Laravel Migration

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the contact table will be created in database.

Create AutoComplete Controller

Next, we have to create a controller for AutoComplete suggestion. Create a controller named AutoCompleteController using command given below –

php artisan make:controller AutoCompleteController

1	php artisan make:controller AutoCompleteController

Once the above command executed, it will create a controller file AutoCompleteController.php in app/Http/Controllers directory. Open the AutoCompleteController.php file and put the following code in it.

app/Http/Controllers/AutoCompleteController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Contact;

class AutoCompleteController extends Controller
{
    //
    public function index()
    {
        return view('jqueryAutocomplete.search');
    }
 
    public function search(Request $request)
    {
          $search = $request->get('term');
      
          $result = Contact::where('name', 'LIKE', '%'. $search. '%')->get();
 
          return response()->json($result);
            
    } 
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Contact;

class AutoCompleteController extends Controller

{

public function index()

{

return view('jqueryAutocomplete.search');

}

public function search(Request $request)

{

$search = $request->get('term');

$result = Contact::where('name', 'LIKE', '%'. $search. '%')->get();

return response()->json($result);

}

Create Blade / View Files

In this step, we will create view/blade file to perform autocomplete Search Using jQuery UI Autocomplete. Lets create a blade file “search.blade.php” in “resources/views/jqueryAutocomplete/” directory and put the following code in it respectively.

resources/views/jqueryAutocomplete/search.blade.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Laravel 5.8 AutoComplete Search Using Jquery UI - W3Adda</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <style>
    .container{
    padding: 10%;
    text-align: center;
   } 
 </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-12"><h2>Laravel 5.8 AutoComplete Search Using Jquery UI - W3Adda</h2></div>
        <div class="col-12">
            <div id="custom-search-input">
                <div class="input-group">
                    <input id="search" name="search" type="text" class="form-control" placeholder="Search" />
                </div>
            </div>
        </div>
    </div>
</div>
<script>
 $(document).ready(function() {
    $("#search").autocomplete({

        source: function(request, response) {
            $.ajax({
            url: "{{url('autocomplete')}}",
            data: {
                    term : request.term
             },
            dataType: "json",
            success: function(data){
               var resp = $.map(data,function(obj){
                    return obj.name;
               }); 

               response(resp);
            }
        });
    },
    minLength: 1
 });
});

</script>   
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 5.8 AutoComplete Search Using Jquery UI - W3Adda</title>

<style>

.container{

padding: 10%;

text-align: center;

}

</style>

</head>

<body>

<div class="col-12"><h2>Laravel 5.8 AutoComplete Search Using Jquery UI - W3Adda</h2></div>

</div>

$(document).ready(function() {

$("#search").autocomplete({

source: function(request, response) {

$.ajax({

url: "{{url('autocomplete')}}",

data: {

term : request.term

dataType: "json",

success: function(data){

var resp = $.map(data,function(obj){

return obj.name;

});

response(resp);

}

});

minLength: 1

});

</script>

</body>

</html>

Create Routes

After this, we need to add following routes in “routes/web.php” file. Lets open “routes/web.php” file and add following route.

routes/web.php

Route::get('search', 'AutoCompleteController@index');
Route::get('autocomplete', 'AutoCompleteController@search');

1 2	Route::get('search', 'AutoCompleteController@index'); Route::get('autocomplete', 'AutoCompleteController@search');

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/search

Output 1:-

Output 2:-