(국비교육) 26 - 게시판 꾸미기 2 + executeUpdate + 자바스크립트 + 호이스팅 + var + let

■ 글쓰기 버튼 만들기

 

* board.jsp

 

 

 

하단에 onclick 만들어준다.

onclick : 버튼을 클릭했을 할 동작

 

즉 우리는 글쓰기 버튼을 눌렀을 때 새로운 페이지로 연결할 것이다. 

이제 이를 서블릿으로 연결해줄 것이다.

 

* Write.java

 

 

Write 에 해당하는 servlet 만들어준다.

서블릿 내 @WebServlet 부분은 소문자로 변경해준다.

 

 

정상적으로 연결되는 것을 볼 수 있다. 

 

 

이제 우리는 글쓰기 화면을 불러오고 로그인 여부를 검사하는 if 문을 만들어준다.

먼저 이를 위해서 RequestDispacher 를 통해 우리가 사용할 write.jsp 와 연결해준다.

 

※ do Get  과 do Post 차이

servlet을 사용하는 이유는 전송 방식의 차이를 두기 위해서다.

do get 은 모두에게 공개되는 부분, do post 는 감출 부분 등을 저장한다. 

 

 

그러나 실행 시 다음과 같이 오류가 뜬다.

왜냐하면 write.jsp 가 없기 때문이다.

따라서 해당 jsp 파일을 만들어준다. 

 

그렇다면 왜 이전에는 오류가 나지 않았을까?

이전에는 포워드를 안해서 오류가 안뜬다. 

왜냐면 포워드를 하지 않았기 때문에 별도로 무엇을 찾지 않았기 때문이다.

 

* write.jsp

 

 

write.jsp 를 만들고 해당 부분에 다음 css 를 불러오는 링크를 건다. 

 

 

body 는 우리가 이전에 쓰던 메뉴바 형식을 그대로 가져온다. 

 

글쓰는 영역을 writeDiv 로 나누고 

제목을 작성할 부분을 title 로 지정한다. 

placeholder : 쓰기 전에 미리 글이 적혀있음. 

 

아래 textarea 를 기존에 쓰던 class 와 id 로 안쓰는 이유는 뒤로 데이터를 넘기기 위해서이다.

해당 부분을  class 와 id 로 쓰면 넘기기 불가하다. 

 

버튼 형식을 통해 저장하는 버튼도 생성해준다. 

 

* write.css

write.css 를 통해 기본 디자인 설정해준다. 

위 사진과 같이 하면 다음과 같다. 

 

 

인풋값 설정시 좌우가 살짝씩 여백이 다르다. 

왜냐하면 인풋값은 기본적으로 자기 값 있다

따라서 여백 뜨는 것을 패딩, 마진, 볼더를 통해 잡아준다. 

 

글쓰는 영역 지정해준다. 

높이는 calc 함수를 쓰거나 높이를 계산해서 사용 가능하다. 

calc 함수는 - 앞뒤 공백 줘야한다.

 

 

해당 부분도 동일하게 마진, 패딩, 볼더를 준다.

여기서 높이는 450px 로 수정해준다. 

 

왜냐하면 후에 작성 영역을 최소 높이 500으로 

자동으로 맞추기 위해 다음과 같이 설정했다.

 

calc 함수를 쓰면 오류가 난다. 따라서

높이를 숫자로 설정한다.

설정하는 방법은 아래와 같다. 

 

500에서 패딩 10 으로 위 아래 합치면 20을 잡아먹는다. (480)

버튼 크기도 30 이므로 크기는 450 정도로 설정해준다. 

 

 

min-height: 500px;

height:auto;

하는 이유는 다른 것들이 크기가 달라졌을때 자동으로 맞추기 위해서다.

 

* write.jsp

 

해당 내용을 보내야 함으로 form 으로 묶어준다.

이번에는 보이지 않고 변경안되게 해야 함으로 post 로 보낸다. 

 

post로 적지 않으면 무조건 get 으로 간다. 

 

 

연결 된 거 확인 가능하다.

 

* Write.java

 

 

실제 작성된 글이 잘 출력되는지 출력문을 통해 확인한다. 

 

 

저장하기를 누르면 빈 창이 뜨고 콘솔에 다음 내용이 뜨는 것을 볼 수 있다. 

그러나 한글 저장은 깨지는 것을 볼 수 있다.

 

 

한글 설정도 해준다. 

 

 

이제 저장된 제목과 컨텐츠를 dto에 데이터를 저장해준다.

먼저 BoardDTO 타입의 dto 객체를 생성해준다.

 

그리고 set메소드를 통해 저장해주는데, 

request.getParameter을 통해 가져올 제목과 컨탠츠를 저장해준다. 

 

저장이 완료되었다면 다시 게시판 화면으로 돌아가 잘 글이 작성되었는지 봐야 하기 때문에 

response.sendRedirect 를 사용하여 ./board 서블릿으로 보낸다. 

 

해당 명령까지 완료하면 글쓰기 저장을 누르면 게시판으로 돌아오게 된다.

 

 

연결했을 때 글이 잘 써졌는지 안써졌는지 체크가 필요하다. 

이를 위해 BoardDAO 타입 dao 객체를 생성하고, 이에 대한 값을 int 로 생성한다.

 

왜냐하면 write 라는 메소드를 통해 받는 return 값을 result 로 받는데

이를 executeUpdate 를 사용해서 영향받는 행 정수로 나타낼 예정이기 때문이다.

 

※ execute

 execute = 실행 = 참/거짓
 executeUpdate = 실행 = 영향받은 행 1, 2, 0
 executeQuery = select = 결과 반환

 

나중에는 로그인한 사람을 받을 예정이다.

 

