Share
Il y a quelques mois, vous avez appris à créer un système de montage sur place. Aujourd’hui, nous allons encore plus loin en créant un backend simple qui permettra à notre site Web de rappelles toi les changements que nous avons apportés.
Avec tout le buzz autour du Web 2.0, la facilité d'utilisation est maintenant beaucoup plus importante que jamais. Pouvoir éditer du contenu sans avoir à aller sur une autre page est une chose dont beaucoup d’utilisateurs ont vraiment besoin. Beaucoup de grands noms utilisent déjà ce modèle à bon escient. Si vous avez utilisé Flickr, vous avez probablement déjà vu cela en action.
Aujourd'hui, nous allons améliorer la version précédente: éliminer certains bogues, ajouter des fonctionnalités et, plus important encore, sauvegarder toutes les données dans une base de données réelle pour les conserver. Intéressé? Commençons tout de suite!
Tout d'abord, nous avons besoin d'une base de données pour extraire les informations puis, le cas échéant, mettre à jour les données qu'elle contient. Pour les besoins de cet exercice, établissons un tableau avec des données aléatoires.
J'ai déjà eu une base de données nommée en place avec une table appelée Les données sur mon serveur de développement. Pour notre usage, nous ajouterons une autre table.
Je préfère généralement utiliser phpMyAdmin pour exécuter mes requêtes SQL. Cliquez sur l'onglet SQL et collez dans la requête suivante:
Accentsconagua
CREATE TABLE IF NOT PAS EXISTS 'inplace' ('champ' varchar (120) NOT NULL, le texte 'valeur' NON NULL, KEY PRIMARY ('champ')) ENGINE = MyISAM; INSERT INTO 'inplace' ('champ', 'valeur') VALEURS ('nom', 'suis' am Siddharth '), (' passion ',' aime travailler avec le Web '), (' profession ',' suis un pigiste ' ), ('travail', 'écrivez pour Net Tuts'), ('url', 'peut être trouvé sur www.ssiddharth.com'), ('' punch '', 'ne vous laissera jamais tomber ou ne vous abandonnera pas :) '), (' conception ',' Obtenir l'approbation de conception de Yusuf '), (' Facture ',' Envoyer une facture à Drew '),' 'Recherche', 'Démarrer la recherche sur le projet Pallav'), (' discutez ',' Parlez de nouvelles idées à Harnish '), (' debug ',' Vérifiez que le site d'Aditya n'a pas rendu les bugs '), (' rendez-vous ',' Rencontrez Clintson pour discuter d'un nouveau projet '); 
Si tout fonctionne comme il se doit, vous devriez obtenir l'écran suivant:
A regarder de plus près à la table:
Puisque je voulais explicitement conserver la simplicité de la démo et simplement ajouter le back-end demandé par les personnes, je simplifie énormément la structure de la table. N'hésitez pas à le modifier et à l'étendre dans vos projets.
Maintenant que la table exemple a été créée et pré-remplie avec quelques données de test, nous pouvons passer au back-end réel.
Étant donné que nous allons souvent accéder à la base de données pour lire des données ou pour mettre à jour les données qu'elle contient, il est prudent de créer un fichier de configuration contenant les données pertinentes. Créez un fichier appelé db.php et coller ce qui suit dedans.
Rien de spécial ici. Nous définissons tous les détails pertinents, nous connectons à l'hôte à l'aide de la combinaison nom d'utilisateur / mot de passe, puis sélectionnons la base de données pertinente pour la manipulation ultérieure..
L'éditeur prend en charge la lecture de la base de données et la sortie des données dans un format spécifique, ce qui nous permet de renvoyer facilement les informations pertinentes au serveur en indiquant quel enregistrement mettre à jour. Nous en reparlerons plus dans une seconde.
Le code ne change pas de manière significative du code HTML uniquement statique de la version précédente. Nous devons toutefois rendre les données dynamiques. Donc, dans le code HTML original, ceci:
est remplacé par:
'. $ row [' valeur '].''; ?>
'. $ row [' valeur '].''; ?>
Comme la table est petite, nous allons simplement sélectionner tout dans la table mais lui demander de ne renvoyer que les 6 premiers éléments. Ensuite, je viens de parcourir et d’imprimer le li éléments. Prenez note du fait que chaque li éléments obtient son identifiant attribut défini sur le nom du champ d'où il tire sa valeur. Ceci sera utilisé plus tard dans les données renvoyées au serveur pour indiquer quel enregistrement doit être mis à jour..
Je suis conscient que le fait de dévoiler le nom du champ comme celui-ci peut constituer une menace pour la sécurité, mais dans un environnement correctement sécurisé, je ne pense pas que cela suscitera des problèmes. Sinon, vous pouvez simplement utiliser des alias ici et effectuer une recherche inversée côté serveur. Laissez libre cours à votre créativité. Pour une démo très simple, il semblait plutôt exagéré.
En outre, n'oubliez pas d'inclure le db.php fichier que nous avons créé précédemment à l'éditeur. Cette ligne prendra soin de cela.
Après avoir effectué les modifications, n'oubliez pas de sauvegarder le fichier avec un fichier. .php extension.
Le gestionnaire est l'endroit où la page affiche les détails. Cela permet de vérifier si les données ont bien été envoyées à la page et, le cas échéant, de nettoyer les données envoyées, puis de mettre à jour les valeurs pertinentes..
Créer un fichier nommé handler.php et collez ce qui suit:
Une affaire assez simple. Laissez-moi vous expliquer chaque étape en détail.
Puisque nous aurons besoin de manipuler la base de données, nous incluons d’abord le db.php fichier que nous avons créé plus tôt.
Ensuite, nous vérifions si nos deux variables requises, champ- valeur qui nous dit quel champ mettre à jour et valeur - les valeurs à mettre à jour sont envoyées au gestionnaire par des variables POST. Si c'est le cas, nous pouvons procéder au travail réel. Sinon, rien ne se passe.
Une fois que nous avons vérifié que les variables ont été envoyées, nous pouvons nettoyer les données pour les insérer dans la base de données. Pour que ce soit aussi simple que possible, nous utiliserons le mysql_real_escape_string fonction pour assainir nos données. Cette fonction échappe aux caractères spéciaux présents dans la chaîne passée. S'il est passé non désinfecté, notre code est sujet aux attaques par injection SQL..
Maintenant que nous nous sommes assurés que les données sont en sécurité, nous pouvons mettre à jour l'enregistrement correspondant. Je suppose que cette partie ne nécessite aucune explication car il s’agit d’un SQL très simple. En termes simples, dans le en place table, changement des champs valeur correspondante à valeur.
Si tout se passe comme prévu, renvoyez une valeur de 1 qui sera capturé par notre script pour déterminer le résultat de la transaction afin qu’il puisse procéder en conséquence. Je détaillerai plus tard ci-dessous. Veuillez noter que dans ce cas, je signale simplement si la tentative a réussi ou échoué. Dans votre projet, vous souhaiterez peut-être renvoyer des informations beaucoup plus détaillées au cas où une erreur se produirait. Vous n'êtes pas limité à mon implémentation extrêmement simple.
Maintenant que le back-end est construit, il est temps d'éditer la partie front-end du projet pour le laisser communiquer avec le serveur. Nous verrons également comment mettre en œuvre une nouvelle fonctionnalité en cours de route..
L'une des plaintes de l'ancienne version concernait la corruption de données lorsque certaines actions étaient exécutées dans un ordre spécifique. Cela était dû à mon extrême besoin de simplicité et de concision, ce qui m'a finalement amené à négliger ce scénario spécifique. Néanmoins, nous allons corriger cela aujourd'hui.
Je suppose que vous avez l'ancien code JavaScript à proximité pour comparer et modifier.
La première version utilisait des variables globales pour conserver les données d'origine, ce qui entraînait des résultats inattendus dans certains cas. Nous allons corriger ce premier.
Le moyen le plus simple de rectifier ce problème consiste à simplement ajouter une entrée masquée à côté de l'entrée d'origine et à l'utiliser comme tampon. Comme il est créé et détruit à la volée et qu’il est spécifique à cet élément, nous pouvons éditer / sauvegarder / supprimer autant d’éléments que possible autant de fois que possible sans aucun problème..
L'ancien remplacerHTML la fonction est mise à jour pour:
function replaceHTML () var buffer = $ (this) .html () .replace (/ "/ g," ""); $ (this) .addClass ("noPad") .html ("") .html (" Enregistrer les modifications Annuler les modifications ") .unbind ('dblclick', replaceHTML); Pas un gros montage ici. Tout d'abord, nous créons une variable interne appelée tampon pour conserver la valeur d'origine. Nous purgeons ensuite le contenu HTML de l'élément parent et injectons le nôtre. En plus de l'extrait de code d'origine, nous ajoutons une zone de texte masquée qui conserve la valeur d'origine. Rien d'autre n'est changé ici.
L'itération précédente liait des fonctions similaires mais distinctes pour chacun des liens fonctionnels. Nous les unifierons ici.
fonction handler () var selector; if ($ (this) .hasClass ("btnSave")) selector = "editBox" else selector = "buffer" $ (this) .parent () .html ($ (this) .siblings ("form" ) .children ("." + sélecteur) .val ()) .removeClass ("noPad editHover") .bind ("dblclick", replaceHTML); retourne faux; Au lieu d'utiliser des fonctions anonymes comme la dernière fois, nous allons utiliser une fonction normale. Nous n'éditerons que de petites parties de la fonction pour lui permettre de gérer les demandes de sauvegarde et de suppression..
Nous déclarons d'abord une variable nommée sélecteur qui détient le sélecteur à utiliser tout en mettant à jour le li éléments. editBox est la classe assignée à la zone de texte visible et tampon est la classe assignée à la zone de texte masquée qui contient la valeur d'origine.
Puisque nous unifions les gestionnaires d’événements, nous devons vérifier quel lien a été cliqué. Nous voyons d’abord si le lien cliqué a une classe de btnSave. Si tel est le cas, l’utilisateur souhaite enregistrer les modifications et attribue la valeur de editBox au sélecteur variable. Si non, tampon est assigné.
Le reste du gestionnaire reste identique à l'ancienne version, à la différence que le sélecteur est injecté de manière dynamique en fonction de l'action au lieu d'être codé en dur dans la fonction. Si vous semblez perdu, regardez la première partie de la série pour comprendre ce que fait le dernier bloc. Essentiellement, nous injectons la valeur de la zone de texte sélectionnée dans le parent li élément et relier le gestionnaire d'événement d'origine.
N'oubliez pas de mettre à jour les gestionnaires d'événements pour chaque lien. La doublure suivante s’occupe de cela:
$ (". btnSave, .btnDiscard"). live ("clic", gestionnaire); Si vous vous demandez pourquoi j'ai utilisé le vivre fonctionner ici, s'il vous plaît se référer à l'article précédent.
Avec tous les bugs éliminés et le code généralement un peu plus serré, nous pouvons commencer à mettre en œuvre la fonctionnalité réelle..
Avant de pouvoir envoyer les données au serveur, nous devons trouver un moyen de renvoyer les informations pertinentes au serveur. Dans ce cas, nous avons besoin de 2 détails pour réussir une édition..
La première partie est assez simple car nous avons une zone de texte contenant les valeurs à envoyer au serveur. La deuxième partie a besoin d'un peu de travail.
Lors de la création de l’éditeur, rappelez-vous que nous avons utilisé l’ID principal de la table en tant que identifiant attributs à chacun li élément? Nous allons nous en servir ici. Nous allons simplement créer une autre zone de texte masquée qui contiendra la valeur qui pourra ensuite être postée sur le serveur..
function replaceHTML () var buffer = $ (this) .html () .replace (/ "/ g," ""); $ (this) .addClass ("noPad") .html ("") .html (" Enregistrer les modifications Annuler les modifications ") .unbind ('dblclick', replaceHTML); le remplacerHTML la fonction doit être mise à jour comme tel. La seule différence est l'ajout d'une zone de texte masquée avec le nom champ. Nous utilisons jQuery attr fonction pour accéder à la li Attribut ID de l'élément et l'utiliser comme valeur de la zone de texte.
Passons maintenant à l'implémentation AJAX. Nous allons utiliser le standard de jQuery ajax fonctionner ici.
function handler () // Code précédent if ($ (this) .hasClass ("btnSave")) var selector = "editBox"; var str = $ (this) .siblings ("form"). serialize (); $ .ajax (type: "POST", async: false, délai d'attente: 100, url: "handler.php", données: str, succès: fonction (msg) code = msg;,); if (code == 1) alert ("succès"); else alert ("Echec"); // Reste du code Comme nous n'avons besoin d'envoyer les données au serveur que lorsque l'utilisateur a cliqué sur le lien correspondant, nous encapsulons tout le code dans la liste. si bloquer nous avons créé plus tôt pour vérifier quel lien a été cliqué.
Je me sers du ajax fonctionne depuis que je le trouve le plus robuste. Tout d'abord, je sérialise les données contenues dans le formulaire parent afin qu'elles puissent être postées sur le serveur. Ensuite, j'appelle le ajax fonction définissant tous les détails pertinents nécessaires, y compris le type de demande à faire - POSTER et l'URL pour poster. Nous spécifions également que les données que nous avons sérialisées précédemment doivent être envoyées au serveur..
Habituellement, vous utiliseriez le système intégré Succès et Erreur rappels pour effectuer d'autres modifications, mais j'ai choisi de ne pas le faire ici. Au lieu de cela, je ne fais que capturer le texte renvoyé par le serveur. S'il renvoie 1, une valeur que nous avons configurée pour que notre gestionnaire retourne si tout s'est passé correctement, nous avertissons l'utilisateur de le lui faire savoir..
Les alertes sont un moyen assez rudimentaire de mettre à jour l'utilisateur avec le statut de l'action. Gardant cela à l’esprit, nous allons supprimer le système d’alerte et mettre en place une barre d’état en bas qui reflète ces changements..
Nous n'avons besoin de rien de spécial ici. Nous avons juste besoin d'un simple div élément que nous pouvons manipuler. Nous allons juste devoir ajouter cela directement dans l'éditeur.
Prenez note de la identifiant attribut. Nous l'utilisons plus tard.
Dans l'intérêt de la réutilisation du code, nous allons créer une fonction d'assistance qui met à jour la barre d'état au besoin..
fonction UI (état) var status = ; status.Ready = "Ready"; status.Post = "Sauvegarde de vos données. Veuillez patienter ..."; status.Success = "Succès! Vos modifications ont été enregistrées."; status.Failure = "La tentative de sauvegarde des données a échoué. Veuillez réessayer."; var background = ; background.Ready = "# E8F3FF"; background.Post = "# FAD054"; background.Success = "# B6FF6C"; background.Failure = "# FF5353"; $ ("# status"). animate (opacity: 0, 200, function () $ ("# status"). html (status [état]). css (background: background [état]). animate (opacity: 1, 200)); La fonction que nous avons nommée, UI, prend l'état de la barre d'état en tant que paramètre. Dans la fonction, nous créons deux objets: statut détient le texte pertinent et Contexte contient les couleurs de fond de la barre d'état.
Nous pourrions simplement mettre à jour directement le texte et la couleur d’arrière-plan de la barre d’état, mais chez Net Tuts, ce n’est pas comme cela que nous roulons. :)
Nous allons utiliser jQuery animer fonction pour animer gracieusement la barre d'état. Tout d'abord, nous animons son opacité à zéro. Ensuite, nous mettons à jour son texte et sa couleur d'arrière-plan, puis nous l'animons pour revenir à une visibilité totale..
Prenez note du fait que la logique utilisée pour mettre à jour les valeurs est incluse dans une fonction anonyme et transmise en tant que rappel à l'animation d'origine. De cette façon, la barre s'animera jusqu'à une opacité nulle et tout sera mis à jour. Si les animations sont chaînées, les couleurs du texte et de l'arrière-plan seront mises à jour juste après le début de l'animation initiale, ce qui produira un effet très choquant..
L'ajouter à l'interface utilisateur et mettre à jour la barre d'état est maintenant un jeu d'enfant. Au lieu des alertes que nous avons utilisées précédemment, nous devons utiliser le UI une fonction.
Le bloc précédent qui a réussi l'appel ajax peut maintenant être remplacé par:
if (code == 1) UI ("Success"); else UI ("Echec"); De plus, n'oubliez pas d'ajouter UI ("Prêt"); lorsque la page se charge afin que l'utilisateur sache que le système est prêt à être manipulé et UI ("Post"); lorsque les données sont publiées sur le serveur.
Lorsque vous ajoutez vos propres états à la barre des tâches, prenez note du fait que la chaîne que nous envoyons en tant que paramètre de la fonction correspond directement à la propriété de l'objet..
La dernière chose à considérer est le fait que si la tentative de sauvegarde des données échouait, le texte mis à jour était toujours conservé. Cela semble plutôt contre-intuitif. Si la tentative d'enregistrement des données échoue, nous devons nous assurer que le texte d'origine est replacé afin que l'utilisateur sache que les données n'ont pas été enregistrées..
Afin de rectifier cela, nous devrons changer le sélecteur variable en cas d'erreur.
if (code == 1) UI ("Success"); sélecteur = "editBox"; else UI ("Echec"); sélecteur = "tampon"; Si la valeur a été modifiée avec succès, nous changeons la valeur de la variable pertinente en editBox. Mais si la tentative aboutit à un échec, nous devons échanger la nouvelle valeur avec l'ancienne valeur. Donc nous assignons tampon à la variable de sorte que la valeur revienne à sa valeur d'origine.
Et voila. Comment ajouter une fonctionnalité conviviale à vos projets. J'espère que vous avez trouvé ce tutoriel intéressant et que cela vous a été utile. Sentez-vous libre de réutiliser ce code ailleurs dans vos projets et insérez-le ici si vous rencontrez des difficultés.
Veuillez garder à l’esprit que ce système a été conçu dans l’intention première d’enseigner les techniques associées, et non comme un système de production conçu pour s’intégrer aux systèmes existants. C’est davantage une base sur laquelle j’encourage les gens à s’appuyer et à améliorer.
Des questions? De belles choses à dire? Des reproches? Hit la section des commentaires et laissez-moi un commentaire. Bonne codage!
Saviez-vous que vous pouvez gagner jusqu'à 600 USD en écrivant un tutoriel et / ou un screencast PLUS pour nous?? Nous recherchons des didacticiels détaillés et bien écrits sur HTML, CSS, PHP et JavaScript. Si vous en avez la possibilité, veuillez contacter Jeffrey à l'adresse [email protected]..
Veuillez noter que la rémunération réelle dépendra de la qualité du didacticiel final et du screencast..
