2020-07-29JSP8 minutes read (About 1192 words) 0 visits

[ITWILL : JSP]홈페이지만들기1 : 프로젝트 시작 설정 및 자바빈생성과 DB연결

ITWILL학원 : 33강 JSP기초 BY 정규태강사

html로 만들어진 홈페이지를 jsp로 변경해보자.

1. main.jsp 생성

path설정
- / 와 ./는 현재폴더
- ../는 상위폴더

<!-- JSP 지시어 : 공통으로 사용되는 변수를 파일에 지정해서 추가 -->
<%@ include ~ %>

<!-- 액션태그 : 공통으로 사용되는 메뉴들을(페이지) 특정 공간에 추가 -->
<jsp:include page="">

<!-- 예시 -->
<jsp:include page="../inc/top.jsp"></jsp:include>

코드블록 :

<body>
<div id="wrap">

	<!-- 헤더파일들어가는 곳 (page Include)-->
	<jsp:include page="../inc/top.jsp"></jsp:include>
	<!-- 헤더파일들어가는 곳 (page Include)-->

	<!-- 메인이미지 들어가는곳 -->
	<!-- 메인이미지 들어가는곳 -->

	<!-- 메인 콘텐츠 들어가는 곳 -->
	<!-- 메인 콘텐츠 들어가는 곳 -->

	<!-- 푸터 들어가는 곳 -->
	<jsp:include page="../inc/bottom.jsp"></jsp:include>
	<!-- 푸터 들어가는 곳 -->
	
</div>
</body>

2. index.jsp생성

<%//프로젝트의 시작페이지 구현

response.sendRedirect("./main/main.jsp");
%>

3. top.jsp 생성

화면상단에 위치하는 메뉴바 처리페이지

<!-- html코드가 필요없다  (html body태그안에 넣어도 되고 html태그 없어도 됨)-->

<% //화면상단에 위치하는 메뉴바 처리페이지

%>
<header>
<div id="login"><a href="../member/loginForm.jsp">login</a> | <a href="../member/joinFrom.jsp">join</a></div>
<div class="clear"></div>
<!-- 로고들어가는 곳 -->
<div id="logo"><img src="../images/logo.gif" width="265" height="62"></div>
<!-- 로고들어가는 곳 -->
<nav id="top_menu">
<ul>
	<li><a href="../index.jsp">HOME</a></li>
	<li><a href="../company/welcome.html">COMPANY</a></li>
	<li><a href="#">SOLUTIONS</a></li>
	<li><a href="../center/notice.html">CUSTOMER CENTER</a></li>
	<li><a href="#">CONTACT US</a></li>
</ul>
</nav>
</header>

4. bottom.jsp 생성

화면하단에 위치하는 footer 처리페이지

<!-- html코드가 필요없다  (html body태그안에 넣어도 되고 html태그 없어도 됨)-->

<% //화면하단에 위치하는 footer 처리페이지

%>
<footer>
<hr>
<div id="copy">All contents Copyright 2011 FunWeb 2011 FunWeb 
Inc. all rights reserved<br>
Contact mail:funweb@funwebbiz.com Tel +82 64 123 4315
Fax +82 64 123 4321</div>
<div id="social">
<img src="../images/Instagram.gif" width="33" height="33" alt="Instagram">
<img src="../images/twitter.gif" width="34" height="34" alt="Twitter">
</div>
</footer>

5. joinForm.jsp 생성

원하는 회원가입 폼양식 생성하면 된다.
코드블록은 생략하도록 한다.

6. joinPro.jsp 생성

자바빈을 작성하려면 테이블이 생성되어있어야한다.
joinPro.jsp의 남은 코드는 순서대로 아래에 추가해서 작성할 예정이다.

<%
// 한글처리 
request.setCharacterEncoding("UTF-8");
// 전달되는 데이터 입력(저장) => 자바빈 이용
%>

7. MySQL에서 테이블생성

