JAVA_EE/MVC+JQuery+Mybatis

[21.10.19] (MQBProject)

luvforjunk 2021. 10. 19. 21:29
728x90
반응형

////////index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: auto;
}

header {
	width: 1700px;
	height: 10%;
	text-align: center;
}

#container {
	margin: auto;
	width: 1700px;
	height: 500px;
}

#container:after {
	content: '';
	display: block;
	clear: both;
	float: none;
}

nav {
	margin-left: 10px;
	width: 25%;
	height: 100%;
	float: left;
}

section {
	width: 70%;
	height: 100%;
	float: left;
}

footer {
	width: 1700px;
	height: 10%;
}
</style>
</head>
<body>
	<header>
		<h1>
			<img alt="이거뭔데" src="img/img2.gif" width="70" height="70">MVC 기반의 미니 프로젝트
		</h1>

		<jsp:include page="main/menu.jsp" />
	</header>

	<div id="container">
		<nav>
			<jsp:include page="main/nav.jsp" />
		</nav>

		<section>
			<h1>
				홈페이지를 방문해주셔서 감사합니다.<br> 
				Have a nice day!!<br> 
				<img alt="까마귀" src="img/img2.gif" width="100" height="100">
			</h1>
		</section>
	</div>

	<footer>
		<p>도롱뇽</p>
	</footer>
</body>
</html>

 

 

 

////////menu.jsp

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

<style>
.mainnav {
	background-color: #96C7ED;
	list-style: none;
}

.mainnav li {
	display: inline-block;
	justify-content: space-between; /* 어느정도의 여백을 주기 위함 */
}

.mainnav li a {
	color: #ffffff;
	padding: 0 13px;
	background-color: #78A9ED;
	font: bold 16px/40px 'Nanum Gothic', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
}

.mainnav li a:hover{
	color: #660000;
	background-color: #ffcc00;
}
</style>

<ul class="mainnav">
	<li><a href="">글쓰기</a>
	<li><a href="">목록</a>
</ul>

 

 

 

////////nav.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>   

<c:if test="${sessionScope.memId == null }">
	<jsp:include page="../member/loginForm.jsp" />
</c:if>
<c:if test="${memId != null}">
	<jsp:include page="../member/loginOk.jsp" />
</c:if>

 

 

 

/////////loginForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
<style type="text/css">
div#idDiv, div#pwdDiv {
	color: red;
	font-size: 8pt;
	font-weight: bold;
}
</style>
</head>
<body>
<form name="loginForm" method="post" action="http://localhost:8080/mvcmember/member/login.do">
	<table border="1" cellspacing="0" cellpadding="5">
		<tr>
			<td width="100" align="center">아이디</td>
			<td>
				<input type="text" name="id" id="id" placeholder="아이디 입력">
				<div id= "idDiv"></div>
			</td>	
		</tr>
		
		<tr>
			<td width="100" align="center">비밀번호</td>
			<td>
				<input type="password" name="pwd" id="pwd" size="30" placeholder="비밀번호 입력">
				<div id= "pwdDiv"></div>
			</td>	
		</tr>
		
		<tr>
			<td colspan="2" align="center">
				<input type="button" id="loginBtn" value="로그인">
				<input type="button" value="회원가입" onclick="location.href='writeForm.html'">
			</td>
		</tr>
	</table>
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/member.js"></script>
</body>
</html>

 

 

[결과]

 

 

728x90
반응형