JSP와 mysql을 이용하여 MVC패턴 MODEL1 방식 게시판 만들기(2020년 8월 17일까지 진행 과정)

현재 진행 중인 프로젝트에 Spring이나 JSP를 이용한 게시판이 필요할거 같아서 만들면서 공부하기로 하여 여러 블로그와 동빈나님의 유튜브를 참고하여 만들어 보았습니다.

아직 완성 단계는 아니고 현재까지 한 부분들을 제 나름대로 간략하게 기록해보았습니다.

 

A. JSP 게시판 만들기 

★ 준비물 

 

• 구글, 유튜브
• mysql 8.0
• jdk-14.0.2
• 윈도우 64Tomcat 8.5v
• 부트스트랩(Bootstrap)

사용한 부트스트랩 파일을 다운 받을 수 있는 링크입니다. 

https://www.w3schools.com/bootstrap

---

B. JSP 게시판 진행 과정

먼저 jdk-14.0.2 윈도우 64비트 버전과 mysql 8.0버전, 그리고 apache-tomcat-8.5.57 파일로 각 환경을 만들어주었습니다. (개발 환경을 구성하는 과정은 생략하였습니다.) port는 tomcat을 설치하는 과정에서 8005로 설정하였고 mysql의 포트로는 3557을 사용하였습니다. 

 

각각 설치를 진행해주었고 eclipse와 mysql을 연결하고 tomcat server와 연결해주었습니다. 이때 유튜브에서 나와있는 jdk 버전과 mysql 버전은 제가 사용한 각 파일의 버전보다 낮은 단계라서 그런건지 아니면 그냥 버전이 달라서 그런건지 확실치는 않지만 mysql jdbc driver 오류가 생겼었습니다. 저는 time~ 이라는 오류, SSL 오류 등이 있었는데 해결하였습니다. 

 

★ 에러 해결 방법은 아래와 같습니다.

 

1. java 버전 5.1.X 이후 버전부터 KST 타임존을 인식하지 못하는 이슈

: The server time zone value ‘KST’ is unrecognized or represents more than one time zone : mysql-connector-

 

---> 해결 방법은 UserDAO.java 파일에서 try catch 구문을 넣는 부분의

String dbURL을 설정 할 때 유튜브와는 다르게 이런식으로

 

String dbURL = "jdbc:mysql://localhost:3557/kobalja?

 

useUnicode=true&useJDBCCompliantTimezoneShift=

true&useLegacyDatetimeCode=false&serverTimezone=UTC";

 

이 구문을 넣어 해결하였습니다.

 

2. CLIENT_PLUGIN_AUTH is required : SSL 미사용 에러

: Error updating database. Cause: java.sql.SQLNonTransientConnectionException: CLIENT_PLUGIN_AUTH is required

 

저 같은 경우에 SSL 미사용 에러는 mysql의 버전을 업그레이드 하니 해결이 되었었는데 만약 안되신다면
url에  verifyServerCertificate=false&useSSL=false 이렇게 파라미터를 추가하시거나 (& 에러 발생시 & 로 대체)

mysql을 재실행 시켜보시기 바랍니다.

 

---

B-1. 로그인 페이지 디자인

위의 에러들을 해결한 다음에는 index.jsp 파일을 생성하여 국제정 인코딩 언어인 UTF-8로 각각 변경시켰습니다. 그 후에 login.jsp 파일을 만들고 login.jsp의 디자인을 빠르게 작업하기 위한 부트스트랩(bootstrap)의 css, fonts, js 폴더들을 WebContent 파일안에 넣어줍니다. 부트스트랩을 이용하여 빠르게 디자인하여 login.jsp를 완성하였습니다.

 

★ index.jsp 코드

JSP 게시판 만들기 - index.jsp (2020.08.17 진행중)

 

★ login.jsp 코드

JSP 게시판 만들기 - login.jsp (2020.08.17 진행중)

B-1. 결과

---

B-2. 회원 데이터베이스 구축하기

