rodude123/DIDS-Coursework
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finished of the ability to search for a name or plate number. Results shown as a table. Any empty's shown as N/A

Browse Source
This commit is contained in:
Rohit Pai 2022-11-29 15:48:18 +00:00
parent f03023a000
commit 7eefeaf7ad
12 changed files with 368 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/changePassword.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Password</title>
</head>
<body>
</body>
</html>

1
DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/login.css
View File

@ -1,4 +1,3 @@
@import "normalize.css";
@import "template.css"; @import "template.css";
body, html { body, html {

39
DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/nav.css Normal file
View File

@ -0,0 +1,39 @@
@import "template.css";
nav {
background-color: var(--primary);
}
nav ul {
list-style-type: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding: 1.5em 1em;
}
nav ul li {
padding: 0 1em;
}
nav ul li a {
color: #FFFFFF;
text-decoration: none;
}
nav ul li a.active, nav ul li a:hover {
padding: 1.4em 1.75em;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
nav ul li a:hover {
background: var(--mutedBlack);
}
nav ul li a.active {
background-color: var(--hover);
}

130
DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/search.css Normal file
View File

@ -0,0 +1,130 @@
@import "nav.css";
main {
padding-top: 2.5em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
div.searchContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
main form {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1em;
}
main#search form input:not([type="submit"]) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
width: auto;
}
main#search form button {
border-top-right-radius: 0.5em;
border-bottom-right-radius: 0.5em;
width: 20%;
height: 3em;
background-color: var(--primary);
border: none;
outline: none;
color: #FFFFFF;
cursor: pointer;
}
div.searchBtnContainer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
div.searchBtnContainer:hover input {
border: 4px solid var(--hover);
}
main#search div.searchBtnContainer:hover button {
background-color: var(--hover);
}
.selectDiv {
position: relative;
min-width: 300px;
cursor: pointer;
}
.selectDiv:before {
content: '';
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: -5px;
top: 13px;
padding: 0 0 2px;
position: absolute;
width: 46px;
background-color: var(--primary);
height: 30px;
border-top-right-radius: 0.5em;
border-top-left-radius: 0.5em;
}
.selectDiv:after {
content: '<>';
font: 18px "Consolas", monospace;
color: #FFFFFF;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 6px;
top: 18px;
padding: 0 0 2px;
position: absolute;
}
.selectDiv select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
display: block;
outline: none;
width: 100%;
max-width: 30em;
height: 3em;
float: right;
margin: 6px 0;
padding: 0 24px;
background-color: #ffffff;
background-image: none;
border: 4px solid var(--primary);
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
word-break: normal;
}
.selectDiv:hover select, .selectDiv select:hover {
border: 4px solid var(--hover);
}
.selectDiv:hover:before {
background-color: var(--hover);
}
.content {
margin-top: 3em;
}

43
DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/template.css
View File

