이모티콘 게시판 / paging

준동이·2023년 4월 26일
0
post-custom-banner

웹사이트(프로그램)

사이트기획

  • 디자인기획
    UI에 대한 얘기 - psd -html / css / js를 어떻게 만들어낼것인가 -> link

  • 프로그램 기획
    만들어진 디자인으로 프로그램화
    디자인 => UML / ERD / DFD =>프로그램화
    게시판을 주제로 => UI를 만들어낼 부분이 -> UML / ERD / DFD

컨텐츠 기획

암호화

md5 암호화 체계
블록체인에 사용



new 마킹(새 글)이 달리게 하기.(list 부분 수정하였음)

날짜의 차이, 기준을 통해 new 마킹을 넣어줄 수 있다

select datediff('A', 'B') A,B의 날짜 차이



String sql 수정

날짜 차이를 구하는 것 추가 - datediff(now(), wdate)wgap

String sql = "select seq, subject, writer, date_format(wdate, '%Y-%m-%d') wdate, hit, datediff(now(), wdate)wgap from board1 order by seq desc";

while 수정

// simple1의 board_list1.jsp 코드에서 이모티콘으로 인해 더 추가된 코드들

String emot = rs.getString( "emot" );

// emot의 번호를 받아 .png와 합침
// ex) emot가 01이면 emot01.png가 되게 하여 이모티콘으로 만듦
sbHtml.append( "<td><img src='../../images/emoticon/emot" + emot + ".png' width='15' /></td>" );

이렇게

while( rs.next() ) {
			String seq = rs.getString( "seq" );
			String subject = rs.getString( "subject" );
			String writer = rs.getString( "writer" );
			String emot = rs.getString( "emot" );
			String wdate = rs.getString( "wdate" );
			String hit = rs.getString( "hit" );
			int wgap = rs.getInt( "wgap" );
			
			sbHtml.append( "<tr>" );
			sbHtml.append( "<td><img src='../../images/emoticon/emot" + emot + ".png' width='15' /></td>" );
			sbHtml.append( "<td>" + seq + "</td>" );
			sbHtml.append( "<td class='left'>" );
			sbHtml.append( "<a href='board_view1.jsp?seq=" + seq + "'>" + subject + "</a>&nbsp;" );
			
			if( wgap == 0 ) {
				sbHtml.append( "<img src='../../images/icon_new.gif' alt='NEW'>" );
			}
			
			sbHtml.append( "</td>");
			sbHtml.append( "<td>" + writer + "</td>" );
			sbHtml.append( "<td>" + wdate + "</td>" );
			sbHtml.append( "<td>" + hit + "</td>" );
			sbHtml.append( "<td>&nbsp;</td>" );
			sbHtml.append( "</tr>" );
		}

new 라고 적혀져있는 것은 당일 기준으로 당일날 만들어진 것들만 new가 돼있고 어제 만든(25일)것은 new가 없다.



조회 - view에서 수정

들어갔을때 하나씩 조회수 증가

	// 조회수 증가 / seq에 대한 hit1씩 증가
	String sql = "update board1 set hit=hit+1 where seq=?";
	pstmt = conn.prepareStatement(sql);
	pstmt.setString(1, seq);
	
	pstmt.executeQuery();
	
	// 번호에 해당하는 값 가져오기
	sql = "select subject, writer, mail, wip, date_format(wdate,'%Y-%m-%d')wdate, hit, content from board1 where seq=?";
	pstmt = conn.prepareStatement(sql);
	pstmt.setString(1, seq);
	
	rs = pstmt.executeQuery();



이모티콘이 적용된 게시판

이모티콘이 있는 게시판에서 쓰기, 삭제, 수정 등 적용시키기.

이렇게 이모티콘이 생기게 만들기

선택한 이모티콘을 위 사진처럼 리스트에 이모티콘이 적용되게 만들기.


테이블명	emot_board1
번호		seq			int				not null	primary key		auto_increment
제목		subject 	varchar(150)  	not null	
글쓴이	writer		varchar(12)	  	not null
이메일	mail 		varchar(50)  
비밀번호	password	varchar(12)		not null
내용		content 	varchar(2000)
이모티콘 emot 		char(2) 		not null
조회수	hit 		int 			not null
아이피	wip 		varchar(15) 	not null
등록일	wdate 		datetime 		not null
=> 로지컬 다이어그램

*암호화
평문 -> 비문
기법 -> md5, sha 
java
mariadb

create 구문 만들기 - 전 테이블에서 emot char(2) not null 추가
create table emot_board1 (
seq int not null primary key auto_increment,
subject varchar(150) not null,
writer varchar(12) not null,
mail varchar(50),
password varchar(12) not null,
content varchar(2000),
emot char(2) not null,
hit int not null,
wip varchar(15) not null,
wdate datetime not null
);
    
데이터베이스명 : board
사용자명 : board
암호 : 1234

// 기존 코드에서 추가됨
insert into emot_board1 values(0,'제목','이름','test@test.com','1234','내용','01', 0, '000,000,000,000', now());

board_list1.jsp
	(cpage)					(x)							(x)
	board_write1.jsp		board_write1_ok.jsp			board_list1.jsp
    (cpage)
    board_view1.jsp
    	(cpage)						(cpage)							(cpage)
    	board_modify1.jsp			board_modify1.ok.jsp			board_view1.jsp
        (cpage)						(x)								(x)
        board_delete1.jsp			board_delete1_ok.jsp			board_list1.jsp


페이지 흐름 + 데이터의 흐름

글 목록		board_list1.jsp
글 쓰기 		board_write1.jsp
글자세히보기	board_view1.jsp
글 수정		board_modify1.jsp
글 삭제 		board_delete1.jsp


페이지의 흐름(page navigation)
board_list1.jsp
		(데이터x)넘어갈 때	->	(입력내용) 넘어갈 때 	-> 	(x)	
		board_write1.jsp 	-> board_write_ok1.jsp	-> board_list1.jsp
        (seq)
        board_view1.jsp
        		(seq)		  ->		(seq 수정내용)
        		board_modify1.jsp	-> board_modify_ok1.jsp		-> 수정하면 board_view1.jsp
                (seq)		  ->		(seq, 비밀번호)		->		(x)
                board_delete1.jsp	-> board_delete1_ok.jsp 	-> board_list



writer

board_write1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../../css/board.css">
<script type="text/javascript">
	window.onload = function() {
		document.getElementById( 'wbtn' ).onclick = function() {
			if( document.wfrm.info.checked == false ) {
				alert( '동의하셔야 합니다.' );
				return false;
			}
			if( document.wfrm.writer.value.trim() == '' ) {
				alert( '글쓴이를 입력하셔야 합니다.' );
				return false;
			}
			if( document.wfrm.subject.value.trim() == '' ) {
				alert( '제목을 입력하셔야 합니다.' );
				return false;
			}
			if( document.wfrm.password.value.trim() == '' ) {
				alert( '비밀번호를 입력하셔야 합니다.' );
				return false;
			}
			document.wfrm.submit();
		};
	};
</script>
</head>

<body>
<!-- 상단 디자인 -->
<div class="con_title">
	<h3>게시판</h3>
	<p>HOME &gt; 게시판 &gt; <strong>게시판</strong></p>
</div>
<div class="con_txt">
	<form action="./board_write1_ok.jsp" method="post" name="wfrm">
		<div class="contents_sub">	
			<!--게시판-->
			<div class="board_write">
				<table>
				<tr>
					<th class="top">글쓴이</th>
					<td class="top" colspan="3"><input type="text" name="writer" value="" class="board_view_input_mail" maxlength="5" /></td>
				</tr>
				<tr>
					<th>제목</th>
					<td colspan="3"><input type="text" name="subject" value="" class="board_view_input" /></td>
				</tr>
				<tr>
					<th>비밀번호</th>
					<td colspan="3"><input type="password" name="password" value="" class="board_view_input_mail"/></td>
				</tr>
				<tr>
					<th>내용</th>
					<td colspan="3"><textarea name="content" class="board_editor_area"></textarea></td>
				</tr>
				<tr>
					<th>이메일</th>
					<td colspan="3"><input type="text" name="mail1" value="" class="board_view_input_mail"/> @ <input type="text" name="mail2" value="" class="board_view_input_mail"/></td>
				</tr>
				<tr>
					<th>이모티콘</th>
					<td colspan="3" align="center">
						<table>
						<tr>
							<td>
								<img src="../../images/emoticon/emot01.png" width="25"/><br />
								<input type="radio" name="emot" value="emot01" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot02.png" width="25" /><br />
								<input type="radio" name="emot" value="emot02" class="input_radio" checked="checked"/>
							</td>
							<td>
								<img src="../../images/emoticon/emot03.png" width="25" /><br />
								<input type="radio" name="emot" value="emot03" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot04.png" width="25" /><br />
								<input type="radio" name="emot" value="emot04" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot05.png" width="25" /><br />
								<input type="radio" name="emot" value="emot05" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot06.png" width="25" /><br />
								<input type="radio" name="emot" value="emot06" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot07.png" width="25" /><br />
								<input type="radio" name="emot" value="emot07" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot08.png" width="25" /><br />
								<input type="radio" name="emot" value="emot08" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot09.png" width="25" /><br />
								<input type="radio" name="emot" value="emot09" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot10.png" width="25" /><br />
								<input type="radio" name="emot" value="emot10" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot11.png" width="25"/><br />
								<input type="radio" name="emot" value="emot11" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot12.png" width="25" /><br />
								<input type="radio" name="emot" value="emot12" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot13.png" width="25" /><br />
								<input type="radio" name="emot" value="emot13" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot14.png" width="25" /><br />
								<input type="radio" name="emot" value="emot14" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot15.png" width="25" /><br />
								<input type="radio" name="emot" value="emot15" class="input_radio" />
							</td>
						</tr>
						<tr>
							<td>
								<img src="../../images/emoticon/emot16.png" width="25"/><br />
								<input type="radio" name="emot" value="emot16" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot17.png" width="25" /><br />
								<input type="radio" name="emot" value="emot17" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot18.png" width="25" /><br />
								<input type="radio" name="emot" value="emot18" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot19.png" width="25" /><br />
								<input type="radio" name="emot" value="emot19" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot20.png" width="25" /><br />
								<input type="radio" name="emot" value="emot20" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot21.png" width="25" /><br />
								<input type="radio" name="emot" value="emot21" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot22.png" width="25" /><br />
								<input type="radio" name="emot" value="emot22" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot23.png" width="25" /><br />
								<input type="radio" name="emot" value="emot23" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot24.png" width="25" /><br />
								<input type="radio" name="emot" value="emot24" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot25.png" width="25"/><br />
								<input type="radio" name="emot" value="emot25" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot26.png" width="25" /><br />
								<input type="radio" name="emot" value="emot26" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot27.png" width="25" /><br />
								<input type="radio" name="emot" value="emot27" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot28.png" width="25" /><br />
								<input type="radio" name="emot" value="emot28" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot29.png" width="25" /><br />
								<input type="radio" name="emot" value="emot29" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot30.png" width="25" /><br />
								<input type="radio" name="emot" value="emot30" class="input_radio" />
							</td>
						</tr>
						<tr>
							<td>
								<img src="../../images/emoticon/emot31.png" width="25"/><br />
								<input type="radio" name="emot" value="emot31" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot32.png" width="25" /><br />
								<input type="radio" name="emot" value="emot32" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot33.png" width="25" /><br />
								<input type="radio" name="emot" value="emot33" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot34.png" width="25" /><br />
								<input type="radio" name="emot" value="emot34" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot35.png" width="25" /><br />
								<input type="radio" name="emot" value="emot35" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot36.png" width="25" /><br />
								<input type="radio" name="emot" value="emot36" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot37.png" width="25" /><br />
								<input type="radio" name="emot" value="emot37" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot38.png" width="25" /><br />
								<input type="radio" name="emot" value="emot38" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot39.png" width="25" /><br />
								<input type="radio" name="emot" value="emot39" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot40.png" width="25"/><br />
								<input type="radio" name="emot" value="emot40" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot41.png" width="25" /><br />
								<input type="radio" name="emot" value="emot41" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot42.png" width="25" /><br />
								<input type="radio" name="emot" value="emot42" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot43.png" width="25" /><br />
								<input type="radio" name="emot" value="emot43" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot44.png" width="25" /><br />
								<input type="radio" name="emot" value="emot44" class="input_radio" />
							</td>
							<td>
								<img src="../../images/emoticon/emot45.png" width="25" /><br />
								<input type="radio" name="emot" value="emot45" class="input_radio" />
							</td>
						</tr>
						</table>
					</td>
				</tr>
				</table>
				
				<table>
				<tr>
					<br />
					<td style="text-align:left;border:1px solid #e0e0e0;background-color:f9f9f9;padding:5px">
						<div style="padding-top:7px;padding-bottom:5px;font-weight:bold;padding-left:7px;font-family: Gulim,Tahoma,verdana;">※ 개인정보 수집 및 이용에 관한 안내</div>
						<div style="padding-left:10px;">
							<div style="width:97%;height:95px;font-size:11px;letter-spacing: -0.1em;border:1px solid #c5c5c5;background-color:#fff;padding-left:14px;padding-top:7px;">
								1. 수집 개인정보 항목 : 회사명, 담당자명, 메일 주소, 전화번호, 홈페이지 주소, 팩스번호, 주소 <br />
								2. 개인정보의 수집 및 이용목적 : 제휴신청에 따른 본인확인 및 원활한 의사소통 경로 확보 <br />
								3. 개인정보의 이용기간 : 모든 검토가 완료된 후 3개월간 이용자의 조회를 위하여 보관하며, 이후 해당정보를 지체 없이 파기합니다. <br />
								4. 그 밖의 사항은 개인정보취급방침을 준수합니다.
							</div>
						</div>
						<div style="padding-top:7px;padding-left:5px;padding-bottom:7px;font-family: Gulim,Tahoma,verdana;">
							<input type="checkbox" name="info" value="1" class="input_radio"> 개인정보 수집 및 이용에 대해 동의합니다.
						</div>
					</td>
				</tr>
				</table>
			</div>
			
			<div class="btn_area">
				<div class="align_left">
					<input type="button" value="목록" class="btn_list btn_txt02" style="cursor: pointer;" onclick="location.href='board_list1.jsp'" />
				</div>
				<div class="align_right">
					<input type="button" id="wbtn" value="쓰기" class="btn_write btn_txt01" style="cursor: pointer;" />
				</div>
			</div>
			<!--//게시판-->
		</div>
	</form>
</div>
<!-- 하단 디자인 -->

</body>
</html>

board_write1_ok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.naming.NamingException" %>

<%@ page import="javax.sql.DataSource" %>

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.SQLException" %>

<%
	request.setCharacterEncoding( "utf-8" );

	String subject = request.getParameter( "subject" );
	String writer = request.getParameter( "writer" );
	String mail = "";
	if(!request.getParameter( "mail1" ).equals( "" ) && !request.getParameter( "mail2" ).equals( "" ) ) {
		mail = request.getParameter( "mail1" ) + "@" + request.getParameter( "mail2" );
	}
	String password = request.getParameter( "password" );
	String content = request.getParameter( "content" );
	
	// emot를 -> ""(공백)으로치환 : 만약 emot01이였다면 emot를 공백으로 치환하여 01로 되게 만든 것.
	String emot = request.getParameter( "emot" ).replaceAll( "emot", "" );
	String wip = request.getRemoteAddr();
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	
	int flag = 1;
	try {
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup( "java:comp/env" );
		DataSource dataSource = (DataSource)envCtx.lookup( "jdbc/mariadb3" );
		
		conn = dataSource.getConnection();
		
        // 6번째 ? 에 emot는 공백으로 치환되고 숫자만 남은것이 입력되는 것.
		String sql = "insert into emot_board1 values (0, ?, ?, ?, ?, ?, ?, 0, ?, now())";
		pstmt = conn.prepareStatement( sql );
		pstmt.setString( 1, subject );
		pstmt.setString( 2, writer );
		pstmt.setString( 3, mail );
		pstmt.setString( 4, password );
		pstmt.setString( 5, content );
		pstmt.setString( 6, emot );
		pstmt.setString( 7, wip );
		
		int result = pstmt.executeUpdate();
		if (result == 1) {
			flag = 0;
		} else if (result == 0) {
			flag = 1;
		}
		
	} catch( NamingException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} catch( SQLException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} finally {
		if( pstmt != null ) pstmt.close();
		if( conn != null ) conn.close();
	}	
		
	out.println( "<script type='text/javascript'>" );
	if( flag == 0 ) {
		out.println( "alert('글쓰기에 성공');" );
		out.println( "location.href='board_list1.jsp';" );
	} else if( flag == 1 ) {
		out.println( "alert('글쓰기에 실패');" );
		out.println( "history.back();" );
	}
	out.println( "</script>" );		
%>



list

board_list1.jsp
참고 : 줄친부분처럼 사용도 가능.

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

<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.naming.NamingException" %>

<%@ page import="javax.sql.DataSource" %>

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.SQLException" %>

<%
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	int totalRecord = 0;
	
	StringBuilder sbHtml = new StringBuilder();
	try {
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup( "java:comp/env" );
		DataSource dataSource = (DataSource)envCtx.lookup( "jdbc/mariadb3" );
		
		conn = dataSource.getConnection();
		
		String sql = "select seq, subject, writer, emot, date_format(wdate, '%Y-%m-%d') wdate, hit, datediff(now(), wdate) wgap from emot_board1 order by seq desc";
		pstmt = conn.prepareStatement( sql );
		
		rs = pstmt.executeQuery();
		
		rs.last();
		totalRecord = rs.getRow();
		rs.beforeFirst();
		
		rs = pstmt.executeQuery();
		while( rs.next() ) {
			String seq = rs.getString( "seq" );
			String subject = rs.getString( "subject" );
			String writer = rs.getString( "writer" );
			String emot = rs.getString( "emot" );
			String wdate = rs.getString( "wdate" );
			String hit = rs.getString( "hit" );
			int wgap = rs.getInt( "wgap" );
			
			sbHtml.append( "<tr>" );
			sbHtml.append( "<td><img src='../../images/emoticon/emot" + emot + ".png' width='15' /></td>" );
			sbHtml.append( "<td>" + seq + "</td>" );
			sbHtml.append( "<td class='left'>" );
			sbHtml.append( "	<a href='board_view1.jsp?seq=" + seq + "'>" + subject + "</a>&nbsp;" );
			
			if( wgap == 0 ) {
				sbHtml.append( "	<img src='../../images/icon_new.gif' alt='NEW'>" );
			}
			
			sbHtml.append( "</td>");
			sbHtml.append( "<td>" + writer + "</td>" );
			sbHtml.append( "<td>" + wdate + "</td>" );
			sbHtml.append( "<td>" + hit + "</td>" );
			sbHtml.append( "<td>&nbsp;</td>" );
			sbHtml.append( "</tr>" );
		}
		
	} catch( NamingException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} catch( SQLException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} finally {
		if( rs != null ) rs.close();
		if( pstmt != null ) pstmt.close();
		if( conn != null ) conn.close();
	}
%>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../../css/board.css">
</head>

<body>
<!-- 상단 디자인 -->
<div class="con_title">
	<h3>게시판</h3>
	<p>HOME &gt; 게시판 &gt; <strong>게시판</strong></p>
</div>
<div class="con_txt">
	<div class="contents_sub">
		<div class="board_top">
			<div class="bold"><span class="txt_orange"><%=totalRecord %></span></div>
		</div>

		<!--게시판-->
		<div class="board">
			<table>
			<tr>
				<th width="3%">&nbsp;</th>
				<th width="5%">번호</th>
				<th>제목</th>
				<th width="10%">글쓴이</th>
				<th width="17%">등록일</th>
				<th width="5%">조회</th>
				<th width="3%">&nbsp;</th>
			</tr>
<!-- 시작 -->
<%=sbHtml %>
<!---->

			</table>
		</div>	
		<!--//게시판-->

		<div class="align_right">
			<input type="button" value="쓰기" class="btn_write btn_txt01" style="cursor: pointer;" onclick="location.href='board_write1.jsp'" />
		</div>
	</div>
</div>
<!--//하단 디자인 -->

</body>
</html>



view

board_view1.jsp

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

<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.naming.NamingException" %>

<%@ page import="javax.sql.DataSource" %>

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.SQLException" %>	

<%
	request.setCharacterEncoding( "utf-8" );

	String seq = request.getParameter( "seq" );
	
	String subject = "";
	String writer = "";
	String mail = "";
	String wip = "";
	String wdate = "";
	String hit = "";
	String content = "";
	String emot = "";
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	try {
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup( "java:comp/env" );
		DataSource dataSource = (DataSource)envCtx.lookup( "jdbc/mariadb3" );
		
		conn = dataSource.getConnection();
		
		String sql = "update emot_board1 set hit=hit+1 where seq=?";
		pstmt = conn.prepareStatement( sql );
		pstmt.setString( 1, seq );
		
		pstmt.executeUpdate();
		
		sql = "select subject, writer, mail, wip, wdate, hit, content, emot from emot_board1 where seq=?";
		pstmt = conn.prepareStatement( sql );
		pstmt.setString( 1, seq );
		
		rs = pstmt.executeQuery();
		if( rs.next() ) {
			subject = rs.getString( "subject" );
			writer = rs.getString( "writer" );
			mail = rs.getString( "mail" );
			wip = rs.getString( "wip" );
			wdate = rs.getString( "wdate" );
			hit = rs.getString( "hit" );
			content = rs.getString( "content" ).replaceAll( "\n", "<br />" );
			emot = "emot" + rs.getString( "emot" ) + ".png";
		}
		
	} catch( NamingException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} catch( SQLException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} finally {
		if( rs != null ) rs.close();
		if( pstmt != null ) pstmt.close();
		if( conn != null ) conn.close();
	}
%>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../../css/board.css">
</head>

<body>
<!-- 상단 디자인 -->
<div class="con_title">
	<h3>게시판</h3>
	<p>HOME &gt; 게시판 &gt; <strong>게시판</strong></p>
</div>
<div class="con_txt">
	<div class="contents_sub">
		<!--게시판-->
		<div class="board_view">
			<table>
			<tr>
				<th width="10%">제목</th>
				<td width="60%">(<img src="../../images/emoticon/<%=emot %>" width="15"/>)&nbsp;<%=subject %></td>
				<th width="10%">등록일</th>
				<td width="20%"><%=wdate %></td>
			</tr>
			<tr>
				<th>글쓴이</th>
				<td><%=writer %>(<%=mail %>)</td>
				<th>조회</th>
				<td><%=hit %></td>
			</tr>
			<tr>
				<td colspan="4" height="200" valign="top" style="padding: 20px; line-height: 160%"><%=content %></td>
			</tr>
			</table>
		</div>

		<div class="btn_area">
			<div class="align_left">
				<input type="button" value="목록" class="btn_list btn_txt02" style="cursor: pointer;" onclick="location.href='board_list1.jsp'" />
			</div>
			<div class="align_right">
				<input type="button" value="수정" class="btn_list btn_txt02" style="cursor: pointer;" onclick="location.href='board_modify1.jsp?seq=<%=seq %>'" />
				<input type="button" value="삭제" class="btn_list btn_txt02" style="cursor: pointer;" onclick="location.href='board_delete1.jsp?seq=<%=seq %>'" />
				<input type="button" value="쓰기" class="btn_write btn_txt01" style="cursor: pointer;" onclick="location.href='board_write1.jsp'" />
			</div>
		</div>	
		<!--//게시판-->
	</div>
</div>
<!-- 하단 디자인 -->

</body>
</html>



delete

board_delete1.jsp

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

<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.naming.NamingException" %>

<%@ page import="javax.sql.DataSource" %>

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.SQLException" %>	

<%
	request.setCharacterEncoding( "utf-8" );

	String seq = request.getParameter( "seq" );
	
	String subject = "";
	String writer = "";
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	try {
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup( "java:comp/env" );
		DataSource dataSource = (DataSource)envCtx.lookup( "jdbc/mariadb3" );
		
		conn = dataSource.getConnection();
		
		String sql = "select subject, writer from emot_board1 where seq=?";
		pstmt = conn.prepareStatement( sql );
		pstmt.setString( 1, seq );
		
		rs = pstmt.executeQuery();
		if( rs.next() ) {
			subject = rs.getString( "subject" );
			writer = rs.getString( "writer" );
		}
		
	} catch( NamingException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} catch( SQLException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} finally {
		if( rs != null ) rs.close();
		if( pstmt != null ) pstmt.close();
		if( conn != null ) conn.close();
	}
%>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../../css/board.css">
<script type="text/javascript">
	window.onload = function() {
		document.getElementById( 'dbtn' ).onclick = function() {
			if( document.dfrm.password.value.trim() == '' ) {
				alert( '비밀번호를 입력하셔야 합니다.' );
				return false;
			}
			document.dfrm.submit();
		};
	};
</script>
</head>

<body>
<!-- 상단 디자인 -->
<div class="con_title">
	<h3>게시판</h3>
	<p>HOME &gt; 게시판 &gt; <strong>게시판</strong></p>
</div>
<div class="con_txt">
	<form action="board_delete1_ok.jsp" method="post" name="dfrm">
		<input type="hidden" name="seq" value="<%=seq %>" />
		<div class="contents_sub">	
			<!--게시판-->
			<div class="board_write">
				<table>
				<tr>
					<th class="top">글쓴이</th>
					<td class="top" colspan="3"><input type="text" name="writer" value="<%=writer %>" class="board_view_input_mail" maxlength="5" readonly/></td>
				</tr>
				<tr>
					<th>제목</th>
					<td colspan="3"><input type="text" name="subject" value="<%=subject %>" class="board_view_input" readonly/></td>
				</tr>
				<tr>
					<th>비밀번호</th>
					<td colspan="3"><input type="password" name="password" value="" class="board_view_input_mail"/></td>
				</tr>
				</table>
			</div>
			
			<div class="btn_area">
				<div class="align_left">
					<input type="button" value="목록" class="btn_list btn_txt02" style="cursor: pointer;" onclick="location.href='board_list1.jsp'" />
					<input type="button" value="보기" class="btn_list btn_txt02" style="cursor: pointer;" onclick="location.href='board_view1.jsp?seq=<%=seq %>'" />
				</div>
				<div class="align_right">
					<input type="button" id="dbtn" value="삭제" class="btn_write btn_txt01" style="cursor: pointer;" />
				</div>
			</div>
			<!--//게시판-->
		</div>
	</form>
