「JSP/サーブレット」DBとともに会員加入/会員リストページを作成


  • dbと共にサーブレットを使用して会員/会員リストを作成!
  • JSP(view)

  • Memberjoin.jsp:会員登録ページ
  • MemberList.jsp:会員リストページ
  • LoginError.jsp:会員登録エラーページ
  • Java(model)

  • ModelBean.java : DTO - getter, setter
  • ModelDAO.JAva:DAO-dbバインド、コアメソッド
  • を作成

    Servlet(Controller)

  • joinProc.JAva:処理
  • MemberListLoc.JAva:全メンバーリスト
  • の処理

    実装目標

  • 会員加入表
  • 会員リスト
  • SQL合成(Oracle)

  • メンバー情報を格納するデータベース・テーブルを作成します.
  • CREATE TABLE SYS.MEMBER_PRAC(
    	ID VARCHAR(30) PRIMARY KEY,
    	PASS1 VARCHAR(20),
    	EMAIL VARCHAR(30),
    	TEL VARCHAR(20),
    	HOBBY VARCHAR(20),
    	JOB VARCHAR(20),
    	AGE VARCHAR(10),
    	INFO VARCHAR(500)
    )
  • 結果(SELECT*FROM SYS.MEMBER PRAC)

  • model/ModelBean.java


    作成
  • DTO(dbとJavaデータを交換)
  • package model;
    
    public class ModelBean {
    	private String id;
    	private String pass1;
    	private String email;
    	private String tel;
    	private String hobby;
    	private String job;
    	private String age;
    	public String getId() {
    		return id;
    	}
    	public void setId(String id) {
    		this.id = id;
    	}
    	public String getPass1() {
    		return pass1;
    	}
    	public void setPass1(String pass1) {
    		this.pass1 = pass1;
    	}
    	public String getEmail() {
    		return email;
    	}
    	public void setEmail(String email) {
    		this.email = email;
    	}
    	public String getTel() {
    		return tel;
    	}
    	public void setTel(String tel) {
    		this.tel = tel;
    	}
    	public String getHobby() {
    		return hobby;
    	}
    	public void setHobby(String hobby) {
    		this.hobby = hobby;
    	}
    	public String getJob() {
    		return job;
    	}
    	public void setJob(String job) {
    		this.job = job;
    	}
    	public String getAge() {
    		return age;
    	}
    	public void setAge(String age) {
    		this.age = age;
    	}
    	public String getInfo() {
    		return info;
    	}
    	public void setInfo(String info) {
    		this.info = info;
    	}
    	private String info;
    }

    model/ModelDAO.java

  • 接続プールを使用してDBバインド方法を作成
    接続プールの使用方法
  • MemberInsert()メソッドを作成し、
  • dbにユーザ入力データ
  • を追加する
  • すべてのユーザ情報を表示するためのgetAllList()メソッド
  • を作成する.
    package model;
    
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.util.ArrayList;
    import javax.naming.Context;
    import javax.naming.InitialContext;
    import javax.sql.DataSource;
    
    public class ModelDAO {
    	PreparedStatement pstmt;
    	ResultSet rs;
    	Connection con;
    	
    	public void getCon() {
    		//db연동코드, Connection Pool 사용
    		try {
    			Context initctx = new InitialContext();
    			Context envctx = (Context) initctx.lookup("java:comp/env");
    			DataSource dsc = (DataSource) envctx.lookup("jdbc/pool");
    			con = dsc.getConnection();
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    	}//getCon end
    	public void MemberInsert(ModelBean bean) {
    		getCon();
    		try {  //sql문
    			String sql = "insert into MEMBER_PRAC values(?,?,?,?,?,?,?,?)";
    			pstmt = con.prepareStatement(sql);
    			pstmt.setString(1, bean.getId());
    			pstmt.setString(2, bean.getPass1());
    			pstmt.setString(3, bean.getEmail());
    			pstmt.setString(4, bean.getTel());
    			pstmt.setString(5, bean.getHobby());
    			pstmt.setString(6, bean.getJob());
    			pstmt.setString(7, bean.getAge());
    			pstmt.setString(8, bean.getInfo());
    			pstmt.executeUpdate();
    			con.close();
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    	}//MemberInsert end
    	public ArrayList<ModelBean> getAllList(){
    		ArrayList<ModelBean> list = new ArrayList<>();
    		getCon();
    		try { //sql문
    			String sql = "select * from MEMBER_PRAC";
    			pstmt = con.prepareStatement(sql);
    			rs = pstmt.executeQuery();
    			while(rs.next()) {
    				ModelBean bean = new ModelBean();
    				bean.setId(rs.getString(1));
    				bean.setPass1(rs.getString(2));
    				bean.setEmail(rs.getString(3));
    				bean.setTel(rs.getString(4));
    				bean.setHobby(rs.getString(5));
    				bean.setJob(rs.getString(6));
    				bean.setAge(rs.getString(7));
    				bean.setInfo(rs.getString(8));
    				list.add(bean);
    			}
    			con.close();
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		return list;
    	}
    }

    controller/JoinProc.java

  • 会員の入金を処理します.
  • 会員の場合に入力パスワード1、パスワード2が正しい場合は会員入力
  • package controller;
    
    import java.io.IOException;
    import javax.servlet.RequestDispatcher;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import model.ModelBean;
    import model.ModelDAO;
    
    @WebServlet("/JoinProc")
    public class JoinProc extends HttpServlet {
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doReq(request, response);
    	}
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doReq(request, response);
    	}	
    	protected void doReq(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		
    		request.setCharacterEncoding("UTF-8");
    		ModelBean bean = new ModelBean();
    		ModelDAO mdao = new ModelDAO();
    		//폼에 입력한 정보를 갖고옴.
    
    		bean.setId(request.getParameter("id"));
      		//패스워드, 패스워드확인을 비교하기 위해 변수에 저장.
    		String pass1 = request.getParameter("password");
    		String pass2 = request.getParameter("password2");
    		bean.setPass1(pass1);
    		bean.setEmail(request.getParameter("email"));
    		bean.setTel(request.getParameter("tel"));
    		//hobby는 여러개의 값이라서 배열로 갖고옴.
    		String[] hobbies = request.getParameterValues("hobby");
    		String item = "";
    		for(int i=0;i<hobbies.length;i++) {
    			item += hobbies[i]+" "; //하나의 스트링으로 데이터 연결
    		}
    		bean.setHobby(item);
    		bean.setJob(request.getParameter("job"));
    		bean.setAge(request.getParameter("age"));
    		bean.setInfo(request.getParameter("info"));
    		
    		if(pass1.equals(pass2)) { //패스워드, 패스워드 확인이 일치할 경우
    			mdao.MemberInsert(bean);
    			//컨트롤러에서 또다른 컨트롤러를 호출
    			RequestDispatcher rdis = request.getRequestDispatcher("MemberListLoc");
    			rdis.forward(request, response);
    		}else {
    			RequestDispatcher rdis = request.getRequestDispatcher("LoginError.jsp");
    			rdis.forward(request, response);
    	
    		}
    	}
    }

    controller/MemberListLoc.java

  • すべての会員リスト
  • を処理する
    package controller;
    
    import java.io.IOException;
    import java.util.ArrayList;
    import javax.servlet.RequestDispatcher;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import model.ModelBean;
    import model.ModelDAO;
    
    @WebServlet("/MemberListLoc")
    public class MemberListLoc extends HttpServlet {
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doReq(request, response);
    	}
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doReq(request, response);
    	}	
    	protected void doReq(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		//여기서 리스트에 띄어줄 DAO 호출
    		ModelDAO mdao = new ModelDAO();
    		//MemberList.jsp로 보낼 list를 셋팅해줌.
    		ArrayList<ModelBean> list = mdao.getAllList();
    		request.setAttribute("list", list);
    		RequestDispatcher rdis= request.getRequestDispatcher("MemberList.jsp");
    		rdis.forward(request, response);
    	}
    }

    Memberjoin.jsp

  • 会員入力フォーム
  • <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>
    <h2>회원가입</h2>
    <form method="post" action="JoinProc">
    <table border="1">
    	<tr height="50">
    		<td width="150" align="center">아이디</td>
    		<td width="250"  align="center"><input type="text" name="id"></td>
    	</tr>
    		<tr height="50">
    			<td width="150" align="center">패스워드</td>
    			<td width="250"  align="center"><input type="password" name="password"></td>
    	</tr>
    		<tr height="50">
    			<td width="150" align="center">패스워드확인</td>
    			<td width="250"  align="center"><input type="password" name="password2"></td>
    	</tr>
    		<tr height="50">
    			<td width="150" align="center">이메일</td>
    			<td width="200"  align="center"><input type="email" name="email"></td>
    	</tr>
    		<tr height="50">
    			<td width="150" align="center">전화번호</td>
    			<td width="250"  align="center"><input type="tel" name="tel"></td>
    	</tr>
    		<tr height="50">
    			<td width="150" align="center">관심 분야</td>
    			<td width="250"  align="center">
    				<input type="checkbox" name="hobby" value="음악">음악
    				<input type="checkbox" name="hobby" value="코딩">코딩
    				<input type="checkbox" name="hobby" value="영화">영화
    				<input type="checkbox" name="hobby" value="독서">독서</td>
    			</tr>
    		<tr height="50">
    			<td width="150" align="center">직업
    			<td width="250"  align="center">
    		<select name="job">
    			<option value="학생">학생</option>
    			<option value="직장인">직장인</option>
    			<option value="취준생">취준생</option>
    			<option value="먼지">먼지</option>
    		</select>
    	</td>
    	<tr height="50">
    			<td width="150" align="center">연령대</td>
    			<td width="250"  align="center">
    			<input type="radio" value="10대" name="age">10대	
    			<input type="radio" value="20대" name="age">20대	
    			<input type="radio" value="30대" name="age">30대
    			<input type="radio" value="40대" name="age">40대	</td>
    			</tr>
    		<tr height="50">
    			<td width="150" align="center">하고싶은말
    			<td width="250"  align="center">
    			<textarea rows="10" cols="25" name="info"></textarea>
    		</td>
    		<tr height="50">
    			<td colspan="2" width="150" align="center">
    			<input type="submit" value="회원 가입">	
    </table>
    </form>
    </body>
    </html>

  • 結果

    LoginError.jsp



  • 入力したパスワード1とパスワード2が一致しない場合は、エラーページに送信し、前のページに戻ります.
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>
    <script>
    	alert("비밀번호가 일치하지 않습니다.")
    	history.go(-1)
    </script>
    </body>
    </html>
  • MemberList.jsp

  • 全会員リストページ
  • <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>
    <h2>모든 회원보기</h2>
    <table border="1">
    	<tr height="50">
    		<td width="150" align="center">아이디</td>
    		<td width="200" align="center">이메일</td>
    		<td width="150" align="center">전화번호</td>
    		<td width="200" align="center">취미</td>
    		<td width="100" align="center">직업</td>
    		<td width="100" align="center">나이</td>
    	</tr>
    <c:forEach var="bean" items="${list }">
    	<tr height="50">
    		<td width="150" align="center">${bean.id}</td>
    		<td width="200" align="center">${bean.email}</td>
    		<td width="150" align="center">${bean.tel}</td>
    		<td width="200" align="center">${bean.hobby}</td>
    		<td width="100" align="center">${bean.job}</td>
    		<td width="100" align="center">${bean.age}</td>
    	</tr>
    </c:forEach>	
    
    </table>
    </body>
    </html>
  • 結果.会員加入時にパスワード、パスワードの確認が一致しないとalertウィンドウが表示されます.

  • 完全なコード結果


  • 会員加入表を正しく記入すると、会員名簿が表示されます.


  • リファレンス
    https://www.inflearn.com/course/jsp-%EC%9B%B9%EA%B0%9C%EB%B0%9C-mvc-model2-%EC%A4%91%EA%B8%89/dashboard