본문 바로가기
Java 웹 개발

21.10.18 - 웹 개발 입문 46일차

개발이란 2021. 10. 18. 23:17

홈페이지 구현하기(1)

홈페이지를 4단으로 구성
= 1단 : 메인로고 등 대표정보 (header.jsp) - 템플릿페이지
= 2단 : 각종 기능으로 이동할 수 있는 메뉴 (index.jsp)
= 3단 : 홈페이지에 표시될 내용들.. (index.jsp)
= 4단 : 기업정보 or 제휴컨텐츠 등... (footer.jsp) - 템플릿페이지

 

 

- 템플릿페이지

템플릿 페이지란?
만약 HTML로 설계한다고 했을 때, 매번 변경될 때 새로운 페이지를 생성할 때 마다 계속 코딩해줘야되는
단점이 있다. 

이러한 부분을 해결하기 위해 상단, 하단은 고정하고, 중간만 변경하게 할 수 있는 페이지다.
= 직접 실행되는 것이 아니라 특정 페이지에 합쳐져서 실행된다
= 어느 페이지에서 실행될지, 기준점 주소가 어딘지 알 수 없다
= (결론) 상대경로 사용 불가
= 절대경로는 context root path 를 적어야 하는데 이것은 변경될 수 있다.
= 변경될 때마다 일일이 수정할 수는 없기 때문에 context path를 구하는 명령이 필요하다.
= request.getContextPath() 명령을 이용하여 구할 수 있다.

 

- 템플릿페이지 header.jsp 만들기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Homepage</title>
</head>
<body>

	<table border="1" width="1000" align="center">
		<tbody align="center">
			<tr>
				<td>
					<br>
					<img src="/home/resource/image/apple.png" width="250" height="50">
					<h3>Apple 공식사이트</h3>
				</td>
			</tr>
			<tr>
				<td>
					 <%
					 	String root = request.getContextPath();
					 %>
					<a href="<%=root%>/index.jsp">홈으로</a>
					<a href="<%=root%>/member/join.jsp">회원가입</a>
					<a href="<%=root%>/member/login.jsp">로그인</a>
					<a href="#">로그아웃</a>
					<a href="#">내정보</a>
					<a href="#">게시판</a>
				</td>
			</tr>
			<tr>
				<td>

 

- 템플릿페이지 footer.jsp 만들기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
					<br><br>
				</td>
			</tr>
			<tr>
				<td align="left">
				<!-- pre 태그 내부에 적힌 데이터는 그 모양 그대로 출력된다. -->
					<pre>사업자등록번호 :               | 통신판매업신고번호 :               | 대표이사 :             | 주소 :             | 대표전화 :               | 팩스 :             </pre>
				</td>
			</tr>	
		</tbody>
	</table>
	</body>
</html>

 

 

- index.jsp 만들고 header.jsp, footer.jsp 랑 합치기

 

정적 include : 컴파일 이전에 합쳐지므로 불러올 파일의 내용을 사용할 수 있다(우리는 하나)
<%@ include file="/template/header.jsp" %>
동적 include : 컴파일 이후에 합쳐지므로 불러올 파일의 내용을 사용할 수 없다(너는너 나는나)
<jsp:include page="/template/header.jsp"></jsp:include>

 

정적 include
<%@ include file="/template/footer.jsp" %>
동적 include
<jsp:include page="/template/footer.jsp"></jsp:include>>

 

정적, 동적 include 예시

 

- 동적 include 사용

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<jsp:include page="/template/header.jsp"></jsp:include>

<h2>내가 만든 첫 번째 홈페이지</h2>
<img src="./resource/image/iphone.jfif" width="700">

<jsp:include page="/template/footer.jsp"></jsp:include>>

 

- 회원 가입 페이지 만들기

(알아둘 것)

form 전송방식
= form은 데이터 전송방식을 GET/POST 중에서 고를 수 있다.
= 적지 않으면 GET 형태로 전송한다.


= GET은 주소 뒷부분에 ?를 시작으로 한 파라미터 문자열(Query String) 형태로 데이터를 첨부
= 장점 : 편하다. form이 아니어도 a태그 등으로도 데이터를 전달할 수 있다.
= 단점 : 데이터가 주소에 노출, 주소는 256byte까지 밖에 작성이 안되므로 크기 제한이 있음


= POST는 주소 뒷부분이 아닌 HTTP Body에 데이터를 첨부
= 장점 : 데이터가 주소에 노출되지 않음. 첨부 데이터 길이가 무제한
= 단점 : 불편하다. form이 있어야 전송이 가능하며, 데이터가 ASCII로 변환되어 전송된다.


= GET/POST는 보안과 관계가 없다.

 

- 회원 가입 메인 페이지 join.jsp 만들기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<jsp:include page="/template/header.jsp"></jsp:include>>

<h1>회원가입</h1>

