ㅁ 부트스트랩을 이용해서 웹 사이트 화면을 구현한다
ㅁ 다운로드 폴더에 그냥 04_front-workspace 깃에서 받았음.
- vscode로 04_front-workspace 폴더 열기
- 그리고 거기에 webapp 폴더 만들기
- webapp 폴더 안에 "메인페이지.html" 만듦.
- webapp 폴더 안에 views 폴더 만듦. (세부 페이지들을 여기에 둘 예정)
- webapp 폴더 안에 assets 폴더 만듦.
- assets 폴더 안에 image 폴더 만듦. (image 파일 여기에 둘 예정)
- 화면 구현할 때는 파일명 식별이 가능하게끔 한글로 작성한다.
- 회원 가입 페이지, 마이페이지, 공지사항 페이지, 게시판 페이지 등등 각각의 세부 페이지들은 보통 webapp 폴더 안에 views라는 폴더를 둬서 따로 관리를 한다. 세부 페이지들을 보관할 views라는 폴더를 만든다.
- 그리고 views 폴더에 각각 서비스별로 페이지들을 따로따로 관리하는게 좋다.
- 이미지 파일이나 영상 파일 같은 정적인 요소들을 assets라는 폴더에 둔다. 바깥쪽의 assets 폴더와는 상관없다.
아니면 resources로 해도 된다.
ㅁ CRUD
- 회사에서 필요로하는 조건이 CRUD 할수 있는지다. 이걸 많이 본다.
- 각각의 서비스별로 Insert 기능인지 Select 기능인지 Update 기능인지 식별할 수 있어야 한다.
- 일반 게시글 목록 조회는 페이징 처리도. 다수의 데이터는 한 페이지에 모두 다 표현할 수 없음.
- 댓글 목록조회, 댓글 등록은 AJAX로 적용.
ㅁ webapp 폴더에 member(회원 관련), board(게시판), common(공통적인 요소들), notice(공지사항 관련) 폴더 만듦.
ㅁ
- 메인페이지 컨셉을 매 페이지마다 유지를 시켜야만 한다.
- 항상 상단에는 헤더 영역, 하단에는 푸터 영역이 매 페이지마다 동일하게 들어가야만 한다.
ㅁ 메인페이지에 부트스트랩 넣기
- 메인페이지.html을 아래와 같이 작성한다.
나중에 기능 입히면 인덱스.jsp로 바뀔 예정이다. 지금은 html 화면 구현만 먼저한다..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap 사용을 위한 CDN -->
<!-- ------항상 영역을 표시하는 것이 좋다.------- -->
</head>
<body>
<div class="container p-3"> // p-3으로 안쪽 여백을 줬다.
<!-- Header, Nav start (영역 표시) -->
<style>
header{height: 150px}
header a{color:black;} // 부트스트랩에서 a는 이미 어느정도 스타일 있지만 색깔 또 바꿈.
</style>
<header class="row m-3"> // 헤더에 row를 주고 3개의 col로 쪼갠다. // m-3으로 바깥쪽 간격준다.
<div class="col-3 d-flex justify-content-center align-items-center"> <!-- 부트스트랩 기능. 정가운데 배치.-->
<a href=""><img src="./assets/image/goodee_logo.png"></a> // 첫번째 div에 로고를 링크로 준다.
</div>
<div class="col-6"></div> // 가운데 div는 비워둔다.
<div class="col-3 d-flex justify-content-center align-items-center"> // 세번째 div에 로그인할 수 있는 폼을 구성한다.
<!-- case1. 로그인 전 -->
<form action="" method="">
<table>
<tr>
<th>ID</th>
<td><input type="text" class="form-control form-control-sm" placeholder="Enter Your ID"></td>
</tr>
<tr>
<th>PWD</th>
<td><input type="password" class="form-control form-control-sm" placeholder="Enter Your PWD"></td>
</tr>
<tr>
<td colspan="2" align="center"> // align="center"주면 하위요소 수평으로 가운데 정렬됨.
<button type="submit" class="btn btn-secondary btn-sm">로그인</button>
<button type="button" class="btn btn-secondary btn-sm">회원가입</button>
// 로그인 요청보낼 submit 버튼이 필요하다.
</td>
</tr>
</table>
</form>
<!-- case2. 로그인 후
<div>
<b>홍길동</b>님 환영합니다. <br><br> // 홍길동이라는 가정 하에
<a href="">마이페이지</a>
<a href="">로그아웃</a>
</div>
-->
</div>
</header>
// nav에는 메뉴바를 구성한다. w3school에서 적당한거 하나 가져옴.
<nav class="navbar m-3 navbar-expand-sm bg-dark navbar-dark d-flex justify-content-center align-items-center" >
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">공지사항</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">일반게시판</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">사진게시판</a>
</li>
</ul>
</nav>
<!-- Header, Nav end -->
<!-- Section start -->
<section class="row m-3" style="min-height: 500px">
<div class="container border p-5 m-4 rounded">
<h2 class="m-4">해당 페이지의 내용이 보여져야되는 자리</h2>
</div>
</section>
<!-- Section end -->
<!-- Footer start -->
<style>
footer{
height: 200px;
border-top: 1px solid gray;
}
footer a{color:black;}
.footer-info{
list-style: "- ";
padding-left: 30px; /* ul태그는 기본적으로 패딩을 가지고 있음. 그걸 줄였다. */
}
.footer-copyright{text-align: center;}
</style>
<footer>
<ul class="nav footer-link"> // 이따 선택해야할 수도 있으니 footer-link 클래스를 준다.
<li class="nav-item">
<a class="nav-link" href="#">이용약관</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">개인정보취급방침</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">인재채용</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">고객센터</a>
</li>
</ul>
<ul class="footer-info">
<li>상호명 : GooDee Academy</li>
<li>대표자 : 이승엽</li>
<li>전화 : 02-818-7950</li>
<li>개인정보책임자 : 주승재 / jsj@goodee.co.kr</li>
<li>본관 : (08505) 서울특별시 금천구 가산디지털2로 95</li>
</ul>
<div class="footer-copyright">
Copyright ⓒ GooDee Academy. All rights reserved.
</div>
</footer>
<!-- Footer end -->
</div>
</body>
</html>
- 부트스트랩을 쓰기 위해 head 태그에 4줄을 가져와서 붙였다.
- header 영역, nav 영역, footer 영역은 어느 페이지든 다 존재한다.
- C:\workspaces\04_front-workspace\webapp\assets\image 폴더에 아무 이미지나 하나 다운받아놓기.
구디 아카데미로고 goodee_logo.png로 저장함.
- 지금은 메인페이지에서 모두 다 구현하지만 나중에는 헤더랑 nav같은 경우는 별도의 헤더.jsp로 따로 구성한다.
그리고 include로 포함시켜서 본다.
푸터도 푸터.jsp로 따로 빼고 include 지시어로 포함시켜서 받아 볼거다.
- section에는 데이터가 얼마나 들어갈지 몰라서 자동으로 늘어날 수 있어야 한다. 그래서 최소높이만 잡는다.
- header는 또 가로로 세 영역으로 나눈다.
부트스트랩으로 부모요소에 row 클래스, 자식 요소에 col 클래스를 부여하면 옆으로 배치된다.
header에 row 클래스를 주면 이 아래의 요소들이 가로로 배치된다. col-n으로 가로 길이를 조절한다.
- (헤더) 부트스트랩 기능. 클래스로 d-flex를 주면 이 요소에 display:flex가 입혀짐.
내가 움직이고자 하는 요소가 아이템이 되어야 하고 걔의 상위요소가 컨테이너가 되어야 한다.
그러려면 상위 요소에 display:flex 매겨야 한다.
- (헤더) 부트스트랩 기능. class로 text 상자에 "form-control"을 주면 예뻐진다. 로그인과 회원가입 버튼도 class 줬다.
- (헤더 - 세번째 div) 이 html 문서가 나중에 jsp 파일로 바뀔거기 때문에 동적으로 요소를 만들어낼 수 있다.
나중에 if-else문으로 로그인 전인지 로그인 후인지 판단해서 둘 중 하나만 보여지게끔 할 예정이다.
- (섹션) 이 div 안에서도 그리드로 레이아웃을 잡고 싶으면 div에 클래스로 컨테이너를 주면 된다.
- (nav) 메뉴바를 가운데에 두기 위해 d-flex~를 추가로 작성했음.
그리고 header랑 좀 띄우기 위해서 nav에 m-3으로 마진을 줘서 간격을 띄웠다.
- (footer) W3Schools에서 Navbar 말고 Navs의 Nav Menus꺼 가져옴.
로그인 후
ㅁ 다음으로 회원 가입 페이지 화면 구현
- "메인페이지.html"을 복사해서 "member" 폴더에 붙여넣기. 이름은 "회원가입페이지.html"로 바꿈.
- "회원가입페이지.html"의 section 부분만 바꾼다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap 사용을 위한 CDN -->
<!-- ------항상 영역을 표시하는 것이 좋다.------- -->
</head>
<body>
<div class="container p-3">
<!-- Header, Nav start (영역 표시) -->
<!-- header.jsp를 include로 표현할 예정 -->
<!-- Header, Nav end -->
<!-- Section start -->
<section class="row m-3" style="min-height: 500px">
<div class="container border p-5 m-4 rounded">
<h2 class="m-4">회원가입</h2> // 이거를 '회원가입'으로 바꾸고 아래에 form을 뒀다.
<form action="" method="" class="m-4"> // 살짝 간격 띄웠음.
<table class="table"> // 부트스트랩에서 클래스로 table 주면 한줄씩 줄이 그어지며 만들어진다.
<tr>
<th>* 아이디</th>
<td><input type="text" class="form-control" placeholder="Enter Your ID" required></td>
<td><button type="button" class="btn btn-secondary btn-sm">중복확인</button></td>
</tr>
<tr>
<th>* 비밀번호</th>
<td><input type="password" class="form-control" placeholder="Enter Your Password" required></td>
<td></td> // 비밀번호는 뭐 없어서 그냥 둔다. 옆에 셀은.
</tr>
<tr>
<th>* 비밀번호 확인</th>
<td><input type="password" class="form-control" placeholder="Enter Your Password Check" required></td>
<td></td>
</tr>
<tr>
<th>* 이름</th>
<td><input type="text" class="form-control" placeholder="Enter Your Name" required></td>
<td></td>
</tr>
<tr>
<th> 전화번호</th>
<td><input type="text" class="form-control" placeholder="Enter Your Phone (- include)"></td>
<td></td>
</tr>
<tr>
<th> 이메일</th>
<td><input type="text" class="form-control" placeholder="Enter Your Email (@ include)"></td></td>
<td></td>
</tr>
<tr>
<th> 주소</th>
<td><input type="text" class="form-control" placeholder="Enter Your Address"></td></td>
<td></td>
</tr>
<tr>
<th> 관심분야</th>
<td>
<input type="checkbox" name="interest" values="운동" id="sports">
<label for="sports">운동</label>
<input type="checkbox" name="interest" values="등산" id="climbing">
<label for="climbing">등산</label>
<input type="checkbox" name="interest" values="낚시" id="fishing">
<label for="fishing">낚시</label>
<input type="checkbox" name="interest" values="요리" id="cooking">
<label for="cooking">요리</label>
<input type="checkbox" name="interest" values="게임" id="game">
<label for="game">게임</label>
<input type="checkbox" name="interest" values="영화" id="movie">
<label for="movie">영화</label>
</td>
<td></td>
</tr>
</table>
<div align="center"> // 두 버튼을 가운데 정렬시키기.
<button type="submit" class="btn btn-primary btn-sm">회원가입</button>
<button type="reset" class="btn btn-danger btn-sm">초기화</button>
</div>
</form>
</div>
</section>
<!-- Section end -->
<!-- Footer start -->
<!-- footer.jsp로 include할 예정 -->
<!-- Footer end -->
</div>
</body>
</html>
- 나중에 코드 길어지면 찾기 어려우니까 ctrl f로 검색.
- 현재 form의 input 요소들에 name 속성이 정의되지 않았기 때문에, 폼을 제출해도 해당 필드의 값들이 서버로 전송되지 않습니다.
- 메인 페이지를 이렇게 각 페이지로 복사해간 다음에, section 부분만 매 페이지마다 수정하면 된다.
- 회원 가입 페이지가 어떻게 구성되냐에 따라서 db의 테이블 정보도 달라진다.
화면설계가 잘 되어야 db 설계도 잘 된다.
- (아이디) 텍스트 상자 기본은 안 이뻐서 class="form-control"주면 이쁘기도 하고 부모요소 가득 차게끔 늘어난다.
- header,nav와 footer 부분을 다 뺐다. 나중에 기능 입히게 되면 헤더랑 푸터 다 표현돼서 같이 보여질 예정이다.
- 이런 식으로 미리 화면 구현을 해두면 나중에 여러분들이 이걸 jsp로 변환을 시킨 다음에
회원가입 버튼을 클릭하는 순간 서블릿 요청해서 이 데이터들을 insert하는 기능을 입히면 된다.
==============================================================================
ㅁ 웹사이트 제작을 위해 화면구현을 제작하고 있었다.
- 미리 html로 화면 구현만 다 되어 있으면 기능 구현하는데 훨씬 더 속도가 빠르다.
- 화면 구현이 오래 걸리니 화면 설계 끝나는 대로 화면 구현 들어가라.
- 화면 설계 보고서는 예쁘게 디자인 할 필요 없고 기능과 배치 위주로. 구현할 때 예쁘게 하면 된다.
- 어제 메인페이지, 회원 가입페이지까지 구현했다.
이것 말고도 공지사항 관련한 페이지, 게시글 관련한 페이지를 더 만들어야 한다.
다 만들 수는 없고 몇개만 만들어보고 나머지는 배포한다.
ㅁ 마이페이지 화면 구현
- member의 "로그인 페이지.html"을 복사 붙여넣기 해서 똑같이 member 폴더에 이름만 "마이페이지.html"로 수정했다.
- 마이페이지는 기존에 로그인한 회원 정보가 미리 기재되어있다. 양식 거의 비슷함.
- 마이페이지도 섹션만 다르게하면 된다.
- 아래는 마이페이지.html이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap 사용을 위한 CDN -->
<!-- ------항상 영역을 표시하는 것이 좋다.------- -->
</head>
<body>
<div class="container p-3">
<!-- Header, Nav start (영역 표시) -->
<!-- header.jsp를 include로 표현할 예정 -->
<!-- Header, Nav end -->
<!-- Section start -->
<section class="row m-3" style="min-height: 500px">
<div class="container border p-5 m-4 rounded">
<h2 class="m-4">마이페이지</h2>
<form action="" method="" class="m-4">
<table class="table">
<tr>
<th>* 아이디</th> // 밸류줘서 미리 값이 보여지게끔, readonly 줬다.
<td><input type="text" class="form-control" readonly value="user01" placeholder="Enter Your ID" ></td>
</tr>
<tr>
<th>* 이름</th>
<td><input type="text" class="form-control" value="홍길동" placeholder="Enter Your Name" required></td>
<td></td>
</tr>
<tr>
<th> 전화번호</th> // 필수입력은 아니지만 값이 있다는 가정 하에 작성함.
<td><input type="text" class="form-control" value="010-1111-2222" placeholder="Enter Your Phone (- include)"></td>
<td></td>
</tr>
<tr>
<th> 이메일</th>
<td><input type="text" class="form-control" value="user01@br.com" placeholder="Enter Your Email (@ include)"></td></td>
<td></td>
</tr>
<tr>
<th> 주소</th>
<td><input type="text" class="form-control" value="서울시 강서구 마곡동" placeholder="Enter Your Address"></td></td>
<td></td>
</tr>
<tr>
<th> 관심분야</th>
<td>
<input type="checkbox" name="interest" values="운동" id="sports" checked> // 유저가 선택한 거
<label for="sports">운동</label>
<input type="checkbox" name="interest" values="등산" id="climbing">
<label for="climbing">등산</label>
<input type="checkbox" name="interest" values="낚시" id="fishing">
<label for="fishing">낚시</label>
<input type="checkbox" name="interest" values="요리" id="cooking">
<label for="cooking">요리</label>
<input type="checkbox" name="interest" values="게임" id="game">
<label for="game">게임</label>
<input type="checkbox" name="interest" values="영화" id="movie">
<label for="movie">영화</label>
</td>
<td></td>
</tr>
</table>
<div align="center"> // outline 추가하면 테두리만 있는 버튼(부트스트랩 기능)
<button type="submit" class="btn btn-outline-primary btn-sm">정보변경</button>
<button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#changePwdModal">비밀번호변경</button>
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#resignModal">회원탈퇴</button>
</div>
</form>
</div>
</section>
<!-- Section end -->
<!-- Footer start -->
<!-- footer.jsp로 include할 예정 -->
<!-- Footer end -->
</div>
<!-- 비밀번호 변경용 Modal -->
<!-- The Modal -->
<div class="modal" id="changePwdModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">비밀번호 변경</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" method="">
<table align="center">
<tr>
<th>* 현재 비밀번호</th> // 맞는지 검사
<td><input type="password" class="form-control" required></td>
</tr>
<tr>
<th>*변경할 비밀번호</th>
<td><input type="password" class="form-control" required></td>
</tr>
<tr>
<th>*변경할 비밀번호 재입력</th>
<td><input type="password" class="form-control" required></td>
</tr>
<tr>
<td colspan="2" style="text-align: center; padding-top: 10px;">
<button type="submit" class="btn btn-warning btn-sm">비밀번호 변경</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
<!-- 회원탈퇴용 Modal -->
<!-- The Modal -->
<div class="modal" id="resignModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">회원탈퇴</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" method="">
<table align="center">
<tr>
<th colspan="2">
탈퇴 후 복구가 불가능합니다. <br>
정말로 탈퇴하시겠습니까?
</th>
</tr>
<tr>
<th>현재 비밀번호</th>
<td><input type="password" class="form-control" required></td>
</tr>
<tr>
<td colspan="2" style="text-align: center; padding-top: 10px;">
<button type="submit" class="btn btn-danger btn-sm">회원탈퇴</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
- 회원가입 페이지를 기반으로 마이페이지를 작성했다. 비슷한 양식이기 때문이다.
화면구현할 때 비슷한 양식의 페이지가 이미 구현되어 있으면 copy해서 일부 내용만 수정해서 쓰면 훨씬 빠르게 작업할 수 있다.
- 현재의 HTML 코드에서도 input 태그에 name 속성이 없어서, 폼을 제출해도 해당 필드의 값이 서버로 전송되지 않습니다.
- input 요소의 value 속성을 이용하면 미리 값을 기재해둘 수 있다.
- (아이디) 지금은 아이디가 user01이라고 가정. 나중에 기능구현하면서 실제 조회된 데이터를 출력시키면 된다.
- (아이디) 아이디는 바뀌어지면 안됨. required 속성 필요없으니 지우고 readonly로 입력 불가능하게 막았다.
이름은 변경가능. requred 대신 disabled써도 되나? 안 됨. disabled 쓰면 form으로 입력값이 안넘어간다.
- (아이디) 중복확인 버튼은 없앴다.
- (비밀번호) 비밀번호 변경은 이 창에서 하지 않고 따로 modal로 팝업으로 띄운다.
모달 : 원래 있는 div 요소인데 숨겨져있다가 보여짐.
- (전화번호) 이름, 아이디 같은 필수 입력사항 외에 전화번호 등은 선택사항이라서 값이 없을 수도 있는데 일단 있다고 가정하고 value 값을 작성해본다.
- (관심분야) 유저가 선택한 체크박스 값이 체크된 채로 보여지게 checked 줬다.
실제 db에서 유저가 선택한 체크박스 값을 checked로 주려면, checked 부분만 <%= 조건문 %> 하면 된다.
- (버튼) '회원가입' 버튼을 '정보변경'으로, '초기화' 버튼을 '회원탈퇴' 버튼으로 만들고, '비밀번호 변경' 버튼을 두었다.
form 안에 있는 button은 기본값이 type이 submit이 되므로, '비밀번호변경'과 '회원탈퇴' 버튼은 type="button"을 줘서 일반 버튼으로 만들었다.
- (비밀번호 변경) '비밀번호 변경' 버튼을 두고 w3school의 부트스트랩으로 원하는 modal을 선택해서 data-toggle 속성과 data-target 속성을 작성했고, 테이블 밖에 따로 뒀다.
- 모달 원리는 모달을 구동시키는 버튼에 있어서 data-toggle="modal"을 주고, data-target에 값으로 어떤 아이디를 가진 모달 div를 띄울 건지 그 div의 id를 작성한다.
- 모달은 따로 모아서 작성을 해두시는 것이 좋다. 기존의 묶여있는 div 바깥쪽에 모달을 작성했다. footer 보다도 뒤에.
- 모달 내에서도 modal header, modal body, modal footer 이렇게 영역을 나누고 있는데 필요 없으면 이 영역 자체를 지워도 된다.
위에 X버튼이 있으니까 하단의 close 버튼은 지운다. modal footer 영역을 통째로 지웠다.
- 모달을 끄기 위한 버튼을 주고 싶으면 data-dismiss="modal"을 주면 된다.
- (비밀번호 변경) modal body에 사용자가 입력한 값을 넘기면서 요청을 보낼 수 있게 form을 줬다.
- (비밀번호 변경) 버튼을 감싸고 있는 td에 인라인 스타일로 text-align:center를 줬더니 버튼 자체가 셀 내에서 가운데 정렬됐다.
- 이렇게 마이페이지 화면 구현이 끝나고 나중에 기능구현 한다.
ㅁ 공지사항 페이지
- 공지사항 페이지만 몇개 더 해보고 일반게시판, 사진게시판 등은 그냥 배포.
- "마이페이지.html"을 복사붙여넣기 해서 notice 폴더에 "공지사항목록페이지.html" 파일을 만든다.
맨 아래 modal 부분, section의 form 요소를 지운다.
- 아래처럼 "공지사항목록페이지.html"를 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap 사용을 위한 CDN -->
<!-- ------------------------- -->
</head>
<body>
<div class="container p-3">
<!-- Header, Nav start -->
<!-- header.jsp include로 표현할 예정 -->
<!-- Header, Nav end -->
<!-- Section start -->
<section class="row m-3" style="min-height: 500px">
<div class="container border p-5 m-4 rounded">
<h2 class="m-4">공지사항 목록</h2>
<!-- 현재 로그인한 회원이 관리자 권한일 경우 보여지는 요소 -->
<div align="right">
<button type="button" class="btn btn-secondary btn-sm">등록하기</button>
</div>
<br>
<table id="notice-list" class="table"> // thead와 tbody로 나눴다.
<thead>
<tr>
<th width="100px">번호</th>
<th width="600px">글제목</th>
<th width="120px">작성자</th>
<th>작성일</th>
</tr>
</thead>
<tbody> // tbody에 글들이 들어간다.
<!-- case1. 조회된 공지글이 없을 경우 (4개의 셀을 다 묶었음)
<tr>
<td colspan="4" style="text-align:center">존재하는 공지사항글이 없습니다.</td>
</tr>
-->
<!-- case2. 조회된 공지글이 있을 경우 -->
<tr class="board-title" data-toggle="collapse" data-target="#notice3"> // 제목행. 누르면 내용행 나오게.
<td>3</td>
<td>글제목입니다.</td>
<td>admin</td>
<td>2024-08-21</td>
</tr>
<tr class="board-content collapse" id="notice3"> // 내용행. 처음엔 안 보인다.
<td colspan="4">
<p class="border rounded p-3 w-75 mx-auto" style="min-height: 150px;">3번 게시글의 내용입니다.</p>
<!-- 로그인한 회원이 관리자 권한일 경우 보여지는 요소 -->
<div align="center">
<button type="button" class="btn btn-secondary btn-sm">수정하기</button>
<button type="button" class="btn btn-danger btn-sm">삭제하기</button>
</div>
</td>
</tr>
<tr class="board-title" data-toggle="collapse" data-target="#notice2">
<td>2</td>
<td>글제목입니다.</td>
<td>admin</td>
<td>2024-08-21</td>
</tr>
<tr class="board-content collapse" id="notice2">
<td colspan="4">
<p class="border rounded p-3 w-75 mx-auto" style="min-height: 150px;">2번 게시글의 내용입니다.</p>
</td>
</tr>
<tr class="board-title" data-toggle="collapse" data-target="#notice1">
<td>1</td>
<td>글제목입니다.</td>
<td>admin</td>
<td>2024-08-21</td>
</tr>
<tr class="board-content collapse" id="notice1">
<td colspan="4">
<p class="border rounded p-3 w-75 mx-auto" style="min-height: 150px;">1번 게시글의 내용입니다.</p>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Section end -->
<!-- Footer start -->
<!-- footer.jsp include 할 예정 -->
<!-- Footer end -->
</div>
</body>
</html>
- 부트스트랩의 테이블 스타일이 들어가게끔 클래스로 table을 부여했다.
- 테이블은 공지사항 전체 목록이 보이는 테이블이다. 나중에 선택하기 쉽게 id를 부여해줘도 된다.
- 이 공지사항 목록 페이지에서 내용도 보여줄 예정이다. 다른 창에서 열리게끔 하는 것이 아니라.
제목행이 있고 제목행을 클릭하면 그 다음 행으로 내용이 나오게끔 구성한다.
제목행에 board-title, 내용행에 board-content라는 임의의 클래스를 줬다.
- 내용행이 어떤건 길 수도 있고 짧을 수도 있는데 똑같게 min-height 주기.
내용행에 테두리 주기 위해 p 태그에 클래스 border 주기.
p태그에 w-75주면 부모 요소의 75%가 됨.
가운데 배치 위해 margin:auto 줬었는데 mx-auto 주기.
- 내용행이 처음엔 안보이다가 제목행 누르면 보이게끔 하려면 BootStrap의 Collapse가 있다.
숨겨져있다가 무언가를 클릭하면 보이는 효과다. 다시 클릭하면 사라진다.
- 원리만 파악하면 테이블에도 적용시킬 수 있다. (내용행에 적용했다)
보여지고자 하는 요소에 class로 collapse를 준다.
- collapse를 주면 처음에 안보이는 요소가 된다.
- 그런데 이 페이지를 보는 경우가 두 가지다. 일반 사용자와 관리자.
관리자의 경우 이 공지사항 게시글을 수정, 삭제할 수 있어야 한다. 그냥 첫번째 게시글에만 만들어본다.
- 버튼은 항상 타입을 명시한다. 어디 form에 묶여있지 않아도.
그리고 버튼의 상위요소 div에 align="center" 줘서 버튼 수평 가운데정렬하기.
- 지금은 다 보이지만 나중에는 조건처리를 해서 로그인한 회원이 관리자인 경우에만 보여지게끔 작업을 해야한다.
화면 구현할 때는 모든 경우의 수들을 일단 다 구현해 놓고, 나중에 조건만 배우면 된다.
- 관리자일 경우 공지사항을 작성할 수 있는 버튼도 필요하다. 테이블 상단 오른쪽 쯤에 배치한다.
- 이렇게 공지사항 목록페이지 화면구현이 끝났다. 나중에 기능 입힐 때 db로부터 조회된 데이터를 여기에 뿌려주게끔 바꿔주시면 된다.
- 공지글은 보통 반복문 돌려가면서 공지사항 글 하나당 두개의 tr요소(제목행, 내용행) 만들어서 하면 된다.
ㅁ 공지사항 작성 페이지
- 공지사항 목록 페이지에서 공지사항 '등록하기' 버튼을 클릭하는 순간 이동될 작성 페이지도 만들어야 한다.
- member 폴더의 "회원가입페이지.html"을 복사 붙여넣기해서 notice 폴더에 "공지사항작성페이지.html"이라는 이름으로 바꾼다.
- 아래와 같이 "공지사항작성페이지.html"를 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap 사용을 위한 CDN -->
<!-- ------------------------- -->
</head>
<body>
<div class="container p-3">
<!-- Header, Nav start -->
<!-- header.jsp include로 표현할 예정 -->
<!-- Header, Nav end -->
<!-- Section start -->
<section class="row m-3" style="min-height: 500px">
<div class="container border p-5 m-4 rounded">
<h2 class="m-4">공지사항 등록</h2>
<form action="" method="" class="m-4">
<table class="table">
<tr>
<th>제목</th>
<td><input type="text" class="form-control" required></td>
</tr>
<tr>
<th>내용</th>
<td><textarea rows="10" class="form-control" style="resize:none" required></textarea></td>
</tr>
</table>
<br>
<div align="center">
<button type="submit" class="btn btn-primary btn-sm">등록하기</button>
<button type="reset" class="btn btn-danger btn-sm">초기화</button>
</div>
</form>
</div>
</section>
<!-- Section end -->
<!-- Footer start -->
<!-- footer.jsp include 할 예정 -->
<!-- Footer end -->
</div>
</body>
</html>
- 공지사항 등록은 간단하게 제목이랑 내용만 입력받아서 insert하는 연습을 할 예정이다.
- input에 name 속성 없으므로 key값이 없어서 form으로 요청해도 입력값이 전달되지 않는다.
ㅁ 공지사항 수정페이지
- 공지사항 목록페이지의 우상단 '등록하기' 버튼 뿐만 아니라,
게시글 내용 행의 '수정하기' 버튼을 눌렀을 때의 페이지도 필요하다.
- notice 폴더의 "공지사항작성페이지.html"를 복사 붙여넣기해서 notice 폴더에 "공지사항수정페이지.html"를 만든다.
- 아래와 같이 "공지사항수정페이지.html"를 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap 사용을 위한 CDN -->
<!-- ------------------------- -->
</head>
<body>
<div class="container p-3">
<!-- Header, Nav start -->
<!-- header.jsp include로 표현할 예정 -->
<!-- Header, Nav end -->
<!-- Section start -->
<section class="row m-3" style="min-height: 500px">
<div class="container border p-5 m-4 rounded">
<h2 class="m-4">공지사항 수정</h2>
<form action="" method="" class="m-4">
<table class="table">
<tr>
<th>제목</th>
<td><input type="text" class="form-control" required value="기존의 공지사항 제목"></td>
</tr>
<tr>
<th>내용</th>
<td><textarea rows="10" class="form-control" style="resize:none" required>기존의 공지사항 내용</textarea></td>
</tr>
</table>
<br>
<div align="center">
<button type="submit" class="btn btn-primary btn-sm">수정하기</button>
<button type="reset" class="btn btn-danger btn-sm">초기화</button>
</div>
</form>
</div>
</section>
<!-- Section end -->
<!-- Footer start -->
<!-- footer.jsp include 할 예정 -->
<!-- Footer end -->
</div>
</body>
</html>
- 얘도 form으로 묶여 있어야 수정한 내용으로 변경 요청이 진행된다.
- 공지사항 수정 페이지는 기존의 공지사항 제목과 내용이 이미 작성되어 있어야 한다.
input 요소는 value 속성으로, textarea는 value 속성이 아닌 시작 태그와 종료 태그 사이에 작성하면 된다.
- db에서 기존의 공지사항 제목과 내용을 가져와서 저기에 적을 때, <% %>로 쓸지 저 요소들을 선택해서 .html로 넣을지 고민. (후자는 ajax를 쓰는데?)
================================================================================
ㅁ board - 일반게시판 목록페이지
- 화면 구현에서 이제 기능 구현으로 넘어가야 돼서 board의 페이지들은 그냥 배포함.
- 아래는 "일반게시판목록페이지".html이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap 사용을 위한 CDN -->
<!-- ------------------------- -->
</head>
<body>
<div class="container p-3">
<!-- Header, Nav start -->
<!-- Header, Nav 포함시키기-->
<!-- Header, Nav end -->
<!-- Section start -->
<section class="row m-3" style="min-height: 500px;">
<div class="container border m-4 p-5 rounded">
<h2 class="m-4">일반게시글 목록</h2>
<!-- 현재 로그인되어있는 회원일 경우 보여지는 요소(등록하기 버튼) -->
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-secondary btn-sm">등록하기</button>
</div>
<br>
<table class="table">
<thead>
<tr>
<th width="100px">번호</th>
<th width="100px">카테고리</th>
<th width="400px">글제목</th>
<th width="120px">작성자</th>
<th>조회수</th>
<th>작성일</th>
</tr>
</thead>
<tbody>
<!-- case1. 조회된 게시글이 없을 경우 -->
<!--
<tr>
<td colspan="6" style="text-align: center;">존재하는 게시글이 없습니다.</td>
</tr>
-->
<!-- case2. 조회된 게시글이 있을 경우 -->
<tr>
<td>3</td>
<td>게임</td>
<td>글제목입니다</td>
<td>user01</td>
<td>200</td>
<td>2024-01-12</td>
</tr>
<tr>
<td>3</td>
<td>게임</td>
<td>글제목입니다</td>
<td>user02</td>
<td>200</td>
<td>2024-01-12</td>
</tr>
<tr>
<td>3</td>
<td>게임</td>
<td>글제목입니다</td>
<td>user02</td>
<td>200</td>
<td>2024-01-12</td>
</tr>
<tr>
<td>3</td>
<td>게임</td>
<td>글제목입니다</td>
<td>user01</td>
<td>200</td>
<td>2024-01-12</td>
</tr>
<tr>
<td>3</td>
<td>게임</td>
<td>글제목입니다</td>
<td>user03</td>
<td>200</td>
<td>2024-01-12</td>
</tr>
</tbody>
</table>
<ul class="pagination d-flex justify-content-center text-dark">
<li class="page-item disabled"><a class="page-link" href="">Previous</a></li>
<li class="page-item active"><a class="page-link" href="">1</a></li>
<li class="page-item"><a class="page-link" href="">2</a></li>
<li class="page-item"><a class="page-link" href="">3</a></li>
<li class="page-item"><a class="page-link" href="">4</a></li>
<li class="page-item"><a class="page-link" href="">5</a></li>
<li class="page-item"><a class="page-link" href="">Next</a></li>
</ul>
</div>
</section>
<!-- Section end -->
<!-- Footer start -->
<!-- Footer 포함시키기 -->
<!-- Footer end -->
</div>
</body>
</html>
- 페이징 처리가 되어있다. (위의 파일은 배포된 것)
- 그리고 일반게시글은 공지사항과 다르게 카테고리와 조회수가 있다.
- 일반게시글은 로그인한 사용자만 가능하다. '등록하기' 버튼은 로그인한 사용자에게만 노출되게 구성했다.
- 일반게시글은 공지사항처럼 누르면 내용행이 보이게끔 구성한게 아니라 일반게시글 상세페이지를 따로 뒀다.
ㅁ 일반, 사진게시글 페이지들은 배포했으므로 직접 확인해봐야 한다.
- 총 일반게시글 목록, 상세, 수정, 작성 페이지 + 사진게시글 목록, 상세, 작성 페이지가 있다.
- 일반 게시글 작성 페이지에는 첨부파일 기능, 카테고리 선택 기능이 있다.
- 일반 게시글 상세 페이지에는 db로부터 조회해서 카테고리, 제목, 내용이 조회되게끔 하고,
첨부파일이 있다면 첨부파일 원본이 노출되게한다. 클릭시 현재 업로드 되어있는 첨부파일 다운로드도 진행되게끔 한다.
그리고 작성자 본인인 경우에만 수정하기, 삭제하기 버튼이 보여진다.
ㅁ 사진 게시글 목록 페이지는 썸네일 형식으로 만들어져 있다.
ㅁ 사진 게시글 목록, 상세, 작성 페이지는 화면 구현 수업을 안 했다.
- 이거는 나중에 기능 구현하면서 수업시간에 진행함. 새로운게 있어서.
ㅁ 여기까지가 화면구현이다. 이렇게 화면만 먼저 구현해놓고 나중에 기능 구현하면 된다.
