php

블로그 사이트 만들기

Kim do hyun 2023. 5. 18. 14:11
728x90
반응형

블로그 사이트 만들기

 

 

메인 블로그 페이지

<?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" ?>
</head>
<body class="gray">
    
    <?php include "../include/skip.php" ?>
    <!-- //skip -->

    <?php include "../include/header.php" ?>
    <!-- //header -->

    <main id="main" class="container">
        <div class="blog__search bmStyle">
            <h2>개발자 블로그 입니다.</h2>
            <p>개발과 관련된 글입니다.</p>
            <div class="search">
                <form action="#" name="#" method="POST">
                    <legend class="blind">블로그 검색</legend>
                    <input type="search" class="inputStyle2" name="searchKeyword" aria-label="검색" placeholder="검색어를 입력하세요!">
                    <button type="submit" class="btnStyle4 ml20">검색하기</button>
                    <?php if(isset($_SESSION['memberID'])){ ?>
                        <div class="mt20"><a href="blogWrite.php" class="btnStyle4 white">글쓰기</a></div>
                    <?php } ?>
                        
                </form>
            </div>
        </div>
        <div class="blog__inner">
            <div class="left">
                <div class="blog__wrap">
                    <h2>All Posts</h2>
                    <div class="cards__inner col3 line3">
                        <!-- <div class="card">
                            <figure class="card__img">
                                <source srcset="../assets/img/blog01.jpg, ../assets/img/blog01@2x.jpg 2x, ../assets/img/blog01@3x.jpg 3x" />
                                <img src="../assets/img/blog01.jpg" alt="소개이미지">
                            </figure>
                            <div class="card__title">
                                <h3>코딩 기초</h3>
                                <p>이것은 코딩을 처음 접하는 사람들을 위한 기본적인 코딩 주제에 대한 기사일 수 있습니다. 여기에는 변수, 조건문, 반복문과 같은 주제가 포함될 수 있습니다.</p>
                            </div>
                            <div class="card__info">
                                <span class="more" class="more">더보기</span>
                            </div>
                        </div> -->
<?php
    $sql = "SELECT * FROM blog WHERE blogDelete = 0 ORDER BY blogID DESC";
    $result = $connect -> query($sql);
