[web] 간단 홈페이지 제작

간단 홈페이지 만들기

회원가입, 로그인, 로그아웃, 정보수정, 탈퇴 기능을 가진 홈페이지를 만들어보았다.

로그인 성공하면 세션으로 로그인 상태 연결을 유지하고 로그아웃 시 세션을 삭제한다.
회원 정보 보기, 회원 정보 수정, 회원 탈퇴, 로그인 결과 페이지는 로그인 후에만 이용가능하다.

회원가입 페이지

<클라이언트>

<서버>

private void memberInsert(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	String userid=request.getParameter("userid");
	String password=request.getParameter("password");
	String email=request.getParameter("email");
	String emailAgree=request.getParameter("emailAgree");
	String[] interest=request.getParameterValues("interest"); 
	String phone=request.getParameter("phone");
	String introduce=request.getParameter("introduce");
		
	MemberVO vo=new MemberVO(userid, password, email, emailAgree, phone, introduce, interest);
	System.out.println(CLASSNAME+" "+ vo);
		
	int result=dao.insert(vo);
	System.out.println(CLASSNAME+" 저장 결과 : "+result+"행이 삽입되었습니다.");
		
	if(result==1) { 
		out.print("<head><meta charset='UTF-8'>");
		out.print("<script>alert('회원가입 성공!');</script>");
		out.print("<script>location.href='login.jsp';</script>")
		out.print("</head>");
	}
}//end memberInsert()

DB에는 배열을 저장할 수 없다. 배열의 데이터를 DB에 저장하기 위해 join()으로 , 연결해 하나의 문자열로 변경해준다

public String getInterestJoin() {
	String result=(interest==null)? "없음" : String.join(",", interest);
	return result;
}

반대로 DB에서 데이터를 가져오면 다시 배열형태로 사용해야 한다. split()으로 ,를 기준으로 배열로 만든다.

String interstJoin=rs.getString(COL_INTEREST);
String[] interest=interstJoin.split(",");

로그인 페이지

<클라이언트>

<form action="login_auth.do" method="post">
  <p>아이디<br><input type="text" name="userid" required placeholder="아이디 입력"></p>
  <p>비밀번호<br><input type="password" name="password" required placeholder="비밀번호 입력"></p>
  <p><a href="member-register.jsp"><input type="button" value="회원 가입"></a>
  &nbsp;<input type="submit" value="로그인"></p>
</form>

form에서 아이디/비밀번호 입력받기

<서버>

private void memberLogin(HttpServletRequest request, HttpServletResponse response) throws IOException {
	PrintWriter out=response.getWriter();
	
	String userid=request.getParameter("userid");
	String password=request.getParameter("password");

	String idConfirm=dao.select(userid, password);
	if(idConfirm!=null) {
		HttpSession session=request.getSession(); //세션 생성
		session.setAttribute("userid", idConfirm);
		session.setMaxInactiveInterval(60);
		System.out.println(CLASSNAME+" "+idConfirm +" session 생성"); 
		out.println("<script>location.href='/Homepage/login-result.jsp';</script>");
	}else {
		out.println("<script>alert('아이디와 비밀번호가 잘못 입력되었습니다.');</script>");
		out.println("<script>location.href='/Homepage/login.jsp';</script>");
	}		
}//end memberLogin()

DB에서 id/pw가 일치하면 성공하고 로그인 결과페이지로 이동하기.
로그인 시 세션 생성하고 로그인 상태 id값으로 60초 유지하기
로그인 결과 불일치 시 다시 로그인 페이지 이동

로그아웃

PrintWriter out=response.getWriter();
HttpSession session=request.getSession();
String userid=(String)session.getAttribute("userid");
		
if(userid!=null) {
	session.removeAttribute("userid");
	out.println("<script>alert('로그아웃 했습니다.');</script>");
	out.println("<script>location.href='/Homepage/login.jsp';</script>");
}else {
	out.println("<script>alert('로그인 해주세요!');</script>");
	out.println("<script>location.href='login.jsp';</script>");
	return;
}

form의 post형식으로 데이터를 전송한 경우 get방식으로 접근하면 잘못된 접근임을 나타내야한다.
url로 접근할 경우 보안을 위해 경로 변경하기

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	System.out.println(CLASSNAME+" doGet() 호출");
	response.sendRedirect(클라이언트 주소);
}

url로 데이터 전송

form을 사용하지않고 get방식으로 데이터를 전송하려면 url을 사용한다.

회원 정보 보기, 회원 정보 수정, 회원 탈퇴, 로그인 결과 페이지는 로그인정보를 해당 페이지에 전송해주어야한다.

세션을 사용해서 로그인정보를 유지할수도 있지만 url에 id데이터를 담아서 이동하는 방법도 사용할 수 있음

<button onclick="location.href='update.do?userid=<%=userid%>'">회원정보 수정</button>

get방식으로 데이터를 전달받은 서버에서는 doPost()메소드는 사용되지 않는다.

String userid=request.getParameter("userid");
로 url에 담긴 데이터를 사용할 수 있다.

회원정보 수정페이지

회원가입과 서버동작이 거의 동일하다

filter 사용

PrintWriter클래스를 사용할 때마다out.print("<head><meta charset='UTF-8'>"); 를 사용하는 대신

filter에 response.setContentType("text/html;charset=utf-8");를 등록해서 바로 스크립트 코드만 작성할 수 있다.

로그인 연결을 유지하기 위해서 필터를 사용할수도 있다.
나는 모든 코드에 세션이 있는지 확인한다음 시작해지만 모든 url이 동일한 세션확인을 먼저 수행할 경우 하나의 파일에서 설정해 url에 적용할 수 있다.

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
	HttpServletRequest req=(HttpServletRequest)request;
	//하위request클래스로 받아옴
	HttpSession session=req.getSession();
	String userid=(String)session.getAttribute("userid");
	
	if(userid==null) {
		//userid 세션이 없는 경우 미로그인 상태
		HttpServletResponse res=(HttpServletResponse)response;
		res.sendRedirect("/Homepage/login.jsp");
		return;
	}
	chain.doFilter(request, response);
}

세션이 있는지 없는지 확인하는 코드를 filter로 지정해 세션이 있어야만 하는 페이지 url에 연결!

url 연결은 web.xml에서! 세션유지는 클라이언트-서버 둘다에서 적용되어야 한다.

느낀점

졸작했을때만해도 나는 프론트엔드가 적성인가 싶었다. 그런데 제대로 웹개발에 대해 배워보면서 난.. 프론트는... 절레절레 아자아자백엔드!👏

벌써 국비 진행한지 3개월이 되어간다.
개인적으로 학점을 위해 암기만 했던 4년보다 유익한 시간같다.

지금까지 배운거로 이러는게 남들이보면 웃기겠지만..ㅎ 추석연휴 잘 쉬었으니 남은 3개월도 가보자고~ﾍ(=￣∇￣)ﾉ

Author And Source

이 문제에 관하여([web] 간단 홈페이지 제작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yeddoen/web-간단-홈페이지-제작

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)