Web DB 연동 수업내용(JQUERY-1회차)

Web/JSP국비지원 수업 정리

깝몬 2023. 6. 29. 19:46

데이터 모델링

※데이터 모델링의 순서

개념적 모델링 > 논리적 모델링 > 물리적 모델링

정보처리기사에서도 자주 나오는 질문이니 확실히 숙지하자

https://aquerytool.com/

AQueryTool

AQueryTool은 웹 기반 ERD 툴 + SQL 자동 생성 프로그램입니다.

aquerytool.com

해당사이트를 이용하여 테이블 5개 짜리 DB를 먼저 제작했다.

MYSQL로 DB구축하기

웹프로젝트는 MYSQL에서 진행하겠다.

1.설치

https://dev.mysql.com/downloads/installer/

MySQL :: Download MySQL Installer

Select Operating System: Select Operating System… Microsoft Windows Select OS Version: All Windows (x86, 32-bit) Windows (x86, 32-bit), MSI Installer 8.0.33 2.4M (mysql-installer-web-community-8.0.33.0.msi) MD5: 2a330cf24915964cca87e04dbb34e5d3 | Signatu

dev.mysql.com

이 페이지에서 다운로드 받아 설치했으며

중간과정에 내 컴퓨터의 이름 / 주소 등에 한글이 있을 경우 설치에 오류가 생기므로 조심하자.

※알아두면 좋은것

1. MYSQL은 WORKBENCH를 통해서 작업하면 CHARACTER SET을 알아서 정해주기때문에 편리하다.

2. TABLE이나 DATABASE생성문법이 ORACLE과 다른점, 그리고 신경써야할 점이 많으므로 조심해서 보자.

3. ORACLE과의 JDBC연동과 다르기때문에 정확히 익혀두자.

1-1. MYSQL의 JDBC를 ECLIPSE에 넣어주자.

https://dev.mysql.com/downloads/connector/j/

MySQL :: Download Connector/J

MySQL Connector/J 8.0 is highly recommended for use with MySQL Server 8.0, 5.7 and 5.6. Please upgrade to MySQL Connector/J 8.0.

dev.mysql.com

이곳에 가서

PLATFORM INDEPENDENT를 골라서(꼭골라야한다!)

이 압축파일에서

mysql-connector-j-8.033.jar를 가져와서 WEB-INF의 LIB(라이브러리)에 넣어주면 사용할 준비가 끝난다.

2. 쿼리문 입력

MYSQL은 ORACLE과 구조적으로 크게 다르지 않고 일부 함수들만 다르므로 구분해서 사용하면 되기에 다르게 사용되는 몇가지만 알아두면된다.

(1) LIMIT

SELECT * FROM TABLE명
LIMIT A,B;

이와 같이 사용할때 A는 시작하는 번호(0에서부터 시작) , B는 그 개수이다.

(2) 데이터베이스, 유저생성, 권한부여(ORACLE과 다르고 확실히 숙지해야할부분)

데이터베이스 생성

문법

create database 데이터베이스명 default characterset utf8;

데이터베이스 조회

문법

show databases;

유저생성

-- 유저생성 및 권한부여
-- create user  '유저명'@'호스트' identified by '비밀번호';
-- grant 권한들~~~~ on '데이터베이스명' TO '유저명'@'호스트';
create user  'jspexam'@'localhost' identified by '1234';
-- 호스트가 localhost 인경우
grant all privileges on chap14.* to 'jspexam'@'localhost';
-- 호스트가 모든사람인경우 %를 입력
grant all privileges on chap14.* to 'jspexam'@'%';

데이터삽입

INSERT INTO MEMBER(MEMBERID, PASSWORD, NAME, EMAIL)
VALUES('CCCC', 'C1234', 'CHO', 'WHWND5993@NAVER.COM');

이와 같은 것들을 숙지하고 이제 드디어 웹페이지와 DB를 연동해보자!

DB의 정보를 조회하는 JSP페이지 제작

※이전의 DAO DTO 제작할때의 커넥션 과정을 기억해보자.

1. JDBC DRIVER에서 클래스를 동적으로 로드

2. DB에 접근하기위한 String타입 주소,ID,PW를 parameter로 Connection 객체 획득

3. Connection 을 이용하여 Statement / RrepareStatement 객체 획득

4. Statement / RrepareStatement 객체를 execute하는 메서드를 통해 ResultSet 객체 획득

5. ResultSet 에서 값들을 추출하여 입력한다.

이것을 이용하여 회원의 id나 번호중 하나로 검색하는 jsp페이지를 만들면

