걸어서 개발속으로

220310 JSP 실습 - 로그인과 로그아웃, 그리고... 본문

Programming/JSP

220310 JSP 실습 - 로그인과 로그아웃, 그리고...

티샤 2022. 3. 11. 01:09

이전에 CSS 실습한 걸 가지고 JSP와 연동시키기로 했다. 

CSS 실습을 해서 만든건 이거였다. 구상만 해두고 작동은 아무것도 안하는 홈페이지 하나.

맨처음 실습해서 배웠던 게 로그인과 로그아웃인데 실전에서 어떻게 쓰는지 차근차근 밟아보려고 한다.

 

일단 eclipse IDE를 열고, 새로운 프로젝트를 만들었다. jsp 으로 만드려면 Dynamic Web Project로 만들어야한다.

Project name은 적당히 ... 220310 project 정도로.

 

그러면 이제 css+html이 합쳐진 전체 폴더를 복사한 다음

프로젝트의 main > webapp에 붙여넣기를 한다.

그러면

이렇게 들어가있다.

 

이제 jsp로 옮겨줄 차례다.

가장 먼저 메인 화면인 index.html을 열었다.

jsp 기능을 넣어주기 위해 index.jsp 파일을 만든다.

[프로젝트명] > [New] > [JSP File]을 누른다음 index로 파일을 만들면 index.jsp가 생성된다.

우리는 html 파일에 jsp에서 구현하는 기능을 사용할 것이므로,

index.html의 모든 소스를 복사하여 index.jsp에 붙여넣는다.

즉 index.html과 index.jsp는 내용물이 같게 되는 거다.

가장 먼저 건드릴 것은 요녀석이다.

로그인이 진행되고 로그아웃이 되는 것까지 과정을 넣어줘야 한다.

이제 코드에서 로그인창이 어디있었는지 찾아보러가자.

아마 이렇게 발견될 것이다. login_box라는 아이디를 가진채로.

우리는 저 로그인창과 로그인 버튼에 맞춰 jsp 실행 기능을 넣어줄 것이다.

보통 로그인이나 회원가입 같은 창은 'form'을 통해 지정해준다.

다음처럼 넣어준다.

그럼 차근차근 설명해보자.

 <form action="loginOk.jsp" method="get">

 

이 form을 즉, 로그인 창을 실행하면 loginOk.jsp로 넘어간다는 의미다.

method는 get과 Post가 있다.

get의 경우 로그인창으로 넘어갈때 주소창에 내가 입력한 값들이 전부 보인다.(id과 pw)

post의 경우 로그인을 입력하고 넘어갈 때 주소가 변하지 않는다. 은행 보안의 경우 보통 post라고 생각하면 된다.

 

<name = "id"> <name="pw">

 

윗줄에 text로 받는 값의 이름을 id

아랫줄의 password로 받는 값의 이름을 pw로 받는다는 의미다.

이는 jsp 파일에서 아이디를 id로, 패스워드를  pw로 명명한다는거다.

 

  <input type="submit" value="로그인" style="width:60px; height:50px;">

 

로그인을 누르면 넘어가는 버튼을 만들어준다. 이게 바로 type = "submit"

value는 버튼에 들어갈 글씨다.

버튼 크기를 맞추어주고 싶어서 btn_login.gif의 파일을 열어 사이즈를 확인하여

대강적인 사이즈를 함께 적었다. (이는 css이다.)

 

그렇게하면..

이렇게 된다.

그럼 이제 loginOk.jsp를 만들러간다.

이 jsp 파일은 로그인이 됐을 때 나오는 화면이라고 인식하면 된다.

loginOk.jsp를 만들고 아까의 index.jsp를 복사한다.

왜냐면, 기본적인 화면은 다 똑같고 로그인창만 바뀌는 거니까!

 

이제 loginOk.jsp 파일은

index.jsp에서 id와 pw를 받아서 loginOk.jsp로 내보내야한다.

내장객체 request를 통해서 id와 pw를 택배로 포장해서 보내는 형태가 되는거다.

 

찐 jsp의 시작이다.

<body>가 시작되는 부근에 <% %>입력하고

받아오자.

jsp에서 <% %>를 입력한다는 것은 자바 입력이 가능하다는 의미다.

 

