一個基本的部落格平台，使用者可以在其中發布、編輯和刪除文章。使用 PHP、HTML、jQuery、AJAX、JSON、Bootstrap、CSS 和 MySQL 建置。
主題：php、mysql、部落格、ajax、bootstrap、jquery、css
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
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
);
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
?>
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
}
?>
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">×</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>
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);
}
});
}
});
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()]);
}
?>
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;
}
此設定提供了一個基本的部落格平台，用戶可以在其中新增和編輯貼文。您可以透過新增使用者身份驗證、貼文類別、評論等來擴展此功能。
連結連結
如果您發現本系列有幫助，請考慮在 GitHub 上給 存儲庫 一個星號或在您最喜歡的社交網絡上分享該帖子？ 。您的支持對我來說意義重大！
如果您想要更多類似的有用內容，請隨時關注我：
原始碼
以上是PHP 速成課程：簡單的部落格平台的詳細內容。更多資訊請關注PHP中文網其他相關文章！
