In this project, you are required to develop a simple shopping website. You need
ID: 3804313 • Letter: I
Question
In this project, you are required to develop a simple shopping website. You need to fulfill the following functionalities to earn credits. 1. User login function (15%) A json file stores a user's information list. (5%) A web page requests and verifies the user's login information (id and password). (10%) 2. Item List (35%) A json file stores an item list, containing at least twenty items. (5%) A web page displays an item list (10%) A web page displays the item details. (10%) Search function, and a web page displays searching result (10%) 3. Shopping cart (10%) A web page displays current shopping cart (10%) 4. GUI design (40%) 1, Replace all json functions above by MySQL database 2, User registration function register new users, and add new users' information into databaseExplanation / Answer
I am writing an HTML code for you. Open a text editor (like notepad or any other) and write code and then save it as html file. Run in browser.
Start and end with this :
<!DOCTYPE html>
<html>
<head>
<body>
</head>
</body>
</html>
1) User Login function:
<form action="/action_page.php">
<div class="imgcontainer">
<img src="img_sample2.png" alt="sample" class="sample">
</div>
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked"> Remember me
</div>
<div class="container">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
2) Item List:
<ol>
<li>Detail_1</li>
<li>Detail_2</li>
<li>Detail_3</li>
.........<li>Detail_20</li>
</ol>
Search Function:
var x = document.createElement("INPUT");
x.setAttribute("type", "search");
Also set the Input Seacrh Object Properties.
3) Shopping Cart:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<p>Shopping-cart icon on a button:
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-shopping-cart"></span> Shopping Cart
</button>
</p>
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.