request.setCharacterEncoding("utf-8"); 

가장 먼저 해야하는건 역시 인코딩이다.

혹시 내가 받아온 값이 한글이면 당연히 깨지기 때문에, UTF-8로 인코딩 선언을 먼저 해준다.

 

String mId = request.getParameter("id");
String mPw = request.getParameter("pw"); //getParameter : ID와 PW를 받아옴

 

그다음은 request 내장객체의 메소드인 getParameter를 통해 index.jsp에서 선언한 id와 pw를 받아온다,

물론 자바이므로 변수도 선언해준다. id와 pw는 전부 문자열이므로 String으로 선언하는 것도 잊지 않는다.

 

원래는 DB에서 꺼내와서 ID와 비밀번호가 맞는지 봐야하지만,

아직 나는 DB연동을 배우지 않았으므로 (...)

임의로 ID는 tiger, PW는 12345 로 정하고 로그인 유무를 결정하기로 한다.

 

if(mId.equals("tiger") && mPw.equals("12345"))
{

}
else
{

}

변수선언된 equals 메소드는 동일한지 체크해준다.

ID = tiger, pw = 12345가 맞으면 if문이 돌아가고

그렇지 않으면 틀린거니 else가 된다.

 

만약 if문이 true이면 나는 어떻게 돌려야하는가?

로그인을 했으므로 당연히 세션을 불러와야한다.

if(mId.equals("tiger") && mPw.equals("12345"))
		{
			session.setAttribute("member_id", mId);
			session.setAttribute("member_pw", mPw);
            // session.setMaxInactiveInterval(interval) : 세션 기간 설정
		
		}

session을 불러와서 값을 지정해준다.

session의 메소드인 setAtrribute는

session.setAttribute(String arg0, Object arg1)의 구성으로 이루어지는데,

 

위의 상황을 그대로 불러오면 mId는 앞으로 로그인한 세션에서 member_id로 불리는 거고,

mPw는 로그인한 세션에서 member_pw로 불리는거다.

 

참고로 setMaxInactiveInterval(interval)는 세션 기간을 설정한다.(기본은 30분이다.)

 

반면 로그인 값이 일치하지 않으면 어떻게 해야할까?

당연히 ID나 비밀번호가 맞지 않다고 이야기해주고

원래 맨처음 화면인 index.jsp로 돌아가야할거다.

else
		{
			out.println("<scipt type='text/javascript'>");
			out.println("alert('ID 또는 비밀번호가 존재하지 않습니다!')");
			out.println("</script>");
			response.sendRedirect("index.jsp");
			
		}

배웠던 거에선 javascript의 alert로 띄우는거였고..

response는 기본적으로 답변을 보내는거다.

respond의 메소드 sendRedirect는 index.jsp로 돌아가라고 명령한다.

 

이렇게해놓고 실행하면

 변화가 없다

당연하다 우리는 로그인 한 이후의 외적변화를 아무것도 바꾸지 않았기 때문이다...

 

역시 로그인창 부분을 찾는다.

우리가 하고싶은건

뫄뫄님 로그인 중

로그아웃 등.. 암튼 이런것들을 표현하고 싶을 수도 있다.

 

일단 로그인창에 관련된 것들을 싹다 날려버리자.

그리고 적당히 추가하자

<%= mId %> 의 경우 mId값을 보여줄거다.

로그인 중도 별도로 표기해주고

로그아웃은 누르면 logoutOk.jsp로 이동할 수 있게 링크를 달아주었다.

 

그럼 다음에 할 것은 자연스럽게 로그아웃 페이지를 구현하는 것이다.

logoutOk.jsp를 만들러 가보자.

 

사실 로그아웃은 별거 없다.

정확히는 아까 loginOk.jsp에서 받은 세션값들을 전부 삭제해버리는 것을 의미한다.

그러면 과정이

세션값 전부 삭제 > 처음화면(index.jsp)로 돌아감

이 과정을 거친다.

 

logoutOk.jsp

session.invalidate();

받았던 세션 값을 삭제하는건 invalidate 메소드다.

뭐 그 뒤에는 response.sendRedirect로 아까와 동일.

이 상태에서 index.jsp를 실행해서 로그인을 해보면....

로그아웃까지 되는 제법 깔끔한 무언가가 된다.

Comments