Prototype

A prototype is a kind of model that is created at the beginning of development.
The prototype of the Web application is based on the JSP that corresponds to the screen.
Do not implement program logic in prototypes except for those that are needed for testing, or that do not change until the end of development.

I have prepared a Model 1 bulletin board as an example to be implemented in JSPProject.
In Model 1, the client requests the JSP directly.
The following is a list of JSP files required for the example.

DocumentBase

  • index.jsp : Homepage
  • error.jsp : Error page

/inc

  • header.jsp : Logo, Membership menu(Login, Sign Up, Logout, Modify account)
  • main-menu.jsp : Main menu
  • extra.jsp : Image Links
  • footer.jsp : Copyright, Contact
  • loginCheck.jsp : Pages that require authentication must include this page.

/users

  • 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

  • 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/Sub page design

The main page and sub page design is the first task of the website prototype.
The main page is the page you see when you visit the website, also called the home page.
The sub page is all pages except the main page.
Prototype Directory Structure

Stylesheets and Images

I will reuse the style sheets and image files created in the 'CSS Layout' chapter.
(Set https://github.com/kimjonghoon/css-layout.)
Copy the stylesheet and images into the css/ and images/ folder respectively, and copy HTML files to the document base.

Main page

I will add the login logic to the prototype.
Therefore, before creating the main page, the following User class is created first.

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.
I will use email instead of ID.

Login policy

  • When an unauthenticated user visits a page that requires authentication, the user is sent to the login page. At this time, the URL that is intended to be visited first is transmitted to the login page.
  • If the login is successful, the login page should be redirected to the URL that the user want to visit.
  • When the user logs in from the login page, the page is redirected to the first page of the small talk board list.
  • When the user log out, the page is redirected to the homepage.

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=smalltalk&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 />
            people@ggmail.org<br />
            Copyright java-school.net All Rights Reserved.</li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

</div>
</body>
</html>

Sub page

Copy the homepage /index.jsp to the java subdirectory and modify it as follows.
Unlike the homepage, this page is in a subdirectory, so you need to modify the relative path in the document.

/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=free&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 />
            john@gmail.org<br />
            Copyright java-school.net All Rights Reserved.</li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

</div>

</body>
</html>

Common JSPs

If the screen layout is the same, 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 menu in # main-menu, the external links in #extra, and the global menu in #footer are common to all pages.
Create the following JSP file in the inc subdirectory.

/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=free&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 />
    john@gmail.org<br />
    Copyright java-school.net All Rights Reserved.</li>
    <li><a href="#">Map</a></li>
</ul>

When creating a common JSP file, the contentType attribute of the page directive must be the same as the containing page.
If it is not the same, it is not converted to a servlet.
Therefore, the contentType of a common JSP file should be:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

Modify subpages using common JSP files

/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 and test it.

Create Login Form, Login, Logout pages

Create user-sub.jsp in the users directory.

/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.
Create login.jsp using the Save As ... menu in the users directory 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="captain@heist.com" /></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 the user.

/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=smalltalk&curPage=1");
}
%>

Create 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.
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 is a setting that /error.jsp will take care of all major errors.

Create error.jsp

With the home page open, use the Save As ... menu to create a new file called error.jsp in the document base and modify it as shown 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=free&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 != 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 that has not yet been created, 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>게시판</h1>
<ul>
    <li>
        <ul>
            <li><a href="list.jsp?boardCd=free&curPage=1">자유 게시판</a></li>
            <li><a href="list.jsp?boardCd=qna&curPage=1">QnA게시판</a></li>
            <li><a href="list.jsp?boardCd=data&curPage=1">자료실</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;
}
%>

Board list page

