Web Project

이제 준비를 마쳤으니 본격적으로 JSP를 이용해서 웹 페이지를 만들자.

JSP는 HTML, CSS, Javascript등 웹 편집언어와 같이 사용할 수 있는 Java를 말한다.

백엔드과정답게, 겉으로 보여지는 부분을 담당하기보단, 뒤에서 처리되는 데이터를 다루는 것이 주 역할이다.

HTML을 편집할때 자바를 사용해서 데이터 처리를 해보자.

지시부, 선언부, 스크립트릿

HTML사이에 Java를 사용하려면 특수한 태그가 필요하다. 생긴거에 따라 지시부, 선언부, 표현식, 스크립트릿으로 나뉜다.

<%@ %> <!-- 지시부 -->
<%! %> <!-- 선언부 -->
<%= %> <!-- 표현식 -->
<% %> <!-- 스크립트릿 -->

지시부는 page, include, taglib로 나뉘며, import할 클래스, 세션 및 버퍼의 사용여부 등 JSP페이지에서 필요한 설정 정보를 담는다.

선언부는 전역변수 및 메소드 선언에 사용한다.

표현식은 화면에 출력할 내용을 기술하고, 스크립트릿은 프로그래밍코드를 기술하는데 사용한다.

Request내장객체

예전에 HTML기초를 배울때 form이라는 태그를 이용했었다.

말 그대로 하나의 양식을 말하는데, form태그는 양식 안에 있는 정보를 action을 통해 전할 수 있다.

request내장객체는 말 그대로 서버에서 클라이언트에게 정보를 '요청(request)'하는 객체이다.

우선 우리는 저번에 만든 index.jsp를 홈페이지로 설정하고 여기서 하나씩 우리가 배우는 것을 채워나가도록 하자.

index.jsp와 같은 위치에서 jsp01_request폴더를 만들고 그 안에 formRequest.jsp를 생성하자.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>formRequest.jsp</title>
</head>
<body>
<h1>form태그를 이용한 데이터 전송</h1>
<pre>
	get방식 : 데이터 전송하는 default 방법, 변수값 url에 표시
	post방식 : 변수값을 url에 표시 안 하게 하면서 데이터를 전송하는 방법
	action="도메인+경로+파일" : form내에서 submit 발생하면 접속할 주소
</pre>
<form method="post" action="<%= request.getContextPath() %>/jsp01_request/formRequestOk.jsp">
	Username : <input type="text" name="username"><br>
	Password : <input type="password" name="password"><br>
	Name : <input type="text" name="name"><br>
	Memo : <textarea name="memo"></textarea><br>
	Interest :  
		<select name="interest">
			<option>Soccer</option>
			<option>Basketball</option>
			<option>Baseball</option>
			<option>Volleyball</option>
		</select>
	Gender : 
		<input type="radio" name="gender" value="M">Male
		<input type="radio" name="gender" value="F">Female<br>
	Region : 
		<input type="checkbox" name="location" value="Seoul">Seoul
		<input type="checkbox" name="location" value="Incheon">Incheon
		<input type="checkbox" name="location" value="Busan">Busan
		<input type="checkbox" name="location" value="Gwangju">Gwangju
		<input type="checkbox" name="location" value="Ulsan">Ulsan<br>
		<input type="submit" value="Subimt">
		<input type="button" value="Send">	<!-- 이건 아무 기능 없는 버튼 -->
</form>
</body>
</html>

form태그는 여려 방식으로 정보를 받아서 submit을 통해 받은 정보를 전달한다.

입력값의 이름을 name으로 선언하고, action객체는 그 안에 있는 링크로 정보를 전달한다.

<form method="post" action="<%= request.getContextPath() %>/jsp01_request/formRequestOk.jsp">

데이터를 전달하는 method는 get과 post 두 방식이 있다. get은 전달하는 데이터값을 주소값에 노출시키고, post는 노출시키지 않는다.

로그인할때 내 비밀번호를 만천하에 알릴 필요는 없으니 post방식을 이용하자.

