Department of Computing

CS-344: Web Engineering

Class: BSCS-10AB

Lab 11: Multipage Dynamic Web Development Using PHP

Instructor: Dr. Qaiser Riaz & Dr Mehdi Hussain

Name: Hassan Haroon

CMS: 339817

CS-344: Web Engineering Page 1

 Lab 11: Multipage Dynamic Web Development Using PHP

Introduction:
Students have learned the advanced concepts of PHP during lecture including CRUD operations
on a relational database management system, file handling, working with PHP super global
arrays such as $_SESSION, $_COOKIE etc. In this lab the students will get practical multipage
web development knowledge using the advanced PHP concepts.

Lab Objectives:
The objective of this lab is helping students to familiarize themselves with the usage of PHP to
create multipage dynamic websites by communicating with relational databases, working with
file upload/retrieval and display over a page, and using super global arrays such as $_SESSION
and $_COOKIE.

Tools:
Notepad, DreamWeaver, browser.

Helping Material:
Lecture slides.

W3Schools: https://www.w3schools.com/php/

PHP: www.php.net

Lab Task
Notes:

1. In the previous lab, you have already worked with the ‘classicmodels’ database. You
have to add a new column in the ‘employees’ table to store the path of the profile
picture of each employee. The name of the column should be ‘picPath’ and it should be
of type varchar (255).
2. Using phpMyAdmin, make sure that the ‘employees’ table is updated successfully and
you can see the new column.

Task 1
Extend the script you have created in the previous lab so that the employee’s picture is also
present in the table (in first column). To retrieve the picture, you have to find the path of the
picture from the ‘picPath’ column and then use this path in the ‘src’ attribute of the <img> tag.

CS-344: Web Engineering Page 2

 Make sure to control the width and height of the picture in order to avoid distortion of the
table due to large image size. If the ‘picPath’ column is blank i.e., user has not uploaded his
profile picture, then display a default picture instead. The picture should be clickable and click
on it should open the edit page. Use your aesthetic sense to create beautiful tables using CSS.
An example is given below

Emp Office Reports

  Name Email Job Title Update
Address To
100 Market
Street, Suite Diane
Mary
mpatterso@classicmodelcars.com VP Sales 300, San Murphy, Edit | Update
Patterson
Francisco, President
  CA, USA

100 Market
Street, Suite Diane
VP
Jeff Firrelli jfirrelli@classicmodelcars.com 300, San Murphy, Edit | Update
Marketing
Francisco, President
  CA, USA

Task 2
Extend the create and update employee scripts so that user can upload his/her profile picture
when creating or updating an employee. Any new record or any change in the record (update)
must be saved in the database.

Important links for file handling in PHP:

https://www.w3schools.com/php/php_file_upload.asp

https://www.w3schools.com/php/php_file_create.asp

https://www.w3schools.com/php/php_file_open.asp

https://www.w3schools.com/php/php_file.asp

Task 3
Use super global arrays $_SESSION and $_COOKIE appropriately e.g. to store user’s information
in the session or to write cookies to store any important thing which can be useful in future.

CS-344: Web Engineering Page 3

Note: Upload complete solutions (css, html, js, php) for each task in a single zip and
screenshots of your solutions in this word file.

Solution
Task 1:

<?php
    $query = "select * from employees";
    $data = mysqli_query($conn,$query);
    $total = mysqli_num_rows($data);

    if($total != 0)
  {
        while(($result = mysqli_fetch_assoc($data)))
    {
            if($result['picPath'] == NULL){
              echo '<tr><td style="text-align:center; cursor: pointer;"><img src="employeePics/Default.png"
width="150px" height="auto" class="edit"/></td>';
      }
            else{
              echo '<tr><td style="text-align:center; cursor: pointer;"><img src="'.$result['picPath'].'" width="150px"
height="auto" class="edit"/></td>';
      }
            echo "<td>".$result['employeeNumber']."</td>";
            echo "<td>".$result['lastName']."</td>";
            echo "<td>".$result['firstName']."</td>";
            echo "<td>".$result['extension']."</td>";
            echo "<td>".$result['email']."</td>";
            echo "<td>".$result['officeCode']."</td>";
            echo "<td>".$result['reportsTo']."</td>";
            echo "<td>".$result['jobTitle']."</td>";
            echo "<td><button class='edit btn btn-sm btn-primary'>Edit</button> <button class='delete btn btn-sm btn-
primary'>Delete</button></td></tr>";
    }
  }
    else {
        echo "No Records Found";
     }

CS-344: Web Engineering Page 4

     ?>
Task 1 screenshot:

Task 2:

 $employeeNumber = (int)$_POST["employeeNumber"];
    $lastName = $_POST["lastName"];
    $firstName = $_POST["firstName"];
    $extension = $_POST["extension"];
    $email = $_POST["email"];
    $officeCode = (int)$_POST["officeCode"];
    $reportsTo = (int)$_POST["reportsTo"];
    $jobTitle = $_POST["jobTitle"];
  
    // Image Upload Handling
    if(isset($_FILES['pic'])){
      // echo "<br><pre>";
      // print_r($_FILES['pic']);
      // echo "</pre><br>";

      // Image Array
      $img_name = $_FILES['pic']['name'];
      $img_size = $_FILES['pic']['size'];
      $tmp_name = $_FILES['pic']['tmp_name'];
      $error = $_FILES['pic']['error'];

CS-344: Web Engineering Page 5

       // If any Errors
      if($error === 0){
        if($img_size > 125000){
          $pic_error = true;
        header("Location: /lab11/Task1 and Task2");
    }
        else{
          $img_ex = strtolower(pathinfo($img_name, PATHINFO_EXTENSION));  // Stores Extension of file
          $allowed_exs = array("jpg", "jpeg", "png"); // Allowed Extensions

          if(in_array($img_ex,$allowed_exs)){
            $new_img_name = uniqid("EMP-",true).'.'.$img_ex;  // To Avoid Duplication of name
            $img_upload_path = 'employeePics/'. $new_img_name;  // Path
            move_uploaded_file($tmp_name,$img_upload_path); // Move form Temp folder to custom folder

            // Inserting into Database

     }
          else{
            $pic_error = true;
            //header("Location: /lab11/Task1 and Task2.php");
     }
    }
   }
      else{
        $pic_error = true;
        //header("Location: /lab11/Task1 and Task2");
   }
  }
    // else{
    //   header("Location: /lab11/Task1 and Task2");
    // }
if($pic_error == FALSE){
    $sql = "INSERT INTO `employees` (`picPath`, `employeeNumber`, `lastName`, `firstName`, `extension`, `email`,
`officeCode`, `reportsTo`, `jobTitle`) VALUES ('$new_img_name', '$employeeNumber', '$lastName', '$firstName',
'$extension', '$email', '$officeCode', '$reportsTo', '$jobTitle')";
    $result = mysqli_query($conn,$sql);
 }

   if($result){
        //echo "The record has been successfully entered";
        $insert = true;

CS-344: Web Engineering Page 6

   }
    else if($pic_error){
      echo "There is an error in File Upload";
  }
    else{
        echo "There is an error in insertion ----> ". mysqli_error($conn);
  }

Task 2 screenshot:

Adding and Employee

CS-344: Web Engineering Page 7

 Task 3:

SESSION CODE

</html>
<body>

<?php
session_start();
if (isset ($_SESSION["username"]) && isset ($_SESSION["username"]))
{
$username=$_SESSION["username"];
$userID=$_SESSION["userid"];
}
else
{
$userID=339817;
$username="Hassan Haroon";
$_SESSION["username"]=$username;
$_SESSION["userid"]=$userID;
}

echo '<h1 style="text-align:center; margin-top:500px"> Hello, '.$username.' , Welcome to

Session</h1>';
?>

<h3 style="text-align:center;">To see Your ID Visit <a href ="CookiesPage2.php">Next

Page</a><h3>

CS-344: Web Engineering Page 8

 </body>
</html>

Cookies Code

<?php
$cookie_name = "Admin";
$cookie_value = "Hassan Haroon";

setcookie ($cookie_name , $cookie_value, time() + (86400 * 30 ), "/");

?>
<html>
<body>

<?php
if (!isset ($_COOKIE [$cookie_name ]))
echo "Cookie name " . $cookie_name . " is not SET!";
 
else
{
echo "Cookie " . $cookie_name . " is SET! <br>";
echo "Value is: " . $_COOKIE[$cookie_name];
}

?>
</body>
</html>

Cookies Code 2

<html>
    <body>

<?php
session_start();
if (isset ($_SESSION["username"]) && isset ($_SESSION["username"]))
{
    $username = $_SESSION["username"];

CS-344: Web Engineering Page 9

     $userID = $_SESSION["userid"];
}

echo '<h1 style="text-align:center; margin-top:500px">So, '.$username.' You are coming from

\'Welcome Page\'';
echo '<h3 style="text-align:center;">Here is you userID \''.$userID.'\'';
?>
<br>
<h5 style="text-align:center;"><a href ="Session.php">Go Back</a></h5>

</body>
</html>

Task 3 screenshot:

Cookies Set

Session Start

Session Continue

CS-344: Web Engineering Page 10

Deliverables
Compile a single word document by filling in the solution part and submit this Word file with
code files on LMS. You must include your name, ID, and class on first page. The lab grading
policy is as follows: The lab is graded between 0 to 10 marks. For some of the labs, students
have to present their solutions in a viva session. In case of any problems with submissions on
LMS, you should contact your lab engineer Ms. Ayesha Asif.

CS-344: Web Engineering Page 11