Angular login using php and mysql

Lets create a login page in angular which gets the login data form a database.

If you don't want to code you can get the all from github at "https://github.com/Kimbugwerogers/angular-login"

    First create an angular project and give it a name of your desire and in the [app.module.ts] in the imports section,
 import: [   BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
     ReactiveFormsModule
  ],

In the [app.component.ts] feed in the following infor
export class AppComponent {
  title = 'free-am';
  loginbtn: boolean;
  logoutbtn: boolean;
  constructor(private dataService: DataserviceService) {
    dataService.getLoggedInName.subscribe(name => this.changeName(name));
    if (this.dataService.isLoggedIn())
    {
      console.log('loggedin');
      this.loginbtn = false;
      this.logoutbtn = true;
    }
    else{
     this.loginbtn = true;
     this.logoutbtn = false;
    }
}

private changeName(name: boolean): void {
  this.logoutbtn = name;
  this.loginbtn = !name;
}
logout()
{
  this.dataService.deleteToken();
  window.location.href = window.location.href;
}
}


And in [app.compoennt.html] pasta in 
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
  <a class="navbar-brand" routerLink="home" routerLinkActive="active">M Tutorial</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExample09">
    <ul class="navbar-nav mr-auto">

        <li class="nav-item">
            <a class="nav-link" *ngIf="loginbtn" routerLink="login" routerLinkActive="active">Login</a>
          </li>
          <li class="nav-item">
            <button type="button" *ngIf="logoutbtn" class="btn btn-danger btn-block" (click)="logout()">logout</button>
          </li>
          <li class="nav-item">
            <a class="nav-link" *ngIf="loginbtn" routerLink="registration" routerLinkActive="active">Registration</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" *ngIf="logoutbtn" routerLink="dashboard" routerLinkActive="active">Product</a>
          </li>


    </ul>

  </div>
</nav>

<router-outlet></router-outlet>

And in [app.routing.module.ts] pasta 
const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent },
  { path: 'registration', component: RegistrationComponent },
  { path: 'product', loadChildren: () => import('./product/product.module').then(m => m.ProductModule), canActivate: [AuthguardGuard] },
];

Create a folder call it user and create [usermodule.ts] in that folder and pasta
export class Usermodule {
  public Id: number;
  public name: string;
  public pwd: string;
  public email: string;
  public mobile: string;

  constructor(Id: number, name: string, pwd: string, email: string, mobile: string) 
{
    this.Id = Id;
    this.name = name;
    this.pwd = pwd;
    this.email = email;
    this.mobile = mobile;
  }
}

Create a registration component in [ registration.component.ts] pasta 
export class RegistrationComponent implements OnInit {
  angForm: FormGroup;
  constructor(private fb: FormBuilder, 
            private dataService: DataserviceService, 
            private router: Router) {

    this.angForm = this.fb.group({
      email: ['', [Validators.required, Validators.minLength(1), Validators.email]],
      password: ['', Validators.required],
      name: ['', Validators.required],
      mobile: ['', Validators.required]

    });
   }

  ngOnInit() {
  }
  postdata(angForm1)
  {
    this.dataService.userregistration(angForm1.value.name, 
                        angForm1.value.email, 
                        angForm1.value.password, angForm1.value.mobile)
      .pipe(first())
      .subscribe(
          data => {
              this.router.navigate(['login']);
          },
          error => {
          });
  }
  get email() { return this.angForm.get('email'); }
  get password() { return this.angForm.get('password'); }
  get name() { return this.angForm.get('name'); }
  get mobile() { return this.angForm.get('mobile'); }
}


And in [registration.component.html] pasta 
<h2 class="text-center">Registration</h2>
<div class="row">
    <div class="col-md-3">
    </div>
    <div class="col-md-6 col-md-offset-3">
        <div class="jumbotron">
            <form [formGroup]="angForm" (ngSubmit)="postdata(angForm)" 
                    autocomplete="off" >
                <div class="form-group">
                    <label for="name">User Name</label>
                    <input type="text" name="name" formControlName="name" 
                            autocomplete="off" class="form-control input-sm" 
                            placeholder="User Name">

                </div>

                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" name="email" 
                                formControlName="email" autocomplete="off" 
                                    class="form-control input-sm" 
                                     placeholder="Email Address">

                </div>
                <div class="form-group">
                    <label for="Password">Password</label>
                    <input type="password" name="Password" 
                                formControlName="password"  
                                autocomplete="off" class="form-control input-sm" 
                                placeholder="Password">

                </div>
                <div class="form-group">
                    <label for="name">Mobile No</label>
                    <input type="text" name="mobile" 
                            formControlName="mobile" 
                            autocomplete="off" class="form-control input-sm" 
                             placeholder="Mobile No">

                </div>
                <button type="submit" class="btn btn-primary" 
                [disabled]="!angForm.valid">Registration</button>
            </form>
        </div>
    </div>
    <div class="col-md-3">
    </div>

