Amid the COVID-19 outbreak, Folio3 aims to help clinics serve patients with telemedicine effectively.

User Registration & Login Example Tutorial

User Registration & Login Example Tutorial
COMMENTS (0)
Tweet

Hey Guys,

In my previous post I showed you how to create a Todo Application in Angular JS.

In this tutorial I’ll show you how to develop a User Registration & Login application using AngularJS. We’ll be using the PHP Silex Framework here to create a REST API. The data from that REST API will be used for user sign-up and user authentication.

Tutorial

You can also download a zipped version of the source code used from this link 

Live Demo

A video demo of this tutorial is available here Live Demo

To run the User Registration & Login application on your local machine, follow the following 2 simple steps.

In this tutorial, we’ll first create the login form which will be authenticated using the user credentials stored in our MySQL database. On successful login, the form will redirect to the welcome page. Upon unsuccessful login or logout, the app will redirect the user to the login page. After the login form, we will develop the User Sign-up Form that takes certain data fields as input, to create a new user. We will be using the AngularJS-Toaster plugin to display messages to the user in this case. In the last part of this tutorial, I’ll show you how to setup the REST API for the application.

Below are the steps that will help you to create your first Angular JS Registration & Login application.

STEP 1: SETUP THE ANGULAR JS PROJECT STRUCTURE

There are many ways one can define the folder structure for Angular JS. I personally found it easier to follow the conventional web project directory structure, which is what I have used in this tutorial as well. Here’s what the web project directory structure looks like:

shopify

 

STEP 2: SETUP the ANGULAR JS APPLICATION (app/app.js)

This is the starting point of our Angular JS application. In this step, we will load the modules and configure the route provider (as shown in the snippet below).

 

In the code snippet above, we have initialized the Angular JS app named “authenticationApp” and injected some other modules like ngRoute,toaster etc. Then, using the route provider we have defined the routes for different URLs and also defined that that login form will be using login.html as the template and its controller will be login.

STEP 3: SETUP ANGULAR JS RESTAPI SERVICE (app/restapi.js)

In this step we will setup the Angular JS RESTAPI service. As you may know, the services in an Angular JS application can be accessed throughout the application in any controller. And since Angular JS services are single-tone, their defined properties and functions can be accessed from anywhere. In this case, we’ll use the RestApiClientService to communicate with the server API (as shown in the code snippet below). This API has both POST and GET functionalities exposed.

 

STEP 4: SETUP ANGULAR JS CONTROLLERS (controllers/login.js, controllers/signup.js)

Next, we’ll setup the Angular JS Controllers, since these controllers are used to communicate with the views. The login and sign-up controllers (we have used below) are used in their respective views to get the form data inside the controller on form submission. The controllers will post the form data to the server and will then display the respective Success or Error message to the user.

Login.js

 

SignUp.js

 

As you can see, the RestApiClientService we have created in  STEP 3 (above) has been injected in the controllers to communicate with the server API.

STEP 5: SETUP THE VIEWS (index.html,views/login.html,views/signup.html)

index.html

This is the main file of our application so, in this file we will be including all the .js and .css files.

login.html

The Login View (below) contains a small form with the usual fields for email and password input.

 

signup.html

The Sign-up View also contains a small form with the usual fields for email and password input by the user.

 

STEP 6 – SETUP THE SERVER API

All the API files required to create the REST API are already placed inside the “API” directory. The only file you’ll need to change is the “config.php” file (this file contains the database login information, so you’ll need to put your database credentials here)

 

Also, we’ll need to import the “script.sql” file into our MySQL database (as shown below).

 

Wrapping Up

In this tutorial we have learned how to create aUser Registration & Login Application using Angular JS. If you successfully completed the tutorial, you have used the PHP Silex Framework to create a REST API and an end to end application, in which you have saved the user’s details from an Angular JS sign-up form to a MySQL database and also authenticated the logged-in user.

A video demo of this tutorial is available here Live Demo. You can also download a zipped version of the source code used from this link link 

In the next tutorial we will learn how to use Angular JS Grid with Paging,Sorting,Filtering.

CALL

USA408 365 4638

VISIT

1301 Shoreway Road, Suite 160,

Belmont, CA 94002

Latest From Our Blog

Why the Daily Scrum is NOT a Status Meeting?

February 3, 2020
I am here today to debunk, The Myth “The Daily Scrum is the Status Meeting”. This is a key misconception in the industry and often resu...
Read more

A Complete Guide to Custom Caching in Magento 2...

November 29, 2019
In this blog, I will explain how to create your own cache in Magento 2, and how to read and write data from that custom cache. I hope after reading...
Read more

React Hooks

September 3, 2019
React is a javascript framework for building interactive client side interfaces along with the integration with back-end server. React considers th...
Read more