스크립트 요소 이용해 실습하기 - 로그인 예제
1. 로그인창에서 ID와 비밀번호를 입력한 후 JSP로 전송하여 출력하는 예제입니다. 다음과 같이 실습 파일 login.html, result.jsp, result2.jsp, result3.jsp를 준비합니다.
2. login.html을 다음과 같이 작성합니다. 로그인창에서 ID와 비밀번호를 입력한 후 action의 result.jsp로 전송합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form name="frmLogin" method="post" action="result.jsp" encType="utf-8">
아이디: <input type="text" name="user_id"><br>
비밀번호: <input type="password" name="user_pw"><br>
<input type="submit" value="로그인">
<input type="reset" value="다시 입력">
</form>
</body>
</html>
3. result.jsp를 다음과 같이 작성합니다. 스크립트릿을 이용해 전송된 ID와 비밀번호를 거져온 후 표현식을 이용해 변수의 값을 출력합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>결과출력창</title>
</head>
<body>
<h1>결과 출력</h1>
<%
request.setCharacterEncoding("utf-8");
String user_id = request.getParameter("user_id");
String user_pw = request.getParameter("user_pw");
%>
<h1>아이디 : <%= user_id %></h1>
<h1>비밀번호 : <%= user_pw %></h1>
</body>
</html>
4. http://localhost:8090/pro12/login.html로 요청한 후 ID와 비밀번호를 입력하여 로그인합니다.
5. 로그인 정보가 출력됩니다.
6. 이번에는 한 걸음 더 나아가 스크립트릿 안에 자바 코드를 사용해 ID가 정상적으로 입력되었는지 체크한 후 정상 입력 여부에 따라 동적으로 다른 결과를 출력하도록 구현해보겠습니다. result2.jsp를 다음과 같이 작성합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String user_id = request.getParameter("user_id");
String user_pw = request.getParameter("user_pw");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>결과출력창</title>
</head>
<body>
<%
if (user_id == null || user_id.length() == 0) {
%>
아이디를 입력하세요.<br>
<a href="/pro12/login.html">로그인하기</a>
<%
} else {
%>
<h1>환영합니다. <%=user_id %> 님!!!</h1>
<%
}
%>
</body>
</html>
7. login.html의 action 속성을 result2.jsp로 수정 후, 로그인창에서 먼저 ID를 정상적으로 입력한 후 전송했을 때의 결과를 확인합니다.
8. 다음은 ID를 입력하지 않고 전송한 경우입니다.
서블릿에서는 자바 코드로 화면을 구현하듯이 JSP에서는 스크립트릿 안에 자바 코드를 사용해서 다양한 기능을 구현한다는 점이 이제 어느 정도 이해가 될 것입니다.
9. 로그인 에제를 좀 더 응용해 보겠습니다. 다음과 같이 result3.jsp를 작성합니다. 첫 번째 if문에서 먼저 ID가 입력되었는지 체크한 후 정상적으로 입력되었으면 다시 내부 if문을 수행하여 ID가 admin인지 체크합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String user_id = request.getParameter("user_id");
String user_pw = request.getParameter("user_pw");
%>
<!DOCTYPE html>
<html>
<head>
<title>결과출력창</title>
<meta charset="UTF-8">
</head>
<body>
<%
if (user_id == null || user_id.length() == 0) {
%>
아이디를 입력하세요.<br>
<a href="/pro12/login.html">로그인하기</a>
<%
} else {
if (user_id.equals("admin")) {
%>
<h1>관리자로 로그인 했습니다.</h1>
<form>
<input type=button value="회원정보 삭제하기" />
<input type=button value="회원정보 수정하기" />
</form>
<%
} else {
%>
<h1>환영합니다. <%=user_id %> 님!!!</h1>
<%
}
}
%>
</body>
</html>
10. 다음은 admin으로 로그인했을 때의 실행 결과입니다.
11. 로그인창이 나타납니다.
12. 다른 ID로 로그인 시 "환영합니다. lee 님!!!"아러는 메시지가 나타납니다.
'프로그래밍 언어 > 자바 웹' 카테고리의 다른 글
| 구구단 출력 예제 (0) | 2025.10.13 |
|---|---|
| 학점 변환 예제 (0) | 2025.10.10 |
| JSP 주석문 사용하기 (0) | 2025.10.04 |
| 스크립트릿 사용하기 (0) | 2025.09.28 |
| JSP 스크립트 요소 (0) | 2025.09.25 |