</div>

Still in the user folder create [login.component.ts]
export class LoginComponent implements OnInit {

  angForm: FormGroup;
  constructor(private fb: FormBuilder, 
    private dataService: DataserviceService, 
    private router: Router) {
    this.angForm = this.fb.group({

      email: ['', [Validators.required, 
    Validators.minLength(1), Validators.email]],
      password: ['', Validators.required]

    });
   }

  ngOnInit() {
  }
  postdata(angForm1)
  {
    this.dataService.userlogin(angForm1.value.email, angForm1.value.password)
      .pipe(first())
      .subscribe(
          data => {
                const redirect = 
                    this.dataService.redirectUrl ? 
                this.dataService.redirectUrl : '/product';
                this.router.navigate([redirect]);

          },
          error => {
              alert('User name or password is incorrect');
          });
  }
  get email() { return this.angForm.get('email'); }
  get password() { return this.angForm.get('password'); }
}

And in [login.component.html]

<h2 class="text-center">Login</h2>
<div class="row">
    <div class="col-md-3">
    </div>
    <div class="col-md-6 col-md-offset-3">
        <div class="jumbotron">
            <form [formGroup]="angForm" (ngSubmit)="postdata(angForm)" 
                    autocomplete="off" >
                <div class="form-group">
                    <label for="email">User Name</label>
                    <input type="email" name="email" formControlName="email" 
        autocomplete="off" class="form-control input-sm" placeholder="Email Address">

                </div>
                <div class="form-group">
                    <label for="Password">Password</label>
                    <input type="password" name="Password" 
            formControlName="password"  autocomplete="off" 
            class="form-control input-sm" placeholder="Password">

                </div>
                <button type="submit" class="btn btn-primary" 
                [disabled]="!angForm.valid">Login</button>
            </form>
        </div>
    </div>
    <div class="col-md-3">
    </div>

</div>

Create a service still in the user folder [dataservice.ts]
import { Injectable, Output, EventEmitter } from '@angular/core';
import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataserviceService {
  redirectUrl: string;

  baseUrl = 'http://localhost/tests/login-test';
@Output() getLoggedInName: EventEmitter<any> = new EventEmitter();

  constructor(private httpClient: HttpClient) {}

  public userlogin(username, password) {
    return this.httpClient.post<any>(this.baseUrl + '/login.php', 
    { username, password })
    .pipe(map(Usermodule => {
        this.setToken(Usermodule[0].name);
        this.getLoggedInName.emit(true);
        return Usermodule;
    }));
   }

   public userregistration(name, email, pwd, mobile) {
    return this.httpClient.post<any>(this.baseUrl + '/registration.php', 
    { name, email, pwd, mobile })
        .pipe(map(Usermodule => {
            return Usermodule;
        }));
  }

  // token
  setToken(token: string) {
    localStorage.setItem('token', token);
  }

  getToken() {
    return localStorage.getItem('token');
  }

  deleteToken() {
    localStorage.removeItem('token');
  }

  isLoggedIn() {
    const usertoken = this.getToken();
    if (usertoken != null) {
      return true;
    }
    return false;
  }

}

And [authguard.guard.ts] in the user folder
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, 
RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { DataserviceService } from './dataservice.service';

@Injectable({
  providedIn: 'root'
})
export class AuthguardGuard implements CanActivate {

  constructor(private dataService: DataserviceService, private router: Router  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | 
Promise<boolean | UrlTree> | boolean | UrlTree {

      const routeurl: string = state.url;
      return this.isLogin(routeurl);
  }

  isLogin(routeurl: string) {
    if (this.dataService.isLoggedIn()) {
      return true;
    }
    this.dataService.redirectUrl = routeurl;
    this.router.navigate(['/login'], {queryParams: { returnUrl: routeurl }} );
  }

}

If you remember there is a lazily loaded module we create called product 
this is the code for lazy loading "ng g m product --route product --module app.module"
So that will be your home page

In the dataservice we are loading  baseUrl = 'http://localhost/tests/login-test';  These are php files that connect to the database. These files are in htdocs/tests/login-test folders on my local machmachine. so make sure this url ponits to where you have located your php files
Why i highlighted htdocs is coz this is an xamp folder. so i am usig xamp for my php  

And the files are;
[config.php]
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
 
