Maison > développement back-end > tutoriel php > Cours intensif PHP : Plateforme de blog simple

Cours intensif PHP : Plateforme de blog simple

WBOY
Libérer: 2024-08-05 14:54:20
original
816 Les gens l'ont consulté

PHP crash course: Simple Blog Platform

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'); // Database host

define('DB_NAME', 'blog_db'); // Database name

define('DB_USER', 'root'); // Change if necessary

define('DB_PASS', ''); // Change if necessary

?>

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';

 

// 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

}

?>

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">&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>

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() {

    // 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);

            }

        });

    }

});

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');

 

// 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()]);

}

?>

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 :

  • LinkedIn
  • GitHub

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal