Angular 6 PHP CRUD (Create, Read, Update, Delete) Operations

Today, We want to share with you Angular 6 PHP CRUD (Create, Read, Update, Delete) Operations.
In this post we will show you ANGULAR 6 PHP MySQLi CRUD Example, hear for Angular 6 CRUD Operation With PHP/MySQLi we will give you demo and example for implement.
In this post, we will learn about Angular 6 CRUD operation using PHP & MySQL with an example.

There are the Following The simple About Angular 6 PHP CRUD (Create, Read, Update, Delete) Operations Full Information With Example and source code.

As I will cover this Post with live Working example to develop Angular 6 CRUD Operations with PHP and MySQL, so the some major files and Directory structures for this example is following below.

Angular 6 OverView
Angular 6 Project Structure
Angular 6 Routing
Spring Boot
Service in Angular 6
Creating Components
Testing Angular 6

Angular 6 Example

Angular 6 crud example php Latest My Previous Post With Source code Read more…..

Angular 6 Project Structure

index.php

This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then save file it as index.php.

simple crud operation in Angular 6

Angular 6 Routing – Angular 6 crud example mvc

Angular 6 crud example mvc – app.routing.ts

import { RouterModule, Routes } from '@angular/router';
import {LoginComponent} from "./login/login.component";
import {AddStaffComponent} from "./add-staff/add-staff.component";
import {ListStaffComponent} from "./list-staff/list-staff.component";
import {EditStaffComponent} from "./edit-staff/edit-staff.component";

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'add-staff', component: AddStaffComponent },
  { path: 'list-staff', component: ListStaffComponent },
  { path: 'edit-staff', component: EditStaffComponent },
  {path : '', component : LoginComponent}
];

export const routing = RouterModule.forRoot(routes);

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import {routing} from "./app.routing";
import {AuthenticationService} from "./service/auth.service";
import {ReactiveFormsModule} from "@angular/forms";
import {HttpClientModule} from "@angular/common/http";
import { AddStaffComponent } from './add-staff/add-staff.component';
import { EditStaffComponent } from './edit-staff/edit-staff.component';
import {ListStaffComponent} from "./list-staff/list-staff.component";
import {StaffService} from "./service/staff.service";

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ListStaffComponent,
    AddStaffComponent,
    EditStaffComponent
  ],
  imports: [
    BrowserModule,
    routing,
    ReactiveFormsModule,
    HttpClientModule
  ],
  providers: [AuthenticationService, StaffService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Service in Angular 6 Application

StaffService API Information Angular 6 CRUD

let fakeStaffs = [{id: 1, staffName: 'krunal', staffLname: 'Ray', email: '[email protected]'},
      {id: 1, staffName: 'jaydeep', staffLname: 'Jac', email: '[email protected]'},
      {id: 1, staffName: 'ankit', staffLname: 'Pan', email: '[email protected]'},
      {id: 1, staffName: 'vivek', staffLname: 'pb', email: '[email protected]'},
    ];
    return Observable.of(fakeStaffs).delay(5000);

staff.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Staff} from "../model/staff.model";

@Injectable()
export class StaffService {
  constructor(private http: HttpClient) { }
  baseUrl: string = 'http://localhost:8080/staff-portal/staffs';

  getStaffs() {
    return this.http.get(this.baseUrl);
  }

  getStaffById(id: number) {
    return this.http.get(this.baseUrl + '/' + id);
  }

  createStaff(staff: Staff) {
    return this.http.post(this.baseUrl, staff);
  }

  updateStaff(staff: Staff) {
    return this.http.put(this.baseUrl + '/' + staff.id, staff);
  }

  deleteStaff(id: number) {
    return this.http.delete(this.baseUrl + '/' + id);
  }
}

Creating Components in Angular 6

login.component.html

<div class="row">

  <div class="col-md-6 col-md-offset-2">
    <h1>Login </h1>
    <form>
      <div class="form-group">
        <label for="email">Email address:</label>
        
        <div class="error">
          <div>Email is required</div>
        </div>
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        
        <div class="error">
          <div>Password is required</div>
        </div>
      </div>
      <button class="btn btn-default">Login</button>
      <div class="error">
        <div>Invalid credentials.</div>
      </div>
    </form>
  </div>
</div>

login.component.ts

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {Router} from "@angular/router";
import {first} from "rxjs/operators";
import {AuthenticationService} from "../service/auth.service";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  loginForm: FormGroup;
  submitted: boolean = false;
  invalidLogin: boolean = false;
  constructor(private formBuilder: FormBuilder, private router: Router, private authService: AuthenticationService) { }

  onSubmit() {
    this.submitted = true;
    if (this.loginForm.invalid) {
      return;
    }
    if(this.loginForm.controls.email.value == '[email protected]' && this.loginForm.controls.password.value == 'password') {
        this.router.navigate(['list-staff']);
    }else {
      this.invalidLogin = true;
    }
  }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      email: ['', Validators.required],
      password: ['', Validators.required]
    });
  }



}

Angular 6 PHP CRUD Operations – List

list-staff.component.html

