[JSP]스크립트 요소 사용 예

티스토리 뷰

JSP

[JSP]스크립트 요소 사용 예

dev23 2024. 8. 14. 16:15

로그인 예

- 로그인 화면에서 ID와 비밀번호를 입력한 후 JSP로 전송하여 출력한다.

* login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</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>

* result.jsp

<%@ 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");
	// getParameter() 메서드를 이용해 입력 정보를 가져온다.
	String user_id = request.getParameter("user_id");
	String user_pw = request.getParameter("user_pw");
%>
	<!-- ID와 비밀번호를 표현식으로 출력한다. -->
	<h1>아이디 : <%= user_id %></h1>
	<h1>비밀번호 : <%=user_pw %></h1>
</body>
</html>

- 코드 작성 후 파일이 위치한 경로를 브라우저에 입력하여 로그인 페이지에 접속한다.

- 입력 후 [로그인] 버튼을 누르면 다음과 같이 출력된다.

- 다음은 아이디를 입력하지 않은 경우에 대해 처리하는 JSP 이다.

* result.jsp

<%@ 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");
	// getPaarameter() 메서드를 이용해 입력 정보를 가져온다.
	String user_id = request.getParameter("user_id");
	String user_pw = request.getParameter("user_pw");
	
	// ID가 정상적으로 입력되었는지 확인.
	if(user_id == null || user_id.length() == 0){
%>
	<!-- ID를 입력하지 않았을 경우 로그인창으로 이동 -->
	아이디를 입력하세요!<br>
	<a href="login.html">로그인하기</a>
<%
	}else{
%>
	<!-- ID를 정상적으로 입력했을 경우 메시지를 표시 -->
	<h1>환영합니다. <%=user_id %>님!</h1>
<%
	}
%>
</body>
</html>

학점 변환 예제

- 다음은 입력한 점수에 따라 등급을 표시하는 JSP 예이다.

* scoreTest.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>학점 계산기</title>
</head>
<body>
	<h1>시험 점수를 입력하세요!</h1>
	<form method="get" action="scoreTest.jsp">
		시험점수 : <input type="text" name="score"/><br>
		<input type="submit" value="변환!">
	</form>
</body>
</html>

* scoreTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
	int score=Integer.parseInt(request.getParameter("score"));
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>학점 변환</title>
</head>
<body>
	<h1>시험 점수 <%=score %></h1><br>
	<%
		if(score>=90){
	%>
	<h1>A학점입니다!</h1>
	<%
		}else if(score>=80 && score<90){
	%>
	<h1>B학점입니다!</h1>
	<%
		}else if(score>=70 && score<80){
	%>
	<h1>C학점입니다!</h1>
	<%
		}else if(score>=60 && score<70){
	%>
	<h1>D학점입니다!</h1>
	<%
		}else{
	%>
	<h1>F학점입니다!</h1>
	<%
		}
	%><br>
	<a href="scoreTest.html">시험점수 입력</a>	
</body>
</html>

- 입력한 점수에 따라 등급을 표시한다.

구구단 출력 예제

- 입력한 수에 9까지 곱한 값을 출력하는 구구단 예제이다.

* gugudan.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>단수 입력</title>
</head>
<body>
	<h1>구구단의 단수를 입력해주세요!</h1>
	<form method="get" action="gugudan.jsp">
		출력한 구구단: <input type="text" name="dan" /><br>
		<input type="submit" value="출력하기"/>
	</form>
</body>
</html>

* gugudan.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	request.setCharacterEncoding("utf-8");
	int dan = Integer.parseInt(request.getParameter("dan"));
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>출력창</title>
<style>
	a{
		text-decoration: none;
	}
</style>
</head>
<body>
	<%
		if (dan < 2 || dan > 9){
	%>
		<h1>2~9 사이의 값을 입력해주세요!</h1>
		<a href="gugu.html">단수 다시 입력하기</a>
	<%
		}else{
	%>
	<table border='1' width='800'>
		<tr align='center' bgcolor='#FFFF66'>
			<td colspan='2'><%=dan %>단 출력 </td>
		</tr>
	<%
		for(int i = 1; i<10; i++){
	%>	
		<tr align='center'>
			<td width='400'>
				<%=dan %> * <%=i %>
			</td>
			<td width='400'>
				<%=i*dan %>
			</td>
		</tr>
	<%
		}
	%>
	</table><br>
	<a href="gugudan.html">단수 입력창으로 돌아가기</a>
	<%
	}
	%>


	
</body>
</html>

- 숫자 입력 시 9까지 곱한 값이 출력된다.

회원 정보 조회 예