  $db_username = 'root';
 $db_password = 'put the password of your db';
 $db_name = 'loginsystems';
 $db_host = 'localhost:3306'; // if your using xamp no need of adding 3306
      
$mysqli = new mysqli($db_host, $db_username, $db_password,$db_name);
 
if ($mysqli->connect_error) {
    die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}

[login.php]
<?php
include_once("config.php");
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
if(isset($postdata) && !empty($postdata))
{
  $pwd = mysqli_real_escape_string($mysqli, trim($request->password));
   $email = mysqli_real_escape_string($mysqli, trim($request->username));
$sql='';
  $sql = "SELECT * FROM employee where email='$email' and pwd='$pwd'";
if($result = mysqli_query($mysqli,$sql))
{
 $rows = array();
  while($row = mysqli_fetch_assoc($result))
  {
    $rows[] = $row;
  }
 
  echo json_encode($rows);
}
else
{
  http_response_code(404);
}
}

And [registration.php]
<?php
include_once("config.php");
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
if(isset($postdata) && !empty($postdata))
{
  $name = mysqli_real_escape_string($mysqli, trim($request->name));
  $pwd = mysqli_real_escape_string($mysqli, (int)$request->pwd);
   $email = mysqli_real_escape_string($mysqli, trim($request->email));
  $mobile = mysqli_real_escape_string($mysqli, (int)$request->mobile);
  $sql = "INSERT INTO employee(name,pwd,email,mobile) VALUES ('{$name}','{$pwd}','{$email}','{$mobile}')";
 // echo $sql;
if ($mysqli->query($sql) === TRUE) {
 
 
    $authdata = [
      'name' => $name,
    'pwd' => '',
    'email' => $email,
      'mobile' => $mobile,
      'Id'    => mysqli_insert_id($mysqli)
    ];
    echo json_encode($authdata);
 
}
}

In our datadatabase manager whichever your using maybe xamp or mysql workbench go in and create a database named loginsystems  and create a table with this data in
CREATE TABLE `employee` (
  `Id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `pwd` varchar(100) NOT NULL,
  `email` varchar(60) DEFAULT NULL,
  `mobile` varchar(100) NOT NULL,
  PRIMARY KEY (`Id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8; 


If you have any errors you have seen or ideas you adding plz leave a comcomment 

Comments

Post a Comment

Popular posts from this blog

AC Light switch using relay

Image
  There are alot of circuits on how to do this. Most of them require you to place the photosensor between the base (B) of the transistor and the Emitter (E). But i have found this method not to be working well so i decided to place the photosensor between the resistor and the power supply (DC). So how is this method different. First the photosensor is already sending power even at low lighting. So if the source is 12v, that means that power though the photosensor under low light is approximately 8v. This means that 8v won't be able to course an effect on the relay since the relay is 12v based. When a bright light is put in a close distance with the photosensor, There will be low resistance on the photosensor hence the desired power which will follow to the relay The point where I have labeled as " AC power out" is the off point at default on the relay. What I mean is that the point with AC power out is the one is not connected inside of  the relay at first. I have used a ...
Read more

Mosfet and capacitor switch

Image
  In the usual circuits, the capacitor is not included in. So why did i add a capacitor. if u have ever built a touch switch using only a mosfet, u do know that when u touch on the off wires the mosfet will gain power over time and light up again. Which can be somewhat annoying. But when u add a capacitor as seen above. When u apply a plus or add the wires temporarily or use a push switch( this switch should not lock when pressed.), u charge the capacitor and when u release the capacitor still has charge hence it is still providing power and working as a line which joins both the gate(G) and the source(S) of the mosfet. REMEMBER; When u try to touch using this method it will not work coz the capacitor will need alot or current and voltage for it to charge at a small amount of time which ur fingers can't provide. So when u press the push switch on the gate(G) Drain(D) part. This will discharge the capacitor and provide power to the gate(G) at the same time 
Read more

Blinking LED

Image
 This is a simple blinking led using a bc547 transistor. As it is in the diagram. You will need 1 transistor , 1 LED , Capacitor and a Resistor. This will work well on a 12v battery. Other types of batteries may not do the trick. The value of the capacitor will determine the blinking speeds.
Read more