1. HTML Forms & PHP & MySQL Database
Database Systems
CSCI-3343
Dr. Tom Hicks
Computer Science Department

2. Import Database University1 with MySQL Workbench

3. It Should Have 3 Tables

4. Create Folders

5. Create Folders Faculty-Add & Faculty-Display
Download Faculty-Display.php & Put It In Folder Faculty-Display

6. Update Main-Menu.php

7. Add/Link The Following To Main-Menu.php

8. Create UniversityUser

9. Create User UniversityUser
With These Privileges
ALTER USER IDENTIFIED WITH mysql_native_password BY 'trinity'

10. Test Faculty-Display
Uses UniversityUser!

11. Add Code To Page Faculty-Add.php

12. Add The Following Documentation Block To The Top  your Name & Date
<!
Faculty-Add.php
-- Purpose: Prompt the user to fill all of the data fields necessary to
add a new faculty member to the Faculty Table of the University1 --
MySQL database
When the submit button is pushed, control shall transfer to
page Faculty-Add-Confirmation.php; it will be this page which --
physically adds the record to the database
This will be a first attempt at adding records; no error
processing will be done
-- Written By: Dr. Tom Hicks Date: xx/xx/xx --
>

13. Modify The Following Page Properties

14. Create Page Faculty-Add-Confirmation.php

15. Save A Copy Of Faculty-Add.php
As Faculty-Add-Confirmation.php  Alter The Banner

16. Add The Following Documentation Block To The Top  your Name & Date
<!
Faculty-Add-Confirmation.php
-- Purpose: Create a query from the data transferred from page
Faculty-Add-Confirmation.php; use the query to add a new record --
to table Faculty of the University1 database
This will be a first attempt at adding records; no error
processing will be done
-- Written By: Dr. Tom Hicks Date: xx/xx/xx --
>

17. Add A Link To Display Faculty!

18. FORM Element

19. FORM HTML forms are used to pass data to a server.
An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The form element begins with <FORM> and ends with </FORM>
Add the form to the body of the Faculty-Add.php
<FORM>
</FORM> .

20. GUI’s Helpful

21. GUI’s Helpful

22. GUI’s Helpful

23. FORM  METHOD = GET METHOD = GET
Cacheable  Does not automatically re-request info
Should be used only if form is Indepotent
Browser will reprocess with no warning
Would Re-Bill a credit card with no browser warning
May require POST for Indepotent if URL is long
For getting/retrieving data only!
<FORM METHOD = "GET" >
</FORM> .

24. FORM  METHOD = POST METHOD = POST
Browser will generally reprocess with a warning
Don’t want credit card rebilled twice
I always use with database queries  I always want the most recent data
Many folks simply use POST all of the time
<FORM METHOD = "POST" >
</FORM> .

25. FORM  GET  Illustration
METHOD = GET
Get can also expose more of the sensitive information because it is appended to the URL. (See Below!)
More Of A Security Risk Than Post !
<FORM METHOD = “GET" >
</FORM> .
I USE POST!

26. FORM  ACTION = AddFaculty-Confirmation.php
ACTION = Form Process Page URL  Relative or Absolute
Suppose the data collection page Faculty-Add.php
The contents of the form will often be sent to another page for processing; i.e. adding this faculty member record to the database.
The data collection page & the process page can be one and the same, but this is often a bit more complex and limiting.
I would call the page to add the confirmation page AddFaculty-Confirmation.php
It is not the purpose of this presentation to add the record to the database; we are only examining the HTML transfer of information.
<FORM METHOD = "POST" ACTION = "Faculty-Add-Confirmation.php">
</FORM> .

27. Form Submission

28. FORM  ID = form1  NAME = form1
NAME = form1 ID = form1
HTML offers the ability to logically navigate to named regions on the page.
You might choose to automatically move the cursor into one of the form textboxes when a form is loaded – you will need the NAME.
<FORM METHOD = "POST" ACTION = "Faculty-Add-Confirmation.php" ID = "form1" NAME = "form1">
</FORM> .