</div>
<!-- 하단 디자인 -->

</body>
</html>

board_delete1_ok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.naming.NamingException" %>

<%@ page import="javax.sql.DataSource" %>

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.SQLException" %>

<%
	request.setCharacterEncoding( "utf-8" );

	String seq = request.getParameter( "seq" );
	String password = request.getParameter( "password" );
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	
	int flag = 2;
	try {
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup( "java:comp/env" );
		DataSource dataSource = (DataSource)envCtx.lookup( "jdbc/mariadb3" );
		
		conn = dataSource.getConnection();
		
		String sql = "delete from emot_board1 where seq=? and password=?";
		pstmt = conn.prepareStatement( sql );
		pstmt.setString( 1, seq );
		pstmt.setString( 2, password );
		
		int result = pstmt.executeUpdate();
		if( result == 0 ) {
			flag = 1;
		} else if( result == 1 ) {
			flag = 0;
		}
		
	} catch( NamingException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} catch( SQLException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} finally {
		if( pstmt != null ) pstmt.close();
		if( conn != null ) conn.close();
	}	
		
	out.println( "<script type='text/javascript'>" );
	if( flag == 0 ) {
		out.println( "alert('글삭제에 성공');" );
		out.println( "location.href='board_list1.jsp';" );
	} else if( flag == 1 ) {
		out.println( "alert('비밀번호 오류');" );
		out.println( "history.back();" );
	} else if( flag == 2 ) {
		out.println( "alert('글삭제에 실패');" );
		out.println( "history.back();" );
	}
	out.println( "</script>" );		
%>



modify

board_modify1.jsp

// 선택되어있는 이모티콘을 수정작업을 했을때 그대로 체크표시가 유지되어있게 해주기
// 모든 코드에 해당 번호에 맞춰서 전부 작성해준다.
// 이렇게 직접 넣어주는 방법도 있지만 편하게 넣는 코드도 짤 수 있음 (나중에 해보기)
// 조건수식 연산자 활용으로 해당 이모티콘 선택
// radio = 단일선택(하나만 체크표시, 같이 분류된 것들 중에서 단일 선택)
class="input_radio" <%=emot.equals("01") ? "checked= 'checked'" : "" %> />
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.naming.NamingException" %>

<%@ page import="javax.sql.DataSource" %>

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.SQLException" %>

<%

   request.setCharacterEncoding("utf-8");

   String seq = request.getParameter("seq");
   
   Connection conn = null;
   PreparedStatement pstmt = null;
   ResultSet rs = null;
   
   String subject = "";
   String writer = "";
   //메일을 두개로 분리해서 사용하기 위함
   String[] mail = null;
   String content = "";
   String emot = "";
   
   
   try {
      Context initCtx = new InitialContext();
      Context envCtx = (Context)initCtx.lookup("java:comp/env");
      
      DataSource dataSource = (DataSource)envCtx.lookup("jdbc/mariadb3");
      
      conn = dataSource.getConnection();
      
      String sql = "select subject, writer, mail, content, emot from emote_board1 where seq = ?";
      
      pstmt = conn.prepareStatement(sql);
      
      pstmt.setString(1, seq);
      
      rs = pstmt.executeQuery();
      
      if(rs.next()) {
         subject = rs.getString("subject");
          writer = rs.getString("writer");
          if(rs.getString("mail").equals("")) {
             mail = new String[] {"", ""};
          }
          else {
             //@ 중심으로 mail1 과 2를 분리
             mail = rs.getString("mail").split("@");          
          }
          content = rs.getString("content");

          emot = rs.getString("emot");
      }
   } catch(NamingException e) {
      System.out.println("[에러] : " + e.getMessage());      
   } catch(SQLException e) {
      System.out.println("[에러] : " + e.getMessage());
   } finally {
      if(rs != null) try { rs.close(); } catch(SQLException e) {} 
      if(pstmt != null) try { pstmt.close(); } catch(SQLException e) {} 
      if(conn != null) try { conn.close(); } catch(SQLException e) {}          
}

%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../../css/board.css">
<script type="text/javascript">
window.onload = function() {
   document.getElementById('mbtn').onclick = function() {
      if(document.mfrm.subject.value.trim() == '') {
         alert("제목을 정확하게 입력하세요!");
         return false;
   	  }
      if(document.mfrm.password.value.trim() == '') {
         alert("비밀번호를 정확하게 입력하세요!");
         return false;
      }
      document.mfrm.submit();
   }
}
</script>
</head>

<body>
<!-- 상단 디자인 -->
<div class="con_title">
   <h3>게시판</h3>
   <p>HOME &gt; 게시판 &gt; <strong>게시판</strong></p>
