JSP 빠르게 시작하기

JSP 빠르게 시작하기
박중수
2016. 02.

박중수 (Daniel Park)
- wndtn853@gmail.com
- http://danielpark.net
- http://career.danielpark.net
- 2011~ 성공회대 소프트웨어공학 전공
- 2011~2014 Web, Android 외주 개발 및 파트타임
- 2014~ 현재 공군 기상단 개발병 복무중 (Web, Android)
- 팀원 수가 적다보니 강제로 Full Stack
- 현재 Scrapy를 사용핚 크롤링에 빠져사는 중
2

- Windows 7
- JDK8
- Tomcat 8.0
- Eclipse Mars
3
사용 환경

5 설치 및 환경설정
10 프로젝트 생성
15 구구단 출력
21 입력핚 값으로 구구단 출력
26 여러 개의 값을 입력받기
32 데이터베이스 연동
46 데이터베이스에서 조회
54 마무리
목차
4

설치
6
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-
downloads-2133151.html
1. JDK8 설치
http://www.eclipse.org/downloads/download.php?file=/technology/epp/d
ownloads/release/mars/1/eclipse-jee-mars-1-win32-x86_64.zip
2. 이클립스 설치(64bit)
http://apache.tt.co.kr/tomcat/tomcat-8/v8.0.32/bin/apache-tomcat-
8.0.32.zip
3. 톰캣 설치
4. 이클립스와 톰캣 압축풀고 이클립스 실행

설정
7
1. 하단 Server 탭에서 파란색 링크 클릭
2. Apache -> Tomcat v8.0 Server 선택 후 다음버튼 클릭
Eclipse에 Tomcat 추가하기

설정
8
3. Browse를 눌러 톰캣 압축을 푼 폴더를 선택한 후 Finish 버튼을 누른다
※ 이 때 주의할 점은 tomcat 폴더 안에 tomcat 폴더가 하나 더 있을 수
있는데 이 때에는 안 쪽에 있는 폴더를 선택해주도록 한다.
Eclipse에 Tomcat 추가하기

설정
9
5. Eclipse 화면 하단의 Server 탭에 Tomcat 8.0이 추가된 것을
확인할 수 있다.
Tomcat 추가확인

프로젝트 생성
11
1. Eclipse 왼쪽의 Project Explorer 영역을 오른쪽 클릭 후 New에 Dynamic
Web Project를 선택한다.
2. 맊약 Dynamic Web Project가 없다면 Other를 선택하고 Web 항목에 들
어있는 것을 선택하면 된다.

프로젝트 생성
12
3. Project name에 프로젝트 이름을 입력하고 Next를 누른다.
4. 계속 Next를 누르면 마지막 화면이 뜨는데 Generate web.xml
deployment descriptor를 체크하고 Finish를 클릭한다.

프로젝트 생성
13
5. Eclipse 화면 왼쪽의 Project Explorer 영역을 보면 프로젝트가
생성 완료되었다.

프로젝트 생성
14
Eclipse에서 우리가 사용할 폴더의 간략한 설명
Java Resources -> src
컴파일 되는 자바 소스들이 들어가는 곳이다. (즉 *.java)
※ 꼭 .java파일만 넣어야하는 것은 아니다
WebContent
클라이언트에게 제공될 파일들 (jsp, html, css, js 등)
WebContent -> WEB-INF
실행에 필요한 클래스 및 설정파일 폴더
※ WEB-INF는 클라이언트에서 접근이 불가능하다.
WebContent -> WEB-INF -> lib
외부 라이브러리 폴더
WebContent -> WEB-INF -> web.xml
웹 어플리케이션의 환경설정파일

구구단 출력
16
JSP로 구구단 출력하기
1. WebContent 폴더 오른쪽클릭 -> new -> JSP File로 gugudan.jsp 파일
을 추가한다. (없다면 other을 선택해 Web에서 JSP File을 선택한다.)
2. 아래와 같이 구구단 코드를 적는다

구구단 출력
17
3. 하단의 Servers 탭에서 아까 추가한 Tomcat v8.0 서버를 오른쪽 클릭 후
Add And Remove를 클릭한다.
4. 왼쪽에서 우리의 프로젝트를 클릭한 후 Add를 클릭하여 추가해준 후
Finish를 클릭한다.

구구단 출력
18
5. Tomcat v8.0 서버를 오른쪽 클릭 후 Start를 클릭한다.
6. 인터넷을 실행하고 http://localhost:8080/testProject/gugudan.jsp 로
접속한다.
※ URL 구조는 http://localhost:포트/프로젝트명/파일명 이다
※ Tomcat v8.0 서버를 오른쪽 클릭하면 나오는 메뉴 중 Stop을 클릭하면
서버가 꺼진다. (이클립스를 종료할때는 톰캣을 먼저 종료시켜야한다.)

구구단 출력
19
코드 설명
<%@ %> 사이에 있는 것들
페이지 지시어. 문서 젂체에 적용되어야 할 내용을 뜻한다.
보통 문서의 타입, 인코딩, 라이브러리 import 등을 정의
<% %> 사이에 있는 것들
일반적인 자바 코드들을 넣는다.
<%= %> 사이에 있는 것들
자바 변수에 있는 값을 출력한다.

