Woopii Vyeolog

간단한 성적 처리 웹 페이지 생성하기1 (테이블 생성,삭제,데이터 조회) 본문

Spring Framework

간단한 성적 처리 웹 페이지 생성하기1 (테이블 생성,삭제,데이터 조회)

WooPii 2020. 3. 16. 11:24

github : https://github.com/leewoopyo/exam/tree/master

 

github에 repository 생성

 

우선, github로 버전을 관리하기 위해서

 

github에 repository를 하나 생성할 것이다.

 

012

 

내 작업 폴더에 해당 repository를 생성 할 폴더 생성 후 

 

SourceTree로 github에 생성한 해당 repository의 클론 생성

 

1. github에 생성한 repository 주소 복사

 

 

2. SourceTree 실행 후 Clone만들기에서 주고 붙여넣고 폴더 경로를 내가 생성한 폴더로 설정

 

 

3. 생성 확인

 

 

성적 관리 프로젝트 생성

 

1. File --> New --> Dynamic Web Project 클릭

2. 프로젝트 이름과 위에서 만든 경로로 설정

3. 생성 확인

 

 

테이블 생성, 삭제, 데이터 조회

프로젝트를 생성했으면, 

 

프로젝트 안에 WebContent --> WEB-INF 안에 Html, jsp파일 등을 생성한다.

 

1. 메인 화면 (index.html)

 

프레임으로 2 화면으로 나누어 표시

메뉴화면과 실제 내용이 나오는 화면으로 구성 

 

<index.html>

<!DOCTYPE html>
<html>
<head>

<!-- 프레임으로 화면을 2개로 나눔 -->
<frameset cols="130,*" border="0" frameborder="1">
	<!-- 메뉴가 나오는 부분 -->
	<frame src="menu.html">
	<!-- 실제 내용이 나오는 부분 name을 main으로 해줘서 메뉴와 연동되게 할 것이다. -->
	<frame src="#" name="main">
</frameset>

<body>
</body>
</html>

 

2. 메뉴화면 (menu.html)

 

테이블 생성, 삭제, 데이터 조회로 이동하는 메뉴페이지

 

<menu.html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- a태그로 각 기능을 가진 페이지에 링크를 만들고  -->
	<!-- target으로 화면에 출력할 곳을 설정한다. 타겟이 main이라서 main이란 이름의 프레임에 출력될것이다. -->
	<a href="createDB.jsp" target="main">테이블 생성</a><br>
	<a href="dropDB.jsp" target="main">테이블 삭제</a><br>
    <a href="allsetDB.jsp" target="main">데이터 생성</a><br>
	<a href="allviewDB.jsp" target="main">전체 데이터</a><br>
</body>
</html>

 

여기까지 했으면 다음과 같은 화면이 나온다.

 

 

3. 테이블 생성 페이지(createDB.jsp)

 

DB 테이블을 생성하는 기능을 가진 페이지다.

 

<createDB.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*,javax.sql.*,java.io.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>테이블 생성</h3>
<hr>
<%
try {
	//커넥터 드라이버 읽기
	//커넥터 버전에 따라 아래 문구가 약간의 차이가 있다. 
	Class.forName("com.mysql.cj.jdbc.Driver");
	//커넥션 객체 생성
	//내 DB서버의 아이피와 사용 DB를 적고, 사용하는 Mysql 계정과 비밀번호를 적는다.
	//						             아이피	  DB	 아이디	 비밀번호 
	Connection conn= DriverManager.getConnection("jdbc:mysql://192.168.56.1/kopo", "kopo15", "Qwer1234!!");
	//statement 객체 생성
	Statement stmt = conn.createStatement();
	//쿼리문 실행
	stmt.executeUpdate(
	"create table examtable(name varchar(20), studentid int not null primary key, kor int, eng int, mat int) DEFAULT CHARSET=utf8;");
	//연결 닫기
	stmt.close();
	conn.close();
	
	out.print("테이블 생성 완료");
//예외처리
} catch(Exception e) {
	out.println("테이블 생성중 에러발생."+e);
}
%>
</body>
</html>

 

4. 테이블 삭제 페이지(dropDB.jsp)

 

DB 테이블을 삭제하는 기능을 가진 페이지다.

 

