Comment créer un site Web de babillard électronique en utilisant PHP et MYSQL : 5 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:07

Cette instructable vous montrera comment créer un site Web de babillard à l'aide de php, mysql, html et css. Si vous débutez dans le développement Web, ne vous inquiétez pas, il y aura des explications détaillées et des analogies afin que vous puissiez mieux comprendre les concepts.

Les matériaux nécessaires:

• Éditeur de texte (c'est-à-dire Sublime Text, Atom, etc.). J'utiliserai un texte sublime.
• WAMP signifie Windows Apache MySQL et PHP
• MAMP signifie Mac Apache MySQL et PHP

Utilisateurs de MAMP pour Mac: https://www.mamp.info/en/ (inclut MySQL et PHP)

WAMP pour les utilisateurs Windows: https://www.wampserver.com/en/ (inclut MySQL et PHP)

Texte sublime:

Étape 1: Présentation du projet

La façon de garder une trace des messages est de les stocker dans une base de données. Dans ce tutoriel, nous utiliserons MySQL. (J'utilise WAMP depuis que j'ai un système d'exploitation basé sur Windows)

1. Configurez PHP et MySQL en vous assurant qu'ils sont téléchargés et vous pouvez accéder à leur emplacement de fichier sur votre ordinateur.
2. Ouvrez l'invite de commande et accédez à votre répertoire mysql et tapez "mysqladmin -u root -p password". Cette commande vous demandera votre mot de passe et vous devrez le saisir à nouveau.
3. Démarrez maintenant votre serveur WAMP ou MAMP. Une icône verte apparaîtra une fois le chargement du serveur terminé. Cliquez sur l'icône -> MySQL -> Console MySQL pour vous assurer que vous pouvez vous connecter avec votre mot de passe nouvellement créé.
4. Maintenant, la tâche consiste à créer la base de données où les informations sur les messages seront stockées. Pensons à ce qui est habituellement nécessaire à partir d'un message. Éléments communs inclus: nom, l'heure à laquelle le message a été publié, l'heure à laquelle le message a été publié et le message lui-même.
5. Créez une base de données nommée "message".
6. Créez une table nommée "commentaires" et ajoutez les lignes: id (type entier qui s'incrémente automatiquement), nom (type Varchar), commentaire (type Varchar), heure (type Varchar), date (type Varchar),
7. Connectez-vous à la base de données "messages" dans un fichier php nommé "db.php".
8. Créez le champ de saisie pour le nom de l'auteur et la zone de texte du message.
9. Validez les données avant de les insérer dans la base de données. Si tout va bien, insérez le message, le nom de l'auteur, la date et l'heure de publication du message.
10. Affichez les messages en récupérant tous les enregistrements de bases de données dans un div html et stylisez la page à l'aide de CSS.
11. Horray, vous avez appris avec succès à créer un système de messagerie.

Étape 2: Étape 2 - Configurer la base de données

Image 1 - Une fois la base de données créée, vous pouvez entrer la commande « afficher les bases de données » pour vous assurer que la base de données a été créée avec succès.

AFFICHER LES BASES DE DONNÉES;

Image 2 - Afin de stocker des informations dans la base de données, une table doit être créée. La création du tableau avec les lignes essentielles est essentielle pour s'assurer que le site Web contient toutes les informations nécessaires. Les commentaires du tableau contiendront toutes les informations nécessaires.

Afin de pouvoir se connecter à la base de messages, lancez la commande "GRANT ALL PRIVILEGES ON message.*". Vous pouvez utiliser votre propre nom d'utilisateur et mot de passe, mais ne l'oubliez pas.

CREATE DATABASE message; ACCORDER TOUS LES PRIVILEGES SUR message.* TO 'username'@'localhost' IDENTIFIED BY 'password';

Image 3 - Saisissez « décrire les commentaires » pour vous assurer que la table a été créée avec succès. Vous pouvez voir les lignes et leurs types de données en exécutant cette commande.

DÉCRIRE LES COMMENTAIRES;

Image 4 - Puisque la ligne pour le commentaire n'était pas là à l'origine, ajoutons-la avec la commande ALTER TABLE. Le commentaire est de type VARCHAR(255), ce qui signifie que le commentaire sera un texte qui ne peut pas dépasser une longueur de 255 caractères.

message ALTER TABLE ADD COLUMN commentaires VARCHAR(255) NOT NULL;

Le 255 représente la longueur maximale du commentaire. Non nul signifie que lorsqu'un message est inséré dans la base de données, le champ de commentaire dans la base de données ne peut pas être vide (null; inexistant).

Étape 3: Créer des fichiers PHP

Les étapes suivantes auront lieu dans l'éditeur de texte de votre choix. J'utiliserai un texte sublime.

1. Nous devrons créer deux fichiers. L'un s'appellera db.php qui se connectera ou site Web à la base de données MYSQL (mon langage de requête standard) et index.php, la page où les messages auront lieu.

2. Tout d'abord, créons db.php. Lorsque la base de données a été configurée, les informations d'identification de connexion à la base de données. Ce fichier connectera index.php à la base de données afin que nous puissions le remplir avec les informations nécessaires à la création de la salle de discussion.

Code pour db.php

?php define("DB_SERVER", "localhost");

define("DB_USER", "kylel95"); define("DB_PASSWORD", "mot de passe"); define("DB_NAME", "message"); $connect = mysqli_connect(DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME);

if(mysqli_connect_errno())

{ die("Échec de la connexion à la base de données: ". mysqli_connect_error(). " (". mysqli_connect_errno(). ")"); }

?>

3. Ensuite, créons index.php. Ce fichier est l'endroit où nous créons la salle de discussion. Nous utiliserons le champ de saisie html pour le nom, la zone de texte pour le message et un élément div pour contenir les messages. Nous utiliserons CSS (Cascase Style Sheet) pour positionner les éléments de la page et décorer le contenu de la page.

code pour index.php

?phprequire_once('db.php');

if(isset($_POST['submit'])) { $time = date("g:i:s A"); $date = date("n/j/A"); $msg = $_POST['message']; $nom = $_POST['fname']; $résultat = ""; if(!empty($msg) && !empty($name)) { //nom heure date message $query = "INSERT INTO comments ("; $query.= " nom, heure, date, commentaire"; $query. = ") VALEURS ("; $query.= " '{$name}', '{$time}', '{$date}', '{$msg}' "; $query.= ")"; $result = mysqli_query($connect, $query); } } ?>

textarea { border-radius: 2%; } #thread { border: 1px #d3d3d3 solide; hauteur: 350px; largeur: 350px; débordement: défilement; }

?php $select = "SELECT * FROM commentaires"; $q = mysqli_query($connect, $select); while($row = mysqli_fetch_array($q, MYSQLI_ASSOC)) { echo $row['nom']. ": ". $ligne['commentaire'].""; } ?> Nom: Envoyer

4. Nous utiliserons la fonction intégrée de php date() pour obtenir la date et l'heure de publication du message et empty() pour nous assurer que les utilisateurs n'entrent pas un message ou un nom vide.

5. Une fois les données du formulaire soumises, nous insérons le nom, le message, l'heure et la date dans la base de données.

6. Nous allons maintenant interroger la base de données et obtenir tous les commentaires. Les commentaires seront stockés dans un div.

?>

Étape 4: Remplir les fichiers Db.php et Index.php

1. Le db.php (db abréviation de base de données) utilise le nom d'utilisateur et le mot de passe que j'ai utilisés une fois la base de données créée lorsque j'ai émis la commande "GRANT ALL PRIVILEGES".

La fonction define en haut du fichier indique que les variables DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME sont des constantes (elles ne changent pas de valeur). L'instruction if vérifie si la connexion à la base de données a échoué ou non.

2. Dans le fichier index.php, nous utiliserons la fonction require de php pour connecter la page à la base de données. Ensuite, créez un champ de saisie pour le nom. Créez ensuite la zone de texte pour le message. Une fois ceux-ci créés, visitez https://localhost:8080/messages/index.php (vous n'avez peut-être pas de numéro de port, par exemple 8080) pour vous assurer de voir la zone de saisie et la zone de texte.

3. Ensuite, rassemblons les données du formulaire, puis insérons-les dans la base de données.

4. Maintenant, ajoutons une requête à la base de données et affichons tous les messages dans un div.

5. Pour styliser les choses un peu mieux, ajoutons du CSS pour le rendre un peu plus joli.

PS: j'ai fait une faute de frappe. Veuillez changer 'message' pour commenter près de la commande INSERT pour la variable $query.

Étape 5: Étape 5: Exemple et étapes suivantes

J'espère que vous verrez quelque chose de similaire à ce qui est ci-dessus après avoir ajouté le css et l'avoir testé.

Prochaines étapes: ajoutez plus de css pour rendre le site plus attrayant.