* BoardDAO

 

 

write 에 해당하는 메소드를 DAO 에 만들어준다.

BoardDTO 타입의 dto 를 매개값으로 받는다. 

 

후에 result 값을 리턴해줄 것으로 먼저 선언해주고

연결, 결과값, sql 도 선언해준다. 

 

해당하는 sql 문은 하이디에서 만들어준다. 

 

* HeidiSQL

 

데이트 타입을 아래와 같이 DATETIME 설정하면 NOW() 를 쓸 수 있다.

그러나 DATE 로 설정 시 오류가 뜬다. 

 

 

그럴때는 DATE_FORMAT(적용할값, 표현할값) 을 쓰면 된다.

NOW() 라는 형식을 %Y-%m-%d 로 표현할꺼야

 

 

내가 원했던 내용이 105번에 정상 처리된 것을 확인할 수 있다. 

 

* 에러해결

 

아래 부분 설정하고 밑에 저장버튼 눌러야 한다.

나의 경우 저장을 안하고 아래 명령문을 내리니 오류가 떴다.

다시 테이블로 가 기본값 수정하니 오류 수정 완료!

 

* BoardDAO

 

 

sql 에 다음과 같이 넣어준다

sql 안에는 string 넣어줘야 하는데 ' 만 스트링으로 인식해서 해당 부분을 넣어줘야 한다. (sql 의 한계)

 

 

나머지 conn 과 stmt 도 작성해준다. 

 

 

try catch 로 잡아준다.

executeUpdate 쓴 이유는 해당 SQL 문 실행에 영향을 받는 행 수를 반환하기 위함이다. 

 

여기서 나는 return 0; 으로 되어 있는데 그러면 result 에 값이 안담기므로 반드시 변경해줘야 한다!!

 

SQL 수행 메소드 - executeQuery(String sql), executeUpdate(String sql), execute(String sql) (tistory.com)

SQL 수행 메소드 - executeQuery(String sql), executeUpdate(String sql), execute(String sql)

 

 

 

마지미막으로 finally 로 닫아준다. 

 

* Write.java

 

 

무지 게시판에 등록되고 출력되는지 dao 출력문으로 확인해보기

 

* BoardDAO

* 에러해결

 

게시판에 글이 업로드가 되지 않았다.

확인해보니 return 값을 우리가 받은 result 가 아닌 0으로 돼 있었다.

 

이를 변경해주니 정상 등록!!

 

 

sql 인젝션 방지를 위해 psmt 를 사용해본다.

이후로는 psmt만 사용 예정이다.

 

 

preparedStatement 를 사용하면 sql 구문을 간단하게 ??? 로 표현할 수 있다.

이를 try 캐치 해준다.

 

 

try 에 물음표 값 세팅해준다.

괄호 첫 번째는 DB 1번째 값 순서이고 이에 해당하는 제목 가져온다.

 

이 값도 마찬가지로 영향받는 행 정수로 나타내는 값을 result 에 담아준다.

 

 

finally 처리 및 try catch 해준다.

만약 pstmt 가 비어있지 않으면 닫아주고

연결값도 비어있지 않으면 닫아주도록 한다. 

(왜냐하면 데이터 값 있을 것이고 안받으면 닫아주는게 아니기 때문)

 

그리고 그 값을 result 로 반환한다. 

Write.java 에서 실행해보면  1 출력되면서 정상 실행되는 것을 확인할 수 있다. 

 

* write.jsp

 

 

required 를 통해 입력란 반드시 입력하게끔 설정해줄 수 있다. 

 

* Write.java

 

 

조건도 걸어줄 수 있다. 

5개 이하로 저장했을때 튕기도록 if 구문을 설정해준다. 

5개 이상일 경우 저장하고, 그렇지 않으면 다시 튕기고 글쓰는 페이지로 들어가게 만들어준다. 

 

파라미터로 받은 제목값의 길이 length() 가 >= 5 이면서  컨텐츠 길이가 5이상이라면으로 조건을 걸어준다.

 

그럴경우  BoardDTO 타입의 dto 객체를 생성하고 그 안에 get으로 가져온 값을 저장한다. 

 

■ 자바 스크립트

 

* write jsp

 

 

alert 를 통해 경고창 생성 가능하다. 

 

변수 선언시 var let const 쓴다.

변수명은 자바와 마찬가지로 숫자 시작 안된다.

특수기호는 $ 와 _ 사용 가능

대소문자 구분

const num = 100;

상수

 

* 호이스팅

 

선언된 변수들이 코드상 실제로 이동하지 않지만 최상위로 올려진다.

 

즉 변수가 밑에 선언되고 위에서 변수를 불러도 호이스팅으로 인해

변수 사용이 가능하고 오류가 안난다. 

 

이를 보완하려고 let 이 나왔으며 우리는 let 을 사용하려 한다. 

 

 

=== 세 개로 주로 비교한다. 

== 값비교

=== 값비교 + 자료형태까지 비교

 

* 배열

 

 

let 으로 arr 배열 선언하기

해당 부분처럼 타입 다르게 선언도 가능

 

* for 문

for 반복문 실행 가능

 

* 배열 길이 출력

 

 

* indexOf

indexOf 로 어느 위치인지 확인 가능

-1 인 경우 없음을 나타낸다. 

 

※ json : javascript 로 값을 보냅니다. 

 

 

* 이중배열

 

* if 조건문

* switch 문

 

* for 로 배열 출력

* while문 사용

 

* key : value 값 표현

 

* 요소 뽑아주기

*  function 만들기

 

 

출력하면 ! 나온다. 

 

* do while

 

* 함수 사용 방법

 

다음과 같이 사용 가능하다.