?>
    <?php foreach($result as $blog){ ?>
        <div class="card">
            <figure class="card__img">
                <a href="blogView.php?blogID=<?=$blog['blogID']?>">
                    <img src="../assets/blog/<?=$blog['blogImgFile']?>" alt="<?=$blog['blogTitle']?>">
            </a>
            </figure>
            <div class="card__title">
                <h3><?=$blog['blogTitle']?></h3>
                <p><?=$blog['blogContents']?></p>
            </div>
            <div class="card__info">
                <a href="#" class="more">더보기</a>
            </div>
        </div>
    <?php } ?>
                        <!-- <div class="card">
                            <figure class="card__img">
                                <source srcset="../assets/img/blog02.jpg, ../assets/img/blog02@2x.jpg 2x, ../assets/img/blog02@3x.jpg 3x" />
                                <img src="../assets/img/blog02.jpg" alt="소개이미지">
                            </figure>
                            <div class="card__title">
                                <h3>특정 프로그래밍 언어에 대한 기사</h3>
                                <p>이것은 특정 프로그래밍 언어에 대한 기사일 수 있습니다. 여기에는 언어의 문법, 기능 및 프레임워크에 대한 정보가 포함될 수 있습니다.</p>
                            </div>
                            <div class="card__info">
                                <span class="more">더보기</span>
                            </div>
                        </div>
                        <div class="card">
                            <figure class="card__img">
                                <source srcset="../assets/img/blog03.jpg, ../assets/img/blog03@2x.jpg 2x, ../assets/img/blog03@3x.jpg 3x" />
                                <img src="../assets/img/blog03.jpg" alt="소개이미지">
                            </figure>
                            <div class="card__title">
                                <h3>코딩 프로젝트</h3>
                                <p>이것은 코딩에 대한 지식을 적용하는 코딩 프로젝트에 대한 기사일 수 있습니다. 여기에는 게임, 웹사이트 또는 앱 구축과 같은 프로젝트가 포함될 수 있습니다.</p>
                            </div>
                            <div class="card__info">
                                <span class="more">더보기</span>
                            </div>
                        </div>
                        <div class="card">
                            <figure class="card__img">
                                <source srcset="../assets/img/blog04.jpg, ../assets/img/blog04@2x.jpg 2x, ../assets/img/blog04@3x.jpg 3x" />
                                <img src="../assets/img/blog04.jpg" alt="소개이미지">
                            </figure>
                            <div class="card__title">
                                <h3>코딩 팁과 요령</h3>
                                <p>이것은 코딩을 더 잘하는 데 도움이 되는 팁과 요령에 대한 기사일 수 있습니다. 여기에는 프로그래밍에서 시간을 절약하는 방법, 버그를 디버깅하는 방법 또는 코드를 더 효율적으로 작성하는 방법에 대한 정보가 포함될 수 있습니다.</p>
                            </div>
                            <div class="card__info">
                                <span class="more">더보기</span>
                            </div>
                        </div>
                        <div class="card">
                            <figure class="card__img">
                                <source srcset="../assets/img/blog01.jpg, ../assets/img/blog01@2x.jpg 2x, ../assets/img/blog01@3x.jpg 3x" />
                                <img src="../assets/img/blog01.jpg" alt="소개이미지">
                            </figure>
                            <div class="card__title">
                                <h3>코딩 기초</h3>
                                <p>이것은 코딩을 처음 접하는 사람들을 위한 기본적인 코딩 주제에 대한 기사일 수 있습니다. 여기에는 변수, 조건문, 반복문과 같은 주제가 포함될 수 있습니다.</p>
                            </div>
                            <div class="card__info">
                                <span class="more" class="more">더보기</span>
                            </div>
                        </div>
                        <div class="card">
                            <figure class="card__img">
                                <source srcset="../assets/img/blog02.jpg, ../assets/img/blog02@2x.jpg 2x, ../assets/img/blog02@3x.jpg 3x" />
                                <img src="../assets/img/blog02.jpg" alt="소개이미지">
                            </figure>
                            <div class="card__title">
                                <h3>특정 프로그래밍 언어에 대한 기사</h3>
                                <p>이것은 특정 프로그래밍 언어에 대한 기사일 수 있습니다. 여기에는 언어의 문법, 기능 및 프레임워크에 대한 정보가 포함될 수 있습니다.</p>
                            </div>
                            <div class="card__info">
                                <span class="more">더보기</span>
                            </div>
                        </div>
                        <div class="card">
                            <figure class="card__img">
                                <source srcset="../assets/img/blog03.jpg, ../assets/img/blog03@2x.jpg 2x, ../assets/img/blog03@3x.jpg 3x" />
                                <img src="../assets/img/blog03.jpg" alt="소개이미지">
                            </figure>
                            <div class="card__title">
                                <h3>코딩 프로젝트</h3>
                                <p>이것은 코딩에 대한 지식을 적용하는 코딩 프로젝트에 대한 기사일 수 있습니다. 여기에는 게임, 웹사이트 또는 앱 구축과 같은 프로젝트가 포함될 수 있습니다.</p>
                            </div>
                            <div class="card__info">
                                <span class="more">더보기</span>
                            </div>
                        </div>
                        <div class="card">
                            <figure class="card__img">
                                <source srcset="../assets/img/blog04.jpg, ../assets/img/blog04@2x.jpg 2x, ../assets/img/blog04@3x.jpg 3x" />
                                <img src="../assets/img/blog04.jpg" alt="소개이미지">
                            </figure>
                            <div class="card__title">
                                <h3>코딩 팁과 요령</h3>
                                <p>이것은 코딩을 더 잘하는 데 도움이 되는 팁과 요령에 대한 기사일 수 있습니다. 여기에는 프로그래밍에서 시간을 절약하는 방법, 버그를 디버깅하는 방법 또는 코드를 더 효율적으로 작성하는 방법에 대한 정보가 포함될 수 있습니다.</p>
                            </div>
                            <div class="card__info">
                                <span class="more">더보기</span>
                            </div>
                        </div>
                        <div class="card">
                            <figure class="card__img">
                                <source srcset="../assets/img/blog04.jpg, ../assets/img/blog04@2x.jpg 2x, ../assets/img/blog04@3x.jpg 3x" />
                                <img src="../assets/img/blog04.jpg" alt="소개이미지">
                            </figure>
                            <div class="card__title">
                                <h3>코딩 팁과 요령</h3>
                                <p>이것은 코딩을 더 잘하는 데 도움이 되는 팁과 요령에 대한 기사일 수 있습니다. 여기에는 프로그래밍에서 시간을 절약하는 방법, 버그를 디버깅하는 방법 또는 코드를 더 효율적으로 작성하는 방법에 대한 정보가 포함될 수 있습니다.</p>
                            </div>
                            <div class="card__info">
                                <span class="more">더보기</span>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="blog__aside">
                    <div class="intro">
                        <picture class="img">
                            <source srcset="../assets/img/join02.png, ../assets/img/join02@2x.png 2x, ../assets/img/join02@3x.png 3x" />
                            <img src="../assets/img/join02.png" alt="소개이미지">
                        </picture> 
                        <p class="text">
                            어떤 일이라도 노력하고 즐기면 그 결과는 빛을 바란다고 생각합니다.
                        </p>
                    </div>
                    <?php include "../include/blogCate.php" ?>

                    <?php include "../include/blogLatest.php" ?>

                    <?php include "../include/blogPopular.php" ?>

                    <?php include "../include/blogComment.php" ?>
                    </div>
                </div>
            </div>
        </div>
        <!-- blog__inner -->
    </main>
    <!-- //main -->
        
    <?php include "../include/footer.php" ?>
    <!-- //footer -->
