[8주][1일][3~6th] JSP: HTML홈피를 JSP홈피로 바꾸기

☆ 실습(1) : Funweb 홈페이지 수정하기

새 프로젝트를 만든다. 프로젝트 이름에서 FunWeb을 입력하고 next 버튼을 누른다.

 

아래와 같은 창이 뜨는데, 그냥 next 버튼을 누른다.

 

체크박스에 체크가 되어 있지 않은데,

 

체크하고 finish 버튼을 누른다.

 

FunWeb 프로젝트가 생성된 것을 볼 수 있다.

 

미리 준비된 funweb폴더 안의 내용을 모두 복사하여

 

이클립스에서 WebContent 안에 모두 복사한다.

 

톰캣 서버에서 오른쪽 마우스를 누르고 Add and Remove 버튼을 누른다.

 

StudyPeoject는 쓰지 않을 거니깐, 왼쪽으로 빼준다.

 

총 5개의 HMTL 파일을 JSP 파일로 바꿀 것이다.

notice.html, welcome.html, join.html, login.html, index.html 파일과 똑같은 이름의 jsp 파일을 생성한다.

 

notice.html 파일의 내용을 모두 복사하여

 

notice.jsp 파일에서 위에 2번줄까지 남기고 3번부터 붙여넣기한다.

나머지 4개의 파일도 똑같은 과정을 거친다.

 

index.jsp 파일을 실행한다. 정상적으로 출력이 된다.

아래 그림에서 HOME, COMPANY, CUSTOMER CENTER, login, join 다섯개의 메뉴에 해당된다.

그런데, 한 가지 문제가 있다. header의 메뉴 부분과 footer의 꼬리 부분은 여러가지 메뉴를 클릭하여 이동하더라도 변함이 없다. 그래서 이를 include 태그를 이용해서 간편하게 만들어 보겠다.

 

inc 폴더를 만든다.

 

폴더가 잘 생성되었다.

 

bottom.jsp에서 3번줄부터 내용을 모두 지운다.

 

notice.jsp 파일에서 헤더 들어가는 곳 부분이 있는데, 그 부분을 잘라낸다.

 

top.jsp에서 3번줄부터 붙여넣기 한다. 그리고 4번줄을 보면, 지금은 확장자가 jsp로 바뀌어 있지만 본래는 html이었다. 그림에 보이는 총 다섯가지의 html을 jsp로 바꿔주면 된다.

 

푸터도 역시 잘라낸다.

 

bottom.jsp에서 3번줄부터 붙여넣는다.

 

아까 잘라냈던 헤더 부분에 include 액션태그를 이용해서 28번줄과 같이 입력해준다.

 

푸터에도 마찬가지!

 

mysql에 접속해서 확인해보자.

member 테이블은 기본적으로 4개의 필드로 구성되어 있다.

 

* alter문으로 필드를 더 추가해준다.

alter table member
add email varchar(20);

 

alter table member
add address varchar(100);

 

alter table member
add tel varchar(20);

 

alter table member
add mtel varchar(20);

 

오예~ 제대로 입력됐다.

 

4개의 필드가 더 추가됐다.

 

(다음 시간에 계속)