<dropDB.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*,javax.sql.*,java.io.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>테이블 삭제</h3>
<hr>
<%
try {
	//커넥터 드라이버 읽기
	//커넥터 버전에 따라 아래 문구가 약간의 차이가 있다. 
	Class.forName("com.mysql.cj.jdbc.Driver");
	//커넥션 객체 생성
	//내 DB서버의 아이피와 사용 DB를 적고, 사용하는 Mysql 계정과 비밀번호를 적는다.
	//						             아이피	  DB	 아이디	 비밀번호 
	Connection conn= DriverManager.getConnection("jdbc:mysql://192.168.56.1/kopo", "kopo15", "Qwer1234!!");
	//statement 객체 생성
	Statement stmt = conn.createStatement();
	//쿼리문 실행
	stmt.executeUpdate("drop table examtable;");
	//연결 닫기
	stmt.close();
	conn.close();
	
	out.print("테이블 삭제 완료");
//예외처리
} catch(Exception e) {
	out.println("테이블 삭제중 에러발생."+e);
}
%>
</body>
</html>

 

5. 데이터 삽입 페이지(allsetDB.jsp)

 

학생1~학생9까지의 성적데이터를 DB에 넣는 기능을 가진 페이지이다.

 

<allsetDB.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*,javax.sql.*,java.io.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>데이터 Insert</title>
</head>
<body>
<h3>데이터 Insert</h3>
<hr>
<%
//데이터를 삽입하는 부분
try {
    //커넥터 드라이버 읽기
    //커넥터 버전에 따라 아래 문구가 약간의 차이가 있다. 
    Class.forName("com.mysql.cj.jdbc.Driver");
    //커넥션 객체 생성
    //내 DB서버의 아이피와 사용 DB를 적고, 사용하는 Mysql 계정과 비밀번호를 적는다.
    //						             아이피	  DB	 아이디	 비밀번호 
    Connection conn= DriverManager.getConnection("jdbc:mysql://192.168.56.1/kopo", "kopo15", "Qwer1234!!");
    //statement 객체 생성
    Statement stmt = conn.createStatement();
    //데이터 insert
    stmt.executeUpdate("insert into examtable (name, studentid, kor, eng, mat) values('학생1',209901,95,100,95);"); 
    stmt.executeUpdate("insert into examtable (name, studentid, kor, eng, mat) values('학생2',209902,95,95,95);");
    stmt.executeUpdate("insert into examtable (name, studentid, kor, eng, mat) values('학생3',209903,100,100,100);");
    stmt.executeUpdate("insert into examtable (name, studentid, kor, eng, mat) values('학생4',209904,100,95,90);");
    stmt.executeUpdate("insert into examtable (name, studentid, kor, eng, mat) values('학생5',209905,80,100,70);");
    stmt.executeUpdate("insert into examtable (name, studentid, kor, eng, mat) values('학생6',209906,100,100,70);");
    stmt.executeUpdate("insert into examtable (name, studentid, kor, eng, mat) values('학생7',209907,70,70,70);");
    stmt.executeUpdate("insert into examtable (name, studentid, kor, eng, mat) values('학생8',209908,100,90,80);");
    stmt.executeUpdate("insert into examtable (name, studentid, kor, eng, mat) values('학생9',209909,80,100,90);");
    //연결 닫기
    stmt.close();
    conn.close();
//예외 처리
} catch(Exception e) {
        out.println("데이터 삽입 중 에러발생."+e);
}
%>

</body>
</html>

 

6. 데이터 전체 조회 페이지(allviewDB.jsp)

 

전체 성적 데이터 조회

 

<allviewDB.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*,javax.sql.*,java.io.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>전체 데이터 조회</h3>
	<hr>
<%
try {
	//커넥터 드라이버 읽기
	//커넥터 버전에 따라 아래 문구가 약간의 차이가 있다. 
	Class.forName("com.mysql.cj.jdbc.Driver");
	//커넥션 객체 생성
	//내 DB서버의 아이피와 사용 DB를 적고, 사용하는 Mysql 계정과 비밀번호를 적는다.
	//						        아이피	  DB	 아이디	 비밀번호 
    Connection conn= DriverManager.getConnection("jdbc:mysql://192.168.56.1/kopo", "kopo15", "Qwer1234!!");
	//statement 객체 생성
	Statement stmt = conn.createStatement();
	//쿼리의 결과를 resultset에 담음
	ResultSet rset = stmt.executeQuery("select * from examtable;");
%>
	<!-- 테이블 생성 -->
	<table cellspacing=1 width=600 border=1>
		<tr>
			<td width=50><p align=center>이름</p></td>
			<td width=50><p align=center>학번</p></td>
			<td width=50><p align=center>국어</p></td>
			<td width=50><p align=center>영어</p></td>
			<td width=50><p align=center>수학</p></td>
		</tr>
<%   
	//반복문을 통해 resultset의 내용을  한줄씩 출력
	//out.print()에 태그와 내용을 적으면 해당 내용이 출력됨
    while (rset.next()) { 
            out.println("<tr>");
            out.println("<td width=50><p align=center>"+
	           			"<a href='oneviewDB.jsp?studentid="+Integer.toString(rset.getInt(2))+"'>"+
	            		rset.getString(1)+"</a></p></td>");
            out.println("<td width=50><p align=center>"+
		       			"<a href='oneviewDB.jsp?studentid="+Integer.toString(rset.getInt(2))+"'>"+
		         		Integer.toString(rset.getInt(2))+"</a></p></td>");
            out.println("<td width=50><p align=center>"+Integer.toString(rset.getInt(3))+"</p></td>");
            out.println("<td width=50><p align=center>"+Integer.toString(rset.getInt(4))+"</p></td>");
            out.println("<td width=50><p align=center>"+Integer.toString(rset.getInt(5))+"</p></td>");
            out.println("<tr>");
    } 
	//연결 닫기
	rset.close(); 
	stmt.close();
	conn.close();
//예외 처리 
} catch(Exception e) {
        out.println("데이터 전체 조회 중 에러발생."+e);
}
%>
</body>
</html>

 

 

