Une plateforme de blogs de base où les utilisateurs peuvent publier, modifier et supprimer des articles. Construit en utilisant PHP, HTML, jQuery, AJAX, JSON, Bootstrap, CSS et MySQL.
Sujets : php, mysql, blog, ajax, bootstrap, jquery, css
Solution étape par étape
1. Structure des répertoires
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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
|
Copier après la connexion
2. Schéma de base de données
db/database.sql :
1 2 3 4 5 6 7 8 9 | 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
);
|
Copier après la connexion
3. Fichier de configuration
include/config.sample.php :
1 2 3 4 5 6 | <?php
define( 'DB_HOST' , 'localhost' );
define( 'DB_NAME' , 'blog_db' );
define( 'DB_USER' , 'root' );
define( 'DB_PASS' , '' );
?>
|
Copier après la connexion
4. Configurer la connexion à la base de données
include/db.php :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?php
include 'config.php' ;
$dsn = 'mysql:host=' .DB_HOST. ';dbname=' .DB_NAME;
$options = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
];
try {
$pdo = new PDO( $dsn , DB_USER, DB_PASS, $options );
$pdo ->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e ) {
echo 'Connection failed: ' . $e ->getMessage();
}
?>
|
Copier après la connexion
5. Structure HTML et PHP
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!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>
|
Copier après la connexion
6. Javascript et AJAX
assets/js/script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | $(document).ready( function () {
loadPosts();
$( '#postForm' ).submit( function (event) {
event.preventDefault();
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();
} else {
alert( 'Error: ' + response.message);
}
}
});
});
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);
}
});
}
});
|
Copier après la connexion
7. Scripts PHP back-end
src/get-posts.php
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?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()]);
}
?>
|
Copier après la connexion
src/post-handler.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <?php
include '../include/db.php' ;
header( 'Content-Type: application/json' );
$id = isset( $_POST [ 'id' ]) ? intval ( $_POST [ 'id' ]) : 0;
$title = $_POST [ 'title' ];
$content = $_POST [ 'content' ];
try {
if ( $id > 0) {
$stmt = $pdo ->prepare( 'UPDATE posts SET title = ?, content = ? WHERE id = ?' );
$stmt ->execute([ $title , $content , $id ]);
} else {
$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()]);
}
?>
|
Copier après la connexion
6. Style CSS
actifs/css/style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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;
}
|
Copier après la connexion
Documentation et commentaires
-
config.php : Contient la configuration de la base de données et se connecte à MySQL à l'aide de PDO.
-
index.php : Page principale avec structure HTML, comprend Bootstrap pour le style et un modal pour l'ajout/la modification de messages.
-
assets/js/script.js : Gère les requêtes AJAX pour le chargement et l'enregistrement des publications. Utilise jQuery pour la manipulation DOM et AJAX.
-
get-posts.php : Récupère les publications de la base de données et les renvoie au format JSON.
-
post-handler.php : Gère la création et la mise à jour des publications en fonction de la présence d'un identifiant.
Cette configuration fournit une plate-forme de blog de base sur laquelle les utilisateurs peuvent ajouter et modifier des articles. Vous pouvez étendre cela en ajoutant l'authentification des utilisateurs, les catégories de publications, les commentaires et bien plus encore.
Liens de connexion
Si vous avez trouvé cette série utile, pensez à donner une étoile au référentiel sur GitHub ou à partager la publication sur vos réseaux sociaux préférés ?. Votre soutien signifierait beaucoup pour moi !
Si vous souhaitez du contenu plus utile comme celui-ci, n'hésitez pas à me suivre :
Code source
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!