안경잡이개발자

JSP로 강의평가 웹 사이트 개발하기 ④ 데이터베이스 구축하기

JAVA & JSP2018. 1. 26. 18:34
728x90
반응형

  JSP로 강의평가(Lecture Evaluation) 웹 사이트 만들기 네 번째 시간입니다. 이번 시간에는 데이터베이스를 구축하는 시간을 가져보도록 할게요. 지난 시간에는 웹 사이트의 디자인을 전반적으로 처리를 하는 시간을 가졌으므로, 데이터베이스를 구축하는 것은 그다지 어렵지 않을 것 같습니다. 사실 웹 디자인을 작업하면서 설계적인 측면을 고려를 하셨을 것이기 때문이에요. 데이터베이스에서는 테이블(Table)이라는 것을 단위로 설정합니다. 하나의 데이터 모델을 테이블로 설정하는 거죠. 대표적으로 테이블의 예시로는 회원 정보, 강의 정보, 평가 정보 이런 식으로 들어갈 수 있습니다. 저희가 개발한 웹 디자인에서는 오직 세 개의 테이블만 만들어주면 됩니다. 바로 평가 테이블, 회원 테이블, 추천 테이블이랍니다. 일단 테이블을 만들기 이전에 데이터베이스를 생성하는 것부터 해보도록 합시다.


  MySQL에 접속한 이후에 다음의 두 명령어를 입력합니다.


  CREATE DATABASE LectureEvaluation; #데이터베이스 생성

  USE LectureEvaluation; #생성한 데이터베이스에 접속



  ▶ 평가 테이블(Evaluation Table)



CREATE TABLE EVALUATION (

  evaluationID int PRIMARY KEY AUTO_INCREMENT, #평가 번호

  userID varchar(50), #작성자 아이디

  lectureName varchar(50), #강의명

  professorName varchar(50), #교수명

  lectureYear int, #수강 연도

  semesterDivide varchar(20), #수강 학기

  lectureDivide varchar(10), #강의 구분

  evaluationTitle varchar(50), #평가 제목

  evaluationContent varchar(2048), #평가 내용

  totalScore varchar(10), #종합 점수

  creditScore varchar(10), #성적 점수

  comfortableScore varchar(10), #널널 점수

  lectureScore varchar(10), #강의 점수

  likeCount int #추천갯수

);



  위와 같이 데이터베이스 테이블을 설계할 수 있습니다. 기본적으로 어떠한 평가는 한 명의 사용자가 작성을 한다는 점에서 '작성자 아이디' 속성이 들어가는 것을 확인할 수 있습니다. 나머지는 단순하게 정수형은 int, 문자열형은 varchar를 사용해 자료형을 정했습니다. 기본적으로 위와 같이 웹 디자인을 보면서 작업하시는 것이 좋습니다.


  ▶ 회원 테이블(User Table)



CREATE TABLE USER (

  userID varchar(50), #작성자 아이디

  userPassword varchar(50), #작성자 비밀번호

  userEmail varchar(50), #작성자 이메일

  userEmailHash varchar(64), #이메일 확인 해시값

  userEmailChecked boolean #이메일 확인 여부

);



  위와 같이 데이터베이스 테이블을 작성할 수 있습니다. 특이한 부분이라면, 강의 평가를 무차별하게 남발할 수 없도록 하는 시빌 공격(Sybil Attack)의 기본적인 방어법이라고 할 수 있습니다. 이메일을 인증해야만 강의 평가를 달 수 있도록 하는 것입니다. 이 때는 해시 데이터가 사용되는 것이 합당할 것입니다. 이렇게 데이터베이스 구축이 완료되었습니다. 정말 쉽습니다.


  ▶ 추천 테이블(Like Table)


