![Creating-First-App-In-AngularJS-With-Basic-File-Setup.png](https://ipfs.busy.org/ipfs/QmPcKLW9Fw4NDvm5XSUxUdbCKs3ixgzAo7ye1xHM2XXtM6) Image Source #### REPOSITORY https://github.com/angular/angular.js #### What Will I Learn? - Create connection to MySQL database using PHP PDO - Create login system using AngularJS . - Using cookies on AngularJs. - Send POST data from AngularJS to PHP Script - Building the login component. #### Requirements - Basic HTML, Javascript,CSS - Basic AngularJS - Basic PHP PDO - Knowledge of database administration tools (MySQL and PHPMyAdmin) - Localhost (xampp, wampp, or etc) #### Difficulty - Intermediate #### Tutorial Contents In this tutorial series I will teach you how to create a hospital service application using AngularJS and PHP. In this section I will show you how to make login system for Hospital Application. #### Preparation I will create a folder named hospital_app. Then in the folder I will create a file called index.html - Create Database The database name for this application is hospital and its table name is users. - The structure of users table | Name | Type | Length/value | Indeks | |---|---|---|---| | username | Varchar | 50 | Primary | | password | Varchar | 50 | -- | | email | Varchar | 100 | -- | #### Connect to database We will connect to the database, for that we need to run our localhost. in this tutorial, I am using Xampp. In the project folder I will create a folder named auth and config.php file to connect to the database. ``` $hospital_db_host = "localhost"; $hospital_db_user = "root"; $hospital_db_pass = ""; $hospital_db_name = "hospital"; try { $DBcon = new PDO("mysql:host={$hospital_db_host};dbname={$hospital_db_name}",$hospital_db_user,$hospital_db_pass); $DBcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch(PDOException $e) { echo "ERROR : ".$e->getMessage(); } ``` - We will connect to the database using the following functions ``` new PDO("mysql:host={$hospital_db_host};dbname={$hospital_db_name}",$hospital_db_user,$hospital_db_pass);``` this function requires some parameters ie. a. ```$hospital_db_host``` for the database server host address. b. ```$hospital_db_name``` for the database server name. c. ```$hospital_db_user``` for the database server username. c. ```$hospital_db_pass``` for the database server password. - This section ```catch(PDOException $e)``` will catch if anny error with the database connection function. #### Setting Frontend With AngularJS and Bootstrap - Load AngularJS We have create the index.html file on the preparation section on this tutorial. Now Let's load AngularJS in index.html via CDN: ``` ``` - Load AngularJS Cookies The login information from the php script will be saved to the frontend in the cookies data. We will need to use AngularJS Cookies to read and save the cookie data, Let's load AngularJS Cookies in index.html via CDN: ``` ``` - Load Bootstrap To create a better view then we will use bootstrap library in this tutorial. Let's load Bootstrap in index.html via CDN: ``` ``` #### Creating Login Page ``` Hospital App

``` ##### Code Explanation In the above code I create two input text ie - Input username to retrive username from user. - Input password to retrive password from user. Then I added a hospital app logo on the top and a button that will trigger the login function when clicked. The layout will display like this following image. ![Screen Shot 2018-06-01 at 15.45.26.png](https://ipfs.busy.org/ipfs/QmfHiENkXcDNjdLqd779MmM6CnrYFFnfaJU1UqY2YBGMnE) ##### Implement AngularJS on the Index.html To connect with AngularJs script Now lets add ```ng-app``` and ```ng-controller``` on the body tag ``` ``` Modify form tag add ```ng-submit``` and ```post``` method. ```

``` Add ng-model for input text username and password ``` ``` The last step is adding depedency injection on span below our sign ini button to show when there is an error happend on our login process. ``` {{errorMsg}} ``` #### AngularJS Script For Authentication ``` angular.module('hospitalLogin', ['ngCookies']) .controller('hospitalLoginController', ['$scope', '$http', '$cookies', function($scope, $http, $cookies) { this.loginForm = function() { var dataLogin='username=' +this.loginData.username+'&password='+this.loginData.password; $http({ method: 'POST', url: 'auth/authentication.php', data: dataLogin, headers: {'Content-Type': 'application/x-www-form-urlencoded'} }) .then(function(response) { console.log(response); if ( (response.data).trim() === 'correct') { $cookies.put('login_info', this.loginData.username); window.location.href = 'dashboard.html'; } else { $scope.errorMsg = "Credential not match"; } }) } }]); ``` ##### Code Explanation 1. We use the ```hospitalLogin``` module and the ```hospitalLoginController``` we have initialized in the previous html file 2. When Button Log in Click then ```loginForm()``` function will be executed 3. In the loginForm function we will use ```$http``` service which will send data using ```POST``` method to server 4. Then in the response catcher section, we will create a control structure when the server sends the 'correct' data response then the user will be directed to the dashboard page and save username into cookies #### PHP Authentication Script to check credential info ``` prepare("SELECT username, password from users WHERE username='".$username."' && password='".$password."'"); $stmt->execute(); $row = $stmt->rowCount(); if ($row > 0){ echo "correct"; } else{ echo 'wrong'; } ?> ``` ##### Code Explanation 1. line ```require_once 'config.php';``` serves to gain access to the database that we previously created in the file config.php 2. ```$username``` and ```$password```works for receive the variable data from AngularJS ```http``` service. 3. ```md5($_POST['password']);``` works for doing md5 encryption to password variable. 4. ```$stmt = $DBcon->prepare();``` and ```$stmt->execute();``` works for doing query to users database. 5. ```$row = $stmt->rowCount();``` works to count how much row of query results. 6. ```if ($row > 0)``` server will send response correct to AngularJS ```$http``` service. #### Creating Dashboard Page After the login process is successful then the user will be directed to the dashboard page. On the dashboard page we will check whether there are cookies stored in the browser. If cookies do not exist then the user will redirect back to the login page. The code for the dashboard page is like the code block below. ``` Hospital App

Welcome To Dashboard Page

``` ##### Code Explanation 1. On ```DashboardController``` declared service ```$cookies``` to retrieve cookies data in browser and service ```$window``` to move user to another page. 2. ``` var loginCookie = $cookies.get('login_info');``` works for receive the variable from login script. 3. The If Else control structure works for show allert when the cookies is exist and redirect user to login page when the cookies is not exist. #### Conclusion In this section we have discussed how to create a user authentication system using AngularJS. In the next section we will create a more complex login system for the hospital such as user permissions and dashboard page modifications. #### Curriculum This is My first tutorial About Building Hospital Apps Using AngularJS and PHP #### Proof of Work Done Repository For This Tutorial https://github.com/iqbalhood/HospitallApp-Part1

Please sign in

Welcome To Dashboard Page