</body>
</html>

 

카테고리 페이지

<?php
    include "../connect/connect.php";
    include "../connect/session.php";
    
    if(isset ($_GET['category'])){
        $category = $_GET['category'];
    } else {
        Header("Location: blog.php");
    }
    $categorySql = "SELECT * FROM blog WHERE blogDelete = 0 AND blogCategory= '$category' ORDER BY blogID DESC";
    $categoryResult = $connect -> query($categorySql);
    $categoryInfo = $categoryResult -> fetch_array(MYSQLI_ASSOC);
    $categoryCount = $categoryResult -> num_rows;

?>
<!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" ?>
</head>
<body class="gray">
    
    <?php include "../include/skip.php" ?>
    <!-- //skip -->

    <?php include "../include/header.php" ?>
    <!-- //header -->

    <main id="main" class="container">
    <div class="blog__search bmStyle">
        <?php
            if ($categoryCount == 0) {?>
                <h2><?= $category ?></h2>
                <p>카테고리와 관련된 게시글이 없습니다.</p>
                <?php
            } else {?>
                <h2><?= $categoryInfo['blogCategory'] ?></h2>
                <p><?= $categoryInfo['blogCategory'] ?>와 관련된 글이 <?= $categoryCount ?>개 있습니다.</p>
                <?php
            }
        ?>
            </div>
        </div>
        <!-- //blog__title -->
        <div class="blog__inner">
            <div class="left mt70">
                <div class="blog__wrap">
                    <div class="cards__inner col3 row line2">
                    <?php foreach($categoryResult as $blog){ ?>
                        <div class="card">
                            <figure class="card__img">
                                <a href="blogView.php?blogID=<?=$blog['blogID']?>">
                                    <img src="../assets/blog/<?=$blog['blogImgFile']?>" alt="<?=$blog['blogTitle']?>">
                                </a>
                            </figure>
                            <div class="card__title">
                                <h3><a href="blogView.php?blogID=<?=$blog['blogID']?>"><?=$blog['blogTitle']?></a></h3>
                                <p><?=$blog['blogContents']?></p>
                            </div>
                        </div>
                    <?php } ?>
                    </div>
                </div>
            </div>
            <div class="right mt70">
                <div class="blog__aside">
                    
                    <?php include "../include/blogtitle.php" ?>
                    
                    <?php include "../include/blogCate.php" ?>

                    <?php include "../include/blogLatest.php" ?>

                    <?php include "../include/blogPopular.php" ?>

                    <?php include "../include/blogComment.php" ?>

                </div>
            </div>
        </div>
        <!-- //blog__inner -->
    </main>
    <!-- //main -->
        
    <?php include "../include/footer.php" ?>
    <!-- //footer -->
</body>
</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>
    <!-- Toast UI Editor -->
    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
    <style>
         :not(.auto-height)>.toastui-editor-defaultUI>.toastui-editor-main {
            background-color: #fff;
        }
    </style>

    <?php include "../include/head.php" ?>