CREATE TABLE LIKEY (

  userID varchar(50), #작성자 아이디

  evaluationID int, #평가 번호

  userIP varchar(50) #작성자 아이피

);



  추천 테이블은 이름을 LIKEY로 설정했습니다. 사실상 관계 테이블(Relation Table)이라고 할 수 있답니다. LIKE는 MySQL 안에서 예약어로 사용이 되고 있기 때문에 LIKEY로 설정을 한 거에요.

728x90
반응형
저작자표시 비영리 변경금지

'JAVA & JSP' 카테고리의 다른 글

JSP로 강의평가 웹 사이트 개발하기 ⑥ 회원가입 및 이메일 전송하기  (22) 2018.01.26
JSP로 강의평가 웹 사이트 개발하기 ⑤ 회원 데이터 모델링  (0) 2018.01.26
JSP로 강의평가 웹 사이트 개발하기 ③ 웹 디자인 개발하기  (1) 2018.01.26
JSP로 강의평가 웹 사이트 개발하기 ② 웹 디자인 기초 잡기  (5) 2018.01.26
JSP로 강의평가 웹 사이트 개발하기 ① 준비물 알아보기  (4) 2018.01.21

JSP로 강의평가 웹 사이트 개발하기 ③ 웹 디자인 개발하기

JAVA & JSP2018. 1. 26. 16:57
728x90
반응형

  JSP로 강의평가(Lecture Evaluation) 웹 사이트 개발하기 강좌의 세 번째 시간입니다. 지난 시간에는 웹 디자인의 기초적인 틀을 잡았으므로 이번 시간에는 프로젝트에 필요한 전체 웹 디자인을 모두 처리하는 시간을 가지도록 하겠습니다. 이러한 작은 프로젝트에는 기획자, 디자이너, 서버 개발자를 따로 나눌 필요 없이 우리가 혼자서 모든 것을 개발하는 것이므로 디자인을 하면서 머릿 속으로 설계를 해나가시는 것이 제일 빠르게 개발을 하는 방법이라고 할 수 있습니다. 당장 부트스트랩 프레임워크로 이것저것 컴포넌트를 웹 사이트 내에 추가를 하시면서 "이런 기능도 있으면 좋겠지? 이런 것 쯤이야 서버 프로그램 짜는 것은 쉬울 거니까."라고 생각하세요.



  위와 같이 프로젝트를 구성합니다. 이전 시간에서 그냥 index.jsp, userLogin.jsp, userRegister.jsp 세 가지 페이지를 이용해서 웹 디자인을 마친거라고 할 수 있습니다. 먼저 index.jsp 페이지부터 작성해보도록 하겠습니다.


  ▶ index.jsp


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

<!doctype html>

