Tutoriel pour Créer un Réseau Social Fonctionnel

Introduction

Ce tutoriel vous guidera, pas à pas, pour créer un réseau social simple mais fonctionnel, similaire à Captions. Nous allons utiliser des technologies web de base telles que HTML, CSS, PHP, MySQL, et un peu de JavaScript pour ajouter de l'interactivité.

Prérequis

Étapes de Création

1. Configuration de l'Environnement de Développement

Téléchargez et installez XAMPP ou WAMP sur votre machine pour créer un serveur web local. Placez tous vos fichiers dans le répertoire htdocs (pour XAMPP) ou www (pour WAMP) afin de pouvoir y accéder via votre navigateur.

2. Création des Pages de Base

Les pages principales de votre réseau social sont :

Exemple de index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon Réseau Social</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Bienvenue sur Mon Réseau Social</h1>
        <nav>
            <a href="login.html">Connexion</a>
            <a href="register.html">Inscription</a>
        </nav>
    </header>
    <section>
        <h2>Rejoignez notre communauté et commencez à interagir !</h2>
        <p>Partagez vos pensées, vos photos, et connectez-vous avec des amis.</p>
    </section>
</body>
</html>

3. Création d’un Système de Connexion/Inscription avec PHP et MySQL

a. Créez une Base de Données

Créez une base de données dans phpMyAdmin avec une table users contenant les colonnes suivantes :

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    password VARCHAR(255) NOT NULL
);

b. Formulaire d’Inscription (register.html) :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Inscription</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form action="register.php" method="post">
        <h2>Inscription</h2>
        <input type="text" name="username" placeholder="Nom d'utilisateur" required>
        <input type="email" name="email" placeholder="Email" required>
        <input type="password" name="password" placeholder="Mot de passe" required>
        <button type="submit">S'inscrire</button>
        <p>Déjà un compte ? <a href="login.html">Connectez-vous ici</a>.</p>
    </form>
</body>
</html>

c. Script d’Inscription (register.php) :

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = htmlspecialchars($_POST['username']);
    $email = htmlspecialchars($_POST['email']);
    $password = password_hash($_POST['password'], PASSWORD_BCRYPT);

    $conn = new mysqli('localhost', 'root', '', 'social_network');
    
    if ($conn->connect_error) {
        die("Erreur de connexion : " . $conn->connect_error);
    }

    $stmt = $conn->prepare("INSERT INTO users (username, email, password) VALUES (?, ?, ?)");
    $stmt->bind_param("sss", $username, $email, $password);

    if ($stmt->execute()) {
        echo "Inscription réussie ! <a href='login.html'>Connectez-vous ici</a>";
    } else {
        echo "Erreur lors de l'inscription. Veuillez réessayer.";
    }

    $stmt->close();
    $conn->close();
}
?>

d. Formulaire de Connexion (login.html) :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Connexion</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form action="login.php" method="post">
        <h2>Connexion</h2>
        <input type="email" name="email" placeholder="Email" required>
        <input type="password" name="password" placeholder="Mot de passe" required>
        <button type="submit">Se connecter</button>
        <p>Pas encore de compte ? <a href="register.html">Inscrivez-vous ici</a>.</p>
    </form>
</body>
</html>

e. Script de Connexion (login.php) :

<?php
session_start();

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $email = htmlspecialchars($_POST['email']);
    $password = $_POST['password'];

    $conn = new mysqli('localhost', 'root', '', 'social_network');

    if ($conn->connect_error) {
        die("Erreur de connexion : " . $conn->connect_error);
    }

    $stmt = $conn->prepare("SELECT id, username, password FROM users WHERE email = ?");
    $stmt->bind_param("s", $email);
    $stmt->execute();
    $stmt->bind_result($id, $username, $hashed_password);
    $stmt->fetch();

    if ($username) {
        if (password_verify($password, $hashed_password)) {
            $_SESSION['username'] = $username;
            $_SESSION['user_id'] = $id;
            header("Location: profile.php");
        } else {
            echo "Mot de passe incorrect.";
        }
    } else {
        echo "Utilisateur non trouvé.";
    }

    $stmt->close();
    $conn->close();
}
?>