자바빈을 작성하려면 테이블이 생성되어있어야한다.
회원테이블 정보 : 제약조건
- 아이디(id) : pk
- 비밀번호(pw) : nn
- 이름(name) : nn
- 이메일(email) : nn, uq
- 생년월일(birth) : nn
- 성별(gender) : nn
- 주소(addr)
- 휴대폰번호(mobile)
- re_date : 가입일자
팁
- 전화번호 : 보통 실무에서 varchar를 이용하는 것이 편하다
- 생년월일 : int나 varchar를 쓰는데, 실무에선 varchar로 받아서 바로 이용하는 것이 편하다

8. MemberBean.java생성


package com.itwillbs.member;

import java.sql.Date;

//1번규약 :public 클래스
public class MemberBean {
//자바빈은 항상 패키지를 포함해야한다.
//데이터를 저장하는 객체(한번에 회원정보를 저장가능한 객체) => DB에 데이터전달
	
	//2번 규약: private멤버변수
	private String id;
	private String pw;
	private String name;
	private String email;
	private int birth;
	private String gender;
	private String addr;
	private String mobile;
	private Date re_date;
	
	//4번규약 : 디폴트생성자
	
	//3번규약 : getter, setter
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	
	(중략)
	
	//5번 선택: toString 
	/* (non-Javadoc)
	 * @see java.lang.Object#toString()
	 */
	@Override
	public String toString() {
		return "MemberBean [id=" + id + ", pw=" + pw + ", name=" + name + ", email=" + email + ", birth=" + birth
				+ ", gender=" + gender + ", addr=" + addr + ", mobile=" + mobile + ", re_date=" + re_date + "]";
	}
}

9. MemberDAO.java 생성

DB연결과 자원해제 메서드를 생성한다

자원해제는 사용한 객체 역순으로 진행하는 것이 안전하게 자원해제할 수 있다

import javax.sql.DataSource;

public class MemberDAO {
	
	Connection con = null;
	String sql = "";
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	//디비연결메서드
	/*private void getCon() throws NamingException, SQLException {
		//Context 객체 생성
		//Context인터페이스이기때문에 직접객체생성할 수 없어서 InitialContext클래스를 사용해서 객채생성 
		//예외처리 : throws사용하는 방법
		Context init = new InitialContext(); //업캐스팅
		//디비연결정보를 불러오기 ->DataSource 타입으로 저장
		// 고정문구"java:comp/env/다른문구context파일의 name값입력"
		DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/mysqlDB");
		//ds 사용해서 연결
		//멤버변수는 static이 아니기때문에 new BoardDAO();객체생성 후에 멤버변수들이 생성된다.
		//그리고 getCon()메서드를 하면 멤버변수 con에 데이터(ds.getConnection();)가 담기게 된다.
		//따라서 이때 return하지 않고 써도된다.
		con = ds.getConnection();
		System.out.println("디비연결성공  :"+con);
	}
	*/
	private Connection getCon() throws Exception {
		Context init = new InitialContext();
		DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/funwebDB");
		
		return con;
	} 
	
	//자원해제메서드
	public void close(){
		try{
			if(rs != null) rs.close();
			if(pstmt != null) pstmt.close();
			if(con != null) con.close();
		} catch (SQLException e) {
			e.printStackTrace();
		} 
	}
}

10. context.xml 생성

주요 체크사항
- name : 사용할 이름으로 작성
- url : 테이블이 있는 DB경로
- username과 password

<?xml version="1.0" encoding="UTF-8"?>
<!-- 디비연결에 필요한 정보 저장  -->
<Context>
	<Resource 
		name="jdbc/fubwebDB"
		auth="Container"
		type="javax.sql.DataSource"
		driverClassName="com.mysql.jdbc.Driver"
		url="jdbc:mysql://localhost:3306/funwebdb"
		username="root"
		password="1234"
	/>
</Context>

#TIL ITWILL(JAVA)