먼저 MySQL Command Line Client를 열어 아래의 코드로 데이터베이스를 생성하고 테이블을 생성해줍니다. 

 

create databases kobalja;  //kobalja라는 데이터베이스를 생성하겠다는 의미입니다.

 

use kobalja;    //이 데이터베이스를 사용하겠다는 의미입니다.

 

show tables;    //empty라고 나옵니다.

 

create tables board(      //userID, userPassword 등의 컬럼을 가진 board라는 테이블을 생성합니다.

userID VARCHAR(30),

userPassword VARCHAR(20),

userName VARCHAR(20),

userGender VARCHAR(20),

userEmail VARCHAR(100),

PRIMARY KEY (userID)

);

 

show tables;     //kobalja 데이터베이스 안에 board 라는 테이블이 생성된 것을 확인합니다.

 

insert into board values('kobalja','1234','khs','남자','kobalja2020@tistory.com');     //각 컬럼에 해당하는 데이터를 넣어 생성합니다.

 

select * from board;    //board라는 테이블안에 데이터를 조회(확인)합니다. 

 

MySQL 테이블 확인

 

그 다음 Java Resource-src에서 board 패키지를 생성하고 그 안에 Board라는 클래스를 생성해줍니다.Board 클래스 안에 MySQL에서 생성한 속성과 동일한 변수명으로 설정해줍니다.

 

userID= 사용자 아이디

userPassword= 사용자 비밀번호

userName= 사용자 이름

userGender= 사용자 성별

userEmail= 사용자 이메일

 

★ Board.java 코드

JSP 게시판 만들기 - Board.java (2020.08.17 진행중)

---

B-3. 로그인 기능 구현하기

우선 board 패키지안에 JSP에서 회원 데이터베이스의 테이블에 접근할 수 있도록 하기 위해 UserDAO.java라는 클래스를 생성하였습니다.

 

★ UserDAO.java 코드

JSP 게시판 만들기 - UserDAO.java (2020.08.17 진행중)

그 후에 loginAction.jsp 파일을 WebContet 폴더 안에 생성하여 body부분에서 userDAO라는 객체생성 후, result에 login함수의 결과값을 받습니다. 리턴한 result 값이 -2, -1, 0, 1의 4가지 경우에 따라 javascript문을 작성해 처리를 해주었습니다.

 

★ loginAction.jsp 코드

JSP 게시판 만들기 - loginAction.jsp (2020.08.17 진행중)

그 후 MySQL에 접속하기 위한 드라이버인 mysql jdbc driver를 설치하기 위해

구글 검색창에 mysql jdbc driver를 검색하여 다운로드 해줍니다.

mysql jdbc driver 

 

다운받은 파일을 현재 작업폴더에 압축풀기를 해주고 mysql-connector-java-8.0.21.jar파일을 

이클립스 - 프로젝트(BBS) - WebContent - WEB-INF - lib에 넣어주면 MySQL과 연결됩니다.

mysql jdbc driver

result==-2일 때 로그인 결과입니다.

 

하지만 알맞은 비밀번호와 아이디를 입력하고 로그인 했을 시에는 아래처럼 정상적으로 main.jsp로 이동하게 됩니다.

---

B-4. 회원가입 페이지 디자인하기

회원가입 페이지 디자인을 위한 join.jsp를 WebContent 폴더에 생성해줍니다. login.jsp의 코드를 복사하고 네비게이션 부분은 수정하지 않고 컨테이너 부분만 수정하는데, 로그인화면에서 회원가입화면으로 넘어갈 수 있게 수정하고 성별을 radio 타입을 사용하여 체크 할 수 있도록 또한 이메일 양식을 지키게 입력할 수 있도록 userEmail 넣는 부분을 email 타입으로 수정해준 후 join.jsp에 붙여 넣기 합니다.

그 후 회원가입 페이지에서 loginAction.jsp에서 joinAction.jsp로 페이지 이동하도록 수정해주었습니다.  

