teddybears.css
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: lightblue;
background-image: url('../img/logo.png');
background-repeat: no-repeat;
background-position: left;
background-size: 100px 100px;
min-height: 120px;
max-height: auto;
min-width: 100px;
padding: 0;
}
.pageHeader {
padding: 0;
display: flex;
height: 100px;
min-width: 100px;
align-items: center;
color: #000;
}
header h1 {
width: 30%;
margin: auto;
}
Index.html
<html>
<head>
<script>location.href="index.php";</script>
</head>
<body>
</body>
</html>
Index.php
<html>
<head>
<title>Teddy Bears R Us - Home </title>
<link rel="stylesheet" href="css/teddybears.css">
</head>
<body>
<?php
require("header.php");
require("nav.php"); ?>
<main>
<h1>Welcome to Teddy Bears R Us</h1>
<p>This site is the go-to site for all info about Teddy Bears.</p>
<a href="http://www.google.com" target="_blank"><img src="img/google.png" height="50px">Go to Google</a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/YDndFOtBy-E" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<video src="vid/aasdasd.mp4">
<audio src="asdsd.mp3"></audio>
</main>
<footer>
<p>(c) 2021 Mr Lai - All Rights Reserved</p>
</footer>
</body>
</html>
Login Page<?php
require('dbconnect.php');
$method = $_SERVER["REQUEST_METHOD"];
$message = "Please login";
IF ($method == "POST") {
$username = $_POST["username"];
$password = $_POST["password"];
IF ($username=="" OR $password=="") {
$message="Error: Please enter a Username and Password";
} else {
$conn = getConn();
$sql = "SELECT u.firstname, u.lastname, u.role FROM users AS u WHERE u.userid=? AND PASSWORD=?";
$stmt = mysqli_stmt_init($conn);
$message = "Error: Login unsuccessfully attempted. Try Again";
$retCode = -1;
if (mysqli_stmt_prepare($stmt, $sql)) {
mysqli_stmt_bind_param($stmt,"ss",$username, $password);
mysqli_stmt_execute($stmt);
mysqli_stmt_bind_result($stmt,$firstname,$lastname,$role);
mysqli_stmt_store_result($stmt);
$rows = mysqli_stmt_num_rows($stmt);
//echo($rows);
if ($rows > 0) {
while (mysqli_stmt_fetch($stmt)) {
$message = "login successfully completed. Welcome ".$firstname.' '.$lastname.' ('.$role.')';
}
}
mysqli_stmt_close($stmt);
}
//$message = "Welcome ".$username;
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Teddy Bears R Us - Login</title>
<link rel="stylesheet" href="css/teddybears.css">
</head>
<body>
<?php require("header.php"); ?>
<?php require("nav.php"); ?>
<main>
<h1>Login</h1>
<form name="login" id="login" method="post" action="">
<table>
<tr>
<td>Username</td>
<td><input type="text" name="username" id="username"></input></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" name="password" id="password"></input></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" name="submit" id="submit" >Login</button>
</td>
</tr>
<tr>
<td colspan="2"><?php echo($message); ?>
</td>
</tr>
</table>
</form>
</main>
<footer>
</footer>
</body>
</html>
dbconnect.php
<?php
function getConn() {
$dbserver = $_SERVER['SERVER_NAME'];
$dbusername = "10ist";
$dbpassword = "password";
$dbname = "studentdb";
$conn = new mysqli($dbserver, $dbusername, $dbpassword, $dbname);
// Check connection
if (!$conn) {
die("Failed to connect to MySQL: " .mysqli_connect_error());
}
return $conn;
}
?>
nav.php
<nav>
<a href="index.php">Home</a>
<a href="aboutUs.php">About Us</a>
<a href="login.php">Login</a>
</nav>
header.php
<header>
<h1><div class="pageHeader">Teddy Bears R Us</div></h1>
</header>
quiz.php
<?php
$message = "Please answer the quiz...";
$method = $_SERVER["REQUEST_METHOD"];
//Hit the submit button....process answering the quiz
IF ($method == "POST") {
$max = 3;
$correct = 0;
// Start from Q1 to MAX question and check that the Answer is correct, if it is add 1 to total correct
for ($x = 1; $x <= $max; $x++ ) {
if ($_POST["Q".$x] == "T") {
$correct = $correct + 1;
}
}
IF ($correct > 0) {
$message = "Congratulations you got ".$correct." right out of ".$max;
} ELSE {
$message = "Sorry, you got none correct! Try again!";
}
}
?>
<html>
<head>
<title>Teddy Bears R Us - Quiz </title>
<link rel="stylesheet" href="css/teddybears.css">
</head>
<body>
<?php
require("header.php");
require("nav.php"); ?>
<main>
<h1>Teddy Bears R Us Quiz</h1>
<form name="quiz" id="quiz" action="" method="post">
<table>
<tr><td><h3>Q1. Why did the teddy bears go into the woods?</h3></td></tr>
<tr><td><input type="radio" name="Q1" id="Q1A" value="F" required>A. To collect wood for the fire</input></td></tr>
<tr><td><input type="radio" name="Q1" id="Q1B" value="T" required>B. To have a picnic</input></td></tr>
<tr><td><input type="radio" name="Q1" id="Q1C" value="F" required>C. To visit little red riding hood</input></td></tr>
<tr><td><input type="radio" name="Q1" id="Q1D" value="F" required>D. To prepare for their Award Assembly</input></td></tr>
<tr><td><h3>Q2. Why did the teddy bears go into the woods?</h3></td></tr>
<tr><td><input type="radio" name="Q2" id="Q2A" value="F" required>A. To collect wood for the fire</input></td></tr>
<tr><td><input type="radio" name="Q2" id="Q2B" value="T" required>B. To have a picnic</input></td></tr>
<tr><td><input type="radio" name="Q2" id="Q2C" value="F" required>C. To visit little red riding hood</input></td></tr>
<tr><td><input type="radio" name="Q2" id="Q2D" value="F" required>D. To prepare for their Award Assembly</input></td></tr>
<tr><td><h3>Q3. Why did the teddy bears go into the woods?</h3></td></tr>
<tr><td><input type="radio" name="Q3" id="Q2A" value="F" required>A. To collect wood for the fire</input></td></tr>
<tr><td><input type="radio" name="Q3" id="Q2B" value="T" required>B. To have a picnic</input></td></tr>
<tr><td><input type="radio" name="Q3" id="Q2C" value="F" required>C. To visit little red riding hood</input></td></tr>
<tr><td><input type="radio" name="Q3" id="Q2D" value="F" required>D. To prepare for their Award Assembly</input></td></tr>
<tr><td><button type="submit" name="submit">Send Answer for Quiz</button></td></tr><tr><td><?php echo($message);?></td></tr>
</table>
</form>
</main>
<footer>
<p>(c) 2021 Mr Lai - All Rights Reserved</p>
</footer>
</body>
</html>
