0% found this document useful (0 votes)

15 views79 pages

PHASE FIVE COMPLETE (1)

The document outlines the implementation details for the Dream Shelf application, aimed at children aged 6-12, providing a platform for cataloging books, accessing educational games, and facilitating user registration and login. It details the technologies used, including HTML, CSS, JavaScript, PHP, and their respective roles in creating a user-friendly interface and ensuring accessibility and SEO. Additionally, it includes source code examples for various sections of the application, such as the main page and registration page, along with explanations of the code structure and functionality.

Uploaded by

khumalolungile100

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

15 views79 pages

PHASE FIVE COMPLETE (1)

Uploaded by

khumalolungile100

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 79

PHASE FIVE

CODING
SECTION
Contents
INTRODUCTION ....................................................................................................................................... 3
OBJECTIVES ............................................................................................................................................. 3
TECHNOLOGIES USED IN DREAMSHELF .................................................................................................. 4
MAIN PAGE ............................................................................................................................................. 6
REGISTRATION PAGE ......................................................................................................................... 14
SQL DATABASE ...................................................................................................................................... 23
TERMS AND CONDITIONS ..................................................................................................................... 28
WELCOME BACK LOGIN ........................................................................................................................ 34
SQL CODE FOR LOGIN ........................................................................................................................... 42
HOME PAGE .......................................................................................................................................... 44
ABOUT US.............................................................................................................................................. 52
BOOKS PAGE ......................................................................................................................................... 55
AUDIO LOGS .......................................................................................................................................... 60
GAMES SECTION ................................................................................................................................... 68
KEY SCENARIOS FOR INTEGRATION TESTING ....................................................................................... 74
TESTING METHODOLOGY ..................................................................................................................... 74
INTEGRATION TESTING TOOLS.............................................................................................................. 79
INTRODUCTION
The Dream Shelf application is designed to provide kids of the ages 6-12 with a seamless way to
catalog their personal library, discover new books and play educational and fun games.

This document outlines the implementation details for the application, including the coding
standards used, testing strategies, system testing protocols and installation instructions of software

OBJECTIVES
 Facilitate a collection of children books and audio logs.
 Allow kids to access both online and offline books.
 Provide user-friendly interface for easy and exciting navigation.
 And lastly provide kids with free educational and fun games.
TECHNOLOGIES USED IN DREAMSHELF
HTML (HyperText Markup Language):

 Basic Structure: We rely on HTML to form the backbone of our webpage. It uses tags to
define the document's structure, including:

o <html>: The root of our document.

o <head>: This section contains metadata, links to stylesheets, and our document title.

o <body>: Here, we include all the visible content of the webpage.

o We utilize semantic elements like <header>, <nav>, <main>, and <footer> to provide
meaning and organization to our content.

 Content Organization:

o We use headings (<h1>, <h2>, etc.) to establish a clear hierarchical organization of

our content.

o We group related content together using <div> elements.

 Links and Navigation:

o Our webpage employs <a> tags extensively, which enable users to navigate between
different pages and access external resources.

 Embedded Content:

o We incorporate <iframe> elements to embed external games and interactive

content directly within our webpage, enhancing user engagement.

2. CSS (Cascading Style Sheets):

 Styling:

o We apply CSS to customize the visual appearance of our HTML elements. This
includes:

 Color and Font Styles: We set colors for text and backgrounds, as well as
define font sizes and family styles.

 Box Model: We manage spacing (margin and padding) and the sizing of
elements effectively.

 Flexbox: This allows us to create a flexible layout structure that aligns

elements such as buttons and game containers.

 Responsive Design:

o Utilizing CSS media queries and properties (including viewport settings in HTML), we
ensure our layout adapts to various screen sizes and devices, making it mobile-
friendly.

o We implement responsive techniques that scale elements and adjust layouts based
on viewport width.
 Interactive Elements:

o Our CSS styles include hover effects and transitions that enhance user interaction,
making buttons more engaging and providing visual feedback.

3. JavaScript:

 We used Java script to add interactive features to web pages:

o Dynamic Functionality: We used JavaScript to handle events (like button clicks), load
game content dynamically, or facilitate user interactions.

4. Accessibility (a11y):

 By utilizing semantic HTML, we help make our webpage more accessible to users with
disabilities. This practice includes:

o Structuring content meaningfully, which allows screen readers to interpret it

effectively.

o Clearly defining links and buttons to indicate their purpose.

5. SEO (Search Engine Optimization):

 By implementing proper use of headings, metadata, and descriptive links, we enhance the
discoverability of our webpage through search engines.

6. PHP

 Weused PHP for backend coding

 We mostly used for server and security purposes. Such ass validating.

Summary of Technologies:

 HTML: We use this for markup and content structure.

 CSS: We employ it for styling and responsive design.

 JavaScript: Used for dynamic interactions (a common addition, even if not explicitly included
in our initial code).

 Accessibility Practices: We implement these for enhancing usability for users with
disabilities.

 SEO Techniques: These are integrated through our well-structured content and metadata.

 PHP: For back end and connection to local server and security purposes.
MAIN PAGE
SOURCE CODE

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Dream Shelf</title>

<style>

/* Basic Styles */

