[Web Application-개발] 2024-02-15 웹 어플리케이션 제작 프로젝트 : 웹 디자인 #10-3
2024. 2. 15. 07:37ㆍProject/Web Application-개발
프로젝트 일지
남은 페이지인 게시판 페이지와 게시글 상세정보 페이지를 디자인한다.
게시판 페이지
게시판 페이지에서 작성된 게시글 위에 커서를 올리게 되면 흰색에서 회색으로 변하게 된다. 또한 현재 사용자가 게시글을 읽었을 때 읽은 표시를 게시글의 제목으로 표시를 하였다. 한 번이라도 읽은 게시글의 제목은 회색으로 변한다.
또한 버튼과 페이지 위에 커서를 올리게 되면 색이 변하게 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<main>
<div class="main-board">
<table>
<tr style="background-color:rgba(247, 246, 246, 0.966);">
<th>번호</th>
<th>제목</th>
<th>글쓴이</th>
<th>작성일</th>
</tr>
<?php
require_once("db.php");
require_once("paging.php");
$conn = db_conn();
$search = $_GET['search'];
$search_case = $_GET['search_case'];
// 초기 $_GET['page']에 값이 없으면 $page = 1로 초기화 => 게시판 클릭하면 처음 1페이지가 디폴트
if (!isset ($_GET['page']) ) $page = 1;
else $page = $_GET['page'];
// 한번에 볼 수 있는 페이지 수
$view_page = 10;
// 한 페이지에 보일 게시글 표시
$limit_page = ($page-1) * 5;
if($search)
{
// 페이징 URL 작업
$url = "/php/board.php?search_case=".$search_case."&search=".$search."&page=";
if($search_case == 'title') $where = "where title like '%$search%'";
else if($search_case == 'content') $where = "where content like '%$search%'";
else if($search_case == 'title_content') $where = "where title like '%$search%' or content like '%$search%'";
else $where = "where user_id like '%$search%'";
// 총 게시글 수
$total_content = mysqli_fetch_array(mysqli_query($conn, "select count(*) from test_board $where"));
$sql = "select * from test_board $where order by reg_date DESC limit $limit_page,$view_page";
}
else
{
// 페이징 URL 작업
$url = "/php/board.php?page=";
// 총 게시글 수
$total_content = mysqli_fetch_array(mysqli_query($conn, "select count(*) from test_board"));
$sql = "select * from test_board order by reg_date DESC limit $limit_page,$view_page";
}
$result = mysqli_query($conn, $sql);
mysqli_close($conn);
while($row = mysqli_fetch_array($result)){ ?>
<tr>
<td style="width:10%"><?= $row['idx']; ?></td>
<td style="width:40%" ><a href="/php/board_read.php?num=<?= $row['idx']; ?>"><?= $row['title']; ?></a></td>
<td style="width:20%"><?= $row['user_id']; ?></td>
<td style="width:30%"><?= $row['reg_date']; ?></td>
</tr>
<?php }
?>
</table>
<div class="board-bar-btn">
<button class="board-btn" type = "button" onClick = "location.href = '/php/board.php'">전체글</button>
<button class="board-btn" type = "button" onClick = "location.href = '/php/board_write.php'">글쓰기</button>
</div>
<div class="board-bar-search">
<form method="GET" action="">
<select name = "search_case">
<option value="title">제목</option>
<option value="content">내용</option>
<option value="title_content">제목+내용</option>
<option value="writer">작성자</option>
</select>
<input type="text" name="search" >
<button type="submit">조회</button>
</form>
</div>
<div class="board-page">
<?= paging($view_page, $page, $total_content[0], $url); ?>
</div>
</div>
</main>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
table, td, th {
border-collapse: collapse;
}
table {
margin:auto;
width: 1000px;
margin-top: 100px;;
}
th, td {
border-bottom: 1px solid #000000;
font-weight: bold;
height:50px;
}
tr:hover {
background-color:rgba(247, 246, 246, 0.966);
}
td a:visited{
color:#969190;
}
td a {
color: #000000;
text-decoration: none;
text-align: center;
}
.board-bar-btn {
margin-top: 20px;
margin-left:40px;
float:left;
}
.board-btn {
color:white;
background-color: rgb(81, 162, 228);
border: none;
width: 80px;
height: 30px;
cursor: pointer;
font-weight: bold;
}
.board-bar-search {
margin-top: 20px;
margin-right:40px;
float:right;
}
.board-bar-search select, .board-bar-search button {
color:white;
background-color: rgb(81, 162, 228);
border: none;
width: 80px;
height: 30px;
cursor: pointer;
font-weight: bold;
}
.board-btn:hover, .board-bar-search button:hover {
background-color: #483bfd;
color: white;
}
.board-bar-search input {
border: none;
width: 200px;
height: 30px;
padding-left: 10px;
border: 2px solid rgb(81, 162, 228);
}
.board-page {
margin-top: 100px;
}
.board-page a {
color:rgb(0, 0, 0);
text-decoration: none;
font-size: 20px;
border-top: 2px solid rgb(0, 0, 0);
border-bottom: 2px solid rgb(0, 0, 0);
padding-left: 10px;
}
.board-page a:hover {
background-color: #969190;
color: white;
}
|
cs |
게시글 상세정보 페이지
1) 게시글 작성 페이지
게시글 작성 페이지에서 버튼 위에 커서를 올리면 색이 변하는 기능을 구현하였다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<main>
<div class="main-form" id="main-crud">
<?php
if(!isset($_SESSION['user_id']))
{?>
<script>
alert('로그인 되어 있지 않습니다. 로그인 페이지로 이동합니다.');
window.location.replace('/php/login.php');
</script>
<?php
exit();
}
else
{?>
<form id="f" method="POST" action="/php/board_write_proc.php" onsubmit='return check_write();' enctype="multipart/form-data">
<input class="title-input" id="title" name="title" type="text" placeholder="제목을 입력하세요"><br>
<input class="username-input" type="text" value="<?= $row['user_id'];?>" readonly disabled>
<input class="date-input" type="text" value="<?= $row['reg_date'];?>" readonly disabled>
<textarea id="content" rows="30" name="content" placeholder="내용을 입력하세요"></textarea><br>
<input type = file name="upload_file"><br>
<button class="board-crud-btn" style="margin-top: 30px;" type = "button" onClick = "location.href = '/php/board.php'">목록</button>
<button class="board-crud-btn" style="margin-top: 30px;" type = "submit">작성</button>
</form>
<?php
}?>
</div>
</main>
|
cs |
2) 게시글 상세정보 페이지
게시글 상세정보 페이지에서 버튼 위에 커서를 올리면 색이 변하는 기능을 추가하였다. 그리고 빨간 박스 안에는 작성자이름과 게시글이 작성된 시간이 출력된다.
만약 게시글을 작상한 당사자가 아닌 다른 사람이 게시글 상세정보 페이지에 접근한다면 아래 빨간박스에 위치한 버튼들 중 '목록' 버튼만 보인다.
만약 게시글에 파일이 등록되어있는 경우에는 '다운로드' 버튼이 추가되어 보이게 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<main>
<div class="main-form" id="main-crud">
<?php
require_once("db.php");
$num=$_GET['num'];
$result = db_select_board("test_board",$num);
$row = mysqli_fetch_array($result);?>
<input class="title-input" id="title" name="title" type="text" value="<?= $row['title'];?>" readonly disabled><br>
<input class="username-input" type="text" value="작성자 : <?= $row['user_id'];?>" readonly disabled>
<input class="date-input" type="text" value="작성일 : <?= $row['reg_date'];?>" readonly disabled>
<textarea id="content" rows="30" name="content" readonly disabled><?= $row['content'];?></textarea><br><?php
if(strlen($row['file_path']))
{?>
<a class="download_btn" href="<?=$row['file_path']?>" download="<?=$row['file_name']?>">다운로드</a>
<button class="board-crud-btn" style="margin-top: 13px;" type = "button" onClick = "location.href = '/php/board.php'">목록</button>
<?php
// 작성자와 로그인한 사용자가 같은 경우
if($_SESSION['user_id'] == $row['user_id'])
{?>
<button class="board-crud-btn" style="margin-top: 13px;" type = "button" onClick = "location.href = '/php/board_update.php?num=<?= $num ?>'">수정</button>
<button class="board-crud-btn" style="margin-top: 13px;" type = "button" onClick = "location.href = '/php/board_delete.php?num=<?= $num ?>'">삭제</button>
<?php
}
}
else
{?>
<button class="board-crud-btn" style="margin-top: 60px;" type = "button" onClick = "location.href = '/php/board.php'">목록</button>
<?php
// 작성자와 로그인한 사용자가 같은 경우
if($_SESSION['user_id'] == $row['user_id'])
{?>
<button class="board-crud-btn" style="margin-top: 60px;" type = "button" onClick = "location.href = '/php/board_update.php?num=<?= $num ?>'">수정</button>
<button class="board-crud-btn" style="margin-top: 60px;" type = "button" onClick = "location.href = '/php/board_delete.php?num=<?= $num ?>'">삭제</button>
<?php
}
}?>
</div>
</main>
|
cs |
3) 게시글 수정 페이지
게시글 수정 페이지에서 버튼 위에 커서를 올리면 색이 변하는 기능을 추가하였다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<main>
<div class="main-form" id="main-crud">
<?php
if(!isset($_SESSION['user_id']))
{?>
<script>
alert('로그인 되어 있지 않습니다. 로그인 페이지로 이동합니다.');
window.location.replace('/php/login.php');
</script>
<?php
exit();
}
else
{
require_once("db.php");
$num = $_GET['num'];
$result = db_select_board("test_board",$num);
$row = mysqli_fetch_array($result);?>
<form id="f" method="POST" action="/php/board_update_proc.php" onsubmit='return check_write();' enctype="multipart/form-data">
<input class="title-input" id="title" name="title" type="text" value="<?= $row['title'];?>"><br>
<input class="username-input" type="text" value="작성자 : <?= $row['user_id'];?>" readonly disabled>
<input class="date-input" type="text" value="작성일 : <?= $row['reg_date'];?>" readonly disabled>
<textarea id="content" rows="30" name="content"><?= $row['content'];?></textarea><br>
<input type = "hidden" name= "num" value="<?= $num ?>">
<input type = file name="upload_file"><br>
<button class="board-crud-btn" style="margin-top: 36px;" type = "button" onClick = "location.href = '/php/board.php'">목록</button>
<button class="board-crud-btn" style="margin-top: 36px;" type = "button" onClick = "location.href = '/php/board_read.php?num=<?= $num ?>'">취소</button>
<button class="board-crud-btn" style="margin-top: 36px;" type = "submit">저장</button>
</form>
<?php
}?>
</div>
</main>
|
cs |
4) 게시글 CSS 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
#main-crud {
margin-top: 50px;
width: 700px;
height:800px;
}
#main-crud textarea {
resize:none;
overflow:auto;
width:70%;
font-size: 16px;
border:none;
border-top:2px solid black;
border-bottom:2px solid rgb(0, 0, 0);
background-color: white;
}
.board-crud-btn{
color:white;
background-color: rgb(81, 162, 228);
border: none;
border-radius: 10px;
width: 80px;
height: 30px;
cursor: pointer;
font-weight: bold;
}
.board-crud-btn:hover {
background-color: #483bfd;
color: white;
}
.download_btn {
display: block;
background-color: rgb(81, 162, 228);
border-radius: 10px;
width: 200px;
color: white;
padding: 8px;
text-decoration: none;
font-weight: bold;
margin-left: 242px;
margin-top: 10px;
}
.download_btn:hover {
background-color: #483bfd;
color: white;
}
.title-input {
width:70%;
height:40px;
margin-top:60px;
border:none;
border-top:solid 2px black;
border-bottom:solid 2px black;
font-size: 16px;
background-color: white;
}
.username-input, .date-input {
background-color: rgba(247, 246, 246, 0.966);
height:30px;
border:none;
font-weight: bold;
}
.username-input {
width:39.8%;
}
.date-input {
width:28.8%;
text-align:right;
}
|
cs |
앞으로 할 작업
- 파일 다운로드 기능 보완