Skip to content

Student Listing - Add a Student Page

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
...
<body>
  <div class="card">
    <div class="card-body">
      <h1>Students</h1>
      <p class='nav-link'>If you have a student you would like to include, 
        feel free to <a href='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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
  <head>
    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
          crossorigin="anonymous">
    <title>Add Student</title>
  </head>
  <body>
    <div class="card">
      <div class="card-body">
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
            integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
            integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
            crossorigin="anonymous"></script>
  </body>
</html>
Notice we set the page <title> to Add Student

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
 9
10
11
12
...
  <body>
    <div class="card">
      <div class="card-body">
        <h1>Add a Student</h1>
        <a class="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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
...
<body>
<div class="card">
  <div class="card-body">
    <h1>Add a Student</h1>
    <a class="nav-link" href="index.php">Students</a>
  </div>
  <hr/>
  <?php
      $display_add_student_form = true;
  ?>
</div>
...
</body>
...

Now let's create our form but only display it if $display_add_student_form is true:

addstudent.php - Add Student: Form for Adding Student

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
...
<body>
<div class="card">
  <div class="card-body">
    <h1>Add a Student</h1>
    <a class="nav-link" href="index.php">Students</a>
  </div>
  <hr/>
  <?php
      $display_add_student_form = true;

      if ($display_add_student_form)
      {
  ?>
  <form class="needs-validation" novalidate method="POST" 
        action="<?= $_SERVER['PHP_SELF'] ?>">
    <div class="form-group row">
      <label for="student_first_name"
              class="col-sm-3 col-form-label-lg">First Name</label>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="student_first_name" 
                name="student_first_name" placeholder="First Name" required>
        <div class="invalid-feedback">
          Please provide a valid first name.
        </div>
      </div>
    </div>
    <div class="form-group row">
      <label for="student_last_name" 
              class="col-sm-3 col-form-label-lg">Last Name</label>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="student_last_name" 
                name="student_last_name" placeholder="Last Name" required>
        <div class="invalid-feedback">
          Please provide a valid last name.
        </div>
      </div>
    </div>
    <div class="form-group row">
      <label for="student_email" 
              class="col-sm-3 col-form-label-lg">Email</label>
      <div class="col-sm-8">
        <input type="email" class="form-control" 
                id="student_email" 
                name="student_email"
                placeholder="Email" required>
        <div class="invalid-feedback">
          Please provide a valid email address.
        </div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit" 
            name="add_student_submission">Add Student</button>
  </form>
  <?php
      }
  ?>
</div>
...
</body>
...

Page is self referencing

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
    <form class="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
    <input type="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
 9
10
11
    <div class="form-group row">
  <label for="student_first_name"
          class="col-sm-3 col-form-label-lg">First Name</label>
  <div class="col-sm-8">
    <input type="text" class="form-control" id="student_first_name" 
            name="student_first_name" placeholder="First Name" required>
    <div class="invalid-feedback">
      Please provide a valid first name.
    </div>
  </div>
</div>

  • Adding this JavaScript code in <script> tags following the form:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  </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 to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = 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
 9
10
11
12
13
14
15
...
$display_add_student_form = true;

// pro-tip: you can test multiple variables within a single isset() call
if (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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
...
$display_add_student_form = true;

// pro-tip: you can test multiple variables within a single isset() call
if (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)
            or trigger_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)
        or trigger_error(
            'Error querying database studentListing: Failed to insert student data',
            E_USER_ERROR);
}


if ($display_add_student_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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
...
// pro-tip: you can test multiple variables within a single isset() call
if (isset($_POST['add_student_submission'], $_POST['student_first_name'],
          $_POST['student_last_name'], $_POST['student_email']))
    {
        ...

        mysqli_query($dbc, $query)
            or trigger_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)
    {
...

Complete Code Listing

addstudent.php - Add Student: Complete Code Listing 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
  <head>
    <title>Add Student</title>
    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
          crossorigin="anonymous">
  </head>
  <body>
    <div class="card">
      <div class="card-body">
        <h1>Add a Student</h1>
        <nav class="nav">
          <a class="nav-link" href="index.php">Students</a>
        </nav>
        <hr/>
        <?php
            $display_add_student_form = true;

            // pro-tip: you can test multiple variables within a single isset() call
            if (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)
                        or trigger_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)
                    or trigger_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)
            {
        ?>
        <form class="needs-validation" novalidate method="POST" 
              action="<?= $_SERVER['PHP_SELF'] ?>">
          <div class="form-group row">
            <label for="student_first_name"
                   class="col-sm-3 col-form-label-lg">First Name</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="student_first_name" 
                     name="student_first_name" placeholder="First Name" required>
              <div class="invalid-feedback">
                Please provide a valid first name.
              </div>
            </div>
          </div>
          <div class="form-group row">
            <label for="student_last_name" 
                   class="col-sm-3 col-form-label-lg">Last Name</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="student_last_name" 
                     name="student_last_name" placeholder="Last Name" required>
              <div class="invalid-feedback">
                Please provide a valid last name.
              </div>
            </div>
          </div>
          <div class="form-group row">
            <label for="student_email" 
                   class="col-sm-3 col-form-label-lg">Email</label>
            <div class="col-sm-8">
              <input type="email" class="form-control" 
                     id="student_email" 
                     name="student_email"
                     placeholder="Email" required>
              <div class="invalid-feedback">
                Please provide a valid email address.
              </div>
            </div>
          </div>
          <button class="btn btn-primary" type="submit" 
                  name="add_student_submission">Add Student</button>
        </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 to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = 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>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
            integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
            integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
            crossorigin="anonymous"></script>
  </body>
</html>