[20221011] myweb - 게시판 페이지의 흐름, Form, Ins, List

kangsun·2022년 10월 11일

jsp myweb

JSP

목록 보기

5/16

sungjukUpdate.jsp, sungjukUpdateProc.jsp 과제

틀린부분

dto=dao.proc(sno);
SungjukDAO에 새로운 클래스를 만들어(proc) 적용시켰다.
기존에 작성해놨던 read class를 불러와야했다.
action="sungjukIns.jsp"
action 에는 수정 사항을 반영해야하는데, 기존 sungjukForm.jsp에 있는 걸 복사해오면서 action을 수정하지 않았다.
수정 후 결과 페이지인 sungjukUpdateProc.jsp파일을 작성해주어야한다.

프라이머리키를 연결고리 삼아서 페이지를 연결하는 것 (=DB 테이블끼리 엮을때처럼)
dao,dto(bean이라는 형태의 객체)는 ssi.jsp 파일 안에 include되어있음 = 페이지를 나누기 시작하면서 여러 .jsp를 왔다 갔다 해야하므로 헷갈리지 말자
~factory 라는 말이 들어간 class나 interface : 값을 넘겨주면 알아서 만들어 주겠다(=공장) = DAO, DTO

sql에서 select한것에 한에서만 rs.get~로 가져올 수 있다

Process

→ 목록 페이지에서 해당 인물의 snum(PK)를 상세 페이지에 가져온다. (= int snum=req.get~("snum"))

→ read함수에 snum값을 넘긴다 (= dao.read(snum))

→ 해당 snum값에 맞는 테이블들(select한 값들)만 불러온다 (= public SungjukDTO read(int snum))

(※ 함수 맨 앞에 dto=null으로 이미 들어있는 값을 초기화 필수)

→ 그걸 dto에 담는다 (= dto = dao.read(snum))

→ dto가 null이면 "내용 없음"을 띄운다 (= if(dto == null))

→ 그렇지 않다면(else) <table>에다가 값을 출력한다

[myweb]ver3.0 미니프로젝트 환경구축

웹어플리케이션 생성

New-> Dynamic Web Project -> Project name: myweb

Dynamic web module version: 4.0

myweb 프로젝트 환경

1) 폴더 생성

/src/main/webapp/
-> css 스타일
-> js 자바스크립트
-> images 이미지
-> sql SQL문

2) 라이브러리 복사

WebContent/WEB-INF/lib/ojdbc8.jar

servlet-api.jar

※ C:\나만의경로\product\18.0.0\dbhomeXE\jdbc\lib\ojdbc8.jar

※ C:\나만의경로\apache-tomcat-9.0.67\lib\servlet-api.jar

→ 위에있는 basic04안에 있는 파일 복사 붙여넣기 하면 된다.
→ moment-with-localse.js는 jquery폴더 안에 있는 파일 가져와서 복사하면 된다.

3) 데이터베이스 연결 복사

net.utility.DBOpen
net.utility.DBClose

→ 위에 있는 파일 복사 붙여넣기

webapp/index.jsp 파일 만들기

RUN AS 눌러서 Tomcat에 myweb만 사용하도록 설정하기 (무료라 한개씩만 해야함)
작동되는지 확인

게시판 페이지 흐름

답변형 게시판 만들기 순서

※ Frontend 작업 폴더명 : /src/main/webapp/bbs

※ Backend 작업 팩키지명 : net.bbs

BbsDTO

BbsDAO

행추가 페이지
bbsForm.jsp -> bbsIns.jsp

전체 목록 페이지
bbsList.jsp
제목 / 조회수 / 작성자 / 작성일

상세보기 페이지

bbsRead.jsp -> 조회수 증가

삭제 페이지

비밀번호 4글자 이상 입력했는지 자바스크립트에서 유효성 검사후
글번호와 비밀번호가 일치하면 행 삭제

bbsDel.jsp 비밀번호 입력 폼
bbsDelProc.jsp 행삭제

수정 페이지

