Development/JSP

[회원 가입 페이지와 DB연동] 웹 서버 구축하기 (18)

Go0G 2022. 1. 6. 17:37

개요

  • 회원가입 페이지 구성 및 DB 연결
  • Java Package Compile
  • Tomcat에 Mariadb jdbc 라이브러리 추가
  • JSP 컴파일 에러 처리

DB 설정 관련 내용은 아래 포스팅 참고

 

환경

  • WAS Server: CentOS Linux release 7.9 - Tomcat 7.0 - JDK 1.8.0_312
  • DB Server: CentOS Linux release 7.9 - MariaDB(10.4)

관련 경로

ROOT Directory /[Tomcat Directory]/tomcat/webapps/ROOT/

실습에 앞서 회원가입 구조와 디렉터리 구조는 아래와 같다.

빨간색 화살표로 표시된 부분은 Trouble Shooting에 관한 내용으로, 리눅스 환경에서 JSP 환경을 구성하는 과정에서 겪게된 문제점을 표시하였다.

회원가입 과정
디렉터리 구조

구성하며 겪었던 문제에 대해서는 후반부에 추가로 설명한다.

실습

회원 가입을 위한 JSP 파일을 생성

join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" initial-scale="1">
<link rel="stylesheet" href="css/bootstrap.css">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" 
				data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
				aria-expanded="false">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="main.jsp">JSP 게시판 웹사이트 </a>
		</div>
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li><a href="main.jsp">메인</a></li>
				<li><a href="bbs.jsp">게시판</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
         		<li class="dropdown">
           			<a href="#" class="dropdown-toggle" 
                                data-toggle="dropdown" role="button" aria-haspopup="true" 
            			aria-expanded="false">접속하기 <span class="caret"></span></a>
        			<ul class="dropdown-menu">
              			<li ><a href="login.jsp">로그인</a></li>
              			<li class="active"><a href="join.jsp">회원가입</a></li>
            		</ul>    
         		</li>
       		</ul>
		</div>
	</nav>
	<div class="container">
		<div class="col-lg-4"></div>
		<div class="col-lg-4">
			<div class="jumbtron" style="padding-top: 20px;">
				<form method="post" action="joinAction.jsp">
					<h3 style="text-align: center;">회원가입 화면</h3>
					<div class="form-group">
						<input type="text" class="form-control" placeholder="아이디" name="userID" maxlength="20">
					</div>
					<div class="form-group">
						<input type="password" class="form-control" placeholder="비밀번호" name="userPassword" maxlength="20">
					</div>
					<div class="form-group">
						<input type="text" class="form-control" placeholder="닉네임" name="userName" maxlength="20">
					</div>
					<div class="form-group">
						<input type="email" class="form-control" placeholder="이메일" name="userEmail" maxlength="50">
					</div>

					<div class="form-group">
						<label><input type="checkbox" class="form-control" placeholder="성별" name="userGender" 
						onclick="doOpenCheck(this)" value="남자">남</label>
						<label><input type="checkbox" class="form-control" placeholder="성별" name="userGender" 
						onclick="doOpenCheck(this)" value="여자">여</label>
					</div>
					<input type="submit" class="btn btn-primary form control" value="회원가입">
				</form>
			</div>
		</div>
		<div class="col-lg-4"></div>
	</div>
	<script>
        
			function doOpenCheck(chk){
				let obj=document.getElementsByName("userGender");
				for(let i=0;i<obj.length;i++){
					if(obj[i]!=chk){
						obj[i].checked=false;
					}
				}
			}
			
	</script>
	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

회원가입 결과를 사용자에게 반환

joinAction.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- page import="org.apache.jsp.homepage.user.UserDAO" --%>
<%@ page import="user.UserDAO" %>
<%@ page import="java.io.PrintWriter" %>
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:useBean id="user" class="user.User" scope="page"/> 
<%-- 자바에서 객체를 생성하는 것과 동일 
	User user=new User();
--%>
<jsp:setProperty name="user" property="userID"/>
<jsp:setProperty name="user" property="userPassword"/>
<jsp:setProperty name="user" property="userName"/>
<jsp:setProperty name="user" property="userGender"/>
<jsp:setProperty name="user" property="userEmail"/>

