Créer une shoutbox basique avec PHP et SQL

Dans ce tutoriel, nous allons créer un système de base 'Shoutbox' avec PHP. Destiné aux débutants en développement PHP, il vous permet de travailler avec des bases de données avant de passer à certains des didacticiels PHP les plus avancés, disponibles ici à NETTUTS..




introduction

Ce tutoriel vous guidera tout au long du processus de création d'une "shoutbox" de base en PHP, en utilisant une base de données MySQL pour stocker les cris, puis en le faisant bien paraître avec du CSS. Le didacticiel est destiné aux concepteurs qui ont confiance en HTML et CSS, mais qui souhaitent s’essayer au développement avec PHP..

Après le tutoriel, vous devriez avoir une bonne compréhension des bases de l’utilisation de PHP pour communiquer avec une base de données afin d’envoyer, demander et recevoir des informations. Nous allons également inclure l'utilisation de Gravatars dans notre Shoutbox, en ajoutant ce petit punch supplémentaire!

Pour ceux qui ne l'ont pas encore fait, je vous recommande de lire notre série PHP From Scratch afin de comprendre exactement ce qu'est PHP et de jeter un coup d'œil à la syntaxe de base et à l'utilisation des variables..

Les fichiers sources sont également commentés pour ceux qui préfèrent apprendre de cette façon.

Étape 1 - Mise en route

Base de données

Avant de commencer, vous devez déjà avoir configuré la base de données sur votre serveur Web. Assurez-vous de disposer des informations suivantes:

  • Nom d'hôte (par exemple. localhost)
  • Nom de la base de données
  • Nom d'utilisateur pour la base de données
  • Mot de passe

Dans la base de données, vous devrez créer une table nommée des cris avec cinq champs:

  • identifiant
  • prénom
  • email
  • poster
  • adresse IP

Pour créer cela, exécutez le code SQL suivant. Vous allez normalement l'exécuter depuis l'onglet SQL de phpMyAdmin.

 CREATE TABLE 'shouts' ('id' INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, 'nom' VARCHAR (45) NOT NULL, 'email' VARCHAR (60) NOT NULL, 'post' TEXT NOT NULL, 'ipaddress' VARCHAR (45) NOT NULL, PRIMARY KEY ('id'));

Vous devriez recevoir un message "Votre requête SQL a été exécutée avec succès"

Les fichiers

Nous aurons besoin de trois fichiers créés pour ce projet:

  • index.php
  • style.css
  • db.php

Vous aurez également besoin d'un dossier avec nos images requises. Prenez ceci à partir des fichiers source.

Détails de connexion à la base de données

le db.php Ce fichier sera utilisé pour stocker les détails de notre base de données. Ouvrez-le et insérez le code suivant:

 

Étape 2 - Interaction

Commencez votre index.php fichier avec le code suivant, il commence simplement notre document et place quelques sections pour styler plus tard.

     Shoutbox pour NETTUTS par Dan Harper    

Shoutbox

Dan Harper: NETTUTS

Établir une connexion

Avant de pouvoir faire quoi que ce soit avec une base de données, nous devons nous y connecter. Insérez ce qui suit après le code précédent. C'est expliqué ci-dessous.

 Impossible de se connecter au serveur de base de données pour le moment.

'); mysql_select_db ($ database, $ connect) ou die ('

Impossible de se connecter à la base de données pour le moment.

');

Les deux premières lignes utilisent une fonction PHP intégrée pour obtenir le nom de ce fichier, et l'autre ligne pour obtenir l'adresse IP des visiteurs. Nous utiliserons les deux variables plus tard dans le tutoriel.

Nous incluons ensuite notre db.php fichier afin que nous puissions récupérer les détails de la base de données que vous avez renseignés. Vous pouvez également tout coller du fichier db.php ici, mais il est recommandé de séparer les détails..

$ connect stocke une fonction pour utiliser les détails de notre base de données afin d'établir une connexion avec le serveur de base de données. S'il ne parvient pas à se connecter, il affichera un message d'erreur et arrêtera le chargement de la page avec die ().

Enfin, nous nous connectons à notre base de données.

