justBoard5 화면(view)2

organize/프로젝트

justBoard5 화면(view)2

001cloudid 2024. 9. 24. 14:49

728x90

화면 구성을 대략적으로 만들어 봤음

화면 구성을 하다보니 중복되는 부분이 있다는 것을 알 수 있음 → innclude 액션 태그 사용해서 수정에 용이하게 변경

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%-- 반응형 웹 viewport → head태그 사이에 작성 --%>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}

.header{
	float : right;
	width: 1200px;
	height: 0px;
}

.sidebar{
	float : left;
	width: 200px;
	height: 500px;

}

.content{
	width: 1000px;
	height: 600px;
}

.footer{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<div class="header"> <%-- header 영역 div --%>
<form method="post" action="${pageContext.request.contextPath}/loginPro">  <%-- post방식 --%>
<span style="float: right;">
아이디 : <input type="text" name="id">
비밀번호 : <input type="password" name="pw">
<button type="submit">로그인 </button><a href="${pageContext.request.contextPath}/member/join"><button type="button">회원가입</button></a>
</span>
</form>
</div><%-- header 영역 div --%><br>
<hr>

<div class="sidebar"> <%-- sidebar 영역 div --%>
<ul>
<li><a href="#">게시판</a></li> 
<li><a href="#">내 정보</a></li>
</ul>
</div> <%-- sidebar 영역 div --%>

<div class="content"> <%-- content영역 div --%>
 내용은 여기에
</div> <%-- content영역 div --%>
<hr>
<div class="footer"> <%-- footer 영역 div --%>
<span style="float: right;">시작 날짜 : 2024.09.19 / 끝낸 날짜 : 2024.?.? / 만든이 : 001cloudid</span>
</div> <%-- footer 영역 div --%>
</div> <%-- container 영역 div --%>
</body>
</html>

주석을 작성해놔서 어렵지 않아보임. top sidebar, footer로 각각 정리

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%-- 반응형 웹 viewport → head태그 사이에 작성 --%>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}

.header{
	float : right;
	width: 1200px;
	height: 0px;
}

.sidebar{
	float : left;
	width: 200px;
	height: 500px;

}

.content{
	width: 1000px;
	height: 600px;
}

.footer{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="inc/top.jsp" />

<jsp:include page="inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
 내용은 여기에
</div> <%-- content영역 div --%>
<jsp:include page="inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

inc/top

<%@ 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>
</head>
<style>
.header{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<div class="header"> <%-- header 영역 div --%>
<form method="post" action="${pageContext.request.contextPath}/loginPro">  <%-- post방식 --%>
<span style="float: right;">
아이디 : <input type="text" name="id">
비밀번호 : <input type="password" name="pw">
<button type="submit">로그인 </button><a href="${pageContext.request.contextPath}/member/join"><button type="button">회원가입</button></a>
</span>
</form>
</div><%-- header 영역 div --%><br>
<hr>
</body>
</html>

inc/sidebar

<%@ 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>
</head>
<style>
.sidebar{
	float : left;
	width: 200px;
	height: 500px;
}
</style>
<body>
<div class="sidebar"> <%-- sidebar 영역 div --%>
<ul>
<li><a href="#">게시판</a></li> 
<li><a href="#">내 정보</a></li>
</ul>
</div> <%-- sidebar 영역 div --%>
</body>
</html>

inc/footer

<%@ 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>
</head>
<style>
.footer{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<hr>
<div class="footer"> <%-- footer 영역 div --%>
<span style="float: right;">시작 날짜 : 2024.09.19 / 끝낸 날짜 : 2024.?.? / 만든이 : 001cloudid</span>
</div> <%-- footer 영역 div --%>

</body>
</html>

main.jsp에서 바로 게시판 게시물 목록을 볼 수 있으면 편하겠다는 생각이 듦.

화면 구성을 이와 같이 할 것이며, 설명 board폴더는 게시판과 관련된 작업 insert 글 쓰기, update 글 수정. member폴더는 회원과 관련된 작업 join 회원가입, mypage 회원 수정(또는 삭제),check 회원 확인

member폴더

join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
.formstyle{
	width : 400px;
	
}
.label{
	width : 200px;
}
.validation{
	widows: 200px;
	height: 30px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>회원가입</h1>
<form action="${pageContext.request.contextPath}/member/joinPro" method="post">
<div class="formstyle">
<input type="text" name="id" required="required" placeholder="아이디"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"> <%-- 한글, 영문만 입력 가능 --%>
</div>
<div class="validation"><b></b></div> <%-- 유효성 검사 시 유효성에 일치않을 때 --%>
<input type="submit" value="회원가입"> 
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>

</body>
</html>

check.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>정보 확인</h1>
<form method="post" action="#">
비밀번호를 입력해주세요.<br>
<input type="password" name="pw"> <input type="submit" value="확인">
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

mypage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>내 정보</h1>
<input type="text" name="id" readonly="readonly"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"> <%-- 한글, 영문만 입력 가능 --%>
<button>수정</button><button>탈퇴</button>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

include 액션 태그를 사용한 것을 보면 어느 것은 /로 시작하고 또 어떤 것은 ../로 시작하는 것을 알 수 있다. 여기서 경로에 대한 정리를 한 번 하고 지나가자.

경로는 상대 경로와 절대 경로가 있다.

상대 경로는 지금 파일의 위치에서 상대적으로 가르키는 위치이고, 절대 경로는 지금 파일의 위치와 상관없이 프로젝트에서 가리키는 위치이다.

내가 main에서 inc에 있는 jsp를 include하기 위해서

상대경로의 경우 현재 내가 있는 폴더(views)보다 아래의 폴더인 inc안에 있는 파일을 쓰는 것이다.

절대경로의 경우 src-main-views-inc-top.jsp(sidebar.jsp, top.jsp)이다.

내가 정리를 하면서 당장은 이해가 쉽게 가지만 다시 볼 때 이해하기 어려울 것 같다는 생각이 들어서 검색을 해보았다.

https://sschoi1994.tistory.com/272 이 곳을 참조하였다.

절대경로 : 프로젝트의 전체 경로
상대경로 : 현재 위치에서 다른 파일의 경로를 참조 ../로 한 단계 위 폴더로 올라감을 뜻함

board 폴더

insert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>게시 글 작성</h1>
<form>
제목 : <input type="text" name="subject"><br>
내용 : <textarea rows="10" cols="100" ></textarea><br>
<input type="submit" value="작성하기">
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

update.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>게시 글 수정</h1>
<form>
제목 : <input type="text" name="subject"><br>
내용 : <textarea rows="10" cols="100" ></textarea><br>
<input type="submit" value="수정하기">
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

화면 구성은 전반적으로 끝났다. 주소매핑과 클래스 작업을 이용해서 마무리 지어보자. 추가적으로 화면 구성 수정까지

목표는 이번주 내에 완성하기

728x90

'organize > 프로젝트' 카테고리의 다른 글

justBoard7 member 마무리, board 준비 (1)	2024.09.26
justBoard6 member (2)	2024.09.25
justBoard4 화면(view)1 (0)	2024.09.23
justBoard3 xml설정, 프로그램 설치 (0)	2024.09.21
justBoard2 DB구축 (0)	2024.09.20

현재글justBoard5 화면(view)2

001cloudid