Web Application

Development

lecture 4
PHP Form Handling
 Client: makes a request
requests an Internet
Client resource by
(browser) specifying a URL and
providing input via HTTP
Web encoded strings
browser

GET hello.php HTTP/1.1 Server

Host: www.massey.ac.nz:80
os
Web
server

os

Internet

Network Core
 Server: responds
• Webserver supports HTTP.

Server

Web
server My codes
PHP
HTTP HTML MySQL
interpreter
Client
Operating System
Web
TCP/IP
browser

Internet
 What’s happening?
Client (browser) Web server

GET hello.php HTTP/1.1

Host: www.massey.ac.nz:80

Find hello.php
Parse the file
Run php parts through PHP interpreter
Deliver resulting document to port 80
HTTP/1.1 200 OK
(document body)
Display resulting
document on the
screen
⦁ HTML5 provides forms for collecting
information from users.
⦁ Figure 2.14 is a simple form that sends data
to the web server for processing.

© 2008 Pearson Education, Inc. All rights reserv6e0d.

© 2008 Pearson Education, Inc. All rights reserved.
© 2008 Pearson Education, Inc. All rights reserved.
© 2008 Pearson Education, Inc. All rights reserved.
 method Attribute of the form Element
⦁ A form is defined by a form element
▪ Attribute method specifies how the form’s data is
sent to the web server.
▪ Using method = "post" appends form data to
the browser request, which contains the protocol
(HTTP) and the requested resource’s URL.
▪ The other possible value, method = "get",
appends the form data directly to the end of the
URL of the script, where it’s visible in the
browser’s Address field.
▪ The action attribute of the form element
specifies the script to which the form data will be
sent

© 2008 Pearson Education, Inc. All rights reserve9d.

 action Attribute of the form Element
▪ The action attribute of the form element
specifies the script to which the form data will be
sent.
▪ Since we haven’t introduced server-side
programming yet, we set this attribute to
http://www.deitel.com for now.
▪ input elements that specify data to provide to the
script that processes the form (also called the
form handler).
▪ An input’s type is determined by its type
attribute.

© 2008 Pearson Education, Inc. All rights

10
⦁ Forms can contain visual and nonvisual
components.
⦁ Visual components include clickable buttons and
other graphical user interface components with
which users interact.
⦁ Nonvisual components, called hidden inputs,
store any data that you specify, such as e-mail
addresses and HTML5 document file names that
act as links.

© 2008 Pearson Education, Inc. All rights

11
⦁ The text input inserts a text field into the form,
which allows the user to input data.
⦁ The label element provides users with
information about the input element’s purpose
⦁ The size attribute specifies the number of
characters visible in the text field.
⦁ Optional attribute maxlength limits the number
of characters input into a text field.

© 2008 Pearson Education, Inc. All rights

12
 submit and reset input Elements
⦁ The submit input element is a button.
▪ When the submit button is pressed, the form’s data is
sent to the location specified in the form’s action
attribute.
⦁ The value attribute sets the text displayed on the
button.
⦁ The reset input element allows a user to reset all
form elements to their default values.

© 2008 Pearson Education, Inc. All rights

13
⦁ Figure 2.15 contains a form that solicits user
• feedback about a website.
⦁ The textarea element inserts a multiline text
area into the form.
⦁ The number of rows is specified with the rows
attribute, and the number of columns (i.e.,
characters per line) with the cols attribute.
⦁ Default text can be specified in other input
• types, such as text fields, by using the value
• attribute.

© 2008 Pearson Education, Inc. All rights

14
© 2008 Pearson Education, Inc. All rights reserved.
© 2008 Pearson Education, Inc. All rights reserved.
© 2008 Pearson Education, Inc. All rights reserved.
© 2008 Pearson Education, Inc. All rights reserved.
© 2008 Pearson Education, Inc. All rights reserved.
© 2008 Pearson Education, Inc. All rights reserved.
⦁ The password input inserts a password box
into a form.
▪ Allows users to enter sensitive information, such
as credit card numbers and passwords, by
“masking” the information input with another
character, usually asterisks.
▪ The actual value input is sent to the web server,
not the asterisks that mask the input.

© 2008 Pearson Education, Inc. All rights

