CS4640 - WebPL

POTD 5: Angular and backend PHP (HTTP)

Due 10-June-2022, 1pm EST (no late submission, no extension)

Purpose:

Understand Angular HTTP service
Have hands-on experience using Angular HTTP to connect between a frontend component (Angular) and backend component (PHP)
Get ready to work on your app

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!

Tasks:

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
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
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) { }
```
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().

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)

(5 points) — Providing evidence of your attempt, minimal effort
(0 point) — No evidence of your attempt

Submission

Log in to Collab, then upload all your files (.php, and other files needed to complete this POTD) to POTD 5 on Gradescope.
Make sure you connect your partner(s) to your group on Gradescope so that everyone receives credit
Each team submits only one copy

Making your submission available to instructor and course staff is your responsibility; if we cannot access or open your file, you will not get credit. Be sure to test access to your file before the due date.