[본격 게시판짜기 Part1.2 - 게시판도 HTML부터] 글입력폼

2012/06/13 - [Lecture/HTML] - [본격 게시판짜기 Part1.1 - 게시판도 HTML부터] 게시글 리스트

COCY입니다.바로 시작하겠습니다.

이전 포스팅에서 정적인 리스트 페이지를 만들어 보았습니다.

여기에 소스를 좀더 추가해서 글쓰기로 가는 링크를 하나 만들어 보도록 하겠습니다.

추가 하셔야 될 다음의 소스를 닫히는 테이블태그 밑에(</table>) 입력하시기바랍니다. 

<a href="write.html">글쓰기</a>

실행해보시고 '글쓰기'라는 글자를 누르면 아직은 낯설은 에러메세지를 보실 수 있습니다.

HTTP Status 404 

페이지가 없다는 에러입니다. 그럼 추가해줘야겠죠?

write.html라는 html파일을 동일한 디렉토리에 추가해줍니다.

디렉토리를 변경하고 싶으시면 상대경로와 절대경로의 개념을 이해하셔야하는데 여기서 잠깐 설명드리자면,

아무것도 쓰지않은 write.html는 동일 경로에서 파일을 찾습니다.

./write.html 역시 동일한 경로에서 파일을 찾습니다. 상대경로입니다. 

../write.html 현재 위치에서 한단계 상위폴더로 이동해 파일을 찾습니다. 상대경로입니다.

../../write.html 마찬가지로 두단계 상위폴더로 이동해 파일을 찾습니다. 상대경로입니다.

상대경로를 사용하실때 유의하실 점은 WebContent폴더가 기준이되는 루트폴더입니다.

WebContent폴더에서는 아무리 ../../ 로 접근하여도 더이상 상위폴더로 이동하지 않습니다.

절대경로의 경우 URL의 전부를 적어줍니다. 위에 말씀드린대로 WebContent폴더를 사용하므로 경로는 다음과 같습니다.

http://localhost:8080/board/write.html                <여기서 8080은 톰켓의 디폴트 포트번호이며 board는 생성한 프로젝트 이름

또는 .을 사용하지않고 /만 활용하여 프로젝트 이름부터의 경로를 다음과 같이 적어줍니다.

/board/write.html

페이지를 만드셨으면 이제 본격적으로 입력폼을 만들어 봅시다.

일단 리스트에서 만든 컬럼들이 번호, 제목, 작성자, 날짜, 조회수가 있는데요, 게시글을 추가해서 입력폼을 만들어 보겠습니다.

입력폼을 만들기 전에 먼저 사용해야할 태그가 바로 <form> 태그인데요,

데이터가 담긴 input 태그들의 값을 전송하기위해 사용됩니다.

일단 단순하게 <table>태그 처럼 안의 태그들을 감싸주는 태그라고 생각하시고 넘어가겠습니다.

다음과 같이 작성합니다.

<form action="index.html" method="post">

</form>

action속성이 무엇이냐하면 

데이터들을 입력받고 쓰일곳이 있어야겠죠?

데이터들을 가진 form을 action에 지정된 페이지로 보내주겠다는 것입니다. 

method속성에는 대표적으로 get과 post가 있습니다.

get은 단순값을 보낼때 쓰이며, post는 다수의값 또는 상대적으로 많은 데이터를 보낼때 쓴다고 이해하시면 되겠습니다.

지금의 경우에는 여러값이 넘어가기때문에 Post를 사용합니다.

※ Get방식과 Post방식의 설명

Get 방식
- 모든 파라미터는 URL 에 query string 형식으로 전달됩니다.
- 파라미터값이 길어질수록 URL 이 길어지므로 값의 길이에 제한이 있구요.
- URL 형식에 맞지 않는 파라미터 이름, 값은 encoding 되어야 할 필요성이 있습니다.
- 또, 요청 URL에 text 형식으로 포함 되므로, 웹브라우저 사용자의 눈에 직접적으로 표시 될 수 있습니다.
- 사용자의 눈에 직접적으로 표시 되기 때문에, 로그인 비밀번호등의 정보를 (아무런 encoding, encryption 없이) get 방식으로 전달 하면 문제가 발생 할 가능성이 있습니다.
- 위에 기술된 항목들 때문에, 단순한 페이지 요청에 많이 쓰입니다.