</div>
<div class="con_txt">
   <form action="./board_modify1_ok.jsp" method="post" name="mfrm">
      <input type="hidden" name="seq" value="<%=seq %>" />
      <div class="contents_sub">   
         <!--게시판-->
         <div class="board_write">
            <table>
            <tr>
               <th class="top">글쓴이</th>
               <td class="top"><input type="text" name="writer" value="<%=writer %>" class="board_view_input_mail" maxlength="5" readonly/></td>
            </tr>
            <tr>
               <th>제목</th>
               <td><input type="text" name="subject" value="<%=subject %>" class="board_view_input" /></td>
            </tr>
            <tr>
               <th>비밀번호</th>
               <td><input type="password" name="password" value="" class="board_view_input_mail"/></td>
            </tr>
            <tr>
               <th>내용</th>
               <td><textarea name="content" class="board_editor_area"><%=content %></textarea></td>
            </tr>
            <tr>
               <th>이메일</th>
              <td><input type="text" name="mail1" value="<%=mail[0] %>" class="board_view_input_mail"/> @ <input type="text" name="mail2" value="<%=mail[1] %>" class="board_view_input_mail"/></td>
            </tr>
            <tr>
               <th>이모티콘</th>
               <td align="center">
                  <table>
                  <tr>
                     <td>
                        <img src="../../images/emoticon/emot01.png" width="25"/><br />
                        <input type="radio" name="emot" value="emot01" class="input_radio" <%=emot.equals("01") ? "checked= 'checked'" : "" %> />
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot02.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot02" class="input_radio" <%=emot.equals("02") ? "checked= 'checked'" : "" %> />
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot03.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot03" class="input_radio" <%=emot.equals("03") ? "checked= 'checked'" : "" %> />
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot04.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot04" class="input_radio" <%=emot.equals("04") ? "checked= 'checked'" : "" %> />
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot05.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot05" class="input_radio" <%=emot.equals("05") ? "checked= 'checked'" : "" %> />
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot06.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot06" class="input_radio" <%=emot.equals("06") ? "checked= 'checked'" : "" %> />
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot07.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot07" class="input_radio" <%=emot.equals("07") ? "checked= 'checked'" : "" %> />
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot08.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot08" class="input_radio" <%=emot.equals("08") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot09.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot09" class="input_radio" <%=emot.equals("09") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot10.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot10" class="input_radio" <%=emot.equals("10") ? "checked= 'checked'" : "" %> />
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot11.png" width="25"/><br />
                        <input type="radio" name="emot" value="emot11" class="input_radio" <%=emot.equals("11") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot12.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot12" class="input_radio" <%=emot.equals("12") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot13.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot13" class="input_radio" <%=emot.equals("13") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot14.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot14" class="input_radio" <%=emot.equals("14") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot15.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot15" class="input_radio" <%=emot.equals("15") ? "checked= 'checked'" : "" %>/>
                     </td>
                  </tr>
                  <tr>
                     <td>
                        <img src="../../images/emoticon/emot16.png" width="25"/><br />
                        <input type="radio" name="emot" value="emot16" class="input_radio" <%=emot.equals("16") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot17.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot17" class="input_radio" <%=emot.equals("17") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot18.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot18" class="input_radio" <%=emot.equals("18") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot19.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot19" class="input_radio" <%=emot.equals("19") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot20.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot20" class="input_radio" <%=emot.equals("20") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot21.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot21" class="input_radio" <%=emot.equals("21") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot22.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot22" class="input_radio" <%=emot.equals("22") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot23.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot23" class="input_radio" <%=emot.equals("23") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot24.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot24" class="input_radio" <%=emot.equals("24") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot25.png" width="25"/><br />
                        <input type="radio" name="emot" value="emot25" class="input_radio" <%=emot.equals("25") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot26.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot26" class="input_radio" <%=emot.equals("26") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot27.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot27" class="input_radio" <%=emot.equals("27") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot28.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot28" class="input_radio" <%=emot.equals("28") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot29.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot29" class="input_radio" <%=emot.equals("29") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot30.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot30" class="input_radio" <%=emot.equals("30") ? "checked= 'checked'" : "" %>/>
                     </td>
                  </tr>
                  <tr>
                     <td>
                        <img src="../../images/emoticon/emot31.png" width="25"/><br />
                        <input type="radio" name="emot" value="emot31" class="input_radio" <%=emot.equals("31") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot32.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot32" class="input_radio" <%=emot.equals("32") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot33.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot33" class="input_radio" <%=emot.equals("33") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot34.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot34" class="input_radio" <%=emot.equals("34") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot35.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot35" class="input_radio" <%=emot.equals("35") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot36.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot36" class="input_radio" <%=emot.equals("36") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot37.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot37" class="input_radio" <%=emot.equals("37") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot38.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot38" class="input_radio" <%=emot.equals("38") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot39.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot39" class="input_radio" <%=emot.equals("39") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot40.png" width="25"/><br />
                        <input type="radio" name="emot" value="emot40" class="input_radio" <%=emot.equals("40") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot41.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot41" class="input_radio" <%=emot.equals("41") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot42.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot42" class="input_radio" <%=emot.equals("42") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot43.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot43" class="input_radio" <%=emot.equals("43") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot44.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot44" class="input_radio" <%=emot.equals("44") ? "checked= 'checked'" : "" %>/>
                     </td>
                     <td>
                        <img src="../../images/emoticon/emot45.png" width="25" /><br />
                        <input type="radio" name="emot" value="emot45" class="input_radio" <%=emot.equals("45") ? "checked= 'checked'" : "" %>/>
                     </td>
                  </tr>
                  </table>
               </td>
            </tr>
            </table>
         </div>
         
         <div class="btn_area">
            <div class="align_left">
               <input type="button" value="목록" class="btn_list btn_txt02" style="cursor: pointer;" onclick="location.href='board_list1.jsp'" />
               <input type="button" value="보기" class="btn_list btn_txt02" style="cursor: pointer;" onclick="location.href='board_view1.jsp'" />
            </div>
            <div class="align_right">
               <input type="button" id="mbtn" value="수정" class="btn_write btn_txt01" style="cursor: pointer;" />
            </div>
         </div>
         <!--//게시판-->
      </div>
   </form>
</div>
<!-- 하단 디자인 -->

</body>
</html>

board_modify1_ok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="javax.naming.Context"%>
<%@ page import="javax.naming.InitialContext"%>
<%@ page import="javax.naming.NamingException"%>

<%@ page import="javax.sql.DataSource"%>

<%@ page import="java.sql.Connection"%>
<%@ page import="java.sql.PreparedStatement"%>
<%@ page import="java.sql.SQLException"%>

<%
request.setCharacterEncoding("utf-8");

String seq = request.getParameter("seq");

String subject = request.getParameter("subject");
String mail = "";
if (!request.getParameter("mail1").equals("") && !request.getParameter("mail2").equals("")) {
	mail = request.getParameter("mail1") + "@" + request.getParameter("mail2");
}
String password = request.getParameter("password");
String content = request.getParameter("content");
String emot = request.getParameter("emot").replaceAll("emot","");

Connection conn = null;
PreparedStatement pstmt = null;

int flag = 2;

try {
	Context initCtx = new InitialContext();
	Context envCtx = (Context) initCtx.lookup("java:comp/env");
	DataSource dataSource = (DataSource) envCtx.lookup("jdbc/mariadb3");

	conn = dataSource.getConnection();

	String sql = "update emot_board1 set subject=?, mail=?, content=?, emot=? where seq=? and password=?";
	pstmt = conn.prepareStatement(sql);
	pstmt.setString(1, subject);
	pstmt.setString(2, mail);
	pstmt.setString(3, content);
	pstmt.setString(4, emot);
	pstmt.setString(5, seq);
	pstmt.setString(6, password);

	int result = pstmt.executeUpdate();


	if (result == 1) {
		flag = 0;
	} else if (result == 0) {
		flag = 1;
	}

	out.println("</script>");
} catch (NamingException e) {
	System.out.println("[에러] " + e.getMessage());
} catch (SQLException e) {
	System.out.println("[에러] " + e.getMessage());
} finally {
	if (pstmt != null) pstmt.close();
	if (conn != null) conn.close();
}