</head>
<body class="gray">
    
    <?php include "../include/skip.php" ?>
    <!-- //skip -->

    <?php include "../include/header.php" ?>
    <!-- //header -->

    <main id="main" class="container">
        <div class="blog__search bmStyle">
            <h2>개발자 블로그 게시글 작성.</h2>
            <p>개발과 관련된 글들만 작성할 수 있습니다.</p>
        </div>
        <div class="blog__inner">
            <div class="blog__write">
                <form action="blogWriteSave.php" name="blogWriteSave" method="post" enctype="multipart/form-data">
                    <fieldset>
                        <legend class="blind">게시글 작성하기</legend>
                        <div>
                            <label for="blogCategory">카테고리</label>
                            <select name="blogCategory" id="blogCategory">
                                <option value="javascript">javascript</option>
                                <option value="jquery">jquery</option>
                                <option value="react">react</option>
                                <option value="html">html</option>
                                <option value="css">css</option>
                            </select>
                        </div>
                        <div>
                            <label for="blogTitle">제목</label>
                            <input type="text" id="blogTitle" name="blogTitle" class="inputStyle" required>
                        </div>
                        <div>
                            <label for="blogContents">내용</label>
                            <textarea name="blogContents" id="blogContents" rows="20"  class="inputStyle" required></textarea>
                            <!-- <div id="editor"></div> -->
                        </div>
                        <div class="mt30">
                            <label for="blogFile">파일</label>
                            <input type="file" name="blogFile" id="blogFile" accept=".jpg, .jpeg, .png, .gir" placeholder="jpg, igf, png 파일만 넣을 수 있습니다. 이미지 용량은 1메가를 넘길 수 없습니다.">
                        </div>
                        <button type="submit" class="btnStyle3">저장하기</button>
                    </fieldset>
                </form>
            </div>
            <div class="right">
            </div>
        </div>
        <!-- blog__inner -->
    </main>
    <!-- //main -->
        
    <?php include "../include/footer.php" ?>
    <!-- //footer -->

    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
    <script>
        const Editor = toastui.Editor;
 
        const editor = new Editor({
            el: document.querySelector('#editor'),
            height: '1000px',
            initialEditType: 'markdown',
            previewStyle: 'vertical'
        });
    </script>
</body>
</html>

 

게시글 보기

<?php
    include "../connect/connect.php";
    include "../connect/session.php";

    if(isset($_GET['blogID'])){
        $blogID = $_GET['blogID'];
    } else {
        Header("Location: blog.php");
    }


    $blogSql = "SELECT * FROM blog WHERE blogID = '$blogID'";
    $blogResult = $connect -> query($blogSql);
    $blogInfo = $blogResult -> fetch_array(MYSQLI_ASSOC);

    // echo "<pre>";
    // var_dump($blogInfo);
    // echo "</pre>";
?>
<!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" ?>
</head>
<body class="gray">
    
    <?php include "../include/skip.php" ?>
    <!-- //skip -->

    <?php include "../include/header.php" ?>
    <!-- //header -->

    <main id="main" class="container">
    <div class="blog__title" style="background-image:url(../assets/blog/<?=$blogInfo['blogImgFile']?>)">
            <span class="cate"><?=$blogInfo['blogCategory']?></span>
            <h2 class="title"><?=$blogInfo['blogTitle']?></h2>
            <div class="info">
                <span class="author"><?=$blogInfo['blogAuthor']?></span>
                <span class="date"><?=date('Y-m-d', $blogInfo['blogRegTime']) ?></span>
                <div class="modify">
                    <a href="#">수정</a>
                    <a href="#">삭제</a>
                </div>
            </div>
        </div>
        <!-- //blog__title -->
        <div class="blog__inner">
            <div class="left mt70">
                <div class="blog__contents">
                    <h3><?=$blogInfo['blogTitle']?></h3>
                    <?=$blogInfo['blogContents']?>
                </div>
            </div>
            <div class="right mt70">
                <div class="blog__aside">
                    
                    <?php include "../include/blogtitle.php" ?>
                    
                    <?php include "../include/blogCate.php" ?>

                    <?php include "../include/blogLatest.php" ?>

                    <?php include "../include/blogPopular.php" ?>

                    <?php include "../include/blogComment.php" ?>

                </div>
            </div>
        </div>
        <!-- //blog__inner -->
        <div class="blog__article">
            <h3>관련글</h3>
            <div class="cards__inner col4 line0">
                <?php include "../include/blogArticle.php" ?>
            </div>
        </div>
        <!-- //blog__article -->
        <div class="blog__comment">
            <h3>댓글쓰기</h3>
            <div></div>
        </div>
        <!-- //blog__comment -->
    </main>
    <!-- //main -->
        
    <?php include "../include/footer.php" ?>
    <!-- //footer -->
</body>
</html>

 

'php'의 다른글

  • 현재글블로그 사이트 만들기

관련글

댓글

티스토리툴바