★ join.jsp 코드

JSP 게시판 만들기 - join.jsp (2020.08.17 진행중)

---

B-5. 회원가입 기능 구현하기

UserDAO.java파일에 join 함수를 생성하고 String SQL = "INSERT INTO USER VALUES (?, ?, ?, ?, ?)";이라는 구문으로 user 필드명에 각 변수가 저장되도록 하는 ?를 작성해줍니다. 그리고 SQL삽입 공격을 막기 위한 PreparedStatement객체를 사용하고 아래와 같이 각각의 값을 설정해줍니다.

 

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());

 

그 후에 loginAction.jsp 파일을 생성하는데 이 때 위의 join.jsp 코드에서 회원가입을 눌렀을 때 joinAction.jsp 파일로 

로그인 정보를 숨기면서 post를 전송할 수 있도록 form method="post" action="joinAction.jsp"> 구문을 넣어줍니다.

 

또한 회원가입 화면에서 총 5가지 변수를 입력 받기 때문에 기존의 loginAction.jsp파일에 있던 

 

<jsp:setProperty name="board" property="userID"/> 

<jsp:setProperty name="board" property="userID"/> 

이 외에 그 밑에 이름, 성별, 이메일이라는 3가지를 더 작성합니다. 

<jsp:setProperty name="board" property="userName"/> 

<jsp:setProperty name="board" property="userGender"/> 

<jsp:setProperty name="board" property="userEmail"/> 

 

회원가입화면의 아이디, 패스워드, 이름, 성별, 이메일중 한가지라도 null값이 들어간다면(입력이 안된다면)

script.println("alert('입력이 되지 않은 사항이 있습니다.')");

script.println("history.back()");

위부분을 통해 알림을주고, 이전 페이지로 돌려보냅니다.

​

result변수에 UserDAO.java 클래스에서 만들어준 join함수에 user매개변수를 대입해서

​

if(resulet == -1)일 때 회원가입의 아이디가 이미 데이터베이스에 존재하는 경우이므로, 아이뒤가 이미 존재한다는 알림메시지를 주고, 이전 페이지로 돌아가게 됩니다.

 

else{...} 이부분의 경우는 정상적으로 회원가입이 되었을 경우이므로, ​location.href = 'main.jsp'"을 통해 main.jsp 파일로 페이지를 이동하게 됩니다.

 

★ joinAction.jsp 코드

JSP 게시판 만들기 - joinAction.jsp (2020.08.17 진행중)

null값이 들어갔을 때 결과

---

B-6. 회원 세션 관리하기

세션이란 현재 접속한 회원이 할당해주는 고유 ID를 말하는데, 로그인에 성공했을 때 세션ID를 부여해주면 됩니다. PRIMARY KEY 즉 userID를 세션ID로 두었기 때문에 로그인에 성공했을 때

아래와 같이 세션값을 설정해 주었습니다.

 

★ loginAction.jsp

 

1 2 3 4 5 6 7 8 9

UserDAO userDAO = new UserDAO();     int result = userDAO.login(board.getUserID(), board.getUserPassword());     if (result == 1) {         session.setAttribute("userID", board.getUserID());         PrintWriter script = response.getWriter();         script.println("<script>");         script.println("location.href='main.jsp'");         script.println("</script>");     }  Colored by Color Scripter

cs

 

 

★ joinAction.jsp

 

else {
      session.setAttribute("userID", board.getUserID());
      PrintWriter script = response.getWriter();
      script.println("<script>");
      script.println("location.href='main.jsp'");
      script.println("</script>");
        }

 

이렇게 할당된 세션을 다시 해제 할 때는 로그아웃이라는 페이지를 이용하면 되는데 WebContent폴더에 logoutAction.jsp 파일을 생성시켜 준 후에 세션을 해제하는 구문과 main.jsp로 이동할 수 있도록 location.href 값이 main.jsp가 되게 작성해주면 됩니다. 또한 회원이 로그인을 했을 때 로그인과 회원가입 페이지에 접속하지 못하도록  loginAction.jsp에 아래의 구문을 작성해주면 됩니다. 

 

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>");
    }

 

 