body {

background-color: #ffebcd; /* Light background color for a warm feel */

color: white;

font-family: Arial, sans-serif;

text-align: center;

position: relative;

overflow-x: hidden;

/* Circle shapes for a playful background */

.shape {

position: absolute;

border-radius: 50%;

opacity: 0.6;

z-index: -1;

/* Different sizes, colors, and positions for shapes */

.shape.shape1 {

width: 150px;

height: 150px;

background-color: #f6d365;

top: 100px;

left: -50px;

.shape.shape2 {

width: 200px;

height: 200px;

background-color: #fda085;

top: 300px;

right: -70px;

.shape.shape3 {

width: 100px;

height: 100px;

background-color: #ff6f61;

bottom: 100px;

left: 50%;

transform: translateX(-50%);

.shape.shape4 {

width: 80px;

height: 80px;

background-color: #ff5252;

top: 500px;

left: 80px;
}

/* Header styling */

header {

padding: 20px;

background: rgba(255, 255, 255, 0.8);

border-radius: 15px;

box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);

margin-bottom: 30px;

header h1 {

font-size: 3rem;

color: #ff6f61;

text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);

header p {

font-size: 1.2rem;

color: #666;

margin-top: 5px;

/* Navigation Styling */

nav a {

color: #ff6f61;

text-decoration: none;

margin: 0 15px;

font-size: 1.2rem;

transition: color 0.3s;

}
nav a:hover {

color: #ff1744;

text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

/* Image styling */

.shelf-image {

display: block;

margin: 20px auto;

padding: 10px;

max-width: 80%;

height: auto;

border: 3px solid #ff6f61;

border-radius: 20px;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

transition: transform 0.2s;

.shelf-image:hover {

transform: scale(1.05);

/* Footer styling */

footer {

margin-top: 20px;

color: #666;

font-size: 1rem;

footer p {
margin: 5px;

text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);

</style>

</head>

<body>

<div class="shape shape1"></div>

<div class="shape shape2"></div>

<div class="shape shape3"></div>

<div class="shape shape4"></div>

<h1>Welcome to the Dream Shelf</h1>

<p>Shelves Of Knowledge for Every Child's Dream</p>

<p>Empowering Children with Access to Books, Offline!</p>

</header>

<style>

/* Other styles */

nav a {

color: white; /* Change link color to white */

text-decoration: none; /* Optional: remove underline */

nav a:hover {

color: #ff6f61; /* Change hover color if desired */

}

</style>

</head>

<body>

<nav>

<a href="AboutUs.html">About Us</a>

</nav>

</body>

<section style="text-align: center; margin: 50px 0;">

<h4 style="color: #ff6f61; font-size: 3rem; margin-top: 20px;">REGISTER HERE</h4>

<p style="color: white; font-size: 1.5rem; margin-bottom: 20px;">Click on the image below to
register ↓</p>

<img class="shelf-image" src="the teacher.jpg" alt="Teacher Image" style="width: 80%; max-

width: 700px; height: auto; padding: 15px; border: 3px solid white; border-radius: 15px;">

</a>

</section>

<section style="text-align: center; margin: 50px 0;">

<h4 style="color: #ff6f61; font-size: 3rem; margin-top: 20px;">Already Registered?</h4>

<p style="color: white; font-size: 1.5rem; margin-bottom: 20px;">Click on the image below to log
in ↓</p>

</a>

</section>

<p>© 2024 DREAM SHELF. All Rights Reserved.</p>

</footer>

</body>

</html>

EXPLAINATION

This HTML document creates a simple webpage for an entity called "Dream Shelf." The page is styled
to be visually appealing, featuring playful shapes, a welcoming header, navigation links, sections for
registration and login, as well as a footer. Let’s break down the code step-by-step:

1. Document Structure

 DOCTYPE Declaration: Specifies that this is an HTML5 document.

 Html Element: The <html lang="en"> indicates that the content is in English.

2. Head Section

The <head> section includes metadata, linking to stylesheets, and internal styles:

 Meta Tags:

o <meta charset="UTF-8">: Sets the character encoding to UTF-8.

o <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures

proper rendering on mobile devices.

o <meta http-equiv="X-UA-Compatible" content="ie=edge">: Ensures compatibility

with Internet Explorer.

 Title: The title of the webpage is set to "Dream Shelf."

 Link to External CSS: <link rel="stylesheet" href="style-edited.css"> includes an external CSS

file for additional styling.

 Internal CSS Styles: A <style> section defines various styles, including:

o Body Style: Sets background color, font properties, and text alignment.

o Circle Shapes: CSS classes .shape define and style circular shapes for visual interest
in the background.

o Header Style: The header is styled with padding, background color, shadows, and
text styles.

o Navigation Links: Styles make navigation links visually appealing, with color
transitions on hover.
o Image Style: Images are styled to have a border, shadow effects, and scaling on
hover.

o Footer Style: Simple styling for the footer with color and text shadow.

3. Body Section

The <body> contains the main content of the webpage:

 Background Shapes: Four <div> elements represent different shapes, positioned absolutely
behind the content.

 Header Section: Contains a welcome message with a title (<h1>) and subtitle paragraphs
that promote the mission of "Dream Shelf."

 Navigation: A <nav> section provides a link to the "About Us" page. The links change color
on hover for interactivity.

4. Registration and Login Sections

 Both sections are structured similarly:

o Each section has a heading (<h4>) and a description (<p>).

o Images are wrapped in anchor (<a>) tags linking to registration and login pages. The
images visually represent actions and are styled to enhance their appearance.

5. Footer Section

 The footer contains copyright information and is simply styled.

6. Issues Detected

There is a small issue present in the HTML:

 There are two opening <body> tags, which is incorrect. Only one opening and
closing <body> tag should be present.

7. Summary

This webpage is designed to be a user-friendly portal for "Dream Shelf," focusing on both
registration and returning user logins. The playful design features circular shapes, visually appealing
text elements, and interactive links to enhance user experience. The code is structured for easy
readability and maintenance, with a clear separation of design (styles) and content (HTML structure).
REGISTRATION PAGE
SOURCE CODE

<?php

// Initialize variables

$nameError = $ageMessage = $roleError = "";

$name = $age = $role = "";

// Database connection settings for registration database

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "mydatabase";

// Create connection

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

// Check if form is submitted

if ($_SERVER["REQUEST_METHOD"] == "POST") {

// Name Validation: Only letters allowed

if (!preg_match("/^[A-Za-z\s]+$/", $_POST["name"])) {

$nameError = "Please enter a valid name (letters only).";

} else {

$name = $_POST["name"];

// Age Validation: Prevent submission if under 13

if ($_POST["age"] < 13) {

$ageMessage = "You must be at least 13 years old to proceed.";

} else {

$age = $_POST["age"];

// Role Validation: Check if role is selected

if ($_POST["role"] == "") {

$roleError = "Please select if you are a Parent, Teacher, or Guardian.";

} else {

$role = $_POST["role"];

// Check if all fields are valid

if ($name && $age >= 13 && $role) {

// Prepare and execute SQL query to insert user data

$sql = "INSERT INTO users (name, age, role) VALUES (?, ?, ?)";

$stmt = $conn->prepare($sql);

$stmt->bind_param("sis", $name, $age, $role);

$stmt->execute();

// Get the newly inserted user's ID

$userId = $conn->insert_id;

// Store the user's data in sessions

session_start();

$_SESSION['userId'] = $userId;

$_SESSION['name'] = $name;

$_SESSION['age'] = $age;

$_SESSION['role'] = $role;
// Redirect to login page after successful registration

echo "Successfully registered. Please login.";

echo "<a href='welcomeback.php'><button>Login Now</button></a>";

exit;

// Close database connection

$conn->close();

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Welcome Back to Dream Shelf</title>

<style>

/* Basic Styles */

body {

background-color: #C9E4CA;

color: #333;

font-family: Arial, sans-serif;

text-align: center;

display: flex;

flex-direction: column;

align-items: center;
padding: 20px;

.welcome-container {

background-color: #fff;

width: 100%;

max-width: 500px;

border-radius: 15px;

padding: 30px;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

text-align: left;

margin-top: 50px;

border: 1px solid #C5CAE9;

h2 {

color: #FF69B4;

font-size: 2.5rem;

text-align: center;

label {

font-size: 1rem;

color: #666;

input[type="text"], input[type="number"], select {

width: 100%;

padding: 10px;

margin: 10px 0;

border: 1px solid #C5CAE9;

border-radius: 5px;

font-size: 1rem;

/* Validation Messages */

.error-message {

color: red;

font-size: 0.9rem;

/* Button Styles */

.submit-button {

background-color: #87CEEB;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 1rem;

width: 100%;

margin-top: 15px;

transition: background-color 0.3s;

.submit-button:hover {

background-color: #FFC5C5;

</style>

</head>

<body>

<h2>Register Here!</h2>

<p>Please enter your details below:</p>

<form id="welcomeForm" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"

method="post">

<input type="text" id="name" name="name" required value="<?php echo $name;?>">

<div id="nameError" class="error-message"><?php echo $nameError;?></div>

<input type="number" id="age" name="age" required min="1" value="<?php echo $age;?>">

<div id="ageMessage" class="error-message"><?php echo $ageMessage;?></div>

<label for="role">Are you a Parent, Teacher, or Guardian? or Other</label>

<select id="role" name="role" required>

<option value="" disabled <?php if($role == "") echo "selected";?>>Select one</option>

<option value="Teacher" <?php if($role == "Teacher") echo "selected";?>>Teacher</option>

<option value="Parent" <?php if($role == "Parent") echo "selected";?>>Parent</option>

<option value="Guardian" <?php if($role == "Guardian") echo

"selected";?>>Guardian</option>

<option value="Other" <?php if($role == "Other") echo "selected";?>>Other</option>

<label>

<input type="checkbox" id="terms" name="terms" required>I agree to the

<a href="terms.html"> terms and conditions</a>

</label>

<div id="termsError" class="error"></div>

<br>

<legend>REQUEST</legend>

<label>

<input type="radio" name="type" value="1" checked onclick="showMessage(this.value)">

A Book

</label>

<br>

<label>

<input type="radio" name="type" value="2" onclick="showMessage(this.value)">

More Information

</label>

</fieldset>

function showMessage(value) {

if (value == 1) {

alert("Register and get books, audio logs and many more for child or learners today!!");

} else if (value == 2) {

alert("For more information please contact us at DReam Shelf Assistance line 0838854052 or email
Us @dreamshelfhelpline.co.za");

</script>

<br>

alert("Are you Parent? , Teacher? or Guardian? Register Here to explore Books and many more for
your Kids!");

</script>
<input type="submit" action="feedback.php>" name="submit" value="Begin" class="submit-
button">

EXPLAINATION

It collects user information such as name, age, and role and stores it in a database after validating
the input. If the registration is successful, it provides feedback to the user and allows them to log in.

Key Components

1. Variable Initialization: At the beginning of the script, variables are set up to hold potential
error messages (for invalid input) and store values that the user submits through the
registration form. This gives a clear structure for managing user input.

2. Database Connection: The script defines the parameters needed to connect to a MySQL
database, including the server name, username, and database name. It establishes a
connection using these parameters and checks if the connection is successful. If there is an
error connecting, the script stops executing and displays a message.

3. Form Submission Handling: The script checks if the registration form has been submitted. If
it detects a submission (indicated by a POST request), it processes the input:

o Name Validation: It checks if the name contains only letters and spaces. If it
contains invalid characters, an error message is generated.

o Age Validation: It ensures that the user is at least 13 years old. If the age is less than
13, an error message is shown.

o Role Validation: The script checks that a role (either Parent, Teacher, Guardian, or
Other) has been selected. If not, an error message is set.

4. Successful Data Handling: If all input fields are valid, the script prepares an SQL statement to
insert the user's data into the database. It uses a prepared statement, which helps prevent
SQL injection attacks (a common security issue). After the data is successfully inserted, the
script retrieves the newly created user's ID.

5. Session Management: Once the user is registered, their information (like user ID, name, age,
and role) is stored in PHP session variables. This allows the information to be accessible on
other pages or throughout the user's session.

6. Feedback and Redirection: The script informs the user that their registration was successful
and provides a button to log in. After displaying this information, it stops further execution.

7. HTML and User Interface: The HTML portion of the code creates the visual layout of the
registration form. This includes input fields for the user's name and age, a dropdown to
select their role, and a checkbox for agreeing to terms and conditions. The form requires
users to fill in all fields before submitting.

8. Styling: Some CSS is included to make the registration page visually appealing, such as
background colors, fonts, and button styles. This enhances the user experience by making
the page more inviting.
9. JavaScript Alerts: There’s a section that includes a JavaScript function. This function shows
alerts based on whether the user is requesting a book or more information when they select
radio buttons. It provides immediate feedback to the user.

10. Error Handling and User Feedback: If any of the validations fail (like invalid name or age),
the corresponding error message will be displayed under the relevant input field, guiding the
user on what needs to be corrected.

Summary

This code is for a registration webpage that allows users to input their personal details. It includes
validations to ensure the correctness of the details provided, connects to a MySQL database to store
this information, and provides feedback to users based on their interactions. The combination of
PHP, HTML, CSS, and JavaScript creates a functional and user-friendly registration system.
SQL DATABASE
-- phpMyAdmin SQL Dump

-- version 5.2.1

-- https://www.phpmyadmin.net/

-- Host: 127.0.0.1

-- Generation Time: Nov 07, 2024 at 01:27 AM

-- Server version: 10.4.28-MariaDB

-- PHP Version: 8.2.4

SET FOREIGN_KEY_CHECKS=0;

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

START TRANSACTION;

SET time_zone = "+00:00";

/!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT /;

/!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS /;

/!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION /;

/!40101 SET NAMES utf8mb4 /;

-- Database: `mydatabase`

-- --------------------------------------------------------

-- Table structure for table `users`

-- Creation: Nov 06, 2024 at 04:54 PM

-- Last update: Nov 07, 2024 at 12:24 AM

CREATE TABLE `users` (

`id` int(11) NOT NULL,

`name` varchar(50) DEFAULT NULL,

`age` tinyint(3) UNSIGNED DEFAULT NULL,

`role` varchar(255) DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

-- RELATIONSHIPS FOR TABLE `users`:

-- Dumping data for table `users`

INSERT INTO ùsers` (ìd`, `name`, àge`, `role`) VALUES

(62, 'Lungile', 20, 'Teacher'),

(63, 'Thabo', 22, 'Other'),

(64, 'Thabo', 22, 'Other');

-- Indexes for dumped tables

-- Indexes for table `users`

ALTER TABLE `users`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `users`

ALTER TABLE `users`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=65;

-- Metadata

USE `phpmyadmin`;

-- Metadata for table users

SET FOREIGN_KEY_CHECKS=1;

COMMIT;

/!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT /;

/!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS /;

/!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION /;

EXPLAINATION

Overview of SQL Dump

This SQL script represents a structured export from a MySQL or MariaDB database, typically
generated by phpMyAdmin. The script is designed to create and populate a database table named
users, which is intended to manage user records.
Key Components

1. Metadata Information:

o The dump begins with metadata comments that indicate the version of
phpMyAdmin used (5.2.1), server details (MariaDB version 10.4.28), and the PHP
version (8.2.4) at the time of the dump's generation. This information provides
insights into the environment where the SQL commands were executed.

2. Transaction Control:

o The script employs transaction control commands, including SET

FOREIGN_KEY_CHECKS=0;, which temporarily disables foreign key constraints to
avoid potential issues when dropping or inserting data. This ensures that data
integrity constraints do not interfere with the import process.

o START TRANSACTION; initiates a new transaction block, allowing changes to be

made in a safe manner. If an error occurs during execution, it's possible to roll back
all changes made during the transaction.

3. Character Set and Time Zone Settings:

o The script sets the time zone to UTC (SET time_zone = "+00:00";) and ensures that
the database uses the utf8mb4 character set. This character set supports a wide
range of characters, including emojis, which offers better compatibility for various
text types.

4. Database Creation:

o The script specifically targets a database named mydatabase, indicating the context
in which the users table should be created.

5. Table Creation:

o The CREATE TABLE statement creates a new table named users with the following
fields:

 id: An integer that serves as a unique identifier for each user (not nullable).

 name: A variable character field (up to 50 characters) allowing names of

users (nullable).

 age: A tiny integer field for storing user ages (nullable, unsigned).

 role: A variable character field (up to 255 characters) for describing the
user's role (nullable).

o The table uses the InnoDB storage engine, which supports transactions and foreign
key constraints, and employs a utf8mb4 character set with a general collation.

6. Inserting Data:

o The script includes an INSERT INTO statement to populate the users table with initial
data, entering three records for users identified by their respective id, name, age,
and role.
7. Indexing:

o An ALTER TABLE statement adds a primary key constraint on the id column, ensuring
that each record in the users table is uniquely identified and indexed for
performance.

8. Auto-Increment Configuration:

o Another ALTER TABLE command modifies the id column to be an auto-increment

field. This means that the database will automatically assign a unique id to new
entries, starting from 65 (the next number after the last inserted id).

9. Finalizing the Transaction:

o The command COMMIT; finalizes the transaction, making all changes permanent in
the database.

10. Restoration of Previous Settings:

o The script concludes by restoring any previous character set and collation settings to
ensure the environment returns to its initial state.

Conclusion

This SQL dump file provides a comprehensive foundation for creating and populating a users table in
the mydatabase database. It showcases fundamental database management principles, including
transaction handling, proper character set usage, and data integrity through primary key constraints
and auto-increment functionality. Overall, it serves as an excellent starting point for user data
management in a relational database system.
TERMS AND CONDITIONS
<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Terms and Conditions - Dream Shelf</title>

<style>

body {

font-family: Arial, sans-serif;

line-height: 1.6;

margin: 20px;

padding: 20px;

background-color: #f9f9f9;

color: #333;

h1, h2, h3 {

color: #ff6f61; /* Customize color for headings */

h1 {

text-align: center;

margin: 10px 0;

a{
color: #00f;

text-decoration: none;

a:hover {

text-decoration: underline;

footer {

text-align: center;

margin-top: 20px;

font-size: 0.8rem;

color: #777;

</style>

</head>

<body>

<h1>Terms and Conditions for Dream Shelf</h1>

<p><strong>Effective Date: 2 November 2024</strong></p>

<p>Welcome to Dream Shelf, a safe and fun library where kids can explore books, play educational
games, and engage in learning activities! We want to ensure that your experience here is enjoyable
and safe. By using our services, you agree to the following terms and conditions.</p>

<h2>1. Acceptance of Terms</h2>

<p>By accessing and using Dream Shelf, you agree to comply with these Terms and Conditions. If
you do not agree to these terms, please do not use our services.</p>

<h2>2. Eligibility</h2>

<p>Dream Shelf is designed for children aged 6 to 12 years. If you are under the age of 13, please
ask a parent or guardian for permission before using our website or services.</p>
<h2>3. Use of Services</h2>

<ul>

<li><strong>Library Access:</strong> You may browse our selection of books and educational
games available on Dream Shelf.</li>

<li><strong>Creating an Account:</strong> To access certain features, you’ll need to create an

account. This may include providing personal information like your name and age.No password
required.</li>

<li><strong>Respectful Behavior:</strong> Treat others with respect. Harassment, bullying, or

inappropriate language will not be tolerated.</li>

</ul>

<h2>4. Content</h2>

<ul>

<li><strong>Educational Materials:</strong> All content provided on Dream Shelf is for

educational and entertainment purposes. We encourage kids to explore, learn, and have fun!</li>

<li><strong>User-Generated Content:</strong> If you share content (like reviews or comments),

make sure it is appropriate and doesn’t include any personal information.</li>

</ul>

<h2>5. Privacy Policy</h2>

<p>Your privacy is important to us! We do not collect sensitive personal information from children
without parental consent. Please read our <a href="#privacy-policy">Privacy Policy</a> for more
details.</p>

<h2>6. Intellectual Property</h2>

<ul>

<li><strong>Copyright:</strong> All content, graphics, and materials on Dream Shelf are owned
by us or licensed to us and are protected by copyright laws. You may not use, reproduce, or
distribute any of our content without permission.</li>

<li><strong>User Contributions:</strong> By submitting content (like book reviews), you grant

Dream Shelf a non-exclusive, royalty-free license to use, modify, publish, and distribute that
content.</li>

</ul>
<h2>7. Limitation of Liability</h2>

<p>Dream Shelf is not responsible for any damages that may occur from using our services. We
strive to provide a safe environment, but we cannot guarantee that our content is free from errors
or interruptions.</p>

<h2>8. Third-Party Links</h2>

<p>Dream Shelf may include links to other websites. We are not responsible for the content or
practices of those websites. Always verify the information before engaging with third-party
services.</p>

<h2>9. Changes to Terms</h2>

<p>We reserve the right to update these Terms and Conditions at any time. Any changes will be
posted on this page with the effective date. Please review this regularly.</p>

<h2>10. Contact Us</h2>

<p>If you have any questions or concerns about these Terms and Conditions, please contact us
at:</p>

<ul>

<li><strong>Email:</strong> @dreamshelfhelpline.co.za</li>

<li><strong>Phone:</strong>083 885 4052</li>

<li><strong>Mail:</strong> Dream Shelf, 2091</li>

</ul>

<p>By using Dream Shelf, you agree to these Terms and Conditions and commit to fostering a
fun, safe, and respectful environment for all users. Happy reading and learning!</p>

</footer>

</body>

</html>
Overview of the HTML Document

The HTML document is a structured representation of the Terms and Conditions for "Dream Shelf," a
platform catering to children's education and entertainment through books and games. This
document is essential for informing users—specifically children aged 6 to 12 and their guardians—
about their rights, responsibilities, and acceptable usage of the service.

Structure Breakdown

1. Document Declaration and Language Specification:

o <!DOCTYPE html>: This declaration defines the document as an HTML5 document,

ensuring proper rendering in web browsers.

o <html lang="en">: The root element of the document, with the lang attribute
indicating that the content is in English.

2. Head Section:

o <head>: Contains meta-information about the document.

 <meta charset="UTF-8">: Specifies the character encoding for the HTML

document as UTF-8, supporting a wide range of characters.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">:

Ensures responsive design by controlling the layout on mobile browsers,
making the page adapt to various screen sizes.

 <title>: Sets the title of the webpage, which appears in the browser tab.
Here, it states "Terms and Conditions - Dream Shelf."

 <style>: Contains internal CSS styling to control the page's appearance,

setting fonts, colors, margins, paddings, and other stylistic properties.

3. Body Section:

o <body>: The main content area of the webpage where all visible elements are
placed.

 <h1>: The main heading that clearly indicates the topic, "Terms and
Conditions for Dream Shelf."

 <p>: Paragraphs that provide detailed information about the terms,

including the effective date and introductory remarks about the service.

 <h2>: Subheadings categorizing the sections of the Terms and Conditions,

making it easier for users to navigate and understand the document.

 <ul>: Unordered lists that outline specific points related to the categories,
such as account creation, content guidelines, and intellectual property.
Bullet points enhance readability and comprehension.

4. Key Sections Explained:

o Acceptance of Terms: Users must agree to adhere to the terms outlined.

o Eligibility: Indicates the age range for acceptable users and includes a reminder for
parental consent for users under age 13.

o Use of Services: Details allowed activities on the platform, including respectful

behavior expectations.

o Content: Describes the nature of the provided materials and the guidelines for user-
generated content.

o Privacy Policy: Highlights the commitment to user privacy, especially concerning

children's information.

o Intellectual Property: Describes ownership rights over the content and user
contributions.

o Limitation of Liability: States that Dream Shelf is not responsible for any potential
damages from using its services.

o Third-Party Links: Clarifies that external links on the site are not under the website’s
control and advises verification before use.

o Changes to Terms: Notifies users that terms may change and encourages regular
reviews of the document.

5. Contact Information:

o Provides clear channels for users to ask questions or seek clarification on these
terms, including an email address, phone number, and traditional mail information.

6. Footer Section:

o The footer offers a summary statement reiterating the user’s agreement to the
terms and encourages a respectful environment, culminating in a positive note
about reading and learning.

Conclusion

This HTML document serves as an essential legal and informational tool for "Dream Shelf." It
effectively communicates the terms under which their services are provided while ensuring that
users, particularly children and their guardians, understand their rights and responsibilities. The
structured approach, along with thoughtful styling, enhances the overall user experience, promoting
clarity and accessibility. By laying out these terms transparently, Dream Shelf fosters confidence and
trust within its community, thereby supporting a safe and educational environment for its users.
WELCOME BACK LOGIN
SOURCE CODE

<?php

// Initialize variables

$nameError = $ageMessage = $roleError = "";

$name = $age = $role = "";

// Database connection settings

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "mydatabase"; // Corrected database name

// Create connection

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

// Start session

session_start();

// Check if form is submitted

if ($_SERVER["REQUEST_METHOD"] == "POST") {

// Name Validation: Only letters allowed

if (!preg_match("/^[A-Za-z\s]+$/", $_POST["name"])) {

$nameError = "Please enter a valid name (letters only).";

} else {

$name = $_POST["name"];
// Check if name exists in first database

$sql = "SELECT * FROM users WHERE name = ?";

$stmt = $conn->prepare($sql);

$stmt->bind_param("s", $name);

$stmt->execute();

$result = $stmt->get_result();

if ($result->num_rows == 0) {

$nameError = "Name not found in our records.";

// Age Validation: Prevent submission if under 13

if ($_POST["age"] < 13) {

$ageMessage = "You must be at least 13 years old to proceed.";

} else {

$age = $_POST["age"];

// Role Validation: Check if role is selected

if ($_POST["role"] == "") {

$roleError = "Please select if you are a Parent, Teacher, or Guardian.";

} else {

$role = $_POST["role"];

// Check if all fields are valid

if ($name && $age >= 13 && $role) {

// Verify user credentials

$sql = "SELECT * FROM users WHERE name = ? AND age = ?";

$stmt = $conn->prepare($sql);

$stmt->bind_param("si", $name, $age);

$stmt->execute();

$result = $stmt->get_result();

echo "Input Variables:<br>";

echo "Name: $name<br>";

echo "Age: $age<br>";

if ($result->num_rows > 0) {

$user = $result->fetch_assoc();

echo "Database Result:<br>";

print_r($user);

// Set session variables

$_SESSION['userId'] = $user['id'];

$_SESSION['name'] = $user['name'];

$_SESSION['age'] = $user['age'];

$_SESSION['role'] = $user['role'];

// Check if user data matches session data

if ($user['name'] === $_SESSION['name'] && $user['age'] === $_SESSION['age']) {

// User verified, display welcome message

echo "Welcome Back!";

session_unset();

session_destroy();

header("Location: mainpage.html");

} else {

// User data mismatch, display error message

echo "Invalid credentials.";

session_unset();

session_destroy();

exit;

} else {

// User not found, display error message

echo "Invalid credentials.";

session_unset();

exit;

// Close database connection

$conn->close();

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Welcome Back to Dream Shelf</title>

<style>

/* Basic Styles */

body {
background-color: #ffebcd;

color: #333;

font-family: Arial, sans-serif;

text-align: center;

display: flex;

flex-direction: column;

align-items: center;

padding: 20px;

.welcome-container {

background-color: #fff;

width: 100%;

max-width: 500px;

border-radius: 15px;

padding: 30px;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

text-align: left;

margin-top: 50px;

h2 {

color: #ff6f61;

font-size: 2.5rem;

text-align: center;

label {

font-size: 1rem;

color: #333;

}
input[type="text"], input[type="number"], select {

width: 100%;

padding: 10px;

margin: 10px 0;

border: 1px solid #ddd;

border-radius: 5px;

font-size: 1rem;

/* Validation Messages */

.error-message {

color: red;

font-size: 0.9rem;

/* Button Styles */

.submit-button {

background-color: #ff6f61;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 1rem;

width: 100%;

margin-top: 15px;

transition: background-color 0.3s;

.submit-button:hover {
background-color: #ff5252;

</style>

</head>

<body>

<h2>Welcome Back!</h2>

<p>Please enter your details below:</p>

<form id="welcomeForm" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"

method="post">

<input type="text" id="name" name="name" required value="<?php echo $name;?>">

<div id="nameError" class="error-message"><?php echo $nameError;?></div>

<input type="number" id="age" name="age" required min="1" value="<?php echo $age;?>">

<div id="ageMessage" class="error-message"><?php echo $ageMessage;?></div>

<label for="role">Are you a Parent, Teacher, or Guardian?</label>

<select id="role" name="role" required>

<option value="" disabled <?php if($role == "") echo "selected";?>>Select one</option>

<option value="Teacher" <?php if($role == "Teacher") echo "selected";?>>Teacher</option>

<option value="Parent" <?php if($role == "Parent") echo "selected";?>>Parent</option>

<option value="Guardian" <?php if($role == "Guardian") echo

"selected";?>>Guardian</option>

<option value="Other" <?php if($role == "Other") echo "selected";?>>Other</option>

<input type="submit" name="submit" value="Begin" class="submit-button">

Overview

The code is a PHP script that handles a user login form. It validates user input (name, age, and role)
and connects to a MySQL database to verify user credentials. If successful, it initiates a session for
the user.

Key Components

1. Variable Initialization:

o Uses variables to hold error messages and user input ($name, $age, $role).

2. Database Connection:

o Connects to the MySQL database using mysqli and checks for connection errors.

3. Form Submission Handling:

o The script processes data upon form submission via a POST request.

o Name Validation: Checks if the name contains only letters using a regular
expression.

o Age Validation: Ensures that the user is at least 13 years old.

o Role Validation: Verifies that a role is selected.

4. Credential Verification:

o If all validations pass, it checks the database for the user with the specified name
and age.

o If found, the user is welcomed and session variables are set. If not, it returns an
error.

5. HTML Form:

o An HTML form captures user data (name, age, role) and displays error messages if
validations fail.

6. Styled Output:

o Basic CSS styles are applied for better user experience and aesthetics in the web
interface.

Summary

This script effectively manages user input for login verification, including necessary validations and
interactions with a MySQL database, while providing a user-friendly interface.
SQL CODE FOR LOGIN
SOURCE CODE

CREATE TABLE users (

id INT PRIMARY KEY AUTO_INCREMENT,

name VARCHAR(50),

age TINYINT(3) UNSIGNED,

role VARCHAR(255)

);

OVERVIEW

1. CREATE TABLE users: This part of the command specifies that a new table called users will
be created in the database.

2. id INT PRIMARY KEY AUTO_INCREMENT:

o id: This column serves as a unique identifier for each user.

o INT: Indicates that the data type of this column is an integer.

o PRIMARY KEY: This constraint ensures that each value in this column is unique and
cannot be NULL, providing a way to uniquely identify each row in the table.

o AUTO_INCREMENT: This feature automatically generates a unique value for

the id column whenever a new record is inserted. Starting from 1, it increments by 1
for each new entry.

3. name VARCHAR(50):

o name: This column stores the user's name.

o VARCHAR(50): Indicates that the column can hold variable-length character strings,
with a maximum length of 50 characters.

4. age TINYINT(3) UNSIGNED:

o age: This column stores the user's age.

o TINYINT(3): Specifies that the data type is a tiny integer, which can hold values from
0 to 255. The (3) indicates the display width but does not affect the range of values.

o UNSIGNED: This property ensures that the age cannot be negative.

5. role VARCHAR(255):

o role: This column stores the user’s role (e.g., Parent, Teacher, Guardian).

o VARCHAR(255): Allows for variable-length character strings with a maximum length

of 255 characters.

Summary
This SQL command establishes a structured table called users, designed to effectively store and
manage user information, including a unique identifier (id), name, age, and role. Each entry in this
table represents an individual user within the database.
HOME PAGE
SOURCE CODE

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Dream Shelf</title>

<style>

/* Basic Styles */

body {

background-color: #ffebcd; /* Light background color for a warm feel */

color: white;

font-family: Arial, sans-serif;

text-align: center;

position: relative;

overflow-x: hidden;

/* Circle shapes for a playful background */

.shape {

position: absolute;

border-radius: 50%;

opacity: 0.6;

z-index: -1;

/* Different sizes, colors, and positions for shapes */

.shape.shape1 {

width: 150px;

height: 150px;

background-color: #f6d365;

top: 100px;

left: -50px;

.shape.shape2 {

width: 200px;

height: 200px;

background-color: #fda085;

top: 300px;

right: -70px;

.shape.shape3 {

width: 100px;

height: 100px;

background-color: #ff6f61;

bottom: 100px;

left: 50%;

transform: translateX(-50%);

.shape.shape4 {

width: 80px;

height: 80px;

background-color: #ff5252;

top: 500px;

left: 80px;
}

/* Header styling */

header {

padding: 20px;

background: rgba(255, 255, 255, 0.8);

border-radius: 15px;

box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);

margin-bottom: 30px;

header h1 {

font-size: 3rem;

color: #ff6f61;

text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);

header p {

font-size: 1.2rem;

color: #666;

margin-top: 5px;

/* Navigation Styling */

nav a {

color: #ff6f61;

text-decoration: none;

margin: 0 15px;

font-size: 1.2rem;

transition: color 0.3s;

}
nav a:hover {

color: #ff1744;

text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

/* Image styling */

.shelf-image {

display: block;

margin: 20px auto;

padding: 10px;

max-width: 80%;

height: auto;

border: 3px solid #ff6f61;

border-radius: 20px;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

transition: transform 0.2s;

.shelf-image:hover {

transform: scale(1.05);

/* Footer styling */

footer {

margin-top: 20px;

color: #666;

font-size: 1rem;

footer p {
margin: 5px;

text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);

</style>

</head>

<body>

<div class="shape shape1"></div>

<div class="shape shape2"></div>

<div class="shape shape3"></div>

<div class="shape shape4"></div>

<h1>Welcome to the Dream Shelf</h1>

<p>Shelves Of Knowledge for Every Child's Dream</p>

<p>Empowering Children with Access to Books, Offline!</p>

</header>

<style>

/* Other styles */

nav a {

color: white; /* Change link color to white */

text-decoration: none; /* Optional: remove underline */

nav a:hover {

color: #ff6f61; /* Change hover color if desired */

}

</style>

</head>

<body>

<nav>

<a href="AboutUs.html">About Us</a>

</nav>

</body>

<section style="text-align: center; margin: 50px 0;">

<h4 style="color: #ff6f61; font-size: 3rem; margin-top: 20px;">REGISTER HERE</h4>

<p style="color: white; font-size: 1.5rem; margin-bottom: 20px;">Click on the image below to
register ↓</p>

<img class="shelf-image" src="the teacher.jpg" alt="Teacher Image" style="width: 80%; max-

width: 700px; height: auto; padding: 15px; border: 3px solid white; border-radius: 15px;">

</a>

</section>

<section style="text-align: center; margin: 50px 0;">

<h4 style="color: #ff6f61; font-size: 3rem; margin-top: 20px;">Already Registered?</h4>

<p style="color: white; font-size: 1.5rem; margin-bottom: 20px;">Click on the image below to log
in ↓</p>

</a>

</section>

<p>© 2024 DREAM SHELF. All Rights Reserved.</p>

</footer>

</body>

</html>

HTML Document Structure

1. Document Type & Language:

o <!DOCTYPE html>: Declares the document type as HTML5.

o <html lang="en">: Indicates that the content is in English.

2. Head Section:

o Meta Tags:

 Sets character encoding to UTF-8 for proper display of characters.

 Ensures responsiveness on different devices with the viewport meta tag.

o Title: Defines the title of the web page as "Dream Shelf."

o Styles:

 Links to an external CSS file (style-edited.css) for additional styling.

 Contains internal CSS for unique styles, including:

 Body background color, text alignment, and font settings.

 Decorative circles (.shape) in varying sizes and colors for a playful

background.

 Header and navigation styles to enhance visual appeal.

 Image effects for hover interactions and layout formatting.

3. Body Section:

o Background Shapes: Contains four div elements that create decorative shapes
positioned absolutely in the background.

o Header: Introduces the site with a welcome message and slogans, styled for
prominence (e.g., text shadow, background).

o Navigation: A simple navigation link to the "About Us" page styled to change color
on hover.

o Registration & Login Sections:

 Two sections urging users to register or log in, each accompanied by
descriptive text and an image link that triggers an action when clicked.

o Footer: Provides copyright information.

User Interaction Features

 Links: Includes navigation and action links that are easily identifiable and responsive.

 Hover Effects: Provides visual feedback when users interact with elements (e.g., navigation
links and images).
ABOUT US
SOURCE CODE

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>About Us - Dream Shelf</title>

<link rel="stylesheet" href="style-edited.css">

</head>

<body>

<h1>Welcome to the Dream Shelf</h1>

<p>Your trusted source for fun educational and entertaining content!</p>

</header>

<nav>

</nav>

<h1>About Us</h1>

<p>Hello parents, teachers, and guardians! At Dream Shelf, we believe in fostering a love for
reading and lifelong learning for every child, especially those between the ages of <mark>6 and
12</mark>. Our mission is to empower young minds by providing access to engaging books,
educational audio logs, and creative activities that encourage curiosity, imagination, and
learning.!</p>

<p>We understand that every story is more than just words on a page—it's an opportunity
for children to experience diverse worlds, broaden their perspectives, and build a strong
foundation for their education. Whether it’s exploring the wonders of nature, learning valuable
life lessons through relatable characters, or exercising problem-solving skills with interactive
games, Dream Shelf is dedicated to offering content that enriches children’s lives.!📚✨</p>

<p>Through this library, we aim to support you—parents, educators, and mentors—in

nurturing a child's growth in a fun and safe environment. Join us in our mission to make reading
and learning an exciting adventure for every child, sparking joy, creativity, and a lifelong passion
for knowledge.! 🤩</p>

<p>With Dream Shelf, every turn of the page opens up a new adventure. Join us and let's
unlock the magic of reading together! You'll never run out of fun stories to explore!</p>

<p>So grab your favorite book, and let your imagination fly! 🤩🌈</p>

</div>

<p>© 2024 DREAM SHELF. All Rights Reserved.</p>

</footer>

</body>

</html>

OVERVIEW

The HTML document outlines the "About Us" page for "Dream Shelf." It begins with declarations
indicating the document is HTML5 and set in English. The <head> section includes metadata for
character encoding and responsiveness, a title for the page, and links to an external CSS file for
styling.

In the <body> section, a header welcomes visitors, presenting the site's mission as a source of
fun and educational content. The navigation panel features a link to the homepage. The main
content area contains an "About Us" section that addresses parents and educators, emphasizing
the organization's commitment to fostering a love for reading and learning among children aged
6 to 12. This section includes several paragraphs that detail the organization's goals, highlighting
the transformative power of stories and inviting community support.
Lastly, the footer presents copyright information for "Dream Shelf." Overall, the structure is
designed for user-friendliness, blending playful language with professional communication to
effectively convey the organization's values and offerings.
BOOKS PAGE
SOURCE CODE

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Search Here</title>

<link rel="stylesheet" href="style-edited.css">

<style>

.back-button {

text-align: center;

margin-bottom: 20px;

.back-button a {

text-decoration: none;

color: #ffffff;

background-color: #ff6f61;

padding: 15px 25px;

border-radius: 30px;

display: inline-flex;

align-items: center;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

transition: background-color 0.3s, transform 0.3s;

font-size: 1.2rem;

.back-button a:hover {

background-color: #e65c52;
transform: scale(1.05); /* Slightly increase size on hover */

.back-button a:before {

content: '←'; /* Back arrow */

margin-right: 10px; /* Space between icon and text */

font-size: 1.2rem; /* Adjust icon size */

</style>

</head>

<body>

<h1>FIND A DREAM BOOK</h1>

<p>Shelves Of Knowledge for every child's dream</p>

<p>Empowering children with access to books, offline!</p>

<a href="mainpage.html">Back to Home</a>

</div>

</header>

<input type="text" id="search" placeholder="Search for a book...">

<button onclick="searchBooks()">Search</button>

</div>

<div class="book-list" id="book-list">

</div>

<button onclick="readText()">Read Text</button>

const books = [

{ title: "Colors", author: "Salma Gull", category: "Literature", availableOffline: true, link:
"https://drive.google.com/file/d/1Zv_0KR_Ave3NmSbpolSKUU2g5F4BJMyP/view" },
{ title: "Alice's Adventures in Wonderland", author: "Lewis Carroll", category: "Fantasy",
availableOffline: false, link:
"https://drive.google.com/file/d/1979mV4ZLjeTDrYV3XzQnGikP9zkxeiVP/view" },

{ title: "Peter Pan", author: "J.M. Barrie", category: "Fantasy", availableOffline: true, link:
"books/peter_pan.html" },

{ title: "Treasure Island", author: "Robert Louis Stevenson", category: "Adventure",

availableOffline: true, link:
"https://drive.google.com/file/d/0B4XD_Fp3V2FwWFkzVE9GT2NxZ2c/view?resourcekey=0-
gU5bi4nzewjIzQF8m6MFUg" },

{ title: "The Jungle Book", author: "Rudyard Kipling", category: "Adventure",

availableOffline: true, link: "offline_books/jungle_book.pdf" },

{ title: "Missing Letter", author: "Kulsoom Ayyaz", category: "Literature", availableOffline:

true, link: "https://drive.google.com/file/d/15CPx0Kn-e3OCvRc6B4AWQ0umM9E0JtSD/view" }

];

function displayBooks(booksToDisplay) {

const bookList = document.getElementById("book-list");

bookList.innerHTML = ""; // Clear current list

const groupedBooks = groupBooksByCategory(booksToDisplay);

for (const [category, books] of Object.entries(groupedBooks)) {

const categoryElement = document.createElement("div");

categoryElement.className = "category";

categoryElement.innerHTML = `<h2>${category}</h2>`;

bookList.appendChild(categoryElement);

books.forEach(book => {

const bookElement = document.createElement("div");

bookElement.className = "book";

bookElement.innerHTML = `

<h3><a href="${book.link}" target="_blank">${book.title}</a></h3>

<p>Author: ${book.author}</p>

<p>${book.availableOffline ? "Available Offline" : "Online Only"}</p>

`;
categoryElement.appendChild(bookElement);

});

function groupBooksByCategory(books) {

return books.reduce((grouped, book) => {

const category = book.category;

if (!grouped[category]) {

grouped[category] = [];

grouped[category].push(book);

return grouped;

}, {});

function searchBooks() {

const searchInput = document.getElementById("search").value.toLowerCase();

const filteredBooks = books.filter(book => book.title.toLowerCase().includes(searchInput)

|| book.author.toLowerCase().includes(searchInput));

displayBooks(filteredBooks);

function readText() {

const synth = window.speechSynthesis;

const bookList = document.getElementById("book-list").innerText;

const utterThis = new SpeechSynthesisUtterance(bookList);

synth.speak(utterThis);

window.addEventListener('load', () => {
displayBooks(books);

if (!navigator.onLine) {

alert("You are currently offline. Only offline books will be accessible.");

});

</script>

</body>

</html>

OVERVIEW

Key Components:

1. Header: Displays the main title and a brief description of the website, along with a
navigation link back to the homepage.

2. Search Functionality: Includes an input field for users to type book titles or authors and a
search button that filters and displays matching results.

3. Dynamic Book List: Utilizes JavaScript to present a list of books, organized by category. Each
book entry includes the title, author, availability status, and a link to view the book.

4. Text-to-Speech Feature: Offers an option to read the book list aloud using the Web Speech
API, enhancing accessibility.

5. Responsive Design: Includes basic CSS for layout and styling, ensuring a visually appealing
interface that works well on different devices.

The webpage is designed to empower users, particularly children, by providing easy access to a
variety of books, both online and offline.
AUDIO LOGS
SOURCE CODE.

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Audio Logs - Dream Shelf</title>

<link rel="stylesheet" href="style-audio.css">

<style>

/* Resetting margin, padding, and box-sizing */

margin: 0;

padding: 0;

box-sizing: border-box;

/* Body styling */

body {

font-family: 'Arial', sans-serif;

background: linear-gradient(to right, #ffefba, #ffffff);

padding: 20px;

color: #333;

/* Header styling */

header {

text-align: center;

padding: 30px;

background: rgba(255, 255, 255, 0.9);

border-radius: 15px;

box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);

margin-bottom: 40px;

animation: fadeIn 1.2s ease-in-out;

header h1 {

font-size: 3rem;

color: #ff6f61;

font-weight: bold;

margin-bottom: 10px;

/* Back button styling */

.back-button {

text-align: center;

margin-bottom: 20px;

.back-button a {

text-decoration: none;

color: #ffffff;

background-color: #ff6f61;

padding: 15px 25px;

border-radius: 30px;

display: inline-flex;

align-items: center;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

transition: background-color 0.3s, transform 0.3s;

font-size: 1.2rem;

}
.back-button a:hover {

background-color: #e65c52;

transform: translateY(-3px);

/* Category container styling */

.category {

margin: 30px 0;

padding: 20px;

background: #ffffff;

border: 2px solid #ff6f61;

border-radius: 10px;

box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);

animation: slideIn 1.5s ease;

.category h2 {

color: #ff6f61;

text-align: center;

margin-bottom: 20px;

font-size: 1.8rem;

font-weight: bold;

/* Story links */

.story {

margin: 10px 0;

text-align: center;

}
.story a {

display: inline-block;

color: #ffffff;

text-decoration: none;

padding: 10px 20px;

border-radius: 30px;

transition: background-color 0.3s, transform 0.3s;

font-size: 1.1rem;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

.story a:nth-child(odd) {

background-color: #6db3f2;

.story a:nth-child(even) {

background-color: #ffab40;

.story a:hover {

background-color: #ff6f61;

transform: translateY(-3px);

/* Footer styling */

footer {

text-align: center;

margin-top: 50px;

color: #666;

font-size: 1rem;

font-weight: bold;
opacity: 0.9;

/* Keyframe animations */

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

@keyframes slideIn {

from { transform: translateY(30px); opacity: 0; }

to { transform: translateY(0); opacity: 1; }

</style>

</head>

<body>

<i> <h1>Audio Logs - Listen to Stories!</h1></i>

<p>Enjoy our collection of offline stories.</p>

<a href="mainpage.html">Back to Home</a>

</div>

</header>

<h2>Literature</h2>

<p><a href="1.The-Tale-of-Peter-Rabbit.mp3" download>Story 1: The Tale of Peter

Rabbit</a></p>

</div>
<div class="story">

<p><a href="audio/literature_story2.mp3" download>Story 2: Aesop’s Fables</a></p>

</div>

<p><a href="audio/literature_story3.mp3" download>Story 3: The Velveteen

Rabbit</a></p>

</div>

<p><a href="audio/literature_story4.mp3" download>Story 4: The Secret

Garden</a></p>

</div>

<p><a href="audio/literature_story5.mp3" download>Story 5: Peter Pan</a></p>

</div>

<h2>Fantasy</h2>

<p><a href="2.forest-lullaby-.mp3" download>Story 1: Forest Lullaby</a></p>

</div>

<p><a href="3.Hansel-and-Gretel.mp3" download>Story 2: Hansel and Gretel</a></p>

</div>

<p><a href="audio/fantasy_story3.mp3" download>Story 3: The Hobbit</a></p>

</div>

<p><a href="audio/fantasy_story4.mp3" download>Story 4: Alice in Wonderland</a></p>

</div>

<div class="story">
<p><a href="audio/fantasy_story5.mp3" download>Story 5: Howl's Moving
Castle</a></p>

</div>

<h2>Adventure</h2>

<p><a href="4.St-George-and-the-Dragon.mp3" download>Story 1: St-George and the

Dragon</a></p>

</div>

<p><a href="audio/adventure_story2.mp3" download>Story 2: The Adventures of Tom

Sawyer</a></p>

</div>

<p><a href="audio/adventure_story3.mp3" download>Story 3: Robinson Crusoe</a></p>

</div>

<p><a href="audio/adventure_story4.mp3" download>Story 4: The Jungle Book</a></p>

</div>

<p><a href="audio/adventure_story5.mp3" download>Story 5: The Call of the

Wild</a></p>

</div>

</footer>
</body>

</html>

Structure and Components:

1. Document Metadata:

o The document is set to use UTF-8 encoding and is optimized for responsive design
on various devices.

2. External Stylesheet:

o A linked stylesheet (style-audio.css) is included for additional styling related to the

audio log features.

3. Inline CSS Styles:

o Global CSS rules reset margins and paddings and define a gradient background, font
styles, and layout designs for the elements like the header, categories, and story
links to enhance aesthetics and usability.

o Keyframe animations (fadeIn and slideIn) are defined to provide visual effects when
elements appear on the page.

4. Header Section:

o Contains the main title of the page, a descriptive subtitle, and a back button that
links to the homepage (mainpage.html).

5. Story Categories:

o Three categories—Literature, Fantasy, and Adventure—are each enclosed in a

styled div.

o Each category contains links to multiple audio stories, with hyperlinks enabling users
to download files directly. Each link is styled differently based on its placement
(odd/even).

6. Footer:

o Displays copyright information at the bottom of the page.

Features:

 The design is responsive with a clean layout, utilizing colors that enhance readability.

 The back button offers easy navigation, while the categorized list of audio stories provides
users with structured access to content.

 The use of CSS animations aids in creating a more engaging user experience.

Overall, this HTML document serves as a well-organized platform for listening to and
downloading audio stories, targeting an audience interested in literature and audio content.
GAMES SECTION
SOURCE CODE

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Games - Dream Shelf</title>

<link rel="stylesheet" href="style-edited.css">

</head>

<body>

<h1>Welcome to the Dream Shelf Games!</h1>

<p>Join us for some fun and learning!</p>

<a href="LIBRARY HOME PAGE.html">Back to Home</a>

<style>

.back-button {

text-align: center;

margin-bottom: 20px;

.back-button a {

text-decoration: none;

color: #ffffff;

background-color: #ff6f61;

padding: 15px 25px;

border-radius: 30px;

display: inline-flex;

align-items: center;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

transition: background-color 0.3s, transform 0.3s;

font-size: 1.2rem;

.back-button a:hover {

background-color: #e65c52;

transform: scale(1.05); /* Slightly increase size on hover */

.back-button a:before {

content: '←'; /* Back arrow */

margin-right: 10px; /* Space between icon and text */

font-size: 1.2rem; /* Adjust icon size */

</style>

</header>

<nav>

<a href="Books.html">Books</a>

<a href="audiologs.html">Audio Logs</a>

<a href="Games.html">Games</a>

</nav>
<div class="games-container">

<h2>Educational Games</h2>

<h3>Beginner Math</h3>

<iframe src="https://www.prodigygame.com/main-en/" width="100%" height="300"

allowfullscreen></iframe>

</div>

<h3>Words For Fun</h3>

<iframe src="https://www.educandy.com/" width="100%" height="300"

allowfullscreen></iframe>

</div>

<h3>Think Game</h3>

<iframe src="https://cdn.htmlgames.com/TripleDimensionsIceAge/" width="100%"

height="300" allowfullscreen></iframe>

</div>

<h3>Tic Tac Toe (Offline Version)</h3>

<p>Come play tic ac toe with us</p>

<a href="Games/My tic tac toe.html" target="_blank">Click to Play</a>

<p><em>(Compatible with Windows)</em></p>

</div>

<h3>Puzzle Game (Placeholder)</h3>

<p>Click the link below to play this exciting puzzle game!</p>

<a href="https://www.jigsawplanet.com" target="_blank">Play Jigsaw Puzzle!</a>

</div>
<div class="game">

<h3>Matching Animals (Placeholder)</h3>

<p>Click the link below to explore this fun animal matching game!</p>

<a href="https://www.education.com/game/matching-animals/" target="_blank">Play

Animal Matching Game!</a>

</div>

<h3>Sudoku (Free Offline Game)</h3>

<p>Download this free Sudoku game to play offline!</p>

<a href="Games/Soduko game.html" target="_blank">Lets Play</a>

<p><em>(Compatible with Windows)</em></p>

</div>

</footer>

</body>

</html>

Detailed Structure and Components:

1. Document Metadata:

o <!DOCTYPE html>: This declaration defines the document type and version of HTML,
ensuring that browsers render the page in standards mode.

o <html lang="en">: Indicates the language of the document as English, which is

important for accessibility and search engine optimization (SEO).

o <head> Section:

 <meta charset="UTF-8">: Specifies the character encoding for the document

to support international characters and symbols.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">:

Ensures the webpage is mobile-responsive by setting the viewport width to
the device's width.
 <meta http-equiv="X-UA-Compatible" content="ie=edge">: Instructs
Internet Explorer to use the latest rendering engine.

 <title>Games - Dream Shelf</title>: Sets the title of the webpage, which

appears in the browser tab and is important for SEO.

 <link rel="stylesheet" href="style-edited.css">: Links to an external CSS file

(style-edited.css), allowing for separate styling and cleaner HTML code.

2. Header Section:

o <header>: Encloses introductory content for the webpage.

o <h1> and <p>: These elements deliver a welcoming message and invite users to join
interactive experiences through education and entertainment.

o Back Button:

 The back button is styled to stand out:

 .back-button styles center the button and add margin for spacing.

 The link (<a>) has no text decoration and is displayed as a flex item with
padding, rounded corners, and a background color, enhancing its visual
appeal.

 A hover effect (:hover) changes the background color and slightly scales the
button, providing interactive feedback.

 A left-pointing arrow is added before the text using the :before pseudo-
element.

3. Navigation Panel:

o <nav>: Contains navigation links that direct users to other sections of the site. This
enhances user experience by allowing quick access to important areas.

o Each <a> element represents a link to different pages (Home, Books, Audio Logs,
Games), using intuitive text for clarity.

4. Games Container:

o <div class="games-container">: Acts as a wrapper for all game-related content,

organizing the layout.

o Embedded Games:

 Multiple <div class="game"> elements, each representing one educational

game:

 Games are presented with a title (<h3>) and an <iframe> to embed

online games like "Beginner Math" and "Words For Fun." These
frames allow users to interact with content directly on the page
without navigating away.

 The allowfullscreen attribute on <iframe> enables users to expand

the games to full-screen mode, enhancing the playing experience.
o Links to Local and External Games:

 Some games, like Tic Tac Toe and Sudoku, offer downloadable or external
links, allowing for offline engagement (compatible with Windows).

 Descriptive text highlights the nature of these games, encouraging users to

explore various formats of play (online vs. offline).

5. Footer:

o <footer>: Contains copyright information, which is critical for legal purposes. It

reinforces the branding of the "Dream Shelf" project, promoting a sense of trust and
authority.

Design Considerations:

 The layout uses semantic HTML elements (header, nav, main, footer) that enhance the
structure and readability of the document, improving accessibility for screen readers and
search engines.

 CSS styles applied to buttons and interactive elements create a friendly and engaging user
experience, essential for educational platforms aimed at younger audiences or learners.

 Overall, this webpage design encourages exploration and learning through its interactive
components, ensuring an enjoyable user experience while maintaining a clear structure and
purpose.
KEY SCENARIOS FOR INTEGRATION TESTING
1. User Registration process
2. User login process
3. Access to Home page
4. Functionality of navigation bar
5. Search panel for books
6. Are the games playable
7. What requirements are needed for the software and hardware.

TESTING METHODOLOGY
REGISTRATION PAGE

Unit Testing

 Purpose: Validate individual components of the registration code (functions, classes,

methods).

 Tools: Frameworks like Jest, Mocha (for JavaScript), JUnit (for Java), PHPUnit (for PHP), etc.

 Approach:

o Test each function in isolation.

o Verify that input validation functions (like checking email formats) behave correctly.

o Confirm that data transformation functions (e.g., hashing passwords) yield expected
results.

o Mock dependencies (like database calls) when necessary.

2. Integration Testing

 Purpose: Ensure that different parts of the application work together.

 Tools: Postman, Supertest (for Node.js), or integration testing frameworks.

 Approach:

o Test the registration endpoint to ensure that it can receive data, process it, and return
the correct response.

o Validate that data is correctly stored in the database after registration.

o Check interactions between the user input, the validation logic, and the database.

o Confirm integration with third-party services (e.g., email verification, if applicable).

3. Functional Testing

 Purpose: Verify that the user registration feature meets functional requirements.

 Tools: Selenium, Cypress, or TestCafe for automated UI testing.

 Approach:
o Automate tests that simulate user registration scenarios (e.g., filling out the form,
submitting, and checking success messages).

o Test with valid input to ensure that registration is successful.

o Test with various invalid inputs (e.g., missing fields, invalid email formats) and validate
appropriate error messages.

o Check that fields expecting unique values (like email addresses) are handled correctly.

4. Usability Testing

 Purpose: Evaluate the user experience of the registration process.

 Approach:

o Observe real users as they attempt to register.

o Gather feedback on the registration form's layout, clarity of instructions, and ease of
use.

o Identify any points of confusion or frustration.

5. Security Testing

 Purpose: Assess the security of the registration process.

 Approach:

o Conduct tests for common vulnerabilities, including:

 SQL Injection: Ensure that malicious inputs are appropriately sanitized.

 Cross-Site Scripting (XSS): Validate that user inputs are sanitized to prevent
script injection.

 Password security: Ensure that passwords are stored securely (e.g., hashed)
and that user password policies are enforced (e.g., complexity requirements).

 Brute Force Protection: Test for mechanisms that limit the number of
registration attempts.

6. Performance Testing

 Purpose: Ensure the registration system performs well under various loads.

 Tools: JMeter, LoadRunner, or Apache Bench.

 Approach:

o Conduct load testing to see how the application performs under high traffic conditions
(many users attempting to register simultaneously).

o Check response times for registration requests and ensure they are within acceptable
limits.

7. Regression Testing

 Purpose: Verify that new changes or bug fixes do not negatively impact existing functionality.
 Approach:

o Rerun previous tests (unit, integration, functional) whenever changes are made to the
registration code to confirm that everything still works as expected.

8. End-to-End Testing

 Purpose: Validate the entire user registration flow from start to finish.

 Tools: Selenium, Cypress, or similar.

USER LOGIN

Introduction

The login page is a critical component of any web application, serving as the gateway for users to
access their accounts. Ensuring its functionality, security, and user experience is paramount. This
report outlines a comprehensive testing methodology designed to validate the login page code,
encompassing various types of testing to ensure robustness and reliability.

2. Objectives

The primary objectives of this testing methodology are to:

 Validate the functionality of the login process.

 Ensure security against common vulnerabilities.

 Assess performance under different load conditions.

 Evaluate user experience and usability.

 Confirm compatibility across various devices and browsers.

3. Testing Methodology Overview

3.1 Unit Testing

Purpose: To validate individual components of the login functionality.

 Scope:

o Test input validation functions (e.g., email format checks).

o Verify authentication logic (e.g., password hashing and comparison).

 Tools:

o Testing frameworks such as JUnit (Java), NUnit (.NET), or Jest (JavaScript).

 Approach:

o Each function related to the login process will be tested in isolation.

o Mock external dependencies (like database interactions) to ensure focused testing.

3.2 Integration Testing

Purpose: To ensure that different parts of the login mechanism work together correctly.
 Scope:

o Validate the interaction between the login form, validation logic, and backend
services.

o Verify that valid user credentials successfully authenticate and return the correct user
session.

 Tools:

o Postman for API testing and integration frameworks.

 Approach:

o Test the login API endpoints with valid and invalid credentials.

o Confirm that sessions are managed properly and necessary cookies are sent.

3.3 Functional Testing

Purpose: To ensure all functional requirements of the login page are met.

 Scope:

o Test all user flows related to the login process, including logging in, forgotten
password, and user feedback (error/success messages).

 Tools:

o Selenium WebDriver or Cypress for automated UI testing.

 Approach:

o Simulate user interactions with the login form, inputting various credentials to
validate success and error cases.

o Verify that all functionalities meet specified requirements, including redirects after
successful login and appropriate error handling.

3.4 Usability Testing

Purpose: To evaluate the ease of use of the login interface.

 Scope:

o Assess layout, clarity of instructions, and overall user experience.

 Approach:

o Recruit real users to navigate the login page, gathering feedback on usability.

o Use techniques like A/B testing to optimize the interface based on user interactions.

3.5 Security Testing

Purpose: To identify and mitigate security vulnerabilities.

 Scope:
o Test for common vulnerabilities such as SQL Injection, Cross-Site Scripting (XSS), and
Brute Force attacks.

 Tools:

o OWASP ZAP or Burp Suite for penetration testing.

 Approach:

o Conduct vulnerability scans and manual testing to exploit potential flaws.

o Ensure adherence to best practices in password security (e.g., hashing and salting)
and session management.

3.6 Performance Testing

Purpose: To assess the responsiveness and stability of the login system under various conditions.

 Scope:

o Evaluate load handling capabilities and response times during high traffic.

 Tools:

o JMeter or Gatling for performance testing.

 Approach:

o Simulate multiple users attempting to log in simultaneously to observe system

behavior and response times.

o Identify bottlenecks and optimize as necessary.

3.7 Regression Testing

Purpose: To ensure that recent changes do not negatively impact existing functionality.

 Scope:

o Verify that previously passing tests continue to do so after modifications.

 Approach:

o Maintain a suite of automated tests that run after every deployment to flag any
regressions in the login functionality.

3.8 Compatibility Testing

Purpose: To ensure that the login page functions correctly across different browsers and devices.

 Scope:

o Test compatibility with major browsers (Chrome, Firefox, Safari, Edge) and various
devices (desktop, tablet, mobile).

 Approach:

o Use tools like BrowserStack or Sauce Labs to perform cross-browser testing.

o Verify that the responsive design functions appropriately on different screen sizes.
INTEGRATION TESTING TOOLS
PHPUnit

 Description: The de facto standard testing framework for PHP.

 Use Cases: Suitable for unit testing, it also supports integration tests, especially using its
TestCase structure to perform database interactions and check business logic.

Laravel Dusk

 Description: A powerful testing and automation tool for Laravel applications.

 Use Cases: Provides end-to-end testing functionalities in a browser, allowing for integration
tests that verify how the application behaves with the UI and backend together.

Selenium WebDriver

 Description: A tool for automating web browsers, it supports various programming languages,
including tests written in PHP using bindings.

 Use Cases: Ideal for browser-based integration tests between HTML, JavaScript, and PHP web
applications, validating that all components interact correctly.

JAVA_PROJECT
No ratings yet
JAVA_PROJECT
17 pages
Introduction To Bootstrap
No ratings yet
Introduction To Bootstrap
82 pages
Genemapper ID v3.1 e v3.2
No ratings yet
Genemapper ID v3.1 e v3.2
64 pages
CCS370 LAB MANUAL (2)
No ratings yet
CCS370 LAB MANUAL (2)
45 pages
HTML-CSS Practical File 1
No ratings yet
HTML-CSS Practical File 1
42 pages
cd2c88379299230b9d7afffb15bbe296
No ratings yet
cd2c88379299230b9d7afffb15bbe296
1 page
Self Learning Activity-WPD -S25 (1)
No ratings yet
Self Learning Activity-WPD -S25 (1)
43 pages
design-and-implementation-of-online-hotel-reservation-system-1
No ratings yet
design-and-implementation-of-online-hotel-reservation-system-1
54 pages
HarshithaNovanectarReport
No ratings yet
HarshithaNovanectarReport
41 pages
Web-D Report Final
No ratings yet
Web-D Report Final
50 pages
Ex Code Funnel Building
No ratings yet
Ex Code Funnel Building
19 pages
LESSON: Exam Blueprint: © 2019 Digital Cloud Training - Ultimate Certified Cloud Practitioner Exam Training 2020 1
100% (1)
LESSON: Exam Blueprint: © 2019 Digital Cloud Training - Ultimate Certified Cloud Practitioner Exam Training 2020 1
31 pages
WP Manual Complete
No ratings yet
WP Manual Complete
30 pages
Tornado Stable PDF
No ratings yet
Tornado Stable PDF
239 pages
frontend (2) presentation
No ratings yet
frontend (2) presentation
41 pages
Nfuse
No ratings yet
Nfuse
30 pages
Coding template from work
No ratings yet
Coding template from work
5 pages
HTML Word Programs
No ratings yet
HTML Word Programs
17 pages
IS221 Exam
No ratings yet
IS221 Exam
22 pages
MAD Summer 23
No ratings yet
MAD Summer 23
35 pages
CSS Word Project
No ratings yet
CSS Word Project
39 pages
Industrial Training Report
No ratings yet
Industrial Training Report
25 pages
Mini Project Report (2) RWPD
No ratings yet
Mini Project Report (2) RWPD
17 pages
index.html
No ratings yet
index.html
19 pages
!DOCTYPE html1
No ratings yet
!DOCTYPE html1
6 pages
installing-postgres-17-using-source-files
No ratings yet
installing-postgres-17-using-source-files
4 pages
AD0-E134 Exam – Free Actual Q&As, Page 1 _ ExamTopics
No ratings yet
AD0-E134 Exam – Free Actual Q&As, Page 1 _ ExamTopics
22 pages
nintendo blogger mine
No ratings yet
nintendo blogger mine
18 pages
Code
No ratings yet
Code
32 pages
Modern_Chair_Website_Synopsis
No ratings yet
Modern_Chair_Website_Synopsis
20 pages
eMarketing-Chapter-6-Web-development-and-design
No ratings yet
eMarketing-Chapter-6-Web-development-and-design
18 pages
Text
No ratings yet
Text
15 pages
saanp file
No ratings yet
saanp file
37 pages
Doctype HTML
No ratings yet
Doctype HTML
5 pages
index.html
No ratings yet
index.html
12 pages
Web Assign
No ratings yet
Web Assign
7 pages
Parallel Worlds A Journey Through Creation, Higher Dimensions, and The Future of The Cosmos
0% (1)
Parallel Worlds A Journey Through Creation, Higher Dimensions, and The Future of The Cosmos
1 page
Banking Management SystemPages.html
No ratings yet
Banking Management SystemPages.html
20 pages
styling
No ratings yet
styling
5 pages
Practical 12
No ratings yet
Practical 12
34 pages
Web Database Assignment
No ratings yet
Web Database Assignment
7 pages
under25
No ratings yet
under25
10 pages
JNA_HTML5_Explained
No ratings yet
JNA_HTML5_Explained
4 pages
first try
No ratings yet
first try
9 pages
UIUX Final Lab Manual
No ratings yet
UIUX Final Lab Manual
30 pages
Untitled document
No ratings yet
Untitled document
7 pages
Activity 13
No ratings yet
Activity 13
20 pages
preindex.html
No ratings yet
preindex.html
5 pages
portfolio code
No ratings yet
portfolio code
66 pages
Website Cretion Urban Fashion
No ratings yet
Website Cretion Urban Fashion
16 pages
Ip Sample Paper 4
No ratings yet
Ip Sample Paper 4
8 pages
Exp 14
No ratings yet
Exp 14
7 pages
BAHAY'
No ratings yet
BAHAY'
3 pages
Software Testing Project Review1
No ratings yet
Software Testing Project Review1
5 pages
Web Assignment
No ratings yet
Web Assignment
7 pages
web assignment (1)
No ratings yet
web assignment (1)
7 pages
Dribbble Clone
No ratings yet
Dribbble Clone
7 pages
Document 1
No ratings yet
Document 1
3 pages
Document 1
No ratings yet
Document 1
3 pages
Cake Order Synopsis
No ratings yet
Cake Order Synopsis
3 pages
Nicolas Buttarelli CV
No ratings yet
Nicolas Buttarelli CV
4 pages
intern project
No ratings yet
intern project
36 pages
Instructions SC WD19 2a
No ratings yet
Instructions SC WD19 2a
4 pages
Almas
No ratings yet
Almas
1 page
HTML HTML
No ratings yet
HTML HTML
9 pages
Palo Alto Networks Firewall 10.2 Troubleshooting EDU-330 Courseware Version A April 2022 - Lab
100% (1)
Palo Alto Networks Firewall 10.2 Troubleshooting EDU-330 Courseware Version A April 2022 - Lab
258 pages
1.html
No ratings yet
1.html
4 pages
Operate A Personal Computer Theory Assessment
No ratings yet
Operate A Personal Computer Theory Assessment
3 pages
Web Programming - 240207 - 215505
No ratings yet
Web Programming - 240207 - 215505
6 pages
Spring Rest: Spring Rest Is A Practical Guide For Designing and Developing Restful Apis Using The
No ratings yet
Spring Rest: Spring Rest Is A Practical Guide For Designing and Developing Restful Apis Using The
1 page
New Text Document
No ratings yet
New Text Document
6 pages
Wek
No ratings yet
Wek
19 pages
122A9049 WCN EXP 4
No ratings yet
122A9049 WCN EXP 4
10 pages
Flipbook 3D Documentation V0.1
0% (1)
Flipbook 3D Documentation V0.1
7 pages
Noman Code
No ratings yet
Noman Code
4 pages
code.pdf
No ratings yet
code.pdf
7 pages
Drawing Tutorial FreeCAD
No ratings yet
Drawing Tutorial FreeCAD
4 pages
Security Headers Cheat Sheet
No ratings yet
Security Headers Cheat Sheet
7 pages
READ ME 20th Century Fox Blender Instructions
100% (1)
READ ME 20th Century Fox Blender Instructions
2 pages
Components of An Android Application: 1. Activities
100% (1)
Components of An Android Application: 1. Activities
3 pages
Zibo Install Guide
100% (1)
Zibo Install Guide
44 pages
CSS Cheat Sheet
No ratings yet
CSS Cheat Sheet
4 pages
FSWD
No ratings yet
FSWD
16 pages
Become A Bounty Hunter
100% (3)
Become A Bounty Hunter
157 pages
CodeCraft: A Beginner's Guide To CSS
From Everand
CodeCraft: A Beginner's Guide To CSS
Francis Mukobi
No ratings yet
CSS3 Reference: An Alphabetical Guide
From Everand
CSS3 Reference: An Alphabetical Guide
Jo Foster
No ratings yet
The Basics of CSS (Cascading Style Sheets) Coding For Beginners: Learn Basic CSS Programming Concepts
From Everand
The Basics of CSS (Cascading Style Sheets) Coding For Beginners: Learn Basic CSS Programming Concepts
Roggie Clark
No ratings yet
Angular Shopping Store: From Scratch to Successful Payment
From Everand
Angular Shopping Store: From Scratch to Successful Payment
Abdelfattah Ragab
No ratings yet
CSS Grid Layout: 5 Practical Projects
From Everand
CSS Grid Layout: 5 Practical Projects
Craig Buckler
No ratings yet
Mastering JavaScript: The Complete Guide to JavaScript Mastery
From Everand
Mastering JavaScript: The Complete Guide to JavaScript Mastery
Tim Robards
5/5 (1)

PHASE FIVE COMPLETE (1)

Uploaded by

PHASE FIVE COMPLETE (1)

Uploaded by

PHASE FIVE

o <html>: The root of our document.

o <body>: Here, we include all the visible content of the webpage.

o We use headings (<h1>, <h2>, etc.) to establish a clear hierarchical organization of

o We group related content together using <div> elements.

 Links and Navigation:

o We incorporate <iframe> elements to embed external games and interactive

2. CSS (Cascading Style Sheets):

 Flexbox: This allows us to create a flexible layout structure that aligns

 We used Java script to add interactive features to web pages:

o Structuring content meaningfully, which allows screen readers to interpret it

o Clearly defining links and buttons to indicate their purpose.

5. SEO (Search Engine Optimization):

 Weused PHP for backend coding

 HTML: We use this for markup and content structure.

 CSS: We employ it for styling and responsive design.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

background-color: #ffebcd; /* Light background color for a warm feel */

font-family: Arial, sans-serif;

/* Circle shapes for a playful background */

/* Different sizes, colors, and positions for shapes */

background: rgba(255, 255, 255, 0.8);

box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);

text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);

transition: color 0.3s;

text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

margin: 20px auto;

border: 3px solid #ff6f61;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

transition: transform 0.2s;

text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);

<div class="shape shape1"></div>

<div class="shape shape2"></div>

<div class="shape shape3"></div>

<div class="shape shape4"></div>

<h1>Welcome to the Dream Shelf</h1>

<p>Shelves Of Knowledge for Every Child's Dream</p>

<p>Empowering Children with Access to Books, Offline!</p>

color: white; /* Change link color to white */

text-decoration: none; /* Optional: remove underline */

color: #ff6f61; /* Change hover color if desired */

<a href="AboutUs.html">About Us</a>

<section style="text-align: center; margin: 50px 0;">

<h4 style="color: #ff6f61; font-size: 3rem; margin-top: 20px;">REGISTER HERE</h4>

<img class="shelf-image" src="the teacher.jpg" alt="Teacher Image" style="width: 80%; max-

<section style="text-align: center; margin: 50px 0;">

<h4 style="color: #ff6f61; font-size: 3rem; margin-top: 20px;">Already Registered?</h4>

<p>&copy; 2024 DREAM SHELF. All Rights Reserved.</p>

 DOCTYPE Declaration: Specifies that this is an HTML5 document.

o <meta charset="UTF-8">: Sets the character encoding to UTF-8.

o <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures

o <meta http-equiv="X-UA-Compatible" content="ie=edge">: Ensures compatibility

 Title: The title of the webpage is set to "Dream Shelf."

 Link to External CSS: <link rel="stylesheet" href="style-edited.css"> includes an external CSS

 Internal CSS Styles: A <style> section defines various styles, including:

The <body> contains the main content of the webpage:

4. Registration and Login Sections

 Both sections are structured similarly:

o Each section has a heading (<h4>) and a description (<p>).

 The footer contains copyright information and is simply styled.

There is a small issue present in the HTML:

$nameError = $ageMessage = $roleError = "";

$name = $age = $role = "";

// Database connection settings for registration database

$conn = new mysqli($servername, $username, $password, $dbname);

die("Connection failed: " . $conn->connect_error);

// Check if form is submitted

// Name Validation: Only letters allowed

$nameError = "Please enter a valid name (letters only).";

// Age Validation: Prevent submission if under 13

$ageMessage = "You must be at least 13 years old to proceed.";

<p>© 2024 DREAM SHELF. All Rights Reserved.</p>

/!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT /;

/!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS /;

/!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION /;

/!40101 SET NAMES utf8mb4 /;