- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
완성된 화면입니다.
html 코드 화면입니다.
<?php
include "../connect/connect.php";
include "../connect/session.php";
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판</title>
<?php include "../include/head.php"?>
<!-- link -->
</head>
<body class="gray">
<?php include "../include/skip.php" ?>
<!-- skip -->
<?php include "../include/header.php" ?>
<!-- header -->
<main id="main" class="container">
<div class="intro_inner center bmStyle">
<div class="intro_images small">
<!-- <img src="assets/img/intro01.png" alt="소개이미지"> -->
<picture>
<source srcset="../assets/img/board01.png , ../assets/img/board01@2x.png 2x, ../assets/img/board01@3x.png 3x">
<img src="../assets/img/board01.png" alt="소개이미지">
</picture>
</div>
<h2>게시글 수정하기</h2>
<p class="intro_text">
웹디자이너, 웹퍼블리셔,프론트엔드 개발자를 위한 게시판입니다.
<br>관련된 문의사항은 여기서 확인하세요.
</p>
</div>
<!-- intro_inner -->
<div class="board_inner">
<div class="board_write">
<form action="boardModifySave.php" name="#" method="post">
<fieldset>
<legend class="blind">게시글 수정하기</legend>
<?php
$userID = $_SESSION['memberID'];
$boardID = $_GET['boardID'];
$sql = "SELECT boardID, boardTitle, boardContents, memberID FROM board WHERE boardID = {$boardID}";
$result = $connect -> query($sql);
if($result){
$info = $result -> fetch_array(MYSQLI_ASSOC);
if($info['memberID'] == $userID){
echo "<div style='display:none'><label for='boardID'>번호</label><input type='text' id='boardID' name='boardID' class='inputStyle' value='".$info['boardID']."'></div>";
echo "<div><label for='boardTitle'>제목</label><input type='text' id='boardTitle' name='boardTitle' class='inputStyle' value='".$info['boardTitle']."'></div>";
echo "<div><label for='boardContents'>내용</label><textarea name='boardContents' id='boardContents' rows='20' class='inputStyle'>".$info['boardContents']."</textarea></div>";
echo "<button type='submit' class='btnStyle3' style='margin-right: 10px;'>수정하기</button>";
} else {
echo "<span style= font-size:20px; color:red;>권한이 없습니다.<span>";
}
}
?>
<!-- <div>
<label for="boardTitle">제목</label>
<input type="text" id="boardTitle" name="boardTitle" class="inputStyle">
</div>
<div>
<label for="boardContents">내용</label>
<textarea name="" id="boardContents" rows="20" class="inputStyle"></textarea>
</div> -->
<button type="submit" class="btnStyle3" style="margin-right:5px;">목록보기</button>
<button type="submit" class="btnStyle3" style="margin-right: 10px;">수정하기</button>
</fieldset>
</form>
</div>
</div>
<!-- join_inner -->
</main>
<!-- main -->
<?php include "../include/footer.php" ?>
<!-- footer -->
</body>
</html>
CSS코드입니다.
/* board_inner
+board_search
+board_table
+board_pages
+board_view
+board_btn
+board_write
*/
.board_inner{}
.board_search{
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: 120px;
}
.board_search .left {
width: 40%;
}
.board_search .left em {
color: red;
}
.board_search .right {
width: 60%;
text-align: right;
}
.board_search .right input {
border: 0;
background-color: var(--color__white);
padding: 9px 30px;
border-radius: 5px;
height: 40px;
}
.board_search .right select {
border: 0;
padding: 11px;
border-radius: 5px;
height: 40px;
width: 90px;
vertical-align: -1px;
}
.board_table table {
margin-top: 10px;
margin-bottom: 60px;
border-top: 2px solid var(--color__black);
border-bottom: 2px solid var(--color__black);
text-align: center;
}
.board_table table th {
background-color: var(--bg__gray2);
border-bottom: 1px solid var(--color__black);
padding: 15px 5px;
font-weight: 500;
}
.board_table table td {
padding: 15px 5px;
border-bottom: 1px solid var(--color__black);
}
.board_table table td a:hover {
text-decoration: underline;
text-underline-position: under;
}
.board_pages {
margin-bottom: 100px;
}
.board_pages ul {
display: flex;
align-items: center;
justify-content: center;
}
.board_pages ul li.active a {
background-color: var(--color__black);
color: var(--color__white);
}
.board_pages ul li a {
border: 1px solid var(--bg__gray3);
padding: 10px 13px;
margin-left: -1px;
}
.board_view {
margin-top: 40px;
border-top: 2px solid var(--color__black);
border-bottom: 2px solid var(--color__black);
}
.board_view table td,
.board_view table th {
border-bottom: 1px solid var(--color__black);
padding: 15px;
}
.board_view table tr:last-child td {
height: 500px;
vertical-align: top;
}
.board_view table th {
background-color: var(--bg__gray2);
}
.board_btn {
margin-top: 20px;
text-align: right;
}
.board_write {
padding: 50px 0 100px;
}
.board_write label {
width: 100%;
font-size: 20px;
display: block;
margin-bottom: 10px;
}
.board_write input {
margin-bottom: 50px;
}
.board_write textarea {
padding: 2em;
resize: none;
}
.board_write button {
float: right;
margin-top: 10px;
}
이 페이지는 게시판의 글을 보여주는 기능을 수행합니다.
파일의 첫 부분에서는 ../connect/connect.php와 ../connect/session.php 파일을 include함으로써 데이터베이스 연결과 세션을 시작합니다.
<head> 태그 안에서는 페이지 제목, 문자 인코딩, 뷰포트 등의 설정과 함께 다양한 CSS와 JS 파일들을 include합니다.
<body> 태그 안에서는 웹 페이지의 구성 요소들을 표시합니다.
<main> 태그 안에서는 웹 페이지의 핵심적인 내용이 표시됩니다. 이 페이지는 먼저 게시글을 보여주는 레이아웃을 구성하기 위한 HTML 코드가 포함되어 있습니다.
게시글의 정보는 MySQL 데이터베이스에서 가져오며, boardID 값이 URL 파라미터로 전달됩니다. isset() 함수를 사용하여 boardID 값이 존재하는지 확인하고, $sql 변수에 SQL 쿼리문을 할당합니다. 이 쿼리문은 board 테이블과 mymember 테이블을 JOIN하여 boardID, boardTitle, youName, regTime, boardView, boardContents 열을 선택합니다.
SQL 쿼리문이 실행된 후, $result 변수에 그 결과를 할당합니다. 만약 $result 변수가 true라면, MySQLi 메소드 fetch_array()를 사용하여 가져온 정보들을 배열로 저장하고, 이를 이용하여 게시글의 정보를 출력합니다.
마지막으로, 페이지 하단에는 ../include/footer.php 파일을 include하여 웹 페이지의 바닥글 부분을 표시합니다.
전체소스 보기