일시

2021.12.29 ~ 2022.01.01

프로젝트 개요

• 주제 : 유기견 입양 및 후원 사이트

• 프로젝트명(사이트명) & 팀명 : DDORI'S HOUSE

• 구현 내용(목표) : 로그인/회원가입, 마이페이지(사용자), 마이페이지(관리자), 각종 게시판(공지사항, 강아지 리스트, 자유게시판, 입양후기 등), 쇼핑몰(물건 판매, 결제 시스템), 매칭 시스템(질문에 대한 답변을 통해 적절한 유형 매칭)

• 네비게이션 구성 : about(각종 소개 및 공지사항), adopt(강아지 리스트, 강아지 매칭), donation(후원 안내, 물건 판매), volunteer(봉사 안내 게시판), community(입양후기, 자유게시판), contact(오시는길, 연락 등), login/join(로그인, 회원가입, 마이페이지 등)

• 맡은 역할 : DB 관리(모델링 및 테이블, 컬럼 등), 네비게이션바, login/join

람쥐의 진행현황 1탄!!!

★ 모두가 사용할 네비게이션 만들기
1) 네비게이션 바 구현
2) 네비게이션 (드롭다운)바 부속 내용 구현
3) login/join 시 logout 뜨도록 else 구문 추가

★ login/join
1) login/join JSP 페이지 구현
2) DB연동하여 직접 인서트한 DB 로그인 출력 확인
3) 회원가입 JSP 페이지 구현
4) DB연동하여 web에서 DB 인서트한(회원가입한) 로그인 출력 확인
5) 로그아웃 구현

구현화면

★모두가 사용할 네비게이션 바 만들기

1) 네비게이션 바 구현

2) 네비게이션 (드롭다운)바 부속 내용 구현

        <div class="collapse navbar-collapse" id="ftco-nav">
         <ul class="navbar-nav nav ml-auto">
        
           <li class="nav-item dropdown">
				<a class="nav-link" href="/about/about" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
				<span> About</span>
				</a>
				<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
				  <li><a class="dropdown-item" href="/about/about" id="box"><span><img src="" height="45px">DDORI'S HOUSE</span></a></li>
				  <li><a class="dropdown-item" href="/about/notice" id="box"><span><img src="" height="45px">공지사항</span></a></li>
				</ul>
			 </li>
           
           <li class="nav-item dropdown">
            <a class="nav-link" href="#Dog" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <span> Adopt</span>
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="/adopt/dogList" id="box"><span>또리소개</span></a></li>
              <li><a class="dropdown-item" href="/adopt/dogMatch" id="box"><span>또리매칭</span></a></li>
            </ul>
          </li>
   
          <li class="nav-item dropdown">
            <a class="nav-link " href="#donation-section" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               <span> Donation</span>
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="/Donation/DonationI" id="box"><span>후원안내</span></a></li>
              <li><a class="dropdown-item" href="/Donation/Dmade" id="box"><span>또리's 메이드</span></a></li>
            </ul>
          </li>

           <li class="nav-item "><a onclick="volunteer()" href="#volunteer-section" class="nav-link"><span>Volunteer</span></a></li>
   
           <li class="nav-item dropdown" >
            <a class="nav-link " href="#review-section" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
             <span> Community</span>
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="/community/review" id="box"><span>입양후기</span></a></li>
              <li><a class="dropdown-item" href="/community/free" id="box"><span>DDORI'S COMMENT</span></a></li>
            </ul>
          </li>
   
           <li class="nav-item"><a href="/contact2/contact2" class="nav-link"><span>Contact</span></a></li>
   
           <li class="nav-item"><a href="/user/loginJoin" class="nav-link"><span>Login/Join</span></a></li>
         </ul>
        
        </div>

3) login/join 시 logout 뜨도록 else 구문 추가

<%
   if(com.icia.web.util.CookieUtil.getCookie(request, (String)request.getAttribute("AUTH_COOKIE_NAME")) != null)
   {
%>

쿠키값 체크한 후 'logout' 보이도록 샬라샬라~

<%
   }
   else
   {
%>

쿠키값 체크한 후 'login/join' 보이도록 샬라샬라~

<%
   }
%>

★login/join

1) login/join JSP 페이지 구현

2) DB연동하여 직접 인서트한 DB 로그인 출력 확인

loginjoin.jsp 띄울 UserController.java 추가

   //★★로그인창 띄우기
   @RequestMapping(value = "/user/loginJoin", method=RequestMethod.GET)
   public String loginJoin(HttpServletRequest request, HttpServletResponse response)
   {
      return "/user/loginJoin";
   }

