Add Navigation Link for Adding a Student to Student Listing Main Page
Before we create our addstudent.php script, let's first add a navigation link for adding a student to our Main Student Listing index.php script. Open up the index.php script and add the following navigation link just below the <h1>Students</h1> line:
index.php - Student Listing: Add Navigation Link to addstudent.php
1 2 3 4 5 6 7 8 910
...
<body><divclass="card"><divclass="card-body"><h1>Students</h1><pclass='nav-link'>If you have a student you would like to include,
feel free to <ahref='addstudent.php'> add one</a></p><?php
require_once('dbconnection.php');
...
Creating a Add a Student Page with the Usual Bootstrap Template with a Card, and a Link back to the Main Page
Let's create a addstudent.php script using a Bootstrap template and add a Card for our content
addstudent.php - Add Student: using Bootstrap Template with Card
Within the innermost <div> tag, add a header with the title of the page, then a navigation link back to the main page, and finally a horizontal line:
addstudent.php - Add Student: Link back to Main Page and Header
1 2 3 4 5 6 7 8 9101112
...
<body><divclass="card"><divclass="card-body"><h1>Add a Student</h1><aclass="nav-link"href="index.php">Students</a></div><hr/></div>
...
</body>
...
Add Self Referencing Form for Adding New Student Data
Next, we want to display our form. But since our page is self referencing, we only want to display the form in certain circumstances. After the <hr/> add a boolean flag for whether we display the form or not, and set it to true:
addstudent.php - Add Student: Boolean to Display Form
Note that the page is self referencing as the action attribute is set to $_SERVER['PHP_SELF']:
1
<form...action="<?= $_SERVER['PHP_SELF']; ?>">
Using Bootstrap’s Client Side Validation
Also, notice that we are using Bootstrap’s client-side validation. This requires we do the following:
Set the form’s class attribute to needs-validation and add the novalidate attribute:
1
<formclass="needs-validation"novalidate...
Marking input elements with a required attribute to ensure the fields we want to be validated get validated and sent by the user’s browser as part of the POST request:
1
<inputtype="text"...required>
Adding <div> elements with class attributes set to invalid-feedback containing the validation text we want the user to see if they forget to fill in the field. We add these directly under the <input> elements we want validated:
1 2 3 4 5 6 7 8 91011
<divclass="form-group row"><labelfor="student_first_name"class="col-sm-3 col-form-label-lg">First Name</label><divclass="col-sm-8"><inputtype="text"class="form-control"id="student_first_name"name="student_first_name"placeholder="First Name"required><divclass="invalid-feedback"> Please provide a valid first name.
</div></div></div>
Adding this JavaScript code in <script> tags following the form:
</form><script>// JavaScript for disabling form submissions if there are invalid fields(function(){'use strict';window.addEventListener('load',function(){// Fetch all the forms we want to apply custom Bootstrap validation styles tovarforms=document.getElementsByClassName('needs-validation');// Loop over them and prevent submissionvarvalidation=Array.prototype.filter.call(forms,function(form){form.addEventListener('submit',function(event){if(form.checkValidity()===false){event.preventDefault();event.stopPropagation();}form.classList.add('was-validated');},false);});},false);})();</script><?php}// Display add student form?></div>...</body>
Inserting Student Data Into the Database
When a user enters the required fields into the form and submits it, we will insert the data into the database. We'll do this inside a code block that checks if the user submitted the form and validates the required fields. Add the following condition just below the $display_add_student_form=true; line:
addstudent.php - Add Student: Condition for Adding Student Data to Database
1 2 3 4 5 6 7 8 9101112131415
...$display_add_student_form=true;// pro-tip: you can test multiple variables within a single isset() callif(isset($_POST['add_student_submission'],$_POST['student_first_name'],$_POST['student_last_name'],$_POST['student_email'])){// Code to insert new student into database...}if($display_add_student_form){...
Now add the code for inserting the student data into the database within the condition:
addstudent.php - Add Student: Condition for Adding Student Data to Database
...$display_add_student_form=true;// pro-tip: you can test multiple variables within a single isset() callif(isset($_POST['add_student_submission'],$_POST['student_first_name'],$_POST['student_last_name'],$_POST['student_email'])){require_once('dbconnection.php');$student_first_name=$_POST['student_first_name'];$student_last_name=$_POST['student_last_name'];$student_email=$_POST['student_email'];$dbc=mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME)ortrigger_error('Error connecting to MySQL server for'.DB_NAME,E_USER_ERROR);$query="INSERT INTO studentListing (first_name, last_name, email) "." VALUES ('$student_first_name', '$student_last_name', "."'$student_email')";mysqli_query($dbc,$query)ortrigger_error('Error querying database studentListing: Failed to insert student data',E_USER_ERROR);}if($display_add_student_form){...
Display the Added Details, a Link to Add Another Student, and do not Display the Form
To make this page more useful, we should let the user know the student was successfully added to the database, include a link to add another student, and make sure we do not display the Add Student form. Add the following code below the mysqli_query($dbc,$query) lines:
addstudent.php - Add Student: Display Added Details and a Link to Add Another
...// pro-tip: you can test multiple variables within a single isset() callif(isset($_POST['add_student_submission'],$_POST['student_first_name'],$_POST['student_last_name'],$_POST['student_email'])){...mysqli_query($dbc,$query)ortrigger_error('Error querying database studentListing: Failed to insert student data',E_USER_ERROR);$display_add_student_form=false;?> <h3 class="text-info">The Following Student Details were Added:</h3><br/> <h1><?="$student_first_name$student_last_name"?></h1> <table class="table table-striped"> <tbody> <tr> <th scope="row">First Name</th> <td><?=$student_first_name?></td> </tr> <tr> <th scope="row">Last Name</th> <td><?=$student_last_name?></td> </tr> <tr> <th scope="row">Email</th> <td><?=$student_email?></td> </tr> </tbody> </table> <hr/> <p>Would you like to <a href='<?=$_SERVER['PHP_SELF']?>'> add another student</a>?</p><?php}if($display_add_student_form){...