<%=request.getContextPath()%>는 현재 context의 경로를 요청하는 request내장객체 메소드이다. 현재 우리의 context는 /webApp, 프로젝트명이다.

이제 formRequestOk.jsp를 만들어서 form태그로부터 데이터를 전달받자.

<%@ page import="java.util.Arrays"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>formRequestOk.jsp</title>
</head>
<body>
	<h1>form에서 submit발생함</h1>
	<%
	// post방식으로 전송할땐 한글을 인코딩해주어야한다.
	request.setCharacterEncoding("UTF-8");

	// form의 데이터를 서버로 가져오기
	String username = request.getParameter("username");
	String password = request.getParameter("password");
	String name = request.getParameter("name");
	String memo = request.getParameter("memo");
	String interest = request.getParameter("interest");
	String gender = request.getParameter("gender");
	// 같은 변수로 데이터를 여러개 보낸 경우: <checkbox>
	String location[] = request.getParameterValues("location");
	%>
	<ul>
		<li>Username : <%=username%></li>
		<li>Password : <%=password%></li>
		<li>Name : <%=name%></li>
		<li>Memo : <%=memo%></li>
		<li>Interest : <%=interest%></li>
		<li>Gender : <%=gender%></li>
		<li>Location : <%=Arrays.toString(location)%></li>
	</ul>
	<hr>
	<ol>
		<li>Connected IP Address : <%= request.getRemoteAddr() %></li>
		<li>Encoding : <%= request.getCharacterEncoding() %></li>
		<li>ContentType : <%= request.getContentType() %></li>
		<li>Method : <%= request.getMethod() %></li>
		<li>HTTP Protocol : <%= request.getProtocol() %></li>
		<li>URI : <%= request.getRequestURI() %></li>	<!-- context명, 경로, 파일명 -->
		<li>ContextPath : <%= request.getContextPath() %>	<!-- context->/webApp form action에 파일경로 넣을때 사용 가능-->
		<li>Server name : <%= request.getServerName() %></li>	<!-- Domain, ip -->
		<li>Port : <%= request.getServerPort() %></li>
		<li>Servlet Context : <%= request.getServletContext().getRealPath("/img") %></li>
		<li>Query : <%= request.getQueryString() %></li>	<!-- get방식의 쿼리문 -->
	</ol>
</body>
</html>

formRequest.jsp에서 submit을 통해 formRequestOk.jsp로 이어지면서 입력값들은 각자의 name으로 넘어왔다.

우리는 request라는 JSP내장객체의 메소드를 이용해서 데이터처리를 할 수 있다.

우선 한글로 이루어진 데이터를 post방식으로 받을땐 인코딩해줘야한다.

<% request.setCharacterEncoding("UTF-8"); %>

request.getParameter()는 전달받은 데이터를 불러올 수 있는 아주 중요한 메소드이다.

이 메소드의 입력값에 아까 form이 submit해준 데이터의 name을 넣어주면 데이터를 불러올 수 있다.

checkbox를 통해 한번에 여러개의 데이터를 보냈을땐 배열로 저장할 수 있다.

밑으로는 표현식으로 바로 구할 수 있는 request내장객체의 다양한 메소드들이다.

Response내장객체

서버에서 request로 데이터를 불러왔다면, 이젠 서버에서 클라이언트에게 데이터를 되돌려줄 수 있다.

이를 response내장객체로 수행할 수 있다.

새로운 jsp02_response폴더안에 login.jsp와 loginOk.jsp를 생성하자.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>login.jsp</title>
<script>
	// 아이디와 비밀번호를 모두 입력했는지 확인하기
	function loginCheck() {
		// 아이디, 비밀번호가 있는지 확인
		var username = document.getElementById("username").value; /* <input type="text" name="username" id="username"> */
		var password = document.getElementById("password").value;
		if(username==""){
			alert("Please insert username");
			return false;
		}
		if(password==""){
			alert("Please insert password")
			return false;
		}
		return true;		
	}
