Create a table which should contain at least the following fields: name, password, email-id, phone number(these should hold the data from the registration form). Practice 'JDBC' connectivity. Write a JSP to connect to that database and extract data from the tables and display them. Insert the details of the users who register with the web site, whenever a new user clicks the submit button in the registration page.
Create a project folder, onlinebookstore, under the project folder create another folder and named it as WEB-INF along with it all html, jsp and other files can place here. If you create any of the html or jsp as home page name that file with index.
Watch the below video for more detailed information about environment setup.
Create the following files and saved in project folder.
index.html is the home page of our project from this page you can store user details like name, password, email-id and phone number using register form and also you can see already registered users information by click on Display Existing Users button.
index.html<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration</title>
</head>
<body>
<form name="retuser" method="post" action="RetData.jsp">
<input type="submit" name="retSubmit" value="Display Existing Users" />
</form>
<h1>Registration Page</h1>
<form name="reguser" method="post" action="newUser.jsp">
<table>
<tr>
<td>User ID</td>
<td><input type="text" name="uname" placeholder="Create User ID" required /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="upwd" placeholder="Create Password" required /></td>
</tr>
<tr>
<td>E-Mail ID</td>
<td><input type="email" name="email" placeholder="Enter E-Mail ID" required /></td>
</tr>
<tr>
<td>Mobile Number</td>
<td><input type="text" name="mno" placeholder="Mobile Number" maxlength="10" required /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Register"></td>
</tr>
</table>
</form>
</body>
</html>
When you click Register button it calls newUser.jsp page. This page is used to store details into database.
newUser.jsp<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Register New User</title>
</head>
<body>
<%
String userId = request.getParameter("uname");
String userPwd = request.getParameter("upwd");
String mailId = request.getParameter("email");
String mobile = request.getParameter("mno");
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/onlinebookstore","root","admin");
Statement stmt = con.createStatement();
String q = "insert into reg values('"+userId+"','"+userPwd+"','"+mailId+"','"+mobile+"');";
stmt.executeUpdate(q);
response.sendRedirect("index.html");
stmt.close();
con.close();
%>
</body>
</html>
To display all registered details click on Display Existing Users button it calls RetData.jsp
RetData.jsp<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registered Users</title>
</head>
<body>
<table border="1" cellpadding="15px">
<tr>
<th>S.No.</th>
<th>Name</th>
<th>E-Mail ID</th>
<th>Phone Number</th>
</tr>
<%
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/onlinebookstore","root","admin");
Statement stmt = con.createStatement();
String q = "select loginid,email,mobile from reg;";
ResultSet rs = stmt.executeQuery(q);
int i=1;
while(rs.next()){
out.print("<tr><td>"+i+"</td>");
out.print("<td>"+rs.getString("loginid")+"</td>");
out.print("<td>"+rs.getString("email")+"</td>");
out.print("<td>"+rs.getString("mobile")+"</td>");
out.print("</tr>");
i++;
}
stmt.close();
con.close();
%>
</table>
</body>
</html>
