[JSP] 주소록 페이지 구현하기

보람·2023년 3월 27일
0

JSP

목록 보기
15/17

예제 만들기

  • MemberBean.java : 회원 정보를 저장하기 위한 자바클래스
package com.codingbox.vo;

public class MemberBean {

	private String userid;
	private String userpw;
	private String username;
	private String userphone;
	private String zipcode;
	private String addr;
	private String addrdetail;
	private String addrdetc;
	
	public String getZipcode() {
		return zipcode;
	}
	public void setZipcode(String zipcode) {
		this.zipcode = zipcode;
	}
	public String getAddr() {
		return addr;
	}
	public void setAddr(String addr) {
		this.addr = addr;
	}
	public String getAddrdetail() {
		return addrdetail;
	}
	public void setAddrdetail(String addrdetail) {
		this.addrdetail = addrdetail;
	}
	public String getAddrdetc() {
		return addrdetc;
	}
	public void setAddrdetc(String addrdetc) {
		this.addrdetc = addrdetc;
	}
	public String getUserid() {
		return userid;
	}
	public void setUserid(String userid) {
		this.userid = userid;
	}
	public String getUserpw() {
		return userpw;
	}
	public void setUserpw(String userpw) {
		this.userpw = userpw;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getUserphone() {
		return userphone;
	}
	public void setUserphone(String userphone) {
		this.userphone = userphone;
	}		
}
  • searchview.jsp : 프론트단 화면 구현
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
// jstl 사용 선언
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="search_db.jsp">
    // submit 누르면 search_db.jsp로 넘어감
		검색하실 회원 ID <input type="text" name="userid"><br>
		<input type="button" value="전체 회원 보기" onclick="location.href='list_db.jsp'">
        // list_db.jsp를 부르는 버튼
		<input type="submit" value="검색">
	</form>
	<hr>
	<table border = "1">
		<tr>
			<th>아이디</th>
			<th>비밀번호</th>
			<th>이름</th>
			<th>휴대전화</th>
			<th>상세주소</th>
		</tr>
		<c:choose>
			<c:when test="${!empty requestScope.user }">
            // requestscope에 존재하는 user라는 이름의 변수가 비어있지 않을 때
				<c:set var="user" value="${requestScope.user }"/>
                //requestscope에 존재하는 user라는 이름의 변수를 user에 담을 것
          
			
				<tr>
					<td>${user.userid }</td>
					<td>${user.userpw }</td>
					<td>${user.username }</td>
					<td>${user.userphone }</td>
					<td>${user.addr }</td>				
				</tr>
			// user에 담긴 각각의 속성값 출력
			</c:when>
			<c:otherwise>
            // request 스코프에 user 변수가 없거나 null인 경우 => 즉, 전체화면 보기 클릭했을 경우 
            // 검색어 없이 검색을 누르면 search_db.jsp발동 -> 무응답 -> requestScope.list가 비어 있어서 결과가 보이지 않게 됨
            // 전체 회원 보기 누르면 "list_db.jsp발동"
				<c:forEach var="user" items="${requestScope.list }">
                // requestScope.list에 저장된 사용자 정보를 출력
                // user : requestScope.list에 저장된 컬렉션을 반복하면서 각 요소를 user 변수에 할당
					<tr>
						<td>${user.userid }</td>
						<td>${user.userpw }</td>
						<td>${user.username }</td>
						<td>${user.userphone }</td>
						<td>${user.addr }</td>						
					</tr>
				</c:forEach>
			</c:otherwise>
		</c:choose>
	</table>
</body>
</html>
  • MemberDao.java : 데이터베이스에 접근하여 데이터를 가져오거나 쓰기 위한 객체
package com.codingbox.dao;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import com.codingbox.mybatis.SqlMapConfig;
import com.codingbox.vo.MemberBean;

public class MemberDao {
	SqlSessionFactory factory = SqlMapConfig.getFactory();
	SqlSession sqlSession;
	
	public MemberDao() {
		sqlSession = factory.openSession(true);
	}
	
	public MemberBean searchById(String userid) {
    	// sqlSession은 object객체 -> 사용할 형식으로 형변환 
		return (MemberBean)sqlSession.selectOne("Member.searchById", userid);
	}
	
    // 한 회원의 정보 = MemberBean형태
    // 여러 회원의 정보 = ArrayList형태
    
	public List<MemberBean> getList(){
    						// sqlSession.selectList는 ArrayList를 반환
		List<MemberBean> result = sqlSession.selectList("Member.getList");
		
		return result;
	}
}
**🙆‍♀️ 알아두기**
- List와 ArrayList는 서로 다른 것이지만, ArrayList는 List의 구현 클래스 중 하나
- List는 인터페이스이며, ArrayList는 List를 구현한 클래스 중 하나
- ArrayList로 바꿔서 사용해도 똑같지만 List 인터페이스를 구현하는 클래스를 사용하는 것이 좋음
- 다형성 활용 가능,코드의 유연성이 높아지며, 유지보수가 용이
- 자바에서 다형성 : 상속, 인터페이스, 오버로딩, 오버라이딩 등의 개념을 활용하여 구현
- 즉, 하나의 객체가 여러 가지 형태를 가질 수 있다
  • member.xml : MyBatis 이용 (sql문을 xml 파일에 저장)
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="Member">
// mapper namespace : xml 파일명
	<select id="searchById" parameterType="string" resultType="com.codingbox.vo.MemberBean">
    // select id="searchById" : 클래스 이름
			SELECT * FROM TBL_MEMBER tm WHERE USERID = #{userid}
	</select>
		
	<select id = "getList" resultType="com.codingbox.vo.MemberBean">
    // list 형태 : 파라미터 타입 필요 없음
			SELECT * FROM TBL_MEMBER 
	</select>
</mapper>
  • search_db.jsp
<%@page import="com.codingbox.vo.MemberBean"%>
<%@page import="com.codingbox.dao.MemberDao"%>
<%@ 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>
</head>
<body>
	<%
		String userid = request.getParameter("userid");
        // getParameter로 넘어온 "userid"를 변수 userid에
		MemberDao udao = new MemberDao();
        // MemberDao 객체 생성
		MemberBean user = udao.searchById(userid);
        // MemberDao에 있는 메소드 searchById(userid)의 값을 memberbean의 객체로 
		request.setAttribute("user", user);
        // 이 user 객체를 "user" 이름으로 셋팅 -> 나중에 searchview에 가져감
		pageContext.forward("searchview.jsp");
        // searchview로 데이터를 전달하면서 화면이동 
        // 주소값 : search_db.jsp?userid= 로 변경
	%>
</body>
</html>
  • list_db.jsp
<%@page import="com.codingbox.vo.MemberBean"%>
<%@page import="com.codingbox.dao.MemberDao"%>
<%@ 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>
</head>
<body>
	<%
		MemberDao mdao = new MemberDao();
        // MemberDao 객체 생성
		request.setAttribute("list", mdao.getList());
        // MemberDao 메소드 getList 호출로 가져온 정보를 list에 담아
		pageContext.forward("searchview.jsp");
		 // searchview로 데이터를 전달하면서 화면이동 
	%>
</body>
</html>
profile
안녕하세요, 한보람입니다.

0개의 댓글