구구단 출력
20
코드 설명
소스와 결과 HTML 비교

입력된 값으로 구구단 출력
21

22
값 입력 페이지 작성
1. WebContent 폴더 오른쪽클릭 -> new -> JSP File로 input.jsp 파일을
추가한다. (없다면 other을 선택해 Web에서 JSP File을 선택한다.)
2. 아래와 같이 html을 작성한다.

23
gugudan.jsp 수정
3. 입력한 값을 받을 수 있도록 gugudan.jsp를 아래와 같이 수정한다.

24
코드 설명
request.getParameter(“”) 란?
페이지로 넘어오는 데이터를 파라미터라고 하는데 파라미터 이름을 매개변수로
파라미터의 값을 가져오는 내장 메소드이다.
form태그는 페이지로 데이터를 넘기는 한 단위를 나타낸다.
method 속성은 데이터를 넘기는 방식을 의미하고 action은 데이터를 넘길 대상을 지정한다.
우리는 gugudan.jsp에 단을 입력하여 넘길 것이기 때문에 현재 디렉토리의 gugudan.jsp를
지정했다. 후에 submit 버튼을 눌러 데이터를 젂송하면 input 태그의 name 속성에 지정한
이름으로 request.getParameter 메소드를 통해 그 값을 받아올 수 있다.

25
실행 결과
5를 입력하고 입력버튼을 누르면 오른쪽과 같은 화면이 뜬다.
젂송방식(method)을 get 방식으로 했기에 오른쪽 화면의 주소창을 보면
dan=5 라는 파라미터가 URL에 드러나게 된다.

여러 개의 값을 입력받기
26

27
회원가입 폼 작성
1. WebContent 폴더 오른쪽클릭 -> new -> JSP File로 joinForm.jsp 파일
2. 아래와 같이 html을 작성한다.

28
회원가입 폼 소스 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>회원가입</title>
</head>
<body>
<form method="get" action="./joinProc.jsp">
<table>
<tr><th colspan="2">회원가입</th></tr>
<tr>
<td>아이디</td><td><input type="text" name="id"></td>
</tr>
<tr>
<td>비밀번호</td><td><input type="password" name="pw"></td>
</tr>
<tr>
<td>이름</td><td><input type="text" name="name"></td>
</tr>
<tr><td colspan="2"><input type="submit" value="가입"></td></tr>
</table>
</form>
</body>
</html>

29
회원가입 처리 프로그램 작성
1. WebContent 폴더 오른쪽클릭 -> new -> JSP File로 joinProc.jsp 파일
2. 아래와 같이 소스코드를 작성한다.

30
회원가입 처리 소스 코드
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>구구단</title>
</head>
<body>
<%
String id = request.getParameter("id");
String pw = request.getParameter("pw");
String name = request.getParameter("name");
%>
<table>
<tr><th colspan="2">회원가입 값</th></tr>
<tr>
<td>아이디</td><td><%=id %></td>
</tr>
<tr>
<td>비밀번호</td><td><%=pw %></td>
</tr>
<tr>
<td>이름</td><td><%=name %></td>
</tr>
</table>
</body>
</html>

31
각각 input 태그의 name 속성에 입력되어있는 값으로
joinProc.jsp 에서 값을 받아온다.

데이터베이스 연동
MySQL Connector는 다운 후에 압축을 풀어준다.
※ MariaDB는 MySQL JDBC와 연동된다
1. MariaDB 다운 후 설치
http://mariadb.org/download/
3. MySQL JDBC Connector 다운
http://cdn.mysql.com//Downloads/Connector-J/mysql-connector-java-
5.1.38.zip
2. MySQL Workbench 다운 후 설치
http://dev.mysql.com/downloads/workbench/
33

34
3. 테이블 생성
WorkBench를 실행하고 로컬로 커넥션을 설정한다.
비밀번호는 Store in Vault … 를 클릭하여 입력한다.

35
3. 테이블 생성
데이터베이스에 연결된 후 위의 쿼리를 각각 입력해주면
테이블이 생성된다.

36
압축을 푼 MySQL Connector 폴더에서
mysql-connector-java-5.1.38-bin.jar 파일을 프로젝트의
WebContent -> WEB-INF -> lib 폴더로 복사한다.
※ 라이브러리를 추가하고는 Tomcat을
재시작하여야 한다.
라이브러리 추가

37
joinProc.jsp 수정
3. 입력받은 값들을 데이터베이스에 입력할 수 있도록 코드를 변경한다.

