1. Create a web page (index.html) which contains a typical “Registration” form (
ID: 3885165 • Letter: 1
Question
1. Create a web page (index.html) which contains a typical “Registration” form (e.g. the user submits a username and password to create a new account.
2. Create a servlet (RegistrationServlet) which receives the request from the Registration form and retrieves the username and password request parameters. Perform some simple test on the username and password. For example, check their length.
3. If the test fails send the user back a HTML page which includes a message explaining why the registration failed.
4. If the test passed, use the RequestDispatcher to direct the user to the Login page.
Usage is like: RequestDispatcher rd = request.getRequestDispatcher("skills.html"); rd.forward(request, response);
5. On the Login page, the user must fill a form with their username and password, as well as additional inputs - a text input to get their email address, and a checkbox indicating whether they wish to be contacted by email for marketing purposes.
6. On submission of the Login form, the request is to be processed by a Login servlet. In this servlet you can do a (hard-coded) test to verify the username and password. If the test fails, redirect to the Login page again. If the test passes, add the username, email address and marketing preference to the Session object as attributes.
7. Redirect to a servlet where the session attributes are retrieved from the session object, and inserted into the HTML output back to the user, effectively just confirming that they are logged in successfully and what their preferences are.
Explanation / Answer
1) Registration Form(HTML)
<form action="/action_page.php">
<div class="container">
<label><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<input type="checkbox" checked="checked"> Remember me
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
2) Registration Servlet
<html>
<body>
<form action="servlet/Register" method="post">
Name:<input type="text" name="userName"/><br/><br/>
Password:<input type="password" name="userPass"/><br/><br/>
Email Id:<input type="text" name="userEmail"/><br/><br/>
Country:
<select name="userCountry">
<option>India</option>
<option>Pakistan</option>
<option>other</option>
</select>
<br/><br/>
<input type="submit" value="register"/>
</form>
</body>
</html>
5) Registration Login Page
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn,.signupbtn {
float: left;
width: 50%;
}
/* Add padding to container elements */
.container {
padding: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
color: #000;
font-size: 40px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.