Skip to content

Student Listing - Details Page

Start out with a Bootstrap template and a Card, and a Link back to the Main Page

Again let's create a studentdetails.php script using a Bootstrap template and add a Card for our content

studentdetails.php - Student Details: 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>Student Details</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 Student Details

Within the innermost <div> tag, add a navigation link back to the main page

studentdetails.php - Student Details: Link back to Main Page

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
...
  <body>
    <div class="card">
      <div class="card-body">
        <a class="nav-link" href="index.php">Students</a>
      </div>
    </div>
    ...
  </body>
...

Only Display Student Details if Selects Student from Main Page

There are various ways one can navigate to the studentdetails.php script. But before we talk about that, let's head back over to the lecture notes to discuss the $_GET[] super global variable and how to use GET to identify the key-value pairs we are interested in.

The two ways to get to studentdetails.php are when a user selects one of the students on the main page and the student's ID is sent as a query parameter in an HTTP GET. The other way is for a user to just type studentdetails.php. This second way is an unintended use and we want to guard agains that. So, we need some logic to sort out what we want to do:

studentdetails.php - Student Details: Logic for Displaying Student Details Only when Student Selected from Main Page

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
...
  <body>
    <div class="card">
      <div class="card-body">
        <a class="nav-link" href="index.php">Students</a>

        <?php
            if (isset($_GET['id'])):

            else:
        ?>
        <h3>No Student Details :-(</h3>
        <?php
            endif;           
        ?>
      </div>
    </div>
    ...
  </body>
...

So, we'll do our query for the student's data and the display of the student's details all within the if (isset($_GET['id'])): condition.

First, add the query logic:

studentdetails.php - Student Details: Query Database for Student's Details

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
...
<?php
    if (isset($_GET['id'])):

        require_once('dbconnection.php');

        $id = $_GET['id'];

        $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 = "SELECT * FROM studentListing WHERE id = $id";

        $result = mysqli_query($dbc, $query)
                or trigger_error('Error querying database studentListing',
                E_USER_ERROR);
    else:
?>
<h3>No Student Details :-(</h3>
<?php
    endif;           
?>
...

Now let's add the code to display the student's details in a nice table if we get any results back:

studentdetails.php - Student Details: Display the Student's Details

 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
...
<?php
    if (isset($_GET['id'])):

        require_once('dbconnection.php');

        $id = $_GET['id'];

        $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 = "SELECT * FROM studentListing WHERE id = $id";

        $result = mysqli_query($dbc, $query)
                or trigger_error('Error querying database studentListing',
                E_USER_ERROR);

        if (mysqli_num_rows($result) == 1):

            $row = mysqli_fetch_assoc($result)
    ?>
<h1>ID: <?= $row['id'] ?></h1>
<table class="table table-striped">
  <tbody>
    <tr>
      <th scope="row">First Name</th>
      <td><?= $row['first_name'] ?></td>
    </tr>
    <tr>
      <th scope="row">Last Name</th>
      <td><?= $row['last_name'] ?></td>
    </tr>
    <tr>
      <th scope="row">Email</th>
      <td><?= $row['email'] ?></td>
    </tr>
  </tbody>
</table>        
    <?php
        else:
    ?>
<h3>No Student Details :-(</h3>
<?php
        endif;           
    else:
?>
<h3>No Student Details :-(</h3>
<?php
    endif;           
?>
...

Complete Code Listing

studentdetails.php - Student Details: 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
<html>
  <head>
    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
          crossorigin="anonymous">
    <title>Student Details</title>
  </head>
  <body>
    <div class="card">
      <div class="card-body">
        <nav class="nav">
          <a class="nav-link" href="index.php">Students</a>
        </nav>
        <?php
            if (isset($_GET['id'])):

                require_once('dbconnection.php');

                $id = $_GET['id'];

                $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 = "SELECT * FROM studentListing WHERE id = $id";

                $result = mysqli_query($dbc, $query)
                        or trigger_error('Error querying database studentListing',
                        E_USER_ERROR);

                if (mysqli_num_rows($result) == 1):

                    $row = mysqli_fetch_assoc($result)
            ?>
        <h1>ID: <?= $row['id'] ?></h1>
        <table class="table table-striped">
          <tbody>
            <tr>
              <th scope="row">First Name</th>
              <td><?= $row['first_name'] ?></td>
            </tr>
            <tr>
              <th scope="row">Last Name</th>
              <td><?= $row['last_name'] ?></td>
            </tr>
            <tr>
              <th scope="row">Email</th>
              <td><?= $row['email'] ?></td>
            </tr>
          </tbody>
        </table>        
            <?php
                else:
            ?>
        <h3>No Student Details :-(</h3>
        <?php
                endif;           
            else:
        ?>
        <h3>No Student Details :-(</h3>
        <?php
            endif;           
        ?>
      </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>