2022. 10. 8. 14:26ㆍDev.Program/JSP & Javascript
// 한 화면에 보여줄 시작페이지 번호 구하기
// 페이지 번호 pageBlock ⇒ 시작페이지 번호
// 1~10 10 ⇒ 1
// 11~20 10 ⇒ 11
------- 페이징 끝!
이제 디비연결을 서버단에서 하고 이름을 불러서 가져올 수 있도록 할 거!
→ 책 p.443 (커넥션 풀) ⇒ 서버단의 풀(기억저장공간)에 저장~~
커넥션 풀(connection Pool) : 서버 연결정보를 저장 => 필요할 때 이름을 불러서 사용)
프로그램이 서버단에 미리 저장되어 있기 때문에 바로 사용 가능
- context.xml 만들기
- 태그 대문자! 주의하기!
(대소문자 정확히 구분하기 때문에 글자 틀리면 안됨)
name="jdbc/MysqlDB"
- DB연동한 자원의 이름 ⇒ 마음대로 정할 수 있음
auth="Container"
- 관리자
type="javax.sql.DataSource"
- 디비연동 : DataSource 형태로 되어있음
⇒ 이렇게 만들면 모든 형태로 만들어짐(Object 형태로)
<BoardDAO.java>
- 원래 불러오던 DB 연동 주석처리 해주기
- Context 는 javax.naming!
- DataSource ds 에 담는데 오류나는 건 형변환을 안해서
java:comp/env/jdbc/MysqlDB
⇒ 자바(java)의 컴퍼넌트(comp) 환경(env) 안에 jdbc/MysqlDB 을 찾으라는 것
private Connection getConnection() throws Exception{ Context init = new InitialContext(); DataSource ds = (DataSource)init.lookup("java:comp/env/jdbc/MysqlDB"); Connection con = ds.getConnection(); return con; } |
- 최종코드
-- 책에는 설치하라고 나오는데, 미리 저장되어 있기 때문에 따로 설치 할 필요 없이 그냥 불러다 쓰면 됨
지금은 성능 차이가 없지만 여러 사람들이 동시에 접속했을 때 차이가 많이 난다
p.305 파일업로드
- writeForm.jsp 파일 열고 file - Save as (파일 째로 복사하는 거)
- fwriteForm.jsp (파일업로드)
fwritePro.jsp 도 만들기
파일 올리는 두가지 방법
1. 서버 안에 폴더를 만들어서 파일을 넣게끔
⇒ 디비에 저장될 땐 파일이 아니라 파일 이름이 저장됨
(mysql 쓸 때는 파일이 커서 이름만 디비에 저장하게끔 많이 씀)
2. 파일을 데이터베이스에 바로 저장 (대용량일 때 사용)
⇒ 디비에도 파일이 저장됨 → 디비 형인 blob(바이너리 파일 저장)
> 우린 1번 방법 사용
데이터 베이스 열 이름 file 추가!
- alter table board add file varchar(200);
< fwriteForm.jsp > 에 추가
<tr><td bgcolor=ffe4e1>파일</td><td><input type=”file" name="file"></td></tr>
p.305 네모칸
varchar 타입을 끄집어내면 전부 String 타입으로 가져오는데 file 은 file 타입으로 가져올거!
<form action="fWritePro.jsp" method="post" enctype="multipart/form-data"> |
⇒ 첨부파일이 있는 경우 form 태그에 enctype=”” 꼭 적어줘야함
<fwritePro.jsp>
// request.setCharacterEncoding("utf-8"); // 한글처리 주석! 첨부파일 있을 땐 필요 없음
p.306
파일 업로드 프로그램 설치 → 외부에서 다운 받아서 설치해줘야함(다양한 종류가 있다! API)
- cos-20.08.zip 다운로드
- 압축 풀기 cos.jar 파일 찾기
- WEB-INF / lib 에 넣어주기
<fwritePro.jsp>
설치한 파일 객체 생성 하면 파일 업로드 됨
- MultipartRequest 객체 생성
MultipartRequest multi = new MultipartRequest(request(1), 업로드할 폴더 물리적인 경로(2), 파일 최대크기 설정(3), 한글처리(4), 이름이 동일할 때 파일이름 바꾸기(5)); |
- 5가지 채워야 함
> 업로드 할 폴더 만들기 - upload
- WebContent에 upload 폴더 만들기
- 물리적인 경로 얻어오는 거 getRealPath(path);
MultipartRequest multi = new MultipartRequest(request, uploadPath, maxSize, "utf-8", new DefaultFileRenamePolicy()); |
- 최종
실행해보면
- 콘솔창에 주소 복사해서 파일 탐색기에서 검색
- 들어가있음!
- 근데 서버 중지하고 재시작하면 사라져있다.
- 그래서 이 파일을 백업해서 이클립스의 upload 에 넣어줌
- 실제로는 안하는데 이클립스는 가상으로 돌리기 때문에 하는 작업임!
p.310
<fwritePro.jsp>
- multi 로 다 바꿔줌
String file = multi.getFilesystemName("file"); // 파일 업로드
<BoardBean.java>
여기도 파일 추가
<fwritePro.jsp>
- 한줄 추가!
<BoardDAO.java → insert 메서드>
- 한줄 추가!
- 이제 디비도 연동 됨
<content.jsp>
- <tr><td bgcolor=ffe4e1>파일</td><td colspan="3"><%=bb.getFile() %></td></tr> 추가
<boardDAO.java>
getboard() 에도 file 추가
→ 자료실
center → notice.jsp
게시판(및 내용)은 아무나 볼 수 있도록 제어
글쓰기 및 답글쓰기는 회원만
글수정 / 글삭제 ⇒ 아이디/비번 비교해서 맞는 사람만
날짜 포맷 바꾸기
<notice.jsp>
2020-03-24 17:42:00:0 날짜 ⇒ 2020/03/24 문자 날짜 모양
SimpleDateFormat sdf = new SimpleDateFormat("yyyy.mm.dd");
⇒ <%=sdf.format(bb.getDate())%>
가상번호
<notice.jsp>
// bb.getNum() 실제 게시판 번호 -> 가상 카운트 번호 부여
전체 글 개수 count pageNum(currentPage) pageSize => num
30 1 10 => 30
30 2 10 => 20
30 3 10 => 10
int num = count-(currentPage-1)*pageSize;
⇒ <%=num-- %>
다음시간 <main.jsp> 에 최근글 5개 뽑아오는 거 할 거!
200327
최근글 5개 뽑아오기
- 무조건 1행부터 5개 뽑아오기
<main.jsp>
- 이부분 5번 반복시킬 거 ! ⇒ for문
<table> <% BoardDAO bd = new BoardDAO(); int count = bd.getBoardCount(); int pageSize = 5; String pageNum = request.getParameter("pageNum"); if(pageNum==null) { pageNum="1"; } int currentPage = Integer.parseInt(pageNum); int startRow = (currentPage-1)*pageSize+1; List boardList = bd.getBoardList(startRow, pageSize); SimpleDateFormat sdf = new SimpleDateFormat("yyyy.mm.dd"); for(int i = 0; i < boardList.size(); i++) { BoardBean bb = (BoardBean)boardList.get(i); %> <tr><td class="contxt"><a href="../center/content.jsp?num=<%=bb.getNum()%>"><%=bb.getSubject()%></a></td> <td><%=sdf.format(bb.getDate())%></td></tr><% } %> </table> |
- 글 5개 받아오기
- startRow, pageSize ⇒ 이 부분 그냥 1, 5 넣어도 상관없음! 어차피 1페이지에서 1행 5개 뽑아오는거기 때문에
- 페이징처리 하기
<notice.jsp>
- search 위에 글쓰기 버튼 만들기
- <input type="button" value="글쓰기" class="btn" onclick="location.href='writeForm.jsp'">
- 로그인 한 사람만 글 쓸 수 있게!
<writeForm.jsp>
<body> <% // 세션값 가져오기 String id = (String)session.getAttribute("id"); // 세션값 없으면 로그인페이지(../member/login.jsp) 이동 if(id == null) { response.sendRedirect("../member/login.jsp"); }%> <div id="wrap"> <!-- 헤더들어가는 곳 --> <jsp:include page="../inc/top.jsp"/> <!-- 헤더들어가는 곳 --> <!-- 본문들어가는 곳 --> <!-- 메인이미지 --> <div id="sub_img_center"></div> <!-- 메인이미지 --> <!-- 왼쪽메뉴 --> <nav id="sub_menu"> <ul> <li><a href="#">Notice</a></li> <li><a href="#">Public News</a></li> <li><a href="#">Driver Download</a></li> <li><a href="#">Service Policy</a></li> </ul> </nav> <!-- 왼쪽메뉴 --> <!-- 게시판 --> <article> <h1>Notice Content</h1> <form action="writePro.jsp" method="post"> <table id="notice"> <tr><td class="twrite">글쓴이</td> <td><input type="text" name="name" value="<%=id %>" readonly="readonly"></td></tr> <tr><td class="twrite">비밀번호</td> <td><input type="password" name="pass"></td></tr> <tr><td class="twrite">제목</td> <td><input type="text" name="subject"></td></tr> <tr><td class="twrite">내용</td> <td><textarea name="content" rows="10" cols="20"></textarea></td></tr> </table> <div id="table_search"> <input type="submit" value="글쓰기" class="btn"> </div> </form> <div class="clear"></div> <div id="page_control"> </div> </article> <!-- 게시판 --> <!-- 본문들어가는 곳 --> <div class="clear"></div> <!-- 푸터들어가는 곳 --> <jsp:include page="../inc/bottom.jsp" /> <!-- 푸터들어가는 곳 --> </div> </body> |
<writeForm.jsp>
- 글쓴이 ⇒ 로그인 한 사람만 글 쓸 수 있기 때문에
- 비밀번호 부분도 지워줌
<notice.jsp>
- 손 갖다대면 손바닥 모양 나옴(클릭 하는 모양 css)
- tr 부분에 추가
- <tr onclick="location.href='content.jsp?num=<%=bb.getNum()%>&pageNum=<%=pageNum%>'">
<notice.jsp>
<writeForm.jsp>
<% // 세션값 가져오기 String id = (String)session.getAttribute("id"); // 세션값 없으면 로그인페이지(../member/login.jsp) 이동 if(id == null) { response.sendRedirect("../member/login.jsp"); }%> |
- 로그인 한 사람만 글쓰기 할 수 있도록 제어
<content.jsp>
글수정 글삭제
⇒ 세션값이 있으면 ⇒ 세션값 == 글쓴이 같으면 글수정 글삭제 버튼 보이기
<updateForm.jsp>
writeForm 긁어오기
// pageNum 가져오기
// num 가져오기
#참고 블로그 https://forest71.tistory.com/49
로그인 한 사람만 글 쓸 수 있도록 & 글쓰기 눌렀을 때 로그인 한 사람 id 값이 글쓴이로 들어가도록
// 세션값 가져와서 아이디 같을 때 글수정/글삭제 뜨게 ~200330
글수정도 세션값 들고와서 세션값 없으면 로그인페이지로 돌아가게
deleteForm.jsp 해보기
<main.jsp> 최신글 5개 뽑아오기 ⇒ 누르면 해당 content.jsp 로 넘어가도록
글목록 <notice.jsp> ⇒ 검색기능
검색어가 있으면 다른 함수 부르고, 검색어가 없으면 또 다른 함수 부르고 이런식으로 구분
(파일 합쳐서 만들기도 하고 따로 만들기도 하는데 우린 헷갈리니까 따로 만들거)
폼태그로 버튼 감싸주기
<form action="noticeSearch.jsp" method="post"> <input type="text" name="search" class="input_box"> <input type="submit" value="search" class="btn"> </form> |
- method 방식은 get 방식 post 방식 아무거나 상관 없음
- 버튼도 submit 버튼으로 바꿔주기
center 폴더(notice.jsp 들어있는 폴더)에 noticeSearch.jsp 새 파일 만들어주기
<noticeSearch.jsp>
notice.jsp 내용 전체 복사해오기
- 검색어 받아오기
- // 한글처리
- request.setCharacterEncoding("utf-8");
- // 검색어 search 가져오기
- String search = request.getParameter("search"); ⇒ notice.jsp 에서 검색한 text 파일 이름 search
디비단에서 sql 구문으로 검색해서 뿌려주기만 하면 됨.
(우리가 적은 검색어에 해당되는 전체 게시글을 받아오기)
⇒ 여기서 search(검색어) 받아오기
- 원래 함수가 같은 이름을 가지면 오류가 나지만 오버로딩(다중정의)이 적용되어 오류X
뿌려주는 건 동일하기 때문에 DB에서 검색하는 sql 문만 적어주면 됨!!
ex)
ex)
<boardDAO.jsp ⇒ getBoardCount()>
public int getBoardCount(String search) { int count = 0; Connection con = null; PreparedStatement p = null; ResultSet rs = null; try { // 예외가 발생하것 같은 구문 // 1단계 드라이버로더 // 2단계 디비연결 con = getConnection(); // 3단계 sql board테이블 // String sql = "select count(num) from board where subject like '%검색어search%'"; String sql = "select count(num) from board where subject like ?"; p = con.prepareStatement(sql); p.setString(1, '%검색어%'); // 4단계 rs <= 실행 결과 저장 rs = p.executeQuery(); // 5단계 if(rs.next()) { count = rs.getInt("count(num)"); } } catch (Exception e) { // 예외가 발생하면 처리하는 구문 e.printStackTrace(); } finally { // 예외상관없이 마무리작업 구문=> 기억장소 해제 if(rs!=null) try {rs.close();} catch (SQLException ex) {} if(p!=null) try {p.close();} catch(SQLException ex) {} if(con!=null) try {con.close();} catch(SQLException ex) {} } return count; } |
** String 형으로 들고오기 때문에 작은따옴표(‘’)는 붙일 필요 없음
** %는 넣어줘야되는데 “%”+search+”%” 이런식으로! 넣음!
** 최종 ⇒ p.setString(1, "%"+search+"%");
getBoardList 에서도 똑같이 검색어를 포함해서 뿌려줘야됨
<boardDAO.jsp ⇒ getBoardList()>
public List getBoardList(int startRow, int pageSize, String search) {}
String sql = "select * from board where subject like '%검색어%' order by num desc limit ?,?";
⇒ 추가된 부분
<noticeSearch.jsp>
int count = bd.getBoardCount(search);
List boardList = bd.getBoardList(startRow, pageSize, search);
⇒ 바꿔줄 부분
- 이부분도 전부 바꿔주기
메일보내기
⇒ 관리자가 회원가입하면 “가입을 축하합니다” 메일 보내도록 이런식으로!
⇒ 자기 아이디로 인증받기 때문에
<notice.jsp>
- Notice a태그랑
- Driver Download a 태그 바꾸기 *fnotice.jsp 는 만들거
center 폴더 내의 Pro들 말고는 전부 왼쪽 메뉴 태그 다 위 캡쳐처럼 바꿔주기
<fnotice.jsp> ⇐ notice 복제
- 이 부분 바꿔주기
<fwriteForm.jsp> ⇐ writeForm.jsp 복제
- 추가
#####개인프로젝트 발표
'Dev.Program > JSP & Javascript' 카테고리의 다른 글
JQuery - (1) (1) | 2022.10.08 |
---|---|
게시판 만들기 - (4) (1) | 2022.10.08 |
게시판 만들기 - (2) WAR Export / Import (0) | 2022.10.08 |
게시판 만들기 - (1) (1) | 2022.10.08 |
자바빈(JavaBean) (0) | 2022.10.07 |