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)

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

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

1. main.jsp 생성

2. index.jsp생성

3. top.jsp 생성

4. bottom.jsp 생성

5. joinForm.jsp 생성

6. joinPro.jsp 생성

7. MySQL에서 테이블생성

8. MemberBean.java생성

9. MemberDAO.java 생성

10. context.xml 생성

Comments

Categories

Recent

Archives

Tags

Advertisement