Open the list.html file and use the Save As ... menu to create a file named list.jsp in the bbs directory and modify it as shown 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="free" />
        <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">
    <p>
        <input type="hidden" name="boardCd" value="free" />
        <input type="hidden" name="curPage" />
        <input type="hidden" name="searchWord" value="happy" />
    </p>
    </form>
    <form id="viewForm" action="view.jsp" method="get">
    <p>
        <input type="hidden" name="articleNo" />
        <input type="hidden" name="boardCd" value="free" />
        <input type="hidden" name="curPage" value="1" />
        <input type="hidden" name="searchWord" value="happy" />
    </p>
    </form>
    <form id="writeForm" action="write.jsp" method="get">
    <p>
        <input type="hidden" name="boardCd" value="free" />
        <input type="hidden" name="curPage" value="1" />
        <input type="hidden" name="searchWord" value="happy" />
    </p>
    </form>
</div>

</body>
</html>

New article form page

Open the write.html file and use the Save As ... 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="free" />
<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="free" />
        <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="free" />
        <input type="hidden" name="curPage" value="1" />
        <input type="hidden" name="searchWord" value="happy" />
    </form>   
</div>

</body>
</html>

Create write_proc.jsp

This page inserts into the database the information obtained from the parameters passed by the writing form.

/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=smalltalk&curPage=1");
%>

Detailed view page

Open the view.html file and use the Save As ... menu to create the view.jsp file in the bbs directory and modify it as shown 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="free" />
    <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="free" />
    <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="free" />
    <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="free" />
      <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="free" />
      <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="free" />
      <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="free" />
      <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="free" />
      <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="free" />
      <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="free" />
      <input type="hidden" name="curPage" value="1" />
      <input type="hidden" name="searchWord" value="happy" />
    </form>       
</div>

</body>
</html>

Create 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=free&curPage=1&searchWord=happy");
%>

Create 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=smalltalk&curPage=1&searchWord=happy");
%>

Create 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=smalltalk&curPage=1&searchWord=happy");
%>

Create 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=smalltalk&curPage=1&searchWord=happy");
%>

Create 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=smalltalk&curPage=1&searchWord=happy");
%>

Create 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="free" />
<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="free" />
        <input type="hidden" name="curPage" value="1" />
        <input type="hidden" name="searchWord" value="happy" />
    </form>
</div>

</body>
</html>

Create 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=smalltalk&searchWord=happy");
%>

User

Create SignUp.jsp

Open the singUp.html file and use the Save As ... menu to create the signUp.jsp file in the users directory 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="captain@heist.com" /></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>

Create 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");
%>

Create welcome.jsp

This page informs the user that the subscription was successful.
Users who are unsuccessful in subscription should not see this page.
Open the signUp.jsp file and use the Sava As .. menu to create the welcome.jsp file in the users directory 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>

Create 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>

Create 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");
%>

Create 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="전송" /></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>

Create 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");
%>

Create changePasswd_confirm.jsp

Open the welcome.jsp file and use the Save As ... menu to create the changePasswd_confirm.jsp file in the users directory 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>

Create bye.jsp

Open the editAccount.jsp file and use the Save As ... menu to create the bye.jsp file in the users directory and modify it as shown 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>

Create 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");
%>

Create bye_confirm.jsp

Open the welcome.jsp file and use the Save As ... menu to create the bye_confirm.jsp file in the users directory and modify it as shown 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>

In the bulletin board program, the pages corresponding to the screen are list.jsp, view.jsp, write.jsp, and modify.jsp.
Of these, except for modify.jsp and all include a loginCheck.jsp file.
modify.jsp requires the logic to check the owner of the post.
EditAccount.jsp, changePasswd.jsp, and bye.jsp among the member programs include the loginCheck.jsp file.
JSP pages that do not show a screen have _proc appended to the filename.

Login Policy

  1. Only authenticated users can use the bulletin board.
  2. If login is successful in login page, the login page be redirected to /bbs/list.jsp?boardCd=smalltalk&curPage=1.
  3. If an unauthenticated user visits a page that requires authentication, it will be redirected to the login page. If the login is successful, the login page will be redirected to the page you originally intended to visit.
  4. When logout is complete, the logout.jsp be redirected to the homepage.