Merge branch 'master' into Bug37-Dmytro

Fixed merge commits
Added password pattern: https://www.w3schools.com/howto/howto_js_password_validation.asp
Validating to make password  one and two similar:
https://stackoverflow.com/questions/9142527/can-you-require-two-form-fields-to-match-with-html5
Fixed Button and HTML Tags for text in login and registration form

Courses.php

@@ -7,19 +7,18 @@ include 'NoDirectPhpAcess.php';
 $page = 'Courses';
 include 'Header.php';
 
+echo "<main role='main' class='container bg-white' style='margin-top: 20px;'>";
+
 $user_d = $_SESSION['user_id'];
 
 if ($_SESSION['user_type'] == "Lecturer" || $_SESSION['user_type'] == "TA") {
-?>
+    ?>
+
 
         <!--    FOR LECTURER-->
  
         <div class="row" style="width:80%;margin:auto; text-align:left;">
 
-        <script src="./css/jquery-1.11.1.min.js"></script>
-        <script src="./css/jquery-ui.min.js"></script>
-        <link rel="stylesheet" href="./css/jquery-ui.css" />
-
                 <script>
                 function extend_deadline(id) {
 
@@ -30,12 +29,12 @@ if ($_SESSION['user_type'] == "Lecturer" || $_SESSION['user_type'] == "TA") {
                         $('<form id="frm" method="get" action="Script.php">\n\
                             <input type="hidden" name="extenddeadline" value="true" >\n\
                             <input type="hidden" name="id" value="' + id + '" > \n\
-New Date/Time <br><input type="date" name="date" required=""> <input type="time" name="time" required=""> \n\
+                            New Date/Time <br><input type="date" name="date" required=""> <input type="time" name="time" required=""> \n\
                             \n\
-<br><input type="radio" value="1" name="type" required=""> Extend for All<hr>  \n\
-<input type="radio" value="2" name="type" required=""> Extend for these Individual Students \n\
+                            <br><input type="radio" value="1" name="type" required=""> Extend for All<hr>  \n\
+                            <input type="radio" value="2" name="type" required=""> Extend for these Individual Students \n\
                             ' + dropstudents + '   \n\
-</form>').dialog({
+                            </form>').dialog({
                                 modal: true,
                                 title: 'Extend Deadline',
                                 buttons: {
@@ -82,7 +81,7 @@ New Date/Time <br><input type="date" name="date" required=""> <input type="time"
                             <div class='alert> <a href='~\..\Courses.php?course=$url'>   <div class='panel'>
                             ($code) - $name 
                             <br> <span style='font-size:8pt'>Faculty: $faculty | Year: $academic | Lecturer: $lecturer </span>
-</div></a>
+                            </div></a>
                             <hr></div></div> <div class='row' style='width:80%;margin:auto; text-align:left;'>
                             ";
 
@@ -259,6 +258,7 @@ New Date/Time <br><input type="date" name="date" required=""> <input type="time"
                 if (mysqli_num_rows($result) == 0) {
                     echo "No assignments posted so far.";
                 } else {
+                    echo "<div class='row'><div class='col-sm-6'>";
                     while ($row = mysqli_fetch_assoc($result)) {
                         $marks = $row['Marks'];
                         $title = $row['Title'];
@@ -275,14 +275,14 @@ New Date/Time <br><input type="date" name="date" required=""> <input type="time"
                         $full_link = "<a href='~\..\Lab_Report_Assignments\\$att1'>$att1</a>";
 
                         if ($att2 != "") {
-                        $full_link = $full_link . " &nbsp|&nbsp <a href='~\..\Lab_Report_Assignments\\$att2'>$att2</a>";
+                            $full_link = $full_link . " <a class='card-link' href='~\..\Lab_Report_Assignments\\$att2'>$att2</a>";
                         }
                         if ($att3 != "") {
-                        $full_link = $full_link . " &nbsp|&nbsp <a href='~\..\Lab_Report_Assignments\\$att3'>$att3</a>";
+                            $full_link = $full_link . " <a class='card-link' href='~\..\Lab_Report_Assignments\\$att3'>$att3</a>";
                         }
 
                         if ($att4 != "") {
-                        $full_link = $full_link . " &nbsp; | &nbsp <a href='~\..\Lab_Report_Assignments\\$att4'>$att4</a>";
+                            $full_link = $full_link . " <a class='card-link' href='~\..\Lab_Report_Assignments\\$att4'>$att4</a>";
                         }
 
                         $resultx1 = mysqli_query($con, "Select Count(*) as cnt from lab_report_submissions where lab_report_submissions.Lab_Report_ID=$id");
@@ -301,23 +301,42 @@ New Date/Time <br><input type="date" name="date" required=""> <input type="time"
 
                         $header = "Courses > " . $name . "($code) > Assignments > " . $title;
  
-                    echo "      <div class='break-word btn btn-default' style='word-wrap: break-word;border-color:grey;'>
-  $title ($as_type) <br> $ins
 
-   <br> <span style='font-size:8pt'>Posted : $posted  Deadline :  <b> $deadline </b> &nbsp; ($marks Marks)      &nbsp;    &nbsp; &nbsp; &nbsp; &nbsp;   "
-                        . "<br>"
+                        echo"<div class='card' style='width: 18rem;'> 
+                              <div class='card-body'>
+                                <h5 class='card-title'>$title ($as_type)</h5>
+                                <p class='card-text'>$ins</p>
+                              </div>
 
-                        . "<span class='btn-default'> &nbsp;&nbsp; $count_subs Submissions ( $count_marked Marked ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='Courses.php?course=" . $url . "&act=edit&cid=" . $id . "'>Edit</a>&nbsp;&nbsp; |&nbsp;&nbsp;<a href='~\..\Submissions.php?id=$id&header=$header&total=$marks' onclick=''> View </a>     &nbsp;&nbsp; |&nbsp;&nbsp;         <a href='#'  onclick='extend_deadline($id)'> Extend Deadline </a>  </span>         <hr> Attachments : $full_link </span>"
-                        . "&nbsp;&nbsp;</div>
-                        ";
+                              <ul class='list-group list-group-flush'>
+                                <li class='list-group-item'>Posted : $posted</li>
+                                <li class='list-group-item'>Deadline : <b> $deadline </b></li>
+
+                                <li class='list-group-item'>
+                                <div class='dropdown show'>
+                                  <a class='btn btn-secondary dropdown-toggle'  id='dropdownMenuLink' data-toggle='dropdown'  >
+                                    Action
+                                  </a>
+                                  <div class='dropdown-menu' aria-labelledby='dropdownMenuLink'>
+                                    <a class='dropdown-item' href='Courses.php?course= $url &act=edit&cid= $id' >Edit</button>
+                                    <a class='dropdown-item' href='~\..\Submissions.php?id=$id&header=$header&total=$a' onclick='' >View action</a>
+                                    <a class='dropdown-item' href='#' onclick='extend_deadline($id)'>Extend Deadline</a>
+                                  </div>
+                                </div>
+                                </li>  
+                              </ul>
+                              <div class='card-body'>
+                                $full_link
+                              </div>
+                            </div> ";
                     }
                 }
-            echo "</div>";
+                echo "</div></div></div>";
 
                 $resultx1 = mysqli_query($con, "SELECT course_students_table.Student_ID,users_table.Full_Name FROM 
-`course_students_table`
-INNER JOIN users_table on users_table.Student_ID=course_students_table.Student_ID
-WHERE Course_ID=$course_id");
+                    `course_students_table`
+                    INNER JOIN users_table on users_table.Student_ID=course_students_table.Student_ID
+                    WHERE Course_ID=$course_id");
 
                 echo "<span id='dropstudents' style='display:none;'> <select name='stdid'>";
                 while ($row = mysqli_fetch_assoc($resultx1)) {
@@ -343,7 +362,7 @@ WHERE Course_ID=$course_id");
                 echo    "  <div class='alert' style='margin-left:20px;border-bottom:2px solid #1D91EF;'> <a href='~\..\Courses.php?course=$url'>
                 Course Portal  > $user_name (Lecturer) > Course Listing
                 <br> <span style='font-size:8pt'> </span>
-</a></div>
+                </a></div>
                 ";
 
                 $result = mysqli_query($con, "SELECT `Course_ID`, `Course_Name`, `Academic_Year`, `Faculty`, "
@@ -352,13 +371,15 @@ WHERE Course_ID=$course_id");
                 if ($_SESSION['user_type'] == "TA") {
                     $result = mysqli_query($con, "SELECT course_ta.Course_ID, `Course_Name`, 
                       `Academic_Year`, `Faculty`, `Lecturer_User_ID`, `TA_User_ID`, `Course_Code`, `URL`, `Verify_New_Members`   FROM `courses_table` 
-INNER JOIN 
-course_ta ON course_ta.Course_ID=courses_table.Course_ID where course_ta.TA=$user_d");
+                      INNER JOIN 
+                      course_ta ON course_ta.Course_ID=courses_table.Course_ID where course_ta.TA=$user_d");
                 }
             // $result = mysqli_query($con,"SELECT `Course_ID`, `Course_Name`, `Academic_Year`, `Faculty`, `Lecturer_User_ID`, `TA_User_ID`, `Course_Code`, `URL`, `Verify_New_Members`   , users_table.Full_Name  FROM `courses_table` INNER JOIN users_table ON users_table.User_ID=courses_table.Lecturer_User_ID");
 
                 if (mysqli_num_rows($result) == 0) {
                 } else {
+                     
+                        echo "<div class='list-group'>";
                     while ($row = mysqli_fetch_assoc($result)) {
                         $id = $row['Course_ID'];
                         $name = $row['Course_Name'];
@@ -369,8 +390,8 @@ course_ta ON course_ta.Course_ID=courses_table.Course_ID where course_ta.TA=$use
                         $url = $row['URL'];
 
                         $resultTA = mysqli_query($con, "SELECT `Course_ID`, `TA`,users_table.Full_Name as TA_NAME FROM `course_ta`
-INNER JOIN users_table on users_table.User_ID=course_ta.TA
-where course_ta.Course_ID=$id");
+                            INNER JOIN users_table on users_table.User_ID=course_ta.TA
+                            where course_ta.Course_ID=$id");
 
                         $ta = "";
                         while ($rowTA = mysqli_fetch_assoc($resultTA)) {
@@ -378,15 +399,17 @@ where course_ta.Course_ID=$id");
                         }
 
                         echo "    
-                  
-                         <a href='~\..\Courses.php?course=$url'>   <div class='btn btn-default'>
-  ($code) - $name 
-   <br> <span style='font-size:8pt'>Faculty : $faculty &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Year :  $academic  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Lecturer  :$lecturer  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  TA:$ta </span>
-</div></a>
-                        ";
+                        <a href='~\..\Courses.php?course=$url' class='list-group-item list-group-item-action flex-column align-items-start'>
+                            <div class='d-flex w-100 justify-content-between'>
+                              <h5 class='mb-1'>($code) - $name </h5> 
+                            </div>
+                            <p class='mb-1'>Faculty : $faculty   Year :  $academic   Lecturer  :$lecturer    TA:$ta </p> 
+                        </a> ";
                     }
+
                 } ?>
             </div>
+            </div>
             <div class="col-md-4">
                 <br>
                 <b> Course Joining Requests </b>
@@ -394,9 +417,9 @@ where course_ta.Course_ID=$id");
                 <?php
                 $lecturer_id = $_SESSION['user_id'];
                 $result = mysqli_query($con, "SELECT  course_students_table.ID,users_table.Full_Name,  courses_table.Course_ID, `Course_Name`, `Academic_Year`, `Faculty`, `Lecturer_User_ID`, `TA_User_ID`, `Course_Code`, `URL`, `Verify_New_Members` FROM `courses_table` 
-INNER JOIN course_students_table on  course_students_table.Course_ID=courses_table.Course_ID
-INNER JOIN users_table on users_table.Student_ID=course_students_table.Student_ID
-WHERE  Lecturer_User_ID=$lecturer_id and course_students_table.Status='Pending'");
+                    INNER JOIN course_students_table on  course_students_table.Course_ID=courses_table.Course_ID
+                    INNER JOIN users_table on users_table.Student_ID=course_students_table.Student_ID
+                    WHERE  Lecturer_User_ID=$lecturer_id and course_students_table.Status='Pending'");
 
                 if (mysqli_num_rows($result) == 0) {
 
@@ -414,7 +437,7 @@ WHERE  Lecturer_User_ID=$lecturer_id and course_students_table.Status='Pending'"
                         echo "<div class='btn btn-default'>
                         $std_name is Requesting to join <br> [($code) - $name ] &nbsp;&nbsp;&nbsp;&nbsp; <br><a href='~\..\Script.php?AcceptStudent=y&id=$id&rs=yes' class='btn-sm btn-success' onclick=return confirm(\"are you sure to join this course?\")' > Accept </a>
                         &nbsp;&nbsp;<a href='~\..\Script.php?AcceptStudent=y&id=$id&rs=no' class='btn-sm btn-danger' onclick=return confirm(\"are you sure to join this course?\")' > Decline </a>                     
-</div>";
+                        </div>";
                     }
                 }
                 ?>
@@ -463,30 +486,69 @@ WHERE  Lecturer_User_ID=$lecturer_id and course_students_table.Status='Pending'"
             <!--   END LECTURER   -->
 
             <?php
-}
+        }
 
-if ($_SESSION['user_type'] == "Student") {
+        if ($_SESSION['user_type'] == "Student") {
             ?>
 
             <!--STUDENT CODE-->
-        <div class="row" style="width:80%;margin:auto; text-align:left;">
+            <div class="row">
+                <div class='col-md-1'></div> 
                 <div class="col-md-6">
                     <br> Course Portal > Students <br>
                     <?php
 
                     error_reporting(0);
                     if (isset($_SESSION['info_Courses_student'])) {
-                    echo '<hr><span class="alert alert-success" role="alert">' . $_SESSION['info_Courses_student'] . '</span>';
+                        echo '<hr><p class="alert alert-success" role="alert">' . $_SESSION['info_Courses_student'] . '</p>';
                         $_SESSION['info_Courses_student'] = null;
                     }
                     ?>
                     <br><br>
                 </div>
-            <div class="col-md-6"></div>
+                <div class="col-md-5"></div>
+            </div> 
+
+            <div class="p-4 my-4 bg-purple rounded shadow-sm"> 
+     
+                <div class="col-md-12">
+                <?php
+                    echo " 
+
+                    <form method='get' action='Courses.php'>
+ 
+                    <div class='form-row'>
+                        <div class='form-group col-md-6'>
+                            <input type='text' class='form-control' name='search'  aria-label='Enter Course Code' placeholder='Enter Course Code'>
+                        </div>
+                        <div class='form-group col-md-4'> 
+                            <select name='faculty' class='form-control' aria-label='Search by'><option selected value='' >Search by Faculty</option>";
+                            $result = mysqli_query($con, "SELECT   DISTINCT(Faculty) as Faculty FROM `courses_table`");
+                            if (mysqli_num_rows($result) == 0) {
+                            } else {
+                                while ($row = mysqli_fetch_assoc($result)) {
+                                    $fname = $row['Faculty'];
+
+                                    echo "<option value='$fname'>Faculty $fname </option>";
+                                }
+                            }
+
+                            echo "</select>
+                        </div>
+
+
+                        <div class='form-group col-md-2'>
+                            <button class='btn btn-primary' type='submit' >Find</button> 
+                        </div>  
+
+                    </div> 
+                    </form>";
+                }
+
+                ?>
+                </div>
             </div>
   
-        <div class="row" style="width:80%;margin:auto; text-align:left;">
-            <div class="col-md-6">
  
                     <?php
                     error_reporting(0);
@@ -496,21 +558,24 @@ if ($_SESSION['user_type'] == "Student") {
                         $faculty = $_GET["faculty"];
 
                         if ($faculty == "") {
-                    echo "<h4> Search Results for Course Code $search</h4><hr>";
+                            echo "<div class='my-3 p-3 bg-body rounded shadow-sm'>  <div class='row' >    <div class='col-md-12'> ";
+                            echo "<h4 class='border-bottom pb-2 mb-0'> Search Results for Course Code $search</h4>";
                             $result = mysqli_query($con, "SELECT `Course_ID`, `Course_Name`, `Academic_Year`, `Faculty`,"
                                 . " `Lecturer_User_ID`, `TA_User_ID`, `Course_Code`, `URL`, `Verify_New_Members`  "
                                 . " , users_table.Full_Name  FROM `courses_table` INNER JOIN users_table"
                                 . " ON users_table.User_ID=courses_table.Lecturer_User_ID where Course_Code like '%{$search}%' and courses_table.Course_ID not in (select course_id from course_students_table where Student_ID=$student_id)");
                         } else {
-                    echo "<h3> Find Courses under faculty $faculty</h3>";
+                            echo "<div class='my-3 p-3 bg-body rounded shadow-sm'>  <div class='row' >    <div class='col-md-12'> ";
+                            echo "<h3 class='border-bottom pb-2 mb-0'> Find Courses under faculty $faculty</h3>";
                             $result = mysqli_query($con, "SELECT `Course_ID`, `Course_Name`, `Academic_Year`, `Faculty`,
                              `Lecturer_User_ID`, `TA_User_ID`, `Course_Code`, `URL`, `Verify_New_Members` 
                              , users_table.Full_Name  FROM `courses_table` INNER JOIN users_table
                              ON users_table.User_ID=courses_table.Lecturer_User_ID where Faculty='$faculty'  and courses_table.Course_ID not in (select course_id from course_students_table where Student_ID=$student_id)");
                         }
 
+               echo "<div class='row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3'>";
                         if (mysqli_num_rows($result) == 0) {
-                    echo "No results found for your Search <hr>";
+                            echo "<h5>No results found for your Search <h5><hr>";
                         } else {
 
                             while ($row = mysqli_fetch_assoc($result)) {
@@ -528,25 +593,52 @@ if ($_SESSION['user_type'] == "Student") {
                                     $msg2 = "Send Joining Request";
                                 }
 
-                        echo "<div class='btn btn-default' style='word-wrap:break-word'>
-  [$code] $name <br>($url) <br>  <a href='~\..\Script.php?JoinCourse=y&id=$id&std=$student_id&joining=$v' class='btn-sm btn-success' onclick=return confirm(\"Are you sure to join this course?\")' > $msg2 </a>
-   <br> <span style='font-size:10pt'>Faculty: $faculty | Year: $academic | Lecturer: $lecturer </span><br>$msg</div>
-                        ";
-                    }
+                                 echo "<div class='col'> 
+                                        <div class='card'>  
+                                            <div class='card-header'>
+                                                <ul class='nav nav-pills card-header-pills'>
+                                                  <li class='nav-item'>
+                                                    <h5 class='nav-link'> $name </h5>
+                                                  </li>
+                                                  <li class='nav-item'>
+                                                    <p class='nav-link'>$msg</p>
+                                                  </li> 
+                                                </ul> 
+                                            </div>
+                                            <div class='card-body'>
+                                              <h5 class='card-title'>$code</h5> 
+                                              <p class='card-text'> $academic</p>
+                                              <p class='card-text'>$faculty</p>
+                                              <p class='card-text'>$lecturer</p>
+                                              <a href='~\..\Script.php?JoinCourse=y&id=$id&std=$student_id&joining=$v' onclick=return confirm(\"Are you sure to join this course?\")' class='btn btn-success'>Open</a>
+                                            </div>
+                                        </div>
+                                      </div>";
+ 
                             }
                         }
 
-            echo "<h4> My Courses </h4>";
+               echo "</div>";
+                    }
+                    ?>
+</div>
+</div>
+</div>
+
+<div class="my-3 p-3 bg-body rounded shadow-sm">
+    <h4 class="border-bottom pb-2 mb-0"> My Courses </h4>
+        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"> 
+                    <?php 
                     $result = mysqli_query($con, "SELECT users_table.Full_Name, course_students_table.Status, courses_table.Course_ID, `Course_Name`, `Academic_Year`, `Faculty`, `Lecturer_User_ID`, `TA_User_ID`, `Course_Code`, `URL`, `Verify_New_Members` FROM `courses_table`
-INNER JOIN users_table
+                        INNER JOIN users_table
                         ON users_table.User_ID=courses_table.Lecturer_User_ID
 
-INNER JOIN course_students_table on course_students_table.Course_ID=courses_table.Course_ID
+                        INNER JOIN course_students_table on course_students_table.Course_ID=courses_table.Course_ID
 
                         where course_students_table.Student_ID=$student_id");
 
                     if (mysqli_num_rows($result) == 0) {
-                echo "<i class='fa fa-exclamation-circle'></i> You are not Enrolled in any Course";
+                        echo "<h4><i class='fa fa-exclamation-circle'></i> You are not Enrolled in any Course</h4>";
                     } else {
                         while ($row = mysqli_fetch_assoc($result)) {
                             $name = $row['Course_Name'];
@@ -558,59 +650,62 @@ INNER JOIN course_students_table on course_students_table.Course_ID=courses_tabl
                             $id = $row['Course_ID'];
                             $Status = $row['Status'];
 
+                    ?>
+          
+             <?php 
                             if ($Status == "Joined") {
-                        echo "<a href='~\..\Course.php?url=$url'>   <div class='btn btn-default' style='word-wrap:break-word'>
-  ($code) - $name <br>($url)       &nbsp;&nbsp;&nbsp; <i class='fa fa-check-circle'></i> $Status   &nbsp;&nbsp;&nbsp;&nbsp; <a href='~\..\Course.php?url=$url' class='btn-sm btn-primary'> Open</a>
-   <br> <span style='font-size:8pt'>Faculty : $faculty  Year :   $academic  Lecturer  :$lecturer </span></div></a>
-                        ";
-                    } else {
-                        echo "<div class='btn btn-default'>
-  ($code) - $name  <i class='btn-sm btn-danger'> $Status</i>
-   <br> <span style='font-size:8pt'>Faculty : $faculty  Year :   $academic  Lecturer  :$lecturer </span></div>
-                        ";
-                    }
-                }
-            }
-
-            echo "</div><div class='col-md-6'>
-    
-        <form method='get' action='Courses.php'>
-            <div class='row'> 
-            <div class='col-md-10'> 
-            <div class='row'><div class='col-md-6'> Find course by Code
-            <input  type='text' class='form-control' name='search' placeholder='Enter Course Code'>
-            </div><div class='col-md-6'>
-List courses by faculty
-
-<select name='faculty' class='form-control'>";
-            $result = mysqli_query($con, "SELECT   DISTINCT(Faculty) as Faculty FROM `courses_table`");
-            if (mysqli_num_rows($result) == 0) {
-            } else {
-                while ($row = mysqli_fetch_assoc($result)) {
-                    $fname = $row['Faculty'];
-
-                    echo "<option value=''> Search by faculty </option> <option value='$fname'> $fname </option>";
-                }
-            }
-
-            echo "</select></div></div>
-
-</div>
-                 <div class='col-md-1'> <br>
-            <input type='submit' class='btn btn-primary' value='Find'>
+                                echo "<div class='col'> 
+                                        <div class='card'>  
+                                            <div class='card-header'>
+                                                <ul class='nav nav-pills card-header-pills'>
+                                                  <li class='nav-item'>
+                                                    <h5 class='nav-link'> $name </h5>
+                                                  </li>
+                                                  <li class='nav-item'>
+                                                    <p class='nav-link bg-success'><i class='fa fa-check-circle'></i> $Status</p>
+                                                  </li> 
+                                                </ul> 
                                             </div>
-       
+                                            <div class='card-body'>
+                                              <h5 class='card-title'>$code</h5> 
+                                              <p class='card-text'> $academic</p>
+                                              <p class='card-text'>$faculty</p>
+                                              <p class='card-text'>$lecturer</p>
+                                              <a href='~\..\Course.php?url=$url' class='btn btn-primary'>Open</a>
                                             </div>
-        </form>
+                                            </div>
+                                      </div>";
+                            } else { 
 
-    </div></div>";
+                               echo "<div class='col'> 
+                                        <div class='card'>  
+                                            <div class='card-header'>
+                                                <ul class='nav nav-pills card-header-pills'>
+                                                  <li class='nav-item'>
+                                                    <h5 class='nav-link'> $name </h5>
+                                                  </li>
+                                                  <li class='nav-item'>
+                                                    <p class='nav-link btn-danger'><i class='fa fa-check-circle'></i> $Status</p>
+                                                  </li> 
+                                                </ul> 
+                                            </div>
+                                            <div class='card-body'>
+                                              <h5 class='card-title'>$code</h5> 
+                                              <p class='card-text'> $academic</p>
+                                              <p class='card-text'>$faculty</p>
+                                              <p class='card-text'>$lecturer</p> 
+                                            </div>
+                                        </div>
+                                      </div>";
+ 
+                            }
+                        }
                     }
 
                     ?>
+        </div>
+    </div>
+</div>
   
-            <style>
-                .form-control {
-                    padding-top: 1px;
-                    padding-bottom: 1px;
-                }
-            </style>
+
+</main>

Footer.php

@@ -1,4 +1,9 @@
-<br><br><br><br><br><br><br><br><br>
-<div style="background-color:white;width:100%di">
  
-</div>
+ <footer class="footer bg-primary">
+      <div class="container text-light"> 
+        <p >LRR was originally developed as a <a href="http://lanlab.org/course/2018f/se/homepage.html" style="color:white;">Software engineering course project</a> by Mohamed Nor and Elmahdi Houzi.  Please submit your suggestions or bug reports to  lanhui _at_ zjnu.edu.cn.  Last updated on 18/04/2020 by Ashly. <a href="./homepage" style="color:white;">More information ...</a></p> 
+      <small>© 2018 Copyright: <a href="http://lanlab.org/">lanlab.org</a></small>
+      </div>
+    </footer>
+  
+ 

Header.php

@@ -19,137 +19,37 @@ if (mysqli_connect_errno()) {
 
 <head>
  
-  <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" />
-  <link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
-  <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
+  <link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /><!-- Font-awesome CSS -->
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><!-- Bootstrap CSS -->
+
+  <link href="./css/Styles.css" rel="stylesheet" type="text/css" />
 
   <script src="./css/jquery.min.js" type="text/javascript"></script>
-  <script src="./css/bootsrap.min.js" type="text/javascript"></script>
+  <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+  
   <script src="./css/jquery.datetimepicker.min.js" type="text/javascript"></script>
-
-</head>
-
-<body>
-
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="padding-left:150px;padding-right:150px;margin:auto;">
-    <a class="navbar-brand" href="~\..\index.php"> <img src="logo.png" style="width:30px;height:30px;"> LRR </a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-
-    <div class="collapse navbar-collapse" id="navbarColor02">
-      <ul class="navbar-nav mr-auto">
-        <li class="nav-item active">
-
-        <li class="nav-item active">
-          <!-- <a class='nav-link' href='~\..\Visitors.php'>     <i class='fa fa-globe'></i>  Visitor Portal <span class='sr-only'>(current)</span></a> -->
-        </li>
-        <?php
-        if (isset($_SESSION["user_fullname"])) {
-
-          echo "       <a class='nav-link' href='~\..\Courses.php'><i class='fa fa-book'></i> Courses <span class='sr-only'>(current)</span></a>";
-        ?>
-          </li>
-      </ul>
-      <form class="form-inline my-2 my-lg-0" style="color:#fff;">
-        Welcome &nbsp; <b> <?php echo $_SESSION['user_fullname']; ?> </b> &nbsp;
-
-        <?php
-          $c_date =  date("Y-m-d H:i");
-          if (isset($_SESSION['user_student_id']))
-            echo "(" . $_SESSION['user_type'] . " - " . $_SESSION['user_student_id'] . ")   ";
-          else
-            echo "(" . $_SESSION['user_type'] . ")   ";
-        ?>
-
-        <?php
-          if ($_SESSION['user_type'] == "Lecturer") {
-            echo  "&nbsp;&nbsp;&nbsp;  <i class=\"fa fa-cog\" style=\"color:#fff;\"> </i> &nbsp;<a style='color:#fff !important' href=\"~\..\Admin.php\">Admin </a>";
-          }
-        ?>
-
-        &nbsp;&nbsp;&nbsp; <i class="fa fa-user" style="color:#fff;"> </i>
-        &nbsp;<a href="#" style='color:#fff !important' onclick="updatePass(<?php echo $_SESSION['user_id']; ?>)">Update password</a>
-        &nbsp;&nbsp;&nbsp; <i class="fa fa-lock" style="color:#fff;"> </i> &nbsp;<a style='color:#fff !important' href="~\..\logout.php">Logout </a>
-
-      <?php
-        }
-      ?>
-      </form>
-    </div>
-  </nav>
+  <script src="./js/CustomDropdown.js" type="text/javascript"></script>
  
     <style>
-    .nav-item {
-      border-color: #00ff66;
+      .bd-placeholder-img {
+        font-size: 1.125rem;
+        text-anchor: middle;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
       }
 
-    .nav-tabs {
-      border-color: #00ff66;
+      /*Rule to include a block of CSS properties only if a certain condition is true.*/
+      /*https://www.w3schools.com/css/css_rwd_mediaqueries.asp*/
+      @media (min-width: 768px) {
+        .bd-placeholder-img-lg {
+          font-size: 3.5rem;
         }
-
-    .btn-default {
-      border: 2px solid #00ff66;
-      width: 100%;
-      text-align: left;
-      margin: 3px auto;
-      font-weight: bold;
-      font-size: 13pt;
-    }
-
-    .table-bordered {
-      padding: 5px !important;
-    }
-
-    .alert {
-      font-weight: bold;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4 {
-      color: #03407B;
-    }
-
-    a {
-      color: #03407B;
-    }
-
-    .break-word {
-      word-wrap: break-word;
-      white-space: -moz-pre-wrap !important;
-      /* Mozilla, since 1999 */
-      white-space: -pre-wrap;
-      /* Opera 4-6 */
-      white-space: -o-pre-wrap;
-      /* Opera 7 */
-      white-space: pre-wrap;
-      /* css-3 */
-      word-wrap: break-word;
-      /* Internet Explorer 5.5+ */
-      white-space: -webkit-pre-wrap;
-      /* Newer versions of Chrome/Safari*/
-      word-break: break-all;
-      white-space: normal;
-    }
-
-    .ui-widget-content.ui-dialog {
-      border: 2px solid #03488B;
-
-    }
-
-    .ui-dialog>.ui-widget-header {
-      background: #03488B;
-      color: white
-    }
-
-    .ui-button {
-      background: #03488B;
-      color: white
       }
     </style>
-
   <script>
     function updatePass(id) {
 
@@ -169,3 +69,72 @@ if (mysqli_connect_errno()) {
       window.location.href = "\Script.php\?action=statuschange&uid=" + id + "&status=" + status;
     }
   </script>
+</head>
+
+<body>
+
+ 
+<nav class="navbar navbar-expand-md navbar-dark bg-primary sticky-top">
+  <div class="container-fluid"> 
+    <a class="navbar-brand" href="~\..\index.php"> <img src="logo.png" width="30" height="30"> LRR </a>
+
+        <?php  
+          if (isset($_SESSION["user_fullname"])) 
+          { 
+        ?>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
+            <span class="navbar-toggler-icon"></span>
+            </button>
+
+        <?php
+          }
+        ?>
+
+    <div class="collapse navbar-collapse" id="navbarResponsive">
+      
+        <?php
+        if (isset($_SESSION["user_fullname"])) {
+          echo "<ul class=\"navbar-nav mr-auto\">";
+          echo "<li class=\"nav-item active\">";
+          echo "<a class='nav-link' href='~\..\Courses.php'><i class='fa fa-book'></i> Courses</a>";
+          echo "</li></ul>"; 
+        ?>
+        
+    <ul class="nav navbar-nav navbar-right">
+        <li class="nav-item">
+          <a class="nav-link text-light" href="#">Welcome <b> <?php echo $_SESSION['user_fullname']; ?> </b>
+
+          <?php
+            $c_date =  date("Y-m-d H:i");
+            if (isset($_SESSION['user_student_id']))
+              echo "(" . $_SESSION['user_type'] . " - " . $_SESSION['user_student_id'] . ")   ";
+            else
+              echo "(" . $_SESSION['user_type'] . ")   ";
+          ?>
+          </a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle text-light"  id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Menu </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <a href="#" class="dropdown-item" onclick="updatePass(<?php echo $_SESSION['user_id']; ?>)"><i class="fa fa-user ">Update passwor</i></a>
+           
+            <?php
+                if ($_SESSION['user_type'] == "Lecturer") {
+                  echo  "<a class=\"dropdown-item\" href=\"~\..\Admin.php\"><i class=\"fa fa-cog\" >Admin</i> </a>";
+                }
+              ?>  
+          </div>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link text-light" href="~\..\logout.php"><i class="fa fa-lock" > Logout</i> </a>
+        </li>
+      </ul>
+
+      <?php
+        }
+      ?>
+
+    </div>
+
+  </div>
+</nav> 

css/Styles.css

@@ -0,0 +1,15 @@
+/* Sticky footer styles
+-------------------------------------------------- */
+html {
+  position: relative;
+  min-height: 100%;
+}
+body {
+  margin-bottom: 100px; /* Margin bottom by footer height */
+}
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100px; /* Set the fixed height of the footer here */ 
+}

index.php

@@ -1,7 +1,7 @@
 <?php
-  $page='Home';
-  require 'Header.php';
-  session_start();
+$page='Home';
+require 'Header.php';
+session_start();
 ?>
 
 <?php
@@ -10,42 +10,40 @@ if (isset($_SESSION["user_fullname"])) {
     header("Location: Courses.php");
 }
 ?>
+<div class="album py-5 bg-white">
+        <div class="container bg-white">
 
-<br><br><br>
+          <div class="row align-items-center"> 
 
-<div class="row" style="width:85%;margin:auto;">
-  <div class="col-md-4">
-    <br><br>
-    <img src="logo.png" style="width:40%; position:relative; right:-95px; top:1px;">
-    <br><br>
-    <div style="width:20%; position:relative; right:-90px; font-family: Poppins-Regular;">
-    <h1>Lab Report Repository</h1>
-    <br><br>
+            <div class="col-md-6">
+              <div class="mb-6 box-shadow">
+                 <img class="mx-auto d-block" src="logo.png" />  
+                <div class="card-body">
+                  <h1 style="font-family: Poppins-Regular;">Lab Report Repository</h1>
                 </div>
               </div>
-    <br>
-    <div style = "position:relative; left:240px; top:-2px;">
+            </div> 
+
+            <div class="col-md-6">
+              <div class="card mb-6 box-shadow">
+                    <div class="card-header bg-primary" >  
                         <h4 class="list-group-item active" style="font-weight:normal;font-family: Poppins-Regular;"> Sign in </h4>
-    <div class="list-group-item">
-
-    <div class="panel-body">
-
+                    </div> 
+                 <div class="card-body">
                    <form  method="post" action="Script.php" name="frm_login">
                     <input type="hidden" name="frm_login" value="true"/>
-    Student ID / Instructor Email
+                    <p>Student ID / Instructor Email</p>
                     <input type="text" name="user" placeholder="Email / Student Number" class="form-control" required="required" />
                     <br>
-    Password
-    <input type="password" class="form-control"  name="password" placeholder="password" required="required" />
+                    <p>Password</p>
+                    <input type="password" class="form-control"  name="password" placeholder="Password" required="required" />
                     <div class="text-center">
-    <br><input type="submit" class="btn-primary" value="Login">
+                        <br><input type="submit" class="btn btn-primary my-2 btn-lg btn-block" value="Login">
                     </div>
-    <br> <a href="recover_password.php" style="font-weight:normal;color:#2471A3; font-family: Poppins-Regular;
-    font-size: 17px;">Reset my password</a>
+                    <br> <a href="recover_password.php">Reset my password</a>
                     <div class="text-center">
-    <br><span class="txt1">Don't have an account?</span>
-         <a class="txt2" href="signup.php" style="font-weight:normal">Sign Up</a>
-        </a>
+                        <br><span >Don't have an account?</span>
+                        <a href="signup.php" >Sign Up</a> 
                     </div> 
 
             <?php 
@@ -71,58 +69,19 @@ if (isset($_SESSION["user_fullname"])) {
             }
             ?>
  
-    </div>
                 </form>
                 </div>
-</div>
-</div>
-</div>
-
-</div>
-
-
-<div id="footer">
-    LRR was originally developed as a <a href="http://lanlab.org/course/2018f/se/homepage.html" style="color:white;">software engineering course project</a> by Mohamed Nor and Elmahdi Houzi.  Please submit your suggestions or bug reports to  lanhui _at_ zjnu.edu.cn.  Last updated on 18/04/2020 by Ashly. <a href="./homepage" style="color:white;">More information ...</a>
               </div>
+            </div> 
+          </div>
+        </div>
+      </div>
+
+<?php 
+require 'Footer.php'; 
+?>
 
 </body>
 
-<style>
-    /*------------------------------------------------------------------
-[ Login Button ]*/
-.btn-primary {
-            color: white;
-            border-radius: 5px;
-            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-            background: rgb(75, 184, 240);
-            padding:5px 100px;
-            font-family: Poppins-Regular;
-            font-size: 23px;
-            line-height: 1.5;
-        }
-
-#footer{
-position:fixed;
-bottom:0;
-left:0;
-background-color:#03417C;
-color:#FFF;
-text-align:center;
-width:100%;
-}
-.txt1 {
-  font-family: Poppins-Regular;
-  font-size: 18px;
-  line-height: 1.5;
-  color: #666666;
-}
-.txt2 {
-  font-family: Poppins-Regular;
-  font-size: 19px;
-  line-height: 1.5;
-  color: #2471A3;
-}
-
-</style>
 
 </html>

js/CustomDropdown.js

@@ -0,0 +1,9 @@
+$(document).ready(function(e){
+    $('.search-panel .dropdown-menu').find('a').click(function(e) {
+		e.preventDefault();
+		var param = $(this).attr("href").replace("#","");
+		var concept = $(this).text();
+		$('.search-panel span#search_concept').text(concept);
+		$('.input-group #search_param').val(param);
+	});
+});

signup.php

@@ -6,35 +6,37 @@ include 'NoDirectPhpAcess.php';
 include 'Header.php';
 ?>
 
-<div class="row">
+<div class="album py-5 bg-white">
+    <div class="container bg-white">
  
-    <div class="col-md-4 list-group" style="margin:auto;">
+    <div class="col-md-6 panel panel-primary" >
 
         <br>
 
         <h4 class="list-group-item active"> Please fill in each field below </h4>
         <div class="list-group-item">
 
-            <div class="panel-body">
+            <div class="panel panel-primary">
 
                 <form method="post" action="Script.php">
                     <input type="hidden" name="frm_signup_2" value="true" />
-                    Full Name
+                    <p>Full Name</p>
                     <input type="text" name="fullname" placeholder="Your full name" class="form-control" value="<?php echo $_SESSION['user_fullname']; ?>" required="required" />
 
-                    Student ID
+                    <p>Student ID</p>
                     <input type="text" name="user_student_id" placeholder="Entre your student ID" class="form-control" value="<?php echo $_SESSION['user_student_id']; ?>" required="required">
 
-                    Email
+                    <p>Email</p>
                     <input type="text" name="email" placeholder="Email" class="form-control" value="<?php echo $_SESSION['user_email']; ?>" required="required" />
 
-                    Password (<i>must include uppercase and lowercase letters, digits and special characters</i>)
-                    <input type="password" class="form-control" name="password" placeholder="Enter password" required="required" />
+                    <p>Password (<i>must include uppercase and lowercase letters, digits and special characters</i>)</p>
+                    <input id="password" type="password" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{4,}$" title="Password must have at least characters that include lowercase letters, uppercase letters, numbers and sepcial characters (e.g., !?.,*^)." class="form-control" name="password" placeholder="Enter password" required="required"  onchange="if(this.checkValidity()) form.password_two.pattern = this.value;" />
 
-                    Confirm Password
-                    <input type="password" class="form-control" name="confirmpassword" placeholder="Confirm password" required="required" />
+                    <p>Confirm Password</p>
+                    <input id="password_two" type="password" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{4,}$" title="Password must have at least characters that include lowercase letters, uppercase letters, numbers and sepcial characters" class="form-control" name="confirmpassword" placeholder="Confirm password" required="required" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '');" />
                     <br>
-                    <input type="submit" class="btn-primary" value="Sign up">
+
+                    <input type="submit" class="btn btn-primary" value="Sign up">
                     <?php
                     error_reporting(E_ALL);
                     if (isset($_SESSION['info_signup2'])) {
@@ -48,17 +50,5 @@ include 'Header.php';
         </div>
     </div>
 </div>
-<style>
-    /*------------------------------------------------------------------
-[ Login Button ]*/
-    .btn-primary {
-        color: white;
-        border-radius: 5px;
-        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-        background: rgb(75, 184, 240);
-        padding: 5px 105px;
-        font-family: Poppins-Regular;
-        font-size: 23px;
-        line-height: 1.5;
-    }
-</style>
+</div>
+