Any and all help with this assignment would be greatly appreciated. If possible,
ID: 3710334 • Letter: A
Question
Any and all help with this assignment would be greatly appreciated. If possible, please explain the reason why you used each section of code. Thank you in advance!
COMP 5000/6000/6006 JSP Assignment 2 Library catalog Create a web application using JSP, MySOL, and the regular front-end technology stack (HTML, CSS, JavaScript) to allow patrons to interact with your local library's catalog online. Your application can include client-side JavaScript to make the interface more user-friendly, but it should always perform the necessary server-side validations to protect the integrity of the library's catalog and inventory Requirements The librarian has given you the following requirements: . The web application should include a log in and sign up page. Log in page should use a username and password. o o Sign up page should require the following fields: first name, last name, username, password, and password confirmation. o There should be a JSP session running to keep track of whether the user is logged in or not. Any user can browse the catalog, regardless of whether they've signed up or logged in. In other words, there should be no session check on the page that allows browsing of the catalog. o The user should be able to select from a list of topics that filters the books visible on the browsing screen. Filtering by a different topic than the one currently selected should fire off a query to the server -filtering should not be happening in the browser / JavaScript. If no topic is selected, the page should show all books. o o The following information should be shown at a minimum: Book title, book author whether it's available for checkout, and a way to reserve a copy. When they are logged in, users should be able to reserve a copy of their favorite available books from the browse catalog page. If not logged in, the user should still see the button to . reserve the copy which will take them to the log in page upon click. There should be a page which allows logged in users to show their list of reserved books. If not logged in, trying to navigate to this page (even via a direct URL) should require the user to . log in first. Database structure There is one SQL file attached with the assignment to create the database 'library catalog with the following structure:Explanation / Answer
I will be helping you with the first point i.e. the login page and signup page with session and some front end and js functions for validation.
First of all in the database in table users set the user_id to auto_increment during creation for easy managing. If you want some specific kind of auto generated user_id mention in comment section so that I can help you with that.
We need to create 4 files: login.jsp, loginaction.jsp, register.jsp, registeraction.jsp
here is the content of login.jsp
<%
if(session.getAttribute("user")!=null){
response.sendRedirect("index.jsp"); /* This will take the user to the index page if already logged in */
}
%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login</title>
<style>
body{position:absolute;width:100%;height:100%;background:url(images/hero15.jpg) no-repeat;
background-size: 100%;}
.main{
width:500px;
height:90%;
display:flex;
align-items:center;
position:relative;
margin:auto;
text-align:center;
}
body{
font-family:sans-serif;
clear:both;
margin:0;
background: #929292;
}
.box,.mask{
position: absolute;
margin-top: 150px;
border-radius: 5px;
top: 0;
left: 0;
width: 100%;
height: 320px;
}
.box{
text-align: center;
padding: 0px;
padding-bottom: 30px;
border: 0px solid white;
box-shadow: 0px 0px 35px 2px black;
background: #595959;
}
.mask{
background-size: 100%;
background-image: url(images/hero15.jpg);
filter: blur(20px);
}
.in{
width: 80%;
margin-bottom:10px;
background:transparent;
height: 40px;
border: 1px solid rgba(185, 177, 177, 0.42);
border-radius: 3px;
font-size: 22px;
background: rgba(111, 111, 111, 0.28);
color: white;
padding-left: 5px;
}
input::-webkit-input-placeholder {
color: white !important;
}
.btn{ width: 120px;
height: 40px;
font-size: 20px;
background: rgba(241, 230, 230, 0.3);
border: none;
color: #e6dddd;
border-radius: 3px;
margin-bottom:10px;
}
.calert{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.58);
color: white;
transition:ease-out 0.15s;
opacity:0;
display:none;
}
.msg{ position: relative;
top: 25%;
border-radius:9px;
background: white;
margin: auto;
width: 500px;
color: black;
text-align: center;
height: 300px;
font-size: 40px;
display: flex;
align-content: center;
align-items: center;
}
.msg > p{
margin: auto;
}
</style>
<script> /* These functions will help us show a custom pop up box */
function customalert(msg){
document.getElementById("calert").style.display="block";
document.getElementById("calert").style.opacity="1";
document.getElementById("msg").innerHTML="<p>"+msg+"</p>";
}
function disappear(){
document.getElementById("calert").style.opacity="0";
document.getElementById("calert").style.display="none";
}
</script>
</head>
<body>
<div class="main">
<div class="mask"></div>
<div class="box">
<h1>Login</h1><br>
<div class="form">
<form action="loginaction.jsp" method="post">
<input class="in" type="text" name="u" placeholder="Username" required>
<br>
<input class="in" type="password" name="p" placeholder="Password" required>
<br><input type="submit" value="Login" class="btn">
</form>
</div>
</div>
</div>
<div class="calert" id="calert">
<div id="msg" class="msg"><p id="message"></p></div>
</div>
</body>
</html>
---------------------------------------------------------------
Now here is the content of loginaction.jsp
<%@page import="java.sql.*" %>
<%
String name=request.getParameter("u");
String pass=request.getParameter("p");
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/library_catalog","root","");
PreparedStatement ps=con.prepareStatement("select * from users where username = ? AND password = ?");
ps.setString(1,name);
ps.setString(2,pass);
ResultSet rs=ps.executeQuery();
if(rs.next()){
String userid=rs.getString(1);
String fname=rs.getString(2);
String lname=rs.getString(3);
session.setAttribute("userid",userid); //Assign userid in session to track
session.setAttribute("name",fname+" "+lname);
}else{
RequestDispatcher rd=request.getRequestDispatcher("login.jsp");
rd.include(request,response);
out.println("<script>customalert('User does not exist!');</script><script>setTimeout(function() { disappear(); }, 3000);</script>");//error message to show if user is not registered
}
con.close();
}
catch(Exception e){
out.println(e);
}
%>
-------------------------------------------------------
Here is the content of register.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Register</title>
<style>
.main{text-align:center; padding:77px 0px; width:100%; position:absolute;}
.box{
background:#2196f3;
font-size:20px;
color:white;
text-shadow:0px 0px 10px black;
box-shadow:inset 0px 0px 40px black;
padding:20px;
border-radius:3px;
text-decoration:none;
display:inline-block;
margin:20px;
position:relative;
}
.imgs{
height: 250px;
}
body{margin:0;font-family:sans-serif;}
input,select{
width: 80%;
margin-bottom: 10px;
background: transparent;
height: 30px;
border: 1px solid rgba(185, 177, 177, 0.42);
border-radius: 3px;
font-size: 18px;
background: rgba(36, 34, 43, 0.37);
color: white;
padding-left: 5px;
}
input::-webkit-input-placeholder {
color: white !important;
}
.btn{ width: 120px;
height: 40px;
font-size: 20px;
background: linear-gradient(rgba(37, 67, 93, 0.37),rgba(8, 44, 175, 0.49));
border: none;
color: #e6dddd;
border-radius: 3px;
margin-bottom: 10px;
}
.calert{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.58);
color: white;
transition:ease-out 0.15s;
opacity:0;
display:none;
}
.msg{ position: relative;
top: 25%;
border-radius:9px;
background: white;
margin: auto;
width: 500px;
color: black;
text-align: center;
height: 300px;
font-size: 40px;
display: flex;
align-content: center;
align-items: center;
}
.msg > p{
margin: auto;
}
</style>
<script>
function customalert(msg){
document.getElementById("calert").style.display="block";
document.getElementById("calert").style.opacity="1";
document.getElementById("msg").innerHTML="<p>"+msg+"</p>";
}
function disappear(){
document.getElementById("calert").style.opacity="0";
document.getElementById("calert").style.display="none";
}
</script>
</head>
<body>
<div class="main">
<div class="box">
<form action="registeraction.jsp" method="post">
<table>
<tr><th colspan=2>Register</th></tr>
<tr><td>First name :</td><td><input type="text" name="fname" required></td></tr>
<tr><td>Last name :</td><td><input type="text" name="lname" required></td></tr>
<tr><td>Username :</td><td><input type="text" name="user" required></td></tr>
<tr><td>Password :</td><td><input type="password" name="pass" id="pass" required></td></tr>
<tr><td>Confirm password :</td><td><input type="password" name="conpass" id="conpass" required></td></tr>
<tr><td colspan=2><span id='message'></span></td></tr>
<tr><td colspan=2><input type="submit" class="btn"value="Sign up" id='btn' disabled='true'></td></tr>
</table>
</form>
</div>
<div class="calert" id="calert">
<div id="msg" class="msg"><p id="message"></p></div>
</div>
</div>
<script>
var check = function() {
if (document.getElementById('pass').value ==
document.getElementById('conpass').value) {
document.getElementById('message').style.color = 'green';
document.getElementById('message').innerHTML = 'matching';
document.getElementById('btn').disabled=false;
} else {
document.getElementById('message').style.color = 'red';
document.getElementById('message').innerHTML = 'not matching';
document.getElementById('btn').disabled=true;
}
}
</script>
</body>
</html>
----------------------------------------
Lastly this is the content of registeraction.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Register</title>
<style>
.main{text-align:center; padding:77px 0px; width:100%; position:absolute;}
.box{
background:#2196f3;
font-size:20px;
color:white;
text-shadow:0px 0px 10px black;
box-shadow:inset 0px 0px 40px black;
padding:20px;
border-radius:3px;
text-decoration:none;
display:inline-block;
margin:20px;
position:relative;
}
.imgs{
height: 250px;
}
body{margin:0;font-family:sans-serif;}
input,select{
width: 80%;
margin-bottom: 10px;
background: transparent;
height: 30px;
border: 1px solid rgba(185, 177, 177, 0.42);
border-radius: 3px;
font-size: 18px;
background: rgba(36, 34, 43, 0.37);
color: white;
padding-left: 5px;
}
input::-webkit-input-placeholder {
color: white !important;
}
.btn{ width: 120px;
height: 40px;
font-size: 20px;
background: linear-gradient(rgba(37, 67, 93, 0.37),rgba(8, 44, 175, 0.49));
border: none;
color: #e6dddd;
border-radius: 3px;
margin-bottom: 10px;
}
.calert{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.58);
color: white;
transition:ease-out 0.15s;
opacity:0;
display:none;
}
.msg{ position: relative;
top: 25%;
border-radius:9px;
background: white;
margin: auto;
width: 500px;
color: black;
text-align: center;
height: 300px;
font-size: 40px;
display: flex;
align-content: center;
align-items: center;
}
.msg > p{
margin: auto;
}
</style>
<script>
function customalert(msg){
document.getElementById("calert").style.display="block";
document.getElementById("calert").style.opacity="1";
document.getElementById("msg").innerHTML="<p>"+msg+"</p>";
}
function disappear(){
document.getElementById("calert").style.opacity="0";
document.getElementById("calert").style.display="none";
}
</script>
</head>
<body>
<div class="main">
<div class="box">
<form action="registeraction.jsp" method="post">
<table>
<tr><th colspan=2>Register</th></tr>
<tr><td>First name :</td><td><input type="text" name="fname" required></td></tr>
<tr><td>Last name :</td><td><input type="text" name="lname" required></td></tr>
<tr><td>Username :</td><td><input type="text" name="user" required></td></tr>
<tr><td>Password :</td><td><input type="password" name="pass" id="pass" required></td></tr>
<tr><td>Confirm password :</td><td><input type="password" name="conpass" id="conpass" required></td></tr>
<tr><td colspan=2><span id='message'></span></td></tr>
<tr><td colspan=2><input type="submit" class="btn"value="Sign up" id='btn' disabled='true'></td></tr>
</table>
</form>
</div>
<div class="calert" id="calert">
<div id="msg" class="msg"><p id="message"></p></div>
</div>
</div>
<script>
/* code to match the password and confirm password field and then enable the register button. otherwise the button remains disabled */
var check = function() {
if (document.getElementById('pass').value ==
document.getElementById('conpass').value) {
document.getElementById('message').style.color = 'green';
document.getElementById('message').innerHTML = 'matching';
document.getElementById('btn').disabled=false;
} else {
document.getElementById('message').style.color = 'red';
document.getElementById('message').innerHTML = 'not matching';
document.getElementById('btn').disabled=true;
}
}
</script>
</body>
</html>
There could be some blocks of code that you may have difficulty understanding. Kindly ask in the comment section mentioning the piece of code. I will help you out asap.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.