bbsUpdate.jsp 수정하고자 하는 행을 가져와서 수정 폼에 출력(작성자/제목/내용)
bbsUpdateProc.jsp 글번호와 비밀번호가 일치하면 행 수정

답변페이지
bbsReplyForm.jsp -> bbsReplyProc.jsp

검색

페이징

bootstrap "simple me" 코드 복사해오기

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_me_complete&stacked=h

css 분리하기

주의사항

사용자 정의 스타일과 자바스크립트
주의사항 : CSS와 JS는 각 웹브라우저에서 쿠키삭제하고 확인할것

메인 카테고리 시작

- home을 누르면 myweb 메인페이지로 갈수 있도록 하는 것.

※ 배포할 땐 myweb이라는 이름으로 사용하면 안된다.
명령어를 사용해서 클라이언트 이름으로 바꾸어주어야 한다.

이렇게 명령어로 바꿔주어야 한다.

메뉴와 링크 추가하기

웹페이지 공통부분 레이아웃 설계

↳ 이부분은 바뀌어선 안되기 때문에 공통으로 들어가는 부분은 따로 잘라내어 빼야한다.

↳ 이렇게 templete 파일을 복사해서 다른 페이지에도 사용할 것이다.
↳ jsp 파일로 잘라내어 사용하면 다른 페이지를 만들때마다 저 부분을 모두 작성해주지않아도 된다.
↳ template이라는 파일로 마치 틀을 제작하여 안에 내용물만 바뀌도록 두번 작업할 필요없이 편리하게 만들어 준 것이다.

➡️ 공통으로 들어가는 부분은 이런식으로 항상 jsp파일로 따로 빼서 템플릿을 만드는 것이 유지보수에도 좋고 코드를 짤때도 굉장히 편리하다.

설계 실행!!

1) header, footer 나눠서 잘라내기

jsp 파일 생성하기

2) header

index2.jsp를 복사해서 드래그한부분을 모두 지운다.

위까지 모두 지운다.

최종적으로 이렇게 자른 것임

4) template.jsp

header.jsp + footer.jsp 파일을 합친 것을 template.jsp에 넣는다.

template.jsp 파일 생성

↳ 위에 만들어둔 header와 footer jsp 파일 include를 한다.

bbsList.jsp 게시판 페이지 만들기

bbs 폴더 생성해서 template.jsp 파일 복사해서 넣어준다.
f2눌러서 bbsList로 이름 변경

중간점검

↳ 제대로 안나옴 ㅡㅡ

💡 해결방법

경로가 잘 못 되었다.
맨앞 경로 점 두개 찍어야 한다.

최종확인

↳ 완료!

페이지소스보기 확인

↳ header.jsp footer.jsp에 있는 내용이 그대로 들어가있다.

bbsFrom.jsp 만들기

bbsList.jsp에서 bbsForm.jsp 링크를 걸어준다.
bbsFrom.jsp 파일 만들기
template.jsp 복사해서 붙여넣기하고 f2눌러서 bbsFrom.jsp로 이름 변경
form css 넣어주기

폼 복붙하기

<div class="container">
	<form name="bbsfrm" id="bbsfrm">
	<table class="table">
	<tr>
	   <th class="success">작성자</th>
	   <td><input type="text" name="wname" id="wname" class="form-control" maxlength="20" required></td>
	</tr>
	<tr>
	   <th class="success">제목</th>
	   <td><input type="text" name="subject" id="subject" class="form-control" maxlength="100" required></td>
	</tr>
	<tr>
	   <th class="success">내용</th>
	   <td><textarea rows="5"  class="form-control" name="content" id="content"></textarea></td>
	</tr>
	<tr>
	   <th class="success">비밀번호</th>
	   <td><input type="password" name="passwd" id="passwd" class="form-control" maxlength="10" required></td>
	</tr>
	<tr>
	    <td colspan="2" align="center">
	       <input type="submit" value="쓰기" class="btn btn-success">
	       <input type="reset"  value="취소" class="btn btn-danger">
	    </td>
	</table>	
	</form>
</div>