웹사이트(프로그램)
사이트 기획
디자인 기획
UI - psd -> html / css / js - > link
프로그램 기획
디자인 ------ UML / ERD / DFD 통하여 ---- >프로그램화 시킴
게시판 ex > UI --> UML / ERD / DFD
컨텐츠 기획
...
암호화
평문 -> 비문으로 만듦 (비밀번호 암호화)
기법 -> md5, sha ... 등
java 기법
mariadb 기법
암호화 돼서 나타남
md5 모드 (블록 체인에 사용)
md5는 항상 32자리 고정
게시판 new 이모티콘
보통 새 게시글 하루 기준으로 두고 설정해주기(하루가 지나면 new 이모티콘 사라지게, maria db 시간 연산 활용)
datediff : 날짜 차이를 구해줌 (0 = 하루)
board_list1.jsp 가서 sql 부분에 날짜 차를 구하는 것도 추가
String sql = "select seq, subject, writer, date_format(wdate, '%Y-%m-%d') wdate, hit,
datediff(now(), wdate) wgap from board order by seq desc";
while(rs.next()) 구문에서 추가
int wgap = rs.getInt("wgap");
// subject 부분 나눈 것( 아이콘 부분에 조건문 걸어서 0이 아니면 new가 안 뜨게 끔 유도)
sbHtml.append("<td class='left'>");
sbHtml.append("<a href='board_view1.jsp?seq="+ seq + "'>" + subject + "</a>");
if(wgap == 0) {
sbHtml.append(" <img src='../../images/icon_new.gif' alt='NEW'></td>");
}
하루가 지나면 new가 사라진 모습
조회수 증가 시키기
view에서 봤을 때 조회수 증가시키게 하기
sql 구문 위에다 추가
//조회수 증가
String sql = "update board set hit = hit + 1 where seq = ?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, seq);
pstmt.execute();
새로운 게시판 ( 이모티콘이 추가된 버전 )
기존 게시판에서 추가할 것
-
기존 테이블에서 emot 추가 (int(2)로 추가하기, 이 크기는 자기 하고싶은 대로 해도 됨)
-
board_write1_ok.jsp
emot 선언 후 sql에서 추가로 적어주면 됨 (int(2)이기 때문에 크기 맞춰야 함, 선언에 주의)
String emot = request.getParameter("emot").replaceAll("emot", "");
(substring(4,6)) 으로 써도된다.
- board_list1.jsp
sql 에 추가로 적고 rs에도 적기
sbHtml.append("<td><img src='../../images/emoticon/emot" + emot + ".png' width='15'/></td>");
기존과 다르게 이모티콘 보여주는 것 추가됨
- board_view1.jsp
마찬가지로 기존 것에서 이모티콘만 추가
emot = "emot" + rs.getString("emot") + ".png";
- board_modify1.jsp
기존 것에서 이모티콘 추가하는데, 수정할 시에 내가 선택한 이모티콘이 밑에
선택되어 있을 수 있도록 만들어 주기 위한 작업
이모티콘은 radio (단일 선택)이고, 조건 수식 연산자를 통하여 해당 이모티콘 찾아서 선택하기
<%=emot.equals("01") ? "checked= 'checked'" : "" %> /> (모든 이모티콘에 붙여야 함) ,
나중에 반복문으로 해보기!
수정 작업시 현재 사용 중인 아이콘이 체크되어 있는 모습
전체적으로 기존 부분에서 크게 변화하는 부분은 없고, 이모티콘만 추가시켜 주면 된다!
이모티콘 게시판 모습
게시판에 페이지 추가하기
대략적인 과정
board_list1.jsp
페이지별로 목록 출력
전체 페이지에 해당하는 링크 생성
페이지 블록 생성
1. 더미데이터 넣어서 실험(100개)
board_insert1_ok.jsp 만들어서 기존 write1_ok에서 저것 바꾸기 ( write1_ok 위의 선언 다 지우기)
= 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();
}
2. 페이지 추가
<!--페이지넘버-->
<div class="paginate_regular">
<div align="absmiddle">
<span><a><<</a></span>
<span><a><</a></span>
<span><a>[ 1 ]</a></span>
<span><a href="board_list1.jsp">2</a></span>
<span><a href="board_list1.jsp">3</a></span>
<span><a>></a></span>
<span><a>>></a></span>
</div>
</div>
<!--페이지넘버-->
3. 몇개의 개수를 몇 개씩 끊을 건지 정하기(ex > 1페이지당 10개)
3_1 표 : 
3_2. 3번 코드 작업
<%
request.setCharacterEncoding("utf-8");
int cpage = 1;
//cpage 값이 넘겨져 오면 그 값으로 세팅해 달라(입력받은대로 세팅, 그렇지 않으면 1)
//선언되지 않은것 && 공백으로 선언된 것
if(request.getParameter("cpage") != null && !request.getParameter("cpage").equals("")) {
cpage = Integer.parseInt(request.getParameter("cpage"));
}
//한 페이지당 보여줄 게시글 개수 (원하는대로 지정)
int recordPerPage = 10;
int totalRecord = 0;
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 board order by seq desc";
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
//맨 마지막으로 rs커서 이동
rs.last();
//그 행 값을 얻음
totalRecord = rs.getRow();
//다시 커서를 돌려놓음
rs.beforeFirst();
//시작번호 구하기
int skip = (cpage - 1) * recordPerPage;
if(skip != 0) rs.absolute(skip);
//전체를 읽으면 안되므로 for문 사용, 맨 마지막 순서가 10이 안되므로 rs.next가 false가 되어 끝남.
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> </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(" <img src='../../images/icon_new.gif' alt='NEW'></td>");
}
sbHtml.append("<td>" + writer + "</td>");
sbHtml.append("<td>" + wdate + "</td>");
sbHtml.append("<td>" + hit + "</td>");
sbHtml.append("<td> </td>");
sbHtml.append("</tr>");
}
} catch(NamingException e) {
System.out.println("[에러] : " + e.getMessage());
} catch(SQLException e) {
System.out.println("[에러] : " + e.getMessage());
} finally {
if(pstmt != null) try { pstmt.close(); } catch(SQLException e) {}
if(conn != null) try { conn.close(); } catch(SQLException e) {}
}
%>
페이지 10개씩 나뉜 모습
url 마지막에 추가로 ?cpage=5 적고 이동하면 5페이지에 있는 데이터 볼 수 있다.
4. 전체 페이지 수 구하기
4_1 . 전체 페이지 수 그림
4_2. 전체 페이지 수 코드 작업
<%@ 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");
int cpage = 1;
//cpage 값이 넘겨져 오면 그 값으로 세팅해 달라(입력받은대로 세팅, 그렇지 않으면 1)
//선언되지 않은것 && 공백으로 선언된 것
if(request.getParameter("cpage") != null && !request.getParameter("cpage").equals("")) {
cpage = Integer.parseInt(request.getParameter("cpage"));
}
//한 페이지당 보여줄 게시글 개수 (원하는대로 지정)
int recordPerPage = 10;
int totalRecord = 0;
//전체 페이지 변수
int totalPage = 1;
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 board order by seq desc";
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
//맨 마지막으로 rs커서 이동
rs.last();
//그 행 값을 얻음
totalRecord = rs.getRow();
//다시 커서를 돌려놓음
rs.beforeFirst();
//전체 페이지 구하기
totalPage = ((totalRecord - 1) / recordPerPage) + 1;
//시작 번호 구하기
int skip = (cpage - 1) * recordPerPage;
if(skip != 0) rs.absolute(skip);
//전체를 읽으면 안되므로 for문 사용, 맨 마지막 순서가 10이 안되므로 rs.next가 false가 되어 끝남.
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> </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(" <img src='../../images/icon_new.gif' alt='NEW'></td>");
}
sbHtml.append("<td>" + writer + "</td>");
sbHtml.append("<td>" + wdate + "</td>");
sbHtml.append("<td>" + hit + "</td>");
sbHtml.append("<td> </td>");
sbHtml.append("</tr>");
}
} catch(NamingException e) {
System.out.println("[에러] : " + e.getMessage());
} catch(SQLException e) {
System.out.println("[에러] : " + e.getMessage());
} finally {
if(pstmt != null) try { pstmt.close(); } catch(SQLException e) {}
if(conn != null) try { conn.close(); } catch(SQLException e) {}
}
%>
+ 디자인 부분에서
for(int i =1; i<= totalPage; i++) {
if( i == cpage) {
out.println("<span><a>[" + i + "]</a></span>");
}
else {
out.println("<span><a href='board_list1.jsp?cpage=" + i + "'>" + i +"</a></span>");
}
반복문을 써줘서 전체 페이지 수 보이기 + 클릭시 해당 페이지는 [n]으로 표시 and 해당 페이지 데이터 보여주기
5. <<, <, >, >> 버튼 작업하기
<<, >> -> 페이지 수에 따라 한 블록 페이지만큼 이동 (ex> 5간격에서 1~5에서 >> 누르면 6~10)
<, > -> 한 칸씩 이동
5_1 . 그림과 수식 구하기
5_2 . 코드 작업
<!--페이지넘버-->
<div class="paginate_regular">
<div align="absmiddle">
<%
int startBlock = cpage - (cpage - 1) % blockPerPage;
int endBlock = cpage - (cpage - 1) % blockPerPage + blockPerPage -1;
//마지막이 좀 넘을 경우 endBlock에 totalPage 넣기
if(endBlock >= totalPage) {
endBlock = totalPage;
}
if(startBlock == 1) {
out.println("<span><a><<</a></span>");
}
else {
out.println("<span><a href='board_list1.jsp?cpage=" + (startBlock - blockPerPage) + "'><<</a></span>");
}
out.println(" ");
if(cpage == 1) {
out.println("<span><a><</a></span>");
}
else {
out.println("<span><a href='board_list1.jsp?cpage=" + (cpage - 1) + "'><</a></span>");
}
out.println(" ");
for(int i =startBlock; i<= endBlock; i++) {
if( i == cpage) {
out.println("<span><a>[" + i + "]</a></span>");
}
else {
out.println("<span><a href='board_list1.jsp?cpage=" + i + "'>" + i +"</a></span>");
}
}
out.println(" ");
if(cpage == totalPage) {
out.println("<span><a>></a></span>");
}
else {
out.println("<span><a href='board_list1.jsp?cpage=" + (cpage + 1) + "'>></a></span>");
}
out.println(" ");
if(endBlock == totalPage) {
out.println("<span><a>>></a></span>");
}
else {
out.println("<span><a href='board_list1.jsp?cpage=" + (startBlock + blockPerPage ) + "'>>></a></span>");
}
%>
- 작업 후 원래 있던 페이지로 가기
6_1 . 페이지 흐름
6_2 . 코드 작업
해당 링크들 뒤에 ?cpage=<%=cpage %> 써주기!
주의 : seq와 연속되어 사용될 경우 사이에 + & 를 사용해주면 된다!전체 코드
<%@ 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");
int cpage = 1;
//cpage 값이 넘겨져 오면 그 값으로 세팅해 달라(입력받은대로 세팅, 그렇지 않으면 1)
//선언되지 않은것 && 공백으로 선언된 것
if(request.getParameter("cpage") != null && !request.getParameter("cpage").equals("")) {
cpage = Integer.parseInt(request.getParameter("cpage"));
}
//한 페이지당 보여줄 게시글 개수 (원하는대로 지정)
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 board order by seq desc";
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
//맨 마지막으로 rs커서 이동
rs.last();
//그 행 값을 얻음
totalRecord = rs.getRow();
//다시 커서를 돌려놓음
rs.beforeFirst();
totalPage = ((totalRecord - 1) / recordPerPage) + 1;
int skip = (cpage - 1) * recordPerPage;
if(skip != 0) rs.absolute(skip);
//전체를 읽으면 안되므로 for문 사용, 맨 마지막 순서가 10이 안되므로 rs.next가 false가 되어 끝남.
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> </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(" <img src='../../images/icon_new.gif' alt='NEW'></td>");
}
sbHtml.append("<td>" + writer + "</td>");
sbHtml.append("<td>" + wdate + "</td>");
sbHtml.append("<td>" + hit + "</td>");
sbHtml.append("<td> </td>");
sbHtml.append("</tr>");
}
} catch(NamingException e) {
System.out.println("[에러] : " + e.getMessage());
} catch(SQLException e) {
System.out.println("[에러] : " + e.getMessage());
} finally {
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">
</head>
<body>
<!-- 상단 디자인 -->
<div class="con_title">
<h3>게시판</h3>
<p>HOME > 게시판 > <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%"> </th>
<th width="5%">번호</th>
<th>제목</th>
<th width="10%">글쓴이</th>
<th width="17%">등록일</th>
<th width="5%">조회</th>
<th width="3%"> </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;
//마지막이 좀 넘을 경우 endBlock에 totalPage 넣기
if(endBlock >= totalPage) {
endBlock = totalPage;
}
if(startBlock == 1) {
out.println("<span><a><<</a></span>");
}
else {
out.println("<span><a href='board_list1.jsp?cpage=" + (startBlock - blockPerPage) + "'><<</a></span>");
}
out.println(" ");
if(cpage == 1) {
out.println("<span><a><</a></span>");
}
else {
out.println("<span><a href='board_list1.jsp?cpage=" + (cpage - 1) + "'><</a></span>");
}
out.println(" ");
for(int i =startBlock; i<= endBlock; i++) {
if( i == cpage) {
out.println("<span><a>[" + i + "]</a></span>");
}
else {
out.println("<span><a href='board_list1.jsp?cpage=" + i + "'>" + i +"</a></span>");
}
}
out.println(" ");
if(cpage == totalPage) {
out.println("<span><a>></a></span>");
}
else {
out.println("<span><a href='board_list1.jsp?cpage=" + (cpage + 1) + "'>></a></span>");
}
out.println(" ");
if(endBlock == totalPage) {
out.println("<span><a>>></a></span>");
}
else {
out.println("<span><a href='board_list1.jsp?cpage=" + (startBlock + blockPerPage ) + "'>>></a></span>");
}
%>
</div>
</div>
<!--페이지넘버-->
</div>
<!--//게시판-->
</div>
</div>
<!--//하단 디자인 -->
</body>
</html>
끄적끄적