@ -1,9 +1,10 @@
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&family=Yeseva+One&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&family=Yeseva+One&display=swap');
@import "normalize.css";
:root { :root {
--primary: hsla(220, 60%, 50%, 1); --primary: hsla(220, 60%, 50%, 1);
--hover: hsl(240, 50%, 22%); --hover: hsl(240, 50%, 22%);
--secondary: hsla(194, 52%, 67%, 1); --secondary: hsl(210, 100%, 95%, 1);
--accent: hsla(15, 99%, 57%, 1); --accent: hsla(15, 99%, 57%, 1);
--light: hsla(90, 8%, 85%, 1); --light: hsla(90, 8%, 85%, 1);
--mutedBlack: hsla(0, 0%, 0%, 0.25) --mutedBlack: hsla(0, 0%, 0%, 0.25)
@ -13,6 +14,11 @@
box-sizing: border-box; box-sizing: border-box;
} }
html, body {
padding: 0;
margin: 0;
}
body { body {
font-size: 1em; font-size: 1em;
font-weight: 400; font-weight: 400;
@ -27,7 +33,7 @@ h1, h2 {
.btn { .btn {
outline: none; outline: none;
border: none; border: none;
padding: 14px 28px; padding: 0.875em 1.75em;
cursor: pointer; cursor: pointer;
-webkit-border-radius: 1em; -webkit-border-radius: 1em;
-moz-border-radius: 1em; -moz-border-radius: 1em;
@ -39,6 +45,9 @@ h1, h2 {
color: #FFFFFF; color: #FFFFFF;
} }
.btnPrimary:hover {
background-color: var(--primary);
}
div.formControl { div.formControl {
display: flex; display: flex;
@ -49,7 +58,7 @@ div.formControl {
width: 100%; width: 100%;
} }
form .formControl input:not([type="submit"]), form .formControl textarea { input:not([type="submit"]), form .formControl textarea {
width: 100%; width: 100%;
border: 4px solid var(--primary); border: 4px solid var(--primary);
background: 0 0; background: 0 0;
@ -61,3 +70,31 @@ form .formControl input:not([type="submit"]), form .formControl textarea {
height: 3em; height: 3em;
} }
input:not([type="submit"]):hover, form .formControl textarea:hover {
border: 4px solid var(--hover);
}
table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid #DDDDDD;
padding: 0.5em;
min-width: 7.5em;
}
table tr:nth-child(even) {
background-color: var(--secondary);
}
table tr:hover {
background-color: #ddd;
}
table th {
padding: 0.75em 0;
text-align: left;
background-color: var(--primary);
color: #FFFFFF;
}

4
DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/index.html
View File

@ -12,7 +12,7 @@
<main> <main>
<div class="login"> <div class="login">
<h1>Login To Traffic Reporter</h1> <h1>Login To Traffic Reporter</h1>
<form class="loginForm" id="login"> <form method="POST" class="loginForm" id="login">
<div class="formControl"> <div class="formControl">
<label for="username">Username</label> <label for="username">Username</label>
<input type="text" name="username" id="username"> <input type="text" name="username" id="username">
@ -27,4 +27,4 @@
</main> </main>
<script src="js/login.js"></script> <script src="js/login.js"></script>
</body> </body>
</html> </html>

5
DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/login.js
View File

@ -6,8 +6,7 @@ document.querySelector("#login").addEventListener("submit", e =>
let formData = new FormData(); let formData = new FormData();
formData.append("username", document.querySelector("#username").value); formData.append("username", document.querySelector("#username").value);
formData.append("password", document.querySelector("#password").value); formData.append("password", document.querySelector("#password").value);
fetch("login.php", fetch("login.php", {
{
method: "POST", method: "POST",
body: formData body: formData
}).then(res => res.json().then(json => }).then(res => res.json().then(json =>
@ -18,7 +17,7 @@ document.querySelector("#login").addEventListener("submit", e =>
} }
else else
{ {
alert("Invalid username or password"); alert(json.message);
} }
})); }));

10
DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/reports.js
View File

@ -1,10 +0,0 @@
// document.addEventListener("DOMContentLoaded", () =>
// {
// fetch("isLoggedIn.php").then(res => res.json().then(json =>
// {
// if (json.message !== "ok")
// {
// window.location.href = "index.html";
// }
// }));
// });

66
DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/search.js Normal file
View File

@ -0,0 +1,66 @@
// document.addEventListener("DOMContentLoaded", () =>
// {
// fetch("isLoggedIn.php").then(res => res.json().then(json =>
// {
// if (json.message !== "ok")
// {
// window.location.href = "index.html";
// }
// }));
// });
document.querySelector("#searchType").addEventListener("change", e =>
{
if (e.target.value === "pn")
{
document.querySelector("#searchField").placeholder = "Find vehicle";
}
else
{
document.querySelector("#searchField").placeholder = "Find owner";
}
});
document.querySelector("#searchForm").addEventListener("submit", e =>
{
e.preventDefault();
let formData = new FormData();
formData.append("searchType", document.querySelector("#searchType").value);
formData.append("searchField", document.querySelector("#searchField").value);
fetch("search.php", {
method: "POST",
body: formData
}).then(res => res.json().then(json =>
{
if (json.message === "ok")
{
document.querySelector("#searchResults thead tr").innerHTML = "";
document.querySelector("#searchResults tbody").innerHTML = "";
console.log(Object.keys(json.data[0]));
Object.keys(json.data[0]).forEach(key =>
{
let header = key.substring(key.indexOf("_") + 1)
header = header.charAt(0).toUpperCase() + header.slice(1);
document.querySelector("#searchResults thead tr").innerHTML += `<th>${header}</th>`;
});
let body = "";
json.data.forEach(row =>
{
body += "<tr>";
Object.keys(row).forEach(key =>
{
body += `<td>${(row[key] === "null" || row[key] === null) ? "N/A" : row[key]}</td>`;
});
body += "</tr>";
});
document.querySelector("#searchResults tbody").innerHTML = body;
}
else
{
alert("No search results found");
}
}));
});

3
DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/login.php
View File

@ -10,8 +10,9 @@ $conn = dbConn();
$stmt = $conn->prepare("SELECT * FROM Users WHERE Users_username = :username AND Users_password = :password"); $stmt = $conn->prepare("SELECT * FROM Users WHERE Users_username = :username AND Users_password = :password");
$stmt->bindParam(":username", $username); $stmt->bindParam(":username", $username);
$stmt->bindParam(":password", $password); $stmt->bindParam(":password", $password);
$stmt->execute();
if ($stmt->execute()) if (count($stmt->fetchAll(PDO::FETCH_ASSOC)) > 0)
{ {
$_SESSION["username"] = $username; $_SESSION["username"] = $username;
echo json_encode(array("message" => "ok")); echo json_encode(array("message" => "ok"));

52
DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/search.html
View File

@ -2,27 +2,51 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Reports</title> <title>Search</title>
<link rel="stylesheet" href="css/search.css">
<script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
</head> </head>
<body> <body>
<nav> <nav>
<ul> <ul>
<li><a href="search.html">Search</a></li> <li><a href="search.html" class="btn active">Search</a></li>
<li><a href="newVehicle.html">Add new vehicle</a></li> <li><a href="newVehicle.html" class="btn">Add new vehicle</a></li>
<li><a href="newReport.html">Create new report</a></li> <li><a href="newReport.html" class="btn">Create new report</a></li>
<li><a href="newUser.html">Create new user</a></li> <li><a href="newUser.html" class="btn">Create new user</a></li>
<li><a href="addFines.html">Add Fines</a></li> <li><a href="addFines.html" class="btn">Add Fines</a></li>
<li><a href="viewLog.html">View log</a></li> <li><a href="viewLog.html" class="btn">View log</a></li>
<li><a href="#">Logout</a></li> <li><a href="changePassword.html">Change password</a></li>
<li><a href="#" class="btn">Logout</a></li>
</ul> </ul>
</nav> </nav>
<main> <main id="search">
<div class="search-container"> <div class="searchContainer">
<fom><input type="text"><input type="submit" value=""></fom> <form method="POST" id="searchForm">
<div class="selectDiv">
<select name="searchType" id="searchType">
<option value="dln">Name/Driving licence number</option>
<option value="pn">Plate Number</option>
</select>
</div>
<div class="searchBtnContainer">
<input type="text" id="searchField" name="searchField" placeholder="Find owner">
<button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
</div>
</form>
</div>
<div class="content">
<table id="searchResults">
<thead>
<tr>
</tr>
</thead>
<tbody></tbody>
</table>
</div> </div>
<div class="content"></div>
</main> </main>
<script src="js/reports.js"></script> <script src="js/search.js"></script>
</body> </body>
</html> </html>

39
DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/search.php Normal file
View File

@ -0,0 +1,39 @@
<?php
session_start();
require_once 'config.php';
if (isset($_SESSION["username"]))
{
$searchType = $_POST["searchType"];
$searchField = $_POST["searchField"];
$conn = dbConn();
if ($searchType === "dln")
{
$stmt = $conn->prepare("SELECT People_name, People_address, People_licence FROM People WHERE People_name LIKE :name OR People_licence = :searchField");
$name = "%" . $searchField . "%";
$stmt->bindParam(":name", $name);
}
else
{
$stmt = $conn->prepare("SELECT P.People_name, Vehicle_type, Vehicle_colour, Vehicle_licence FROM Vehicle LEFT JOIN Ownership O on Vehicle.Vehicle_ID = O.Vehicle_ID LEFT JOIN People P on O.People_ID = P.People_ID WHERE Vehicle_licence = :searchField");
}
$stmt->bindParam(":searchField", $searchField);
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
if (count($result) > 0)
{
echo json_encode(array("message" => "ok", "data" => $result));
}
else
{
echo json_encode(array("message" => "No results found"));
}
}
else
{
echo json_encode(array("message" => "Not logged in"));
}