7.  특정 데이터 조회 페이지(oneviewDB.jsp)

 

전체 성적 데이터 조회

 

왜 Statement 대신 preparedStatement 사용하는가?

Statement의 경우 사용자의 쿼리문 입력값이 그대로 드러나기 때문에 보안에 취약하다
preparedStatement 는 쿼리문 값을 입력하는 란에 ?로 처리 하기 때문에 쿼리문의 형태가 바뀌지 않아 보안에 유리하다

 

<oneviewDB.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*,javax.sql.*,java.io.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>조회</h3>
<hr>
<%
//studentid 파라메터 값 가져와서 변수에 담음
int studentid = Integer.parseInt(request.getParameter("studentid"));
try {
	//커넥터 드라이버 읽기
	//커넥터 버전에 따라 아래 문구가 약간의 차이가 있다. 
	Class.forName("com.mysql.cj.jdbc.Driver");
	//커넥션 객체 생성
	//내 DB서버의 아이피와 사용 DB를 적고, 사용하는 Mysql 계정과 비밀번호를 적는다.
	//						             아이피	  DB	 아이디	 비밀번호 
	Connection conn= DriverManager.getConnection("jdbc:mysql://192.168.56.1/kopo", "kopo15", "Qwer1234!!");
	//preparedstatement 객체에 sql문을 담음
    PreparedStatement ps=conn.prepareStatement("select * from examtable where studentid=?");
	//studentid변수를 sql문에 설정
    ps.setInt(1,studentid);
	//resultset에 결과 저장
    ResultSet rset=ps.executeQuery();  
%>
	<!-- 테이블 생성 -->
	<table cellspacing=1 width=600 border=1>
		<tr>
			<td width=50><p align=center>이름</p></td>
			<td width=50><p align=center>학번</p></td>
			<td width=50><p align=center>국어</p></td>
			<td width=50><p align=center>영어</p></td>
			<td width=50><p align=center>수학</p></td>
		</tr>
<%    
	//rset에 담겼던 결과를 getter메소드 사용해서 한줄씩 출력 
    while (rset.next()) { 
            out.println("<tr>");
            out.println("<td width=50><p align=center>"+rset.getString(1)+"</p></td>");
            out.println("<td width=50><p align=center>"+Integer.toString(rset.getInt(2))+"</p></td>");
            out.println("<td width=50><p align=center>"+Integer.toString(rset.getInt(3))+"</p></td>");
            out.println("<td width=50><p align=center>"+Integer.toString(rset.getInt(4))+"</p></td>");
            out.println("<td width=50><p align=center>"+Integer.toString(rset.getInt(5))+"</p></td>");
            out.println("<tr>");
    } 
	//연결 닫기
	rset.close(); 
	ps.close();
	conn.close();
//예외처리
} catch(Exception e) {
        out.println("데이터 조회 중 에러발생."+e);
}
%>
</body>
</html>

실행 결과

 

 

 

 

 

 

 

참고 사이트

https://oper6210.tistory.com/157

 

Statement 대신 preparedStatement 사용하는 이유

이유는 Statement 객체에서 사용한 createStatement()라는 메소드 때문입니다. 이것을 사용할 경우 사용자의 입력 값을 미리 만들어 놓은 sql문에 적용한 후 컴파일을 하기 때문에 사용자의 입력 값에 따라 쿼리문..

oper6210.tistory.com

'Spring Framework' 카테고리의 다른 글

스프링 프로젝트 WAR파일로 배포하기  (0) 2020.03.16
간단한 성적 처리 웹 페이지 생성하기2 (Repository 구현)  (0) 2020.03.16
Spring 다운, 설치, 한글 설정(UTF-8)  (0) 2020.03.16
Spring FrameWork 에서 CSS파일 JS파일 가져오기가 안될 때  (2) 2020.02.12
IOC container, DIP, DI Framework  (1) 2020.02.11
'Spring Framework' Related Articles more
Comments