</script>
</head>
<body>
	<h1>Sign in</h1>
	<form method="post" action="/webApp/jsp02_response/loginOk.jsp" onsubmit="return loginCheck()">	<!-- onsubmit이 true면 action실 -->
		Username : <input type="text" name="username" id="username"><br>	<!-- name은 서버에서 사용, id는 CSS,JS에 사용 -->
		Password : <input type="password" name="password" id="password"><br>
		<input type="submit" value="Sign in">
	</form>
</body>
</html>

아이디와 비밀번호를 입력해서 서버로 보내주고, 서버는 전달받은 아이디와 비밀번호를 DB에 조회해서 맞는지 확인 후 맞으면 홈페이지로 연결, 실패하면 재시도 메시지를 띄울 것이다.

로그인할때 아예 입력을 안 하고 넘어갈 순 없으므로, 빈칸이 아닌지 확인하는 과정을 Javascript로 작성했다.

<script>
	// 아이디와 비밀번호를 모두 입력했는지 확인하기
	function loginCheck() {
		// 아이디, 비밀번호가 있는지 확인
		var username = document.getElementById("username").value; /* <input type="text" name="username" id="username"> */
		var password = document.getElementById("password").value;
		if(username==""){
			alert("Please insert username");
			return false;
		}
		if(password==""){
			alert("Please insert password")
			return false;
		}
		return true;		
	}
</script>

이 function을 form태그에 onsubmit을 통해 실행할지 말지를 결정할 수 있다.

onsubmit이 false라면 form태그는 action을 실행하지 않을 것이다.

<form method="post" action="/webApp/jsp02_response/loginOk.jsp" onsubmit="return loginCheck()">	<!-- onsubmit이 true면 action실행 -->

이제 아이디와 비밀번호가 DB에 존재하는지 확인해보자.

<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%!
	public Connection getConnection(){
		Connection conn = null;
		
		String url = "jdbc:oracle:thin:@localhost:1521:xe";
		try{
			// 드라이버 로딩
			Class.forName("oracle.jdbc.driver.OracleDriver");
			
			// DB연결
			conn = DriverManager.getConnection(url, "poby", "981024");
			
		}catch(Exception e){
			e.printStackTrace();
		}
		return conn;
}
%>
<%
	// client 로그인폼에 아이디와 비밀번호를 입력하고 submit을 발생시키면 요청하는 페이지
	
	// client가 입력해놓은 아이디와 비밀번호를 서버로 request객체를 이용하여 가져온다
	String username = request.getParameter("username");
	String password = request.getParameter("password");
	
	// DB를 연결시키기 위해서는 ojdbc.jar파일을 WEB-INF/lib폴더 안에 추가
	
	// 1. 드라이버 로딩, 2. DB연결
	Connection conn = getConnection();
	
	// 3. PreparedStatement
	String sql = "select count(username) from member_tbl where username=? and password=?";
	PreparedStatement pstmt = conn.prepareStatement(sql);
	
	pstmt.setString(1, username);
	pstmt.setString(2, password);
	
	ResultSet rs = pstmt.executeQuery();
	
	if(rs.next()){	// 커서 이동
		int cnt = rs.getInt(1);	// count(username)의 결과값
		/* if(cnt==1){	// 로그인 성공 -> 아이디, 비밀번호 일치
			// 홈페이지로 이동
			response.sendRedirect(request.getContextPath() + "/index.jsp");	//response.sendRedirect("/webApp");
		}else{	// 로그인 실패 -> 아이디, 비밀번호 중 1개 이상이 일치하지 않음
			// 로그인 페이지로 이동
			response.sendRedirect(request.getContextPath() + "/jsp02_response/login.jsp");
		} */
		
		// Client에게 로그인 성공여부 대화상자 띄워주기
		if(cnt>0){
			%>
			<script>
				alert("Sign in complete. Proceeding to website...");
				// document, location, history, window, screen... --> JS 명령어들
				location.href = "<%= request.getContextPath() %>";
			</script>
			<%
		}else{
			%>
			<script>
				alert("Invalid username or password.");
				// history.go(): +forward/-back, history.forward(), history.back()
				history.back();
			</script>
			<%
		}
	}