21
⦁ The checkbox input element enables users to
select and option.
▪ When the checkbox is selected, a check mark appears in
the checkbox . Otherwise, the checkbox is empty
▪ checkboxes can be used individually and in groups.
checkboxes that are part of the same group have the
same name
⦁ radio buttons are similar to checkboxes, except
that only one radio button in a group can be
selected at any time.
▪ All radio buttons in a group have the same name attribute
but different value attributes.
⦁ The select input provides a drop-down list of
items.
▪ The name attribute identifies the drop-down list.
▪ The option element adds items to the drop-down list.

© 2008 Pearson Education, Inc. All rights

22
⦁ The a tag can be used to link to another
section of the same document by specifying
the element’s id as the link’s href.
⦁ To link internally to an element with its id
attribute set, use the syntax #id.

© 2008 Pearson Education, Inc. All rights

23
© 2008 Pearson Education, Inc. All rights reserved.
© 2008 Pearson Education, Inc. All rights reserved.
© 2008 Pearson Education, Inc. All rights reserved.
© 2008 Pearson Education, Inc. All rights reserved.
© 2008 Pearson Education, Inc. All rights reserved.
 PHP Designer
Configure your PHP editor to access the PHP interpreter
From the menu bar, select Tools/Preferences
 PHP Form Handling
• Forms take input from users, like a Login form
or a Registration form.
• The webpage is accomplished using HTML,
while PHP serves as a transport for those
values from the webpage to the server and
then in further processing those values.
• $_GET and $_POST are used
for collecting form-data
for processing.
30
Understanding How HTML Form Works
• action: specify the name of the file which will
collect and handle the form-data.
• method: specify the means of sending the
form-data, whether it will be submitted
via POST method or GET method.

31
PHP Form Handling with POST

32
PHP Form Handling with GET

33
Using “name” attribute to get values of controls

34
 PHP Form Validation
• Check mandatory fields:

• Check email validation:

35
Php + Html in the same file

36
PHP with MySQL

37
 Why MySQL
• The most popular open source database
available is MySQL .
• It is one of the most widely used database
with PHP.

38
 Design DB schema
• Analyze the raw data.
• Determine tables.
• Assign the columns (fields) of each table.
• Find relations between tables and each other
and their fields.
• Sketch out the full schema of your DB.

39
 Search NCBI for Data
• Genes Database:
https://www.ncbi.nlm.nih.gov/gene/?term=Ar
abidopsis+thaliana
• Select Gene from results: PHYA
(https://www.ncbi.nlm.nih.gov/gene/837483)
• Try to find the valuable information and
description that can be columns in the Gene
table in my DB.

40
Gene’s details

41
Gene’s details

42
Fasta gene sequence

43
Php MyAdmin – Log in

44
Php MyAdmin – Create DB

45
Php MyAdmin – Create table

46
 Insert -
Browse
table rows

47
 Connect to MySQL Server using PHP
• PHP 5 and later can work with a MySQL
database using either:
• MySQLi extension (the "i" stands for
improved): only works with MySQL databases.
• PDO (PHP Data Objects): works on 12 different
database systems.

48
How to Connect to MySQL Using PHP

49
 MySQLi Object-Oriented
• <?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "bioserverdb";
// Create connection
$conn = new mysqli($servername, $username, $password,
$dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
else { echo "Connected successfully"; }
// Close connection
$conn->close();
?> 50
 Select Data With MySQLi
$sql = "SELECT * FROM gene";
$result = $conn->query($sql);
if ($result->num_rows > 0)
{
// output data of each row
while($row = $result-> fetch_assoc())
{
echo “Id: [" . $row[“GID"]. "] - Name: [" .
$row[“GName"]. "] – Fasta Sequence : [" .
$row["FastaSeq"]. "]<br>";
}
}

51
Results

52
 Insert Data With MySQLi
$sql = "INSERT INTO gene (GID, GName, FastaSeq)
VALUES ('4', 'NC_003076.8', 'AAGGAAAAAAAAAAATAGAA
AGAGAAAACG') ";

if ($Conn->query($sql) === TRUE)

{
echo "New record created successfully";
}
else
{
echo "Error: " . $sql . "<br>" . $Conn->error;
}
53
Insert Data via Form controls

54
55