- 이름을 입력하여 DB에 저장된 회원을 조회한 후 JSP 페이지에 출력한다.

- 데이터베이스 설정 정보는 다음 글을 참고한다.

https://dev1023.tistory.com/71

서블릿 - 비즈니스 로직 처리

- 서블릿 비즈니스 처리 작업이란 서블릿이 클라이언트로부터 요청을 받으면 그 요청에 대해 작업을 수행하는 것을 의미한다.- 웹 프로그램에서 대부분의 비즈니스 처리 작업은 DB 연동 관련 작

dev1023.tistory.com

* MemberDAO.java

package dao;

import java.sql.Connection;
import java.sql.Date;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;

import vo.MemberVO;

public class MemberDAO {
	
	private Connection conn;
	private PreparedStatement pstmt;
	private DataSource dataFactory;

	public MemberDAO() {
		Context ctx;
		try {
			// JNDI에 접근하기 위해 기본 경로("java:/comp/env")를 지정
			ctx = new InitialContext();
			Context envContext = (Context)ctx.lookup("java:/comp/env");
			// 톰캣 context.xml에 설정한 name 값인 jdbc/mysql을 이용해 톰캣이 미리 연결한 DataSource를 받아 옴.
			dataFactory = (DataSource)envContext.lookup("jdbc/mysql");
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}
	}
	
	// 멤버 목록 확인 메서드
	public List listMembers(MemberVO vo) {
		List list = new ArrayList();
		String _name = vo.getName();
		
		try {
			// connDB();
			conn = dataFactory.getConnection();	// DB에 연결
			String query = "SELECT * FROM t_member ";
			if((_name != null && _name.length() != 0 )) {
				query += "WHERE name = ?";
				pstmt = conn.prepareStatement(query);
				pstmt.setString(1, _name);
			}else {
				pstmt = conn.prepareStatement(query);
			}
			
			System.out.println("prepareStatememt: " + query);
			
			ResultSet rs = pstmt.executeQuery();
			
			while (rs.next()) {
				String id = rs.getString("id");
				String pwd = rs.getString("pwd");
				String name = rs.getString("name");
				String email = rs.getString("email");
				Date joinDate = rs.getDate("joinDate");
				
				MemberVO member = new MemberVO();
				member.setId(id);
				member.setPwd(pwd);
				member.setName(name);
				member.setEmail(email);
				member.setJoinDate(joinDate);
				
				list.add(member);
			}
			
			rs.close();
			pstmt.close();
			conn.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return list;
	}
	
}

- 이름을 검색하는 페이지를 작성한다.

* search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 검색창</title>
</head>
<body>
	<form method="post" action="member.jsp" encType="utf-8">
		이름 : <input type="text" name="name"><br>
		<input type="submit" value="조회하기" />
	</form>
</body>
</html>

- 다음은 조회 결과를 출력하는 페이지다.

* member.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    import="vo.*, dao.*, java.util.*"
    %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 정보 출력창</title>
<style>
	h1{
		text-align: center;
	}
</style>
</head>
<body>
	<h1> 회원 정보 출력 </h1>
<%
	
	request.setCharacterEncoding("utf-8");
	String _name = request.getParameter("name");
	MemberVO vo = new MemberVO();
	vo.setName(_name);
	
	MemberDAO dao = new MemberDAO();
	List memberList = dao.listMembers(vo);
%>
	<table border="1" width="800" align="cetner">
		<tr align="center" bgcolor="#ffff66">
		<td>아이디</td>
		<td>비밀번호</td>
		<td>이름</td>
		<td>이메일</td>
		<td>가입일자</td>
	</tr>
	<%
		for(int i = 0; i < memberList.size() ; i++){
			MemberVO vo2 = (MemberVO)memberList.get(i);
			String id = vo2.getId();
			String pwd = vo2.getPwd();
			String name = vo2.getName();
			String email = vo2.getEmail();
			Date joinDate = vo2.getJoinDate();
	%>
	<tr align="center">
		<td><%=id %></td>
		<td><%=pwd %></td>
		<td><%=name %></td>
		<td><%=email %></td>
		<td><%=joinDate %></td>
	</tr>
	<%
		}
	%>
	</table>
</body>
</html>

저작자표시

'JSP' 카테고리의 다른 글

[JSP]예외 처리 (0)	2024.08.14
[JSP]내장 객체 (0)	2024.08.14
[JSP]스크립트 요소(선언문, 스크립틀릿, 표현식, 주석문) (0)	2024.08.13
JSP의 구성 요소 (0)	2024.08.13
JSP(Java Server Page) (0)	2024.08.13

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

글 보관함

개발 공부

티스토리 뷰