[Spring] ajax 실습

BACK-END/Spring

[Spring] ajax 실습

단비_danbee 2020. 12. 21. 16:24

[1] 데이터베이스 구축

MySQL 8.0 Command Line Client

CREATE DATABASE AJAX;

USE AJAX;

CREATE TABLE USER(
USERNAME VARCHAR(20),
USERAGE INT,
USERGENDER VARCHAR(20),
USEREMAIL VARCHAR(20)
);

INSERT INTO USER VALUES('오렌지',29,'남자','orange@naver.com');
INSERT INTO USER VALUES('박커피',27,'여자','coffee@naver.com');
INSERT INTO USER VALUES('김미국',30,'여자','america@naver.com');
INSERT INTO USER VALUES('이행복',22,'남자','happy@naver.com');
INSERT INTO USER VALUES('김블랙',25,'여자','black@naver.com');

[2] Dynamic Web Project 로 Ajax 프로젝트 생성하고 부트스트랩다운로드

getbootstrap.com/docs/5.0/getting-started/download/

압축 풀고 css, js 폴더 WebContent에 넣어주고 index.jsp 만들어주기

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.css">
	<title>JSP AJAX</title>
	<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="js/bootstrap.js"></script>
	
</head>
<body>
	<br>
	<div class="container">
		<div class="form-group row pull-right">
			<div class="col-xs-8">
				<input class="form-control" type="text" size="15">
			</div>
			<div class="col-xs-2">
				<button class="btn btn-primary" type="button">검색</button>
			</div>
			<table class="table" style="text-align: center; border:1px solid #dddddd">
				<thead>
					<tr>
						<th style="background-color:#fafafa; text-align:center;">이름</th>
						<th style="background-color:#fafafa; text-align:center;">나이</th>
						<th style="background-color:#fafafa; text-align:center;">성별</th>
						<th style="background-color:#fafafa; text-align:center;">이메일</th>
					</tr>
					<tr>
						<td>박단비</td>
						<td>26</td>
						<td>여자</td>
						<td>danbi@naver.com</td>
					</tr>
				</thead>
			</table>
		</div>
	</div>
</body>
</html>

[3] 데이터베이스에 생성한 컬럼명대로 DTO 만들어주기

package user;

public class User {
	private String userName;
	private int userAge;
	private String userGender;
	private String userEmail;
	
	
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public int getUserAge() {
		return userAge;
	}
	public void setUserAge(int userAge) {
		this.userAge = userAge;
	}
	public String getUserGender() {
		return userGender;
	}
	public void setUserGender(String userGender) {
		this.userGender = userGender;
	}
	public String getUserEmail() {
		return userEmail;
	}
	public void setUserEmail(String userEmail) {
		this.userEmail = userEmail;
	}
	
}

[4] 데이터베이스 연결 DAO 만들어주기

package user;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;


public class UserDAO {
	private Connection conn;
	private PreparedStatement pstmt;
	private ResultSet rs;
	
	// Ctrl + Shift + O 임포트
	
	public UserDAO() {
		try {
			String dbURL 		= "jdbc:mysql//localhost:3306/AJAX";
			String dbID			= "root";
			String dbPassword 	= "root";
			Class.forName("com.mysql.jdbc.Driver");
			conn = DriverManager.getConnection(dbURL, dbID, dbPassword);//.getConnection(dbURL, dbID, dbPassword);
		} catch(Exception e) {
			e.printStackTrace();
		}
	}//UserDAO end===================================================
	
	public ArrayList<User> search(String userName){
		String SQL = "SELECT * FROM USER WHERE userName LIKE ?";
		ArrayList<User> userList = new ArrayList<User>();
		try {
			pstmt = conn.prepareStatement(SQL);
			pstmt.setNString(1, userName);
			rs = pstmt.executeQuery();
			while(rs.next()) {
				User user = new User();
				user.setUserName(rs.getString(1));
				user.setUserAge(rs.getInt(2));
				user.setUserGender(rs.getString(3));
				user.setUserEmail(rs.getString(4));
				userList.add(user);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return userList;
	}// search end===================================================
	
}

[5] MySQL 커넥터 다운로드 받기

구글에 mysql-connector-java-5.1.4.jar 입력

로그인 하라는 페이지가 나오면 No thanks 를 눌러준다.

dev.mysql.com/downloads/connector/j/5.1.html

[6] 다운로드를 하면 mysql-installer-community-8.0.22.0.msi 이런 이름으로 확인 할 수 있다.

설치하는게 아니라 아까 만든 다이나믹 프로젝트 안의 lib 폴더에 드래그해서 넣어준다.

도움 되었던 다른 블로그 글

참고 1] myjamong.tistory.com/17

[Spring] 스프링 AJAX 여러유형 사용 예시 :: 마이자몽

AJAX(Asynchronous JavaScript and XML)은 여러 상황에서 사용되는데... 매번 사용할때마다 어떻게하는지 검색하고 애먹는경우가 많다. 그래서, 이 글만 보고 완벽하게 다시 사용할수 있도록 정리해볼려고

myjamong.tistory.com