4. Création d’un Profil Utilisateur

Page de Profil (profile.php) :

<?php
session_start();
if(!isset($_SESSION['username'])){
    header("Location: login.html");
    exit();
}
?>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon Profil</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Bienvenue, <?php echo $_SESSION['username']; ?> !</h1>
        <nav>
            <a href="profile.php">Profil</a>
            <a href="feed.php">Mur de Discussion</a>
            <a href="logout.php">Déconnexion</a>
        </nav>
    </header>
    <section>
        <h2>Vos Informations Personnelles :</h2>
        <?php
        $conn = new mysqli('localhost', 'root', '', 'social_network');

        if ($conn->connect_error) {
            die("Erreur de connexion : " . $conn->connect_error);
        }

        $stmt = $conn->prepare("SELECT username, email FROM users WHERE id = ?");
        $stmt->bind_param("i", $_SESSION['user_id']);
        $stmt->execute();
        $stmt->bind_result($username, $email);
        $stmt->fetch();

        echo "<p><strong>Nom d'utilisateur :</strong> $username</p>";
        echo "<p><strong>Email :</strong> $email</p>";

        $stmt->close();
        $conn->close();
        ?>
    </section>
</body>
</html>

Script de Déconnexion (logout.php) :

<?php
session_start();
session_destroy();
header("Location: index.html");
exit();
?>

5. Création du Mur de Discussion (Feed)

Page du Mur de Discussion (feed.php) :

<?php
session_start();
if(!isset($_SESSION['username'])){
    header("Location: login.html");
    exit();
}
?>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mur de Discussion</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Mur de Discussion</h1>
        <nav>
            <a href="profile.php">Profil</a>
            <a href="feed.php">Mur de Discussion</a>
            <a href="logout.php">Déconnexion</a>
        </nav>
    </header>
    <section>
        <form action="post_message.php" method="post">
            <textarea name="message" placeholder="Écrivez un message..." required></textarea>
            <button type="submit">Publier</button>
        </form>

        <h2>Messages :</h2>
        <?php
        $conn = new mysqli('localhost', 'root', '', 'social_network');

        if ($conn->connect_error) {
            die("Erreur de connexion : " . $conn->connect_error);
        }

        $sql = "SELECT messages.message, messages.created_at, users.username FROM messages JOIN users ON messages.user_id = users.id ORDER BY messages.created_at DESC";
        $result = $conn->query($sql);

        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                echo "<div class='message'>";
                echo "<p><strong>" . htmlspecialchars($row['username']) . "</strong> - " . $row['created_at'] . "</p>";
                echo "<p>" . htmlspecialchars($row['message']) . "</p>";
                echo "</div>";
            }
        } else {
            echo "<p>Aucun message pour le moment.</p>";
        }

        $conn->close();
        ?>
    </section>
</body>
</html>

Script de Publication du Message (post_message.php) :

<?php
session_start();

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if(!isset($_SESSION['user_id'])){
        header("Location: login.html");
        exit();
    }

    $message = htmlspecialchars($_POST['message']);
    $user_id = $_SESSION['user_id'];

    $conn = new mysqli('localhost', 'root', '', 'social_network');

    if ($conn->connect_error) {
        die("Erreur de connexion : " . $conn->connect_error);
    }

    $stmt = $conn->prepare("INSERT INTO messages (user_id, message) VALUES (?, ?)");
    $stmt->bind_param("is", $user_id, $message);

    if ($stmt->execute()) {
        header("Location: feed.php");
    } else {
        echo "Erreur lors de la publication du message.";
    }

    $stmt->close();
    $conn->close();
}
?>

Conclusion

Avec ces étapes, vous avez un réseau social simple mais fonctionnel. Vous pouvez l'améliorer en ajoutant des fonctionnalités supplémentaires telles que des likes, des commentaires, ou encore des messages privés.