Accentsconagua

Construire le back-end d'un site photo

Code
Share

Pour ceux d'entre vous qui ont suivi les derniers screencasts, vous devez avoir remarqué que chaque tutoriel a été centré autour d'un thème "site photo". (Voir Numérisation de dossiers avec PHP, Création dynamique de vignettes et Création d'un site photo-administrateur à l'aide de PHP et de jQuery. Aujourd'hui, nous allons créer le backend d'un site photo. Ce tutoriel vous apprendra comment ajouter, supprimer et mettre à jour les photos.


Notre mission

  • Créer une base de données qui stockera nos images.
  • Créer une page d'accueil qui récupère toutes les photos stockées dans notre base de données.
  • Autoriser l'utilisateur à télécharger des photos.
  • Rédigez une validation pour vous assurer que l'utilisateur entre une description correcte et choisit une image
  • Utilisez jQuery pour permettre à l'utilisateur de mettre à jour et de supprimer des photos de manière asynchrone.

Il y a simplement trop à couvrir en tant que tutoriel écrit. J'ai inclus quelques points clés. Référez-vous au screencast pour le tutoriel complet.

La structure de la base de données

Obtenir les photos de la base de données 

 fonction getPhotos () require 'database.php'; $ q = "SELECT id, tn_src DE photo ORDER BY id desc"; $ result = $ mysqli-> requête ($ q) ou die ($ mysqli_error ($ mysqli)); if ($ result) while ($ row = $ result-> fetch_object ()) $ tn_src = $ row-> tn_src; $ src = $ row-> src; $ id = $ row-> id; impression '
  •   images  
    • '; print "\ n";

    Télécharger des photos

    Validation du formulaire

     if (strlen ($ _ POST ['description'])) < 4) $error['description'] = '
    S'il vous plaît entrer une description pour votre photo. 
    '; if ($ filename == "||! preg_match ('/ [.] (jpg) | (gif) | (png) | (jpeg) $ /', $ filename)) $ error ['no_file'] = '
    S'il vous plaît sélectionner une image, mannequin! 
    ';

    Mettre à jour la description de la photo de manière asynchrone

     $ ('# description'). click (function () var originalelement = this; var currentText = $ (this) .text (); $ (this) .fadeOut (100) .before (''); $ ('# input'). livequery ('change', function () var id = ; var thisparam = this; var newText = $ (this) .val (); if (newText == ") newText = 'Veuillez saisir une description'; $ .ajax (type: 'post', url: 'updatePhoto.php', data: 'id =' + id + '& description =' + newText, success: function () $ (thisparam) .remove (); $ (originalelement) .text (newText) .fadeIn (1000););););););

    UpdatePhoto.PHP

     require 'database.php'; $ id = $ _POST ['id']; $ d = ajoute des barres obliques ($ _ POST ['description']); if ($ d == ") $ d = 'Cliquez ici pour entrer une description.'; $ q =" UPDATE photo SET description = "$ d" WHERE id = $ id "; $ result = $ mysqli-> query ( $ q) or die ('Un problème est survenu lors de la mise à jour de cette information.'); if ($ result) echo "Votre photo a été mise à jour avec succès.";

    Supprimer une photo 

     $ (function () $ ('img'). click (function () var id = $ (this) .attr ('id'); var thisparam = $ (this); $ .ajax (type: ' post ', url:' delete.php ', données:' id = '+ id, succès: function () $ (thisparam) .parent (' li '). fadeOut (' slow '); $ (' # # result ') .remove (); var response ='
    Succès. L'image a maintenant été supprimée! 
    '; response + = 'Retour à la page d'accueil
    '; $ ('body'). append (réponse); ); ); )

    Supprimer.PHP 

     require 'database.php'; $ id = $ _POST ['id']; $ q = "SUPPRIMER de la photo WHERE id = $ id"; $ result = $ mysqli-> query ($ q) ou die ("Il y avait un problème!"); if ($ result) header ("location: index.php");

    Achèvement

    Alors ça le fait. Vous pourriez implémenter un peu plus de sécurité dans cette application. Mais l’idée est que ces pages seraient déjà sécurisées en utilisant quelque chose de similaire à un fichier ht-access. A partir de là, le ciel est la limite. Vous devriez envisager d'ajouter des balises à vos images, de créer des albums, etc. Cela devrait vous aider à démarrer..

    Code
    ×