<html>

  <head>

    <title>강의평가 웹 사이트</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 부트스트랩 CSS 추가하기 -->

    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <!-- 커스텀 CSS 추가하기 -->

    <link rel="stylesheet" href="./css/custom.css">

  </head>

  <body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

      <a class="navbar-brand" href="index.jsp">강의평가 웹 사이트</a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">

        <span class="navbar-toggler-icon"></span>

      </button>

      <div class="collapse navbar-collapse" id="navbar">

        <ul class="navbar-nav mr-auto">

          <li class="nav-item active">

            <a class="nav-link" href="index.jsp">메인</a>

          </li>

          <li class="nav-item dropdown">

            <a class="nav-link dropdown-toggle" id="dropdown" data-toggle="dropdown">

              회원 관리

            </a>

            <div class="dropdown-menu" aria-labelledby="dropdown">

              <a class="dropdown-item" href="userLogin.jsp">로그인</a>

              <a class="dropdown-item" href="userRegister.jsp">회원가입</a>

              <a class="dropdown-item" href="userLogout.jsp">로그아웃</a>

            </div>

          </li>

        </ul>

        <form action="./index.jsp" method="get" class="form-inline my-2 my-lg-0">

          <input type="text" name="search" class="form-control mr-sm-2" placeholder="내용을 입력하세요.">

          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">검색</button>

        </form>

      </div>

    </nav>

    <div class="container">

      <form method="get" action="./index.jsp" class="form-inline mt-3">

        <select name="lectureDivide" class="form-control mx-1 mt-2">

          <option value="전체">전체</option>

          <option value="전공">전공</option>

          <option value="교양">교양</option>

          <option value="기타">기타</option>

        </select>

        <input type="text" name="search" class="form-control mx-1 mt-2" placeholder="내용을 입력하세요.">

        <button type="submit" class="btn btn-primary mx-1 mt-2">검색</button>

        <a class="btn btn-primary mx-1 mt-2" data-toggle="modal" href="#registerModal">등록하기</a>

        <a class="btn btn-danger ml-1 mt-2" data-toggle="modal" href="#reportModal">신고</a>

      </form>

      <div class="card bg-light mt-3">

        <div class="card-header bg-light">

          <div class="row">

            <div class="col-8 text-left">컴퓨터개론&nbsp;<small>나동빈</small></div>

            <div class="col-4 text-right">

              종합 <span style="color: red;">A</span>

            </div>

          </div>

        </div>

        <div class="card-body">

          <h5 class="card-title">

            정말 좋은 강의에요.&nbsp;<small>(2017년 가을학기)</small>

          </h5>

          <p class="card-text">강의가 많이 널널해서, 솔직히 많이 배운 건 없는 것 같지만 학점도 잘 나오고 너무 좋은 것 같습니다.</p>

          <div class="row">

            <div class="col-9 text-left">

              성적 <span style="color: red;">A</span>

              널널 <span style="color: red;">A</span>

              강의 <span style="color: red;">B</span>

              <span style="color: green;">(추천: 15★)</span>

            </div>

            <div class="col-3 text-right">

              <a onclick="return confirm('추천하시겠습니까?')" href="./likeAction.jsp?evaluationID=">추천</a>

              <a onclick="return confirm('삭제하시겠습니까?')" href="./deleteAction.jsp?evaluationID=">삭제</a>

            </div>

          </div>

        </div>

      </div>

      <div class="card bg-light mt-3">

        <div class="card-header bg-light">

          <div class="row">

            <div class="col-8 text-left">컴퓨터그래픽스&nbsp;<small>홍길동</small></div>

            <div class="col-4 text-right">

              종합 <span style="color: red;">B</span>

            </div>

          </div>

        </div>

        <div class="card-body">

          <h5 class="card-title">

            나쁘지 않은 것 같습니다.&nbsp;<small>(2017년 여름학기)</small>

          </h5>

          <p class="card-text">컴퓨터그래픽스를 처음 배웠는데, 상당히 재미있었던 것 같아요.</p>

          <div class="row">

            <div class="col-9 text-left">

              성적 <span style="color: red;">B</span>

              널널 <span style="color: red;">C</span>

              강의 <span style="color: red;">B</span>

              <span style="color: green;">(추천: 1)</span>

            </div>

            <div class="col-3 text-right">

              <a onclick="return confirm('추천하시겠습니까?')" href="./likeAction.jsp?evaluationID=">추천</a>

              <a onclick="return confirm('삭제하시겠습니까?')" href="./deleteAction.jsp?evaluationID=">삭제</a>

            </div>

          </div>

        </div>

      </div>

      <div class="card bg-light mt-3">

        <div class="card-header bg-light">

          <div class="row">

            <div class="col-8 text-left">알고리즘&nbsp;<small>이순신</small></div>

            <div class="col-4 text-right">

              종합 <span style="color: red;">A</span>

            </div>

          </div>

        </div>

        <div class="card-body">

          <h5 class="card-title">

            강의력이 제일 좋은 강의입니다.&nbsp;<small>(2017년 2학기)</small>

          </h5>

          <p class="card-text">알고리즘 강의 가르치시는 교수님들 중에서 최고로 잘 가르치십니다.</p>

          <div class="row">

            <div class="col-9 text-left">

              성적 <span style="color: red;">A</span>

              널널 <span style="color: red;">C</span>

              강의 <span style="color: red;">A</span>

              <span style="color: green;">(추천: 0)</span>

            </div>

            <div class="col-3 text-right">

              <a onclick="return confirm('추천하시겠습니까?')" href="./likeAction.jsp?evaluationID=">추천</a>

              <a onclick="return confirm('삭제하시겠습니까?')" href="./deleteAction.jsp?evaluationID=">삭제</a>

            </div>

          </div>

        </div>

      </div>

    </div>

    <ul class="pagination justify-content-center mt-3">

      <li class="page-item">

        <a class="page-link" href="#">이전</a>

      </li>

      <li class="page-item">

        <a class="page-link" href="#">다음</a>

      </li>

    </ul>

    <div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">

      <div class="modal-dialog">

        <div class="modal-content">

          <div class="modal-header">

            <h5 class="modal-title" id="modal">평가 등록</h5>

            <button type="button" class="close" data-dismiss="modal" aria-label="Close">

              <span aria-hidden="true">&times;</span>

            </button>

          </div>

          <div class="modal-body">

            <form action="./evaluationRegisterAction.jsp" method="post">

              <div class="form-row">

                <div class="form-group col-sm-6">

                  <label>강의명</label>

                  <input type="text" name="lectureName" class="form-control" maxlength="20">

                </div>

                <div class="form-group col-sm-6">

                  <label>교수명</label>

                  <input type="text" name="professorName" class="form-control" maxlength="20">

                </div>

              </div>

              <div class="form-row">

                <div class="form-group col-sm-4">

                  <label>수강 연도</label>

                  <select name="lectureYear" class="form-control">

                    <option value="2011">2011</option>

                    <option value="2012">2012</option>

                    <option value="2013">2013</option>

                    <option value="2014">2014</option>

                    <option value="2015">2015</option>

                    <option value="2016">2016</option>

                    <option value="2017">2017</option>

                    <option value="2018" selected>2018</option>

                    <option value="2019">2019</option>

                    <option value="2020">2020</option>

                    <option value="2021">2021</option>

                    <option value="2022">2022</option>

                    <option value="2023">2023</option>

                  </select>

                </div>

                <div class="form-group col-sm-4">

                  <label>수강 학기</label>

                  <select name="semesterDivide" class="form-control">

                    <option name="1학기" selected>1학기</option>

                    <option name="여름학기">여름학기</option>

                    <option name="2학기">2학기</option>

                    <option name="겨울학기">겨울학기</option>

                  </select>

                </div>

                <div class="form-group col-sm-4">

                  <label>강의 구분</label>

                  <select name="lectureDivide" class="form-control">

                    <option name="전공" selected>전공</option>

                    <option name="교양">교양</option>

                    <option name="기타">기타</option>

                  </select>

                </div>

              </div>

              <div class="form-group">

                <label>제목</label>

                <input type="text" name="evaluationTitle" class="form-control" maxlength="20">

              </div>

              <div class="form-group">

                <label>내용</label>

                <textarea type="text" name="evaluationContent" class="form-control" maxlength="2048" style="height: 180px;"></textarea>

              </div>

              <div class="form-row">

                <div class="form-group col-sm-3">

                  <label>종합</label>

                  <select name="totalScore" class="form-control">

                    <option value="A" selected>A</option>

                    <option value="B">B</option>

                    <option value="C">C</option>

                    <option value="D">D</option>

                    <option value="F">F</option>

                  </select>

                </div>

                <div class="form-group col-sm-3">

                  <label>성적</label>

                  <select name="creditScore" class="form-control">

                    <option value="A" selected>A</option>

                    <option value="B">B</option>

                    <option value="C">C</option>

                    <option value="D">D</option>

                    <option value="F">F</option>

                  </select>

                </div>

                <div class="form-group col-sm-3">

                  <label>널널</label>

                  <select name="comfortableScore" class="form-control">

                    <option value="A" selected>A</option>

                    <option value="B">B</option>

                    <option value="C">C</option>

                    <option value="D">D</option>

                    <option value="F">F</option>

                  </select>

                </div>

                <div class="form-group col-sm-3">

                  <label>강의</label>

                  <select name="lectureScore" class="form-control">

                    <option value="A" selected>A</option>

                    <option value="B">B</option>

                    <option value="C">C</option>

                    <option value="D">D</option>

                    <option value="F">F</option>

                  </select>

                </div>

              </div>

              <div class="modal-footer">

                <button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>

                <button type="submit" class="btn btn-primary">등록하기</button>

              </div>

            </form>

          </div>

        </div>

      </div>

    </div>

    <div class="modal fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">

      <div class="modal-dialog">

        <div class="modal-content">

          <div class="modal-header">

            <h5 class="modal-title" id="modal">신고하기</h5>

            <button type="button" class="close" data-dismiss="modal" aria-label="Close">

              <span aria-hidden="true">&times;</span>

            </button>

          </div>

          <div class="modal-body">

            <form method="post" action="./reportAction.jsp">

              <div class="form-group">

                <label>신고 제목</label>

                <input type="text" name="reportTitle" class="form-control" maxlength="20">

              </div>

              <div class="form-group">

                <label>신고 내용</label>

                <textarea type="text" name="reportContent" class="form-control" maxlength="2048" style="height: 180px;"></textarea>

              </div>

              <div class="modal-footer">

                <button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>

                <button type="submit" class="btn btn-danger">신고하기</button>

              </div>

            </form>

          </div>

        </div>

      </div>

    </div>

    <footer class="bg-dark mt-4 p-5 text-center" style="color: #FFFFFF;">

      Copyright ⓒ 2018 나동빈 All Rights Reserved.

    </footer>

    <!-- 제이쿼리 자바스크립트 추가하기 -->

    <script src="./js/jquery.min.js"></script>

    <!-- Popper 자바스크립트 추가하기 -->

    <script src="./js/popper.min.js"></script>

    <!-- 부트스트랩 자바스크립트 추가하기 -->

    <script src="./js/bootstrap.min.js"></script>

  </body>