동일한 방식으로 위 코드를 회원가입 처리 페이지인 join.jsp에 작성해줍니다. 그 후에 main.jsp에 login.jsp의 구문을 복사 붙여넣기하고 자바스크립트 문장을 실행할 수 있도록 상단에 <%@ page import="java.io.PrintWriter" %>를 선언합니다. 그 후에 로그인이 된 회원은 로그인 정보를 담을 수 있게 설정해줍니다. 

 

현재 페이지는 main.jsp이므로 main.jsp에 active를 작성하여 활성화 시켜주고 기존에 있던 로그인의 active는 삭제해줍니다.

 

마지막으로 접속하기 경우에는 로그인이 안되어 있을 경우에만 보이도록 하게, 로그인이 되었을 경우에는 회원관리라는 버튼을 생성시켜주고 기존의 dropdown-menu에서 로그아웃 버튼만 보이게 생성한 후 logoutAction.jsp로 참조하도록 설정해줍니다.

 

★ main.jsp 코드

JSP 게시판 만들기 - main.jsp (2020.08.17 진행중)

로그인,로그아웃,드롭다운에 로그아웃만

---

B-7. 게시판의 메인 디자인하기 

bbs.jsp파일을 WebContent 폴더에 생성시켜준 후에 main.jsp파일을 복사하고 bbs.jsp에 붙여넣기를 해줍니다. 그리고 현재 게시판이 메인이므로 게시판에 active활성화를 넣어주고 게시판의 기본 형태가 table구조 이기 때문에 테이블 형태로 디자인 해주기 위해 아래처럼 코드를 작성하였습니다.

 

table-striped는 게시판의 글 목록들이 홀, 짝수가 번갈아가며 색상이 번갈아가며 보자더 깔끔한 디자인이 나오도록 해줍니다. 

<!-- 게시판 화면 -->
    <div class="container">
        <div class="row">
            <table class="table table-striped" style="text-align: center"
                ; border: 1px solid #dddddd>
                <thead>
                    <tr>
                        <th style="background-color: #eeeeee; text-allign: center;">번호</th>
                        <th style="background-color: #eeeeee; text-allign: center;">제목</th>
                        <th style="background-color: #eeeeee; text-allign: center;">작성자</th>
                        <th style="background-color: #eeeeee; text-allign: center;">작성일</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>안녕하세요</td>
                        <td>고한솔</td>
                        <td>2020-08-17</td>
                    </tr>
                </tbody>
            </table>
            <a href="write.jsp" class="btn btn-primary pull-right">글쓰기</a>
        </div>
    </div>

 

★ bbs.jsp 코드

JSP 게시판 만들기 - bbs.jsp (2020.08.17 진행중)

 

글쓰기를 클릭하게 되면 찾을 수 없음 페이지로 넘어가게 되는데

그 이유는 글쓰기 a 태그에 있는 write.jsp파일을 아직 만들지 않아서 그렇습니다. 

 

 

★ JSP 게시판 미완성본 현재 되는 기능(2020년 8월 17일)

1. 로그인을 할 수 있다. (로그인하기 전에 mysql의 데이터베이스에 먼저 아이디를 생성해서 테스트 해보았다.)

 

2. 회원가입을 할 수 있다.(userID,userPassword,userName,userGender,userEmail을 차례대로 입력하여 회원가입이 가능하다.)

 

3. 게시판을 들어갈 수 있다.(글쓰기및 CRUD는 아직 불가능하다.)

 

4. 메인과 게시판을 넘나들 수 있다.

 

5. 로그인과 회원가입을 클릭 시 에 active 효과를 넣어 dropdown nav에서 해당 클릭 부분을 파란색으로 볼 수 있다.

 

지금까지 8월17일까지의 진행 과정이었습니다.