mini proget angular and php: newsfeed manager.

if you want help, please contact us in our email:
mouhamed_ali_derwich@webi4u.com
if you want help, please contact us in our email:
mouhamed_ali_derwich@webi4u.com

Login:

Our login form is composed of two fields, one for entering the user name and one for entering the password.

So we'll do this following uses case:

  • create angular form login with validation
  • create form login in html code with validation
  • send our form login to the php server using angular httpclient
  • cheking our form login in the php script.
  • Using Angular Httpclient API.

1. create angular form login with validation

First we import the necessary angular libraries. for that take the component [login]:

import { FormGroup, FormControl, Validators } from '@angular/forms';                        
                    

Next, we need to create our form login with validation in [login] component:

export class LoginComponent implements OnInit {
  
  isFormSubmited = false;
  isUserLogin = true;
  
  loginForm = new FormGroup({
    	'username': new FormControl('',[
    			Validators.required
    		]),
    	'password': new FormControl('',[
    			Validators.required
    		])
  	});
    get username(){return this.loginForm.get('username');}
    get password(){return this.loginForm.get('password');}
}                      
                    

This html code from our form login in [login.component.html] file:

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <div *ngIf="(username.errors && username.dirty)">
                        <small  *ngIf="username.errors.required"
                        class="form-text text-muted">
                          <span style="color: red">
                            user name required.
                          </span>
                        </small>
                </div>
                <div *ngIf="(username.valid)">
                        <small class="form-text text-muted">
                          <span style="color: green">
                            Valid
                          </span>
                        </small>
                </div>
    <div class="input-group mb-3"
					[class.input_error]="username.invalid && username.dirty"
					[class.input_valid]="username.valid && username.dirty"
					[class.input_init]="!username.dirty">
					<input type="text" class="form-control" placeholder="User name"
					formControlName="username"/>
					<div class="input-group-prepend">
						<span class="input-group-text" id="basic-addon1">
							<i class="fa fa-user"
							[class.fa_error]="username.invalid && username.dirty"
							[class.fa_valid]="username.valid && username.dirty"></i>
						</span>
					</div>
				</div>            
				
</form>
                    

We will not take all the html code of form login, you find all the source code with the code source of the proget.

2. send our form login to the php server using angular httpclient:

Now we will send our form login to the php server, to start it by importing the following libraries on the file [login.component.ts]

import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

export class LoginComponent implements OnInit {
    onSubmit(){
    this.isFormSubmited = true;
    let params = new FormData();
    params.append('username',this.loginForm.get('username').value);
    params.append('password',this.loginForm.get('password').value);
    this.http.post("http://127.0.0.1/newsfeed_php_project/login.php",params)
            .subscribe(response => {
            	console.warn(response);
                if(response){
                    this.router.navigate(['/profile/'+response['token']]);
                } 
                if(!response){
                   this.isFormSubmited = false;
                   this.isUserLogin = false;
                }                     
            });
  }
}                        
                    

3. cheking our form login in the php script.

The php of form login script is used to check the authentication of the user in question in the database, and sends a request to the angular client.

the following php code in [login.php] file:

<?php

header("Access-Control-Allow-Origin: *");
header("Content-type:application/json");

$servername = "localhost";
$username_db = "root";
$password_db = "root";

$username = $_POST['username'];
$password = $_POST['password'];

try{
    $conn = new PDO("mysql:host=$servername;dbname=newsfeed", $username_db, $password_db);
    // set the PDO error mode to exception
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $sql = "SELECT * FROM user WHERE user.username = '$username' AND user.password = '$password'";
    $user = $conn->prepare($sql);
    $user->execute();
    echo json_encode($user->fetchAll()[0]);
} catch (Exception $ex) {
    
}