Post 방식
- 모든 파라미터는 HTTP Body 에 포함되어 전달됩니다.
- Body 에 포함되어 전달되므로, 길이에 제한이 없구요.
- encoding 의 필요성이 Get 방식 보다는 낮습니다만, 비 영어권 환경이나 특수한 파라미터가 전달 될대는 encoding 이 필요 합니다.
- Http Body 에 포함 되므로, 웹브라우저 사용자의 눈에 직접적으로 표시 되지 않습니다.
- 사용자의 눈에 직접적으로 표시 되지 않기 때문에 사용자가 원하지 않는 정보가 서버로 전달 될 가능성이 있습니다.(하지만 사용자가 입력하지 않는 정보가 전달될 가능성은 거의 없습니다.)
- 위 이유 때문에 대부분의 웹브라우저에서는 post 방식의 요청에 대한 응답 페이지를 새로고침으로 요청 할때는 경고창을 통해서 사용자에게 정보 전송에 대한 confirm 을 받습니다.
- 사용자의 눈에는 직접적으로 표시 되지 않는다고 하더라도, http response message 를 분석 했을때는 얼마든지 유출 될수 있으므로, 단순하게 post 방식을 썼다고 해서 보안성이 높아지는 것은 아닙니다.

- 위에 기술된 항목들 때문에, 서버로 데이타 전송을 할 목적으로 많이 사용 됩니다.

그럼 지금부터 게시글에 대한 입력폼을 만들어 볼텐데요,

이후 나오는 코드들은 위의 form태그 안에 작성해 주시면 됩니다.

먼저 게시글 번호인데요.

게시글 번호를 사용자에게 입력받지는 않지않습니까?

그래서 일단 생략합니다.

그다음은 제목입니다. 다음의 태그를 form태그 안에 입력합니다. 설명 문구도 있어야겠죠?

제목 : <input type="text" name="title" /><br/>

네이버에 숫하게 로그인할때마다 클릭하는 네모난 흰색칸이 바로 가장많이 쓰이는 입력폼태그입니다.

input 태그에서 type속성에는 여러가지 종류가 있는데 차차 배워보도록 하겠습니다.

name속성에는 해당값이 어찌어찌하여 데이터베이스로 넘어갔을때 이를 인지할 수 있도록 해주는 변수명이라 생각하시면 됩니다. 

닫는 태그는 타 태그처럼 닫아도 되고, 여는태그가 닫히는 부분에서 위처럼 />로 해주셔도 됩니다.

<br/>태그는 break의 약자로 개행해주는 역할을 합니다.

작성자도 마찬가지입니다.

작성자 : <input type="text" name="writer" /><br/>

날짜? 멋잇게 달력으로 보여주고 싶으시다구요? 아직은 이릅니다. 마찬가지로 input="text"를 사용합니다.

날짜 : <input type="text" name="regdate" /><br/>

※날짜 또한 보통 사용자가 입력을 하진 않지만, 다음장의 유효성 검증에서 사용하기위해 입력받겠습니다.

마지막으로 조회수... 조회수 역시 글번호와 마찬가지로 사용자에게 입력을 받진 않습니다. 고로 패스.

그리고 마지막으로 데이터의 입력이 끝나면 데이터를 전송할 버튼이 있어야겠죠?

<input type="submit" />

이 버튼은 type속성이 submit으로 해당 폼을 전송하는 기능을 가지고 있습니다.

그럼 만든 입력폼 페이지를 실행시켜 보겠습니다.

이리하여 수줍은 입력폼이 완성 되었습니다.

다음장에서는 자바스크립트로 넘어가서 입력값에대한 간단한 유효성 검증을 해 보도록 하겠습니다.

수고하셨습니다.

다음장 > http://cusmaker.tistory.com/48