29. Page Still Loads

30. INPUT TYPE = SUBMIT NAME = form1 ID = form1
HTML offers the ability to logically navigate to named regions on the page.
You might choose to automatically move the cursor into one of the form textboxes when a form is loaded – you will need the NAME.
<FORM METHOD = "POST" ACTION = "Login-Confirmation.php " ID = "form1" NAME = "form1">
<center><INPUT TYPE ="submit" VALUE ="Add Faculty Member Now!"></center>
</FORM> .

31. Push The Submit Button

32. Form Submit Can Navigate Control To Other Web Pages
The confirmation page may be a relative address as seen above.
The confirmation page may be absolute as shown to google below.
<FORM METHOD="POST" ACTION="
<INPUT TYPE ="submit" VALUE = "Go To Google Now">
</form>

33. Text Input Element & PHP Form Processing

34. Contents Of First Are Sent To Confirmation
INPUT TYPE = Text
The INPUT element is used for collecting data entered by keyboard.
The data may be alpha or numeric
The data must be inside <Form> and </Form>
Add the code below to your form on Faculty-Add.php
First <INPUT NAME = "First"
TYPE = "text"
SIZE = "15"><P>
Contents Of First Are Sent To Confirmation
On Submit!

35. Recover Data Passed To Confirmation Page
Data processed in the confirmation can be recovered from &_POST
First < INPUT NAME = "First" TYPE = "text" SIZE = "15"><P>
Add the following block of code to the confirmation page.
<HR COLOR=Navy SIZE=5 NOSHADE />
<?PHP
$First = $_POST['First'];
print "First = " . $First . "<BR>";
?>

36. Recover Data Passed To Confirmation Page

37. Text Input Element & PHP Form Processing

38. Contents Of First & Last Are Sent To Confirmation
INPUT TYPE = Text
The INPUT element is used for collecting data entered by keyboard.
The data may be alpha or numeric
The data must be inside <Form> and </Form>
Add the code below to your form on Faculty-Add.php
Last <INPUT NAME = "Last"
TYPE = "text"
SIZE = "20"><P>
Contents Of First & Last Are Sent To Confirmation
On Submit!

39. Recover Data Passed To Confirmation Page
Data processed in the confirmation can be recovered from &_POST
First < INPUT NAME = "First" TYPE = "text" SIZE = "15"><P>
Add the following block of code to the confirmation page.
<HR COLOR=Navy SIZE=5 NOSHADE />
<?PHP
$First = $_POST['First'];
$Last = $_POST['Last'];
print "First = " . $First . "<BR>";
print "Last = " . $Last . "<BR>"; ?>

40. Recover Data Passed To Confirmation Page

41. Consider Building Your Insertion Query As You Develop The Page

42. Add Connection - Confirmation Page - 1
<?PHP
$testing = true;
/*=============================================================
=== Connect To MySQL Database ===
=============================================================*/
$server ="localhost";
$username="UniversityUser";
$password="trinity"; //use your password
$database="university1";
$con=mysqli_connect($server, $username, $password, $database);

43. Add Connection - Confirmation Page - 2
/*=============================================================
=== Gather The Data Transferred With POST ===
=============================================================*/
$First = $_POST['First'];
$Last = $_POST['Last'];
=== Build The Query ===
$Query = "INSERT INTO Faculty " "(First, Last) "
"VALUES " "(" . $First . ", " . $Last . "); " ;

44. Add Connection - Confirmation Page - 3
/*=============================================================
=== Testing ===
=============================================================*/
if ($testing) {
print "First = " . $First . "<BR>";
print "Last = " . $Last . "<P>";
print "Query = <P>" . $Query . "<P>"; }
?>

45. This Will Be A Complex Query
Build It In Parts  Test Things As You Go!
Copy Query To Clipboard

