우선 게시판을 만들기 위해서 table이 들어갈 페이지 구조를 잡아줄 것이다.
이전 index page 모습을 보면
상단에는 현재 로그인한 사용자의 Username과 MyPage 버튼이 제공되고 (header part)
메인 내용이 들어갈 부분은 아직 미정이라 스마일😄이 차지하고 있다.
코드를 살펴보면
<?php
if(!isset($_COOKIE['JWT'])) { //jwt가 존재하지 않으면 로그인 페이지로 가!
header("location: login.html");
exit;
}
require_once("jwt.php"); //jwt가 존재하면 username 값만 payload에서 가져와봐
$usr = getToken($_COOKIE['JWT'])['usr'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/index.css">
<title>Main page</title>
</head>
<body>
<div class="header">
<p><?php echo $usr;?>님</p>
<button id="mypage_btn">
My Page
</button>
</div>
<div class="container">
=D
</div>
<script src="https://kit.fontawesome.com/5b18c6ebda.js" crossorigin="anonymous"></script>
<script src="./btn.js"></script>
</body>
</html>
메인 콘텐츠가 들어갈 위치는 class container인 div tag임을 알 수 있다.
이제 이 안에 table이 들어갈 구조를 잡아줄 것이다.
[index.php] : 게시판 구조 잡기
<?php
if(!isset($_COOKIE['JWT'])) { //jwt가 존재하지 않으면 로그인 페이지로 가!
header("location: login.html");
exit;
}
require_once("jwt.php"); //jwt가 존재하면 username 값만 payload에서 가져와봐
$usr = getToken($_COOKIE['JWT'])['usr'];
require_once("./db_connect.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/index.css">
<title>Main page</title>
</head>
<body>
<div class="header">
<p><?php echo $usr;?>님</p>
<button id="mypage_btn">
My Page
</button>
</div>
<div class="container">
<div class="page_title">
BOARD
</div>
<div class="table">
<div class="funcs">
<select name="Order" id="order">
<option value="date" autofocus>Date</option>
<option value="author">Author</option>
<option value="title">Title</option>
</select>
<input type="text" placeholder="Search" class="search">
</div>
<table>
<tr>
<th></th>
<th>Title</th>
<th>Author</th>
<th>Date</th>
<th>Invite</th>
</tr>
<tr>
<td>0</td>
<td>Helloworld</td>
<td>Hanhxx</td>
<td>23.11.21</td>
<td>0</td>
</tr>
<tr>
<td>1</td>
<td>iWantTogohome</td>
<td>Dilmung</td>
<td>23.11.21</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>Hotwater</td>
<td>mario</td>
<td>23.11.21</td>
<td>5</td>
</tr>
</table>
<div class="footer">
<button id="write_btn">Write</button>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/5b18c6ebda.js" crossorigin="anonymous"></script>
<script src="./btn.js"></script>
</body>
</html>
index.php code를 보면 container 안에 table 구조가 추가된 걸 알 수 있다.
class table인 div tag는 총 3개의 영역으로 구분되어
(1) class=funcs : 게시물 정렬 & 검색에 사용할 element
(2) table tag : 실제 게시물 정보를 나열
(3) class=footer : 그 외의 기능을 위해 사용할 영역
으로 구성되어 있다.
[1] <div class = funcs>
<div class="funcs">
<select name="Order" id="order">
<option value="date" autofocus>Date</option>
<option value="author">Author</option>
<option value="title">Title</option>
</select>
<input type="text" placeholder="Search" class="search">
</div>
첫 번째 div tag 안에는 게시물을 어떤 순으로 정렬할 것인지 선택할 select tag와
찾고자 하는 게시물 정보를 입력할 input tag가 담아져 있다.
<select> tag의 경우에는 그 안에 선택할 옵션을 option tag로 넣어주어야 한다.
현재 페이지에서는 총 3개의 option tag가 들어있기 때문에 select tag를 클릭하면
"Date", "Author", "Title" 보기가 주어지고 그 중 하나를 택하는 형태가 된다.
[2] table tag
table tag는 그 안에 테이블을 만들 용도로 DB와 유사하게
가로 줄을 row, 세로 줄을 column이라 보면 되고 제일 상단에 위치하는 row에는
해당 column에 들어가는 데이터가 무엇인지 나타내는 값이 들어간다.
(마치 DB에서 column Name과 같음)
table tag에서 row를 넣기 위해서는 간단히 tr tag를 사용하면 된다.
tr tag 안에는 해당 row에 넣을 각 column 값을 td tag로 작성해준다.
그냥 데이터가 아니라 column name을 지정할 때는 th tag를 사용한다.
(tr = table row, td = table data, th = table header 라고 생각하면 이해하기 쉽다.)
예시로 위에서 작성한 코드 몇 줄을 가져와 보면 아래의 코드는
<tr>
<th></th>
<th>Title</th>
<th>Author</th>
<th>Date</th>
<th>Hit</th>
</tr>
"테이블에 column name을 넣을 건데, name 값은 "Title", "Author", "Date", "Hit"이야!" 라는 의미가 된다.
column name을 지정했으니 실제 데이터를 넣고자 한다면
<tr>
<td>0</td>
<td>Helloworld</td>
<td>Hanhxx</td>
<td>23.11.21</td>
<td>0</td>
</tr>
데이터를 한 줄 추가하기 위해 tr tag를 사용해 각 column에 넣을 데이터를 td tag로 작성해준다.
이렇게 column name을 먼저 작성해준 다음, 데이터를 넣어주면
이와 같이 테이블이 완성된 걸 볼 수 있다.
지금은 임의로 값을 다 적어주었지만 후에 DB에서 게시물 정보를 가져와 출력할 때는
PHP code로 수정해줄 예정이다.
<div class="footer">
<button id="write_btn">Write</button>
</div>
테이블 밑에 위치한 div tag는 그 밖에 필요할 요소를 집어넣기 위해 만들어두었다.
현재는 버튼 하나만 위치해있지만, 진행하면서 다른 것도 추가되지 않을까 싶다.
이 버튼은 게시물을 작성하고자 할 때, "글쓰기" 버튼의 용도로 사용된다.
용도에 맞게 버튼을 클릭하면 글 쓰기 페이지로 이동하도록 JS를 작성해두었다.
이렇게 해서 테이블을 추가한 모습의 index page를 확인해보면
어느 정도 구색이 갖추어져 가는 듯하다!! 😏
대강 테이블이 만들어지면 이런 모습이겠다! 싶은 구조가 만들어졌으니
다음으로 직접 테이블에 값을 적어주는 게 아닌, DB에서 가져온 정보로 테이블을 구성해보자.
