0426

조성현·2023년 4월 26일
0
post-thumbnail

웹사이트(프로그램)
사이트기획
디자인 기획
UI - psd -> html/css/js -> link
프로그램 기획
디자인-> UML/ERD/DFD -> 프로그램화
ex) 게시판 => UI => UML/ERD/DFD
컨텐츠 기획

날짜차이계산 datediff


게시판에 등록된 글의 날짜차이

-> board_list1.jap에 적용

<%@ 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, 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();
		
		// 데이터 갯수 얻는법
		rs.last();
		totalRecord = rs.getRow();
		rs.beforeFirst();
		
		while(rs.next()) {
			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( conn != null ) pstmt.close();
		if( pstmt!= null ) conn.close();
		if( rs != null ) pstmt.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>
		<!--//게시판-->
	</div>
</div>
<!--//하단 디자인 -->
</body>
</html>

적용 전
적용 후

조회수

-> 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");
	
	// list를 통해 실행할 것.
	String seq = request.getParameter("seq");
	//System.out.println(seq);
	
	String subject = "";
	String writer = "";
	String mail = "";
	String wip = "";
	String wdate = "";
	String hit = "";
	String content = "";
	
	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 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 from board1 where seq=?";
		pstmt = conn.prepareStatement(sql);
		pstmt.setString(1, seq);
		
		rs = pstmt.executeQuery();
		// 데이터를 하나만 가져오기 때문에 while 대신 if를 사용한다.
		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>");
		}
		
	} catch( NamingException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} catch( SQLException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} finally {
		if( conn != null ) pstmt.close();
		if( pstmt!= null ) conn.close();
		if( rs != null ) pstmt.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%"><%= subject %></td>
				<th width="10%">등록일</th>
				<td width="20%"><%= wdate %></td>
			</tr>
			<tr>
				<th>글쓴이</th>
				<td><%= writer %>(<%= mail %>)(<%= wip %>)</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>

게시판에 이모티콘 추가하기

ERD - 1개의 테이블 컬럼에 대한 내용작성

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

table 생성

create table emot_board1(
seq int auto_increment primary key,
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
);

테이블 추가

insert into emot_board1 values (0, '제목', '이름', 'test@test.com', '1234', '내용', '01', 0, '000.000.000.000', now() );

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

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

페이지 흐름(page navigation)

board_list1.jsp
	(cpage)						(x)							(x)	
	board_write1.jsp		->	board_write_ok.jsp		->	board_list1.jsp
    (cpage)
    board_view1.jsp
    	(cpage)					(cpage, 수정내용)			(cpage)
    	board_modify1.jsp	->	board_modify1_ok.jsp	->	board_view1.jsp
        (cpge)					(cpage, 비밀번호)			(x)
        board_delete1.jsp	->	board_delete1_ok.jsp	->	board_list1.jsp

페이지 목록 만들기

board_list1.jsp
1. 페이지별로 목록 출력
2. 전체 페이지에 해당 링크 생성
3. 페이지 블록 생성
나머지 페이지
1. 현재 페이지를 전송

profile
조성현
이전 포스트

0425

다음 포스트

#0427

0개의 댓글