In: Computer Science
HI.... just I want the <tags> of this scenario ....
Scenario-based Problem:
You are assigned to develop a web based Online Electronic showroom
in the Sultanate of oman using HTML 5 with CSS, basic JavaScript
and PHP&MySQL. The website should contain the following
webpages:
Homepage
Sign In
Sign Up
About Us
Product Details
Feedback
Contact Us
Following are the details about each page:
Page-1: HOMEPAGE (Design using Bootstrap)
This page should have picture/s, background color, text/headings with suitable font with link to all other pages and CSS.
Page-2: ABOUT US
This page should have a brief description of the company. This should contain a paragraph with sufficient text color, formatting tags, images, links and CSS.
Page-3 and 4:Product DETAILS
Each page should contain Tables with column span and row span, CSS, images, formatting tags, etc. Include any video related to the topic.
Page-5: SIGN IN (No database)
This should contain the login form with validations using HTML5, PHP form handling, database connectivity.
Page-6: SIGN UP
This should contain the Registration form with validations using JavaScript, PHP form handling, database connectivity. Display the records from the table.
Page-7: FEEDBACK (No database)
This should contain the Feedback form with validations using HTML 5 and PHP form handling. Display the feedback.
Page-8: CONTACT US
This should contain a paragraph with sufficient text color, formatting tags, images, links, CSS etc. Note: Kindly refer to the marking scheme for more information and clarity.
First create database in your mySQl database with the following queries
create database chquestion;
//then create following tables in your MySQL Database
create table chfeedback (text varchar(200));
create table chcontact (name varchar(20), no varchar(20), email varchar(50), text varchar(100));
create table chlogin (user varchar(20), pass varchar(20));
==============
Save file with index.html
==============
<html>
<head>
<title>Home
Page</title>
<!-- Latest compiled and minified CSS
-->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library
-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<!-- Latest compiled JavaScript
-->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<!-- css -->
<style>
center{color:red; font-weight:bold;
}
</style>
<body>
<nav class="navbar
navbar-default">
<div
class="container-fluid">
<div
class="navbar-header">
<a
class="navbar-brand" href="index.html">Company
Logo</a>
</div>
<ul
class="nav navbar-nav">
<li
class="active"><a
href="index.html">Home</a></li>
<li><a
href="about.html">About us</a></li>
<li><a
href="prod.html">Product Details</a></li>
<li><a
href="feed.php">Feedback</a></li>
<li><a
href="contact.php">Contact us</a></li>
</ul>
<ul
class="nav navbar-nav navbar-right">
<li><a
href="signup.php"><span class="glyphicon
glyphicon-user"></span> Sign Up</a></li>
<li><a
href="login.php"><span class="glyphicon
glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>My First Bootstrap
Website</h1>
<p>This is some text. in p
tag. the quick brown fox jumps over the lazy dog.
you can edit this text according to
your needs. the quick brown fox jumps over the lazy dog.
this text is placed inside
container class. This webpage
needs internet connectivity as
bootstrap is linked online. the quick brown fox jumps over the lazy
dog.</p>
<br/>
<div class = "row">
<div class
="col-md-4">
<img class="img-responsive"
src="https://cdn.pixabay.com/photo/2017/04/09/09/56/avenue-2215317__340.jpg"
>
<br><center>Image
1</center>
</div>
<div class
="col-md-4">
<img class="img-responsive"
src="https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
>
<br><center>Image
2</center>
</div>
<div class
="col-md-4">
<img class="img-responsive"
src="https://cdn.pixabay.com/photo/2015/12/01/20/28/fall-1072821__340.jpg"
>
<br><center>Image
3</center>
</div>
</div>
</div>
</body>
</html>
======================
Save file with feed.php
====================
<?php
include('connect.php');
?>
<html>
<head>
<title>Feedback</title>
<!-- Latest compiled and minified CSS
-->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library
-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<!-- Latest compiled JavaScript
-->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<!-- css -->
<style>
center{color:red; font-weight:bold;
}
</style>
<body>
<nav class="navbar
navbar-default">
<div
class="container-fluid">
<div
class="navbar-header">
<a
class="navbar-brand" href="index.html">Company
Logo</a>
</div>
<ul
class="nav navbar-nav">
<li
class="active"><a
href="index.html">Home</a></li>
<li><a
href="about.html">About us</a></li>
<li><a
href="prod.html">Product Details</a></li>
<li><a
href="feed.php">Feedback</a></li>
<li><a
href="contact.php">Contact us</a></li>
</ul>
<ul
class="nav navbar-nav navbar-right">
<li><a
href="signup.php"><span class="glyphicon
glyphicon-user"></span> Sign Up</a></li>
<li><a
href="login.php"><span class="glyphicon
glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Give Feedback
</h1>
<div class ="row">
<div
class="col-md-12">
<label>Write Feedback</label>
<br>
<form method="post" action
="feed.php">
<textarea class=
"form-control" name="text"
required></textarea><br/>
<input class="btn
btn-primary" type = "submit" name ="sub">
</form>
</div>
</div>
</div>
</body>
</html>
=============
Save file with contact.php
============
<?php
include('connect.php');
?>
<html>
<head>
<title>Contact
Page</title>
<!-- Latest compiled and minified CSS
-->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library
-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<!-- Latest compiled JavaScript
-->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<!-- css -->
<style>
center{color:red; font-weight:bold;
}
</style>
<body>
<nav class="navbar
navbar-default">
<div
class="container-fluid">
<div
class="navbar-header">
<a
class="navbar-brand" href="index.html">Company
Logo</a>
</div>
<ul
class="nav navbar-nav">
<li><a
href="index.html">Home</a></li>
<li><a
href="about.html">About us</a></li>
<li><a
href="prod.html">Product Details</a></li>
<li><a
href="feed.php">Feedback</a></li>
<li
class="active"><a href="contact.php">Contact
us</a></li>
</ul>
<ul
class="nav navbar-nav navbar-right">
<li><a
href="signup.php"><span class="glyphicon
glyphicon-user"></span> Sign Up</a></li>
<li><a
href="login.php"><span class="glyphicon
glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Contact us
</h1>
<div class = "row">
<div class
="col-md-8">
<!---this is a dummy map generated from
https://www.embedgooglemap.net/--->
<div class="mapouter"><div
class="gmap_canvas"><iframe width="800" height="500"
id="gmap_canvas"
src="https://maps.google.com/maps?q=university%20of%20san%20francisco&t=&z=13&ie=UTF8&iwloc=&output=embed"
frameborder="0" scrolling="no" marginheight="0"
marginwidth="0"></iframe><a
href="https://www.pureblack.de/webdesign-mainz/">webdesigner
mainz</a></div><style>.mapouter{text-align:right;height:500px;width:600px;}.gmap_canvas
{overflow:hidden;background:none!important;height:500px;width:600px;}</style></div>
</div>
<div class =
"col-md-4">
<div class ="row">
<form method ="post" action
="contact.php">
<div class =
"col-md-12">
<label>Name</label>
<input
class = "form-control" type ="text" name ="name" required>
</div>
<div class =
"col-md-12">
<label>Mobile number</label>
<input
class = "form-control" type ="number" name ="no" required>
</div>
<div class =
"col-md-12">
<label>Email</label>
<input
class = "form-control" type ="email" name ="email"
required>
</div>
<div class =
"col-md-12">
<label>Message</label>
<textarea class = "form-control" name ="text"
required></textarea>
</div>
<div class =
"col-md-12">
<br/>
<input
class = "btn btn-block" type ="submit" name ="sub" >
</div>
</form>
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</body>
<?php
if(isset($_POST['sub']))
{
$name = $_POST['name'];
$no = $_POST['no'];
$email = $_POST['email'];
$text = $_POST['text'];
$q= "insert into chcontact values
('$name','$no','$email','$text')";
$run = mysqli_query($con,$q);
if($run)
{
echo "<script>alert('feedback
submitted')</script>";
echo
"<script>window.open('contact.php?','_self')</script>";
}
else
{
echo
"<script>alert('Error in connecting to
database')</script>";
echo
"<script>window.open('contact.php?','_self')</script>";
}
}
?>
</html>
==================
connect.php
=========
<?php
$con = mysqli_connect('localhost','root');
mysqli_select_db($con,"chquestion");
?>
========
login.php
========
<?php
include('connect.php');
?>
<html>
<head>
<title>Home
Page</title>
<!-- Latest compiled and minified CSS
-->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library
-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<!-- Latest compiled JavaScript
-->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<!-- css -->
<style>
center{color:red; font-weight:bold;
}
</style>
<body>
<nav class="navbar
navbar-default">
<div
class="container-fluid">
<div
class="navbar-header">
<a
class="navbar-brand" href="index.html">Company
Logo</a>
</div>
<ul
class="nav navbar-nav">
<li
class="active"><a
href="index.html">Home</a></li>
<li><a
href="about.html">About us</a></li>
<li><a
href="prod.html">Product Details</a></li>
<li><a
href="feed.php">Feedback</a></li>
<li><a
href="contact.php">Contact us</a></li>
</ul>
<ul
class="nav navbar-nav navbar-right">
<li><a
href="signup.php"><span class="glyphicon
glyphicon-user"></span> Sign Up</a></li>
<li><a
href="login.php"><span class="glyphicon
glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Log in
</h1>
<br/>
<div class ="row">
<form action
="login.php" method = "post">
<label>username</label>
<input type = "text" name ="user"
required><br/>
<label>username</label>
<input type = "password" name ="pass"
required>
<input type = "submit" name ="sub" >
</form>
</div>
</div>
</body>
</html>
==========
signup.php
========
<?php
include('connect.php');
?>
<html>
<head>
<title>Home
Page</title>
<!-- Latest compiled and minified CSS
-->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library
-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<!-- Latest compiled JavaScript
-->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<!-- css -->
<style>
center{color:red; font-weight:bold;
}
</style>
<body>
<nav class="navbar
navbar-default">
<div
class="container-fluid">
<div
class="navbar-header">
<a
class="navbar-brand" href="index.html">Company
Logo</a>
</div>
<ul
class="nav navbar-nav">
<li
class="active"><a
href="index.html">Home</a></li>
<li><a
href="about.html">About us</a></li>
<li><a
href="prod.html">Product Details</a></li>
<li><a
href="feed.php">Feedback</a></li>
<li><a
href="contact.php">Contact us</a></li>
</ul>
<ul
class="nav navbar-nav navbar-right">
<li><a
href="signup.php"><span class="glyphicon
glyphicon-user"></span> Sign Up</a></li>
<li><a
href="login.php"><span class="glyphicon
glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Signup
</h1>
<div class = "row">
<div class
="col-md-4">
<div class ="row">
<form method ="post" action ="signup.php"
onsubmit="check()">
<div class
="col-md-12">
<label>Username</label>
<input
class="form-control" type = "text" name="user" required>
</div>
<div class
="col-md-12">
<label>Password</label>
<input
class="form-control" type = "password" name="pass" id
="pass"required>
</div>
<div class
="col-md-12">
<label>Confirm Password</label>
<input
class="form-control" type = "password" name="pass1" id="pass1"
required>
</div>
<div class
="col-md-12">
<br/>
<input
class="btn btn-primary" type ="submit" name ="sub">
</div>
</form>
</div>
</div>
<script>
function check()
{
var a =
document.getElementById("pass").value;
var a1 =
document.getElementById("pass1").value;
if(a==a1)
return
true;
else
return
false;
}
</script>
</div>
</div>
</body>
</html>
==========
about.html
=========
<html>
<head>
<title>About
us</title>
<!-- Latest compiled and minified CSS
-->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library
-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<!-- Latest compiled JavaScript
-->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<!-- css -->
<style>
mark{color:blue; font-weight:bold;
}
b {color: green;
font-size:22px;}
</style>
<body>
<nav class="navbar
navbar-default">
<div
class="container-fluid">
<div
class="navbar-header">
<a
class="navbar-brand" href="index.html">Company
Logo</a>
</div>
<ul
class="nav navbar-nav">
<li ><a
href="index.html">Home</a></li>
<li
class="active"><a href="about.html">About
us</a></li>
<li><a
href="prod.html">Product Details</a></li>
<li><a
href="feed.php">Feedback</a></li>
<li><a
href="contact.php">Contact us</a></li>
</ul>
<ul
class="nav navbar-nav navbar-right">
<li><a
href="signup.php"><span class="glyphicon
glyphicon-user"></span> Sign Up</a></li>
<li><a
href="login.php"><span class="glyphicon
glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>About us</h1>
<p>
This is
descriptive page.This is descriptive page.This is descriptive
page.This is descriptive page.This is descriptive page.
This is
descriptive page.This is descriptive page.This is descriptive
page.This is descriptive page.
This is
<mark>descriptive page</mark>.This is descriptive
page.This is descriptive page.This is descriptive page.This is
descriptive page.This is descriptive page.This is descriptive
page.
This is
descriptive page.This is descriptive page.This is descriptive
page.
This is
<strong>descriptive</strong> page.<br/>This is
descriptive page.
This is
descriptive page.This is descriptive page.This is descriptive
page.
This is
descriptive <u>page</u>.This is
<strike>descriptive page</strike>.This is descriptive
page.
This is
descriptive page.This is descriptive page.This is descriptive
page.
<font
color="red">this is descriptive page</font>. this is
decriptive page.
<br/>
</p>
<!-- link to image -->
<a
href="https://cdn.pixabay.com/photo/2015/12/01/20/28/fall-1072821__340.jpg">
<img class="img-responsive"
src="https://cdn.pixabay.com/photo/2015/12/01/20/28/fall-1072821__340.jpg"
>
</a>
<br/>
<b>Click
on the image to view</b>
</div>
</body>
</html>
========
prod.html
==========
<html>
<head>
<title>Product
Details</title>
<!-- Latest compiled and minified CSS
-->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library
-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<!-- Latest compiled JavaScript
-->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<!-- css -->
<style>
img {height:200px; }
</style>
<body>
<nav class="navbar
navbar-default">
<div
class="container-fluid">
<div
class="navbar-header">
<a
class="navbar-brand" href="index.html">Company
Logo</a>
</div>
<ul
class="nav navbar-nav">
<li ><a
href="index.html">Home</a></li>
<li><a
href="about.html">About us</a></li>
<li
class="active"><a href="prod.html">Product
Details</a></li>
<li><a
href="feed.php">Feedback</a></li>
<li><a
href="contact.php">Contact us</a></li>
</ul>
<ul
class="nav navbar-nav navbar-right">
<li><a
href="signup.php"><span class="glyphicon
glyphicon-user"></span> Sign Up</a></li>
<li><a
href="login.php"><span class="glyphicon
glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Product
Details</h1>
<br/>
<table class="table
table-hover">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td >Product 1</td>
<td >$200</td>
<td colspan="2"><img src =
"https://www.coghlans.com/images/products/products-camp-kitchen-thumb.jpg
" alt= "Error in loading image. check your internet
connection"></td>
</tr>
<tr>
<td >Product 2</td>
<td>$253.5</td>
<td colspan="2"><img src =
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ538WQtnx9tDKyD0VDC1687_g4jdULJoPjlbd4edYZ-40FL1XI"
alt= "Error in loading image. check your internet
connection"></td>
</tr>
<tr>
<td >Product 3</td>
<td >$210</td>
<td colspan="2"><img src =
"https://cdn.vox-cdn.com/thumbor/M17p2d3gDmdAjgnN7sD2vgd7SDg=/0x0:1024x683/1200x800/filters:focal(431x261:593x423)/cdn.vox-cdn.com/uploads/chorus_image/image/59318659/iphone8red_1024.1523277341.jpg"
alt= "Error in loading image. check your internet
connection"></td>
</tr>
<tr>
<td rowspan="2">Total</td>
<td>$xxx.xx</td>
</tbody>
</table>
<br>
<!-- video from youtube, related
to topic
-->
<iframe width="560" height="315"
src="https://www.youtube.com/embed/gqOEoUR5RHg" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen></iframe>
<br/>
<label>Video from youtube
about bootstrap</label>
<br/>
<br/>
</div>
</body>
</html>
===========
output
run this file in localhost