//자바스크립트로 출력 / JSP 코드로 javascript 만듦
	out.println("<script type='text/javascript'>");
	if (flag == 0) {
		out.println("alert('글수정 성공');");
		out.println("location.href='board_modify1.jsp?seq=" + seq + "';");
	} else if (flag == 1) {
		out.println("alert('비밀번호 오류');");
		out.println("history.back();");
	} else {
		out.println("alert('글수정 실패');");
		out.println("history.back();");
	}
%>



paging 하기

게시판 밑에 페이지 만들기.

board_list1.jsp코드에 페이지 넘버 만들기 코드
=> 추후 다 수정됨.

		<!--페이지넘버-->
		<div class="paginate_regular">
			<div align="absmiddle">
				<span><a>&lt;&lt;</a></span>
				&nbsp;
				<span><a>&lt;</a></span>
				&nbsp;&nbsp;
				<span><a>[ 1 ]</a></span>
				<span><a href="board_list1.jsp">2</a></span>
				<span><a href="board_list1.jsp">3</a></span>
				&nbsp;&nbsp;
				<span><a>&gt;</a></span>
				&nbsp;
				<span><a>&gt;&gt;</a></span>
			</div>
		</div>
		<!--//페이지넘버-->

1.한 페이지당 몇 개의 데이터(게시물들)를 할것인가(보통 10개가 기준)
2.밑의 페이지 단위 넘어가는 것 만들기 / 보통 5개 또는 10개씩



페이지를 나누려면 페이지당 데이터의 개수를 정하고 커서의 위치를 지정해줘야한다.

데이터를 봤을 때 위치를 어느 위치에 가져다 놔야하는데(정해진 개수 건너뛰어서),
페이지번호랑 데이터 개수로 위치를 알아내야함.

첫번째는 0, 0부터 출발해서 가져다놓음.

1페이지는 시작번호가 0번이고, 2페이지는 10개씩보기로해서 10번, 3페이지는 20번

이것들로 수식을 만들기

페이지번호			데이터 개수			시작번호
cpage				recordPerPage
1					10					0
2					10					10
3					10					20
...


시작번호 = 페이지번호..데이터갯수
공식
=> (cpage-1) * recordPerPage



토탈 페이지 개수 구하기

totalRecord			
전체 데이터 개수		데이터 개수		전체 페이지수
0개일때				10				1
1					10				1
2					10				1
...
10					10				1
11					10				2


전체 페이지수 구하기
공식
=> 전체 페이지수.. : ((totalRecord-1) / recordPerpage) + 1;



페이지 이동하는 << < > >> 기능
페이지는 5개를 기준으로 하고 5페이지에서 넘기면 그후엔 6~10페이지가 나오는 것.

현재페이지			한 페이지당 보일 페이지 갯수			시작블록			끝블럭
cpage				blockPerPage						
1					5									1				5
2					5									1				5
...
5					5									1				5
6					5									6				10

수식
시작블록 = cpage(현재페이지) ... blockPerPage
		= cpage - (cpage-1) % blockperpage
        
끝블록 = cpage - (cpage-1) % blockperpage + blockperpage - 1

board_insert_ok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="javax.naming.Context"%>
<%@ page import="javax.naming.InitialContext"%>
<%@ page import="javax.naming.NamingException"%>

<%@ page import="javax.sql.DataSource"%>

<%@ page import="java.sql.Connection"%>
<%@ page import="java.sql.PreparedStatement"%>
<%@ page import="java.sql.SQLException"%>

<%


request.setCharacterEncoding("utf-8");

Connection conn = null;
PreparedStatement pstmt = null;

int flag = 1;

try {
	Context initCtx = new InitialContext();
	Context envCtx = (Context)initCtx.lookup("java:comp/env");
	DataSource dataSource = (DataSource)envCtx.lookup("jdbc/mariadb3");
	
	conn = dataSource.getConnection();
	
	String sql = "insert into board1 values(0,?,?,?,?,?,0,?,now())";
	pstmt = conn.prepareStatement(sql);
	
	// 100번 반복
	for(int i=0; i<=100; i++) {
		pstmt.setString(1, "제목" + i);
		pstmt.setString(2, "이름");
		pstmt.setString(3, "test@test.com");
		pstmt.setString(4, "1234");
		pstmt.setString(5, "내용" + i);
		pstmt.setString(6, "000.000.000.000");
	
		pstmt.executeUpdate();
	}
	
} catch (NamingException e) {
	System.out.println("[에러] : " + e.getMessage());
} catch (SQLException e) {
	System.out.println("[에러] : " + e.getMessage());
} finally {
	if (pstmt != null)
		pstmt.close();
	if (conn != null)
		conn.close();
}

out.println( "<script type='text/javascript'>" );
if( flag == 0 ) {
	out.println( "alert('글쓰기에 성공');" );
	out.println( "location.href='board_list1.jsp';" );
} else {
	out.println( "alert('글쓰기에 실패');" );
	out.println( "history.back();" );
}
out.println( "</script>" );

%>



board_list1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="javax.naming.Context"%>
<%@ page import="javax.naming.InitialContext"%>
<%@ page import="javax.naming.NamingException"%>

<%@ page import="javax.sql.DataSource"%>

<%@ page import="java.sql.Connection"%>
<%@ page import="java.sql.PreparedStatement"%>
<%@ page import="java.sql.ResultSet"%>
<%@ page import="java.sql.SQLException"%>

<%
int cpage = 1;
// cpage값이 넘겨져오면 세팅해달라 / cpage가 null이 아니고 공백이 아닐때 cpage에 값 삽입
if (request.getParameter("cpage") != null && !request.getParameter("cpage").equals("")) {
	// 문자열로 들어오기때문에 정수로 바꿔줌
	cpage = Integer.parseInt(request.getParameter("cpage"));
}

// 한 페이지당 보여줄 개 수 / 개발자가 정해주는 것 / 한 페이지에 10개 보여줄거야
int recordPerPage = 10;

// 전체 데이터(게시글) 개수
int totalRecord = 0;

// 전체 페이지수를 저장할 변수
int totalPage = 1;

// 한페지이당 보일 페이지 개수 / 페이지에서 5개의 페이지가 보이게 설정
int blockPerPage = 5;

Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;

StringBuilder sbHtml = new StringBuilder();

