게시판 리스트 까지 디비를 연동해서 만들어 보았습니다.
이전 게시글에서는 디비에서 바로 insert를 하였지만, 등록 하는 페이지를 만들어서 프로그램으로 등록 하는걸 만들어
보겠습니다.
그리고 바탕화면 오른쪽 아래에 톰캣을 구동 시키는 아이콘이 보이지 않는다면...
서비스 에서 톰캣을 기동 하면 됩니다.
http://localhost:8080/bbs_list.jsp
톰캣을 시작을 시켰다면 인터넷 브라우저에서 게시판 리스트 페이지를 띄워 보겠습니다.
리스트 페이지에서 등록 페이지로 이동할 버튼을 만들어서 등록 페이지로 이동해 보겠습니다.
리스트 페이지에 아래 그림과 같이 코드를 추가를 해줍니다.
하단에 추가를 해주면 됩니다.
<div style="width:50%;margin-top: 30px;text-align:right;">
<button onClick="add_page()">등록 페이지</button>
</div>
여기 onClick 이벤트는 클릭을 하면 이벤트를 발생을 시키겠다는 것이고..
add_page() 는 스크립트 function 함수를 사용 하겠다는 의미 입니다.
이제 <head></head> 안에 스크립트를 추가를 해줍니다.
소스코드
<script>
function add_page() {
location.href = "/bbs_add_page.jsp";
}
</script>
이제 bbs_add_page.jsp 라는 등록 페이지를 만들어 보겠습니다.
게시판 리스트 페이지에서 등록페이지 버튼을 클릭을 하면 등록페이지로 이동이 됩니다.
bbs_add_page.jsp 소스
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>JSP 게시판 등록 페이지</title>
</head>
<body>
<h1>JSP 게시판 등록 페이지</h1>
<form name="add_frm" id="add_frm">
<table width="50%" border="1">
<tr>
<td align="center" style="background-color: #ececec;">
컬럼1
</td>
<td>
<input type="text" name="column1" id="column1" style="width:98%;" />
</td>
</tr>
<tr>
<td align="center" style="background-color: #ececec;">
컬럼2
</td>
<td>
<input type="text" name="column2" id="column2" style="width:98%;" />
</td>
</tr>
</table>
</form>
<div style="width:50%;margin-top: 30px;text-align:right;">
<button>등록</button>
</div>
</body>
</html>
이렇게 하고 등록 페이지 버튼을 클릭을 하면 등록 페이지로 이동이 되어 집니다.
다음 게시글 에서는 디비를 연동해서 등록, 수정, 삭제를 하는 게시글을 올리 겠습니다.
'IT, 인터넷 > JSP' 카테고리의 다른 글
| jsp 를 알아보자 (7) - 자주 쓰는 명령어 (0) | 2021.09.30 |
|---|---|
| jsp 를 알아보자 (6) - 게시판 등록, 수정, 삭제 만들기 (0) | 2021.09.29 |
| jsp 를 알아보자 (4) - 게시판 리스트 만들기 (0) | 2021.09.28 |
| jsp 를 알아보자 (3) - 게시판 만들기 (0) | 2021.09.28 |
| jsp 를 알아보자 (2) - 개발환경 (0) | 2021.09.28 |
