게시글 등록 구현하기
[구현할 기능 범위]
- input / radio / select / checkbox / textarea를 이용한 구현
- 값 입력 유효검사
- 빈 문자열 체크
- input, textarea 최대 글자 수 체크
- checkbox에서 '전체' 체크 및 해제
- 작성 후 이전 페이지로 돌아가기
- 파일첨부 (아직 구현안함..)
1. 필요한 파일 만들기
view 파일 ☞ writeNotes.html (js,css 같이 묶음)
DAO ☞ NoteDAO.java
Controller ☞ writeNotesController.java (controller 하나에 게시판 CRUD가 다 들어가므로 NotesController.java해도 상관없다~)
Service ☞ NotesService.java , NotesServiceImpl.java
mapper ☞ NotesMapper.java, NotesMapper.xml
이제 파일을 다 만들었다면..차례대로 하나씩 해가보자!
2. writeNotes.html (화면 그리기)
취향에 따라 스타일에 따라
을 만들면 된다.< tr >은 행
< td >는 열
3. NoteDAO.java
DB Entity와 똑같이 생성해준다.
lombok 쓰면 위에 @Data 추가해주고
나는 lombok을 안써서 그냥 getter setter toString 다 만들어주었다.
4. ajax로 데이터 보내기 & 유효검사
JSON형태로 ajax를 이용해 보낼주거다.
그전에!
빈칸없이 데이터가 잘 입력되었는지 유효검사를 해줄거다.
유효검사 Check List
- 제목 input ☛ 1자 이상 20자 이하인가 & 공백체크
- 내용 textarea ☛ 1자 이상 100자 이하인가
- radio, checkbox ☛ 체크되어 있는가
만약 이 조건에 유효하지 않는다면 alert 창을 띄워준다.
4-1. 유효검사는 어떻게?
.trim()은 앞뒤 공백을 제거해준다.
이걸 통해 공백 문자열도 체크해줄 수 있다!
이 외 checkbox 유효검사도 필요하다.
[전체]누르면 나머지 다 체크되고,
전체 다 체크되어있는데 하나 해지하면 [전체]체크박스 해지하고
[전체]체크된 상태에서 다시 누르면 전체 해지되고
이 검사는 다른 게시글에 정리해야지..!
4-2. ajax로 데이터 보내기
데이터 검증이 끝났으니 이제 JSON 형태로 바꾸어 ajax로 보내주면 된다.
위에 submitNote() 함수 안에 이어서 작성해주면된다.
noteDao라는 Object를 만들어 데이터를 넣어주고
JSON.stringify(noteDao)로 보내주면 된다.
.success는 data를 넘겨주는데 성공했을 경우 alert()창이 뜨며 게시글 목록 조회페이지로 이동한다. 이때 보고있던 해당 페이지로 이동한다.
그럴러면 currentPage를 계속 저장하고 있어야겠지?
여기서 ajax의 success / error / finally , done/fail에 대해 알아두면 좋다. 이것도 다음 게시글에서..!
5. writeNotesController.java
업로드는 미완성이므로 업로드 관련 코드 빼고 해주면 된다.
저렇게 두개만 해주면 된다.
6.Service 만들기
6-1. NotesService.java 만들기
writeBoardInsert(); 만들어주고
6-2. NotesServiceImpl.java 만들기
상위에 @Service 추가해주고,
mapper와 매핑해준다.
근데 아직 mapper을 안만들었으니 이제 만들차례겠지?
7. mapper 만들기
7-1. NotesMapper.java 만들기
가장 상위에 @Mapper 추가해주고
writeBoardInsert(NoteDAO noteDao);를 만들어준다.
7-2. NotesMapper.xml 만들기
여기서 NoteID는 sequence라고 생각하면 되는데, 이때 첫번째 게시글을 등록할때 null이된다. 그러므로 ISNULL 처리해준다.
MSSQL은 IFNULL이 아니라 ISNULL 이더라.
게시글 등록 구현하기 끝!!