<div class="col-md-6">
  <h2> Staff Details</h2>
  <button class="btn btn-danger"> Add Staff</button>
  <table class="table table-striped">
    <thead>
    <tr>
      <th class="hidden">Id</th>
      <th>StaffName</th>
      <th>LastName</th>
      <th>Email</th>
      <th>Action</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td class="hidden"></td>
      <td></td>
      <td></td>
      <td></td>
      <td><button class="btn btn-danger"> Delete</button>
        <button class="btn btn-danger" style="margin-left: 20px"> Edit</button></td>
    </tr>
    </tbody>
  </table>
</div>

list-staff.component.ts

import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";
import {StaffService} from "../service/staff.service";
import {Staff} from "../model/staff.model";

@Component({
  selector: 'app-list-staff',
  templateUrl: './list-staff.component.html',
  styleUrls: ['./list-staff.component.css']
})
export class ListStaffComponent implements OnInit {

  staffs: Staff[];

  constructor(private router: Router, private staffService: StaffService) { }

  ngOnInit() {
    this.staffService.getStaffs()
      .subscribe( data => {
        this.staffs = data;
      });
  }

  deleteStaff(staff: Staff): void {
    this.staffService.deleteStaff(staff.id)
      .subscribe( data => {
        this.staffs = this.staffs.filter(u => u !== staff);
      })
  };

  editStaff(staff: Staff): void {
    localStorage.removeItem("editStaffId");
    localStorage.setItem("editStaffId", staff.id.toString());
    this.router.navigate(['edit-staff']);
  };

  addStaff(): void {
    this.router.navigate(['add-staff']);
  };
}

Angular 6 PHP CRUD Operations – Add Form

add-staff.component.html

<div class="col-md-6">
  <h2 class="text-center">Add Staff</h2>
  <form>
    <div class="form-group">
      <label for="email">Email address:</label>
      
    </div>

    <div class="form-group">
      <label for="staffName">Staff Name:</label>
      
    </div>

    <div class="form-group">
      <label for="staffLname">Last Name:</label>
      
    </div>

    <button class="btn btn-success">Update</button>
  </form>
</div>

add-staff.component.ts

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {StaffService} from "../service/staff.service";
import {first} from "rxjs/operators";
import {Router} from "@angular/router";

@Component({
  selector: 'app-add-staff',
  templateUrl: './add-staff.component.html',
  styleUrls: ['./add-staff.component.css']
})
export class AddStaffComponent implements OnInit {

  constructor(private formBuilder: FormBuilder,private router: Router, private staffService: StaffService) { }

  addForm: FormGroup;

  ngOnInit() {

    this.addForm = this.formBuilder.group({
      id: [],
      email: ['', Validators.required],
      staffName: ['', Validators.required],
      staffLname: ['', Validators.required]
    });

  }

  onSubmit() {
    this.staffService.createStaff(this.addForm.value)
      .subscribe( data => {
        this.router.navigate(['list-staff']);
      });
  }

}

Angular 6 PHP CRUD Operations – Edit Form

edit-staff.component.html

<div class="col-md-6">
  <h2 class="text-center">Edit Staff</h2>
  <form>
    <div class="form-group">
      <label for="email">Email address:</label>
      
    </div>

    <div class="form-group">
      <label for="staffName">Staff Name:</label>
      
    </div>

    <div class="form-group">
      <label for="staffLname">Last Name:</label>
      
    </div>

    <button class="btn btn-success">Update</button>
  </form>
</div>

Angular 6 PHP CRUD Operations with PHP and MySQLi

edit-staff.component.ts

import { Component, OnInit } from '@angular/core';
import {StaffService} from "../service/staff.service";
import {Router} from "@angular/router";
import {Staff} from "../model/staff.model";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {first} from "rxjs/operators";

@Component({
  selector: 'app-edit-staff',
  templateUrl: './edit-staff.component.html',
  styleUrls: ['./edit-staff.component.css']
})
export class EditStaffComponent implements OnInit {

  staff: Staff;
  editForm: FormGroup;
  constructor(private formBuilder: FormBuilder,private router: Router, private staffService: StaffService) { }

  ngOnInit() {
    let staffId = localStorage.getItem("editStaffId");
    if(!staffId) {
      alert("Invalid action.")
      this.router.navigate(['list-staff']);
      return;
    }
    this.editForm = this.formBuilder.group({
      id: [],
      email: ['', Validators.required],
      staffName: ['', Validators.required],
      staffLname: ['', Validators.required]
    });
    this.staffService.getStaffById(+staffId)
      .subscribe( data => {
        this.editForm.setValue(data);
      });
  }

  onSubmit() {
    this.staffService.updateStaff(this.editForm.value)
      .pipe(first())
      .subscribe(
        data => {
          this.router.navigate(['list-staff']);
        },
        error => {
          alert(error);
        });
  }

}

Angular 6 php framework Examples

READ : Angular Introduction and Hello World Tutorial

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Angular 6 php framework – CRUD Operations.
I would like to have feedback on my Infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Post Views: 1,348

Angular 6 PHP CRUD (Create, Read, Update, Delete) Operations