1. 보이는 화면

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import = "java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>회원의 목록</title>
</head>
<body>
<h1>제목이야</h1>
<table border="4">
	<thead>
	<tr>
		<th>번호</th>	
		<th>memberid</th>	
		<th>password</th>	
		<th>name</th>	
		<th>email</th>	
	</tr> </thead>
	<tbody>
	<!-- 회원수만큼 tr요소가 반복 : 반복문을 사용하자 -->
	<%--반복분시작 --%>
	<%
	// 커넥션 시작
	Class.forName("com.mysql.jdbc.Driver");
	String url = "jdbc:mysql://localhost:3306/chap14?useUnicode=true&characterEncoding=utf8";
	String user = "jspexam";
	String password = "1234";
	String searchwhat = request.getParameter("searchwhat");
	String query="";
	Connection conn = DriverManager.getConnection(url, user, password);
	PreparedStatement stmt = null;
	if(searchwhat.equals("getnumber")){ 
		query = "select * from MEMBER WHERE NO=?";
		String number = request.getParameter("getnumber");	
		int number2 = Integer.parseInt(number);
		stmt = conn.prepareStatement(query);
		stmt.setInt(1, number2);
	}
	else if(searchwhat.equals("getid")){ 
		query = "select * from MEMBER WHERE MEMBERID=?";
		String memberid = request.getParameter("getid");
		stmt = conn.prepareStatement(query);
		stmt.setString(1, memberid);
	}
	ResultSet rs = stmt.executeQuery();
	//커넥션 끝
	try{
		while(rs.next()){
			int no = rs.getInt("no");
			String userid = rs.getString("memberid");
			String userpw = rs.getString("password");
			String username = rs.getString("name");
			String userem = rs.getString("email");
		%><tr>
			<td><%=no %></td>
			<td><%=userid %></td>
			<td><%=userpw %></td>
			<td><%=username %></td>
			<td><%=userem %></td>
		</tr>
		<%			
			System.out.println(no+"\t"+userid+"\t\t"+userpw+"\t\t"+username+"\t\t"+userem);
		}
	}catch(SQLException e1){
		e1.printStackTrace();
	}
%>	
	<%--반복문끝   --%>
	</tbody>
</table>
</body>
</html>

2. 출력되는 화면

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import = "java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>회원의 목록</title>
</head>
<body>
<h1>제목이야</h1>
<table border="4">
	<thead>
	<tr>
		<th>번호</th>	
		<th>memberid</th>	
		<th>password</th>	
		<th>name</th>	
		<th>email</th>	
	</tr> </thead>
	<tbody>
	<!-- 회원수만큼 tr요소가 반복 : 반복문을 사용하자 -->
	<%--반복분시작 --%>
	<%
	// 커넥션 시작
	Class.forName("com.mysql.jdbc.Driver");
	String url = "jdbc:mysql://localhost:3306/chap14?useUnicode=true&characterEncoding=utf8";
	String user = "jspexam";
	String password = "1234";
	String searchwhat = request.getParameter("searchwhat");
	String query="";
	Connection conn = DriverManager.getConnection(url, user, password);
	PreparedStatement stmt = null;
	if(searchwhat.equals("getnumber")){ 
		query = "select * from MEMBER WHERE NO=?";
		String number = request.getParameter("getnumber");	
		int number2 = Integer.parseInt(number);
		stmt = conn.prepareStatement(query);
		stmt.setInt(1, number2);
	}
	else if(searchwhat.equals("getid")){ 
		query = "select * from MEMBER WHERE MEMBERID=?";
		String memberid = request.getParameter("getid");
		stmt = conn.prepareStatement(query);
		stmt.setString(1, memberid);
	}
	ResultSet rs = stmt.executeQuery();
	//커넥션 끝
	try{
		while(rs.next()){
			int no = rs.getInt("no");
			String userid = rs.getString("memberid");
			String userpw = rs.getString("password");
			String username = rs.getString("name");
			String userem = rs.getString("email");
		%><tr>
			<td><%=no %></td>
			<td><%=userid %></td>
			<td><%=userpw %></td>
			<td><%=username %></td>
			<td><%=userem %></td>
		</tr>
		<%			
			System.out.println(no+"\t"+userid+"\t\t"+userpw+"\t\t"+username+"\t\t"+userem);
		}
	}catch(SQLException e1){
		e1.printStackTrace();
	}
%>	
	<%--반복문끝   --%>
	</tbody>
</table>
</body>
</html>

구현된 기능

데이터의제출

데이터의 유효성 검사 후 제출이다. 유효성검사후 일치하지 않으면 해당 input의 자리를 비운뒤 focus

JQUERY

JQUERY란?

HTML의 스크립팅을 가볍게 만들어주기 위해 만들어진 크로스플랫폼 자바스크립트 라이브러리이다.

