Share
Je suis heureux de vous présenter la première partie d'une série en deux parties sur la création d'un site photo à l'aide de PHP, jQuery et AJAX. À l’origine, j’avais l’intention d’intégrer tout le didacticiel à un seul et même screencast, mais c’est vite devenu une chimère lorsque j’ai réalisé qu’il y avait tout simplement trop à couvrir. Néanmoins, même si vous ne regardez que cette première vidéo, vous devriez apprendre beaucoup.
Nous allons récupérer des images d'une base de données, en créant un simple formulaire de connexion avec authentification, ce qui permettra ensuite à notre base de données d'être mise à jour de manière asynchrone. Ça m'a l'air bien? Si oui, allons-y.
Pour cette leçon, notre objectif est de créer une section d’administration de photos dans laquelle un administrateur peut récupérer des photos d’une base de données et mettre à jour le titre de ses photos en cliquant simplement sur le texte approprié. Pour rendre cette page plus sécurisée, nous allons également créer un système d'adhésion simple. Dans les tutoriels suivants, nous développerons ces concepts.
Ouvrez PHPMyAdmin et créez une base de données appelée "db". Dans cette base de données, nous devrons ajouter deux tables: "photos" et "utilisateurs"..
Plutôt que de coder en dur nos images dans notre document, nous les stockons dans une base de données. Bien que nous puissions rendre cette table aussi sophistiquée que nous le voudrions, nous la garderons simple pour l'instant.
Afin de modifier nos photos, nous devons créer un système d’abonnement simple qui permettra à notre utilisateur de se connecter et de modifier ses photos. Nous ne voulons évidemment pas donner à tout le monde ce droit!
Créez un nouveau document php et ajoutez ce qui suit dans votre document.
Mon site de photos
Ne vous inquiétez pas trop de ce qui se trouve ici. Nous allons tout revoir dans le temps. Mais pour vous donner un aperçu rapide, nous importons notre bibliothèque jQuery, un plugin jQuery lightbox et nos scripts personnalisés (que nous créerons bientôt). Prenez quelques secondes pour examiner le fichier CSS. Je n'en parlerai pas trop dans cet article écrit, car il est déjà assez long! Reportez-vous à la capture vidéo pour plus d'informations. Mais, je vous assure que c'est assez simple et standard.
La principale chose sur laquelle vous devez vous concentrer maintenant est:
Ce sera la section où nous récupérons nos photos de la base de données. Travaillons là-dessus maintenant. Créer une nouvelle page
appelé "getPhotos.php".
Passons rapidement en revue ce que nous devons accomplir avec ce code.
Collez le code suivant dans votre document:
query ($ query) ou die (mysqli_error ($ mysqli)); if ($ result) echo "
\ n "; echo"La première chose à faire est de créer une connexion à notre base de données. Cependant, nous le ferons plusieurs fois au cours de ce projet. Créons donc une autre page appelée "database.php" et stockons les informations là-bas. De cette façon, nous n’avons besoin que de modifier un fichier, le cas échéant. Ajoutez le code suivant dans votre fichier database.php.
Nous créons une variable appelée "$ mysqli" et la définissons dans une nouvelle instance de l'objet "MySQLi". Nous devons passer à quatre paramètres:
Pour garder les choses propres, nous allons placer ces valeurs dans des variables et les référencer. Si la connexion n'est pas établie, nous lui dirons de "mourir".
Revenons maintenant à notre fichier "getPhotos.php". L'étape suivante consiste à interroger la base de données.
$ query = "SELECT id, title, src FROM photos"; $ result = $ mysqli-> requête ($ requête) ou die (mysqli_error ($ mysqli));
Notre requête est extrêmement simple. Nous récupérons essentiellement tout de la base de données. Vous voudrez peut-être modifier ceci
requête pour s'adapter à votre propre application. Nous passons la requête en utilisant "$ mysqli-> query ($ query)".
Si cette requête a été effectuée avec succès, nous allons créer notre liste non ordonnée et ajouter nos images..
écho "
\ n "; echo"Nous créons une variable appelée $ row qui sera égale à chaque instance d'une ligne dans la base de données. Tant qu'il y a des rangées
à récupérer, cette variable contiendra les informations de cette ligne spécifique.
Nous allons stocker toutes les informations dont nous avons besoin dans des variables. Par exemple, disons que dans une ligne, nous avons les données suivantes.
En exécutant $ row-> title, nous pouvons récupérer cette valeur et la stocker dans notre variable $ title. Donc, dans ce cas, $ title = "Ma photo préférée"; $ src = "10.jpg"; $ id = 4;.
Tout ce que nous devons faire maintenant, c’est d’ajouter ces informations dans nos balises d’image et d’ancrage. La dernière ligne va ajouter un champ de saisie. Cela permettra éventuellement à l'utilisateur de mettre à jour le titre de l'image de manière asynchrone.
Si vous exécutez "index.php" dans votre navigateur, vous devriez voir ce qui suit:
Maintenant que nous avons la disposition de base de notre site, ajaxifions le! Nous allons commencer par résumer ce que nous devons faire avec notre PHP. Je trouve que cela aide beaucoup quand on travaille.
Créez un fichier PHP appelé "changePhotoTitle.php" et collez-le dans le code suivant:
?
query ($ update_query) ou die (mysqli_error ($ mysqli)); if ($ result) echo "Success!
"; echo" Le titre de cette photo a été changé en: $ title";?>
Nous avons de nouveau besoin du fichier de base de données. (Ne sommes-nous pas heureux d'avoir stocké cela dans un fichier séparé?) Ensuite, nous créons deux
variables. $ title est égal à ce que l'utilisateur entre dans ce champ de saisie. $ id est égal à son champ id respectif dans
la base de données.
Pour éviter certaines injections SQL, nous allons envelopper ces valeurs de publication avec mysql_real_escape_string ().
La mise à jour est plutôt simple. Mettez à jour le tableau des photos et remplacez le champ de titre par ce que les utilisateurs entrent dans cette zone de texte. Mais ne modifiez que le champ de titre dont l'identifiant est égal à $ id. (Référez-vous au screencast pour une meilleure compréhension.)
Si la mise à jour a été effectuée avec succès, nous enverrons un message de félicitations..
Pour effectuer la mise à jour sans publication, nous utiliserons jQuery. Créez un nouveau fichier Javascript appelé "scripts.js" et
coller dans le texte suivant:
Accentsconagua
$ (function () $ ('h4'). click (function () $ (this) .slideUp (). next ('input'). slideDown ();); $ ('ul # photos input' ) .change (function () var id = $ (this) .parent ('li'). find ('img'). attr ('id'); var thisParam = $ (this); var title = $ ( this) .val (); $ .ajax (type: 'POST', url: 'changePhotoTitle.php', données: 'titre =' + titre + '& id =' + id, succès: fonction (réponse) $ ('input'). slideUp (); $ (thisParam) .prev ('h4'). text (title) .slideDown (); $ ('# réponse'). fadeIn (1000) .empty (). append ( réponse) .prepend ('X'); $ ('span # x'). click (function () $ ('div # réponse'). fadeOut ('slow');); ); ); ); En utilisant "$ .ajax", nous appellerons la mise à jour. $ .ajax acceptera quatre paramètres.
Évidemment, nous ne voulons pas que quiconque puisse éditer les titres de ces images. Nous allons donc créer un système d'adhésion simple.
Créez une nouvelle page appelée "login.php" et ajoutez le code suivant:
Connectez-vous pour éditer des photos
Dans la balise body, nous avons un formulaire simple comportant deux champs: l’un pour le nom d’utilisateur, l’autre pour le mot de passe. Lorsque l'utilisateur clique sur le bouton "Connexion", les informations de ces zones de texte sont envoyées à "confirmLoginCredentials.php". Allez-y, créez cette page maintenant et ajoutez le texte suivant.
query ($ q) ou die (mysqli_error ($ mysqli)); if (! mysqli_num_rows ($ result)) == 1) en-tête ("Emplacement: login.php"); else setcookie ('autorisé', 1, 0); en-tête ("Location: index.php"); ?> Comme d'habitude, nous stockons les valeurs de ces zones de texte dans des variables appelées respectivement $ username et $ password. Nous récupérons encore une fois notre fichier database.php. Notre requête extrait la ligne de la base de données où le nom d'utilisateur et le mot de passe sont égaux à ce qui a été entré dans ces deux zones de texte. Une seule ligne doit être renvoyée. Si cela ne se produit pas, l'utilisateur sera redirigé vers "login.php". Sinon, nous les enverrons à la page principale "index.php" et créerons un cookie..
setcookie («autorisé», 1, 0);
Le nom de notre cookie sera "autorisé"; la valeur sera égale à 1; et la date d'expiration sera 0. 0 signifie essentiellement que lorsque l'utilisateur ferme son navigateur, ce cookie expirera.
Lorsque l'utilisateur est dirigé vers la page index.php, nous devons écrire un petit morceau de code garantissant la présence du cookie requis sur son ordinateur. Retournez dans index.php et ajoutez le code suivant tout en haut de votre document.
Si l'utilisateur a un cookie nommé "autorisé" sur son ordinateur et que ce cookie a une valeur égale à 1, alors affichez la page. Mais si ce n'est pas le cas, renvoyez-les à login.php.
La dernière étape de ce didacticiel consiste à permettre à l'utilisateur de se déconnecter. Trouvez la balise sur votre page index.php qui ressemble à ceci:
Connectez - Out
J'ajoute une paire clé-valeur à cette URL. Cette valeur sera transmise à 'login.php'. Allez sur cette page et ajoutez votre dernier bit de code tout en haut..
Si, dans la chaîne de requête, la clé de «déconnexion» est égale à 1, définissez un cookie dont la date d'expiration est antérieure à une heure. Cela supprimera le cookie de l'ordinateur de l'utilisateur..
Nous avons donc créé pas mal de choses. Malheureusement, faire tout ce que je voudrais prendrait des pages et des pages. Peut-être la semaine prochaine, la partie 2 sera publiée. Dans la partie 2, nous allons implémenter les éléments suivants:
Merci beaucoup d'avoir regardé le screencast et révisé l'article. Il y a plus à venir!
