모도리는 공부중

21.01.14. JSP&Servlet - 웹페이지 회원가입, 로그인 본문

K-디지털 빅데이터 분석서비스 개발자과정 20.11.02~21.04.12/JAVA

21.01.14. JSP&Servlet - 웹페이지 회원가입, 로그인

공부하는 모도리 2021. 1. 14. 17:03
728x90
반응형
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<%
		/* 방문자수는 다같이 올라가야하므로 application에 넣어야한다.
		session에 넣으면 각자 방문자수가 다르게 올라가므로 application 사용! */
		
		application.setAttribute("today", "1");
		
		// 값을 꺼내서 String타입 today에 저장.
		String today = (String) application.getAttribute("today");
	%>
	오늘 방문자 수 : <%= today %>
</body>
</html>

자, 이게 어제 숙제 내주기 전까지의 코드입니다.

 

값이 있다면 특정 값을 반영하지만 값이 없다면 null을 반환하게 된다. today가 null이라는 것은 application에 값을 한 번도 넣어주지 않았다는 뜻. null이 아니라는 것은 어떤 값이 들어갔다는 것을 의미한다.

이것을 활용하여 방문자수를 늘려줄 수 있다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<%
		/* 방문자수는 다같이 올라가야하므로 application에 넣어야한다.
		session에 넣으면 각자 방문자수가 다르게 올라가므로 application 사용! */
		
		// 값을 꺼내서 String타입 today에 저장.
		String today = (String) application.getAttribute("today");
	
		if(today == null){
			application.setAttribute("today", "1");
		}else{
			int value = Integer.parseInt(today);
			value++;
			application.setAttribute("today", value+"");
			// String.valueOf(value)를 넣으면 value가 문자형으로 바뀐다. 혹은
			// value+""를 사용해서 문자형으로 변환해주어도 좋다.
		}
		
		today = (String)application.getAttribute("today");
	%>
	오늘 방문자 수 : <%= today %>
</body>
</html>

 

이제 새로고침할 때마다 방문자 수가 올라가게 설정 완료.

이 방문자 수가 모두가 공유되고 있는게 맞는지 모르겠다구요? (선생님의 주소를 공유해주심)

계속 늘어나고 있는 것을 확인할 수 있다.

 

 

 

 

 

 

 

웹 프로젝트를 내부에 넣어서 홈페이지 실습을 해봅시다.

import 팝업을 켜서 받은 파일 추가. 우리는 압축을 풀지 않은 상태로 진행할 것이기 때문에 Select root directory가 아닌 Select archive file을 선택하여 추가해주도록 한다.

잘 추가됐다면

이렇게 뜨는 것을 볼 수 있다. 방금 추가한 프로젝트에서 오른쪽 단추.

다른 사람이 설정한 환경을 밀어버리고 우리만의 환경으로 다시 설정하기 위해 순서대로 진행하며 지워주세요.

 

그리고 다음과 같이 진행하며 다시 설정해줍시다.

 

끝난줄 알았죠? 하나 더 해줘야합니다.

더블 클릭해서 들어가 해당부분 체크 후 finish.

Apply and Close.

 

다음의 3가지를 배우도록 하겠습니다.

  1. 회원정보 수정 & 로그아웃
  2. 내가 원하는 사람에게 메세지를 보내는 기능
  3. 게시판 기능 ← 교육 시간상 부족하다면 영상을 찍어서 올려주시겠다고 하니..
    최대한 교육시간 안에 배울 수 있기를.

 

xe가 생겨야 한다.

sql.sql 실행.

테이블을 생성해보도록 합시다.

create table web_member(
	email varchar2(200),
	pw varchar2(200),
	tel varchar2(200),
	address varchar2(200)
)

입력한 부분을 드래그해서 alt + x 를 누르면 블럭 잡은 코드만 실행된다.

혹시 오류가 났다면 에러명을 확인해보자.

 

ORA-00907: missing right parenthesis → 오른쪽에 오타가 있습니다.

invalid identifier → create 테이블에 오타가 있습니다.

 

액션 : 데이터를 어디로 보낼지 주소.

네임 : 데이터에 이름표를 붙이는 것. 데이터를 보낼 때 이름표를 붙여야 제대로 꺼내올 수 있으므로.

서브밋 : 데이터를 보내는 시점. 행위.

 

42번째 라인부터 시작하겠습니다.

<ul class="actions vertical">
	<li><h5>회원가입</h5></li>
		<form>
			<li><input type="text"  placeholder="Email을 입력하세요"></li>
			<li><input type="password"  placeholder="PW를 입력하세요"></li>
			<li><input type="text"  placeholder="전화번호를 입력하세요"></li>
			<li><input type="text"  placeholder="집주소를 입력하세요"></li>
			<li><input type="submit" value="JoinUs" class="button fit"></li>
		</form>
