PHP 집중 강좌: 간단한 블로그 플랫폼-PHP 튜토리얼-php.cn

PHP 집중 강좌: 간단한 블로그 플랫폼

WBOY

풀어 주다： 2024-08-05 14:54:20

원래의

780명이 탐색했습니다.

PHP crash course: Simple Blog Platform

사용자가 글을 게시, 편집, 삭제할 수 있는 기본 블로그 플랫폼입니다. PHP, HTML, jQuery, AJAX, JSON, Bootstrap, CSS 및 MySQL을 사용하여 구축되었습니다.

주제: php, mysql, 블로그, ajax, bootstrap, jquery, css

단계별 솔루션

1. 디렉토리 구조

simple-blog-platform/
│
├── config.sample.php
├── index.html
├── db/
│   └── database.sql
├── src/
│   ├── get-post.php
│   └── post-handler.php
├── include/
│   ├── config.sample.php
│   └── db.php
├── assets/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── script.js
│   └── images/
├── README.md
└── .gitignore

로그인 후 복사

2. 데이터베이스 스키마

db/database.sql:

CREATE DATABASE IF NOT EXISTS blog_db;
USE blog_db;

CREATE TABLE IF NOT EXISTS posts (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

로그인 후 복사

3. 구성 파일

include/config.sample.php:

<?php
define('DB_HOST', 'localhost'); // Database host
define('DB_NAME', 'blog_db'); // Database name
define('DB_USER', 'root'); // Change if necessary
define('DB_PASS', ''); // Change if necessary
?>

로그인 후 복사

4. 데이터베이스 연결 구성

include/db.php:

<?php
include 'config.php';

// Database configuration
$dsn = 'mysql:host='.DB_HOST.';dbname='.DB_NAME;
$options = [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
];

// Create a new PDO instance
try {
    $pdo = new PDO($dsn, DB_USER, DB_PASS, $options);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // Set error mode to exception
} catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage(); // Display error message if connection fails
}
?>

로그인 후 복사

5. HTML과 PHP 구조

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Blog</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1 class="mt-5">Simple Blog</h1>
        <div id="posts"></div>
        <button class="btn btn-primary mt-3" data-toggle="modal" data-target="#postModal">Add Post</button>
    </div>

    <!-- Modal for adding/editing posts -->
    <div class="modal fade" id="postModal" tabindex="-1" role="dialog" aria-labelledby="postModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="postModalLabel">Add Post</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="postForm">
                        <input type="hidden" id="postId">
                        <div class="form-group">
                            <label for="title">Title</label>
                            <input type="text" class="form-control" id="title" required>
                        </div>
                        <div class="form-group">
                            <label for="content">Content</label>
                            <textarea class="form-control" id="content" rows="3" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Save Post</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/script.js"></script>
</body>
</html>

로그인 후 복사

6. 자바스크립트와 AJAX

assets/js/script.js

$(document).ready(function() {
    // Load posts when the page loads
    loadPosts();

    // Handle form submission
    $('#postForm').submit(function(event) {
        event.preventDefault(); // Prevent default form submission

        var postId = $('#postId').val();
        var title = $('#title').val();
        var content = $('#content').val();

        $.ajax({
            url: 'src/post-handler.php',
            type: 'POST',
            dataType: 'json',
            data: {
                id: postId,
                title: title,
                content: content
            },
            success: function(response) {
                if (response.success) {
                    $('#postModal').modal('hide');
                    loadPosts(); // Reload posts after saving
                } else {
                    alert('Error: ' + response.message);
                }
            }
        });
    });

    // Load posts function
    function loadPosts() {
        $.ajax({
            url: 'src/get-posts.php',
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                var postsHtml = '';
                $.each(data.posts, function(index, post) {
                    postsHtml += '<div class="post"><h2>' + post.title + '</h2><p>' + post.content + '</p></div>';
                });
                $('#posts').html(postsHtml);
            }
        });
    }
});

로그인 후 복사

7. 백엔드 PHP 스크립트

src/get-posts.php

<?php
include '../include/db.php';

header('Content-Type: application/json');

try {
    $stmt = $pdo->query('SELECT * FROM posts ORDER BY created_at DESC');
    $posts = $stmt->fetchAll(PDO::FETCH_ASSOC);
    echo json_encode(['posts' => $posts]);
} catch (PDOException $e) {
    echo json_encode(['error' => $e->getMessage()]);
}
?>

로그인 후 복사

src/post-handler.php

<?php
include '../include/db.php';

header('Content-Type: application/json');

// Retrieve POST data
$id = isset($_POST['id']) ? intval($_POST['id']) : 0;
$title = $_POST['title'];
$content = $_POST['content'];

try {
    if ($id > 0) {
        // Update existing post
        $stmt = $pdo->prepare('UPDATE posts SET title = ?, content = ? WHERE id = ?');
        $stmt->execute([$title, $content, $id]);
    } else {
        // Insert new post
        $stmt = $pdo->prepare('INSERT INTO posts (title, content) VALUES (?, ?)');
        $stmt->execute([$title, $content]);
    }
    echo json_encode(['success' => true]);
} catch (PDOException $e) {
    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
}
?>

로그인 후 복사

6. CSS 스타일링

assets/css/style.css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    margin-top: 20px;
}

.post {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
}

로그인 후 복사

문서 및 설명

config.php: 데이터베이스 구성이 포함되어 있으며 PDO를 사용하여 MySQL에 연결합니다.
index.php: HTML 구조의 메인 페이지에는 스타일 지정을 위한 부트스트랩과 게시물 추가/편집을 위한 모달이 포함되어 있습니다.
assets/js/script.js: 게시물 로드 및 저장에 대한 AJAX 요청을 처리합니다. DOM 조작 및 AJAX에 jQuery를 사용합니다.
get-posts.php: 데이터베이스에서 게시물을 가져와 JSON으로 반환합니다.
post-handler.php: ID 존재 여부에 따라 게시물 생성 및 업데이트를 처리합니다.

이 설정은 사용자가 게시물을 추가하고 편집할 수 있는 기본 블로그 플랫폼을 제공합니다. 사용자 인증, 게시물 카테고리, 댓글 등을 추가하여 이를 확장할 수 있습니다.

링크 연결

이 시리즈가 도움이 되었다면 GitHub에서 저장소에 별표를 표시하거나 즐겨찾는 소셜 네트워크에서 게시물을 공유해 보세요. 여러분의 지원은 저에게 큰 의미가 될 것입니다!

이런 유용한 콘텐츠를 더 원하시면 저를 팔로우해주세요.