Lab 3

Forms & PHP Intro

Goals

Learn about...

HTML From Elements
Form Submission Concept
Connecting Forms to PHP scripts
GET and POST methods

Setup

Connecting to web server via FTP

Connection details have been emailed to you.

In lab, I will demonstrate how to use WinSCP to connect to our remote server.

Here are the server details:

Hostname: ftp.sienasellbacks.com or ftp.breimer.net
Username: yourID@sienasellbacks.com or yourID@breimer.net
Password: Sent via email
Port: 21
Setting: If the option exists, use Passive FTP and IPv6
Do not use SFTP

1. Creating a basic form process by a PHP script

Open Notepad++ or your editor of choice
Create a new document and save it as part1.html in your lab3 folder
Type the following starter code:
Create another new document and save it as part1.php in your lab3 folder
Type the following starter code:
Using WinSCP, upload your lab3 folder to your remote server
Open Chrome and go to your URL, i.e., username.siencs.com or username.breimer.net to test your scripts.

Key Concept: please read as you will be quizzed on this later

HTML has elements for building forms to create user interfaces. When a form is submitted, the browser can initiate an HTTP request based on the form's action attribute, which can specify the name or URL of a PHP server-side script. The values of form elements are passed to the server as part of the HTTP requests. PHP scripts can access these values using special global variables called $_GET and $_POST.

Task Check

Show your instructor part1.html working on the web server.

2. Adding a dropdown menu and some formatting

Modify part1.html by replacing the text box for entering the number of nights with a drop down menu, i.e., select and option elements. The menu should let the user select the values 1, 2, 3, ..., 9. See the Mozilla reference for the select tag
Add another drop down menu for selecting the number of rooms. The menu should let the user select the values 1, 2, 3, ..., 5. Give the select element the name rooms.
Modify part1.php to "get" the number of rooms and store it as a PHP variable called $rooms. Then modify the output of the sentence:
```
X rooms and Y nights at Z/night is a total cost of S
```
Where X, Y and Z come from the form and S is computed by the PHP script.
Modify the output so that the cost of the room, i.e., Z/night is in a strong tag.
Add inline CSS to the strong tag so the color is red.
Using WinSCP, upload your modified part1.html and part1.php
Open Chrome and go to your URL, i.e., username.siencs.com or username.breimer.net to test your scripts.

Key Concept: please read as you will be quizzed on this later

How Form Submission Works:

When you submit a form using the GET method, the values you enter into input elements are passed to the server via the HTTP protocol.
The server receives the request and can access the submitted values.
The PHP preprocessor works with the web server to parse submitted values from each HTTP request.
The PHP preprocessor puts all the submitted form variables in an array called $_GET
PHP variables always start with $
Variables that start with an underscore (_) and capital letters are global variables that are defined and initialized by the PHP preprocessor.
Important Global Variables
- $_GET - Form elements submitted via the "get" method.
- $_POST - Form elements submitted via the "post" method.
- $_FILES - Uploaded files submitted via the "multipart/form-data" encryption type.
- $_SESSION - Session variable stored on the server.
- $_COOKIE - Cookie variables sent by the web browser.

Task Check

Show your instructor part1.html working on the web server.

3. Adding a radio button group and changing the submission method

Modify part1.html by adding two labels and two radio buttons so the user can select either a smoking or non-smoking room. The two radio buttons should both have the name "type" with the values "smoking" and "non-smoking" respectively. See the Mozilla reference for radio buttons
Change the form's method from "get" to "post"
Modify part1.php by using the $_POST variable instead of the $_GET variable to fetch the form data.
Modify part1.php to fetch the room type as a PHP variable called $type. Then modify the output of the sentence:
```
X T rooms and Y nights at Z/night is a total cost of S
```
Where T is the value of the room type, i.e., "smoking" or "nonsmoking" e.g., 3 smoking rooms and 4 nights at 100/night is a total cost of 1200.
Add dollar signs so the output would now read something like "2 non-smoking rooms and 3 nights at $150/night is a total cost of $900"
Using WinSCP, upload your modified part1.html and part1.php
Open Chrome and go to your URL, i.e., username.siencs.com or username.breimer.net to test your scripts.

Key Concept: please read as you will be quizzed on this later

Key Concept: Receiving data via the GET method is very useful because you can see the submitted values in the URL which is helpful for debugging. In a URL, a question mark ? is used to define a query string. The query string consists of name=value pairs. Each pair is delimited with a &. Passing data via the POST is more common because it hides the submitted values and it allows large amounts of data to be passed. The size of the URL is limited so you cannot pass large amounts of data using GET.

Task Check

Show your instructor the part1.html form working on the web server.

DELIVERABLE

Create a zip file of your lab3 folder called lab3.zip and submit the file in Blackboard. The zip file should contain three files: part1.html and part1.php.

If applicable, in the comment area of Blackboard put your partner's name.

Not finished?

The deliverable must be submitted in Blackboard by midnight on the day before your next scheduled lab meeting. If you wish to work alone, you can submit the deliverable yourself. However, you are encouraged to work with your partner and you can submit together. When submitting as a lab pair, be sure to include your partner's name in the comment area when you submit via Blackboard.

Do not share

Outside of lab, you are only permitted to work with your lab partner. Do not share your work with any other student.