%>

선언부에 DB와 연결하는 getConnection()클래스를 만들었다.

request.getParameter()를 통해 아이디와 비밀번호를 가져오고, DB의 member테이블에 해당 아이디와 비밀번호가 일치하는 데이터가 있는지 개수를 세어서 확인했다. 어차피 DB모델링할때 아이디는 PRIMARY KEY로 설정되어 중복될 일이 없기 때문이다.

만약 일치하는 데이터 개수가 1이라면 로그인 성공, 0이라면 실패인 것이다.

<%
    if(rs.next()){	// 커서 이동
            int cnt = rs.getInt(1);	// count(username)의 결과값
            if(cnt==1){	// 로그인 성공 -> 아이디, 비밀번호 일치
                // 홈페이지로 이동
                response.sendRedirect(request.getContextPath() + "/index.jsp");	//response.sendRedirect("/webApp");
            }else{	// 로그인 실패 -> 아이디, 비밀번호 중 1개 이상이 일치하지 않음
                // 로그인 페이지로 이동
                response.sendRedirect(request.getContextPath() + "/jsp02_response/login.jsp");
            }
    }
%>

중간에 주석처리된 부분에서 response.sendRedirect()를 통해 로그인 성공이면 바로 홈페이지인 index.jsp, 실패면 다시 아이디/비밀번호 입력 페이지로 보내주었다. 하지만 클라이언트에게 로그인이 성공인지 실패인지 알림창으로 알려주려면 Javascript의 alert()를 사용해야한다. 또한 Javascript로도 홈페이지로 보내거나 뒤로가기를 실행할 수 있다.

JSP에서 출력문 사용하기

우리의 홈페이지 index.jsp에서 서버 시간을 출력하여 표시해보자.

<%
    // JSP : Java Server Page = php, asp
    System.out.println("JSP에서 출력문 사용하기");

    // 서버 컴퓨터의 날짜/시간 정보 구하기
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy년 MM월 dd일 HH:mm");
    Calendar servertime = Calendar.getInstance();
    int year = servertime.get(Calendar.YEAR);	// now.get(1)이랑 같음
    int month = servertime.get(Calendar.MONTH)+1;	// 0->1월, 1->2월,... 
    int day = servertime.get(Calendar.DAY_OF_MONTH);
    int hour = servertime.get(Calendar.HOUR_OF_DAY);
    int minute = servertime.get(Calendar.MINUTE);
    String time = sdf.format(servertime.getTime());
%>
<h1>서버 시간 = <%= year %>년 <%= month %>월 <%= day %>일 <%= hour %>:<%= minute %></h1>
<h1>Server Time = <%= time %></h1>

평소에 Java를 할때 콘솔에 출력하려 쓰던 System.out.println()은 웹페이지에선 적용되지 않는다. 저 줄이 살아있다면 매번 index.jsp를 새로고침할때마다 콘솔에 출력될 것이다.

Calendar.getInstance()로 현재 시간에 대한 인스턴스를 불러오고, SimpleDateFormat을 import하여 원하는 날짜형식을 정해준 다음, SimpleDateFormat.format()으로 시간 변수에 서버시간을 선언하고 난 뒤,

<h1>Server Time = <%= time %></h1>

표현식으로 웹페이지에 출력할 수 있다.

저작자표시 (새창열림)

'JSP' 카테고리의 다른 글

11.29.(화) JSP(6): 웹페이지 배포  (0) 2022.12.01
11.29.(화) JSP(5): Error  (0) 2022.11.30
11.29.(화) JSP(4): Session  (0) 2022.11.30
11.29.(화) JSP(3): Cookie  (0) 2022.11.30
11.24.(금) JSP(1): 톰캣 설치  (0) 2022.11.30

+ Recent posts

티스토리툴바