46. Test Query What Is The Error?
You may notice errors simply by visual examination  IF SO FIX  If it appears good, test it.
What Is The Error?

47. Correct The Query
/*=============================================================
=== Build The Query ===
=============================================================*/
$Query = "INSERT INTO Faculty " "(First, Last) "
"VALUES " "('" . $First . "', '" . $Last . "'); " ;

48. Re-Test The Query

49. The Web Page Will Provide No Meaningful Database Insertion Error Messages Pasting The Query Into The Command Line, MySQL Workbench, Navicat, etc. Will Often Provide Meaningful Error Messages!

50. Checkbox Input Element & PHP Form Processing

51. INPUT TYPE = Checkbox The checkbox can be a binary type selection
Add the code below to your form on Faculty-Add.php
Deleted <INPUT NAME ="Deleted" TYPE ="checkbox"><P>

52. Update Your Data Collection
Data processed in the confirmation can be recovered from &_POST
Deleted <INPUT NAME ="Deleted"
TYPE ="checkbox"><P>
/*=============================================================
=== Gather The Data Transferred With POST ===
=============================================================*/
$First = $_POST['First'];
$Last = $_POST['Last'];
if(empty($_POST['Deleted']))
$Deleted = 'F';
else
$Deleted = 'T';

53. Update The Testing!
/*=============================================================
=== Testing ===
=============================================================*/
if ($testing) {
print "First = " . $First . "<BR>";
print "Last = " . $Last . "<P>";
print "Deleted = " . $Deleted . "<BR>";
print "Query = <P>" . $Query . "<P>"; }

54. Needs To Be Added To Query!
There is no need to add the value to the query until we are sure that we have captured it from the transfer correctly.

55. Update The Query!
/*=============================================================
=== Build The Query ===
=============================================================*/
$Query = "INSERT INTO Faculty "
"(First, Last, Deleted) "
"VALUES "
"('" . $First . "', '" . $Last ."', '" .
$Deleted . "'); " ;

56. Test The Deleted!

57. INPUT TYPE = Checkbox Do Not Do!
There may be multiple responses associated with a checkbox input.
Department <INPUT TYPE = "checkbox"
NAME = "Department"
VALUE = "Computer Science"> Computer Science
<INPUT TYPE = "checkbox"
VALUE = "Mathematics" > Mathematics <P>
Do Not Do!

58. Recover Data Passed To Confirmation Page
Data processed in the confirmation can be recovered from &_POST
Add the following block of code to the confirmation page.
There may be a dozen, or more, choices if necessary.
if(empty($_POST['Department']))
$Department = "None";
else
$Department = $_POST['Department'];
print "Department = " . $Department . "<BR>";
Passes The VALUE!
Much Like A Radio Button
Do Not Do!

59. Radio Button Element & PHP Form Processing

60. INPUT TYPE = Radio The checkbox can be unary, binary, or more.
Add the code below to your form on Faculty-Add.php
Gender <INPUT TYPE = "radio"
NAME = "Gender"
VALUE = "1"> Male
<INPUT TYPE = "radio"
VALUE = "2"> Female <P>

61. Update Your Data Collection
/*=============================================================
=== Gather The Data Transferred With POST ===
=============================================================*/
$First = $_POST['First'];
$Last = $_POST['Last'];
if(empty($_POST['Deleted']))
$Deleted = 'F';
else
$Deleted = 'T';
if(empty($_POST['Gender']))
$Gender = "";
$Gender = $_POST['Gender'];

62. Update The Testing!
/*=============================================================
=== Testing ===
=============================================================*/
if ($testing) {
print "First = " . $First . "<BR>";
print "Last = " . $Last . "<P>";
print "Deleted = " . $Deleted . "<BR>";
print "Gender = " . $Gender . "<BR>";
print "Query = <P>" . $Query . "<P>"; }

63. Needs To Be Added To Query!
There is no need to add the value to the query until we are sure that we have captured it from the transfer correctly.

