각진 세상에 둥근 춤을 추자
[JSP] JAVA JSON user 관리 프로그램 - 리스트 본문
Ajax를 이용해서 user 목록을 관리하는 프로그램을 구현해 본다.
데이터는 Sequel Pro에서 작성하여 불러온다.
1. Eclipse - user2 폴더 생성 - data 폴더, js폴더 생성
jsp파일과 js파일을 나누어 생성한다.
2. list.js (데이터 요청)
/**
*
*/
function list(){
$(function(){
$('section').empty();
$('nav').empty().append("<h4>user2 목록</h4><a href='#' id='userAdd'>user2 등록</a>");
$.get('./data/list.jsp', function(data){
let table = "<table border='1'>";
table += "<tr>";
table += "<th>아이디</th>";
table += "<th>이름</th>";
table += "<th>휴대폰</th>";
table += "<th>나이</th>";
table += "<th>관리</th>";
table += "</tr>";
table += "</table>";
$('section').append(table);
for(let user of data){
let tr = "<tr>";
tr += "<td>"+user.uid+"</td>";
tr += "<td>"+user.name+"</td>";
tr += "<td>"+user.hp+"</td>";
tr += "<td>"+user.age+"</td>";
tr += "<td>";
tr += "<a href='#'>수정</a>";
tr += "<a href='#'>삭제</a>";
tr += "</td>";
tr += "</tr>";
$('table').append(tr);
}
});
});
}
3. list.jsp (데이터베이스 연결)
<%@page import="com.google.gson.Gson"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="bean.UserBean"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page import="config.DBCP"%>
<%@ page contentType="application/json;charset=UTF-8" pageEncoding="UTF-8"%>
<%
List<UserBean> users = new ArrayList<>();
try{
Connection conn = DBCP.getConnection();
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("select * from `user2`");
while(rs.next()){
UserBean ub = new UserBean();
ub.setUid(rs.getString(1));
ub.setName(rs.getString(2));
ub.setHp(rs.getString(3));
ub.setAge(rs.getInt(4));
users.add(ub);
}
rs.close();
stmt.close();
conn.close();
}catch(Exception e){
e.printStackTrace();
}
Gson gson = new Gson();
String jsonData = gson.toJson(users);
out.print(jsonData);
%>
이때 쓰인 UserBean 코드는 다음과 같다.
package bean;
public class UserBean {
private String uid;
private String name;
private String hp;
private int age;
public String getUid() {
return uid;
}
public void setUid(String uid) {
this.uid = uid;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getHp() {
return hp;
}
public void setHp(String hp) {
this.hp = hp;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
이때 쓰인 DBCP.java 코드는 다음과 같다.
package config;
import java.sql.Connection;
import java.sql.SQLException;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.sql.DataSource;
public class DBCP {
private static DataSource ds = null;
public static Connection getConnection() throws NamingException, SQLException {
if(ds == null) {
ds = (DataSource) new InitialContext().lookup("java:comp/env/dbcp_java2db");
}
return ds.getConnection();
}
}
코드에 쓰인 Gson 라이브러리를 쓰기 위해서는 구글에 maven을 검색한다.
Gson 최신 버전 Jar Files을 다운로드한다.
4. manager.jsp
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>user2 manager</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="./js/list.js"></script>
<script src="./js/register.js"></script>
<script>
$(document).ready(function(){
// user2 목록 불러오기
list();
// user2 목록 화면
$(document).on('click', '#userList', function(e){
e.preventDefault();
list();
});
});
</script>
</head>
<body>
<h3>user2 관리자</h3>
<nav></nav>
<section></section>
</body>
</html>
'JSP' 카테고리의 다른 글
| [JSP] Eclipse - Servlet 1: 프로그램 (0) | 2022.10.23 |
|---|---|
| [JSP] JAVA JSON user 관리 프로그램 - 등록 (0) | 2022.10.23 |
| [JSP] JAVA JSON (0) | 2022.10.23 |
| [JSP] 프로젝트 실습 - 게시판 만들기 4 (회원가입 화면 설계) (0) | 2022.10.23 |
| [JSP] 프로젝트 실습 - 게시판 만들기 3 (약관 화면 설계) (0) | 2022.10.21 |
'JSP' Related Articles
more
