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">
<%
//if(userID == null) {
%>
<a class="dropdown-item" href="login.jsp">로그인</a>
<a class="dropdown-item" href="Join.jsp">회원가입</a>
<%
//}else{
%>
<a class="dropdown-item" href="Logout.jsp">로그아웃</a>
<%// } %>
</div>
</li>
</ul>
<form>
<button class="btn btn-outline-success mx-1" 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="영어" <%//if(lectureDivide.equals("전공")) out.println("selected");%>>영어</option>
<option value="중국어" <%//if(lectureDivide.equals("교양")) out.println("selected");%>>중국어</option>
<option value="일본어" <%//if(lectureDivide.equals("기타")) out.println("selected");%>>일본어</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>
<button class="btn btn-outline-success mx-1 mt-2" type="submit">엑셀 자료 추가</button>
</form>
<br>
<div class ="table-responsive">
<table class = "table table table-hover table-bordered table-striped">
<thead>
<tr>
<td>번호</td>
<td>구분</td>
<td>단어</td>
<td>뜻</td>
<td>비고</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>영어</td>
<td>table</td>
<td>테이블</td>
<td>
<a type="submit" href="./ModifiAction.jsp?ID=%>">수정</a>
<a onclick="return confirm('삭제하시겠습니까?')" href="./deleteAction.jsp?ID=%>">삭제</a>
</td>
</tr>
</tbody>
</table>
</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 = "./RegisterAction.jsp" method="post">
<!-- 하나의 행을 여러가지로 나눌 때 사용한다. -->
<div class = "form-row">
<div class = "form-group col-sm-4">
<label>구분</label>
<select name = "WordDivide" 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 = "Word" class="form-control" maxlength="40">
</div>
<div class = "form-group">
<label>단어 뜻</label>
<textarea name ="mean" 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-primary">등록하기</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>
결과물
login.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">
<%
//if(userID == null) {
%>
<a class="dropdown-item" href="login.jsp">로그인</a>
<a class="dropdown-item" href="Join.jsp">회원가입</a>
<%
//}else{
%>
<a class="dropdown-item" href="Logout.jsp">로그아웃</a>
<%// } %>
</div>
</li>
</ul>
<form>
<button class="btn btn-outline-success mx-1" type="submit">단어 시험</button>
</form>
</div>
</nav>
<br>
<!-- 로그인 양식 부 -->
<section class = "container mt-3" style = " max-width: 560px;">
<div class="jumbotron" style="padding-top:50px;">
<form method="post" action="./LoginAction.jsp">
<h3 style="text-align: center;">로그인 화면</h3>
<div class="form-group">
<label>아이디</label>
<input type="text" name="ID" class="form-control">
</div>
<div class="form-group">
<label>비밀번호</label>
<input type="password" name="Password" class="form-control">
</div>
<div class="form-row text-center">
<div class="col-12">
<button type="submit" class="btn btn-primary">로그인</button>
</div>
</div>
</form>
</div>
</section>
<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>결과물
Join.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">
<%
//if(userID == null) {
%>
<a class="dropdown-item" href="login.jsp">로그인</a>
<a class="dropdown-item" href="Join.jsp">회원가입</a>
<%
//}else{
%>
<a class="dropdown-item" href="Logout.jsp">로그아웃</a>
<%// } %>
</div>
</li>
</ul>
<form>
<button class="btn btn-outline-success mx-1" type="submit">단어 시험</button>
</form>
</div>
</nav>
<br>
<!-- 로그인 양식 부 -->
<section class = "container mt-3" style = " max-width: 560px;">
<div class="jumbotron" style="padding-top:50px;">
<form method="post" action="./userRegisterAction.jsp">
<h3 style="text-align: center;">회원가입 화면</h3>
<div class="form-group">
<label>아이디</label>
<input type="text" name="ID" class="form-control">
</div>
<div class="form-group">
<label>비밀번호</label>
<input type="password" name="Password" class="form-control">
</div>
<div class="form-group">
<label>이메일</label>
<input type="email" name="Email" class="form-control">
</div>
<div class="form-row text-center">
<div class="col-12">
<button type="submit" class="btn btn-primary">회원가입</button>
</div>
</div>
</form>
</div>
</section>
<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>
':: IT > 포토폴리오' 카테고리의 다른 글
| [php] 관리자 페이지 CRUD + 로그인 + 세션 (CSS + HTML + PHP +mysql) (0) | 2020.11.04 |
|---|---|
| [Vue] 원페이지 게시판 CRUD ( vue + php + mysql + 부트스트랩) (0) | 2020.11.04 |
| [JSP] 부트스트랩을 이용한 수강신청 게시판 만들기(글목록 출력 및 검색구현,삭제, 추천 구현,XSS 방어) (0) | 2020.06.19 |
| [JSP] 부트스트랩을 이용한 수강신청 게시판 만들기(로그인 및 로그아웃 구현하기/평가등록하기/신고하기) (0) | 2020.06.18 |
| [JSP] 부트스트랩을 이용한 수강신청 게시판 만들기(회원가입 및 이메일 인증 구현하기) (0) | 2020.06.17 |