<form action="join.txt" method=post>
	
	<table border="0">
		<tbody>
			<tr>
				<th>아이디</th>
				<td>
					<input type="text" name="memberId" required>
				</td>
			</tr>
			<tr>
				<th>비밀번호</th>
				<td>
					<input type="password" name="memberPw" required>
				</td>
			</tr>
			<tr>
				<th>닉네임</th>
				<td>
					<input type="text" name="memberNick" required>
				</td>
			</tr>
			<tr>
				<th>생년월일</th>
				<td>
					<input type="date" name="memberBirth" required>
				</td>
			</tr>
			<tr>
				<th>이메일</th>
				<td>
					<input type="email" name="memberEmail">
				</td>
			</tr>
			<tr>
				<th>전화번호</th>
				<td>
					<input type="tel" name="memberPhone">
				</td>
			</tr>
			<tr>
				<!-- 
					colspan을 사용하면 셀 1개를 특정 칸 수만큼 늘릴 수 있다.
					rowspan을 사용하면 셀 1개를 특정 줄 수만큼 늘릴 수 있다.
					두 개를 동시에 사용하진 않는다 
				-->
				<td colspan="2" align="right">
					<input type="submit" value="가입">
				</td>
			</tr>
		</tbody>
	</table>
</form>

<jsp:include page="/template/footer.jsp"></jsp:include>>

 

- 회원 가입 완료 페이지 join_success.jsp만들기

(상대경로, 절대경로 다양한 방법으로 해보기)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<jsp:include page="/template/header.jsp"></jsp:include>>

<h2>회원 가입 완료</h2>

<h4><a href="login.jsp">로그인하기</a></h4>
<h4><a href="<%=request.getContextPath()%>/member/login.jsp">로그인하기</a></h4>
<h4><a href="../index.jsp">메인페이지 보기</a></h4>
<h4><a href="<%=request.getContextPath()%>/index.jsp">메인페이지 보기</a></h4>
<h4><a href="<%=request.getContextPath()%>/">메인페이지 보기</a></h4>

<jsp:include page="/template/footer.jsp"></jsp:include>>

 

- 회원 가입 처리 서블릿 MemberJoinServlet.java 만들기

회원 가입 처리 서블릿
= 입력창의 전송형태에 따라 메소드를 선택할 수 있다.
= service()는 모든 방식을 수용하는 메소드
= doGet()은 GET 방식만 수용하는 메소드
= doPost()는 POST 방식만 수용하는 메소드

 

= 문제점 : POST 방식으로 전송될 경우 유니코드가 ASCII코드로 변경되어 전송된다.
= 해결책 : 수신한 데이터를 원래의 인코딩방식으로 변환하도록 지시한다.
= 주의 : 반드시 수신 전에 복원명령을 작성해야 한다.

 

(MemberDao, MemberDto는 기존에 만든 것임)

package home.servlet.member;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import home.beans.MemberDao;
import home.beans.MemberDto;

@WebServlet(urlPatterns = "/member/join.txt")
public class MemberJoinServlet extends HttpServlet {
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			//입력 : MemberDto
			req.setCharacterEncoding("UTF-8");
			MemberDto memberDto = new MemberDto();
			memberDto.setMemberId(req.getParameter("memberId"));
			memberDto.setMemberPw(req.getParameter("memberPw"));
			memberDto.setMemberNick(req.getParameter("memberNick"));
			memberDto.setMemberBirth(req.getParameter("memberBirth"));
			memberDto.setMemberEmail(req.getParameter("memberEmail"));
			memberDto.setMemberPhone(req.getParameter("memberPhone"));

			//처리 : MemberDao
			MemberDao memberDao = new MemberDao();
			memberDao.join(memberDto);

			//출력 : 리다이렉트
			resp.sendRedirect("join_success.jsp");
		}
		catch(Exception e) {
			e.printStackTrace();
			resp.sendError(500);//사용자에게 500번 상태값을 전송(500은 Internal server error)
		}
	}
}

 

- 로그인 페이지 만들기

- 로그인 메인 페이지(login.jsp) 만들기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<jsp:include page="/template/header.jsp"></jsp:include>>

<h1>회원 로그인</h1>

<form action="login.txt" method="post">
	<table border="0">
		<tbody>
			<tr>
				<th>아이디</th>
				<td>
					<input type="text" name="memberId" required>
				</td>
			</tr>
			<tr>
				<th>비밀번호</th>
				<td>
					<input type="password" name="memberPw" required>
				</td>
			</tr>
		</tbody> 
		<tfoot>
			<tr>
				<td colspan="2" align="right">
					<input type="submit" value="로그인">
				</td>
			</tr>
		</tfoot>
	</table>
</form>

	<%-- 
		error 발생시 처리 구현 코드 작성
	--%>
    
<jsp:include page="/template/footer.jsp"></jsp:include>>

 

- login.jsp에 추가로 error 발생시 처리 구현 코드 작성

error라는 이름의 파라미터가 존재하면 오류 메세지를 출력하도록 처리
ex) 주소?error=100
ex) 주소?error

<%if(request.getParameter("error") != null){ %>
	<h5>
		<font color="red">로그인 정보가 일치하지 않습니다</font>
	</h5>
<%} %>

 

- 로그인 처리 서블릿(MemberLoginServlet.jsp) 만들기

package home.servlet.member;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import home.beans.MemberDao;
import home.beans.MemberDto;

@WebServlet(urlPatterns = "/member/login.txt")
public class MemberLoginServlet extends HttpServlet{
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			//입력 : memberId, memberPw
			req.setCharacterEncoding("UTF-8");
			String memberId = req.getParameter("memberId");
			String memberPw = req.getParameter("memberPw");

			//처리
			MemberDao memberDao = new MemberDao();
			MemberDto memberDto = memberDao.get(memberId);

			//회원이 있는데 비밀번호까지 같다면 로그인이 성공한것으로 간주하고 싶다!
			boolean isLogin = memberDto != null && memberPw.equals(memberDto.getMemberPw()); 

			//출력
			if(isLogin) {
				//resp.sendRedirect("../index.jsp");//상대
				//resp.sendRedirect("/home/index.jsp");//절대
				resp.sendRedirect(req.getContextPath() + "/index.jsp");//절대
			}
			else {
				resp.sendRedirect("login.jsp");
			}
		}
		catch(Exception e) {
			e.printStackTrace();
			resp.sendError(500);
		}
	}
}

 

 

 

홈페이지 - 로그인 유지 처리(세션 사용)

세션

= 서버에서 사용자가 정보를 관리하기 위한 단골수첩과 같은 저장소(Map 형태)
= 세션(단골수첩)에 사용자가 로그인 했음을 key=value 형태로 저장하면 이후에 확인이 가능
= 저장형태는 String, Object
= 서블릿에서는 req.getSession() 이라는 명령으로 접근이 가능
= 여기서는 가장 중요한 회원정보인 회원아이디를 ses라는 이름으로 저장 (ses : 다른 이름으로 해도 상관없다)

- 로그인 처리 서블릿(MemberLoginServlet.jsp) 세션 사용해서 수정하기

package home.servlet.member;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.websocket.Session;

import home.beans.MemberDao;
import home.beans.MemberDto;

@WebServlet(urlPatterns = "/member/login.txt")
public class MemberLoginServlet extends HttpServlet{
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			//입력 : memberId, memberPw
			req.setCharacterEncoding("UTF-8");
			String memberId = req.getParameter("memberId");
			String memberPw = req.getParameter("memberPw");

			//처리
			MemberDao memberDao = new MemberDao();
			MemberDto memberDto = memberDao.get(memberId);

			//회원이 있는데 비밀번호까지 같다면 로그인이 성공한것으로 간주하고 싶다!
			boolean isLogin = memberDto != null && memberPw.equals(memberDto.getMemberPw()); 

			//출력
			if(isLogin) {
				//세션
				req.getSession().setAttribute("ses", memberId);
				
				//resp.sendRedirect("../index.jsp");//상대
				//resp.sendRedirect("/home/index.jsp");//절대
				resp.sendRedirect(req.getContextPath() + "/index.jsp");//절대
			}
			else {
				//login.jsp 로 이동하면서 ?error 파라미터를 붙여서 오류임을 표시
				resp.sendRedirect("login.jsp?error");
			}
		}
		catch(Exception e) {
			e.printStackTrace();
			resp.sendError(500);
		}
	}
}

 

- 템플릿페이지 header.jsp 세션 사용해서 수정하기 (자리는 임시로 지정)

로그인 상태인지 아닌지 판정하는 코드
= 로그인 상태라는 것은 세션에 존재하는 ses라는 데이터가 null이 아니라는 것이다.
= jsp에서는 session이라는 내장객체가 존재하기 때문에 바로 접근이 가능하다.
String ses = (String) session.getAttribute("ses");
boolean login = ses !=null;

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	String ses = (String) session.getAttribute("ses");	
	boolean login = ses !=null;
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Homepage</title>
</head>
<body>
	<table border="1" width="1000" align="center">
		<tbody align="center">
			<tr>
				<td>
					<br>
					<img src="/home/resource/image/apple.png" width="250" height="50">
					<h3>Apple 공식사이트 (ses = <%=ses%>))</h3>
				</td>
			</tr>
			<tr>
				<td>
					 <%
					 	String root = request.getContextPath();
					 %>
					<a href="<%=root%>/index.jsp">홈으로</a>
					<a href="<%=root%>/member/join.jsp">회원가입</a>
					<a href="<%=root%>/member/login.jsp">로그인</a>
					<a href="#">로그아웃</a>
					<a href="#">내정보</a>
					<a href="#">게시판</a>
				</td>
			</tr>
			<tr>
				<td>

로그인 전 ( null 표시 )

 

로그인 후 ( 아이디 표시 )

 

'Java 웹 개발' 카테고리의 다른 글

21.10.20 - 웹 개발 입문 48일차  (0) 2021.10.21
21.10.19 - 웹 개발 입문 47일차  (0) 2021.10.19
21.10.15 - 웹 개발 입문 45일차  (0) 2021.10.15
21.10.14 - 웹 개발 입문 44일차  (0) 2021.10.15
21.10.13 - 웹 개발 입문 43일차  (0) 2021.10.13

'Java 웹 개발' Related Articles

티스토리툴바