<%-- 폼으로부터 넘어오는 파라미터의 이름과 개수와 setProperty 파라미터의 이름과 개수는 동일해야한다. --%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" initial-scale="1">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
	<%
		String userID=null;
		if(session.getAttribute("userID")!=null){
			userID=(String)session.getAttribute("userID");
		}
		if(userID!=null){
			PrintWriter script=response.getWriter();
			script.println("<script>");
			script.println("alert('이미 로그인 되어있습니다.')");
			script.println("location.href='main.jsp'");
			script.println("</script>");	
		}
		
		if(user.getUserID()==null || user.getUserPassword()==null || user.getUserGender()==null ||
				user.getUserEmail()==null || user.getUserName()==null){
			PrintWriter script=response.getWriter();
			script.println("<script>");
			script.println("alert('모든 정보를 입력해주세요.')");
			script.println("history.back()");
			script.println("</script>");
		}
		else{
			UserDAO userDAO = new UserDAO();
			int result =userDAO.join(user);
			System.out.println(result);
			if(result==1){
				session.setAttribute("userID", user.getUserID());
				PrintWriter script=response.getWriter();
				script.println("<script>");
				script.println("'회원가입이 완료되었습니다.'");
				script.println("location.href='main.jsp'");
				script.println("</script>");
			}
			
			else if(result==-2){
				PrintWriter script=response.getWriter();		
				script.println("<script>");
				script.println("alert('데이터베이스 오류가 발생했습니다.')");
				script.println("history.back()"); // 이전 상황으로 되돌리기
				script.println("</script>");		
			}
		}
	%>
</body>
</html>

사용자의 값을 저장하고 불러오기 위한 파일 생성

User.java

package user;

public class User {
	
	private String userID;
	private String userPassword;
	private String userName;
	private String userGender;
	private String userEmail;
	
	public String getUserID() {
		return userID;
	}
	public void setUserID(String userID) {
		this.userID = userID;
	}
	public String getUserPassword() {
		return userPassword;
	}
	public void setUserPassword(String userPassword) {
		this.userPassword = userPassword;
	}
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getUserGender() {
		return userGender;
	}
	public void setUserGender(String userGender) {
		this.userGender = userGender;
	}
	public String getUserEmail() {
		return userEmail;
	}
	public void setUserEmail(String userEmail) {
		this.userEmail = userEmail;
	}
	
}

DB와 연결을 수립하고 데이터를 저장

아래 내용은 본인의 시스템에 맞게 수정

UserDAO.java

package user;

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

public class UserDAO {

	private Connection conn;
	private PreparedStatement pstmt;
	private ResultSet rs;

	public UserDAO() {
		try {
			String dbURL="jdbc:mariadb://[DB서버]:[PORT]/[Database명]";	
			String dbID="[DB ID]";
			String dbPassword="[DB Password]";
			Class.forName("org.mariadb.jdbc.Driver"); 
			conn =DriverManager.getConnection(dbURL,dbID,dbPassword); 
			
		} catch (Exception e) {
            System.out.println(e);
		}
	}
    
	public int join(User user) {
		String SQL="INSERT INTO USER VALUES (?,?,?,?,?)";
		try {
			pstmt=conn.prepareStatement(SQL);
			pstmt.setString(1,user.getUserID());
			pstmt.setString(2,user.getUserPassword());
			pstmt.setString(3,user.getUserName());
			pstmt.setString(4,user.getUserGender());
			pstmt.setString(5,user.getUserEmail());
			return pstmt.executeUpdate();
		} catch (Exception e) {
            System.out.println(e);
		}
		return -2;
	}
}

Trouble Shooting

Trouble 1. Linux 상에서 JAVA Package Compile 하는 방법

Package로 묶여 있는 JAVA 파일을 리눅스 상에서 컴파일 하기 위해서는 Classpath 옵션이 필요하다.

디렉터리 구조

user 디렉터리 진입
#cd user
다른 JAVA 파일에 대한 의존성이 없는 User.java 컴파일
#javac User.java
-classpath 옵션으로 User.class 파일 import
#javac -cp ../ UserDAO.java

Trouble 2. Jasper가 joinAction.jsp를 JAVA -> Class로 변환하는 과정에서 import 문제

import = "user.UserDAO
<jsp:useBean id="user" class="user.User" scope="page"/>

Solution 1. 위 클래스(UserDAO, User)의 위치를 정확히 찾지 못하여 생기는 오류로 "/WEB-INF/"에 "user" 디렉터리를 생성하고 UserDAO.class, User.class 파일 이동

Solution 2. "NotClassDefFoundError"가 발생 -> 빌드타임(Java -> class)과 런타임(Class -> JVM에 업로드) 사이의 충돌 문제로 발생 -> Tomcat 재구동

Tomcat 재구동
#systemctl restart tomcat

Trouble 3. UserDAO Compile 문제(DB 접근 에러)

Class.forName("org.mariadb.jdbc.Driver");

위 소스코드에 대한 라이브러리(JAR)가 존재하지 않아 발생하는 문제로 관련 라이브러리 설치 필요

Maria DB 라이브러리 설치
#wget https://downloads.mariadb.com/Connectors/java/latest/mariadb-java-client-2.3.0.jar
다운로드 한 라이브러리 추가: "경로: /var/lib/tomcat/webapps/[프로젝트: 기본 ROOT]/WEB-INF/lib/"
#cd [MariaDB JAR 파일] /var/lib/tomcat/webapps/[프로젝트: 기본 ROOT]/WEB-INF/lib/

Reference

더보기

[1] https://www.youtube.com/playlist?list=PLRx0vPvlEmdAZv_okJzox5wj2gG_fNh_6

[2] https://gwang920.github.io/jsp%20board/JspBoard(3)-join/