Blog postAngular app with PHP backend: part 2 (POST)

Learn to code Angular app with PHP backend: part 2 (POST)

Published August 14, 2018

This is the second tutorial in the series about coding an Angular app with a PHP backend. In the previous tutorial, we fetched the list of items from the PHP backend and printed it inside an Angular component. In this one, you will develop a form to which the users can enter the model name and price before posting the data to the server side.

Demo for the Angular and PHP application

All the tutorials in the series about developing Angular and PHP application:

  1. How to install Angular?
  2. What is REST API? In plain English
  3. What is Angular Observable?
  4. Angular app with PHP backend: part 1 (GET)
  5. Angular app with PHP backend: part 2 (POST)
  6. Angular app with PHP backend: part 3 (PUT)
  7. Angular app with PHP backend: part 4 (DELETE)

Click to see the code in action

You can dowload the source code from the conclusion section

# 1. Working with Angular forms

To be able to work with Angular forms, you first need to import the FormsModule to the core module of the application:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

It is not enough to import the FormsModule you also need to add it's symbol to the imports array.

# 2. The HTML form

You need to add the form just beneath the list that we developed in the previous tutorial

The Angular form:

src/app/app.component.html

<div id="theForm">
  <h2>The form</h2>
  <form #f="ngForm" name="theForm" (submit)="addCar(f)">
    <div class="form-group">
      <label>Model</label>
      <input type="text"
            class="form-control"
            name="model"
            [(ngModel)]="car.model"
            #carModel="ngModel"
            required
            pattern="^[a-zA-Z]+$">
      <span class="help-block danger" *ngIf="carModel.errors?.required && carModel.touched">
        The model name is required
      </span>
      <span class="help-block danger" *ngIf="carModel.errors?.pattern && carModel.touched">
        The model name can only contain the letters a-z or A-Z
      </span>
    </div>

    <div class="form-group">
      <label>Price</label>
      <input type="number"
            class="form-control"
            name="price"
            required
            [(ngModel)]="car.price"
            #carPrice="ngModel">
      <span class="help-block danger" *ngIf="carPrice.errors?.required && carPrice.touched">
        The price is required
      </span>
    </div>

    <button
        class="btn btn-primary btn-sm"
        [disabled]="f.invalid">Add</button>
  </form>
</div>

There's quite a lot happening in the form so if you feel that you need a refresher on the subject of Angular forms you better read the tutorial.

Don't feel discouraged if the app is broken at this stage. It happened because the values of the form are bound to the Car object that we'll create only in the next section.

# 3. The code for the component

In the previous tutorial, we developed the getCars() method that brings the list of cars. In this one, we'll write the addCars() method that adds a car.

You need to initialize the car object from the Car class with the following code that you can put beneath the list of variables:

src/app/app.component.ts

car = new Car('', 0);

The first value is for the model's name and the second for the price.

Now, you need to add the addCar() method that receives the values entered into the form before sending them to the service.

Add the following code beneath the getCars() method:

addCar(f) {
    this.error = '';
    this.success = '';

    this.carService.store(this.car)
      .subscribe(
        (res: Car[]) => {
          // Update the list of cars
          this.cars = res;

          // Inform the user
          this.success = 'Created successfully';

          // Reset the form
          f.reset();
        },
        (err) => this.error = err
      );
}

In the case of success, Angular's reset() method will reset the form, including the values and classes.

addCar() sends the values that the users entered into the form to the store() method of the service, and subscribes to the output.

The store() method is an observable and so addCar() needs to subscribe to it in order to send the data to the service. To improve your understanding read the tutorial about Observables.

We expect the Observable to return one of two results:

  1. In the case of success, it will send the list of cars, including the newly created car. Once you get the list you assign its value to the component's local cars variable.
  2. In the case of an error, you'll inform the user about the error message.

# 4. The service

Now you need to add the store() method to the service. The same service which we started to develop in the previous tutorial.

src/app/car.service.ts

store(car: Car): Observable<Car[]> {
    return this.http.post(`${this.baseUrl}/store`, { data: car })
      .pipe(map((res) => {
        this.cars.push(res['data']);
        return this.cars;
      }),
      catchError(this.handleError));
}

We use the httpClientModule's post() method to send the data to the server side. The method accepts the URL as the first parameter and the car object as the second parameter.

The data retrieved from the server side includes the data about the newly created car (model, price, and id), which we will push to the list of cars in the service. The method then returns the updated list of cars to the component.

The handleError method handles any error that might occur.

# 5. The server side

The following PHP code handles the storage of data on the server side:

api/store.php

<?php
require 'connect.php';

// Get the posted data.
$postdata = file_get_contents("php://input");

if(isset($postdata) && !empty($postdata))
{
  // Extract the data.
  $request = json_decode($postdata);
	

  // Validate.
  if(trim($request->data->model) === '' || (int)$request->data->price < 1)
  {
    return http_response_code(400);
  }
	
  // Sanitize.
  $model = mysqli_real_escape_string($con, trim($request->data->model));
  $price = mysqli_real_escape_string($con, (int)$request->data->price);
    

  // Store.
  $sql = "INSERT INTO `cars`(`id`,`model`,`price`) VALUES (null,'{$model}','{$price}')";

  if(mysqli_query($con,$sql))
  {
    http_response_code(201);
    $car = [
      'model' => $model,
      'price' => $price,
      'id'    => mysqli_insert_id($con)
    ];
    echo json_encode(['data'=>$car]);
  }
  else
  {
    http_response_code(422);
  }
}

The server returns a 400 status code in the case of an error (you can read the tutorial about status codes and the REST API).

In the case of success, the server returns an array which contains the id, model and price of the newly created record in the database.

# Conclusion

Now, that you know how to create new records with the httpClient's post() method you are ready for the next tutorial. In the following tutorial, you will learn how to update an existing item with the put() method.

Click to download the source code for the tutorials

comments powered by Disqus