1차 프로젝트 스타트 ( 회원가입, 로그인, 게시판 ) 

스프링MVC, JDBC 템플릿 ( 추후 시간되면 마이바티스로 변경 예정 ), 메이븐,

 

1. index.jsp ( 메인 ) 

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="u" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<head>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/css.css">
<title>회원제 게시판 예제</title>
</head>
<body>
<%-- 
<c:if test="${! empty authUser}">
	${authUser.name}님, 안녕하세요.
	<a href="logout.do">[로그아웃하기]</a>
	<a href="changePwd.do">[암호변경하기]</a>
</c:if>
<c:if test="${empty authUser}">
	<a href="join.do">[회원가입하기]</a>
	<a href="login.do">[로그인하기]</a>
</c:if>
--%>
<u:isLogin>
	
	<div class="login-box">
  <h2>${authUser.name}님, 안녕하세요.</h2>
  <form>


    <div class="buttons">
    <a href="logout.do">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      로그아웃
    </a>
        <a href="changePwd.do">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      암호변경
    </a>

	     <a href="article/list.do">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      게시판
    </a>
	
    </div>
    

    </div>
    
    
  </form>
  



</div>

	
	
	
</u:isLogin>



<u:notLogin>
	
	<div class="login-box">
  <h2>Main</h2>
  <form>


    <div class="buttons">
    <a href="join.do">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      회원가입
    </a>
        <a href="login.do">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      로그인하기
    </a>
    </div>
  </form>
  





</div>

	
</u:notLogin>
<br/>
</body>
</html>

 

처음 notLogin tag 부분 실행 ( 회원가입, 로그인 )

로그인 완료되면 isLogin tag 부분 실행 로그인한 user 이름 출력, 로그아웃, 암호변경, 게시판이동 

밑에는 tags 폴더 파일들

isLogin.tag

<%@ tag body-content="scriptless" pageEncoding="utf-8" %>
<%@ tag trimDirectiveWhitespaces="true" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<c:if test="${not empty sessionScope.authUser}">
    <jsp:doBody />
</c:if>

 

notLogin.tag

<%@ tag body-content="scriptless" pageEncoding="utf-8" %>
<%@ tag trimDirectiveWhitespaces="true" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<c:if test="${empty sessionScope.authUser}">
    <jsp:doBody />
</c:if>

 

pre.tag

<%@ tag body-content="empty" pageEncoding="utf-8" %>
<%@ tag trimDirectiveWhitespaces="true" %>
<%@ attribute name="value" type="java.lang.String" required="true"%>
<%
	value = value.replace("&", "&amp;");
	value = value.replace("<", "&lt;");
	value = value.replace(" ", "&nbsp;");
	value = value.replace("\n", "\n<br>");
%>
<%= value %>

 

 

2. join.jsp ( 회원가입)

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>가입</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/css.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/js.js"></script>

</head>
<body>
<div class="login-box">
<form action="join.do" method="post">
<div class="user-box">
    <p>
        <label>아이디</label><br/>
        <input type="text" name="id" value="${param.id}" id="id" placeholder="아이디">
        <input type="button" id="checkId" value="중복검사" class="buttonC">
        <div id="result_checkId" style="font-size:12px;"></div>
    </p>
</div>
<div class="user-box">
<p>
	<label>이름</label><br/><input type="text" name="name" value="${param.name}">
	<c:if test="${errors.name}">이름을 입력하세요.</c:if>
</p>
</div>
<div class="user-box">
<p>
	<label>패스워드</label><br/><input type="password" name="password" id="password">
	<c:if test="${errors.password}">암호를 입력하세요.</c:if>
</p>
</div>
<div class="user-box">
<p>
	<label>패스워드 확인</label><br/><input type="password" name="confirmPassword">
	<c:if test="${errors.confirmPassword}">확인을 입력하세요.</c:if>
	<c:if test="${errors.notMatch}"><h4>암호가 일치하지 않습니다.</h4></c:if>
	<c:if test="${errors.duplicateId}"><h4>이미 사용중인 아이디입니다.</h4></c:if>
</p>
</div>

    <div style="display: flex; justify-content: center;">
    <button class="buttonS">가입
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      </button>
	
	
	</div>

</form>
</div>
</body>
</html>

 

회원가입 Ajax ( 빈칸 확인, 비밀번호 일치 여부, 중복 검사 후 가입 가능 기능 등 )

중요한 건 Ajax로 DB에서 memberid값을 count(*)로 해서 값이 1이면 중복, 값이 0이면 사용 가능 

/*가입완료*/
$(document).ready(function() {
    $(".buttonS").click(function(event) {
        event.preventDefault(); // 기본 동작 중단

        // 입력값 확인
        var id = $("input[name='id']").val();
        var name = $("input[name='name']").val();
        var password = $("input[name='password']").val();
        var confirmPassword = $("input[name='confirmPassword']").val();

        if (id === "" || name === "" || password === "" || confirmPassword === "") {
            alert("빈 칸을 모두 입력하세요.");
            return;
        }

        if (password !== confirmPassword) {
            alert("비밀번호가 일치하지 않습니다.");
            return;
        }

        // 중복 검사 결과 확인
        var result_checkId = $("#result_checkId").text();
        if (result_checkId !== "사용 가능한 아이디입니다.") {
            alert("아이디 중복 검사 후 가입 버튼을 눌러주세요.");
            return;
        }

        // 회원가입 데이터를 서버로 전송
        $.ajax({
            type: "POST",
            url: "join.do",
            data: $("form").serialize(),
            success: function(response) {
                // 회원가입 완료 후 알림 표시
                alert("회원가입이 완료되었습니다. 로그인 페이지로 이동합니다.");
                // 로그인 페이지로 이동
                window.location.href = "login.do"; // 로그인 페이지 경로로 수정하세요.
            },
            error: function(xhr, status, error) {
                alert("회원가입 중 오류가 발생했습니다. 다시 시도해주세요.");
            }
        });
    });
		/*아이디 중복 검사*/
    $("#checkId").click(function() {
        let id = $("#id").val();
        
                if (id === "") {
            alert("아이디를 입력해주세요.");
            return;
        }
        
        $.ajax({
            type: 'post',
            url: "checkId.do", // 컨트롤러로 가는 mapping 입력
            data: { "id": id },
            dataType: "json",
            success: function(data) { 
                if (data.status === "N") {
                    result = "사용 가능한 아이디입니다.";
                    $("#result_checkId").html(result).css("color", "green");
                    $("#password").trigger("focus");
                } else {
                    result = "이미 사용중인 아이디입니다.";
                    $("#result_checkId").html(result).css("color", "red");
                    $("#id").val("").trigger("focus");
                }
            },
            error: function(error) {
                alert("error: " + error);
            }
        });
    });
});
저작자표시

'프로젝트 기반 자바(JAVA) 응용 SW개발자 취업과정' 카테고리의 다른 글

2023-08-18 64일차  (0) 2023.08.20
2023-08-17 63일차  (0) 2023.08.17
2023-08-11 61일차  (0) 2023.08.11
2023-08-10 60일차  (0) 2023.08.10
2023-08-09 59일차  (0) 2023.08.09

+ Recent posts

티스토리툴바