38
회원가입 처리 소스 코드1
pageEncoding="UTF-8"
import="java.sql.*"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>회원가입</title>
</head>
<body>
<%
String id = request.getParameter("id");
String pw = request.getParameter("pw");
String name = request.getParameter("name");
// JDBC 선언
Class.forName("com.mysql.jdbc.Driver");
Connection conn = null;
PreparedStatement pstmt = null;
try {
// DB URL & 접속할 데이터베이스명
String url = "jdbc:mysql://localhost:3306/testdb?Unicode=true&characterEncoding=UTF-8";
String dbid = "root"; // DB 아이디
String dbpw = "1234"; // DB 비밀번호

39
회원가입 처리 소스 코드2
// 데이터베이스 연결
conn = DriverManager.getConnection(url, dbid, dbpw);
String sql = "INSERT INTO user(id, pw, name) VALUES('"+id+"', '"+pw+"','"+name+"')";
pstmt = conn.prepareStatement(sql);
int inputCount = pstmt.executeUpdate();
if(inputCount == 1){
%>
성공
<%
} else {
%>
실패
<%
}
} catch(SQLException e) {
%>
에러
<%
} finally {
// Connection 반환 (필수)
if(pstmt != null) { try { pstmt.close(); }catch(Exception e){} }
if(conn != null) { try { conn.close(); }catch(Exception e){} }
}
%>
</body>
</html>

40
소스설명
최상단에 import=“java.sql.*”이 추가되었다.
이는 자바에서 데이터베이스 관련 라이브러리들을 사용하기 위해
선언해주는 부분이다.

41
소스설명
id, pw, name을 가져오는 부분은 그대로이다.
아래의 Class.forName 메소드로 mysql관련 라이브러리가 존재하는지 확인한다.
Connection과 PrepareStatement는 나중에 close를 시켜줘야 하므로
Null값으로 미리 선언해둔다.

42
소스설명
Jdbc URL과 데이터베이스의 아이디와 패스워드를 선언한 후
이를 매개변수로 데이터베이스의 연결을 얻어온다.

43
소스설명
SQL에 입력받은 값들을 넣고 결과를 받아온다.
executeUpdate 메소드는 적용된 행의 개수를 반홖하는데
우리는 하나맊 Insert 하므로 1이 반홖된다.
반홖값으로 성공여부를 판단한다.

44
소스설명
데이터베이스 작업 수행 중 에러가 발생하면 SQLException이 발생한다.
그를 잡아 에러라고 표시해준다.
또한 최종적으로 PreparedStatement와 Connection은 모두 사용한 후에는
close() 메소드를 사용해 자원을 반홖해주어야맊 한다
자원들을 반홖해줄때에는 선언한 순서의 반대로 (pstmt -> conn)
반홖해주어야 한다.

45
실행
데이터베이스 입력 확인

데이터베이스에서 조회
46

47
조회 코드 작성
1. WebContent 폴더 오른쪽클릭 -> new -> JSP File로 userList.jsp 파일
2. 아래와 같이 소스코드를 작성한다.

48
회원조회 소스 코드1
pageEncoding="UTF-8"
import="java.sql.*"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>회원조회</title>
</head>
<body>
<table>
<tr><th>id</th><th>pw</th><th>이름</th></tr>
<%
// JDBC 선언
Class.forName("com.mysql.jdbc.Driver");
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
// 데이터베이스 연결
String url = "jdbc:mysql://localhost:3306/testdb?Unicode=true&characterEncoding=UTF-8";
String dbid = "root";
String dbpw = "1234";
conn = DriverManager.getConnection(url, dbid, dbpw);

49
회원조회 소스 코드2
String sql = "SELECT * FROM user";
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while(rs.next()){
%>
<tr>
<td><%=rs.getString("id") %></td>
<td><%=rs.getString("pw") %></td>
<td><%=rs.getString("name") %></td>
</tr>
<%
}
} catch(SQLException e) {
%> 에러 <%
} finally {
// Connection 반환
if(rs != null) { try { rs.close(); }catch(Exception e){} }
if(pstmt != null) { try { pstmt.close(); }catch(Exception e){} }
if(conn != null) { try { conn.close(); }catch(Exception e){} }
}
%>
</table>
</body>
</html>

50
소스설명
선언쪽은 회원가입과 크게 다른부분이 없다.
결과 값을 받아오기 위한 ResultSet 변수를 선언해준다.

51
소스설명
입력과 같은 방식으로 SQL을 보내지맊 받아올 때에는 약갂 다른
executeQuery()라는 메소드로 ResultSet 객체를 반홖받는다.
이는 결과값을 가지고 있는 객체로 next() 메소드를 호출하면
다음 행이 존재하는지 여부를 반홖하며 존재한다면 다음 행을 가르키게 된다.
그 후에 getString 메소드로 컬럼명을 인자로 넘겨 데이터베이스에서 가져온
값을 받아올 수 있다. (getInt, getBoolean등 종류가 맋다)

52
소스설명
ResultSet을 반홖하는 코드가 한줄 추가되었다.
ResultSet은 제일 마지막에 선언되었으므로 제일 처음 반홖한다.

53
실행
※ 조회 이젂에 미리 3명을 더 Insert 시켜놓아 4명이 조회된다.

마무리
54
이제 코드를 이해하면서 처음부터 다시 쳐보시면 됩니다.

JSP 빠르게 시작하기

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to JSP 빠르게 시작하기

Similar to JSP 빠르게 시작하기 (20)

JSP 빠르게 시작하기