</html>



  ▶ userLogin.jsp


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

<!doctype html>

<html>

  <head>

    <title>강의평가 웹 사이트</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 부트스트랩 CSS 추가하기 -->

    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <!-- 커스텀 CSS 추가하기 -->

    <link rel="stylesheet" href="./css/custom.css">

  </head>

  <body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

      <a class="navbar-brand" href="index.jsp">강의평가 웹 사이트</a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">

        <span class="navbar-toggler-icon"></span>

      </button>

      <div class="collapse navbar-collapse" id="navbar">

        <ul class="navbar-nav mr-auto">

          <li class="nav-item active">

            <a class="nav-link" href="index.jsp">메인</a>

          </li>

          <li class="nav-item dropdown">

            <a class="nav-link dropdown-toggle" id="dropdown" data-toggle="dropdown">

              회원 관리

            </a>

            <div class="dropdown-menu" aria-labelledby="dropdown">

              <a class="dropdown-item" href="userLogin.jsp">로그인</a>

              <a class="dropdown-item" href="userRegister.jsp">회원가입</a>

              <a class="dropdown-item" href="userLogout.jsp">로그아웃</a>

            </div>

          </li>

        </ul>

        <form action="./index.jsp" method="get" class="form-inline my-2 my-lg-0">

          <input type="text" name="search" class="form-control mr-sm-2" placeholder="내용을 입력하세요.">

          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">검색</button>

        </form>

      </div>

    </nav>

    <div class="container mt-3" style="max-width: 560px;">

      <form method="post" action="./userLoginAction.jsp">

        <div class="form-group">

          <label>아이디</label>

          <input type="text" name="userID" class="form-control">

        </div>

        <div class="form-group">

          <label>비밀번호</label>

          <input type="password" name="userPassword" class="form-control">

        </div>

        <button type="submit" class="btn btn-primary">로그인</button>

      </form>

    </div>

    <footer class="bg-dark mt-4 p-5 text-center" style="color: #FFFFFF;">

      Copyright ⓒ 2018 나동빈 All Rights Reserved.

    </footer>

    <!-- 제이쿼리 자바스크립트 추가하기 -->

    <script src="./js/jquery.min.js"></script>

    <!-- Popper 자바스크립트 추가하기 -->

    <script src="./js/popper.min.js"></script>

    <!-- 부트스트랩 자바스크립트 추가하기 -->

    <script src="./js/bootstrap.min.js"></script>

  </body>

