각진 세상에 둥근 춤을 추자
[JSP] 프로젝트 실습 - 게시판 만들기 3 (약관 화면 설계) 본문
2022.10.19 - [JSP] - [JSP] 프로젝트 실습 - 게시판 만들기 2 (로그인 화면 설계)
[JSP] 프로젝트 실습 - 게시판 만들기 2 (로그인 화면 설계)
아래 화면과 같은 로그인 화면 페이지를 구현해 본다. 화면 페이지를 보면 3부분으로 나눌 수 있다. 헤더(header) - 메인(main) - 푸터(footer)이다. 각각 페이지를 구현할 때 마다 헤더와 푸터 부분을
this-circle-jeong.tistory.com
앞서 구현한 로그인 화면에서 '회원가입' 버튼을 클릭하면 약관 화면이 나오게 작성하였다.
이번에는 약관 화면을 구현해 본다.
약관 내용은 네이버 약관 내용을 복사했다.
내용 입력은 Sequel Pro를 통해 입력했다.
1. 약관 폼 구현하기
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="./_header.jsp" %>
<main id="user">
<section class="terms">
<table border="1">
<caption>사이트 이용약관</caption>
<tr>
<td>
<textarea name="terms"><%= terms %></textarea>
<label><input type="checkbox" class="terms"> 동의합니다.</label>
</td>
</tr>
</table>
<table border="1">
<caption>개인정보 취급방침</caption>
<tr>
<td>
<textarea name="privacy"><%= privacy %></textarea>
<label><input type="checkbox" class="privacy"> 동의합니다.</label>
</td>
</tr>
</table>
<p>
<a href="/Jboard1/user/login.jsp" class="btn btnCancel">취소</a>
<a href="/Jboard1/user/register.jsp" class="btn btnNext">다음</a>
</p>
</section>
</main>
<%@ include file="./_footer.jsp" %>
약관 css 코드는 다음과 같다.
/* 약관 */
#user > .terms {
width: 600px;
height: auto;
box-sizing: border-box;
margin: 60px auto;
overflow: hidden;
}
#user > .terms > table {
width: 100%;
height: auto;
border-collapse: collapse;
border-spacing: 0;
border-top: 2px solid #111;
}
#user > .terms > table > caption {
text-align: left;
font-weight: bold;
padding: 10px 0;
box-sizing: border-box;
}
#user > .terms > table tr {}
#user > .terms > table tr > td {
border: 1px solid #e9e9e9;
padding: 6px;
box-sizing: border-box;
}
#user > .terms > table tr > td > textarea {
width: 100%;
height: 200px;
resize: none;
background-color: #f7f7f7;
border: 1px solid #e4eaec;
padding: 2px;
box-sizing: border-box;
}
#user > .terms > table tr > td > label {float: right;}
#user > .terms > table tr > td > label > input[type=checkbox] {}
#user > .terms > p {
float: right;
margin-top: 10px;
}
2. 데이터베이스 연결 작업
Sequel Pro에서 입력한 약관 내용을 불러온다.
(1) Jboard1 - Javva Resources - src/main/java - db 패키지 생성 - DBCP.java 파일 생성
DBCP(DataBase Connection Pool)을 이용한다.
Connection Pool을 만들어 미리 생성한 여러 Connection 객체를 담아둔다.
그리고 클라이언트가 요청할 때 마다 제공한다.
클라이언트가 사용을 완료한 후에는 Pool에 다시 Connection 객체를 반환하기 때문에 또 다른 접근 요청이 존재하더라도 새로운 Connection 객체를 생성할 필요가 없다.
[DBCP.java]의 코드는 다음과 같다.
package db;
import java.sql.Connection;
import java.sql.SQLException;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.sql.DataSource;
public class DBCP {
private static DataSource ds = null;
public static Connection getConnection() throws NamingException, SQLException {
if(ds == null) {
ds = (DataSource) new InitialContext().lookup("java:comp/env/dbcp_java2_board");
}
return ds.getConnection();
}
}
(2) Servers - Tomcat v9.0 Server at... - contextl.xml 내 내용 작성
서버를 톰캣을 이용해 실행시키기 때문에 컨텍스트에 내용을 추가로 작성해야 한다.
<context></context> 안에 내용을 추가로 작성한다.
<Resource
name="dbcp_java2_board"
auth="Container"
type="javax.sql.DataSource"
driverClassName="com.mysql.cj.jdbc.Driver"
url="jdbc:mysql://127.0.0.1:3306/데이터베이스명"
username="유저명"
password="서버 비밀번호"
maxTotal="16"
maxIdle="16"
maxWaitMillis="3000"
/>
(3) terms.jsp 파일에서 데이터베이스 연결
<%
String terms = null;
String privacy = null;
try{
Conncetion conn = DBCP.getConnection();
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("select * from `board_terms`");
if(rs.next()){
terms = rs.getString(1);
privacty = rs.getString(2);
}
rs.close();
stmt.close();
conn.close();
}catch(Exception e){
e.printStackTrace();
}
%>
3. '동의란 체크 시 다음 버튼 클릭 가능' 기능 구현하기
추가로 동의란 체크 시 다음 버튼 클릭이 가능한 기능을 구현해 본다.
<script>
$(function(){
// 버튼 클릭 시
$('.btnNext').click(function(){
let isCheck1 = $('input[class=terms]').is(':checked');
let isCheck2 = $('input[class=privacy]').is(':checked');
if(isCheck1 && isCheck2){
return true;
}else{
alert('동의 체크를 하셔야 합니다.');
return false;
{
});
});
</script>
전체 코드
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page import="db.DBCP"%>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="./_header.jsp" %>
<script>
$(function(){
$('.btnNext').click(function(){
let isCheck1 = $('input[class=terms]').is(':checked');
let isCheck2 = $('input[class=privacy]').is(':checked');
if(isCheck1 && isCheck2){
return true;
}else{
alert('동의 체크를 하셔야 합니다.');
return false;
}
});
});
</script>
<%
String terms = null;
String privacy = null;
try{
Connection conn = DBCP.getConnection();
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("select * from `board_terms`");
if(rs.next()){
terms = rs.getString(1);
privacy = rs.getString(2);
}
rs.close();
stmt.close();
conn.close();
}catch(Exception e){
e.printStackTrace();
}
%>
<main id="user">
<section class="terms">
<table border="1">
<caption>사이트 이용약관</caption>
<tr>
<td>
<textarea name="terms"><%= terms %></textarea>
<label><input type="checkbox" class="terms"> 동의합니다.</label>
</td>
</tr>
</table>
<table border="1">
<caption>개인정보 취급방침</caption>
<tr>
<td>
<textarea name="privacy"><%= privacy %></textarea>
<label><input type="checkbox" class="privacy"> 동의합니다.</label>
</td>
</tr>
</table>
<p>
<a href="/Jboard1/user/login.jsp" class="btn btnCancel">취소</a>
<a href="/Jboard1/user/register.jsp" class="btn btnNext">다음</a>
</p>
</section>
</main>
<%@ include file="./_footer.jsp" %>
'JSP' 카테고리의 다른 글
| [JSP] JAVA JSON (0) | 2022.10.23 |
|---|---|
| [JSP] 프로젝트 실습 - 게시판 만들기 4 (회원가입 화면 설계) (0) | 2022.10.23 |
| [JSP] 프로젝트 실습 - 게시판 만들기 2 (로그인 화면 설계) (0) | 2022.10.19 |
| [JSP] 프로젝트 실습 - 게시판 만들기 1 ( 유스케이스 작성) (0) | 2022.10.19 |
| [JSP] JDBC 프로그래밍 실습 1: Member 관리 (0) | 2022.10.14 |
'JSP' Related Articles
more
