Share
Pour le tutoriel Tuts + Premium de cette semaine, nous allons travailler avec différentes technologies. En fin de compte, nous allons créer une liste de tâches qui vous permettra, à vous ou à votre utilisateur, de créer, mettre à jour et supprimer des éléments de manière asynchrone. Pour ce faire, nous utiliserons les fonctionnalités AJAX de PHP et de jQuery. Je pense que vous constaterez que ce n'est pas aussi difficile que vous pourriez le penser initialement. Je vais vous montrer exactement comment!
Ce tutoriel comprend un screencast disponible pour les membres Tuts + Premium.
Comme vous pouvez l’imaginer, nous ne pouvons pas enregistrer, supprimer et mettre à jour des enregistrements dans un environnement statique. Donc, nous devons créer une base de données MySql qui stockera les informations.
Si vous utilisez PHPMyAdmin, accédez au panneau de configuration en visitant http: // localhost / phpmyadmin.
Dans la zone de texte "Créer une nouvelle base de données", tapez "db" et cliquez sur "Créer". Ensuite, vous devrez créer une table. Tapez "todo" et "3" pour "nombre de champs".
Nous allons maintenant avoir besoin d'ajouter les colonnes appropriées.
Assurez-vous que les options de chaque champ correspondent à celles affichées dans l'image suivante..
Maintenant que nous avons créé notre base de données, ajoutons rapidement quelques lignes de test. Cliquez sur votre base de données "db"; puis choisissez "Parcourir". Vous serez amené à un écran qui répertorie le contenu de chaque ligne de votre base de données. De toute évidence, cette section est vide pour le moment. Choisissez "Insérer" et ajoutez quelques colonnes. Tapez ce que vous souhaitez ici.
Bien que cela ne soit absolument pas nécessaire, je trouve qu'il est plus facile de gérer mes fonctions lorsque je les regroupe dans une classe. Compte tenu de cela, nous allons maintenant créer une classe "Db" qui contiendra plusieurs fonctions.
Ouvrez l'éditeur de code de votre choix et créez un nouveau fichier appelé "db.php". Dans ce document vierge, collez les lignes de code suivantes.
Accentsconagua
classe Db private $ mysql; function __construct () $ this-> mysql = new mysqli ('localhost', 'root', 'yourPassword', 'db') ou die ('problem'); // end class Pour créer une nouvelle classe, nous utilisons la syntaxe présentée ci-dessous..
classe 'myClass'
En utilisant uniquement le code ci-dessus, nous avons créé avec succès une nouvelle classe. Il ne fait rien pour l'instant, mais c'est quand même une classe!
La méthode __construct () (conversation de classe pour "fonction") est appelée "méthode magique". Il s'exécutera immédiatement après l'instanciation d'un cours. Nous allons utiliser cette méthode pour établir notre connexion initiale à la base de données MySql.
function __construct () $ this-> mysql = new mysqli ('localhost', 'root', 'yourPassword', 'db') ou die ('problem'); Si vous n'êtes pas familier avec la programmation orientée objet, cela peut être un peu intimidant au début. Heureusement, ce n'est pas trop difficile à comprendre. Nous voulons que notre connexion mysql soit disponible pour toutes les méthodes de notre classe. Compte tenu de cela, il ne serait pas judicieux de stocker la variable $ mysql dans une fonction spécifique. Au lieu de cela, il devrait s'agir d'une propriété de classe.
private $ mysql;
Dans une méthode, nous ne pouvons pas simplement accéder à notre propriété en tapant "$ mysql". Nous devons d'abord faire référence à l'objet.
$ this-> mysql
Assurez-vous de prendre note du fait que, lorsque vous accédez à une propriété, vous pouvez laisser le symbole du dollar.
Il est préférable d'utiliser mysql amélioré (mysqli) plutôt que la méthode traditionnelle mysql_connect lors de la connexion à une base de données. Non seulement c'est plus rapide, mais cela nous permet également d'utiliser une approche POO.
Lors de la création d'une nouvelle instance de la classe mysqli, il faut passer quatre paramètres.
Cela devrait le faire pour le moment. Nous reviendrons dans notre classe au cours de ce tutoriel pour ajouter de nouvelles méthodes. Rappelez-vous simplement, lorsque nous créons une nouvelle instance de cette classe…
nécessite 'db.php'; $ db = new Db ();
… Nous ouvrons automatiquement une connexion à notre base de données, grâce à la méthode magique __construct ().
Nous devons maintenant créer notre balisage pour la page d'accueil. Ajoutez une nouvelle page à votre solution et enregistrez-la sous "index.php". Ensuite, collez ce qui suit.
Ma liste de choses à faire Ma liste de tâches
- Faire
……
Dans l'en-tête de notre document, je fais référence au CDN de Google pour accéder à jQuery. C'est facilement la méthode préférée lors de l'utilisation de jQuery. Ensuite, je fais référence à un fichier 'scripts.js' que nous allons créer plus tard dans ce tutoriel..
Voyons rapidement à quoi sert chaque div.
Ce n'est pas un tutoriel CSS, en soi. Vous êtes libre de revoir la feuille de style que j'ai utilisée. C'est dans le paquet de téléchargement. Si vous souhaitez un examen plus approfondi, regardez le screencast.
Maintenant que nous sommes connectés à la base de données et que nous avons créé notre balisage / CSS, écrivons du code qui extraira les lignes de la base de données..
Dans le "todo" div, insérez le texte suivant.
mysql-> query ($ query); if ($ results-> num_rows) while ($ row = $ results-> fetch_object ()) $ title = $ row-> title; $ description = $ row-> description; $ id = $ row-> id; écho ''; $ data = <<'; // fin alors echo "Titre $ $ description
D EEOD; echo $ data; écho 'Il n'y a aucun article. Ajouter un maintenant!
";?>
Espérons que tout cela ait du sens. À ce stade, vous devriez avoir quelque chose comme ce qui suit:
Nous voulons également que l'utilisateur puisse insérer de nouveaux enregistrements. Créons un formulaire qui permettra cette chose même.
Ajouter une nouvelle entrée
Il s'agit de votre formulaire standard. Nous avons ajouté des entrées pour un titre et une description. Lorsque le bouton de soumission est cliqué, les informations saisies seront publiées dans "addItem.php". Créons cette page maintenant.
Créez un nouveau document et enregistrez-le sous le nom "addItem.php". Collez dans le code suivant:
mysql-> prepare ($ query)) $ stmt-> bind_param ('ss', $ _POST ['title'], $ _POST ['description']); $ stmt-> execute (); en-tête ("location: index.php"); else die ($ db-> mysql-> error); 
Grâce aux fonctionnalités AJAX de jQuery, permettons à l'utilisateur de mettre à jour chaque élément sans publication. Créez un nouveau fichier dans un dossier "js" et appelez-le "scripts.js". Rappelez-vous, nous avons déjà référencé ce fichier dans notre balisage.
$ (function () $ ('. editEntry'). click (function () var $ ceci = $ (ceci); var ancienTexte = $ ceci.parent (). parent (). trouver ('p'). text (); var id = $ this.parent (). parent (). find ('# id'). val (); $ this.parent (). parent (). find ('p'). empty ( ).ajouter(''); $ ('. newDescription'). blur (function () var newText = $ (this) .val (); $ .ajax (type: 'POST', url: 'updateEntry.php', data: 'description = '+ newText +' & id = '+ id, succès: fonction (résultats) $ this.parent (). parent (). find (' p '). empty (). append (newText);); ) retourne faux; ); ); Si vous revenez à notre balisage sur index.php, vous verrez:
D E
$ ('. editEntry'). click (function () Avec jQuery, il faut écouter lorsque la balise d'ancrage avec une classe "editEntry" est cliquée.
var $ this = $ (this);
Ensuite, nous mettons en cache $ (this) - qui fait référence à la balise d'ancrage sur laquelle l'utilisateur a cliqué.
var oldText = $ this.parent (). parent (). find ('p'). text (); Nous devons stocker la description originale. Nous demandons à la balise anchor de trouver le div parent et recherchons la balise p - qui contient le texte de description. Nous saisissons cette valeur en utilisant "text ()".
var id = $ this.parent (). parent (). find ('# id'). val (); Afin de mettre à jour la bonne ligne dans notre base de données, j'ai besoin de savoir quel est l'identifiant de cette ligne spécifique. Si vous vous référez à votre code, vous verrez un champ de saisie masqué contenant cette valeur..
Une fois encore, nous utilisons "find" pour accéder à cette entrée cachée, puis saisissons sa valeur.
$ this.parent (). parent (). find ('p'). empty (). append (''); Nous devons maintenant permettre à l'utilisateur de saisir une nouvelle description. C'est pourquoi ils ont cliqué sur "Modifier l'entrée", n'est-ce pas!? On trouve la balise description P, on la vide, puis on ajoute une textarea. Nous utilisons "empty ()" pour nous assurer de nous débarrasser de tout le texte; ce n'est plus nécessaire. La valeur de cette zone de texte sera égale à oldText - à titre de commodité.
$ ('. newDescription'). blur (function () Recherchez cette nouvelle zone de texte et, lorsque l'utilisateur quitte la zone de texte, exécutez une fonction..
var newText = $ (this) .val ();
Capturer le nouveau texte que les utilisateurs saisissent dans cette zone de texte.
$ .ajax (type: 'POST', url: 'updateEntry.php', data: 'description =' + newText + '& id =' + id, succès: function (résultats) $ this.parent (). parent () .find ('p'). empty (). append (newText);); Appelez la fonction .ajax et transmettez quelques paramètres. Le type sera "POST". L'URL à accéder est "updateEntry.php". Les données à transmettre à cette page sont le newText que l'utilisateur a entré et l'identifiant unique de cette ligne dans la base de données. Lorsque la mise à jour est effectuée avec succès, exécutez une fonction et mettez à jour l'ancien texte avec le nouveau texte.!
retourne faux;
Renvoie false pour s'assurer que cliquer sur la balise d'ancrage ne dirige pas l'utilisateur ailleurs.
N'oubliez pas que nous avons appelé notre page PHP 'updateEntry' avec jQuery, mais nous ne l'avons pas encore créée! Faisons cela maintenant. Créez une nouvelle page appelée "updateEntry.php" et collez-la dans la suite.
update_by_id ($ _ POST ['id'], $ _POST ['description']); ?>
Comme auparavant, nous référençons notre classe de base de données, puis nous l'instancions. Ensuite, nous créons une nouvelle variable, appelée $ response, et la rendons égale à tout ce qui est renvoyé par la méthode "update_by_id ()". Nous n'avons pas encore créé cette méthode. C'est le bon moment pour le faire.
Revenez à votre page db.php et ajoutez une nouvelle méthode en bas.
function update_by_id ($ id, $ description) $ query = "MISE À JOUR SET description =? WHERE id =? LIMIT 1"; if ($ stmt = $ this-> mysql-> prepare ($ query)) $ stmt-> bind_param ('si', $ description, $ id); $ stmt-> execute (); retourne 'bon travail! Mis à jour'; Cette méthode accepte deux paramètres: l'id et la description de l'élément. Donc, lorsque nous appelons cette méthode, nous devons nous rappeler de transmettre ces deux paramètres! Nous commençons par créer notre requête: mettez à jour la table "todo" et changez la description pour tout ce qui est passé - mais mettez à jour uniquement la ligne où l'id est égal au paramètre passé.
Comme la dernière fois, nous utiliserons des instructions préparées pour mettre à jour notre base de données. C'est le moyen le plus sûr! Préparez notre requête, liez les paramètres (chaîne et entier, ou 'si'), puis exécutez. Nous renvoyons une chaîne générique, mais ce n'est vraiment pas obligatoire. Maintenant notre mise à jour devrait fonctionner parfaitement!
Créons également une manière asynchrone agréable pour l'utilisateur de supprimer des entrées. Lorsqu'ils cliquent sur le bouton de suppression d'un élément, nous supprimons la division et mettons à jour la base de données pour refléter la suppression. Ouvrez votre fichier javascript et ajoutez ce qui suit:
// Supprimer la balise d'ancrage cliqué sur $ ('a.deleteEntryAnchor'). Click (function () var thisparam = $ (this); thisparam.parent (). Parent (). Find ('p'). Text ('Please Attendez… '); $ .ajax (type:' GET ', url: thisparam.attr (' href '), réussite: function (résultats) thisparam.parent (). Parent (). FadeOut (' slow ') ;) return false;); $ ('a.deleteEntryAnchor'). click (function () Lorsque la balise d'ancrage avec une classe de "deleteEntryAnchor" est cliquée, exécutez une fonction.
var thisparam = $ (this);
Cache $ (this) as thisparam.
thisparam.parent (). parent (). find ('p'). text ('Veuillez patienter…'); Changez le texte de la description en "Please Wait". Nous devons faire cela pour donner à l'utilisateur des informations en retour, juste au cas où cela prend plus de temps que prévu.
$ .ajax (type: 'GET', url: thisparam.attr ('href'), succès: function (résultats) thisparam.parent (). parent (). fadeOut ('slow');) Comme la dernière fois, nous passons quelques paramètres qui accèdent à "delete.php". Plutôt que de coder en dur la page dans la valeur de l'URL, j'accède à attr ('href') - ce qui équivaut à 'delete.php? Id = $ id'.
ré
Nous n'avons pas besoin d'un paramètre "DATA", car toutes les informations appropriées sont contenues dans la chaîne de requête de l'URL. Une fois que la suppression est effectuée avec succès, nous trouvons le parent '.item' div, et le perdons progressivement.
Nous avons appelé notre page de suppression avec jQuery, mais nous n'avons pas encore créé PHP. Créez votre nouvelle page et ajoutez le code suivant.
delete_by_id ($ _GET ['id']); en-tête ("Location: index.php"); Vous devriez être habitué à ces procédures maintenant. Créez une nouvelle instance de notre classe et appelez la méthode "delete_by_id". Une fois l'opération terminée, redirigez l'utilisateur vers "index.php". Comme vous l'avez peut-être deviné, nous devons créer une nouvelle méthode dans notre classe db. Revenez à db.php et ajoutez votre nouvelle fonction.
function delete_by_id ($ id) $ query = "SUPPRIMER de la tâche WHERE id = $ id"; $ result = $ this-> mysql-> query ($ query) ou die ("il y avait un problème, man."); if ($ result) retourne 'yay!'; Cette méthode acceptera un paramètre - l'id. Rappelez-vous que pour mettre à jour une ligne, nous devons connaître l’identifiant unique de cette ligne. Sinon, il mettra à jour chaque ligne. Nous supprimons toutes les lignes de la table, où l'id est égal à ce qui est transmis. Chaque ligne ayant son propre identifiant unique, une seule sera affectée. Ensuite, nous passons cette requête à notre objet mysql. Encore une fois, le retour est inutile; C'est juste pour s'amuser.
Nous avons terminé tout notre travail PHP! La dernière étape consiste à ajouter un peu de jQuery pour que tout fonctionne un peu mieux. En haut de votre fichier Javascript, juste après la méthode document.ready, ajoutez le code suivant:
// N'affiche pas l'onglet addNewEntry lors du chargement de la page. $ ('# addNewEntry'). css ('display', 'none'); // Nous utilisons jQuery pour créer nos onglets. Si Javascript est désactivé, ils ne fonctionneront pas. Compte tenu de // ceci, nous devrions ajouter nos onglets, afin qu'ils ne s'affichent pas s'ils sont désactivés. $ ('# tabs'). append ('J'ai assez bien commenté chaque étape. Donc, je m'abstiendrai de me répéter. Votre fichier final scripts.js devrait ressembler à ceci.
$ (function () // Ne pas afficher l'onglet addNewEntry lors du chargement de la page. $ ('# addNewEntry'). css ('display', 'none'); // Nous utilisons jQuery pour créer nos onglets Si Javascript est désactivé, ils ne fonctionneront pas. // Compte tenu de cela, nous devrions ajouter nos onglets afin qu'ils ne s'affichent pas s'ils sont désactivés. $ ('# Tabs'). Append ('Nous ne pouvons pas appeler un jour pour l'instant! Ce plaisir ole Internet Explorer 6 pose quelques problèmes de mise en page.
Bien que nous puissions aimer, nous ne pouvons pas ignorer ce navigateur pour l'instant. Heureusement, vous constaterez que la plupart des problèmes d'IE6 peuvent être résolus assez facilement. Premièrement, nous devons importer un script qui résoudra notre problème de transparence alpha. Dean Martin a un fichier Javascript fantastique qui met IE6 aux normes. En ajoutant simplement "-trans" à la fin de nos noms de fichiers au format png 24 bits, nous pourrons résoudre notre problème. Assurez-vous de visiter le dossier images et éditer les noms.
Le CDN de Google vient à la rescousse en fournissant une version hébergée du script IE7. Cela corrige notre problème de transparence, mais nous avons encore quelques bizarreries.
Notez que, dans notre déclaration conditionnelle, nous avons également importé un fichier "ie.css". Créez ce fichier maintenant et collez-le:
corps marge: 0; rembourrage: 0; #tabs height: 100%; #main height: 100%; #main div.item width: 100%; débordement caché; position: relative;
Vous constaterez que l'ajout de "position: relative", "débordement: masqué" et "hauteur: 100%" résoudra 90% des problèmes d'IE6. Maintenant, notre mise en page fonctionne parfaitement dans tous les navigateurs!
Il y avait beaucoup à couvrir ici. J'espère que je me suis expliqué suffisamment à fond. Sinon, le screencast associé est fait pour ça! Assurez-vous de l'examiner pour éliminer les zones floues. Si vous avez encore des questions, il suffit de me demander! Merci beaucoup d'avoir lu.
