본문 바로가기
자바/JSP기초(이클립스)

JSP 게시판 만들기 No2

초보개발자뀨 2021. 4. 9. 10:55

이번 글에서는 로그인과 회원가입 폼과 Controller를 구현해 보도록 하겠습니다.

 

우선 메인화면인 Login.jsp를 설계해보록 하겠습니다.

 

-설계

해당 프로젝트에선 View 즉 jsp파일은 WebContent 안에 WEB-INFO 안에 넣음 으로써 브라우저상에서 직접 접근 하지 못하게 했습니다. 때문에 View 접근은 Controller로 접근해야합니다.

 

-구현 서블릿

LoginController -> Login.jsp로 접근 할 수 있도록 하기 위한 컨트롤러

LoginTryController -> 로그인 버튼을 눌렀을 시 해당 서블릿으로 이동해 MemberDAO를 통해 입력한 아이디와 비밀번호를 비교해 로그인 성공 여부를 확인합니다.

 

-기능

LoginController에서 Login.jsp 접근 전에 DAO로 부터 아이디 목록을 불러와 JSP로 넘겨줘 아이디를 입력했을 떄 해당 아이디가 없음을 알려줍니다.

LoginTryController에서 로그인 실패 시 세션값을 넘겨주어 Login.jsp에서 해당 세션값이 있으면 로그인 실패 문구를 보여줍니다

 

MemberVO - DB안 Member테이블의 칼럼들을 다루기 위한 VO 입니다.

package member.model;

public class Member {
	private String mid ;
	private String mpassword ;
	private String mname ;
	private String memail;
	private String mphone ;
	
	public Member(String mid, String mpassword, String mname, String memail, String mphone) {
		super();
		this.mid = mid;
		this.mpassword = mpassword;
		this.mname = mname;
		this.memail = memail;
		this.mphone = mphone;
	}

	public String getMid() {
		return mid;
	}

	public void setMid(String mid) {
		this.mid = mid;
	}

	public String getMpassword() {
		return mpassword;
	}

	public void setMpassword(String mpassword) {
		this.mpassword = mpassword;
	}

	public String getMname() {
		return mname;
	}

	public void setMname(String mname) {
		this.mname = mname;
	}

	public String getMemail() {
		return memail;
	}

	public void setMemail(String memail) {
		this.memail = memail;
	}

	public String getMphone() {
		return mphone;
	}

	public void setMphone(String mphone) {
		this.mphone = mphone;
	}
	
	
	
}

MemberDAO - DB에 접근하여 Member 테이블의 내용을 다룰 클래스 입니다.

 

package member.model;

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

import javax.servlet.http.HttpSession;

public class MemberDAO {
	
	// 커넥션 가져오기
	private Connection getConnection() {
		
		String str = "jdbc:oracle:thin:@localhost:1521:orcl"; // 사무실 번지
		Connection con = null;
		try {
			Class.forName("oracle.jdbc.driver.OracleDriver");
			con = DriverManager.getConnection(str, "board", "b102030");
		} catch (SQLException | ClassNotFoundException e) {
			System.out.println("DB 연결 문제 입니다.");
		}
		return con;
	}
	
	// id 목록 가져오기
	