</ul>

회원가입 폼을 보내줄 액션과 데이터 전송 방식을 선택 후 각각의 input에 name을 달아주자.

<ul class="actions vertical">
	<li><h5>회원가입</h5></li>
		<form action="JoinService" method="post">
			<li><input name="email" type="text"  placeholder="Email을 입력하세요"></li>
			<li><input name="pw" type="password"  placeholder="PW를 입력하세요"></li>
			<li><input name="tel" type="text"  placeholder="전화번호를 입력하세요"></li>
			<li><input name="address" type="text"  placeholder="집주소를 입력하세요"></li>
			<li><input type="submit" value="JoinUs" class="button fit"></li>
		</form>
</ul>

 

 

com.controller는 com폴더 안에 controller라는 하위폴더를 생성해주는 명령어.

package com.controller;

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;

@WebServlet("/JoinService")
public class JoinService extends HttpServlet {

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// email, pw, tel, address개의  입력한 데이터를 콘솔창에 출력하시오.
		String email = request.getParameter("email");
		String pw = request.getParameter("pw");
		String tel = request.getParameter("tel");
		String address = request.getParameter("address");
//		요청한 객체를 가져오는 것은 getParameter
		
		// 콘솔창에 출력할 것이므로 syso를 통해 실행해보자.
		System.out.println(email+"/"+pw+"/"+"/"+tel+"/"+address);
		
	}

}

 

한글을 올바르게 받아오지 못하는 현상 발생. 왜? 인코딩이 빠졌기 때문.

String으로 값을 받아오기 전에 먼저 request에 인코딩을 해주도록 하자.

request.setCharacterEncoding("EUC-KR");

한글로 된 값을 잘 받아와서 표현해주는 것을 볼 수 있다.

 

그리고 새로운 클래스를 생성해줍시다.

생성했다면 다시 JoinService.java로 돌아와서,

dao.join(email,pw,tel,address);

이렇게 하나로 묶어서 회원가입을 진행해야한다. 그 때 필요한 것이 바로 DTO(Java에서 VO라고 부르던 그녀석이 맞다.)이다. MemberDTO를 생성해주자.

package com.model;

public class MemberDTO {
	
	private String email;
	private String pw;
	private String tel;
	private String address;
	
//	생성자와 게터세터는 Alt + Shift + S 를 통해 자동완성해주자.
	
//	생성자
	public MemberDTO(String email, String pw, String tel, String address) {
		this.email = email;
		this.pw = pw;
		this.tel = tel;
		this.address = address;
	}
	
//	게터세터
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getPw() {
		return pw;
	}
	public void setPw(String pw) {
		this.pw = pw;
	}
	public String getTel() {
		return tel;
	}
	public void setTel(String tel) {
		this.tel = tel;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	
	
}

만들어준 DTO를 이용해 회원정보를 하나로 묶어주는 MemberDTO를 JoinService.java에서 불러오자.

MemberDTO dto = new MemberDTO(email, pw, tel, address); // 모든 회원정보가 묶여있는 dto 생성.

회원가입이 성공한다면 int값으로 값을 돌려줄 것이므로 int cnt에 값을 받아주고 그것을 통해 회원가입 성공여부를 판별하는 코드 작성.

package com.controller;

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 com.model.MemberDAO;
import com.model.MemberDTO;

@WebServlet("/JoinService")
public class JoinService extends HttpServlet {

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// email, pw, tel, address개의  입력한 데이터를 콘솔창에 출력하시오.
		
		request.setCharacterEncoding("EUC-KR");
		
		String email = request.getParameter("email");
		String pw = request.getParameter("pw");
		String tel = request.getParameter("tel");
		String address = request.getParameter("address");
//		요청한 객체를 가져오는 것은 getParameter
		
		MemberDTO dto = new MemberDTO(email, pw, tel, address); // 모든 회원정보가 묶여있는 dto 생성.
		MemberDAO dao = new MemberDAO();
//		dao를 통해 회원가입 기능을 요청할 것이다.
		int cnt = dao.join(dto);
		
		if (cnt > 0) {
			System.out.println("회원가입 성공");
		} else {
			System.out.println("회원가입 실패");
		}
		
//		회원가입을 성공했든 실패했든 어느 페이지로 이동해야하지 않겠는가?
		response.sendRedirect("main.jsp");
	}

}

 

MemberDAO.java

package com.model;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;

public class MemberDAO {