64. Update The Query!
/*=============================================================
=== Build The Query ===
=============================================================*/
$Query = "INSERT INTO Faculty "
"(First, Last, Deleted, Gender) "
"VALUES "
"('" . $First . "', '" . $Last ."', '"
$Deleted . "', '" . $Gender . "'); " ;

65. Test The Gender!

66. Select/Combobox Element & PHP Form Processing

67. SELECT Combobox
The select combobox is a dropdown control that can be binary, or more.
Add the code below to your form on Faculty-Add.php
DeptID <select name="DeptID">
<option value="1">Computer Science</option>
<option value="2">Biology</option>
<option value="3">Chemistry</option>
<option value="4">Engineering Science</option>
</select> <P>
I Intentionally placed Dr. Pursell in the wrong dept. Please Correct That Now!

68. Update Your Data Collection
/*=============================================================
=== Gather The Data Transferred With POST ===
=============================================================*/
$First = $_POST['First'];
$Last = $_POST['Last']; $DeptID = $_POST['DeptID'];
if(empty($_POST['Deleted']))
$Deleted = 'F';
else
$Deleted = 'T';
if(empty($_POST['Gender']))
$Gender = "";
$Gender = $_POST['Gender'];

69. Update The Testing!
/*=============================================================
=== Testing ===
=============================================================*/
if ($testing) {
print "First = " . $First . "<BR>";
print "Last = " . $Last . "<P>";
print "Deleted = " . $Deleted . "<BR>";
print "Gender = " . $Gender . "<BR>";
print "DeptID = " . $DeptID . "<BR>";
print "Query = <P>" . $Query . "<P>"; }

70. Needs To Be Added To Query!

71. Update The Query!
/*=============================================================
=== Build The Query ===
=============================================================*/
$Query = "INSERT INTO Faculty "
"(First, Last, Deleted, Gender , DeptID) " .
"VALUES "
"('" . $First . "', '" . $Last ."', '"
$Deleted . "', '" . $Gender . "', '" .
$DeptID . "'); " ;

72. Test The DeptID!

73. Hidden Element & PHP Form Processing

74. INPUT TYPE = Hidden Nothing appears on the page?
Add the code below to your form on Faculty-Add.php
<INPUT NAME = "Secret"
TYPE = "hidden"
VALUE="Computer Science Rocks">

75. Update Your Data Collection
/*=============================================================
=== Gather The Data Transferred With POST ===
=============================================================*/
$First = $_POST['First'];
$Last = $_POST['Last']; $DeptID = $_POST['DeptID'];
$Secret = $_POST['Secret'];
if(empty($_POST['Deleted']))
$Deleted = 'F';
else
$Deleted = 'T';
if(empty($_POST['Gender']))
$Gender = "";
$Gender = $_POST['Gender'];

76. Update The Testing!
/*=============================================================
=== Testing ===
=============================================================*/
if ($testing) {
print "First = " . $First . "<BR>";
print "Last = " . $Last . "<P>";
print "Deleted = " . $Deleted . "<BR>";
print "Gender = " . $Gender . "<BR>";
print "DeptID = " . $DeptID . "<BR>";
print "Secret = " . $Secret . "<BR>";
print "Query = <P>" . $Query . "<P>"; }

77. Info May Be Used For Query Or Page Logic

78. Textarea (Multiline) Element & PHP Form Processing

79. TEXTAREA
The TextArea control enables the user to enter multiple lines of data.
Add the code below to your form on Faculty-Add.php
Notes <BR>
<TEXTAREA NAME = "Notes"
COLS = "70"
ROWS = "7">
Enter your notes here...
</TEXTAREA><P>

80. Update Your Data Collection
/*=============================================================
=== Gather The Data Transferred With POST ===
=============================================================*/
$First = $_POST['First'];
$Last = $_POST['Last'];
$DeptID = $_POST['DeptID'];
$Secret = $_POST['Secret'];
$Notes = $_POST['Notes'];
if(empty($_POST['Deleted']))
$Deleted = 'F';
else
$Deleted = 'T';
if(empty($_POST['Gender']))
$Gender = "";
$Gender = $_POST['Gender'];

