How to create a simple login page using angularjs, PHP and MySql

Prem Tiwari - - Angular JS, PHP Tutorial


Simple login page using angularjs php mysql | user authentication using angularjs php mysql | simple session with angularjs and php

In today’s I will explain a very useful tutorial which will help all AngularJS beginner and just started with angularJS, then you should keep close attention in this post. This is a very basic tutorial which helps you to create a simple login page using angular js, PHP, and MySQL. Today, we are going to share how to create a simple login page using angularjs, PHP and MySql.

AngularJS is a Javascript based open-source framework which used to create front-end web application. It is developed and maintained by Google. By using angularJS, you can create a single page web application.

angularjs-login-page
Download           Live Demo

How to create login in angularjs, PHP and MySQL

So, lets start to create login page. First create a folder named “angularlogin” and create below files:

1) index.html
2) app.js
3) config.php
4) userauth.php
5) welcome.php

Create dca_users table

Select your database and copy below query then paste in SQL tabs to execute. It will create a dca_users table in your database.

After table created insert some dummy users. Copy below SQL and execute.

1. Create index.html page

Create index.html file in angularlogin folder and copy paste below code. In below index.html define the login form.

2) Create app.js file

Create an app.js file and copy paste below codes.

3) Create config.php file

In the config.php file define database configurations. I have used PDO (PHP Data Object) to connect with MySQL database. Copy paste below code it in your config.php file and change database configuration.

4) Create userauth.php page

Create a userauth.php file and copy paste below code to authenticate the user.

5) Create welcome.php

The user will be redirected to welcome.php after authenticated from API. Add success message on this page.

Download           Live Demo

Do you like & share this article with your friends, and don’t forget to follow us on Facebook and Twitter to learn cool angularJS tutorials.


Prem Tiwari

Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer and a blogger by hobby.

Tags: , , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.