Almon Dev

게시판 만들기 #1 본문

모의해킹/웹 개발

게시판 만들기 #1

Almon 2024. 11. 11. 03:16

게시판 만들기

 

기본 베이스 만들기

login_successful.php

<?php
require_once("jwt_auth.php");
require_once("mysql.php");

$nickname = "";
$profile_img_path = "";

if($token = Jwt_auth::auth()){
    try {
        //인증 성공
        $user_id = $token->sub;
        $sql = "select nickname,profile_img_path from users where user_id='$user_id'";
        $sql_result = runSQL($sql)->fetch_array();
        $nickname = $sql_result["nickname"];
        if(!$profile_img_path = $sql_result["profile_img_path"]) {
            $profile_img_path = "almond-profile.jpg";
        }
        
    } catch(Exception $e) {
        // 인증 실패
    }
}else {
    header("Location: login2.php");
    exit;
}

?>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Almond</title>
    <link rel="stylesheet" href="/css/login_successful.css">
    <script src="./script/logout.js" defer></script>
    <script src="./script/mypage.js" defer></script>
</head>
<body>
    <container class="profile-container">
        <div class="profile">
            <img src=<?php echo "'/upload/profile_img/$profile_img_path'" ?> class="profile_img">
            <div class="profile_info">
                <h2 class="profile_name"><?= $nickname; ?></h2>
                <p class="profile_subs">구독자 <strong>0명</strong></p>
            </div>
        </div>
        
        <div class="profile_link">
            <a href="forum/forum.php" class="link_tab"><p>게시판</p></a>
            <!-- <a href="mypage.php" class="link_tab"><p>마이페이지</p></a> -->
            <?php
                printf('<button class="link_tab mypage-btn" onclick=\'mypage("%s")\'>마이페이지</button>', $nickname);
                // printf('<button class="link_tab logout-btn" onclick=\'logout("%s")\'>로그아웃</button>', $nickname);
            ?>
            <a href="logout.php" class="link_tab"><p>로그아웃</p></a>
        </div>
        <div class="content"></div>
        <button class="mypageset-btn">수정하기</button>
    </container>
</body>
</html>

프로필 페이지에 게시판으로 이동하는 버튼을 만들었습니다.

 

forum.php

<?php
require_once("../jwt_auth.php");
require_once("../mysql.php");

$nickname = "";
$profile_img_path = "";

if($token = Jwt_auth::auth()) {
    $id = $token->sub;
    $sql = "select nickname,profile_img_path from users where user_id='$id'";    
    $sql_result = runSQL($sql)->fetch_array();
    $nickname = $sql_result['nickname'];
    if(!$profile_img_path = $sql_result['profile_img_path']) {
        $profile_img_path = "almond-profile.jpg";
    }

}else {
    header("Location: /login2.php");
}
?>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Almond Forum</title>
    <link rel="stylesheet" href="/forum/css/forum.css">
</head>
<body>
    <container class="forum-container">
        <header>
            <div class="logo"><img src="../imgs/logo-forum.png" alt="" class="logo-img"></div>
            <div class="profile">
                <img src=<?php echo "'../upload/profile_img/$profile_img_path'" ?> class="profile-img">
                <p class="profile-name"><?= $nickname; ?></p>
                <div class="post-controls">
                    <button class="write-post">게시글 작성하기</button>
                    <button class="my-post">게시글 관리하기</button>
                </div>
            </div>
            <hr class="header-line">
            <nav class="tabs">
                <ol>
                    <li class="category" data-category-id="1">공지사항</li>
                    <li class="category" data-category-id="2">자유게시판</li>
                    <li class="category" data-category-id="3">자료실</li>
                </ol>
            </nav>
        </header>
    
        <section class="post-container">
            <nav class="post-window">
                <h1 class="post-title">25글자 제한</h1>
                <div class="post-sidebar">
                    <button class="post-exit"><img src="../imgs/cross-mark.png" alt="" class="exit-img"></button>
                </div>
            </nav>
            <article class="post-content">
            </article>
        </section>
    </container>
</body>
</html>

 

forum.css

.blind {
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

html {
  height: 100vh;
}

body {
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: #f5e1c8;
}

button {
  border: 0;
  background-color: transparent;
}

ul,
ol {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

select,
input,
textarea {
  outline: none;
  border: none;
}

.forum-container {
  height: 100vh;
  width: 100vw;

  display: flex;
}

/* 왼쪽 사이드바 */
header {
  width: 300px;
  min-width: 300px;
  height: 100vh;
  position: fixed;

  display: flex;
  flex-direction: column;
  align-items: center;

  font-size: 1.2rem;
  color: #593500;
  background-color: #d9c2a3;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.logo {
  display: flex;
  justify-content: center;
}

.logo-img {
  width: 170px;
  cursor: auto;
}

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: center;
}

.profile-img {
  margin-top: 0.5rem;
  width: 130px;

  border: 2px solid #d2b48c;
  border-radius: 50%;
}

.profile-name {
  font-weight: 700;
  margin-top: 1rem;
}

.header-line {
  margin-top: 2rem;
  margin-bottom: 2rem;

  border: 0;
  height: 1px;
  width: 80%;
  background-color: #7a5c3e;
}

.post-controls {
  margin-top: 1rem;
}

.post-controls button {
  padding: 0.3rem 0.8rem;

  border-radius: 6px;

  font-weight: 800;
  color: #3e2c1c;
  background-color: #c8b08d;
}

.post-controls button:hover {
  text-decoration: underline;
  cursor: pointer;
}

.tabs {
  margin-top: 1rem;
  width: 80%;
}

.tabs .category {
  margin-bottom: 1rem;
  font-weight: 600;
}

.tabs .category:hover {
  text-decoration: underline;
  cursor: pointer;
}

/* 중앙 섹션 */
.post-container {
  margin-left: 350px;
  margin-right: 3rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  min-width: 1000px;
  max-width: 1000px;

  border-radius: 15px;

  color: #3e2c1c;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  opacity: 0;
  transition: opacity 0.5s ease;
}

.post-container.on {
  opacity: 100;
}

.post-window {
  height: 7%;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: rgba(200, 176, 141, 0.5);

  border-radius: 15px 15px 0 0;
}

.post-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  font-weight: 800;
}

.post-exit {
  height: 60px;
  width: 60px;
  position: absolute;
  transform: translateY(-50%);

  right: 0; /* 이미지 오른쪽 끝에 배치 */

  border-radius: 0 15px 0 0;
  transition: background-color 0.5s ease, scale 0.3s ease;
}
.post-exit:hover {
  background-color: rgba(255, 0, 0, 0.5);
}

.exit-img {
  height: 50px;
}

.post-content {
  height: 89%;
  margin: 1rem 2rem;
}

 

중앙에 게시글을 표시할 컨테이너를 opacity로 컨테이너의 클래스에 on이 없을대는 투명하게 on이 생기면 불투명하게 설정했습니다.

html은 이렇게만 만들고 js와 php로 html태그를 생성하고 제거하는 게시판을 만들어 볼것입니다.

'모의해킹 > 웹 개발' 카테고리의 다른 글

게시판 만들기 #3 (게시글 목록)  (0) 2024.11.12
게시판 만들기 #2 (게시글 작성)  (0) 2024.11.11
로그인 로직 구현하기(과제)  (1) 2024.11.04
JWT로 로그인 구현하기  (1) 2024.11.03
세션으로 로그인 구현하기(모의해킹 공부)  (0) 2024.11.01
'모의해킹/웹 개발' Related Articles more