81. Update The Testing!
/*=============================================================
=== Testing ===
=============================================================*/
if ($testing) {
print "First = " . $First . "<BR>";
print "Last = " . $Last . "<P>";
print "Deleted = " . $Deleted . "<BR>";
print "Gender = " . $Gender . "<BR>";
print "DeptID = " . $DeptID . "<BR>";
print "Secret = " . $Secret . "<BR>";
print "Notes = <BR>" . $Notes . "<P>";
print "Query = <P>" . $Query . "<P>"; }

82. Needs To Be Added To Query!

83. Update The Query!
/*=============================================================
=== Build The Query ===
=============================================================*/
$Query = "INSERT INTO Faculty "
"(First, Last, Deleted, Gender , DeptID, Notes) " .
"VALUES "
"('" . $First . "', '" . $Last ."', '"
$Deleted . "', '" . $Gender . "', '"
$DeptID . "', '" . $Notes . "'); " ;

84. Test The Notes!

85. Delete All Of Your Testing Records!
Test The Notes!
Delete All Of Your Testing Records!

86. Run Query From Web Page!
/*=============================================================
=== Build The Query ===
=============================================================*/
$Query = "INSERT INTO Faculty "
"(First, Last, Deleted, Gender , DeptID, Notes) " .
"VALUES "
"('" . $First . "', '" . $Last ."', '"
$Deleted . "', '" . $Gender . "', '"
$DeptID . "', '" . $Notes . "'); " ;
$recSet = $con->query($Query);
print "<BR><CENTER><H2> Your Record Has Been Added!</CENTER></H2>";

87. Run Query From Web Page!

88. PHP Redirect

89. Logical Redirect
Every Scripting Language needs some way to logically redirect files to another web page.
Suppose we wished to load page localhost/php/Faculty-Display/Faculty-Display.php
if the faculty member is in the Mathematics department.
Add the following code to AddFaculty-Confirmation.php in order to make that happen.
if ($Department = "Mathematics")
header("Location:

90. Redirect function
I use this redirection on many pages  I often abstract it to a function, called Redirect:
Return to page Connection.php, used in other PHP Database tutorials.
<?php
/*============================================================= === Connect To MySQL Database === =============================================================*/ $server ="localhost";
$username="UniversityUser";
$password="trinity"; //use your password
$database="university1";
$conn=mysqli_connect($server, $username, $password, $database);
function Redirect ($URL) { header("Location: $URL); }
?>

91. Evoking Redirect function
Connection.php, used in other PHP Database tutorials.
function Redirect ($URL) { header("Location: $URL); }
Add the following code to AddFaculty-Confirmation.php in order to make that happen.
if ($Department = "Mathematics") Redirect("localhost/php/DisplayUsers.php");

92. Disclaimer

93. Recover Data Passed To Confirmation Page
None of the forms in this tutorial illustrate how user-friendly forms should be generated.
Not all of the Faculty fields have yet been added to the database via the application.
See the tutorial on good form design.

94. Your Job

95. Create A FacultyPage2.php Add This Table

96. Link Main-Menu.php to FacultyPage2.php

97. Start Merging Your Form Add The Extra Text Input Fields
Left Justify Data Fields - Right Justify Prompts

98. Select A Color Scheme - Put Submit At Bottom

99. Improve The Look Of Your Submit Button

100. Encrypt The Password <input NAME = "Passwd" TYPE = "Password"
SIZE = "20" style="width: 254px" >

101. Final Testing

102. Build The FullName  From First & Last

103. Delete All Of Your Testing Records Set $testing = false

104. Computer Science Department
Database Systems CSCI 3343
Dr. Thomas E. Hicks
Computer Science Department
Trinity University