10. Assume that you are developing an application in order to provide online services to the users. To get the service, first, users have to register themselves. Design a user interface to read email id, name and date of birth; two buttons, PROCEED and CLEAR. When PROCEED is clicked, email id, name and date of birth entered should be verified and the user should be 18 years old to get registered. After successful verification, the next page should display the dataentered in the previous page along with a button GET OTP to get the OTP, a text box to type the displayed OTP and a SUBMIT button. When GET OTP is clicked, the same page should show the generated OTP. The user has to type the displayed OTP in the text box provided. After typing the OTP, when SUBMIT button is clicked, the generated OTP and the OTP typed in the textbox should be compared. Upon successful match, the page should show a message indicating the success or a suitable failure message otherwise. Include a JSP fragment file to display the date and time. Date and time should be displayed at the top of the web page. (Hint: OTP can be generated by using four digit random numbers).

Developed by : Neha, Deepa, Nayana

OUTPUT:

Page 1:

Online Service Portal

Page 2:

Name	Email	Date of Birth
prajwal	prajwal@gmail.com	1900-01-13
	224
Enter OTP

Page 3:

Sucessfully Registered to the Online Service Portal on Thu Jan 13 15:27:46 IST 2022

PAGE 1: p10.html

 
 
 <html>
<head><title>Service Portal</title></head>
<body><center>
<h1>Online Service Portal</h1>
<form action="display.jsp" method="POST"  name="myForm" onsubmit="return validateForm()">
<h3>Please fill in the following details</h3>
<table>
<tr><td>
<center>Email id:</td><td><input type='email' id="email" name="email" required="required">
</td></tr>
<tr><td>
<center>Name:</td><td><input type='text' id="name" name="name" required="required">
</td></tr>
<tr><td>
<center>Date of Birth:</td><td><input type="date" id="dob" name="dob" max="2023-12-31" required="required">

</td></tr>
<tr>
<td align="center"><input type="submit" value="Proceed"></td>
<td align="center"><input type="reset" value="Clear"></td>
</tr>


</table>
</form>
</center>


<script>

function validateForm() {
  let x = document.forms["myForm"]["dob"].value;

var dob = new Date(x);  
     
    var month_diff = Date.now() - dob.getTime();  
      
      
    var age_dt = new Date(month_diff);   
      
    //extract year from date      
    var year = age_dt.getUTCFullYear();  
      
    //now calculate the age of the user  
    var age = Math.abs(year - 1970);

console.log("age="+age+" year="+year);
  if (age<18 ) {

      alert("Enter Valid age");
    return false;
  }
} 


</script>
</body>
</html>

PAGE 2: display.jsp

 
 
 
<html>
<head>
<title>Generate OTP</title>
<script>
var num;
function GenerateOTP()
{
num=Math.floor(10000*Math.random());
document.getElementById("printOTP").innerHTML=num;
}
function MatchOTP()
{
e=document.getElementById("enteredOTP").value;
if(num==e)
window.location.href="sucess.jsp";
else
document.getElementById("fail").innerHTML="OTP Mismatched";
}
</script>
<%@page import="java.sql.*" %>
</head>
<body>
<%
String email=request.getParameter("email");
String name=request.getParameter("name");
String dob=request.getParameter("dob");
%>
<table width="40%" align="center">
<tr>
<th>Name</th>
<th>Email</th>
<th>Date of Birth</th>
</tr>
<tr align="center">
<td><%=name%></td>
<td><%=email%></td>
<td><%=dob%></td>
</tr>
<tr>
<td><input type="button" value="Get OTP" id="otp" onclick="GenerateOTP()"></td>
<td><p id="printOTP"></p></td>
</tr>
<tr>
<td>Enter OTP</td>
<td><input type="text" id="enteredOTP"></td>
<td><p id="fail"></p></td>
</tr>
<tr>
<td><input type="Submit" value="Submit" onclick="MatchOTP()"></td>
</tr>
</table>
</body>
</html>

PAGE 3: sucess.jsp

 
 
 <html>
<head>
<title>Sucess</title>
<%@page import="java.util.*"%>
</head>
<body>
<h1>Sucessfully Registered to the Online Service Portal on  <%= new 
Date().toString()%></h1>
</body>
</html>

BCA

WEB PROGRAMMING LAB

PART B