인프런 나프_2탄 5일차 : MVC06_01~02 회원 로그인 페이지 작성, 회원 로그인 기능(세션 바인딩)

2021. 6. 25. 22:33

# MVC06_01 회원 로그인 페이지 작성

## MVC05 WAR File Import

기존에 작업 진행한 MVC05 Import하여 MVC06으로 이름 변경 작업 진행.

MVC05.war

2.66MB

Project Explorer 빈 공간 우 클릭 > Import > MVC05.WAR 찾아서 클릭 후 Finish.

## Context 등록

웹 애플리케이션을 WAS 톰캣 Server가 인식할 수 있도록 등록.
톰캣 서버 우 클릭 > Add and Remove 에서 Available 에 존재하는 MVC04 클릭 후 Add 하여 Configured로 등록 후 Finish.

## 작업 계획

회원 로그인 구현
회원 로그인 시 본인의 정보 삭제 버튼 표시, 상세 보기 시 본인의 저보 수정하기 버튼 표시

## 회원 로그인 페이지 작업

부트 스트랩 https://www.w3schools.com/bootstrap/bootstrap_panels.asp
위 부트 스트랩 Panel Heading, Panel Content 사용하여 작업

<div class="container">
  <h2>Panel Heading</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">Panel Content</div>
  </div>
</div>

로그인 폼은 부트 스트랩 Inline Form 사용

<div class="container">
  <h2>Inline form</h2>
  <p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.</p>
  <form class="form-inline" action="/action_page.php">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

Panel body에는 부트 스트랩 Responsive Tables 사용

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Table</h2>
  <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>                                                                                      
  <div class="table-responsive">          
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

</body>
</html>

부트 스트랩 Panel Footer 사용

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Panel Footer</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">Panel Content</div>
    <div class="panel-footer">Panel Footer</div>
  </div>
</div>

</body>
</html>

# MVC06_02 회원 로그인 기능(세션 바인딩)

## 회원 로그인 기능 작업

1. 입력값 유효성 검사

아이디, 비밀번호 입력 시 알림창 표시될 수 있도록 이벤트 설정. (자바스크립트로 유효성 검사 설정)

<script type="text/javascript">
  function check() {
	  if ($('#user_id').val() == '') {
		 alert("아이디를 입력해주세요.");
		 return false;
	  }
	  
	  if ($('#password').val() == '') {
		 alert("비밀번호를 입력해주세요.");
		 return false;
	  }
	  
	  return true;
  }
</script>



<h2>회원관리 시스템</h2>
	<div class="panel panel-default">
		<div class="panel-heading">
			<form class="form-inline" action="${ctx}/memberLogin.do" method="post">
			    <div class="form-group">
					<label for="user_id">ID:</label>
					<input type="text" class="form-control" id="user_id" name="user_id">
			    </div>
			    <div class="form-group">
					<label for="pwd">Password:</label>
					<input type="password" class="form-control" id="password" name="password">
			    </div>
			    <button type="submit" class="btn btn-default" onclick="return check()">로그인</button>
			</form>
		</div>
	</div>

2. HandlerMapping

로그인 클릭 시 action 에 따른 HandlerMapping

package kr.bit.frontcontroller;

import java.util.HashMap;

import kr.bit.controller.Controller;
import kr.bit.controller.*;

public class HandlerMapping {
  private HashMap<String, Controller> mappings;
  public HandlerMapping() {
	  mappings=new HashMap<String, Controller>();
	  mappings.put("/memberList.do", new MemberListController());
	  mappings.put("/memberInsert.do", new MemberInsertController());
	  mappings.put("/memberRegister.do", new MemberRegisterController());
	  mappings.put("/memberContent.do", new MemberContentController());
	  mappings.put("/memberUpdate.do", new MemberUpdateController());
	  mappings.put("/memberDelete.do", new MemberDeleteController());
	  mappings.put("/memberLogin.do", new MemberLoginController());
  }
  public Controller getController(String key) { // key=>/memberList.do
	  return mappings.get(key);
  }
}

3. MemberLoginController 생성

package kr.bit.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kr.bit.model.MemberDAO;
import kr.bit.model.MemberVO;

public class MemberLoginController implements Controller {

	@Override
	public String requestHandler(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		String ctx = request.getContextPath();		
		
		String user_id = request.getParameter("user_id");
		String password = request.getParameter("password");
		
		MemberVO vo = new MemberVO();
		vo.setId(user_id);
		vo.setPass(password);

		MemberDAO dao = new MemberDAO();
		String user_name = dao.memberLogin(vo);
		
		if (user_name != null && !"".equals(user_name)) {	
			// 로그인 성공 -> 객체 바인딩.
			request.getSession().setAttribute("userId", user_id);
			request.getSession().setAttribute("userName", user_name);
		} else {	
			// 로그인 실패 -> 객체 바인딩, 실패 메시지
			request.getSession().setAttribute("userId", user_id);
			request.getSession().setAttribute("userName", user_name);
			request.getSession().setAttribute("msg", "사용자 정보가 올바르지 않습니다.");
		}
		
		return "redirect:" + ctx + "/memberList.do";
	}

}

4. MemberDAO

// 회원 로그인
public String memberLogin(MemberVO vo) {
  SqlSession session = sqlSessionFactory.openSession();
  String user_name = session.selectOne("memberLogin", vo);
  session.close();
  return user_name;
}

5. MemberMapper.xml

<!-- 회원 로그인 -->
<select id="memberLogin" parameterType="memberVO" resultType="String">
  SELECT name
  FROM member
  WHERE id = #{id}
  AND  pass = #{pass}
</select>

저작자표시

'인프런 강의 학습 > MVC 프레임워크_나프2탄' 카테고리의 다른 글

인프런 나프_2탄 7일차 : MVC06_06~07 회원 로그인 화면처리, 로그인에 따른 버튼 활성화, 로그아웃 (0)	2021.06.26
인프런 나프_2탄 6일차 : MVC06_03~05 세션 (0)	2021.06.26
인프런 나프_2탄 4일차 : MVC05_05 마무리 (0)	2021.06.24
인프런 나프_2탄 3일차 : MVC05_03~04 JDBC를 MyBatis로 변경 (0)	2021.06.24
인프런 나프_2탄 2일차 : MVC05_01~02 JDBC와 MyBatis 설정, Connection Pool (0)	2021.06.23

New 병아리 개발자

인프런 나프_2탄 5일차 : MVC06_01~02 회원 로그인 페이지 작성, 회원 로그인 기능(세션 바인딩)

# MVC06_01 회원 로그인 페이지 작성

## MVC05 WAR File Import

## Context 등록

## 작업 계획

## 회원 로그인 페이지 작업

# MVC06_02 회원 로그인 기능(세션 바인딩)

## 회원 로그인 기능 작업

1. 입력값 유효성 검사

2. HandlerMapping

3. MemberLoginController 생성

4. MemberDAO

5. MemberMapper.xml

'인프런 강의 학습 > MVC 프레임워크_나프2탄' 카테고리의 다른 글

+ Recent posts

티스토리툴바