try {
	Context initCtx = new InitialContext();
	Context envCtx = (Context) initCtx.lookup("java:comp/env");
	DataSource dataSource = (DataSource) envCtx.lookup("jdbc/mariadb3");

	conn = dataSource.getConnection();

	String sql = "select seq, subject, writer, date_format(wdate, '%Y-%m-%d') wdate, hit, datediff(now(), wdate)wgap from board1 order by seq desc";
	pstmt = conn.prepareStatement(sql);

	rs = pstmt.executeQuery();

	// totalRecord에 전체 데이터 개수 넣음
	rs.last();
	totalRecord = rs.getRow();
	rs.beforeFirst();
	
    // 전체 페이지 = ((전체 데이터 개수 - 1) / 한 페이지에서 보일 데이터의 개수) + 1;
	totalPage = ((totalRecord - 1) / recordPerPage) + 1;

	// 시작번호 구하기 / 현재페이지 어디서부터 읽을 것 인지.
    // int skip = (현재페이지 -1) * 한 페이지에서 보일 데이터 개수
	int skip = (cpage - 1) * recordPerPage;
	if (skip != 0)
    	// absolute() : 커서를 특정 위치로 이동시키는 메서드
		rs.absolute(skip);

	// 원하는 개수 만큼 읽기위해 for문 사용
	// rs.next()가 false가 되는순간 끝난다.
    // 한 페이지에 recordPerPage의 개수만큼 나오게 반복문 돌림
    // 10으로 돼있어서 한 페이지당 10개의 게시글만 나온다.
	for (int i = 0; i < recordPerPage && rs.next(); i++) {
		String seq = rs.getString("seq");
		String subject = rs.getString("subject");
		String writer = rs.getString("writer");
		String wdate = rs.getString("wdate");
		String hit = rs.getString("hit");
		int wgap = rs.getInt("wgap");

		sbHtml.append("<tr>");
		sbHtml.append("<td>&nbsp;</td>");
		sbHtml.append("<td>" + seq + "</td>");

		sbHtml.append("<td class='left'>");
		sbHtml.append("<a href='board_view1.jsp?seq=" + seq + "'>" + subject + "</a>");
		if (wgap == 0) {
	sbHtml.append("&nbsp;<img src='../../images/icon_new.gif' alt='NEW'>");
		}
		sbHtml.append("</td>");
		sbHtml.append("<td>" + writer + "</td>");
		sbHtml.append("<td>" + wdate + "</td>");
		sbHtml.append("<td>" + hit + "</td>");
		sbHtml.append("<td>&nbsp;</td>");
		sbHtml.append("</tr>");
	}
} catch (NamingException e) {
	System.out.println("[에러] " + e.getMessage());
} catch (SQLException e) {
	System.out.println("[에러] " + e.getMessage());
} finally {
	if (rs != null)
		rs.close();
	if (pstmt != null)
		pstmt.close();
	if (conn != null)
		conn.close();
}
%>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../../css/board.css">
</head>

<body>
	<!-- 상단 디자인 -->
	<div class="con_title">
		<h3>게시판</h3>
		<p>
			HOME &gt; 게시판 &gt; <strong>게시판</strong>
		</p>
	</div>
	<div class="con_txt">
		<div class="contents_sub">
			<div class="board_top">
				<div class="bold"><span class="txt_orange"><%=totalRecord%></span></div>
			</div>

			<!--게시판-->
			<div class="board">
				<table>
					<tr>
						<th width="3%">&nbsp;</th>
						<th width="5%">번호</th>
						<th>제목</th>
						<th width="10%">글쓴이</th>
						<th width="17%">등록일</th>
						<th width="5%">조회</th>
						<th width="3%">&nbsp;</th>
					</tr>
					<!-- 내용 시작 -->
					<%=sbHtml%>
					<!-- 내용 끝 -->
				</table>
			</div>

			<div class="btn_area">
				<div class="align_right">
					<input type="button" value="쓰기" class="btn_write btn_txt01"
						style="cursor: pointer;"
						onclick="location.href='board_write1.jsp'" />
				</div>
				<!--페이지넘버-->
				<div class="paginate_regular">
					<div align="absmiddle">
						
						<!-- 페이지 누르는곳으로 이동 / << <, > >> 버튼 적용시키기 -->
						<%
						int startBlock = cpage - (cpage-1) % blockPerPage;
			
						int endBlock = cpage - (cpage-1) % blockPerPage + blockPerPage -1;
                        
                        // 마지막 블록이 전체 페이지보다 크다면 마지막 블록을 전체페이지의 마지막 블록으로 만듦
						// 조건이 맞다면 마지막블록이상 넘어가지 않게 조건 걸어준 것.
						if(endBlock >= totalPage) {
							endBlock = totalPage;
						}
						
						if(startBlock == 1) {
							out.println("<span><a>&lt;&lt;</a></span>");
						} else {
							out.println("<span><a href='board_list1.jsp?cpage=" + (startBlock - blockPerPage) + "'>&lt;&lt;</a></span>");
						}
						
						out.println("&nbsp;");
						
						if (cpage == 1) {
							out.println("<span><a>&lt;</a></span>");
						} else {
							out.println("<span><a href='board_list1.jsp?cpage=" + (cpage - 1) + "'>&lt;</a></span>");
						}
						out.println("&nbsp;&nbsp;");
						for (int i = startBlock; i <= endBlock; i++) {
							if (i == cpage) {
								// 해당 페이지에 [i] 돼있음.
								out.println("<span><a>[" + i + "]</a></span>");
							} else {
                            	// 페이지 번호들 나열해주고 해당 페이지의 데이터(게시글)들을 보여준다
								out.println("<span><a href='board_list1.jsp?cpage=" + i + "'>" + i + "</a></span>");
							}
						}
						

						out.println("&nbsp;&nbsp;");
						if(cpage == totalPage) {
							out.println("<span><a>&gt;</a></span>");
						} else {
							out.println("<span><a href='board_list1.jsp?cpage=" + (cpage+1) + "'>&gt;</a></span>");
						}
						
						out.println("&nbsp;");
						if(endBlock == totalPage) {
							out.println("<span><a>&gt;&gt;</a></span>");
						} else {
							out.println("<span><a href='board_list1.jsp?cpage="+(startBlock + blockPerPage)+"'>&gt;&gt;</a></span>");
						}
						%>
					</div>
				</div>
				<!--//페이지넘버-->
			</div>
			<!--//게시판-->
		</div>
	</div>
	<!--//하단 디자인 -->

</body>
</html>



다른 페이지의 게시물에서 목록으로 왔을때 똑같은 페이지로 유지하게 하기

profile
개발자 꿈나무
post-custom-banner

0개의 댓글