이전 게시글에서는 간단한 index.html을 만들어 정적인 홈페이지를 만들어보았습니다.
이번 게시글에서는 글쓰기로 넘어가서 글쓰는 것을 해보도록 하겠습니다.
위와 같이 </table> 아래에 " <a href="write.html">글쓰기</a> " 을 작성하고 실행시켜보면 글쓰기라는 글이 생겼습니다.
그 글을 클릭하면 HTTP Status 404 Not Found라는 에러가 나오는데 write.html이라는 파일을 찾을 수 없어서 뜨는 에러입니다.
그렇다면 index.html와 동일하게 write.html파일을 생성해줍니다. 그리고 아래와 같이 작성을 합니다.
간단히 설명하자면 form action은 값을 보낼 위치를 지정하고 method는 어떻게 보낼지 정의합니다.(get/post)
input type = "text"은 텍스트형식이며 name = "title"은 이 값을 title이라는 변수에 넣겠다는 것입니다.
마지막에는 보내는 액션이 있어야겠죠? submit으로 보내게 됩니다.
index.html에서 실행을 시킨후 글쓰기버튼을 누르면 위와같이 나오게 됩니다.
여기까지 게시글 입력하는 것을 해보았습니다.
하지만 게시글에 사용자가 원하는 모든 것을 입력시키게 해선 안됩니다. 내부적 문제인 보안문제 등 여러가지 문제가 발생할 수 있기때문에 JavaScript를 이용하여 입력값 유효성 검증을 넣어보겠습니다.
자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.
자바 스크립트의 정의는 위와 같으며 스크립트 언어상 문법이 엄격하지 않고, 자유도가 넓어 많은 라이브러리가 존재하는 강력한 언어라고 합니다.
자바스크립트 코드는 보통 <head> 태그안에 집어 넣는 것이 일반적이며 다른 곳에 넣으면 작동이 안될수도 있습니다.
간단하게 테스트해보겠습니다.
위와 같이 <script>alert("test")</script>를 작성하고 실행시키면 아래와 같이 나옵니다.
(가장 간단한 XSS 취약점 확인구문이기도 하죠)
이제 입력값을 검사해보겠습니다.
write.html로 돌아가서
<form action 부분에 onsubmit="return formCheck();"를 추가해줍니다.
onsubmit은 input 태그중에 type이 submit인 버튼을 클릭했을 때 전송하기전에 캐치하여 이때 동작할 자바스크립트 구문을 연결해주는 이벤트 속성입니다. onsubmit이외에 많은 이벤트들이 있습니다.
그렇다면 onsubmit을 통하여 formCheck함수를 실행하도록하였는데요. 그러면 이제 formcheck함수를 작성해야겠지요?
그리고 onsubmit 부분에 return formCheck();라고 되어있으니 formCheck함수가 False이면 전송이 안되고 True면 전송이 되겠죠?
그럼 다시 write.html로 돌아가서 formcheck함수를 만듭시다.
아, 그전에 write.html을 write.jsp로 바꿉시다. 그리고 index.html에 있는 write.html도 jsp로 바꿔야겠죠?
(안바꿔도 동작은 가능하나 추 후 JSP로 바꿔야합니다)
그냥 확장자 변경만해서 안될 경우가 있는데 그럼 내용을 복사하고 기존의 HTML을 지우고 jsp파일을 생성한 후
붙여넣기 하시면 되겠습니다.
※HTML과 javascript는 웹브라우저에서 돌아가기때문에 웹서버가 구동안해도 작동하지만
JSP파일을 사용하기 위해서는 웹서버가 필요합니다. 하지만 우리는 이미 Tomcat을 이용하여 돌리고 있죠??
<script>
function formCheck(){
var title = document.forms[0].title.value;
// 사용하기 쉽도록 변수를 선언하여 담아주고,
var writer = document.forms[0].writer.value;
var regdate = document.forms[0].regdate.value;
var content = document.forms[0].content.value; // 추가되었습니다. 글내용
if (title == null || title == ""){ // null인지 비교한 뒤
alert('제목을 입력하세요'); // 경고창을 띄우고
document.forms[0].title.focus(); // 해당태그에 포커스를 준뒤
return false; // false를 리턴합니다.
}
if (writer == null || writer == ""){
alert('작성자를 입력하세요');
document.forms[0].writer.focus();
return false;
}
// 글작성폼에 내용을 추가하였습니다. 게시판에 글내용은 당연히 있어야겠죠?
// 추가할 html코드 : content : <textarea rows="10" cols="20" name="content"></textarea><br>
if (content == null || content == ""){
alert('내용을 입력하세요');
document.forms[0].content.focus();
return false;
}
if (regdate == null || regdate == "" ){
alert('날짜를 입력하세요');
document.forms[0].regdate.focus();
return false;
}
}
</script>
실행시켜봅시다.
위와 같이 잘 나오겠죠?
유효성검사는 꼭 위와 같이 구성되지 않아도 됩니다. 프로그래밍에는 정확한 정답은 없으니까요.
여기서 글쓴이를 이메일형식으로만 받을 수 있도록 하고
날짜는 숫자 형식으로만 받을 수 있도록 해봅시다. 6자리로.
이때 사용할 것이 정규식입니다. 정규식은 따로 검색해보시길 바랍니다.
이메일을 판별하는 정규식은
.match(/^\d+$/ig) // 숫자인지 판별하는 정규식
.match(/^(\w+)@(\w+)[.](\w+)$/ig) // asdf@asdf.com 형식을 판별하는 정규식
.match(/^(\w+)@(\w+)[.](\w+)[.](\w+)$/ig) // asdf@asdf.co.kr 형식을 판별하는 정규식
.match(/^\d\d\d\d\d\d+$/ig) // 숫자형식 6자리
위의 정규식을 function 부분에 작성하여 실행해봅시다.
복붙이 아닌 직접 쳐보는 습관을 들입시다..
여기까지 입력값 검증까지 해보았습니다.
하지만 Javascript는 client Side 언어이기때문에 위의 입력값 검증을 우회할 수 있습니다.
추후 Server Side 언어인 JSP를 이용하여 한번더 입력값은 검증할 것입니다.
또한 Javascript와 Html만으로는 DB에 접속하는건 무리가 있습니다.
따라서 DB 접속을 위해서도 JSP언어를 사용 할 것입니다.
'Develop > JSP-Oracle' 카테고리의 다른 글
| [게시판 만들기] JSP와 Oracle을 이용해 게시판을 만들어보자 -1.6- (0) | 2017.10.07 |
|---|---|
| [게시판 만들기] JSP와 Oracle을 이용해 게시판을 만들어보자 -1.5- (3) | 2017.10.07 |
| [게시판 만들기] JSP와 Oracle을 이용해 게시판을 만들어보자 -1.4- (0) | 2017.10.07 |
| [게시판 만들기] JSP와 Oracle을 이용해 게시판을 만들어보자 -1.3- (3) | 2017.10.07 |
| [게시판 만들기] JSP와 Oracle을 이용해 게시판을 만들어보자 -1.1- (0) | 2017.10.07 |
최근댓글