POTD 5: Angular and backend PHP

Due 10-June-2021, 10:30am EST (no late submission, no extension)

For this exercise, you may work alone or with another student in this course.

Note: This option is somewhat similar to POTD 5 Angular service and HTTP where you will implement your own service that utilizes Angular HTTP service.

For this option, you will use the standard Angular HTTP service to connect between the frontend and the backend.

Imagine you are writing an Angular app that will accept user's inputs. The Angular program will then send a request (i.e., asynchronous request) to a backend component. A backend component then processes the request and returns a response to the Angular program. The Angular program then uses the response and updates the screen.

You may use an Angular app you implemented for the Angular form and input validation activity as a starting point. Alternatively, you may create an Angular form from scratch or use an Angular form from your project. You will implement a PHP backend component that will accept a request from the Angular and return a response to the Angular.

A sample interface:
sample UI for inclass5 (angular form)

A sample interface after receiving a response from the backend:
sample UI for inclass5 (angular form)

You may modify your interface the way you like. Get creative. Feel free to add additional elements you feel should be included and have fun!


  1. Import HttpClientModule into the root module of the application (app.module.ts):
    import { HttpClientModule } from '@angular/common/http';

    Describe the dependency the root module has by including HttpClientModule in the imports array of the @ngModule declarator

  2. Import HTTP-related classes into the app component controller (app.component.ts)
    import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
    • HttpClient — performs HTTP requests
    • HttpErrorResponse — represents an error or failure
    • HttpParams — represents parameters of an HTTP request/response

  3. Inject the HttpClient dependency to manage the communication with the server in the constructor of the app component controller (app.component.ts)
    constructor(private http: HttpClient) { }

  4. Use the get() method of the HttpClient to send a GET request to the server. Alternatively, you may use the post() method of the HttpClient to send a POST request to the server. Be sure to subscribe().

  5. In your PHP program, configure the header to instruct the server to give the Angular app the necessary privileges so that the request from the Angular app can be accepted by the server.
    // header('Access-Control-Allow-Origin: http://localhost:4200');
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding');
    header('Access-Control-Max-Age: 1000');  
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT');
    Refer to dealing with CORS for more information on header setting for cross-site request.

    Write code to handle a GET (or POST) request

If you host your PHP program on GCP, you need to do the following extra steps.

Create a file named cors-json-file.json containing the following code (to force GCP PHP environment to accept remote request)

[ { "origin": ["*"], 
    "method": ["*"] } ]  

Use a terminal, run the following command
gsutil cors set cors-json-file.json gs://your-GCP-bucket

To deploy and test your Angular program, please refer to Angular deployment.

To deploy and test your PHP program use one of the following options:

You may modify your interface the way you like. Get creative. Feel free to add additional elements you feel should be included and have fun!

For more practice, try adding more content. Make use modules, components, classes, as well as data binding and directives.

Grading rubric

[Total: 10 points]: Done (or provide evidence of your attempt, full or reasonable effort)


Submit (1) a zipped app folder of your Angular app and (2) your .php file(s) to Collab (under Assignment/POTD5). Please include all team member names. Each team submits only one copy.

If you have multiple files, do not zip them. Each team submits only one copy.

images showing Collab submission page