mysql -uroot -p
create database tutorial;
use tutorial;
show tables;
create table user (
userID varchar(20),
userPassword varchar(64)
);
insert into user values ('1','123');
select * from user;
select userID from user;
권한설정 에러 시
use mysql;
select host,user from user;
create user 'root'@'%' identified by '1234';
use tutorial;
alter user 'root'@'localhost' identified with mysql_native_password by '1234';
commit;mysql-connector-java-5.1.42-bin.jar
0.95MB
mysql-connector-java-8.0.19.jar
2.25MB
https://offbyone.tistory.com/318
MySQL(MariaDB) 서버 타임존 설정하기
Java에서 MySQL 서버에 연결하니 다음과 같은 에러가 발생하였습니다. ### Cause: org.springframework.jdbc.CannotGetJdbcConnectionException: Failed to obtain JDBC Connection; nested exception is java.sql..
offbyone.tistory.com
https://lhc9138.tistory.com/63
mysql 8.0과 JDBC 연결
JDBC Driver 다운로드 mySQL 버전 8.0 이상에서 사용 할 수 있는 JDBC Driver를 다운로드 해야한다. 다운로드 사이트 https://dev.mysql.com/downloads/connector/j/ 여기서 각자 플랫폼에 맞는 JDBC 다운로드 * j..
lhc9138.tistory.com
package util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import com.mysql.jdbc.PreparedStatement;
public class DatabaseUtil {
public static Connection getConnection() {
try {
// 추가
String dbURL ="jdbc:mysql://localhost:3306/tutorial?serverTimezone=UTC";
String dbID = "root";
String dbPassword = "1234";
Class.forName("com.mysql.jdbc.Driver");
return DriverManager.getConnection(dbURL,dbID,dbPassword);
}catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
bootstrap-3.3.2-dist.zip
0.25MB
https://unpkg.com/popper.js@1.12.9/dist/umd/popper.min.js
[jQuery] 다운로드 및 적용 방법
1. 다운로드 첫번째. 다운로드 하는 방법. 1_ 홈페이지에 접속합니다. 2_ Download jQuery를 클릭합니다. 3_ 다운로드(Download the comporessed....)를 클릭합니다. 4_ 만약 아래와 그림과 같이 문서가 출력이..
hane-1.tistory.com
https://fonts.google.com/earlyaccess
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
@import url(//fonts.googleapis.com/earlyaccess/jejugothic.css);
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>
<!-- 버튼을 눌렀을 때 보여주는 내부요소 부분 /위에 버튼 태그를 눌렀을 때 id가 =navbar 인 곳이 나온다. -->
<div class="collapse navbar-collapse" id="navbar">
<!-- 리스트 내용 부분. -->
<ul class="navbar-nav mr-auto">
<!-- 현재 페이제 index.jsp를 나타낸다. -->
<li class="nav-item active">
<!-- a태그로 이동할 페이지를 넣어준다. -->
<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>
<!-- 본문 부분 -->
<!-- 알아서 작아지는 것에 도움을 준다. -->
<!-- 검색창을 만들어 준다. -->
<section class = "container">
<!-- mt-3 : 마진을 3을 준다. -->
<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>
</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 mx-1 mt-2" data-toggle = "modal" href = "#reportModal">신고</a>
</form>
<!-- 실제로 사용자가 강의 평가를 할 때 어떻게 보여줘야할지를 나타낸다. -->
<div class = "card bg-light mt-3"> <!-- 윗 쪽에 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>(2019년 가을 학기)</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>
</section>
<!-- 모달 다이어그램 -->
<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">
<!-- 한개의 열은 총 12만큼 해당된다. -->
<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">2018</option>
<option value = "2019">2019</option>
<option value = "2020" selected>2020</option>
<option value = "2021">2021</option>
<option value = "2022">2022</option>
</select>
</div>
<div class = "form-group col-sm-4">
<label>수강 학기 </label>
<select name = "semesterDivide" class="form-control">
<option value = "1학기" selected>1학기</option>
<option value = "여름학기" >여름학기</option>
<option value = "2학기" >2학기</option>
<option value = "겨울학기" >겨울학기</option>
</select>
</div>
<div class = "form-group col-sm-4">
<label>강의 구분</label>
<select name = "lectureDivide" class="form-control">
<option value = "전공" selected>전공</option>
<option value = "교양" >교양</option>
<option value = "기타" >기타</option>
</select>
</div>
</div>
<!-- 강의 평가 부분 -->
<div class = "form-group">
<label>제목</label>
<input type ="text" name = "evaluationTime" class="form-control" maxlength="40">
</div>
<div class = "form-group">
<label>내용</label>
<textarea name ="evaluationContent" class="form-control" maxlength="2048" style = "height: 180px;"></textarea>
</div>
<!-- 하나의 행을 여러가지로 만든다. -->
<div class ="form-row">
<div class="orm-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="orm-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="orm-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="orm-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>
<!-- 모달 다이어그램 2번째 -->
<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 action = "./reportAction.jsp" method="post">
<!-- 강의 평가 부분 -->
<div class = "form-group">
<label>신고 제목</label>
<input type ="text" name = "reportTitle" class="form-control" maxlength="40">
</div>
<div class = "form-group">
<label>신고 내용</label>
<textarea 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 © 2020 오현지 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>
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';
}
결과물
':: IT > 포토폴리오' 카테고리의 다른 글
| [JSP] 부트스트랩을 이용한 수강신청 게시판 만들기(DB테이블 구축, 회원데이터 모델링) (0) | 2020.06.13 |
|---|---|
| [JSP] 부트스트랩을 이용한 수강신청 게시판 만들기(로그인, 회원가입 폼 만들기) (0) | 2020.06.13 |
| [JSP] 부트스트랩을 이용한 JSP게시판 만들기(게시판) (0) | 2020.06.06 |
| [JSP] 부트스트랩을 이용한 JSP게시판 만들기(회원가입) (0) | 2020.06.06 |
| [JSP] 부트스트랩을 이용한 JSP게시판 만들기(로그인) (0) | 2020.06.06 |