[1차 프로젝트] #6 헤더 메뉴 조건 설정하기 (로그인 하면 바뀌는 네비게이션바 만들기) JSTL

 

 

기존 메뉴와 

사용자가 로그인 되었을 때

메뉴를 다르게 설정하고 싶다면, 

조건을 설정하면 됩니다. 

 

 

 

예를 들면, 

로그인이 되기 전에는

login 아이콘이 보이고,

 

로그인이 되었을 때는

logout 아이콘이 보이는 

상황이죠. 

 

 

 

 

---

 

1. 변경할 목록 정하기 

---

로그인 하지 않은

일반 유저에게 보이는 헤더입니다. 

 

 

로그인 시 변경할 목록은

 

• 아이콘 변경 (로그아웃)
• 회원 닉네임 출력
• 마이페이지 생성
• 관리자 모드 생성 

 

 

 

2. session에 로그인 정보 저장하기 

---

로그인을 했을 때 일반 회원인지, 관리자 인지 구분하기 위해서

또 아이디와 닉네임 등을 화면에 출력하기 위해서는 

session에 데이터를 저장해야 합니다. 

 

@RequestMapping("member/login_ok.do")
	public String member_login_ok(HttpServletRequest request,HttpServletResponse response)
	{
		// id,pwd 보내기 
		String id=request.getParameter("id");
		String pwd=request.getParameter("pwd");
		// SQL 연동 
		MemberVO vo=MemberDAO.isLogin(id, pwd);
		String result=vo.getMsg();
		if(result.equals("LOGINOK"))
		{
			HttpSession session=request.getSession();
			session.setAttribute("id", vo.getId());
			session.setAttribute("name", vo.getName());
			session.setAttribute("nickname", vo.getNickname());
			session.setAttribute("m_admin", vo.getM_admin());
		}
		request.setAttribute("result", result);
		return "../member/login_ok.jsp";
	}

 

 

HttpSession session=request.getSession(); 
session.setAttribute("id", vo.getId());
session.setAttribute("name", vo.getName());
session.setAttribute("nickname", vo.getNickname());
session.setAttribute("m_admin", vo.getM_admin());

 

이렇게 setAttribute를 이용해서

아이디, 이름, 닉네임, 관리자 여부를 세션에 저장했습니다. 

로그인이 되어 있는 동안은 session에 데이터가 저장되어 있어요! 

 

 

 

 

3. JSTL 이용해서 조건 생성

 

---

이제 jsp 출력 화면에서 session의 데이터를 이용해서 조건을 걸어볼게요. 

먼저 taglib를 이용해서 jstl을 호출해야 해요. 

<%@&nbsp;taglib&nbsp;prefix="c"&nbsp;uri=" http://java.sun.com/jsp/jstl/core" &nbsp;%>

 

로그인이 됐다면 ~ 

관리자라면 ~

일반유저라면 ~ 

~ 라면

조건을 만들기 위해 <c:if></c:if>를 사용할거예요. 

 

 

 

 

[ 로그인이 되면 로그아웃 아이콘으로 변경하기 ]

<c:if test="${sessionScope.id==null }">
	<a href="../member/login.do"><img src="../assets/img/main/user5.png"" style="width:50px; height:50px; margin-right: 20px;"></a>
</c:if>
<c:if test="${sessionScope.id!=null }">
	<a href="../member/logout.do"><img src="../assets/img/main/logout1.png"" style="width:40px; height:40px; margin-right: 20px;"></a>
</c:if>

 

<c:if> 조건으로 ${sessionScope.id==null }

세션에 저장된 id값이 null 이라면 ~ 

id 값이 공백(=null)이라는 뜻은 로그인을 하지 않았다는 것이죠

로그인을 하지 않았을 때는 'user5.png' 이미지를 보여주고

 

로그인 전 화면

 

 

 

${sessionScope.id!=null } 세션에 저장된 id가 공백이 아니면

즉, 로그인을 했다면 'logout1.png' 이미지를 보여주는 것입니다

. 

로그인 후 화면

로그인 여부에 따라 사람모양 아이콘 -> 나가는 문 아이콘 으로 변경된게 보이시죠? 

 

 

 

 

 

[ 로그인이 되면 닉네임 출력하기 ]

<c:if test="${sessionScope.id!=null }">
	<p style="margin: 14px 20px; color:#3A4753B3">
	[ <span style="font-weight: bold;"><%=(String)session.getAttribute("nickname")%></span> ]님 환영합니다.</p>
</c:if>

 

${sessionScope.id!=null } 세션에 저장된 id가 공백이 아니면

즉, 로그인을 했다면  닉네임과 함께 환영문구가 출력됩니다. 

닉네임 출력은 sessionScope을 이용하지 않고 session.getAttribute를 이용했습니다. 

<%=(String)session.getAttribute("nickname")%>

 

닉네임 '착한심청'님에게 환영문구를 띄워줬어요. 

 

 

 

 

 

[ 관리자 페이지 / 마이페이지 ]

<c:if test="${sessionScope.id!=null }">
	 <c:if test="${sessionScope.m_admin=='n' }">
		 <li class="dropdown"><a href="#"><span>마이페이지</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
		 </li>
	 </c:if>
	 <c:if test="${sessionScope.m_admin=='y' }">
		 <li class="dropdown"><a href="#"><span>어드민페이지</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
		 </li>
	 </c:if>
</c:if>

 

${sessionScope.id!=null } 세션에 저장된 id가 공백이 아니면

즉, 로그인이 되어 있는 상황에만 마이페이지 또는 관리자 페이지가 출력될 수 있도록 if문을 생성한 다음에, 

 

${sessionScope.m_admin=='n' } 세션에 저장된 m_admin 값이 'n' 이면

관리자가 아니라는 의미임으로 일반 유저입니다. 

일반 유저라면 메뉴에 '마이페이지'가 생성됩니다. 

 

${sessionScope.m_admin=='y' } 세션에 저장된 m_admin 값이 'y' 이면

관리자입니다.  관리자로 로그인하면 메뉴에 '어드민페이지'가 생성됩니다. 

 

위의 일반 유저 메뉴와 비교해보면 

마이페이지와 어드민페이지가 각각 다르게 생성된 것을 확인 할 수 있습니다. 

 

 

 

 

 

 

---

 

 

 

 

오늘은 이렇게

상황별로 바뀌는 메뉴바

생성 방법에 대해 알아보았습니다.