JQUERY 불러오기

JQUERY는 기본적으로 장착되어있는 기능이 아니기때문에 우리가 JSP파일에서 사용 할 것이라고 명시 후 사용해주어야한다.

방법1

<head>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>

방법2

jquery문을 jquery 사이트에서 min.map과 함께 다운받아 js폴더에 넣어주고

<head>
<script src="../js/jquery-3.7.0.min.js"></script>
</head>

이렇게 작성해주면 이제 본문에서 JQUERY를 인식한다.

JQUERY문 사용하기

JQUERY문은 SCRIPT절 내에서 사용되기때문에 HEAD절에 JQUERY구문을 넣게된다.

예시

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script>
$(document).ready(function(){
	$("a").click(function(){
		$("div").fadeToggle("fast");
})});
</script>
</head>
<body>
<a>누를까</a>
<div>우오옷</div>
</body>
</html>

※이러한 방식을 사용하여 jquery를 통하여 텍스트의 크기를 줄이거나 감소하는jsp코드를 짤 수 있다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script>
$(document).ready(function(){
	$(function(){
		$("#szdn").click(function(){
			let ftsz = parseInt($("#t1").css("font-size"));
			ftsz-=1;
			$("#t1").css("font-size",ftsz+"px");
		});
	});	
	
	$(function(){
		$("#szup").click(function(){
			let ftsz = parseInt($("#t1").css("font-size"));
			ftsz+=1;
			$("#t1").css("font-size",ftsz+"px");
		});
	});
});
</script>
</head>
<body>
<h1>퀘스트</h1>
<a style="font-size: 25px;" id="t1">변화를 주어요</a>
<hr>
<button type="button" id="szup" onclick="sizeup()">사이즈 업</button>
<button type="button" id="szdn">사이즈 다운</button>
</body>
</html>

※unordered list에 내용을 추가하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script>
$(document).ready(function(){
	$(function(){
		$("#btn1").click(function(){
			let getin = $("#input").val();
			$("#list1").append("<li>"+getin+"</li>");
			$("#input").val("");
		});
	});
});
</script>
</head>
<body>
<h2>표에 내용을 추가해보겠습니다.</h2>
<form id="r1">
	내용을 입력해주세요 : <input type="text" id="input">
</form>
<button type="button" id="btn1">내용에 추가할래요</button>
<ul id="list1">
	<li>이것은 시작</li>
</ul>
</body>
</html>

'Web > JSP국비지원 수업 정리' 카테고리의 다른 글

Web 수업(servlet ) (0)	2023.07.03
Web 수업(JQUERY사용법 / HTML를 쓰는 뼈대 / CSS를 통한 동적 활용) (0)	2023.06.30
Web 6일차 수업내용(javascript이어서 + jquery) (0)	2023.06.26
Web 5일차 수업내용(form / input / javascript function / js로 유효성 검사) (0)	2023.06.23
Web 4일차 수업내용 (폼만들기, input, javascript 살짝) (0)	2023.06.22

현재글Web DB 연동 수업내용(JQUERY-1회차)

코딩, 프로그래머스 스쿨 코딩테스트, FROM DUAL, 풀이정리, 코딩테스트, 자동차 대여 기록에서 대여중 / 대여 가능 여부 구분, 사운드플레이어, 동적인음악플레이어, replace 메서드, 프로그래머스 스쿨, oracledb, string으로 적힌 숫자끼리의 뺄셈, 초보용 무한스크롤, 다항식 더하기, JOIN 사용법, Spring에러처리, 이상한문자열만들기, 프로그래머스스쿨코테, 프로그래머스스쿨 코딩테스트, 오라클코테,

Today :
Yesterday :

log my life

데이터 모델링

MYSQL로 DB구축하기

1.설치

1-1. MYSQL의 JDBC를 ECLIPSE에 넣어주자.

2. 쿼리문 입력

DB의 정보를 조회하는 JSP페이지 제작

JQUERY

JQUERY란?

JQUERY 불러오기

JQUERY문 사용하기

'Web > JSP국비지원 수업 정리' 카테고리의 다른 글

'Web/JSP국비지원 수업 정리'의 다른글

티스토리툴바

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

데이터 모델링

MYSQL로 DB구축하기

1.설치

1-1. MYSQL의 JDBC를 ECLIPSE에 넣어주자.

2. 쿼리문 입력

DB의 정보를 조회하는 JSP페이지 제작

JQUERY

JQUERY란?

JQUERY 불러오기

JQUERY문 사용하기

'Web > JSP국비지원 수업 정리' 카테고리의 다른 글

'Web/JSP국비지원 수업 정리'의 다른글

관련글

티스토리툴바