로그인 유무(사용자 조회) 확인할 xml 추가

<select id="userSelect" parameterType="string" resultMap="userResultMap">
    
SELECT
    USER_ID,
    NVL(USER_PWD, '') AS USER_PWD,
    NVL(USER_NAME, '') AS USER_NAME,
    NVL(USER_EMAIL, '') AS USER_EMAIL,
    NVL(STATUS, '') AS STATUS,
    NVL(TO_CHAR(REG_DATE, 'YYYY.MM.DD HH24:MI:SS'), '') AS REG_DATE,
    NVL(USER_ADDRESS, '') AS USER_ADDRESS,
    NVL(USER_PNUM, '') AS USER_PNUM, 
    NVL(DOG_SEQ_LIST, '') AS DOG_SEQ_LIST,
    NVL(USER_B_DATE, '') AS USER_B_DATE,
    NVL(USER_NNAME, '') AS USER_NNAME,
    NVL(USER_GRADE, '') AS USER_GRADE,
    NVL(USER_POINT, '') AS USER_POINT
FROM
    TBL_USER
WHERE
    USER_ID = #{value}
        
</select>

UserDao 인터페이스 먼저 생성해주고

로그인 유무(사용자 조회) 확인할 dao 생성

 public User userSelect(String userId);

로그인 유무(사용자 조회) 확인할 service 생성

   public User userSelect(String userId)
   {
      User user = null;
      
      try
      {
         user = userDao.userSelect(userId);
      }
      catch(Exception e)
      {
         logger.error("[UserService] userSelect Exception", e);
      }
      
      return user;
   }

로그인 유무(사용자 조회) 확인할 model 생성 (선언, 초기화, get+set 추가)

로그인 유무(사용자 조회) 확인할 ajax 통신연결

  $.ajax({
      type : "POST",
      url : "/user/login",
      data : {
         userId: $("#userId").val(),
         userPwd: $("#userPwd").val() 
      },
      datatype : "JSON",
      beforeSend : function(xhr){
            xhr.setRequestHeader("AJAX", "true");
        },
      success : function(response) {
         
         if(!icia.common.isEmpty(response))
         {
            icia.common.log(response);
            
            // var data = JSON.parse(obj);
            var code = icia.common.objectValue(response, "code", -500);
            
            if(code == 0)
            {
               location.href = "/index"; 
            }
            else
            {
               if(code == -1)
               {
                  alert("비밀번호가 올바르지 않습니다.");
                  $("#userPwd").focus();
               }
               else if(code == 404)
               {
                  alert("아이디와 일치하는 사용자 정보가 없습니다.");
                  $("#userId").focus();                  
               }
               else if(code == 403)
               {
                  alert("사용이 중지된 사용자 입니다.");
                  $("#userId").focus();
               }                  
               else if(code == 400)
               {
                  alert("파라미터 값이 올바르지 않습니다.");
                  $("#userId").focus();
               }
               else
               {
                  alert("오류가 발생하였습니다.");
                  $("#userId").focus();
               }   
            }   
         }
         else
         {
            alert("오류가 발생하였습니다.");
            $("#userId").focus();
         }
      },
      complete : function(data) 
      { 
         // 응답이 종료되면 실행, 잘 사용하지않는다
         icia.common.log(data);
      },
      error : function(xhr, status, error) 
      {
         icia.common.error(error);
      }
   });

로그인 유무(사용자 조회) 띄울 UserController.java 추가

   //★★로그인 유무
   @RequestMapping(value="/user/login", method=RequestMethod.POST) 
   @ResponseBody 
   public Response<Object> login(HttpServletRequest request, HttpServletResponse response)
   {
      String userId = HttpUtil.get(request, "userId");
      String userPwd = HttpUtil.get(request, "userPwd");
      Response<Object> ajaxResponse = new Response<Object>();
      
      if(!StringUtil.isEmpty(userId) && !StringUtil.isEmpty(userPwd))
      {
         User user = userService.userSelect(userId);
         
         if(user != null)
         {
            if(StringUtil.equals(user.getUserPwd(), userPwd))
            {
               if(StringUtil.equals(user.getStatus(), "Y"))
               {
                  CookieUtil.addCookie(response, "/", -1, AUTH_COOKIE_NAME, CookieUtil.stringToHex(userId));               
                  ajaxResponse.setResponse(0, "Success"); // 로그인 성공
               }
               else
               {
                  ajaxResponse.setResponse(403, "Not Found"); // 사용자 정보 없음 (Not Found)
               }
            }
            else
            {
               ajaxResponse.setResponse(-1, "Passwords do not match"); // 비밀번호 불일치
            }
         }
         else
         {
            ajaxResponse.setResponse(404, "Not Found"); // 사용자 정보 없음 (Not Found)
         }
      }
      else
      {
         ajaxResponse.setResponse(400, "Bad Request"); // 파라미터가 올바르지 않음 (Bad Request)
      }
      
      if(logger.isDebugEnabled())
      {
         logger.debug("[UserController] /user/login response\n" + JsonUtil.toJsonPretty(ajaxResponse));
      }
      
      return ajaxResponse;
   }

