Prototype
A prototype is a kind of model that creators make at the beginning of development. The web application prototype is mostly JSPs that show screens. You don't need to implement program logic in prototypes except those required for testing or not change until the end of development.
The following is a list of JSP files required for our project.
DocumentBase
- index.jsp: Homepage
- error.jsp: Error page
/inc
- header.jsp: Logo, Membership menu(Login, Sign Up, Logout, Modify account)
- main-menu.jsp: Main menus
- extra.jsp: Image external Links
- footer.jsp: Copyright, Contact
- loginCheck.jsp: Pages that require authentication among pages that show screens include this page.
/users
I created a naming convention to append _proc to the end of the file name for JSP pages that do not display screens.
- user-sub.jsp: Membership menu
- login.jsp: Login form page
- login_proc.jsp: Login execution
- logout_proc.jsp: Logout execution
- signUp.jsp: Sign Up form page
- signUp_proc.jsp: Sign Up execution
- welcome.jsp: Welcome page
- editAccount.jsp: Account modify forom page
- editAccount_proc.jsp: Account modify execution
- changePasswd.jsp: Password change form page
- changePasswd_proc.jsp: Password change execution
- changePasswd_confirm.jsp: Passsword change confirmation page
- bye.jsp: Account Removal form page
- bye_proc.jsp: Account Removal execution
- bye_confirm.jsp: Account Removal confirmation page
/bbs
We will implement a bulletin board as Model 1 in JSPProject. In Model 1, clients request JSPs directly.
- bbs-sub.jsp: Board menu
- list.jsp: Board List page
- write.jsp: Board article write form page
- write_proc.jsp: Board article write execution
- view.jsp: Board detailed view page
- addComment_proc.jsp: Comment write execution
- updateComment_proc.jsp: Comment modify execution
- deleteComment_proc.jsp: Comment delete execution
- deleteAttachFile_proc.jsp: Attach file delete execution
- del_proc.jsp: Board article delete execution
- modify.jsp: Board article modify form page
- modify_proc.jsp: Board article modify execution
/java
- index.jsp: Java Home
Main page and Subpage Design
The first task of the website prototype is designing the main page and subpages.
The main page is the page you see when visiting a website called the homepage. A subpage is any page except the main page.
The output of this work is HTML files, a Style Sheet, and images. We will reuse them created in the CSS Layout chapter. Set https://github.com/kimjonghoon/css-layout
Copy the Style Sheet and images into the css and images folder, respectively, and copy HTML files to the document base.
Let's add the login logic to the prototype. Create a User class as follows.
User.java
package net.java_school.user;
public class User {
private String email;
private String passwd;
private String name;
private String mobile;
public User() {}
public User(String email, String passwd) {
this.email = email;
this.passwd = passwd;
}
public User(String email, String passwd, String name, String mobile) {
this.email = email;
this.passwd = passwd;
this.name = name;
this.mobile = mobile;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPasswd() {
return passwd;
}
public void setPasswd(String passwd) {
this.passwd = passwd;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getMobile() {
return mobile;
}
public void setMobile(String mobile) {
this.mobile = mobile;
}
}
The User class does not have an ID. We will use email instead of ID.
Login policy
- Only authenticated users can use the bulletin board.
- When an unauthenticated user visits a page that requires authentication, the program takes the user to the login page. The program transfers the URL that the user initially intended to see to the login page as a parameter. If the login is successful, the program redirects the login page to that URL.
- When a user visits the login page and tries to logs in and login is successful, the program redirects the login page to the first page of the chat bulletin board list.
- When a user logs out, the program redirects a page to the homepage.
Main page
Change the file name from index.html to index.jsp in the document base. Modify the contents of the index.jsp file as follows.
/index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="net.java_school.user.User" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="Main page" />
<meta name="Description" content="Main page" />
<title>Main page</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header">
<h1 style="float: left; width: 150px;"><a href="/"><img src="/images/ci.gif" alt="java-school" /></a></h1>
<div id="memberMenu" style="float: right; position: relative; top: 7px;">
<%
User loginUser = (User) session.getAttribute("user");
if (loginUser == null) {
%>
<input type="button" value="Login" onclick="location.href='/users/login.jsp'" />
<input type="button" value="SignUp" onclick="location.href='/users/signUp.jsp'" />
<%
} else {
%>
<input type="button" value="Logout" onclick="location.href='/users/logout_proc.jsp'" />
<input type="button" value="Modify Account" onclick="location.href='/users/editAccount.jsp'" />
<%
}
%>
</div>
</div>
<div id="main-menu">
<ul id="nav">
<li><a href="/java">Java</a></li>
<li><a href="/jdbc">JDBC</a></li>
<li><a href="/jsp">JSP</a></li>
<li><a href="/css-layout">CSS Layout</a></li>
<li><a href="/jsp-pjt">JSP Project</a></li>
<li><a href="/spring">Spring</a></li>
<li><a href="/javascript">JavaScript</a></li>
<li><a href="/bbs/list.jsp?boardCd=chat&curPage=1">BBS</a></li>
</ul>
</div>
<div id="container">
<div id="content">
</div>
</div><!-- container end -->
<div id="sidebar">
<h1>Main</h1>
</div>
<div id="extra">
<a href="http://www.youtube.com"><img src="/images/youtube.png" alt="youtube.com" /></a>
<a href="http://www.twitter.com"><img src="/images/twitter.png" alt="twitter.com" /></a>
<a href="http://www.facebook.com"><img src="/images/facebook.png" alt="facebook.com" /></a>
<a href="http://www.gmail.com"><img src="/images/gmail.png" alt="gmail.com" /></a>
<a href="http://www.java-school.net"><img src="/images/java-school.png" alt="java-school.net" /></a>
</div>
<div id="footer">
<ul>
<li><a href="#">Guide</a></li>
<li><a href="#">Policy</a></li>
<li><a href="#">Email Collection Ban</a></li>
<li id="company-info">Phone : 123-4567-7890, FAX : 123-4567-7890<br />
[email protected]<br />
Copyright java-school.net All Rights Reserved.</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
Subpage
Copy the homepage, index.jsp to the java subdirectory and modify it as follows.
/java/index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ page import="net.java_school.user.User" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="Java Home" />
<meta name="Description" content="Java Home" />
<title>Java Home</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header">
<h1 style="float: left; width: 150px;" ><a href="/"><img src="/images/ci.gif" alt="java-school" /></a></h1>
<div id="memberMenu" style="float: right; position: relative; top: 7px;">
<%
User loginUser = (User) session.getAttribute("user");
if (loginUser == null) {
%>
<input type="button" value="Login" onclick="location.href='/users/login.jsp'" />
<input type="button" value="SignUp" onclick="location.href='/users/signUp.jsp'" />
<%
} else {
%>
<input type="button" value="Logout" onclick="location.href='/users/logout_proc.jsp'" />
<input type="button" value="Modify Account" onclick="location.href='/users/editAccount.jsp'" />
<%
}
%>
</div>
</div>
<div id="main-menu">
<ul id="nav">
<li><a href="/java">Java</a></li>
<li><a href="/jdbc">JDBC</a></li>
<li><a href="/jsp">JSP</a></li>
<li><a href="/css-layout">CSS Layout</a></li>
<li><a href="/jsp-pjt">JSP Project</a></li>
<li><a href="/spring">Spring</a></li>
<li><a href="/javascript">JavaScript</a></li>
<li><a href="/bbs/list.jsp?boardCd=chat&curPage=1">BBS</a></li>
</ul>
</div>
<div id="container">
<div id="content">
<h1>JDK Install</h1>
</div>
</div><!-- container end -->
<div id="sidebar">
<h1>Java</h1>
</div>
<div id="extra">
<a href="http://www.youtube.com"><img src="/images/youtube.png" alt="youtube.com" /></a>
<a href="http://www.twitter.com"><img src="/images/twitter.png" alt="twitter.com" /></a>
<a href="http://www.facebook.com"><img src="/images/facebook.png" alt="facebook.com" /></a>
<a href="http://www.gmail.com"><img src="/images/gmail.png" alt="gmail.com" /></a>
<a href="http://www.java-school.net"><img src="/images/java-school.png" alt="java-school.net" /></a>
</div>
<div id="footer">
<ul>
<li><a href="#">Guide</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Email Collection Ban</a></li>
<li id="company-info">Phone : 123-4567-8901, FAX : 123-4567-8901<br />
[email protected]<br />
Copyright java-school.net All Rights Reserved.</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
To keep the example simple, we designed the main page and subpage to be the same. However, most sites do not have the same design for the main page and subpage.
Separating JSPs
If several pages have the same screen layout, you can separate the code using the JSP include directive. Separating pages makes maintenance easier. The logo and login/logout buttons in #header, the main menus in #main-menu, the external links in #extra, and the global menus in #footer are common to all pages. Create the following JSP files in the inc subdirectory. (where inc means included)
/inc/header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="net.java_school.user.User" %>
<h1 style="float: left; width: 150px;"><a href="/"><img src="/images/ci.gif" alt="java-school" /></a></h1>
<div id="memberMenu" style="float: right; position: relative; top: 7px;">
<%
User loginUser = (User) session.getAttribute("user");
if (loginUser == null) {
%>
<input type="button" value="Login" onclick="location.href='/users/login.jsp'" />
<input type="button" value="SignUp" onclick="location.href='/users/signUp.jsp'" />
<%
} else {
%>
<input type="button" value="Logout" onclick="location.href='/users/logout_proc.jsp'" />
<input type="button" value="Modify Account" onclick="location.href='/users/editAccount.jsp'" />
<%
}
%>
</div>
/inc/main-menu.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<ul id="nav">
<li><a href="/java">Java</a></li>
<li><a href="/jdbc">JDBC</a></li>
<li><a href="/jsp">JSP</a></li>
<li><a href="/css-layout">CSS Layout</a></li>
<li><a href="/jsp-pjt">JSP Project</a></li>
<li><a href="/spring">Spring</a></li>
<li><a href="/javascript">JavaScript</a></li>
<li><a href="/bbs/list.jsp?boardCd=chat&curPage=1">BBS</a></li>
</ul>
/inc/extra.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<a href="http://www.youtube.com"><img src="/images/youtube.png" alt="youtube.com" /></a>
<a href="http://www.twitter.com"><img src="/images/twitter.png" alt="twitter.com" /></a>
<a href="http://www.facebook.com"><img src="/images/facebook.png" alt="facebook.com" /></a>
<a href="http://www.gmail.com"><img src="/images/gmail.png" alt="gmail.com" /></a>
<a href="http://www.java-school.net"><img src="/images/java-school.png" alt="java-school.net" /></a>
/inc/footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<ul>
<li><a href="#">Guide</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Email Collection Ban</a></li>
<li id="company-info">Phone : 123-4567-8901, FAX : 123-4567-8901<br />
[email protected]<br />
Copyright java-school.net All Rights Reserved.</li>
<li><a href="#">Map</a></li>
</ul>
The contentType attribute of the page directive of the including page and included pages must be the same. If they are not the same, the servlet container will fail to convert JSPs to a servlet. Therefore, the contentType of all JSPs you created should be:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
Modify subpages using JSP files in the inc folder
/java/index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="Java Home" />
<meta name="Description" content="Java Home" />
<title>Java Home</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header">
<%@ include file="../inc/header.jsp" %>
</div>
<div id="main-menu">
<%@ include file="../inc/main-menu.jsp" %>
</div>
<div id="container">
<div id="content">
</div>
</div><!-- container end -->
<div id="sidebar">
<h1>Java</h1>
</div>
<div id="extra">
<%@ include file="../inc/extra.jsp" %>
</div>
<div id="footer">
<%@ include file="../inc/footer.jsp" %>
</div>
</div>
</body>
</html>
Visit the homepage and subpage (/java/index.jsp) with a web browser to test them.
Create Login Form, Login, Logout pages
Create a user-sub.jsp in the directory named users as follows.
/users/user-sub.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<h1>Membership</h1>
<%
User loginUser = (User) session.getAttribute("user");
if (loginUser == null) {
%>
<ul>
<li><a href="login.jsp">Login</a></li>
<li><a href="signUp.jsp">SignUp</a></li>
<li><a href="#">Forgot ID</a></li>
<li><a href="#">Forgot Password</a></li>
</ul>
<%
} else {
%>
<ul>
<li><a href="editAccount.jsp">Modify Account</a></li>
<li><a href="changePasswd.jsp">Change Password</a></li>
<li><a href="bye.jsp">Bye</a></li>
</ul>
<%
}
%>
Open /java/index.jsp and use the Save As editor menu to create a login.jsp in the directory named users and modify it as shown below.
/users/login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String url = request.getParameter("url");
if (url == null) url = "";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="Login" />
<meta name="Description" content="Login" />
<title>Login</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header">
<%@ include file="../inc/header.jsp" %>
</div>
<div id="main-menu">
<%@ include file="../inc/main-menu.jsp" %>
</div>
<div id="container">
<div id="content">
<h2>Login</h2>
<form id="loginForm" action="login_proc.jsp" method="post">
<input type="hidden" name="url" value="<%=url %>" />
<table>
<tr>
<td style="width: 200px;">Email</td>
<td style="width: 390px"><input type="text" name="email" style="width: 99%;" value="[email protected]" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="passwd" style="width: 99%;" value="1111" /></td>
</tr>
</table>
<div style="text-align: center;padding-top: 15px;">
<input type="submit" value="Submit" />
<input type="button" value="SignUp" onclick="location.href='signUp.jsp'" />
</div>
</form>
</div><!-- content end -->
</div><!-- container end -->
<div id="sidebar">
<%@ include file="user-sub.jsp" %>
</div>
<div id="extra">
<%@ include file="../inc/extra.jsp" %>
</div>
<div id="footer">
<%@ include file="../inc/footer.jsp" %>
</div>
</div>
</body>
</html>
Create a page that authenticates users.
/users/login_proc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="net.java_school.user.User"%>
<%
String url = request.getParameter("url");
String email = request.getParameter("email");
String passwd = request.getParameter("passwd");
session.setAttribute("user", new User(email, passwd, "John doe", "123-4567-8901"));
if (url != null && !url.equals("")) {
response.sendRedirect(url);
} else {
response.sendRedirect("../bbs/list.jsp?boarCd=chat&curPage=1");
}
%>
Create a logout execution page.
/users/logout_proc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
session.removeAttribute("user");
response.sendRedirect("../");//redirect to the homepage.
%>
JSP error handling
Open web.xml and add the following before </web-app> in web.xml.
web.xml
<error-page> <error-code>403</error-code> <location>/error.jsp</location> </error-page> <error-page> <error-code>404</error-code> <location>/error.jsp</location> </error-page> <error-page> <error-code>500</error-code> <location>/error.jsp</location> </error-page> <error-page> <exception-type>java.lang.Throwable</exception-type> <location>/error.jsp</location> </error-page>
This error.jsp will take care of all significant errors.
error.jsp
With the home page open, use the Save As editor menu to create a file named error.jsp in the document base and modify it like below.
/error.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="net.java_school.user.User" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="Error" />
<meta name="Description" content="Error" />
<title>Error</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
</head>
<body>
<%
//Analyze the servlet exception
Throwable throwable = (Throwable) request.getAttribute("javax.servlet.error.exception");
Integer statusCode = (Integer) request.getAttribute("javax.servlet.error.status_code");
String servletName = (String) request.getAttribute("javax.servlet.error.servlet_name");
if (servletName == null) {
servletName = "Unknown";
}
String requestUri = (String) request.getAttribute("javax.servlet.error.request_uri");
if (requestUri == null) {
requestUri = "Unknown";
}
%>
<div id="wrap">
<div id="header">
<h1 style="float: left; width: 150px;"><a href="/"><img src="/images/ci.gif" alt="java-school" /></a></h1>
<div id="memberMenu" style="float: right; position: relative; top: 7px;">
<%
User loginUser = (User) session.getAttribute("user");
if (loginUser == null) {
%>
<input type="button" value="Login" onclick="location.href='/users/login.jsp'" />
<input type="button" value="SignUp" onclick="location.href='/users/signUp.jsp'" />
<%
} else {
%>
<input type="button" value="Logout" onclick="location.href='/users/logout_proc.jsp'" />
<input type="button" value="Modify Account" onclick="location.href='/users/editAccount.jsp'" />
<%
}
%>
</div>
</div>
<div id="main-menu">
<ul id="nav">
<li><a href="/java">Java</a></li>
<li><a href="/jdbc">JDBC</a></li>
<li><a href="/jsp">JSP</a></li>
<li><a href="/css-layout">CSS Layout</a></li>
<li><a href="/jsp-pjt">JSP Project</a></li>
<li><a href="/spring">Spring</a></li>
<li><a href="/javascript">JavaScript</a></li>
<li><a href="/bbs/list.jsp?boardCd=chat&curPage=1">BBS</a></li>
</ul>
</div>
<div id="container">
<div id="content">
<div id="content-categories">Error</div>
<h2>Error Page</h2>
<%
if (statusCode != null && statusCode != 500) {
out.write("<h3>Error Details</h3>");
out.write("<strong>Status Code</strong>:" + statusCode + "<br>");
out.write("<strong>Requested URI</strong>:"+requestUri);
}
if (throwable != null) {
out.write("<h3>Exception Details</h3>");
out.write("<ul><li>Servlet Name:" + servletName + "</li>");
out.write("<li>Exception Name:" + throwable.getClass().getName() + "</li>");
out.write("<li>Requested URI:" + requestUri + "</li>");
out.write("<li>Exception Message:" + throwable.getMessage() + "</li>");
out.write("</ul>");
}
%>
</div><!-- content end -->
</div><!-- container end -->
<div id="sidebar">
<h1>Error</h1>
</div>
<div id="extra">
<a href="http://www.youtube.com"><img src="/images/youtube.png" alt="youtube.com" /></a>
<a href="http://www.twitter.com"><img src="/images/twitter.png" alt="twitter.com" /></a>
<a href="http://www.facebook.com"><img src="/images/facebook.png" alt="facebook.com" /></a>
<a href="http://www.gmail.com"><img src="/images/gmail.png" alt="gmail.com" /></a>
<a href="http://www.java-school.net"><img src="/images/java-school.png" alt="java-school.net" /></a>
</div>
<div id="footer">
<%@ include file="./inc/footer.jsp" %>
</div>
</div>
</body>
</html>
Try to login again. You have requested a page you have not created yet, so an error page should be displayed.
Board program
Create pages related to the bulletin board.
Board menu page
/bbs/bbs-sub.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<h1>BBS</h1>
<ul>
<li>
<ul>
<li><a href="list.jsp?boardCd=chat&curPage=1">Chat</a></li>
<li><a href="list.jsp?boardCd=qna&curPage=1">QnA</a></li>
<li><a href="list.jsp?boardCd=data&curPage=1">Data</a></li>
</ul>
</li>
</ul>
loginCheck.jsp
/inc/loginCheck.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="net.java_school.user.*"%>
<%@ page import="java.net.URLEncoder"%>
<%
User user = (User) session.getAttribute("user");
if (user == null) {
//URL the user intended to visit
String uri = request.getRequestURI();
String query = request.getQueryString();
String url = uri;
if (query != null) url += "?" + query;
String contextPath= request.getContextPath();
url = URLEncoder.encode(url, "UTF-8");
response.sendRedirect(contextPath + "/users/login.jsp?url=" + url);
return;
}
%>
list.jsp
Open the list.html file and use the Save As editor menu to create a list.jsp file in the bbs directory and modify it like below.
/bbs/list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../inc/loginCheck.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="Board list" />
<meta name="Description" content="Board list" />
<title>Small talk</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
<script type="text/javascript">
function goList(curPage) {
var form = document.getElementById("listForm");
form.curPage.value = curPage;
form.submit();
}
function goView(articleNo) {
var form = document.getElementById("viewForm");
form.articleNo.value = articleNo;
form.submit();
}
function goWrite() {
var form = document.getElementById("writeForm");
form.submit();
}
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<%@ include file="../inc/header.jsp" %>
</div>
<div id="main-menu">
<%@ include file="../inc/main-menu.jsp" %>
</div>
<div id="container">
<div id="content">
<div id="content-categories">Small talk</div>
<table class="bbs-table">
<!-- List heading -->
<tr>
<th style="width: 60px">NO</th>
<th>TITLE</th>
<th style="width: 84px;">DATE</th>
<th style="width: 60px;">HIT</th>
</tr>
<!-- List items start -->
<tr>
<td style="text-align: center;">11</td>
<td>
<a href="javascript:goView('1')">Title</a>
<img src="../images/attach.png" alt="Attach File" style="vertical-align: middle;" />
<span class="bbs-strong">[5]</span>
</td>
<td style="text-align: center;">2011.11.15</td>
<td style="text-align: center;">4555</td>
</tr>
<!-- List items end -->
</table>
<div id="paging">
<a href="javascript:goList('5')">[Prev]</a>
<span class="bbs-strong">6</span>
<a href="javascript:goList('7')">7</a>
<a href="javascript:goList('8')">8</a>
<a href="javascript:goList('9')">9</a>
<a href="javascript:goList('10')">10</a>
<a href="javascript:goList('11')">[Next]</a>
</div>
<div id="list-menu">
<input type="button" value="New" onclick="goWrite()" />
</div>
<div id="search">
<form action="list.jsp" method="get">
<input type="hidden" name="curPage" value="1" />
<input type="hidden" name="boardCd" value="chat" />
<div>
<input type="text" name="searchWord" size="15" maxlength="30" />
<input type="submit" value="Search" />
</div>
</form>
</div>
</div><!-- content end -->
</div><!-- container end -->
<div id="sidebar">
<%@ include file="bbs-sub.jsp" %>
</div>
<div id="extra">
<%@ include file="../inc/extra.jsp" %>
</div>
<div id="footer">
<%@ include file="../inc/footer.jsp" %>
</div>
</div>
<div id="form-group" style="display: none">
<form id="listForm" action="list.jsp" method="get">
<input type="hidden" name="boardCd" value="chat" />
<input type="hidden" name="curPage" />
<input type="hidden" name="searchWord" value="happy" />
</form>
<form id="viewForm" action="view.jsp" method="get">
<input type="hidden" name="articleNo" />
<input type="hidden" name="boardCd" value="chat" />
<input type="hidden" name="curPage" value="1" />
<input type="hidden" name="searchWord" value="happy" />
</form>
<form id="writeForm" action="write.jsp" method="get">
<input type="hidden" name="boardCd" value="chat" />
<input type="hidden" name="curPage" value="1" />
<input type="hidden" name="searchWord" value="happy" />
</form>
</div>
</body>
</html>
write.jsp
Open the write.html file and use the Save As editor menu to create a file named write.jsp in the bbs directory and modify it as follows:
/bbs/write.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../inc/loginCheck.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="New" />
<meta name="Description" content="New" />
<title>Small talk</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
<script type="text/javascript">
function goList() {
var form = document.getElementById("listForm");
form.submit();
}
function goView() {
var form = document.getElementById("viewForm");
form.submit();
}
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<%@ include file="../inc/header.jsp" %>
</div>
<div id="main-menu">
<%@ include file="../inc/main-menu.jsp" %>
</div>
<div id="container">
<div id="content">
<div id="content-categories">Small talk</div>
<h3>New</h3>
<form id="writeForm" action="write_proc.jsp" method="post" enctype="multipart/form-data">
<input type="hidden" name="boardCd" value="chat" />
<table id="write-form" class="bbs-table">
<tr>
<td>Title</td>
<td><input type="text" name="title" style="width: 90%;" /></td>
</tr>
<tr>
<td colspan="2">
<textarea name="content" rows="17" cols="50"></textarea>
</td>
</tr>
<tr>
<td>Attach File</td>
<td><input type="file" name="attachFile" /></td>
</tr>
</table>
<div style="text-align: center;padding-bottom: 15px;">
<input type="submit" value="Submit" />
<input type="button" value="List" onclick="goList()" />
<input type="button" value="Detailed view" onclick="goView()" />
</div>
</form>
</div>
</div>
<div id="sidebar">
<%@ include file="bbs-sub.jsp" %>
</div>
<div id="extra">
<%@ include file="../inc/extra.jsp" %>
</div>
<div id="footer">
<%@ include file="../inc/footer.jsp" %>
</div>
</div>
<div id="form-group" style="display: none">
<form id="viewForm" action="view.jsp" method="get">
<input type="hidden" name="articleNo" value="5" />
<input type="hidden" name="boardCd" value="chat" />
<input type="hidden" name="curPage" value="1" />
<input type="hidden" name="searchWord" value="happy" />
</form>
<form id="listForm" action="list.jsp" method="get">
<input type="hidden" name="boardCd" value="chat" />
<input type="hidden" name="curPage" value="1" />
<input type="hidden" name="searchWord" value="happy" />
</form>
</div>
</body>
</html>
write_proc.jsp
This page inserts the information obtained from parameters passed by the writing form into the database.
/bbs/write_proc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*
If the user is not authenticated
response.sendError(HttpServletResponse.SC_FORBIDDEN, "Not Login"); return;
authenticated
insert new text with the boardCd, title, content, and attachFile parameters.
If the enctype attribute of the form is "multipart / form-data", parameter values can not be obtained with request.getParameter();
To make programming easier in this case, use an external library such as Apache commons-fileupload or cos.
After registering a new article, The program must request the first page of the list.
*/
response.sendRedirect("list.jsp?boardCd=chat&curPage=1");
%>
view.jsp
Open the view.html file and use the Save As editor menu to create a view.jsp in the bbs directory and modify it like below.
/bbs/view.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../inc/loginCheck.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="Board detailed view" />
<meta name="Description" content="Board detailed view" />
<title>Small talk</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
<script type="text/javascript">
function modifyCommentToggle(articleNo) {
var p_id = "comment" + articleNo;
var form_id = "modifyCommentForm" + articleNo;
var p = document.getElementById(p_id);
var form = document.getElementById(form_id);
var p_display;
var form_display;
if (p.style.display) {
p_display = '';
form_display = 'none';
} else {
p_display = 'none';
form_display = '';
}
p.style.display = p_display;
form.style.display = form_display;
}
function goList(curPage) {
var form = document.getElementById("listForm");
form.curPage.value = curPage;
form.submit();
}
function goView(articleNo) {
var form = document.getElementById("viewForm");
form.articleNo.value = articleNo;
form.submit();
}
function goWrite() {
var form = document.getElementById("writeForm");
form.submit();
}
function goModify() {
var form = document.getElementById("modifyForm");
form.submit();
}
function goDelete() {
var check = confirm("Are you sure you want to delete it?");
if (check) {
var form = document.getElementById("delForm");
form.submit();
}
}
function deleteAttachFile(attachFileNo) {
var check = confirm("Are you sure you want to delete it?");
if (check) {
var form = document.getElementById("deleteAttachFileForm");
form.attachFileNo.value = attachFileNo;
form.submit();
}
}
function deleteComment(commentNo) {
var check = confirm("Are you sure you want to delete it?");
if (check) {
var form = document.getElementById("deleteCommentForm");
form.commentNo.value = commentNo;
form.submit();
}
}
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<%@ include file="../inc/header.jsp" %>
</div>
<div id="main-menu">
<%@ include file="../inc/main-menu.jsp" %>
</div>
<div id="container">
<div id="content">
<div id="content-categories">Small talk</div>
<div class="view-menu" style="margin-top: 15px;margin-bottom: 5px;">
<div class="fl">
<input type="button" value="Modify" onclick="goModify()" />
<input type="button" value="Del" onclick="goDelete()"/>
</div>
<div class="fr">
<input type="button" value="Next Article" onclick="goView('6')" />
<input type="button" value="Prev Article" onclick="goView('4')" />
<input type="button" value="List" onclick="goList('1')" />
<input type="button" value="New" onclick="goWrite()" />
</div>
</div>
<table class="bbs-table">
<tr>
<th style="width: 37px;text-align: left;vertical-align: top;font-size: 1em;">TITLE</th>
<th style="text-align: left;color: #555;font-size: 1em;">What makes us happy?</th>
</tr>
</table>
<div id="detail">
<div id="date-writer-hit">edited 2014-10-09 17:55:30 by John doe hit 1330</div>
<div id="article-content">
What makes us happy?What makes us happy?What makes us happy?<br />
What makes us happy?What makes us happy?What makes us happy?<br />
</div>
<div id="file-list" style="text-align: right">
<div class="attach-file">
<a href="#" >TEST.png</a>
<a href="javascript:deleteAttachFile('23')">x</a>
</div>
</div>
</div>
<!-- Add comment -->
<form id="addCommentForm" style="margin: 10px 0;" action="addComment.jsp" method="post">
<input type="hidden" name="articleNo" value="5"/>
<input type="hidden" name="boardCd" value="chat" />
<input type="hidden" name="curPage" value="1" />
<input type="hidden" name="searchWord" value="happy" />
<div id="addComment">
<textarea id="addComment-ta" name="memo" rows="7" cols="50"></textarea>
</div>
<div style="text-align: right;">
<input type="submit" value="Add comments" />
</div>
</form>
<!-- comment list start -->
<div class="comments">
<span class="writer">xman</span>
<span class="date">2011.12.11 12:14:32</span>
<span class="modify-del">
<a href="javascript:modifyCommentToggle('5')">Modify</a>
| <a href="javascript:deleteComment('5')">Del</a>
</span>
<p id="comment5">What makes us happy?</p>
<form id="modifyCommentForm5" class="comment-form" action="updateComment.jsp" method="post" style="display: none;">
<input type="hidden" name="commentNo" value="5" />
<input type="hidden" name="boardCd" value="chat" />
<input type="hidden" name="articleNo" value="12" />
<input type="hidden" name="curPage" value="1" />
<input type="hidden" name="searchWord" value="happy" />
<div class="fr">
<a href="javascript:document.forms.modifyCommentForm5.submit()">Modify</a>
| <a href="javascript:modifyCommentToggle('5')">Cancel</a>
</div>
<div>
<textarea class="comment-textarea" name="memo" rows="7" cols="50">What makes us happy?</textarea>
</div>
</form>
</div>
<!-- comment list end -->
<div id="next-prev">
<p>Next Article : <a href="javascript:goView('6')">What makes us happy?</a></p>
<p>Prev Article : <a href="javascript:goView('4')">What makes us happy?</a></p>
</div>
<div class="view-menu" style="margin-bottom: 47px;">
<div class="fl">
<input type="button" value="Modify" onclick="goModify()" />
<input type="button" value="Del" onclick="goDelete()"/>
</div>
<div class="fr">
<input type="button" value="Next Article" onclick="goView('6')" />
<input type="button" value="Prev Article" onclick="goView('4')" />
<input type="button" value="List" onclick="goList('1')" />
<input type="button" value="New" onclick="goWrite()" />
</div>
</div>
<!-- List -->
<table class="bbs-table">
<tr>
<th style="width: 60px">NO</th>
<th>TITLE</th>
<th style="width: 84px;">DATE</th>
<th style="width: 60px;">HIT</th>
</tr>
<tr>
<td style="text-align: center;"><img src="/images/arrow.gif" alt="You are reading now" /></td>
<td>
<a href="javascript:goView('1')">Title</a>
<img src="/images/attach.png" alt="Attach File" style="vertical-align: middle;" />
<span class="bbs-strong">[5]</span>
</td>
<td style="text-align: center;">2011.11.15</td>
<td style="text-align: center;">4555</td>
</tr>
</table>
<div id="paging">
<a href="javascript:goList('5')">[Prev]</a>
<span class="bbs-strong">6</span>
<a href="javascript:goList('7')">7</a>
<a href="javascript:goList('8')">8</a>
<a href="javascript:goList('9')">9</a>
<a href="javascript:goList('10')">10</a>
<a href="javascript:goList('11')">[Next]</a>
</div>
<div id="list-menu">
<input type="button" value="New" onclick="goWrite()" />
</div>
<form action="list.jsp" method="get">
<input type="hidden" name="curPage" value="1" />
<input type="hidden" name="boardCd" value="chat" />
<div id="search">
<input type="text" name="searchWord" size="15" maxlength="30" />
<input type="submit" value="Search" />
</div>
</form>
</div><!-- content end -->
</div><!-- container end -->
<div id="sidebar">
<%@ include file="bbs-sub.jsp" %>
</div>
<div id="extra">
<%@ include file="../inc/extra.jsp" %>
</div>
<div id="footer">
<%@ include file="../inc/footer.jsp" %>
</div>
</div>
<div id="form-group" style="display: none">
<form id="listForm" action="list.jsp" method="get">
<input type="hidden" name="boardCd" value="chat" />
<input type="hidden" name="curPage" />
<input type="hidden" name="searchWord" value="happy" />
</form>
<form id="viewForm" action="view.jsp" method="get">
<input type="hidden" name="articleNo" />
<input type="hidden" name="boardCd" value="chat" />
<input type="hidden" name="curPage" value="1" />
<input type="hidden" name="searchWord" value="happy" />
</form>
<form id="writeForm" action="write.jsp" method="get">
<input type="hidden" name="articleNo" value="5" />
<input type="hidden" name="boardCd" value="chat" />
<input type="hidden" name="curPage" value="12" />
<input type="hidden" name="searchWord" value="happy" />
</form>
<form id="modifyForm" action="modify.jsp" method="get">
<input type="hidden" name="articleNo" value="5" />
<input type="hidden" name="boardCd" value="chat" />
<input type="hidden" name="curPage" value="1" />
<input type="hidden" name="searchWord" value="happy" />
</form>
<form id="delForm" action="del_proc.jsp" method="post">
<input type="hidden" name="articleNo" value="5" />
<input type="hidden" name="boardCd" value="chat" />
<input type="hidden" name="curPage" value="1" />
<input type="hidden" name="searchWord" value="happy" />
</form>
<form id="deleteCommentForm" action="deleteComment_proc.jsp" method="post">
<input type="hidden" name="commentNo" />
<input type="hidden" name="articleNo" value="12" />
<input type="hidden" name="boardCd" value="chat" />
<input type="hidden" name="curPage" value="1" />
<input type="hidden" name="searchWord" value="happy" />
</form>
<form id="deleteAttachFileForm" action="deleteAttachFile_proc.jsp" method="post">
<input type="hidden" name="attachFileNo" />
<input type="hidden" name="articleNo" value="23" />
<input type="hidden" name="boardCd" value="chat" />
<input type="hidden" name="curPage" value="1" />
<input type="hidden" name="searchWord" value="happy" />
</form>
</div>
</body>
</html>
addComment_proc.jsp
/bbs/addComment_proc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*
Unauthenticated User
response.sendError(HttpServletResponse.SC_FORBIDDEN, "Not Login"); return;
Authorized User
Insert comments with the boardCd, articleNo, curPage, searchWord, and memo parameters.
*/
response.sendRedirect("view.jsp?articleNo=5&boardCd=chat&curPage=1&searchWord=happy");
%>
updateComment_porc.jsp
/bbs/updateComment_proc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*
authenticated but not owner
response.sendError(HttpServletResponse.SC_FORBIDDEN, "Authentication Failed"); return;
Authorized and Owner
Modify comments with commentNo, boardCd, articleNo, curPage, searchWord, memo parametes.
*/
response.sendRedirect("view.jsp?articleNo=5&boardCd=chat&curPage=1&searchWord=happy");
%>
deleteComment_proc.jsp
/bbs/deleteComment_proc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*
Not Owner
response.sendError(HttpServletResponse.SC_FORBIDDEN, "Not Owner"); return;
Owner
Delete comments with commentNo parameter.
*/
response.sendRedirect("view.jsp?articleNo=5&boardCd=chat&curPage=1&searchWord=happy");
%>
deleteAttachFile_proc.jsp
/bbs/deleteAttachFile_proc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*
Not Owner
response.sendError(HttpServletResponse.SC_FORBIDDEN, "Now Owner"); return;
Owner
Delete attachFile with attachfileno parameter.
*/
response.sendRedirect("view.jsp?articleNo=5&boardCd=chat&curPage=1&searchWord=happy");
%>
del_proc.jsp
/bbs/del_proc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*
Not Owner
response.sendError(HttpServletResponse.SC_FORBIDDEN, "Authentication Failed"); return;
Owner
Delete board article with articleNo parameter.
*/
response.sendRedirect("list.jsp?boardCd=chat&curPage=1&searchWord=happy");
%>
modify.jsp
/bbs/modify.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%
User user = (User) session.getAttribute("user");
if (user == null) {
response.sendError(HttpServletResponse.SC_FORBIDDEN, "Not Login User");
return;
}
request.setCharacterEncoding("UTF-8");
int articleNo = Integer.parseInt(request.getParameter("articleNo"));
String boardCd = request.getParameter("boardCd");
String curPage = request.getParameter("curPage");
String searchWord = request.getParameter("searchWord");
//TODO logic to confirm that an authenticated user is the owner of the article.
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="Modify article form" />
<meta name="Description" content="Modify article form" />
<title>Small talk</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
<script type="text/javascript">
function goView() {
var form = document.getElementById("viewForm");
form.submit();
}
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<%@ include file="../inc/header.jsp" %>
</div>
<div id="main-menu">
<%@ include file="../inc/main-menu.jsp" %>
</div>
<div id="container">
<div id="content">
<div id="content-categories">Small talk</div>
<h3>Modify article</h3>
<form id="writeForm" action="modify_proc.jsp" method="post" enctype="multipart/form-data">
<input type="hidden" name="articleNo" value="5" />
<input type="hidden" name="boardCd" value="chat" />
<input type="hidden" name="curPage" value="1" />
<input type="hidden" name="searchWord" value="happy" />
<table id="write-form" class="bbs-table">
<tr>
<td>Title</td>
<td><input type="text" name="title" style="width: 90%;" value="What makes us happy?" /></td>
</tr>
<tr>
<td colspan="2">
<textarea name="content" rows="17" cols="50">What makes us happy?</textarea>
</td>
</tr>
<tr>
<td>Attach File</td>
<td><input type="file" name="attachFile" /></td>
</tr>
</table>
<div style="text-align: center;padding-bottom: 15px;">
<input type="submit" value="Submit" />
<input type="button" value="Detailed view" onclick="goView()" />
</div>
</form>
</div><!-- content end -->
</div><!-- container end -->
<div id="sidebar">
<%@ include file="bbs-sub.jsp" %>
</div>
<div id="extra">
<%@ include file="../inc/extra.jsp" %>
</div>
<div id="footer">
<%@ include file="../inc/footer.jsp" %>
</div>
</div>
<div id="form-group" style="display: none">
<form id="viewForm" action="view.jsp" method="get">
<input type="hidden" name="articleNo" value="5" />
<input type="hidden" name="boardCd" value="chat" />
<input type="hidden" name="curPage" value="1" />
<input type="hidden" name="searchWord" value="happy" />
</form>
</div>
</body>
</html>
modify_proc.jsp
/bbs/modify_proc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*
Not Owner
response.sendError(HttpServletResponse.SC_FORBIDDEN, "Authentication Failed"); return;
Owner
Modify board article with articleNo, boardCd, curPage, searchWord, title, content, attachFile parameters.
*/
response.sendRedirect("view.jsp?articleNo=5&curPage=1&boardCd=chat&searchWord=happy");
%>
User
SignUp.jsp
Open the singUp.html file and use the Save As editor menu to create a signUp.jsp file in the directory named users and modify it as shown below.
/users/signUp.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="SignUp" />
<meta name="Description" content="SignUp" />
<title>SignUp</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
<script type="text/javascript">
function check() {
//var form = document.getElementById("signUpForm");
//TODO validation logic
return true;
}
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<%@ include file="../inc/header.jsp" %>
</div>
<div id="main-menu">
<%@ include file="../inc/main-menu.jsp" %>
</div>
<div id="container">
<div id="content">
<div id="content-categories">Membership</div>
<h1>SignUp</h1>
<form id="signUpForm" action="signUp_proc.jsp" method="post" onsubmit="return check()">
<table>
<tr>
<td style="width: 200px;">Full Name</td>
<td style="width: 390px"><input type="text" name="name" style="width: 99%;" value="John Doe" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="passwd" style="width: 99%;" value="1111" /></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;font-weight: bold;">
Do not input email account password!
</td>
</tr>
<tr>
<td>Confirm</td>
<td><input type="password" name="confirm" style="width: 99%;" value="1111" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" style="width: 99%;" value="[email protected]" /></td>
</tr>
<tr>
<td>Mobile</td>
<td><input type="text" name="mobile" style="width: 99%;" value="123-4567-8901" /></td>
</tr>
</table>
<div style="text-align: center;padding-bottom: 15px;">
<input type="submit" value="Submit" />
</div>
</form>
</div><!-- content end -->
</div><!-- container end -->
<div id="sidebar">
<%@ include file="user-sub.jsp" %>
</div>
<div id="extra">
<%@ include file="../inc/extra.jsp" %>
</div>
<div id="footer">
<%@ include file="../inc/footer.jsp" %>
</div>
</div>
</body>
</html>
signUp_proc.jsp
/users/signUp_proc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*
Not automatically authenticate.
When signup is completed, the sign up form page should be redirected to the welcome page.
*/
response.sendRedirect("welcome.jsp");
%>
welcome.jsp
This page informs the user that the subscription was successful. Users who are unsuccessful in a subscription should not see this page. Open the signUp.jsp file and use the Sava As editor menu to create a welcome.jsp file in the directory named users and modify it as shown below.
/users/welcome.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="Welcome" />
<meta name="Description" content="Welcome" />
<title>Welcome</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header">
<%@ include file="../inc/header.jsp" %>
</div>
<div id="main-menu">
<%@ include file="../inc/main-menu.jsp" %>
</div>
<div id="container">
<div id="content">
<h2>Welcome</h2>
Email is used as an ID.<br />
<input type="button" value="Login" onclick="javascript:location.href='login.jsp'" />
</div><!-- content end -->
</div><!-- container end -->
<div id="sidebar">
<h1>Welcome</h1>
</div>
<div id="extra">
<%@ include file="../inc/extra.jsp" %>
</div>
<div id="footer">
<%@ include file="../inc/footer.jsp" %>
</div>
</div>
</body>
</html>
editAccount.jsp
/users/editAccount.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../inc/loginCheck.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="Modify Account" />
<meta name="Description" content="Modify Account" />
<title>Modify Account</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
<script type="text/javascript">
function check() {
//var form = document.getElementById("editAccountForm");
//TODO validation logic
return true;
}
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<%@ include file="../inc/header.jsp" %>
</div>
<div id="main-menu">
<%@ include file="../inc/main-menu.jsp" %>
</div>
<div id="container">
<div id="content">
<h2>Modify Account</h2>
<p>
You can modify all information of your account except password. <a href="changePasswd.jsp">Change Password</a>
</p>
<form id="editAccountForm" action="editAccount_proc.jsp" method="post" onsubmit="return check()">
<table>
<tr>
<td>Full Name</td>
<td><input type="text" name="name" value="<%=user.getName() %>" /></td>
</tr>
<tr>
<td>Mobile</td>
<td><input type="text" name="mobile" value="<%=user.getMobile() %>" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="passwd" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</div><!-- content end -->
</div><!-- container end -->
<div id="sidebar">
<%@ include file="user-sub.jsp" %>
</div>
<div id="extra">
<%@ include file="../inc/extra.jsp" %>
</div>
<div id="footer">
<%@ include file="../inc/footer.jsp" %>
</div>
</div>
</body>
</html>
editAccount_proc.jsp
/users/editAccount_proc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*
Anauthenticated
response.sendError(HttpServletResponse.SC_FORBIDDEN, "Not Login"); return;
Authorized
After editing the member information, if login again in the login page, the login page be redirected to the Change Password form page.
On the Change Password page, you can see the member information without the password.
*/
response.sendRedirect("changePasswd.jsp");
%>
changePasswd.jsp
/users/changePasswd.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../inc/loginCheck.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="Change Password" />
<meta name="Description" content="Change Password" />
<title>Change Password</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
<script type="text/javascript">
function check() {
var form = document.getElementById("changePasswordForm");
if (form.newPasswd.value == form.confirm.value) {
return true;
} else {
alert("[Change Password] and [Change Password Confirm] values are not the same.");
return false;
}
}
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<%@ include file="../inc/header.jsp" %>
</div>
<div id="main-menu">
<%@ include file="../inc/main-menu.jsp" %>
</div>
<div id="container">
<div id="content">
<h2>Change Password</h2>
<%=user.getName() %><br />
Mobile <%=user.getMobile() %><br />
<form id="changePasswordForm" action="changePasswd_proc.jsp" method="post" onsubmit="return check()">
<table>
<tr>
<td>Password</td>
<td><input type="password" name="currentPasswd" /></td>
</tr>
<tr>
<td>Change Password</td>
<td><input type="password" name="newPasswd" /></td>
</tr>
<tr>
<td>Change Password Confirm</td>
<td><input type="password" name="confirm" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</div><!-- content end -->
</div><!-- container end -->
<div id="sidebar">
<%@ include file="user-sub.jsp" %>
</div>
<div id="extra">
<%@ include file="../inc/extra.jsp" %>
</div>
<div id="footer">
<%@ include file="../inc/footer.jsp" %>
</div>
</div>
</body>
</html>
changePasswd_proc.jsp
/users/changePasswd_proc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*
Anauthenticated
response.sendError(HttpServletResponse.SC_FORBIDDEN, "Not Login"); return;
Authorized
If the password is changed, the changePasswd_proc.jsp be redirected to the password change confirmation page.
*/
response.sendRedirect("changePasswd_confirm.jsp");
%>
changePasswd_confirm.jsp
Open the welcome.jsp file and use the Save As editor menu to create a changePasswd_confirm.jsp file in the directory named users and modify it as shown below.
/users/changePasswd_confirm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="Change Password Confirmation" />
<meta name="Description" content="Change Password Confirmation" />
<title>Change Password Confirmation</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header">
<%@ include file="../inc/header.jsp" %>
</div>
<div id="main-menu">
<%@ include file="../inc/main-menu.jsp" %>
</div>
<div id="container">
<div id="content">
<h2>Your password has been changed.</h2>
You can login again with the changed password.<br />
<input type="button" value="Login" onclick="javascript:location.href='login.jsp'" />
</div><!-- content end -->
</div><!-- container end -->
<div id="sidebar">
<%@ include file="user-sub.jsp" %>
</div>
<div id="extra">
<%@ include file="../inc/extra.jsp" %>
</div>
<div id="footer">
<%@ include file="../inc/footer.jsp" %>
</div>
</div>
</body>
</html>
bye.jsp
Open the editAccount.jsp file and use the Save As editor menu to create a bye.jsp file in the directory named users and modify it like below.
/users/bye.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../inc/loginCheck.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="Bye" />
<meta name="Description" content="Bye" />
<title>Bye</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
<script type="text/javascript">
function check() {
//var form = document.getElementById("byeForm");
//TODO validation logic
return true;
}
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<%@ include file="../inc/header.jsp" %>
</div>
<div id="main-menu">
<%@ include file="../inc/main-menu.jsp" %>
</div>
<div id="container">
<div id="content">
<h2>Bye</h2>
<form id="byeForm" action="bye_proc.jsp" method="post" onsubmit="return check()">
<table>
<tr>
<td>Email</td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="passwd" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</div><!-- content end -->
</div><!-- container end -->
<div id="sidebar">
<%@ include file="user-sub.jsp" %>
</div>
<div id="extra">
<%@ include file="../inc/extra.jsp" %>
</div>
<div id="footer">
<%@ include file="../inc/footer.jsp" %>
</div>
</div>
</body>
</html>
bye_proc.jsp
/users/bye_proc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*
Anauthenticated
response.sendError(HttpServletResponse.SC_FORBIDDEN, "Not Login"); return;
Authorized
If the received email and password are the same as those of the logged-in user, delete the member information from the member table.
Invalidates the current session.
Go to the Account termination confirmation page.
*/
response.sendRedirect("bye_confirm.jsp");
%>
bye_confirm.jsp
Open the welcome.jsp file and use the Save As editor menu to create a bye_confirm.jsp file in the directory named users and modify it like below.
/users/bye_confirm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="Goodbye" />
<meta name="Description" content="Goodbye" />
<title>Goodbye</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header">
</div>
<div id="main-menu">
<%@ include file="../inc/main-menu.jsp" %>
</div>
<div id="container">
<div id="content">
<h2>Goodbye</h2>
Your Information is all deleted.
</div><!-- content end -->
</div><!-- container end -->
<div id="sidebar">
<h1>Goodbye</h1>
</div>
<div id="extra">
<%@ include file="../inc/extra.jsp" %>
</div>
<div id="footer">
<%@ include file="../inc/footer.jsp" %>
</div>
</div>
</body>
</html>
The loginCheck.jsp is a file you must include in JSPs that authenticated users can only view. In the bulletin board program, the pages corresponding to the screen are list.jsp, view.jsp, write.jsp, and modify.jsp files. I didn't include loginCheck.jsp in modify.jsp. The reason is that this file needs more logic since it should determine if the logged-in user is the owner of the post. This file is the only exception among the screen pages, so I implemented all necessary logic within the file. EditAccount.jsp, changePasswd.jsp, and bye.jsp among the member module have to include the loginCheck.jsp file.