	public List<String> getmidList() {
		List<String>id_list = new ArrayList<String>();
		Connection con = getConnection();

		ResultSet rs;
		try {
			PreparedStatement pstmt = con.prepareStatement("select mid from member");
			rs = pstmt.executeQuery();
			while(rs.next()) {
				id_list.add(rs.getString("mid"));
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return id_list;
	}
	
	// 멤버 목록 가져오기
	
	public Member getMember(String mid , String mpassword) {
		Connection con = getConnection();
		Member member = null;
		try {
			PreparedStatement pstmt =
					con.prepareStatement("select * from member where mid=? ");
			pstmt.setString(1,mid);
			ResultSet rs = pstmt.executeQuery();
			while(rs.next()) {
				member = new Member(
						rs.getString("mid"),
						rs.getString("mpassword"),
						rs.getString("mname"),
						rs.getString("memail"),
						rs.getString("mphone")
						);
			}
			rs.close();
			pstmt.close();
		    con.close();
		    
		} catch (SQLException e) {
			System.out.println("로그인 sql 오류 입니다.");
			e.printStackTrace();
		}
		
		return member;
	}
	
	
	//회원가입
	
	public void Register(String mid , String mpassword,String mname,
			String memail , String mphone) {
		Connection con = getConnection();
		
		try {
			PreparedStatement pstmt =
					con.prepareStatement("insert into member values(?,?,?,?,?)");
			//id password name email phone
			pstmt.setString(1,mid);
			pstmt.setString(2,mpassword);
			pstmt.setString(3,mname);
			pstmt.setString(4,memail);
			pstmt.setString(5,mphone);
			pstmt.executeUpdate();

			pstmt.close();
		    con.close();
		} catch (SQLException e) {
			System.out.println("회원가입 오류 입니다.");
			e.printStackTrace();
		}
	}
	
}

 

Login.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 lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/css/login.css">
        <title>로그인</title>
    </head>
    <body>
    	
        <form action="/login/try" id="login_form" name="login_form" method="post">

            <div class="content">
            	<p></p>
         	    <h1>JSP를 이용한 간단한 게시판 만들기</h1>
                <a href=""><img src="/images/main_logo.png" alt="로고자리" id="logo"></a>
                <input name ="mid" id="mid" type="text" placeholder="아이디">
                <input name ="mpassword" type="password" placeholder="비밀번호">
                <input type="button" value="로그인" onclick="id_check()">
                <input type="button" value="회원가입" onclick="location.href='/register'" >
                <input id="id_list" type="hidden" value="${id_list}">

                <div class="sub_btn">
                    <a href="">아이디 찾기
                    </a>
                    <a href="">|</a>
                    <a href="">
                        비밀번호 찾기</a>

                </div>
                
                <c:if test="${!empty check}">
                   <p id="loing_fail" style="color='red'"> 로그인에 실패하셨습니다 다시 입력해주세요.</p>
                </c:if>

            </div>

        </form>
        <script src="/js/login.js"></script>
    </body>
</html>

login.css

body {
    margin: 0px;
    padding: 0px;
    background-color: rgb(231, 245, 240);
}

#login_form {
    background-color: white;
    height: 854px;
    width: 700px;
    margin: auto;
}

#logo {
    margin-bottom: 50px;
    height: 300px;
    width: 300px;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content input {
    font-weight: bold;
    font-size: 20px;
    width: 400px;
    height: 40px;
    margin-bottom: 30px;
}

.sub_btn a {
    text-decoration: none;
}


#loing_fail {
	color: red;
	font-size : 20px;
}

login.js

let id_list = document.getElementById('id_list').value;
id_list = id_list.replace("[","");
id_list = id_list.replace("]","");
id_list = id_list.replaceAll(" ","");
id_list = id_list.split(",");
let mid = document.getElementById('mid');
function id_check() {
	console.log(mid);
	if(!id_list.includes(mid.value)) {
		alert("없는 아이디 입니다. 다시 입력해주세요.");
		mid.value ="";
	}
	else {
		document.login_form.submit();
	}
}

 

 

LoginController.java

package login.controller;

import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

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 member.model.MemberDAO;
@WebServlet("/login")
public class LoginController extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		List<String>id_list = new ArrayList<String>();
		MemberDAO dao = new MemberDAO();
		
		
		// DAO로 부터 아이디만 불러와서 id_list에 저장하여 JSP로 넘긴다.
		id_list = dao.getmidList();
		req.setAttribute("id_list",id_list);
		req.getRequestDispatcher("/WEB-INF/view/Login.jsp").forward(req, resp);
		

	
	}
}

LoginTryController.java

package login.controller;

import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

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 javax.servlet.http.HttpSession;

import member.model.Member;
import member.model.MemberDAO;
@WebServlet("/login/try")
public class LoginTryController extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		req.setCharacterEncoding("UTF-8");
		
		MemberDAO dao = new MemberDAO();
		String mid = req.getParameter("mid");
		String mpassword = req.getParameter("mpassword");
		Member member = null;
		member = dao.getMember(mid, mpassword);

		
		// 로그인 성공 시 해당 해당 id password에 해당하는 멤버 정보들을 세션에 저장해 사용자가 이용하는동안 로그인이 유지되게 한다.
		if( member.getMpassword() !=null && member.getMpassword().equals(mpassword)) {
			HttpSession session = req.getSession();
			session.removeAttribute("check");
			session.setAttribute("login", member);
			resp.sendRedirect("/list");
		}
		
		else {
			HttpSession session = req.getSession();
			session.setAttribute("check", 0);
			resp.sendRedirect("/login");
		}
		
		

	}
}

 

자 여기까지가 로그인 구현입니다!

질문이나 이상한점이나 고쳐야 할점은 언제나 환영입니다. 꼭 댓글로 남겨주세욧!

'자바 > JSP기초(이클립스)' 카테고리의 다른 글

JSP 게시판 만들기 No4  (0) 2021.04.11
JSP 게시판 만들기 No3  (0) 2021.04.09
JSP 게시판 만들기 No1  (0) 2021.04.08
JSP로 게시판 구현하기!  (0) 2021.04.08
MVC모델  (0) 2021.04.01

'자바/JSP기초(이클립스)' Related Articles

티스토리툴바