JSP로 강의평가 웹 사이트 개발하기 ⑧ 평가 등록 및 신고 구현하기
이번 시간에는 JSP 강의평가(Lecture Evaluation) 웹 사이트 개발하기의 여덟 번째 시간입니다. 지난 시간에는 로그인 및 로그아웃 기능을 구현했습니다. 이제 로그인 이후에 사용자들이 강의 평가 글을 등록하는 기능을 작성해보도록 하겠습니다. 또한 특정한 게시글 등에 대해서 신고를 하는 기능 또한 구현을 하려고 합니다. 바로 시작을 해보도록 합시다.
위와 같이 두 개의 JSP 페이지를 추가합니다. 하나는 reportAction.jsp이고, 다른 하나는 evaluationRegisterAction.jsp입니다. 그리고 evaluation 패키지를 생성합니다. 이후에 해당 패키지 안에 EvaluationDTO.java, EvaluationDAO.java를 작성해주시면 됩니다.
▶ EvaluationDTO.java: 하나의 강의 평가 정보를 담고 있는 데이터베이스 트랜잭션 객체 역할을 담당합니다.
package evaluation;
public class EvaluationDTO {
int evaluationID;
String userID;
String lectureName;
String professorName;
int lectureYear;
String semesterDivide;
String lectureDivide;
String evaluationTitle;
String evaluationContent;
String totalScore;
String creditScore;
String comfortableScore;
String lectureScore;
int likeCount;
public int getEvaluationID() {
return evaluationID;
}
public void setEvaluationID(int evaluationID) {
this.evaluationID = evaluationID;
}
public String getUserID() {
return userID;
}
public void setUserID(String userID) {
this.userID = userID;
}
public String getLectureName() {
return lectureName;
}
public void setLectureName(String lectureName) {
this.lectureName = lectureName;
}
public String getProfessorName() {
return professorName;
}
public void setProfessorName(String professorName) {
this.professorName = professorName;
}
public int getLectureYear() {
return lectureYear;
}
public void setLectureYear(int lectureYear) {
this.lectureYear = lectureYear;
}
public String getSemesterDivide() {
return semesterDivide;
}
public void setSemesterDivide(String semesterDivide) {
this.semesterDivide = semesterDivide;
}
public String getLectureDivide() {
return lectureDivide;
}
public void setLectureDivide(String lectureDivide) {
this.lectureDivide = lectureDivide;
}
public String getEvaluationTitle() {
return evaluationTitle;
}
public void setEvaluationTitle(String evaluationTitle) {
this.evaluationTitle = evaluationTitle;
}
public String getEvaluationContent() {
return evaluationContent;
}
public void setEvaluationContent(String evaluationContent) {
this.evaluationContent = evaluationContent;
}
public String getTotalScore() {
return totalScore;
}
public void setTotalScore(String totalScore) {
this.totalScore = totalScore;
}
public String getCreditScore() {
return creditScore;
}
public void setCreditScore(String creditScore) {
this.creditScore = creditScore;
}
public String getComfortableScore() {
return comfortableScore;
}
public void setComfortableScore(String comfortableScore) {
this.comfortableScore = comfortableScore;
}
public String getLectureScore() {
return lectureScore;
}
public void setLectureScore(String lectureScore) {
this.lectureScore = lectureScore;
}
public int getLikeCount() {
return likeCount;
}
public void setLikeCount(int likeCount) {
this.likeCount = likeCount;
}
public EvaluationDTO(int evaluationID, String userID, String lectureName, String professorName, int lectureYear,
String semesterDivide, String lectureDivide, String evaluationTitle, String evaluationContent,
String totalScore, String creditScore, String comfortableScore, String lectureScore, int likeCount) {
super();
this.evaluationID = evaluationID;
this.userID = userID;
this.lectureName = lectureName;
this.professorName = professorName;
this.lectureYear = lectureYear;
this.semesterDivide = semesterDivide;
this.lectureDivide = lectureDivide;
this.evaluationTitle = evaluationTitle;
this.evaluationContent = evaluationContent;
this.totalScore = totalScore;
this.creditScore = creditScore;
this.comfortableScore = comfortableScore;
this.lectureScore = lectureScore;
this.likeCount = likeCount;
}
}
▶ EvaluationDAO.java: 강의 평가와 관련된 데이터베이스 접근을 가능하게 해주는 객체입니다.
package evaluation;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
public class EvaluationDAO {
private Connection conn;
private ResultSet rs;
public EvaluationDAO() {
try {
String dbURL = "jdbc:mysql://localhost:3306/LectureEvaluation";
String dbID = "데이터베이스 아이디";
String dbPassword = "데이터베이스 비밀번호";
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(dbURL, dbID, dbPassword);
} catch (Exception e) {
e.printStackTrace();
}
}
public int write(EvaluationDTO evaluationDTO) {
PreparedStatement pstmt = null;
try {
String SQL = "INSERT INTO EVALUATION VALUES (NULL, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 0);";
pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, evaluationDTO.getUserID());
pstmt.setString(2, evaluationDTO.getLectureName());
pstmt.setString(3, evaluationDTO.getProfessorName());
pstmt.setInt(4, evaluationDTO.getLectureYear());
pstmt.setString(5, evaluationDTO.getSemesterDivide());
pstmt.setString(6, evaluationDTO.getLectureDivide());
pstmt.setString(7, evaluationDTO.getEvaluationTitle());
pstmt.setString(8, evaluationDTO.getEvaluationContent());
pstmt.setString(9, evaluationDTO.getTotalScore());
pstmt.setString(10, evaluationDTO.getCreditScore());
pstmt.setString(11, evaluationDTO.getComfortableScore());
pstmt.setString(12, evaluationDTO.getLectureScore());
return pstmt.executeUpdate();
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if(pstmt != null) pstmt.close();
if(conn != null) conn.close();
} catch (Exception e) {
e.printStackTrace();
}
}
return -1;
}
}
▶ reportAction.jsp: 사용자가 신고서를 작성하면, 관리자의 메일로 그 신고 내용을 받습니다.
<%@page import="javax.mail.Transport"%>
<%@page import="javax.mail.Message"%>
<%@page import="javax.mail.Address"%>
<%@page import="javax.mail.internet.InternetAddress"%>
<%@page import="javax.mail.internet.MimeMessage"%>
<%@page import="javax.mail.Session"%>
<%@page import="javax.mail.Authenticator"%>
<%@page import="java.util.Properties"%>
<%@page import="java.io.PrintWriter"%>
<%@page import="user.UserDAO"%>
<%@page import="util.SHA256"%>
<%@page import="util.Gmail"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
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 = 'userLogin.jsp'");
script.println("</script>");
script.close();
return;
}
request.setCharacterEncoding("UTF-8");
String reportTitle = null;
String reportContent = null;
if(request.getParameter("reportTitle") != null) {
reportTitle = (String) request.getParameter("reportTitle");
}
if(request.getParameter("reportContent") != null) {
reportContent = (String) request.getParameter("reportContent");
}
if (reportTitle == null || reportContent == null) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('입력이 안 된 사항이 있습니다.');");
script.println("history.back();");
script.println("</script>");
script.close();
return;
}
// 사용자에게 보낼 메시지를 기입합니다.
String host = "http://localhost:8080/Lecture_Evaluation/";
String from = "구글 계정 아이디";
String to = "관리자/개발자의 이메일 주소";
String subject = "강의평가 사이트에서 접수된 신고 메일입니다.";
String content = "신고자: " + userID + "<br>제목: " + reportTitle + "<br>내용: " + reportContent;
// SMTP에 접속하기 위한 정보를 기입합니다.
Properties p = new Properties();
p.put("mail.smtp.user", from);
p.put("mail.smtp.host", "smtp.googlemail.com");
p.put("mail.smtp.port", "465");
p.put("mail.smtp.starttls.enable", "true");
p.put("mail.smtp.auth", "true");
p.put("mail.smtp.debug", "true");
p.put("mail.smtp.socketFactory.port", "465");
p.put("mail.smtp.socketFactory.class", "javax.net.ssl.SSLSocketFactory");
p.put("mail.smtp.socketFactory.fallback", "false");
try{
Authenticator auth = new Gmail();
Session ses = Session.getInstance(p, auth);
ses.setDebug(true);
MimeMessage msg = new MimeMessage(ses);
msg.setSubject(subject);
Address fromAddr = new InternetAddress(from);
msg.setFrom(fromAddr);
Address toAddr = new InternetAddress(to);
msg.addRecipient(Message.RecipientType.TO, toAddr);
msg.setContent(content, "text/html;charset=UTF-8");
Transport.send(msg);
} catch(Exception e){
e.printStackTrace();
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('오류가 발생했습니다.');");
script.println("history.back();");
script.println("</script>");
script.close();
return;
}
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('정상적으로 신고되었습니다.');");
script.println("history.back();");
script.println("</script>");
script.close();
return;
%>
▶ evaluationRegisterAction.jsp: 사용자가 평가를 등록하게 되면, 그 평가 등록을 처리합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="evaluation.EvaluationDTO"%>
<%@ page import="evaluation.EvaluationDAO"%>
<%@ page import="java.io.PrintWriter"%>
<%
request.setCharacterEncoding("UTF-8");
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 = 'userLogin.jsp'");
script.println("</script>");
script.close();
return;
}
request.setCharacterEncoding("UTF-8");
String lectureName = null;
String professorName = null;
int lectureYear = 0;
String semesterDivide = null;
String lectureDivide = null;
String evaluationTitle = null;
String evaluationContent = null;
String totalScore = null;
String creditScore = null;
String comfortableScore = null;
String lectureScore = null;
if(request.getParameter("lectureName") != null) {
lectureName = (String) request.getParameter("lectureName");
}
if(request.getParameter("professorName") != null) {
professorName = (String) request.getParameter("professorName");
}
if(request.getParameter("lectureYear") != null) {
try {
lectureYear = Integer.parseInt(request.getParameter("lectureYear"));
} catch (Exception e) {
System.out.println("강의 연도 데이터 오류");
}
}
if(request.getParameter("semesterDivide") != null) {
semesterDivide = (String) request.getParameter("semesterDivide");
}
if(request.getParameter("lectureDivide") != null) {
lectureDivide = (String) request.getParameter("lectureDivide");
}
if(request.getParameter("evaluationTitle") != null) {
evaluationTitle = (String) request.getParameter("evaluationTitle");
}
if(request.getParameter("evaluationContent") != null) {
evaluationContent = (String) request.getParameter("evaluationContent");
}
if(request.getParameter("totalScore") != null) {
totalScore = (String) request.getParameter("totalScore");
}
if(request.getParameter("creditScore") != null) {
creditScore = (String) request.getParameter("creditScore");
}
if(request.getParameter("comfortableScore") != null) {
comfortableScore = (String) request.getParameter("comfortableScore");
}
if(request.getParameter("lectureScore") != null) {
lectureScore = (String) request.getParameter("lectureScore");
}
if (lectureName == null || professorName == null || lectureYear == 0 || semesterDivide == null ||
lectureDivide == null || evaluationTitle == null || evaluationContent == null || totalScore == null ||
creditScore == null || comfortableScore == null || lectureScore == null ||
evaluationTitle.equals("") || evaluationContent.equals("")) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('입력이 안 된 사항이 있습니다.');");
script.println("history.back();");
script.println("</script>");
script.close();
return;
} else {
EvaluationDAO evaluationDAO = new EvaluationDAO();
int result = evaluationDAO.write(new EvaluationDTO(0, userID, lectureName, professorName, lectureYear,
semesterDivide, lectureDivide, evaluationTitle, evaluationContent,
totalScore, creditScore, comfortableScore, lectureScore, 0));
if (result == -1) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('평가 등록에 실패했습니다.');");
script.println("history.back();");
script.println("</script>");
script.close();
return;
} else {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("location.href = './index.jsp';");
script.println("</script>");
script.close();
return;
}
}
%>
이제 한 번 테스트를 해봅시다.
위와 같이 신고를 해보겠습니다.
그럼 위와 같이 관리자 이메일로 신고 내용이 도착하는 것을 알 수 있습니다.
평가 또한 등록해보도록 하겠습니다.
성공적으로 평가 데이터가 데이터베이스에 등록되었습니다.
'JAVA & JSP' 카테고리의 다른 글
| JSP로 강의평가 웹 사이트 개발하기 ⑩ 추천 및 삭제 기능 구현하기 (0) | 2018.01.27 |
|---|---|
| JSP로 강의평가 웹 사이트 개발하기 ⑨ 평가 검색 및 출력 구현하기 (4) | 2018.01.27 |
| JSP로 강의평가 웹 사이트 개발하기 ⑦ 로그인 및 로그아웃 구현하기 (8) | 2018.01.27 |
| JSP로 강의평가 웹 사이트 개발하기 ⑥ 회원가입 및 이메일 전송하기 (22) | 2018.01.26 |
| JSP로 강의평가 웹 사이트 개발하기 ⑤ 회원 데이터 모델링 (0) | 2018.01.26 |
JSP로 강의평가 웹 사이트 개발하기 ⑦ 로그인 및 로그아웃 구현하기
이번 시간은 JSP 강의평가(Lecture Evaluation) 웹 사이트 개발하기의 일곱 번째 시간입니다. 지난 시간에는 회원가입 및 이메일 전송 기능을 구현했습니다. 이제 실질적으로 회원가입에 성공한 사람이 로그인을 할 수 있도록 해주는 것입니다. 또한 로그인 이후에는 로그아웃도 할 수 있도록 개발을 해주어야겠지요. 바로 다음과 같이 userLoginAction.jsp와 userLogout.jsp를 작성하도록 합니다.
▶ userLoginAction.jsp: 실질적인 사용자의 로그인을 처리하는 부분입니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="user.UserDTO"%>
<%@ page import="user.UserDAO"%>
<%@ page import="java.io.PrintWriter"%>
<%
request.setCharacterEncoding("UTF-8");
String userID = null;
String userPassword = null;
if(request.getParameter("userID") != null) {
userID = (String) request.getParameter("userID");
}
if(request.getParameter("userPassword") != null) {
userPassword = (String) request.getParameter("userPassword");
}
UserDAO userDAO = new UserDAO();
int result = userDAO.login(userID, userPassword);
if (result == 1) {
session.setAttribute("userID", userID);
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("location.href='index.jsp'");
script.println("</script>");
script.close();
} else if (result == 0) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('비밀번호가 틀립니다.');");
script.println("history.back();");
script.println("</script>");
script.close();
} else if (result == -1) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('존재하지 않는 아이디입니다.');");
script.println("history.back();");
script.println("</script>");
script.close();
} else if (result == -2) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('데이터베이스 오류가 발생했습니다.');");
script.println("history.back();");
script.println("</script>");
script.close();
}
%>
▶ userLogout.jsp: 사용자의 로그인 세션을 파기하는 부분입니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.io.PrintWriter"%>
<%
session.invalidate();
%>
<script>
location.href = 'index.jsp';
</script>
이제 실질적으로 로그인을 했을 때와 로그인을 하지 않았을 때를 세션으로 구분하기 위해서 다음과 같이 처리해주도록 하겠습니다.
▶ index.jsp 페이지의 윗부분
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.io.PrintWriter"%>
<%@ page import="user.UserDAO"%><!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>
<%
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 = 'userLogin.jsp'");
script.println("</script>");
script.close();
}
boolean emailChecked = new UserDAO().getUserEmailChecked(userID);
if(emailChecked == false) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("location.href = 'emailSendConfirm.jsp'");
script.println("</script>");
script.close();
return;
}
%>
<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">
<%
if(userID == null) {
%>
<a class="dropdown-item" href="userLogin.jsp">로그인</a>
<a class="dropdown-item" href="userRegister.jsp">회원가입</a>
<%
} else {
%>
<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>
▶ userLogin.jsp 페이지의 윗부분
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.io.PrintWriter"%>
<!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>
<%
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 = 'index.jsp'");
script.println("</script>");
script.close();
}
%>
<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">
<%
if(userID == null) {
%>
<a class="dropdown-item" href="userLogin.jsp">로그인</a>
<a class="dropdown-item" href="userRegister.jsp">회원가입</a>
<%
} else {
%>
<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>
▶ userRegisterAction.jsp 페이지의 윗부분
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.io.PrintWriter"%>
<!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>
<%
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 = 'index.jsp'");
script.println("</script>");
script.close();
}
%>
<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">
<%
if(userID == null) {
%>
<a class="dropdown-item" href="userLogin.jsp">로그인</a>
<a class="dropdown-item" href="userRegister.jsp">회원가입</a>
<%
} else {
%>
<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>
이후에 현재 소스코드에서는 이메일 인증이 되지 않은 사람은 메인 페이지로 접속할 수 없습니다. 따라서 이메일 인증이 되지 않은 사람이 메인 페이지에 접속하면 emailSendConfirm.jsp로 이동하도록 만들었습니다. 그러므로 emailSendConfirm.jsp를 새롭게 만들어줍시다.
▶ emailSendConfirm.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="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">
<div class="alert alert-warning mt-4" role="alert">
이메일 주소 인증을 하셔야 이용 가능합니다. 인증 메일을 받지 못하셨나요?
</div>
<a href="emailSendAction.jsp" class="btn btn-primary">인증 메일 다시 받기</a>
</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>
이제 테스트하면 로그인, 로그아웃, 회원가입, 이메일 인증 및 메인 페이지에서의 세션 관리 부분까지 완전하게 동작하는 것을 확인할 수 있습니다.
'JAVA & JSP' 카테고리의 다른 글
| JSP로 강의평가 웹 사이트 개발하기 ⑨ 평가 검색 및 출력 구현하기 (4) | 2018.01.27 |
|---|---|
| JSP로 강의평가 웹 사이트 개발하기 ⑧ 평가 등록 및 신고 구현하기 (7) | 2018.01.27 |
| JSP로 강의평가 웹 사이트 개발하기 ⑥ 회원가입 및 이메일 전송하기 (22) | 2018.01.26 |
| JSP로 강의평가 웹 사이트 개발하기 ⑤ 회원 데이터 모델링 (0) | 2018.01.26 |
| JSP로 강의평가 웹 사이트 개발하기 ④ 데이터베이스 구축하기 (2) | 2018.01.26 |
JSP로 강의평가 웹 사이트 개발하기 ⑥ 회원가입 및 이메일 전송하기
이번 시간은 JSP 강의평가(Lecture Evaluation) 웹 사이트 개발하기의 여섯 번째 시간입니다. 지난 시간에는 회원 데이터를 모델링하는 시간을 가져보았습니다. 이번 시간에는 모델링한 DTO, DAO를 이용하여 실제로 회원가입을 수행하고, 이메일을 전송하는 기능을 구현해보도록 하겠습니다. 기본적으로 이러한 기능을 위해서는 두 가지 유틸리티가 필요합니다. 하나는 회원가입 및 이메일 인증에 사용할 해시 데이터를 생성할 수 있는 SHA256 클래스이고, 다른 하나는 사용자에게 SMTP를 이용해 이메일 인증 메시지를 전송하는 이메일 전송 관련 Gmail 클래스입니다. 바로 다음과 같이 util 패키지를 생성해서 두 개의 클래스를 만들어주시면 됩니다.
이후에 SMTP를 이용해 메일을 전송하기 위해서는 몇 가지 추가적인 외부 라이브러리가 필요합니다. 첫 번째는 Mail 라이브러리이며 다른 하나는 Activation 클래스입니다. 라이브러리가 없으신 분들은 다음의 링크에서 받아서 이용하시면 됩니다.
▶ Mail 라이브러리 다운로드 사이트: http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-eeplat-419426.html#javamail-1.4.7-oth-JPR
▶ Activation 라이브러리 다운로드 사이트: http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-java-plat-419418.html#jaf-1.1-fr-oth-JPR
위 사이트로 접속하셔서 각각 javamail.zip과 jaf.zip를 다운로드 받으신 뒤에 압축을 푸셔서 라이브러리를 찾아서 다음과 같이 WEB-INF 폴더 내부의 lib 폴더에 넣어주시면 됩니다.
이제 한 번 우리의 util 패키지 내에 있는 클래스들을 작성해보도록 하겠습니다.
▶ SHA256.java
package util;
import java.security.MessageDigest;
public class SHA256 {
public static String getSHA256(String input) {
StringBuffer result = new StringBuffer();
try {
MessageDigest digest = MessageDigest.getInstance("SHA-256");
byte[] salt = "Hello! This is Salt.".getBytes();
digest.reset();
digest.update(salt);
byte[] chars = digest.digest(input.getBytes("UTF-8"));
for(int i = 0; i < chars.length; i++) {
String hex = Integer.toHexString(0xff & chars[i]);
if(hex.length() == 1) result.append('0');
result.append(hex);
}
} catch (Exception e) {
e.printStackTrace();
}
return result.toString();
}
}
위 소스코드를 보시면 솔트(Salt) 부분이 들어가있는 것을 알 수 있습니다. 해시 데이터를 생성할 때 악의적인 목적을 가진 공격자가 원래의 데이터를 파악하기 더욱 어렵게 만들어 줄 수 있습니다.
▶ Gmail.java
package util;
import javax.mail.Authenticator;
import javax.mail.PasswordAuthentication;
public class Gmail extends Authenticator {
@Override
protected PasswordAuthentication getPasswordAuthentication() {
return new PasswordAuthentication("아이디","비밀번호");
}
}
SMTP에서 인증을 위한 부분을 위와 같이 클래스에서 작성할 수 있습니다. 저는 구글 이메일(G-Mail)을 사용해보도록 하겠습니다. 자신의 구글 계정 중에서 이메일을 사용할 수 있는 계정을 입력하시면 됩니다. 또한 기본적으로 구글 계정은 '계정' 설정에서 '보안 수준이 낮은 앱'에 대한 접근 권한이 설정되어야 합니다.
이제 다음과 같이 userRegisterAction.jsp, emailCheckAction.jsp, emailSendAction.jsp 세 가지를 만들어줍니다.
▶ userRegisterAction.jsp: 회원가입을 처리합니다. 사용자 정보를 데이터베이스에 등록한 이후에, 자동으로 사용자의 이메일로 이메일을 전송하고 인증을 기다립니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="user.UserDTO"%>
<%@ page import="user.UserDAO"%>
<%@ page import="util.SHA256"%>
<%@ page import="java.io.PrintWriter"%>
<%
request.setCharacterEncoding("UTF-8");
String userID = null;
String userPassword = null;
String userEmail = null;
if(request.getParameter("userID") != null) {
userID = (String) request.getParameter("userID");
}
if(request.getParameter("userPassword") != null) {
userPassword = (String) request.getParameter("userPassword");
}
if(request.getParameter("userEmail") != null) {
userEmail = (String) request.getParameter("userEmail");
}
if (userID == null || userPassword == null || userEmail == null) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('입력이 안 된 사항이 있습니다.');");
script.println("history.back();");
script.println("</script>");
script.close();
} else {
UserDAO userDAO = new UserDAO();
int result = userDAO.join(new UserDTO(userID, userPassword, userEmail, SHA256.getSHA256(userEmail), false));
if (result == -1) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('이미 존재하는 아이디입니다.');");
script.println("history.back();");
script.println("</script>");
script.close();
} else {
session.setAttribute("userID", userID);
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("location.href = 'emailSendAction.jsp';");
script.println("</script>");
script.close();
}
}
%>
▶ emailSendAction.jsp: 이메일 인증 메시지를 이메일을 통해 전송합니다.
<%@page import="javax.mail.Transport"%>
<%@page import="javax.mail.Message"%>
<%@page import="javax.mail.Address"%>
<%@page import="javax.mail.internet.InternetAddress"%>
<%@page import="javax.mail.internet.MimeMessage"%>
<%@page import="javax.mail.Session"%>
<%@page import="javax.mail.Authenticator"%>
<%@page import="java.util.Properties"%>
<%@page import="java.io.PrintWriter"%>
<%@page import="user.UserDAO"%>
<%@page import="util.SHA256"%>
<%@page import="util.Gmail"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
UserDAO userDAO = new UserDAO();
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 = 'userLogin.jsp'");
script.println("</script>");
script.close();
return;
}
boolean emailChecked = userDAO.getUserEmailChecked(userID);
if(emailChecked == true) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('이미 인증 된 회원입니다.');");
script.println("location.href = 'index.jsp'");
script.println("</script>");
script.close();
return;
}
// 사용자에게 보낼 메시지를 기입합니다.
String host = "http://localhost:8080/Lecture_Evaluation/";
String from = "이메일 아이디";
String to = userDAO.getUserEmail(userID);
String subject = "강의평가를 위한 이메일 확인 메일입니다.";
String content = "다음 링크에 접속하여 이메일 확인을 진행하세요." +
"<a href='" + host + "emailCheckAction.jsp?code=" + new SHA256().getSHA256(to) + "'>이메일 인증하기</a>";
// SMTP에 접속하기 위한 정보를 기입합니다.
Properties p = new Properties();
p.put("mail.smtp.user", from);
p.put("mail.smtp.host", "smtp.googlemail.com");
p.put("mail.smtp.port", "465");
p.put("mail.smtp.starttls.enable", "true");
p.put("mail.smtp.auth", "true");
p.put("mail.smtp.debug", "true");
p.put("mail.smtp.socketFactory.port", "465");
p.put("mail.smtp.socketFactory.class", "javax.net.ssl.SSLSocketFactory");
p.put("mail.smtp.socketFactory.fallback", "false");
try{
Authenticator auth = new Gmail();
Session ses = Session.getInstance(p, auth);
ses.setDebug(true);
MimeMessage msg = new MimeMessage(ses);
msg.setSubject(subject);
Address fromAddr = new InternetAddress(from);
msg.setFrom(fromAddr);
Address toAddr = new InternetAddress(to);
msg.addRecipient(Message.RecipientType.TO, toAddr);
msg.setContent(content, "text/html;charset=UTF-8");
Transport.send(msg);
} catch(Exception e){
e.printStackTrace();
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('오류가 발생했습니다..');");
script.println("history.back();");
script.println("</script>");
script.close();
return;
}
%>
<!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>
</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">
<div class="alert alert-success mt-4" role="alert">
이메일 주소 인증 메일이 전송되었습니다. 이메일에 들어가셔서 인증해주세요.
</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>
▶ emailCheckAction.jsp: 사용자가 이메일 인증을 하게 되면 그에 대한 정보를 처리하는 페이지입니다.
<%@page import="java.io.PrintWriter"%>
<%@page import="util.SHA256"%>
<%@page import="user.UserDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String code = request.getParameter("code");
UserDAO userDAO = new UserDAO();
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 = 'userLogin.jsp'");
script.println("</script>");
script.close();
return;
}
String userEmail = userDAO.getUserEmail(userID);
boolean rightCode = (new SHA256().getSHA256(userEmail).equals(code)) ? true : false;
if(rightCode == true) {
userDAO.setUserEmailChecked(userID);
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('인증에 성공했습니다.');");
script.println("location.href = 'index.jsp'");
script.println("</script>");
script.close();
return;
} else {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('유효하지 않은 코드입니다.');");
script.println("location.href = 'index.jsp'");
script.println("</script>");
script.close();
return;
}
%>
이제 한 번 테스트를 해봅시다.
먼저 위와 같이 회원가입을 해주겠습니다.
이후에 위와 같이 회원가입 된 정보를 확인합시다.
이후에 이메일 주소 인증 메일이 전송되었다는 메시지가 나오네요.
이제 이메일 함으로 이동해보시면 위와 같이 인증 메일이 온 것을 확인할 수 있습니다.
링크를 타고 이동하면 위와 같이 인증이 완료되어 메인 페이지가 등장합니다.
이후에 위와 같이 데이터베이스에서 사용자 정보를 확인하면 'userEmailChecked' 속성의 값이 1(True)로 바뀌어있는 것을 확인할 수 있습니다.
'JAVA & JSP' 카테고리의 다른 글
| JSP로 강의평가 웹 사이트 개발하기 ⑧ 평가 등록 및 신고 구현하기 (7) | 2018.01.27 |
|---|---|
| JSP로 강의평가 웹 사이트 개발하기 ⑦ 로그인 및 로그아웃 구현하기 (8) | 2018.01.27 |
| JSP로 강의평가 웹 사이트 개발하기 ⑤ 회원 데이터 모델링 (0) | 2018.01.26 |
| JSP로 강의평가 웹 사이트 개발하기 ④ 데이터베이스 구축하기 (2) | 2018.01.26 |
| JSP로 강의평가 웹 사이트 개발하기 ③ 웹 디자인 개발하기 (1) | 2018.01.26 |
JSP로 강의평가 웹 사이트 개발하기 ⑤ 회원 데이터 모델링
이번 강의는 JSP 강의평가(Lecture Evaluation) 웹 사이트 개발하기의 다섯 번째 시간입니다. 이번 시간에는 지난 시간에 했었던 데이터베이스 설계를 토대로 서버 프로그램상에서 데이터를 모델링하려고 합니다. 일반적으로 데이터를 모델링할 때는 DTO(Data Transfer Object)와 DAO(Data Access Object)를 작성해주시면 됩니다. DTO는 말 그대로 데이터베이스 테이블과 거의 1:1 대응되어 개별 데이터 원소를 보관하기 위해 사용되는 객체이며 DAO는 데이터베이스와 실질적으로 통신하는 모듈입니다. 이번 시간에는 가장 먼저 회원 데이터를 모델링해보도록 하겠습니다.
먼저 위와 같이 자바 소스코드 영역에 user 패키지를 생성해서 UserDAO와 UserDTO를 자바 파일로 생성합니다.
▶ UserDTO.java
package user;
public class UserDTO {
private String userID;
private String userPassword;
private String userEmail;
private String userEmailHash;
private boolean userEmailChecked;
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 getUserEmail() {
return userEmail;
}
public void setUserEmail(String userEmail) {
this.userEmail = userEmail;
}
public String getUserEmailHash() {
return userEmailHash;
}
public void setUserEmailHash(String userEmailHash) {
this.userEmailHash = userEmailHash;
}
public boolean isUserEmailChecked() {
return userEmailChecked;
}
public void setUserEmailChecked(boolean userEmailChecked) {
this.userEmailChecked = userEmailChecked;
}
public UserDTO(String userID, String userPassword, String userEmail,
String userEmailHash, boolean userEmailChecked) {
this.userID = userID;
this.userPassword = userPassword;
this.userEmail = userEmail;
this.userEmailHash = userEmailHash;
this.userEmailChecked = userEmailChecked;
}
}
위 DTO 파일을 보시면 사실상 이전 시간에 작업했던 데이터베이스 부분과 거의 일치하는 것을 알 수 있습니다. MySQL 언어를 자바 소스코드 언어로 바꾼 것 뿐이지요.
▶ UserDAO.java
package user;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class UserDAO {
private Connection conn;
private ResultSet rs;
public UserDAO() {
try {
String dbURL = "jdbc:mysql://localhost:3306/LectureEvaluation";
String dbID = "root";
String dbPassword = "root1234";
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(dbURL, dbID, dbPassword);
} catch (Exception e) {
e.printStackTrace();
}
}
public int login(String userID, String userPassword) {
String SQL = "SELECT userPassword FROM USER WHERE userID = ?";
try {
PreparedStatement pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, userID);
rs = pstmt.executeQuery();
if(rs.next()) {
if(rs.getString(1).equals(userPassword))
return 1; // 로그인 성공
else
return 0; // 비밀번호 틀림
}
return -1; // 아이디 없음
} catch (SQLException e) {
e.printStackTrace();
}
return -2; // 데이터베이스 오류
}
public int join(UserDTO user) {
String SQL = "INSERT INTO USER VALUES (?, ?, ?, ?, false)";
try {
PreparedStatement pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, user.getUserID());
pstmt.setString(2, user.getUserPassword());
pstmt.setString(3, user.getUserEmail());
pstmt.setString(4, user.getUserEmailHash());
return pstmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}
return -1; // 회원가입 실패
}
public String getUserEmail(String userID) {
String SQL = "SELECT userEmail FROM USER WHERE userID = ?";
try {
PreparedStatement pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, userID);
rs = pstmt.executeQuery();
while(rs.next()) {
return rs.getString(1); // 이메일 주소 반환
}
} catch (SQLException e) {
e.printStackTrace();
}
return null; // 데이터베이스 오류
}
public boolean getUserEmailChecked(String userID) {
String SQL = "SELECT userEmailChecked FROM USER WHERE userID = ?";
try {
PreparedStatement pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, userID);
rs = pstmt.executeQuery();
while(rs.next()) {
return rs.getBoolean(1); // 이메일 등록 여부 반환
}
} catch (SQLException e) {
e.printStackTrace();
}
return false; // 데이터베이스 오류
}
public boolean setUserEmailChecked(String userID) {
String SQL = "UPDATE USER SET userEmailChecked = true WHERE userID = ?";
try {
PreparedStatement pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, userID);
pstmt.executeUpdate();
return true; // 이메일 등록 설정 성공
} catch (SQLException e) {
e.printStackTrace();
}
return false; // 이메일 등록 설정 실패
}
}
- getUserEmail(): 사용자의 아이디를 이용해 이메일 주소를 알아냅니다. 결과는 문자열형으로 반환됩니다.
이제 데이터베이스 연동을 위해서 JDBC Connector를 설치해주도록 할게요. MySQL 전용 드라이버는 다음의 경로에서 구하실 수 있습니다.
▶ MySQL JDBC 드라이버 사이트: https://dev.mysql.com/downloads/connector/j/5.1.html
위와 같이 프로젝트가 구성되도록 JDBC를 넣어주시면 된답니다. WEB-INF 폴더의 lib 폴더에 넣어주시면 자동으로 웹 어플리케이션이 구동되는 단계에서 해당 라이브러리를 사용할 수 있게 되서 문제가 없습니다.
'JAVA & JSP' 카테고리의 다른 글
| JSP로 강의평가 웹 사이트 개발하기 ⑦ 로그인 및 로그아웃 구현하기 (8) | 2018.01.27 |
|---|---|
| JSP로 강의평가 웹 사이트 개발하기 ⑥ 회원가입 및 이메일 전송하기 (22) | 2018.01.26 |
| JSP로 강의평가 웹 사이트 개발하기 ④ 데이터베이스 구축하기 (2) | 2018.01.26 |
| JSP로 강의평가 웹 사이트 개발하기 ③ 웹 디자인 개발하기 (1) | 2018.01.26 |
| JSP로 강의평가 웹 사이트 개발하기 ② 웹 디자인 기초 잡기 (5) | 2018.01.26 |
JSP로 강의평가 웹 사이트 개발하기 ④ 데이터베이스 구축하기
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로 설정을 한 거에요.
'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로 강의평가 웹 사이트 개발하기 ③ 웹 디자인 개발하기
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">컴퓨터개론 <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">
정말 좋은 강의에요. <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">컴퓨터그래픽스 <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">
나쁘지 않은 것 같습니다. <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">알고리즘 <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">
강의력이 제일 좋은 강의입니다. <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">×</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">×</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>
'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 |
JSP로 강의평가 웹 사이트 개발하기 ② 웹 디자인 기초 잡기
이번 시간은 JSP로 강의평가(Lecture Evaluation) 웹 사이트 개발하기 강좌의 두 번째 시간입니다. 지난 시간에는 강의평가 웹 사이트를 개발하기 위한 준비물에 대해서 알아보았습니다. 이번 시간은 웹 디자인을 해보도록 하겠습니다. 일반적으로 혼자서 웹 사이트를 개발할 때는 웹 서버 프로그램을 개발하기 전에 웹 디자인을 개발하는 것이 일반적입니다. 애초에 웹 디자인을 하기 위해서는 기본적인 설계가 잡혀있어야 되기 때문이지요. 바로 웹 디자인을 해보도록 하겠습니다.
웹 디자인을 완전히 제로베이스에서 하나하나씩 하면 힘이 들기 마련입니다. 그러므로 프레임워크와 라이브러리를 사용합시다.
1) 부트스트랩 프레임워크: http://getbootstrap.com/docs/4.0/getting-started/download/
위 사이트에 가서 bootstrap.min.css와 bootstrap.min.js를 다운로드하도록 합시다. 부트스트랩은 웹 디자인의 메인 프레임워크로 사용되는 경우가 많습니다. 다만 메인 프레임워크를 가동시키기 위해서는 여러 개의 추가적인 라이브러리가 필요할 수 있지요.
2) 파퍼(Popper) 라이브러리: https://unpkg.com/popper.js@1.12.9/dist/umd/popper.min.js
위 사이트로 가서 부트스트랩 프레임워크의 내부 로직에 사용되는 파퍼 자바스크립트 라이브러리를 다운로드 받아주세요.
3) 제이쿼리(jQuery) 라이브러리: https://jquery.com/download/
위 사이트에 가신 뒤에 jQuery 압축 버전을 다운로드 받아주세요. 부트스트랩은 jQuery 라이브러리의 다양한 함수를 사용하는 프레임워크이므로 jQuery 라이브러리가 포함되어야 정상적으로 사용할 수 있습니다.
이제 다음과 같이 이클립스 JEE를 실행하여 새로운 동적 웹 프로젝트를 생성해줍니다.
이후에 다음과 같이 Lecture Evaluation이라는 이름으로 하나의 프로젝트를 생성해주겠습니다.
그리고 다음과 같이 Lecture Evaluation 프로젝트 안에 css, js 폴더를 생성해서 그 안에 부트스트랩 프레임워크, jQuery 라이브러리, Popper 라이브러리를 모두 삽입해줍니다. 이후에 custom.css라는 이름으로 하나의 디자인 파일을 더 넣어줍니다. 여기에다가는 우리의 고유 디자인을 넣어 줄 겁니다. 바로 다음과 같이 프로젝트가 구성되도록 하면 됩니다.
custom.css 파일의 소스코드는 다음과 같이 작성해주겠습니다.
@import url(https://fonts.googleapis.com/earlyaccess/jejugothic.css);
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
.navbar-brand, h1, h2, h3, h4 {
font-family: 'Jeju Gothic';
}
h5 {
font-family: 'Jeju Gothic';
font-size: 18px;
}
body {
font-family: 'Nanum Gothic';
}
<!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="#">로그인</a>
<a class="dropdown-item" href="#">회원가입</a>
<a class="dropdown-item" href="#">로그아웃</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="내용을 입력하세요." aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">검색</button>
</form>
</div>
</nav>
<!-- 제이쿼리 자바스크립트 추가하기 -->
<script src="./js/jquery.min.js"></script>
<!-- Popper 자바스크립트 추가하기 -->
<script src="./js/popper.min.js"></script>
<!-- 부트스트랩 자바스크립트 추가하기 -->
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
실행 결과는 다음과 같습니다.
'JAVA & JSP' 카테고리의 다른 글
| JSP로 강의평가 웹 사이트 개발하기 ⑥ 회원가입 및 이메일 전송하기 (22) | 2018.01.26 |
|---|---|
| JSP로 강의평가 웹 사이트 개발하기 ⑤ 회원 데이터 모델링 (0) | 2018.01.26 |
| JSP로 강의평가 웹 사이트 개발하기 ④ 데이터베이스 구축하기 (2) | 2018.01.26 |
| JSP로 강의평가 웹 사이트 개발하기 ③ 웹 디자인 개발하기 (1) | 2018.01.26 |
| JSP로 강의평가 웹 사이트 개발하기 ① 준비물 알아보기 (4) | 2018.01.21 |
JSP로 강의평가 웹 사이트 개발하기 ① 준비물 알아보기
안녕하세요, 이번에는 JSP로 강의평가(Lecture Evaluation) 웹 사이트를 개발해보도록 하겠습니다. 일반적으로 대부분의 학교에서는 매 학기마다 강의가 끝나면 학생들이 강의평가를 할 수 있게 해줍니다. 하지만 강의평가 내용을 학생들이 서로 공유할 수 있도록 해주지는 않습니다. 오직 교수님들만 그 평가 내용을 볼 수 있지요. 그렇기 때문에 학생들은 다음 학기 때 수강신청을 할 때 내가 신청하려는 강의가 어떠한 강의인지에 대해서는 쉽게 파악하지 못한다는 단점이 있습니다. 따라서 이번 강좌에서는 고등학교/대학교를 막론하고 어디에서도 적용될 수 있는 강의평가 웹 사이트를 개발하는 방법에 대해서 알려드리고자 합니다.
일반적으로 혼자 웹 사이트를 개발하고자 할 때의 프로세스는 다음과 같습니다.
① 개발환경 구축하기
② 웹 디자인 개발하기
③ 데이터베이스 구축하기
④ 웹 서버 프로그램 개발하기
⑤ 기능 테스트하기
⑥ 배포 및 유지보수
이번 강좌에서의 준비물은 다음과 같습니다. 개발환경이기도 하구요. 다음 포스팅 때부터 실제로 프로그래밍을 하기 위해서는 이러한 개발환경이 모두 구축이 되어 있어야 합니다. 이 강의는 가장 기본적인 개발환경 구축 능력이 있다고 가정하고 진행됩니다.
1) 웹 브라우저: 크롬(Chrome)
크롬(Chrome)은 웹 개발용 브라우저로 굉장히 유용합니다. F12를 눌러서 '개발자 도구'를 연 뒤에 새로고침 아이콘에 마우스 커서를 대고 마우스 우클릭을 하면 '캐시 비우기 및 강력 새로고침' 버튼이 있는데, 실제로 웹 개발 테스트를 할 때는 이것만 잘 눌러주시면 됩니다. 가끔 그냥 새로고침을 하면 톰캣 컨테이너에서의 수정 결과가 즉시 반영되지는 않는 경향이 있습니다. 그래서 캐시 비우기 및 강력 새로고침을 잘 해주시면 됩니다.
크롬 브라우저 다운로드 사이트: https://www.google.com/chrome/browser/desktop/index.html
또한 크롬 브라우저를 이용하면 각종 확장 프로그램(Extended Program)을 설치할 수 있다는 점에서 취약점 테스트, 쿠키 설정 확인 등에서 많은 도움을 받을 수 있습니다. 더군다나 최근 국내에서 가장 많이 사용되고 있는 브라우저라는 점에서 호환성 측면에서 보았을 때도 참 괜찮습니다.
2) 프로그래밍 개발 환경: 자바 개발 키트(JDK)
JDK는 자바 개발 키트(Java Development Kit)의 약자로서 JSP의 베이스가 되는 언어입니다. JDK를 설치함으로써 JSP를 구동시킬 수 있습니다.
JDK 다운로드 사이트: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
3) JEE 개발 환경: 이클립스(Eclipse)
JEE 개발 환경으로는 넷빈즈(NetBeans) 등이 있는데, 아무래도 국내에서는 그래도 이클립스가 상당히 많이 사용되고 있습니다. 특히 이클립스의 스프링(Spring) 플러그 인도 굉장히 활용 빈도가 높기 때문에 처음부터 이클립스로 실습을 시작하는 것이 좋습니다.
이클립스 다운로드 사이트: http://www.eclipse.org/
4) 데이터베이스: MySQL
아무래도 상당수의 웹 호스팅 서비스에서 MySQL을 지원해주고 있다는 점과 기본적으로 무료로 커뮤니티 버전을 사용할 수 있다는 점에서 MySQL이 웹 프로젝트용으로 채택되기에 안성맞춤입니다.
MySQL 다운로드 사이트: https://dev.mysql.com/downloads/windows/installer/5.7.html
5) 웹 컨테이너: 톰캣(Tomcat)
톰캣은 대표적인 JSP & Servlet 전용 웹 컨테이너입니다. 이클립스 개발 환경 위에서 자바로 작성된 웹 프로젝트를 실제로 구동시켜볼 수 있으며 무료라는 점에서 가장 많이 채택이 되어 사용되고 있습니다.
톰캣 다운로드 사이트: https://tomcat.apache.org/download-80.cgi
'JAVA & JSP' 카테고리의 다른 글
| JSP로 강의평가 웹 사이트 개발하기 ⑥ 회원가입 및 이메일 전송하기 (22) | 2018.01.26 |
|---|---|
| JSP로 강의평가 웹 사이트 개발하기 ⑤ 회원 데이터 모델링 (0) | 2018.01.26 |
| JSP로 강의평가 웹 사이트 개발하기 ④ 데이터베이스 구축하기 (2) | 2018.01.26 |
| JSP로 강의평가 웹 사이트 개발하기 ③ 웹 디자인 개발하기 (1) | 2018.01.26 |
| JSP로 강의평가 웹 사이트 개발하기 ② 웹 디자인 기초 잡기 (5) | 2018.01.26 |