</html>



  ▶ userRegister.jsp


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

<!doctype html>

<html>

  <head>

    <title>강의평가 웹 사이트</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 부트스트랩 CSS 추가하기 -->

    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <!-- 커스텀 CSS 추가하기 -->

    <link rel="stylesheet" href="./css/custom.css">

  </head>

  <body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

      <a class="navbar-brand" href="index.jsp">강의평가 웹 사이트</a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">

        <span class="navbar-toggler-icon"></span>

      </button>

      <div class="collapse navbar-collapse" id="navbar">

        <ul class="navbar-nav mr-auto">

          <li class="nav-item active">

            <a class="nav-link" href="index.jsp">메인</a>

          </li>

          <li class="nav-item dropdown">

            <a class="nav-link dropdown-toggle" id="dropdown" data-toggle="dropdown">

              회원 관리

            </a>

            <div class="dropdown-menu" aria-labelledby="dropdown">

              <a class="dropdown-item" href="userLogin.jsp">로그인</a>

              <a class="dropdown-item" href="userRegister.jsp">회원가입</a>

              <a class="dropdown-item" href="userLogout.jsp">로그아웃</a>

            </div>

          </li>

        </ul>

        <form action="./index.jsp" method="get" class="form-inline my-2 my-lg-0">

          <input type="text" name="search" class="form-control mr-sm-2" placeholder="내용을 입력하세요.">

          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">검색</button>

        </form>

      </div>

    </nav>

    <div class="container mt-3" style="max-width: 560px;">

      <form method="post" action="./userRegisterAction.jsp">

        <div class="form-group">

          <label>아이디</label>

          <input type="text" name="userID" class="form-control">

        </div>

        <div class="form-group">

          <label>비밀번호</label>

          <input type="password" name="userPassword" class="form-control">

        </div>

        <div class="form-group">

          <label>이메일</label>

          <input type="email" name="userEmail" class="form-control">

        </div>

        <button type="submit" class="btn btn-primary">회원가입</button>

      </form>

    </div>

    <footer class="bg-dark mt-4 p-5 text-center" style="color: #FFFFFF;">

      Copyright ⓒ 2018 나동빈 All Rights Reserved.

    </footer>

    <!-- 제이쿼리 자바스크립트 추가하기 -->

    <script src="./js/jquery.min.js"></script>

    <!-- Popper 자바스크립트 추가하기 -->

    <script src="./js/popper.min.js"></script>

    <!-- 부트스트랩 자바스크립트 추가하기 -->

    <script src="./js/bootstrap.min.js"></script>

  </body>

</html>



728x90
반응형
저작자표시 비영리 변경금지

'JAVA & JSP' 카테고리의 다른 글

JSP로 강의평가 웹 사이트 개발하기 ⑥ 회원가입 및 이메일 전송하기  (22) 2018.01.26
JSP로 강의평가 웹 사이트 개발하기 ⑤ 회원 데이터 모델링  (0) 2018.01.26
JSP로 강의평가 웹 사이트 개발하기 ④ 데이터베이스 구축하기  (2) 2018.01.26
JSP로 강의평가 웹 사이트 개발하기 ② 웹 디자인 기초 잡기  (5) 2018.01.26
JSP로 강의평가 웹 사이트 개발하기 ① 준비물 알아보기  (4) 2018.01.21

티스토리툴바