Quelque chose a été soumis?

La prochaine chose que nous ferons est de vérifier si quelqu'un a soumis un cri en utilisant le formulaire (que nous inclurons bientôt). Nous vérifions les documents POST pour voir si quelque chose a été soumis à partir d'un formulaire.

 if (isset ($ _ POST ['send'])) if (vide ($ _ POST ['nom']) || vide ($ _ POST ['email']) || vide ($ _ POST ['post']) )  écho('

Vous n'avez pas rempli un champ obligatoire.

'); autre

Nous commençons par notre if () qui vérifie notre POST pour voir si un élément nommé "envoyer" a été soumis. Si c'est le cas, nous utilisons la fonction empty () pour nous assurer que les champs 'nom', 'email' et 'post' ont été renseignés. Sinon, nous affichons une erreur..

Sinon, on continue:

 $ name = htmlspecialchars (mysql_real_escape_string ($ _ POST ['name'])); $ email = htmlspecialchars (mysql_real_escape_string ($ _ POST ['email'])); $ post = htmlspecialchars (mysql_real_escape_string ($ _ POST ['post'])); $ sql = "INSERT INTO crie SET name =" $ name ", email =" $ email ", post =" $ post ", ipaddress =" $ ipaddress ";"; if (@mysql_query ($ sql)) echo ('

Merci d'avoir crié!

'); else echo ('

Une erreur inattendue s'est produite lors de l'envoi de votre cri.

');

Sur les trois premières lignes, nous passons chacun de nos champs (nom, email et courrier) à travers le htmlspecialchars () et mysql_real_escape_string () fonctions et les placer dans leurs propres variables.

htmlspecialchars () est une fonction conçue pour empêcher les utilisateurs de soumettre du code HTML. Si nous ne le faisions pas, quelqu'un pourrait insérer du code HTML dans notre base de données, qui serait ensuite exécuté par d'autres utilisateurs. Cela est particulièrement grave si quelqu'un soumettait du code javascript permettant de transférer les visiteurs sur un site Web malveillant.!

mysql_real_escape_string () est une fonction similaire. Sauf que celui-ci empêche l'utilisateur de soumettre toute sorte de code SQL au serveur. Si nous ne le faisions pas, quelqu'un pourrait exécuter du code pour voler, éditer ou effacer notre base de données!

En utilisant nos nouveaux détails, nous créons une requête SQL pour insérer le cri soumis dans la base de données. Dans les balises if (), nous exécutons la requête SQL. Si la requête a été exécutée avec succès et que le cri a été ajouté à la base de données, nous affichons un "Merci pour le cri!" message; sinon nous affichons une erreur.

Récupérer les cris

Nous allons maintenant récupérer les 8 derniers cris de notre base de données pour les afficher à l'utilisateur.

 $ query = "SELECT * FROM" crie "ORDER BY" id "DESC LIMIT 8;"; $ result = @mysql_query ("$ query") ou die ('

Une erreur inattendue s'est produite lors de la récupération des cris de la base de données..

'); ?>

    Sur la première ligne, nous créons une nouvelle requête SQL pour "Récupérer tous les champs de la table 'cris', les ordonner par ordre décroissant selon 'ID'; mais ne nous donnez que le dernier 8".

    Sur la deuxième ligne, nous exécutons la requête et la stockons dans $ result. Nous maintenant:

     while ($ row = mysql_fetch_array ($ result)) $ ename = stripslashes ($ row ['nom']); $ eemail = stripslashes ($ row ['email']); $ epost = stripslashes ($ row ['post']); $ grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=".md5(strtolower($eemail))."&size=70"; écho('
  • Gravatar

    '. $ ename.'

    '. $ postel.'

  • '); ?>

La première ligne indique "S'il reste des lignes (résultats) dans $ result, affichez-les comme suit:".

striplashes () supprime les barres obliques mysql_real_escape_string () peut avoir inséré dans les soumissions.

$ grav_url crée notre Gravatar à partir de l'adresse email de chaque utilisateur.

Nous émettons ensuite (écho) chaque cri d'une manière spécifique. Afficher fondamentalement Gravatar, Nom et Shout dans une liste que nous pourrons facilement styliser plus tard.

La forme

La dernière étape de cette page consiste à inclure au bas de la page un formulaire permettant aux utilisateurs de soumettre des publications via.

 

Crier!

Notez que nous référons à la variable $ self pour indiquer au formulaire où envoyer ses résultats; et nous envoyons également via la méthode POST. En dessous du formulaire, nous fermons les balises HTML que nous avons ouvertes..

Coiffant

Essaye le! Vous avez terminé tout le code PHP, et vous devriez pouvoir ajouter un nouveau cri et voir les 8 derniers.

Cependant, il y a un problème. Il a l'air moche! Nous allons trier cela avec un peu de CSS :) Comme ce n'est pas un tutoriel CSS, je ne reviendrai pas sur le style, mais tout est assez basique.

 * marge: 0; rembourrage: 0;  body background: # 323f66 top url ("images / back.png") no-repeat; couleur: #ffffff; famille de polices: Helvetica, Arial, Verdana, sans-serif;  h1 font-size: 3.5em; espacement des lettres: -1px; background: url ("images / shoutbox.png") no-repeat; largeur: 303px; marge: 0 auto; retrait du texte: -9999em; couleur: # 33ccff;  h2 font-size: 2em; espacement des lettres: -1px; background: url ("images / shout.png") non répétée; largeur: 119px; retrait du texte: -9999em; couleur: # 33ccff; clarifier les deux; marge: 15px 0;  h5 a: lien, h5 a: visité color: #ffffff; texte-décoration: aucun;  h5 a: survol, h5 a: actif, h5 a: focus border-bottom: 1px solide #fff;  p taille de la police: 0.9em; hauteur de ligne: 1.3em; font-family: Lucida Sans Unicode, Helvetica, Arial, Verdana, sans serif;  p.error background-color: # 603131; bordure: 1px solide # 5c2d2d; largeur: 260px; rembourrage: 10px; marge inférieure: 15 px;  p.success background-color: # 313d60; bordure: 1px solide # 2d395c; largeur: 260px; rembourrage: 10px; marge inférieure: 15 px;  #container width: 664px; marge: auto 20px; text-align: center;  #boxtop margin: 30px auto 0px; background: url ("images / top.png") no-repeat; largeur: 663px; hauteur: 23px;  #boxbot margin: 0px auto 30px; background: url ("images / bot.png") non répétée; largeur: 664px; hauteur: 25px;  #content margin: 0 auto; largeur: 664px; text-align: left; background: url ("images / bg.png") repeat-y; rembourrage: 15px 35px;  #content ul margin-left: 0; marge inférieure: 15 px;  #content ul li list-style: none; clarifier les deux; rembourrage en haut: 30px;  #content ul li: premier-enfant padding-top: 0;  .meta width: 85px; text-align: left; float: gauche; hauteur min .: 110px; poids de police: gras;  .meta img padding: 5px; couleur de fond: # 313d60;  .meta p font-size: 0.8em;  .shout width: 500px; float: gauche; marge gauche: 15px; hauteur min .: 110px; rembourrage en haut: 5px;  form clear: les deux; margin-top: 135px! important;  .fname, .femail width: 222px; float: gauche;  forme p font-weight: bold; marge inférieure: 3px;  form textarea width: 365px; débordement caché; / * supprime la barre de défilement verticale dans IE * / entrée de formulaire, formulaire textarea background-color: # 313d60; bordure: 1px solide # 2d395c; couleur: #ffffff; rembourrage: 5px; font-family: Lucida Sans Unicode, Helvetica, Arial, Verdana, sans serif; marge inférieure: 10px; 

Conclusion

Donc là vous l'avez! Une superbe Shoutbox entièrement fonctionnelle! Vous vous êtes peut-être demandé ce que le point de créer une Shoutbox est, et bien, vous avez raison, il ne sert à rien. Mais cela vous aide à acquérir une compréhension de base essentielle sur l'utilisation de PHP pour travailler avec une base de données, vous permettant ainsi de passer à des guides beaucoup plus avancés, ici, chez NETTUTS..

.