	// 전역변수로 만들게 되면 기본적으로 null값이 셋팅되므로 따로 null처리를 해주지 않아도 된다.
	private Connection conn;
	private PreparedStatement psmt;
//	Connection conn = null; 을 해준다면 지역변수 처리.
//	PreparedStatement psmt = null; 도 마찬가지로 지역변수 처리.

	public int join(MemberDTO dto) {
		// 여러분이 직접 만들어보세요.
		int cnt = 0;
		
		try {
//			DB Drive 연결
			
			Class.forName("oracle.jdbc.driver.OracleDriver");
			// Class.forName은 경로 폴더 클래스 내의 이름을 검색해서 들어가는 역할 수행.
			// 우리는 OracleDriver를 이용해서 sql을 사용하므로 해당 드라이버를 불러온다.
			// 클래스를 못 찾을 경우를 대비해서 해당 에러를 잡아내는 catch를 넣어주어야 한다.
			
			String url = "jdbc:oracle:thin:@localhost:1521:xe"; // 내 DB주소
			String dbid = "hr";	// 내 DB 접근 id
			String dbpw = "hr";	// 내 DB 접근 pw
			// 해당 드라이버를 가져왔다면 DB에 로그인을 먼저 진행해주자.
			
			conn = DriverManager.getConnection(url, dbid, dbpw);
			// 연결통로인 connection객체를 반환. 반환값을 Connection conn에 담아준다.
			// DriverManager.getConnection(url, dbid, dbpw) 빨간줄 발생 이유 - url이 틀릴 수 있고, id나 pw가 틀릴 수도 있다.
			// 이에 대한 catch를 추가해주면 문제 해결.
			
			String sql = "insert into web_member values(?,?,?,?)";
			
			// sql을 실행해야하고 물음표도 완성시켜줘야 한다. 이것을 해줄 수 있는 객체 PrepareStatement.
			psmt = conn.prepareStatement(sql);
			// conn이 ok해주는 순간 sql을 사용할 수 있는 psmt객체를 PrepareStatement psmt에게 반환해준다.
			
			// join method속 MemberDTO dto에 있는 정보를 가져오면 된다.
			psmt.setString(1, dto.getEmail());
			psmt.setString(2, dto.getPw());
			psmt.setString(3, dto.getTel());
			psmt.setString(4, dto.getAddress());
			
			// psmt가 값을 잘 가져오게 되면 숫자로 값을 반환한다. 그렇기 때문에 cnt에 값을 담아주자.
			cnt = psmt.executeUpdate();
			
		} catch (ClassNotFoundException | SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			try {
				if (psmt != null) {
					psmt.close();
				}
				if (conn != null) {
					conn.close();
				}
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		
		return cnt;
	}

}

위와 같이 코드를 잘 짜주었다면 커넥션과 클로즈를 구분하여 각각 메소드화 시켜줍시다.

package com.model;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class MemberDAO {

//	Connection conn = null; 을 해준다면 지역변수 처리.
//	PreparedStatement psmt = null; 도 마찬가지로 지역변수 처리.
	
	// 전역변수로 만들게 되면 기본적으로 null값이 셋팅되므로 따로 null처리를 해주지 않아도 된다.
	private Connection conn;
	private PreparedStatement psmt;
	private ResultSet rs;

	private void getConnection() { //다른 곳에서는 사용할 일 없이 MemberDAO안에서만 사용할 것이므로 private. 매개변수는 필요없음.
//		DB Drive 연결
		try {
			Class.forName("oracle.jdbc.driver.OracleDriver");
			// Class.forName은 경로 폴더 클래스 내의 이름을 검색해서 들어가는 역할 수행.
			// 우리는 OracleDriver를 이용해서 sql을 사용하므로 해당 드라이버를 불러온다.
			// 클래스를 못 찾을 경우를 대비해서 해당 에러를 잡아내는 catch를 넣어주어야 한다.
			
			String url = "jdbc:oracle:thin:@localhost:1521:xe"; // 내 DB주소
			String dbid = "hr";	// 내 DB 접근 id
			String dbpw = "hr";	// 내 DB 접근 pw
			// 해당 드라이버를 가져왔다면 DB에 로그인을 먼저 진행해주자.
			
			conn = DriverManager.getConnection(url, dbid, dbpw);
			// 연결통로인 connection객체를 반환. 반환값을 Connection conn에 담아준다.
			// DriverManager.getConnection(url, dbid, dbpw) 빨간줄 발생 이유 - url이 틀릴 수 있고, id나 pw가 틀릴 수도 있다.
			// 이에 대한 catch를 추가해주면 문제 해결.
			
		} catch (ClassNotFoundException | SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
	private void close() {
		try {
			if (rs != null) // if문에서 중괄호를 없애면 바로 아래에 있는 한 줄만 실행된다.
				rs.close();
			// 코드문이 익숙해지면 이런 방식을 이용해서 코드를 더 간결하게 만들 수 있지만
            // 오히려 이런 점 때문에 코드 오류가 발생했을 때 못 찾을 수 있으므로 통일하는 것이 좋다.
			if (psmt != null) {
				psmt.close();
			}
			if (conn != null) {
				conn.close();
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
	public int join(MemberDTO dto) {
		// 여러분이 직접 만들어보세요.
		int cnt = 0;
		
		getConnection();
		
		try {
			String sql = "insert into web_member values(?,?,?,?)";
			
			// sql을 실행해야하고 물음표도 완성시켜줘야 한다. 이것을 해줄 수 있는 객체 PrepareStatement.
			psmt = conn.prepareStatement(sql);
			// conn이 ok해주는 순간 sql을 사용할 수 있는 psmt객체를 PrepareStatement psmt에게 반환해준다.
			
			// join method속 MemberDTO dto에 있는 정보를 가져오면 된다.
			psmt.setString(1, dto.getEmail());
			psmt.setString(2, dto.getPw());
			psmt.setString(3, dto.getTel());
			psmt.setString(4, dto.getAddress());
			
			// psmt가 값을 잘 가져오게 되면 숫자로 값을 반환한다. 그렇기 때문에 cnt에 값을 담아주자.
			cnt = psmt.executeUpdate();
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			close();
		}
		
		return cnt;
	}


}

 

 

회원가입서비스가 완료됐다면 로그인서비스를 만들어보자. 로그인 코드는 main.jsp에서 회원가입 코드 바로 위에 위치해있다.

<ul class="links">
	<li><h5>로그인</h5></li>
		<form action="LoginService" method="post">
		<li><input name="email" type="text"  placeholder="Email을 입력하세요"></li>
		<li><input name="pw" type="password"  placeholder="PW를 입력하세요"></li>
		<li><input type="submit" value="LogIn" class="button fit"></li>
	</form>
</ul>

위의 코드에서 로그인을 진행하면 action이 LoginService로 보내주게끔 되어있으므로 LoginService.java를 생성해줍시다.

package com.controller;

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 com.model.MemberDAO;
import com.model.MemberDTO;

@WebServlet("/LoginService")
public class LoginService extends HttpServlet {

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String email = request.getParameter("email");
		// 어느 나라권에서든 상관없이 입력할 수 있는 키보드가 바로 영어.
		// 한국에서 한글로 가입했더라도 해외 나가면 한글 키보드를 사용하기 어려우므로 전세계 어디에서 접근하든 사용할 수 있게 영어로 만드는 것임.
		String pw = request.getParameter("pw");
		
		MemberDTO dto = new MemberDTO(email, pw);
		MemberDAO dao = new MemberDAO();
		// info 안에는 로그인한 사람의 email과 tel, address를 가지고 있다.
		// 로그인 실패시 null값을 돌려줄 것이다.
		MemberDTO info = dao.login(dto);
		
		if (info != null) {
			System.out.println("로그인 성공");
			System.out.println(info.getEmail());
			System.out.println(info.getTel());
			System.out.println(info.getAddress());
		} else { //info가 null값이라면
			System.out.println("로그인 실패");
		}
	}

}

우리가 로그인을 하면 email, tel, address를 돌려주고자 한다. 그럼 이 부분도 하나의 dto로 구현해야겠죠?

이것에 해당하는 생성자 오버로딩을 해줍시다.

public MemberDTO(String email, String tel, String address) {
	super();
	this.email = email;
	this.tel = tel;
	this.address = address;
}

그럼 이제 dao.login에서 login이 빨간줄로 떠있을겁니다. 이 부분을 구현하는것이 여러분 숙제! 내일 뵙겠습니다.

728x90
반응형
저작자표시

'K-디지털 빅데이터 분석서비스 개발자과정 20.11.02~21.04.12 > JAVA' 카테고리의 다른 글

21.01.18. JSP & Servlet - 회원정보수정, 메세지시스템  (0) 2021.01.18
21.01.15. JSP & Servlet - 로그인시스템, 배너, 섹션, 회원정보수정  (0) 2021.01.18
21.01.13. JSP&Servlet - Session 정보 지우기, 방문자수 올리기  (1) 2021.01.14
21.01.12. JSP&Servlet - Cookie, Session  (0) 2021.01.12
21.01.11. Cookie & Server  (0) 2021.01.11
'K-디지털 빅데이터 분석서비스 개발자과정 20.11.02~21.04.12/JAVA' Related Articles more
Comments