3) 회원가입 JSP 페이지 구현

4) DB연동하여 web에서 DB 인서트한(회원가입한) 로그인 출력 확인

regForm.jsp 띄울 UserController.java 추가

	//★★회원가입창 띄우기
    @RequestMapping(value="/user/regForm", method=RequestMethod.GET) 
     public String regForm(HttpServletRequest request, HttpServletResponse response) 
     {
       //이미 로그인한 상태에선 회원가입 자체가 안보이겠지만 한 번 더 걸러주자
       String cookieUserId = CookieUtil.getHexValue(request, AUTH_COOKIE_NAME);
         
       if(StringUtil.isEmpty(cookieUserId)) 
       {
          return "/user/regForm";
       }
       else 
       {
          CookieUtil.deleteCookie(request, response, AUTH_COOKIE_NAME); 
            
          return "redirect:/"; 
       }
      }

회원가입 DB에 인서트할 xml 추가

<insert id="userInsert" parameterType="com.icia.web.model.User">
            
INSERT INTO TBL_USER (
    USER_ID,
    USER_PWD,
    USER_NAME,
    USER_EMAIL,
    STATUS,
    REG_DATE,
    USER_ADDRESS,
    USER_PNUM,
    DOG_SEQ_LIST,
    USER_B_DATE,
    USER_NNAME,
    USER_GRADE,
    USER_POINT
) VALUES (
    #{userId},
    #{userPwd},
    #{userName},
    #{userEmail},
    #{status},
    SYSDATE,
    #{userAddress},
    #{userPNum},
    #{dogSeqList},
    #{userBDate},
    #{userNName},
    #{userGrade},
    #{userPoint}
)         
</insert>

회원가입 DB에 인서트할 dao 생성

public int userInsert(User user);

회원가입 DB에 인서트할 service 생성

   public int userInsert(User user)
   {
      int count = 0;
      
      try
      {
         count = userDao.userInsert(user);
      }
      catch(Exception e)
      {
         logger.error("[UserService] userInsert Exception", e);
      }
      
      return count;
   }

회원가입 DB에 인서트할 model 생성 (선언, 초기화, get+set 추가)

회원가입 DB에 인서트할 ajax 통신연결

    $.ajax({
       type:"POST",
       url:"/user/regProc",
       data:{
          userId:$("#userId").val(),
          userPwd:$("#userPwd").val(),
          userName:$("#userName").val(),
          userEmail:$("#userEmail").val(),
          userAddress:$("#userAddress").val(),
          userPNum:$("#userPNum").val(),
          userBDate:$("#userBDate").val(),
          userNName:$("#userNName").val()
       },
       datatype:"JSON", //dataType 이거하면 안됨 오류남...!!!!!!!!
       beforeSend:function(xhr){
         xhr.setRequestHeader("AJAX", "true"); 
       },
       success:function(response){
          if(response.code == 0) 
          {//중복없이 정상일 때 0으로 넘기자고
             alert("회원가입이 되었습니다.");
              location.href = "/index";
          }
          else if(response.code == 100)
           {
             alert("중복 된 아이디 입니다."); 
             $("#userId").focus();
          }
          else if(response.code == 400) 
          {//파라미터가 잘못될경우, 유저아이디가 안넘어왔을 경우
             alert("파라미터 값이 잘못 되었습니다.");
             $("#userId").focus();
          }
          else if(response.code == 500)
         {
            alert("회원가입 중 오류가 발생했습니다.");
            $("#userId").focus();
         }            
          else
           {//나머지
             alert("오류가 발생했습니다.");
             $("#userId").focus();
          }
       },
       complete:function(data)
       {
          icia.common.log(data);
       },
       error:function(xhr,status,error)
       {
          icia.common.error(error); 
       }
  });

회원가입시 중복아이디 체크할 ajax 통신연결

      $.ajax({
        type:"POST",
        url:"/user/idCheck", 
        data:{
           userId:$("#userId").val()
        },
        datatype:"JSON", 
        beforeSend:function(xhr){
          xhr.setRequestHeader("AJAX", "true"); 
        },
        success:function(response){
           if(response.code == 0) 
           {
              fn_userReg();
           }
           else if(response.code == 100)
            {
              alert("중복 된 아이디 입니다."); 
              $("#userId").focus();
           }
           else if(response.code ==400) 
           {
              alert("파라미터 값이 잘못 되었습니다.");
              $("#userId").focus();
           }
           else
            {
              alert("오류가 발생했습니다.");
              $("#userId").focus();
           }
        },
        complete:function(data)
        {
           icia.common.log(data);
        },
        error:function(xhr,status,error)
        {
           icia.common.error(error);
        }
      });

회원가입시 중복아이디 체크할 UserController.java 추가

      //★★즁복아이디체크
      @RequestMapping(value="/user/idCheck", method=RequestMethod.POST)
      @ResponseBody //내꺼에서 바로 Response보낼거라서 ResponseBody 사용함
      public Response<Object> idCheck(HttpServletRequest request, HttpServletResponse response)
      {
         String userId = HttpUtil.get(request, "userId");
         Response<Object> ajaxResponse = new Response<Object>();
         
         if(!StringUtil.isEmpty(userId)) //매개변수로 넘어왔냐 ?, 아이디 넘어왔냐 확인
         {
            if(userService.userSelect(userId) == null) //객체가 생성되지 않았다==데이터가 없다==아이디가없다, //userService == bin
            {
               ajaxResponse.setResponse(0, "Success");
            }
            else
            {
               ajaxResponse.setResponse(100, "Duplicate ID");
            }
         }
         else
         {
            ajaxResponse.setResponse(400, "Bad Request");
         }
               
         return ajaxResponse;
      }

회원가입 DB에 인서트할 UserController.java 추가

   //★★실제 회원가입
      @RequestMapping(value="/user/regProc", method=RequestMethod.POST)
      @ResponseBody 
      public Response<Object> regProc(HttpServletRequest request, HttpServletResponse response)
      {
         Response<Object> ajaxResponse = new Response<Object>();
         String userId = HttpUtil.get(request, "userId");
         String userPwd = HttpUtil.get(request, "userPwd");
         String userName = HttpUtil.get(request, "userName");
         String userEmail = HttpUtil.get(request, "userEmail");
         String regDate = HttpUtil.get(request, "regdate");
         String userAddress = HttpUtil.get(request, "userAddress");
         String userPNum = HttpUtil.get(request, "userPNum");
         String dogSeqList = HttpUtil.get(request, "dogSeqList");
         String userBDate = HttpUtil.get(request, "userBDate");
         String userNName = HttpUtil.get(request, "userNName");

       
      
      if(!StringUtil.isEmpty(userId) && !StringUtil.isEmpty(userPwd) && !StringUtil.isEmpty(userName) && !StringUtil.isEmpty(userEmail))
      {
         if(userService.userSelect(userId)==null)
         {
            User user = new User();
            user.setUserId(userId);
            user.setUserPwd(userPwd);
            user.setUserName(userName);
            user.setUserEmail(userEmail);
            user.setStatus("Y");
            user.setRegDate(regDate);
            user.setUserAddress(userAddress);
            user.setUserPNum(userPNum);
            user.setDogSeqList(dogSeqList);
            user.setUserBDate(userBDate);
            user.setUserNName(userNName);
            user.setUserGrade("N");
            user.setUserPoint(2000);
            
            if(userService.userInsert(user)>0) 
            {
               ajaxResponse.setResponse(0, "Susccess");
            }
            else
            {//비정상
               ajaxResponse.setResponse(500, "Internal Server Error");
            }
         }
         else
         {//중복 아이디라는 뜻. 중복오류코드는 100번으로 집어넣자고요
            ajaxResponse.setResponse(100, "Duplicate Id");
         }
      }
      else
      {
         ajaxResponse.setResponse(400, "Bad Request");
      }
         
         return ajaxResponse;
      }    

5) 로그아웃 구현

로그아웃할 UserController.java 추가

      //★★로그아웃
      @RequestMapping(value="/user/loginOut", method=RequestMethod.GET)
      public String loginOut(HttpServletRequest request, HttpServletResponse response)
      {
         if(CookieUtil.getCookie(request, AUTH_COOKIE_NAME) != null)
         {
            CookieUtil.deleteCookie(request, response, "/", AUTH_COOKIE_NAME);
         }
         return "redirect:/";
      }