Share
Dans cette leçon, nous allons créer une bibliothèque CodeIgniter qui nous permet de générer automatiquement des grilles de données pour gérer toute table de base de données. Je vais vous expliquer chaque étape nécessaire pour créer cette classe; vous apprendrez probablement de nouvelles techniques / concepts de programmation orientée objet au cours du processus!
En prime, nous allons écrire un code jQuery qui permettra à un utilisateur de mettre à jour le contenu de la grille de données sans avoir à attendre un rafraîchissement de la page..
Ce tutoriel suppose que vous avez une compréhension modeste des frameworks CodeIgniter et jQuery..
Une grille de données est une table qui affiche le contenu d'une base de données ou d'une table avec des contrôles de tri..
Une grille de données est une table qui affiche le contenu d'une base de données ou d'une table avec des contrôles de tri. Dans ce didacticiel, nous aurons pour tâche de fournir cette fonctionnalité, mais également d’empêcher l’utilisateur d’attendre que la page s’actualise chaque fois qu’une opération est effectuée. Grâce à jQuery, ce sera une tâche assez simple!
Qu'en est-il des utilisateurs pour lesquels Javascript n'est pas activé? Ne vous inquiétez pas, nous les indemniserons également!
Nous voulons créer un outil qui nous permettra de créer des datagrids de manière dynamique pour toutes les tables de base de données que nous avons. Cela signifie que le code n'est lié à aucune structure de table spécifique et qu'il est donc indépendant des données elles-mêmes. Tout le codeur (le développeur qui utilise notre classe) doit savoir est le nom de la table à transformer en une grille et la clé primaire de cette table. Voici la préface de la classe que nous allons développer pour la majeure partie de ce tutoriel:
La classe Datagrid pourrait bien être ajoutée au dossier application / library, mais nous allons l'ajouter comme aide au framework CodeIgniter. Pourquoi? Comme le chargement de bibliothèques ne nous permet pas de passer des arguments au constructeur de la classe, le charger en tant qu’assistant résoudra le problème. Ce point aura plus de sens pour vous quand nous aurons fini d’écrire le constructeur.
Accentsconagua
fonction publique __construct ($ nom_de_table, $ pk_col = 'id') $ this-> CI = & get_instance (); $ this-> CI-> load-> database (); $ this-> tbl_fields = $ this-> CI-> db-> list_fields ($ tbl_name); if (! in_array ($ pk_col, $ this-> tbl_fields)) lance une nouvelle exception ("La colonne de clé primaire '$ pk_col' ne figure pas dans la table '$ tbl_name'"); $ this-> nom_de_table = $ nom_de_table; $ this-> pk_col = $ pk_col; $ this-> CI-> load-> library ('table'); Nous avons déjà beaucoup à faire. mais ne vous inquiétez pas, je vous expliquerai tout dans le paragraphe suivant.
Le constructeur prend deux arguments: le premier est le nom de la table de votre base de données que vous souhaitez afficher en tant que grille de données pour l'utilisateur; le second paramètre est le nom de la colonne servant de clé primaire pour cette table (plus de détails sur cela plus tard). Dans le corps du constructeur, nous instancions l'objet CodeIgniter, l'objet Database et la table / bibliothèque HTML Table. Tous ces éléments seront nécessaires tout au long de la durée de vie d'un objet Datagrid et sont déjà intégrés au framework CI. Notez que nous vérifions également si la clé primaire existe vraiment dans la table donnée et, dans le cas contraire, nous lançons une exception signalant l'erreur. Maintenant le $ this-> tbl_fields la variable membre sera disponible pour une utilisation ultérieure, nous n'avons donc pas à récupérer la base de données.
"Nous pouvons utiliser la commande,
$ CI-> db-> list_fields ($ tbl_name)pour récupérer les noms de tous les champs d'une table. Cependant, pour de meilleures performances, je vous recommande de mettre en cache les résultats. "
fonction publique setHeadings (tableau $ en-têtes) $ this-> en-têtes = array_merge ($ this-> en-têtes, $ en-têtes);
Cela vous permet de personnaliser les en-têtes de votre tableau de grille de données. En d'autres termes, vous pouvez écraser les noms de colonne d'origine pour certains champs de tableau. Il faut un associatif tableau, comme ceci: regdate => "Date d'enregistrement". Au lieu du simple "Regdate" technique comme en-tête de colonne pour ce type de données, nous avons à la place un titre plus lisible par l'homme. Le code responsable de l’application des rubriques sera révélé prochainement.
fonction publique ignoreFields (array $ fields) foreach (les champs $ as $ f) if ($ f! = $ this-> pk_col) $ this-> hide_cols [] = $ f;
ignorer les champs reçoit un tableau contenant les champs à ignorer lors de l'extraction des données de la base de données. Ceci est utile lorsque nous avons des tables avec beaucoup de champs, mais nous voulons seulement en cacher quelques-unes. Cette méthode est suffisamment intelligente pour suivre une tentative d'ignorer le champ de clé primaire, puis l'ignorer. En effet, la clé primaire ne peux pas être ignoré pour des raisons techniques (vous verrez pourquoi sous peu). Toutefois, si vous souhaitez masquer la colonne de clé primaire de l’interface utilisateur, vous pouvez utiliser le hidePkCol méthode:
fonction publique hidePkCol ($ bool) $ this-> hide_pk_col = (bool) $ bool;
Cette méthode reçoit une valeur booléenne indiquant si nous souhaitons masquer la colonne de clé primaire afin qu'elle n'apparaisse pas dans la grille de données. Parfois, c’est une vilaine idée d’afficher le pkey données, qui est généralement un code numérique sans signification pour l'utilisateur.
Méthode d'instance suivante:
fonction privée _selectFields () foreach ($ this-> tbl_fields as $ field) if (! in_array ($ field, $ this-> hide_cols)) $ this-> CI-> db-> select ($ champ); // cache l'en-tête de colonne pk? if ($ field == $ this-> pk_col && $ this-> hide_pk_col) continue; $ headings [] = isset ($ this-> headings [$ field])? $ this-> rubriques [$ field]: ucfirst ($ field); if (! empty ($ headings)) // ajoute une case à cocher pour le basculement de array_unshift ($ headings, ""); $ this-> CI-> table-> set_heading ($ en-têtes);
Ici nous avons une méthode d'assistance; c'est pourquoi il a le modificateur "privé" et est préfixé par un caractère de soulignement (convention de code). Il sera utilisé par le produire() méthode - expliquée brièvement - pour que les champs de table appropriés soient sélectionnés et que les en-têtes appropriés soient définis dans la table (générateur) objet. Notez la ligne suivante:
$ headings [] = isset ($ this-> headings [$ field])? $ this-> rubriques [$ field]: ucfirst ($ field);
C’est là que nous appliquons les en-têtes personnalisés ou que nous utilisons les en-têtes par défaut si aucun n’est donné. Si la pk La colonne est censée être masquée, alors son en-tête sera sauté. Notez également la ligne suivante:
array_unshift ($ en-têtes, "");
La commande ci-dessus indique au programme d’ajouter une case à cocher "Maître" comme premier en-tête de la table. Cette case à cocher est différente des autres cases à cocher de la grille car elle permet à un utilisateur de cocher ou de décocher toutes les cases en une seule fois. Cette fonctionnalité de basculement sera implémentée dans quelques instants avec un simple extrait de code jQuery.
Maintenant vient la chose qui fait le vrai travail pour nous:
fonction publique generate () $ this -> _ selectFields (); $ rows = $ this-> CI-> db -> de ($ this-> nom_de_table) -> get () -> result_array (); foreach ($ row as & $ row) $ id = $ row [$ this-> pk_col]; // ajoute une case à cocher pour permettre la sélection des éléments / lignes array_unshift ($ row, ""); // masquer la cellule de la colonne pk? if ($ this-> hide_pk_col) unset ($ row [$ this-> pk_col]); return $ this-> CI-> table-> générer ($ rangées) ;
le produire Cette méthode, comme son nom l'indique, est chargée de générer la grille de données elle-même. Vous ne devez appeler cette méthode qu'après avoir configuré l'objet en fonction de vos besoins. La première chose qu’il fait est d’appeler le $ this -> _ selectFields () méthode pour effectuer les actions que nous avons expliquées précédemment. Il doit maintenant extraire toutes les lignes de la base de données puis les parcourir en ajoutant des cases à cocher au début de chaque ligne:
// ajoute une case à cocher pour permettre la sélection des éléments / lignes array_unshift ($ row, "");
À l'intérieur de pour chaque boucle sur le produire méthode, si le $ this-> hide_pk_col le drapeau est réglé sur vrai, alors nous devons annuler la saisie de la clé primaire dans le tableau $ row donc il ne sera pas affiché sous forme de colonne lorsque le $ this-> CI-> table objet traite toutes les lignes et génère la sortie HTML finale. À ce stade, vous pouvez supprimer la clé primaire, si nécessaire, car nous n’avons plus besoin de cette information. UNE
Mais que fait l'utilisateur avec les lignes sélectionnées / cochées? Pour répondre à cela, j'ai préparé quelques méthodes supplémentaires. Le premier nous permet de créer des "boutons d’action" sans avoir à connaître de détails techniques sur le fonctionnement interne du système de grille:
Fonction statique publique createButton ($ action_name, $ label) return "";
Passez simplement le nom de l'action en tant que premier argument et un second argument pour indiquer le libellé du bouton généré. UNE classe Cet attribut est automatiquement généré pour ce bouton afin que nous puissions le manipuler plus facilement lorsque nous le travaillons en JavaScript. Mais comment savoir si un certain bouton d'action a été enfoncé par l'utilisateur? La réponse peut être trouvée dans la méthode suivante:
Fonction statique publique getPostAction () // récupère le nom de l'action soumise (le cas échéant) if (isset ($ _ POST ['dg_action'])) clé de retour ($ _ POST ['dg_action']);
Oui! Une autre méthode statique qui nous aide lorsque nous traitons des formulaires. Si une grille de données a été soumise, cette méthode renverra le nom de l'action (ou "opération") associée à cet événement de soumission. En outre, un autre outil pratique pour traiter nos formulaires de grille de données est?
fonction statique publique getPostItems () if (! empty ($ _ POST ['dg_item'])) return $ _POST ['dg_item']; return array ();
? qui retourne un tableau contenant la sélection identifiants afin que vous puissiez suivre quelles lignes ont été sélectionnées sur la grille et ensuite effectuer une action avec eux. Comme exemple de ce qui peut être fait avec une sélection de rangée identifiants, j'ai préparé une autre méthode - celle-ci étant une méthode d'instance, et non pas une méthode statique, car elle utilise les ressources d'instance de l'objet pour mener ses activités à bien:
fonction publique deletePostSelection () // supprime les éléments sélectionnés de la base de données if (! empty ($ _ POST ['dg_item'])) renvoie $ this-> CI-> db -> de ($ this-> nom_de_table) -> where_in ($ this-> pk_col, $ _ POST ['dg_item']) -> delete ();
Si au moins une case a été cochée, le deletePostSelection () La méthode générera et exécutera une instruction SQL comme suit (supposons que $ tbl_name = 'ma_table' et $ pk_col = 'id'):
SUPPRIMER DE my_table WHERE id (1,5,7,3, etc.?)
? qui supprimera efficacement les lignes sélectionnées de la couche persistante. Vous pouvez ajouter d'autres opérations à une grille de données, mais cela dépendra des spécificités de votre projet. Comme astuce, vous pouvez étendre cette classe à, disons, InboxDatagrid, donc, au-delà de la deletePostSelection méthode, elle pourrait inclure des opérations supplémentaires, telles que moveSelectedMessagesTo ($ place), etc?
Maintenant, si vous avez suivi pas à pas ce didacticiel, vous devriez obtenir quelque chose de similaire au suivant:
class Datagrid private $ hide_pk_col = true; private $ hide_cols = array (); private $ tbl_name = "; private $ pk_col ="; private $ entêtes = array (); private $ tbl_fields = array (); function __construct ($ nom_de_table, $ pk_col = 'id') $ this-> CI = & get_instance (); $ this-> CI-> load-> database (); $ this-> tbl_fields = $ this-> CI-> db-> list_fields ($ tbl_name); if (! in_array ($ pk_col, $ this-> tbl_fields)) lance une nouvelle exception ("La colonne de clé primaire '$ pk_col' ne figure pas dans la table '$ tbl_name'"); $ this-> nom_de_table = $ nom_de_table; $ this-> pk_col = $ pk_col; $ this-> CI-> load-> library ('table'); fonction publique setHeadings (tableau $ en-têtes) $ this-> en-têtes = array_merge ($ this-> en-têtes, $ en-têtes); fonction publique hidePkCol ($ bool) $ this-> hide_pk_col = (bool) $ bool; fonction publique ignoreFields (array $ fields) foreach (les champs $ as $ f) if ($ f! = $ this-> pk_col) $ this-> hide_cols [] = $ f; fonction privée _selectFields () foreach ($ this-> tbl_fields as $ field) if (! in_array ($ field, $ this-> hide_cols)) $ this-> CI-> db-> select ($ champ ) // cache l'en-tête de colonne pk? if ($ field == $ this-> pk_col && $ this-> hide_pk_col) continue; $ headings [] = isset ($ this-> headings [$ field])? $ this-> rubriques [$ field]: ucfirst ($ field); if (! empty ($ headings)) // ajoute une case à cocher pour le basculement de array_unshift ($ headings, ""); $ this-> CI-> table-> set_heading ($ headings); fonction publique generate () $ this -> _ selectFields (); $ rows = $ this-> CI-> db -> à partir de ( $ this-> nom_table) -> get () -> result_array (); foreach ($ row as & $ row) $ id = $ row [$ this-> pk_col]; // ajoute une case à cocher pour permettre la sélection d'éléments array_unshift ($ row, ""); // masquer la colonne pk? if ($ this-> hide_pk_col) unset ($ row [$ this-> pk_col]); return $ this-> CI-> table-> générer ($ rangées); fonction statique publique createButton ($ action_name, $ label) return ""; public static function getPostAction () // récupère le nom de l'action soumise (le cas échéant) if (isset ($ _ POST ['dg_action'])) clé de retour ($ _ POST ['dg_action']); public fonction statique getPostItems () if (! empty ($ _ POST ['dg_item'])) return $ _POST ['dg_item']; return array (); fonction publique deletePostSelection () // supprime les éléments sélectionnés de la db if (! empty ($ _ POST ['dg_item'])) renvoie $ this-> CI-> db -> à partir de ($ this-> nom_table) -> où_in ($ this-> pk_col, $ _ POST ['dg_item' ]) -> delete (); Avis: N'oubliez pas de sauvegarder ce fichier sous datagrid_helper.php, et le placer dans "application / helper /"
Nous allons maintenant créer un contrôleur de test simple et charger la classe Datagrid en tant qu’aide dans son constructeur. Mais avant cela, nous devrions définir une table de base factice et la renseigner avec des exemples de données..
Exécutez le code SQL suivant pour créer la base de données et la table utilisateur:
CREATE DATABASE 'dg_test'; CREATE TABLE 'users' ('id' int (11) NOT NULL AUTO_INCREMENT, 'nom d'utilisateur' varchar (80) NOT NULL, 'mot de passe' varchar (32) NOT NULL, 'email' varchar (255) NON NULL, CLE UNIQUE ' id '(' id ')) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 5; Ensuite, ajoutons quelques utilisateurs:
INSERT INTO 'utilisateurs' ('id', 'nom d'utilisateur', 'mot de passe', 'email') VALEURS (1, 'david', '12345', '[email protected]'), (2, 'maria', '464y3y', '[email protected]'), (3, 'alejandro', 'a42352fawet', '[email protected]'), (4, 'emma', 'f22a3455b2','[email protected] '); Maintenant, enregistrez le code suivant sous "test.php,"et ajoutez-le au dossier" application / controllers ":
load-> helper (array ('datagrid', 'url')); $ this-> Datagrid = new Datagrid ('utilisateurs', 'id'); function index () $ this-> load-> helper ('form'); $ this-> load-> library ('session'); $ this-> Datagrid-> hidePkCol (true); $ this-> Datagrid-> setHeadings (array ('email' => 'E-mail')); $ this-> Datagrid-> ignoreFields (array ('password')); if ($ error = $ this-> session-> flashdata ('form_error')) echo "$ error"; echo form_open ('test / proc'); echo $ this-> Datagrid-> generate (); echo Datagrid :: createButton ('delete', 'Delete'); echo form_close (); function proc ($ request_type = ") $ this-> load-> helper ('url'); if ($ action = Datagrid :: getPostAction ()) $ error = ""; switch ($ action) case 'delete': if (! $ this-> Datagrid-> deletePostSelection ()) $ error = 'Les éléments n'ont pas pu être supprimés'; Pause; if ($ request_type! = 'ajax') $ this-> charger-> bibliothèque ('session'); $ this-> session-> set_flashdata ('formulaire_erreur', $ erreur); redirect ('test / index'); else echo json_encode (array ('error' => $ error)); else die ("Requête incorrecte"); ?> Une instance de cette classe est créée et passée en tant que référence à la $ this-> Datagrid membre. Notez que nous allons récupérer les données d'une table appelée "utilisateurs" dont la clé primaire est la colonne "id"; ensuite, sur la méthode d'index, nous suivons les étapes suivantes: configurez l'objet Datagrid, restituez-le dans un formulaire auquel un bouton de suppression a été ajouté et voyez si tout fonctionne comme prévu:
Réponse: Le "Test :: proc ()"méthode prend en charge le traitement du formulaire et le choix de la bonne opération à appliquer contre le identifiants qui ont été sélectionnés par l'expéditeur du formulaire. Il prend également en charge les requêtes AJAX, de sorte qu'il renvoie un objet JSON au client. Cette fonctionnalité prenant en charge AJAX sera utile lorsque jQuery entrera en action, ce qui est le cas actuellement.!
"C’est toujours une bonne idée de créer des applications Web qui compensent l’absence de JavaScript / AJAX. Ainsi, certains utilisateurs bénéficieront d’une expérience plus riche et plus rapide, tandis que ceux qui ne sont pas compatibles avec JavaScript pourront toujours utiliser l’application normalement."
Lorsque l'utilisateur clique sur le bouton (ou sur tout autre bouton d'action), nous voudrions peut-être empêcher la page de se recharger et de devoir tout générer à nouveau; cela pourrait rendre l'utilisateur de notre application endormi! Contourner ce problème ne sera pas une tâche difficile si nous nous en tenons à la bibliothèque jQuery. Comme il ne s'agit pas d'un tutoriel "pour débutants", je ne passerai pas en revue tous les détails liés à la manière d'obtenir la bibliothèque, de l'inclure dans la page, etc. Vous êtes censé connaître ces étapes vous-même..
Créez un dossier nommé "js", ajoutez la bibliothèque jQuery à l'intérieur et créez un fichier de vue, nommé utilisateurs.php. Ouvrez ce nouveau fichier et ajoutez:
Gestion des utilisateurs Datagrid-> hidePkCol (true); if ($ error = $ this-> session-> flashdata ('form_error')) echo "$ error"; echo form_open ('test / proc', array ('class' => 'dg_form')); echo $ this-> Datagrid-> generate (); echo Datagrid :: createButton ('delete', 'Delete' echo form_close ();?>
Saviez-vous que nous avons déplacé le code de Test :: index et dans le nouveau script de vue? Cela signifie que nous devons changer le Test :: index () méthode en conséquence:
fonction index () $ this-> load-> helper ('form'); $ this-> load-> library ('session'); $ this-> load-> view ('utilisateurs'); C'est mieux. Si vous souhaitez ajouter du style à la grille, vous pouvez utiliser le CSS suivant (ou créer vous-même une meilleure mise en page):
.dg_form table border: 1px silver solid; .dg_form th background-color: gray; famille de polices: "Courier New", Courier, mono; taille de police: 12px; .dg_form td background-color: gainsboro; taille de police: 12px; .dg_form input [type = submit] margin-top: 2px;
Créez maintenant un fichier "datagrid.js", placez-le dans le répertoire "js" et commencez par le code suivant:
$ (function () // des trucs sympas ici?)
Dans cette fermeture, nous allons écrire du code qui sera chargé de contrôler certains événements de soumission une fois la page complètement chargée. La première chose à faire est de suivre lorsqu'un utilisateur clique sur un bouton d'envoi du formulaire de grille de données, puis d'envoyer ces données à traiter sur le serveur..
$ ('. dg_form: submit'). click (fonction (e) e.preventDefault (); var $ form = $ (this) .parents ('form'); var nom_action = $ (this) .attr (' class '). replace ("dg_action_", ""); var action_control = $ (''); $ form.append (action_control); var post_data = $ form.serialize (); action_control.remove (); var script = $ form.attr ('action') + '/ ajax'; $ .post (script, post_data, function (resp) if (resp.error) alert (resp.error); else switch (nom_action) case 'delete': // supprime les lignes supprimées de la grille $ form .find ('. dg_check_item: vérifié'). parents ('tr'). remove (); break; case 'anotherAction': // fait autre chose? break;, 'json')) Alternativement, nous aurions pu commencer avec quelque chose comme: $ ('.dg_form'). submit (fonction (e) ?). Cependant, comme je veux savoir quel bouton a été enfoncé et extraire le nom de l'action choisie en fonction, je préfère lier un gestionnaire d'événements au bouton d'envoi lui-même, puis remonter dans la hiérarchie des nœuds pour trouver le formulaire le bouton enfoncé appartient à:
// trouve la forme var $ form = $ (this) .parents ('form'); // extrait le nom de l'action var nom_action = $ (this) .attr ('classe'). replace ("dg_action_", ""); Ensuite, nous ajoutons un élément d'entrée masqué à l'intérieur de l'élément de formulaire pour indiquer quelle action est en train d'être envoyée:
// crée l'entrée cachée var action_control = $ (''); // ajouter au formulaire $ form.append (action_control); Cela est nécessaire car la fonction ne considère pas le bouton d'envoi comme une entrée de formulaire valide. Donc, nous devons avoir ce hack en place lors de la sérialisation des données de formulaire.
action_control.remove ();
"N'oubliez pas: la fonction ignore le bouton d'envoi, le considérant comme un autre élément indésirable du balisage!"
Ensuite, nous procédons pour obtenir le action attribuer à partir de l'élément de formulaire et ajouter la chaîne "/ ajax"à cette URL, donc la méthode saura qu’il s’agit bien d’une requête AJAX. Ensuite, nous utilisons le jQuery.post fonction pour envoyer les données à traiter par le contrôleur approprié, côté serveur, puis intercepter l'événement de réponse avec un rappel / une fermeture enregistré:
? var script = $ form.attr ('action') + '/ ajax'; $ .post (script, post_data, function (resp) if (resp.error) alert (resp.error); else switch (nom_action) case 'delete': // supprime les lignes supprimées de la grille $ form .find ('. dg_check_item: vérifié'). parents ('tr'). remove (); break; case 'anotherAction': // fait autre chose? break;, 'json') Notez que nous demandons que la réponse soit codée en "json" puisque nous transmettons cette chaîne en tant que quatrième argument de $ .post une fonction. Le contenu du rappel traitant de la réponse du serveur devrait être assez simple à comprendre; il détermine s'il y a une erreur et, le cas échéant, l'alerte. Sinon, cela indiquera que l'action a été traitée avec succès (dans ce cas, s'il s'agit d'une action "", nous supprimons les lignes liées à la identifiants qui ont été sélectionnés par l'utilisateur).
La seule chose qui manque maintenant est la fonctionnalité de bascule que j'ai promis plus tôt. Nous devons enregistrer une fonction de rappel lorsque la case à cocher "Maître" - qui a un attribut de classe défini sur "dg_check_toggler"- est cliqué. Ajoutez l'extrait de code suivant après le précédent:
$ ('. dg_check_toggler'). click (function () var cases à cocher = $ (this) .parents ('table'). find ('. dg_check_item'); if ($ (this) .is (': vérifié' )) checkboxes.attr ('vérifié', 'vrai'); sinon checkboxes.removeAttr ('vérifié'); Lorsque la case à cocher "toggler" est cochée, si elle passe à un état "vérifié", toutes les lignes de la grille de données correspondante seront cochées simultanément; sinon tout sera décoché.
Nous n'avons pas encore atteint le sommet de l'iceberg en ce qui concerne les grilles de données pour les systèmes de gestion de contenu plus complexes. Les autres fonctionnalités qui pourraient s'avérer utiles sont:
Merci d'avoir lu. Si vous souhaitez un tutoriel de suivi, faites le moi savoir dans les commentaires!
