Tiles를 활용한 게시판 만들기 (로그인, 회원가입)

728x90

Tiles를 활용한 로그인

로그인과 회원가입에 필요한 Mapper준비

Mybatis Mapper tag

<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

Member.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  
<mapper namespace="Member">


<!-- 아이디 중복체크 -->
<select id="getId" parameterType="java.lang.String" resultType="java.lang.Integer">
	SELECT NVL(COUNT(*), 0)
	FROM MEMBER
	WHERE ID=#{id}
</select>

<!-- 회원가입-->
<insert id="addmember" parameterType="bit.com.a.dto.MemberDto">
	INSERT INTO MEMBER(ID, PWD, NAME, EMAIL, AUTH)
	VALUES(#{id}, #{pwd}, #{name}, #{email}, 3)
</insert>

<!-- 로그인시 아이디 비밀번호 확인 -->
<select id="login" parameterType="bit.com.a.dto.MemberDto"
	resultType="bit.com.a.dto.MemberDto">
	SELECT ID, NAME, EMAIL, AUTH
	FROM MEMBER
	WHERE ID=#{id} AND PWD=#{pwd}
</select>


</mapper>

package bit.com.a.controller;

import java.util.Date;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import bit.com.a.dto.MemberDto;
import bit.com.a.service.MemberService;

@Controller
public class MemberController {

	@Autowired
	MemberService service;
	
	@RequestMapping(value = "login.do", method = RequestMethod.GET)
	public String login() {	
		return "login.tiles";
	}

layouts.xml

tiles tag

<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">

<tiles-definitions>

<definition name="login.tiles" template="/WEB-INF/views/login/login.jsp">
</definition>

div id="main_wrap">
	<div id="middle_wrap">
		<div id="content_wrap">
			
			<div style="width: 502px; height: 166px; margin-left: auto; margin-right: auto;
						position: relative; top: 100px;">
								
			<div class="login_title_warp">
				<div style="margin-top: 15px">
					<h2>My Home Page</h2>
				</div>			
			</div>
			
			<div id="login_wrap">
			
				<form action="loginAf.do" name="frmFrom" id="_frmFrom" method="post">
					
					<table class="content_table" style="width: 75%">
					<colgroup>
						<col style="width:30%">
						<col style="width:70%">
					</colgroup>	
					
					<tr>
						<th style="background: #eeeeee; color: #3e5fba">아이디</th>
						<td>&nbsp;<input type="text" id="_userid" name="id"
									size="20px" style="border: 1px solid #dddddd" placeholder="ID">
							<input type="checkbox" id="chk_save_id">ID 저장
						</td>
					</tr>
					<tr>
						<th style="background: #eeeeee; color: #3e5fba">패스워드</th>
						<td>&nbsp;<input type="text" id="_pwd" name="pwd"
									size="20px" style="border: 1px solid #dddddd" placeholder="Password">							
						</td>
					</tr>
					
					<tr>
						<td colspan="2" style="height: 20px; text-align: center;">
						<span>
							<a href="#none" id="_btnLogin" title="로그인">
								<img alt="" src="./image/login_btn.jpg">
							</a>
							
							<a href="#none" id="_btnRegi" title="회원가입">
								<img alt="" src="./image/regi.jpg">
							</a>							
							
						</span>	
						</td>
					</tr>					
					
					</table>					
					
				</form>				
						
			</div>
			</div>		
		</div>	
	</div>
</div>

아이디, 비밀번호 입력하지않을 시 입력하라는 안내

(입력하지 않을시 focus로 향하게 스크립트 구성)

모두 다 입력시 submit태그로 action을 진행한다 (loginAf.do로 이동)

<script type="text/javascript">
$("#_btnRegi").click(function () {	
	location.href = "regi.do";	
});

$("#_btnLogin").click(function () {

	if($("#_userid").val().trim() == ""){
		alert('id를 입력해 주십시오');
		$("#_userid").focus();
	}
	else if($("#_pwd").val().trim() == ""){
		alert('패스워드를 입력해 주십시오');
		$("#_pwd").focus();
	}
	else{
		$("#_frmFrom").submit();	
	}	
	
});

쿠키저장

<script type="text/javascript">
let user_id = $.cookie("user_id");
if(user_id != null){	// 저장된 id가 있음
//	alert("쿠키 있음");
	$("#_id").val( user_id );
	$("#chk_save_id").attr("checked", "checked");
//	$("#chk_save_id").prop("checked", true);
}

$("#chk_save_id").click(function() {
	
	if( $("#chk_save_id").is(":checked") ){
	//	alert('첵크됨');
		if( $("#_id").val().trim() == "" ){
			alert('id를 입력해 주십시오');
			$("#chk_save_id").prop("checked", false);			
		}else{
			// 쿠키를 저장
			$.cookie("user_id", $("#_id").val().trim(), { expires:7, path:'./'});
		}
	}
	else{
		$.removeCookie("user_id", { path:'./' });
	}
	
}); 



</script>

로그인버튼을 누른후 MemberController도착 loginAf.do도착

@RequestMapping(value = "loginAf.do", method=RequestMethod.POST)
	public String loginAf(MemberDto dto, HttpServletRequest req) {
		
		MemberDto login = service.login(dto);
		if(login != null && !login.getId().equals("")) {
			
			req.getSession().setAttribute("login", login);
		//	req.getSession().setMaxInactiveInterval(60 * 60 * 24);
			
			return "redirect:/bbslist.do";			
		}
		else {			
			return "redirect:/login.do";
		}
		
		
	}

회원가입

login화면에서 회원가입을 누를시 (컨트롤러)regi.do - > (뷰)regi.tiles

@RequestMapping(value = "regi.do", method = RequestMethod.GET)
	public String regi() {
		return "regi.tiles";
	}

<definition name="regi.tiles" template="/WEB-INF/views/login/regi.jsp">
</definition>

아이디 체크 input에 원하는 아이디 작성후 아이디체크 버튼을 누르면 중복확인가능 ajax

regi.jsp

<div id="main_wrap">
	<div id="middle_wrap">
		<div id="content_wrap">
			
			<div style="width: 502px; height: 166px; margin-left: auto; margin-right: auto;
						position: relative; top: 100px;">
								
			<div class="login_title_warp">
				<div style="margin-top: 15px">
					<h2>회원가입</h2>
				</div>			
			</div>
			
			<div id="regi_wrap">
				<form action="" method="post" id="_frmFrom" name="frmFrom">
				
				<table class = "content_table" style="width:75%">
					<colgroup>
						<col style="width:30%">
						<col style="width:70%">
					</colgroup>
				
					<tr>
						<th>아이디 체크</th>
						<td>
						<input type="text" name="sid" id="_id" size = "30">
						<a href="" id="_btnGetId" title="id체크">
							<img alt="" src="./image/idcheck.png">
						</a>
						<!-- 아이디 사용여부 -->
						<div id="_rgetid">
							
						</div>
						
						</td>
					
					
					
					</tr>	
						<tr>
							<th>아이디</th>
							<td>
								<input type="text" name = "id" id="_userid" size="30" readonly="readonly">
							</td>
						
						</tr>
						<tr>
							<th>패스워드</th>
							<td>
								<input type="text" name = "pwd" id="_pwd" size="30" >
							</td>
						
						</tr>
						<tr>
							<th>이름</th>
							<td>
								<input type="text" name = "name" id="_name" size="30">
							</td>
						
						</tr>
						<tr>
							<th>이메일</th>
							<td>
								<input type="text" name = "email" id="_email" size="30">
							</td>
						
						</tr>
						
						<tr>
							<td colspan="2" style="height: 50px; text-align: center">
							
								<a href="#none" id="_btnRegi" title="회원가입">
									<img alt="" src="./image/regi.jpg">
								</a>
							</td>
						</tr>
				
				
				
				</table>
				
				
				</form>
				
			</div>		
		</div>	
	</div>
</div>

</div>

<script type="text/javascript">
$("#_btnRegi").click(function(){
	
	
	if($("#_userid").val().trim() == ""){
		
		alert("아이디를 입력해주십시오");
		$("#_id").focus();
		
	}else if ($("#_pwd").val().trim() == ""){
		
		alert("비밀번호를 입력해주십시오");
		$("#_pwd").focus();
	
	}else{
		
		$("_frmFrom").attr("action","regiAf.do").submit();
		
	}
		
		
	
});

$("#_btnGetId").click(function(){
	
	$.ajax({
		type:"get",
		url: "idcheck.do",
		data:{"id":$("#_id").val()},
		success:function(data){
			if(data == 0){
				
				$("#_rgetid").css("color", "#0000ff");
				$("#_rgetid").html('사용할 수 있는 id입니다');
				$("#_userid").html(("#_id").val());
				
			}else{
				$("#_rgetid").css("color", "#ff0000");
				$("#_rgetid").html('사용할 수 없는 id입니다');
				$("#_id").val("");
			}
		}
		
		
		
	});
	
	
});



</script>

MemberDao

package bit.com.a.dao;

import bit.com.a.dto.MemberDto;

public interface MemberDao {

	int getId(MemberDto mem);
	boolean addmember(MemberDto mem);
	MemberDto login(MemberDto dto);
	
}

MemberDaoImpl

package bit.com.a.dao.impl;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import bit.com.a.dao.MemberDao;
import bit.com.a.dto.MemberDto;

@Repository	// = 저장소
public class MemberDaoImpl implements MemberDao {

	@Autowired		// DI
	SqlSession sqlSession;		// SqlSession sqlSession = new SqlSessiontemplate();
	
	String namespace = "Member.";
		
	@Override
	public int getId(MemberDto mem) {		
		return sqlSession.selectOne(namespace + "getId", mem);
	}
	
	@Override
	public boolean addmember(MemberDto mem) {		
		int n = sqlSession.insert(namespace + "addmember", mem);		
		return n>0?true:false;
	}

	@Override
	public MemberDto login(MemberDto dto) {
		MemberDto mem = sqlSession.selectOne(namespace + "login", dto);
		return mem;
	}
	
	
}

MemberService

package bit.com.a.service;

import bit.com.a.dto.MemberDto;

public interface MemberService {

	//List<MemberDto> allMember();
	
	int getId(MemberDto mem);
	boolean addmember(MemberDto mem);
	
	MemberDto login(MemberDto dto);
}

MemberServiceImpl

package bit.com.a.service.impl;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import bit.com.a.dao.MemberDao;
import bit.com.a.dto.MemberDto;
import bit.com.a.service.MemberService;

@Service	// controller, dao 중간에 위치.... DB데이터 가공
public class MemberServiceImpl implements MemberService {

	@Autowired				
	MemberDao memberDao;	// MemberDao memberDao = new MemberDaoImpl();
	
	/*
	@Override
	public List<MemberDto> allMember() {		
		return memberDao.allMember();
	}
	*/

	@Override
	public int getId(MemberDto mem) {		
		return memberDao.getId(mem);		
	}
	
	@Override
	public boolean addmember(MemberDto mem) {		
		return memberDao.addmember(mem);		
	}

	@Override
	public MemberDto login(MemberDto dto) {		
		return memberDao.login(dto);		
	}
	
	
}

'스프링 Spring > 🧶 스프링 프레임워크 Spring' 카테고리의 다른 글

스프링 Tiles를 활용한 게시판 만들기 (게시판 페이징, 검색) (0)	2021.06.22
Spring Model 객체란 무엇일까? (0)	2021.06.22
Tiles를 활용한 게시판 만들기와 Tiles 설정법 (0)	2021.06.22
ajax와 @ResponseBody (0)	2021.06.22
service와 serviceImpl에 대해서... (0)	2021.06.22

👨‍💻 코딩 도서관

Tiles를 활용한 게시판 만들기 (로그인, 회원가입)

로그인

회원가입

'스프링 Spring > 🧶 스프링 프레임워크 Spring' 카테고리의 다른 글

댓글

티스토리툴바

Tiles를 활용한 게시판 만들기 (로그인, 회원가입)

로그인

회원가입

'스프링 Spring > 🧶 스프링 프레임워크 Spring' 카테고리의 다른 글

관련글

댓글

티스토리툴바