phpmaster | Manipulation HTML côté serveur à l'aide de phpQuery

Dans nos tâches quotidiennes de développement Web, il nous est nécessaire de travailler avec le code côté client et serveur. Nous écrivons la logique métier à l'aide de PHP et générons le HTML à afficher dans les navigateurs des utilisateurs. Ensuite, nous utilisons des cadres tels que jQuery ou Prototype pour fournir une interactivité côté client. Réfléchissez maintenant à la façon dont vous pouvez changer et manipuler le HTML généré à l'aide du code PHP côté serveur. PhpQuery est la solution ultime qui vous vient à l'esprit. Si vous n'avez pas entendu parler de PHPQuery, vous pouvez être intéressé par cet article car je vais vous donner une brève introduction à PHPQuery et expliquer comment vous pouvez l'utiliser dans des projets du monde réel.

Les plats clés

• phpQuery est une API d'objet de document de sélecteur CSS3 côté serveur (DOM) basé sur la bibliothèque JavaScript JQuery. Il simplifie les tâches nécessitant une manipulation DOM, offrant des fonctionnalités similaires à jQuery et éliminant le besoin d'une génération de code HTML en désordre en utilisant des instructions d'écho et des méthodes similaires.
• La fonctionnalité de PHPQuery comprend la création d'éléments DOM, la sélection et la manipulation des éléments, l'itération du DOM et l'impression de la sortie vers le navigateur. Il fournit également des fonctionnalités telles que les sélecteurs, les attributs, la traversée, la manipulation, l'Ajax, les événements et les services publics.
• phpQuery permet aux développeurs de changer et de manipuler le HTML généré à l'aide du code PHP côté serveur. Cela peut améliorer les performances et la sécurité des applications Web, car les tâches traditionnellement effectuées sur le côté client peuvent désormais être gérées à côté du serveur.
• phpQuery offre une meilleure qualité de code et extensibilité par rapport au code PHP pur. Il permet à l'ouverture du code mais fermé pour la modification, adhérant au principe ouvert. Cela signifie que de nouvelles fonctionnalités peuvent être ajoutées sans modifier le code existant, améliorant la robustesse et la maintenabilité du code.

Qu'est-ce que PhpQuery

PHPQuery est une API d'objet de document (DOM) côté serveur, chaintable, basé sur la bibliothèque JavaScript javascript JQuery.

Ceci est la définition donnée sur la page officielle du projet PHPQuery. Si vous avez utilisé jQuery, vous aurez une idée de la façon dont cela peut simplifier de nombreuses tâches nécessitant une manipulation DOM. PHPQuery fournit exactement les mêmes fonctionnalités à utiliser dans votre code PHP côté serveur. Vous pouvez dire au revoir à la génération de code HTML désordonnée en utilisant des instructions d'écho et des méthodes similaires. Vous aurez accès à la plupart des fonctionnalités fournies par jQuery dans PHPQuery, qui peuvent être largement divisées en 4 tâches mentionnées ci-dessous:

• Création d'éléments DOM
• Sélection et manipulation des éléments
• itérer à travers le dom
• Impression de la sortie du navigateur

Vous pouvez exécuter les tâches en utilisant les fonctionnalités fournies par PHPQuery qui est connue sous le nom de «sections JQuery portées». Voyons d'abord les fonctionnalités:

• Sélecteurs - Trouvez des éléments en fonction de l'état donné.
• Attributs - Travaillez avec les attributs des éléments DOM.
• Traversing - Voyage à travers la liste des éléments sélectionnés.
• Manipulation - Ajouter et supprimer le contenu sur les éléments sélectionnés.
• ajax - Créer des demandes AJAX côté serveur.
• Événements - lier les événements DOM sur les éléments sélectionnés.
• Utilitaires - fonctions génériques pour prendre en charge d'autres fonctionnalités.

Vous pouvez télécharger la bibliothèque PhpQuery à partir de la page du projet à code.google.com/p/phpquery. Copiez le dossier sur votre serveur Web et vous êtes prêt à partir. L'installation est simple comme cela, et vous pouvez exécuter le fichier Demo.php pour commencer.

comment utiliser phpQuery

Je vais vous montrer comment créer une liste non ordonnée à deux colonnes avec des en-têtes et différentes couleurs de ligne pour les lignes étranges et même, comme indiqué dans l'image ci-dessous:

Tout d'abord, créons un document HTML à l'aide de phpQuery:

<span><span><?php
</span></span><span><span>require("phpQuery/phpQuery.php");
</span></span><span><span>$doc = phpQuery<span>::</span>newDocument("<div/>");</span></span>

Le code ci-dessus créera un document HTML de base avec une balise DIV. La bibliothèque fournit diverses méthodes de création de documents; J'ai utilisé le plus simple, mais vous pouvez en trouver d'autres dans Demo.php et la documentation. Nous devons maintenant créer une liste non ordonnée et l'ajouter à notre document HTML.

<span><span><?php
</span></span><span><span>...
</span></span><span><span>$doc["div"]->append("<ul><li>Product Name</li><li>Price</li></ul>");
</span></span><span><span>$products = array(
</span></span><span>    <span>array("Product 1","<span><span></span>"</span>),
</span></span><span>    <span>array("Product 2","<span><span></span>"</span>),
</span></span><span>    <span>array("Product 3","<span><span></span>"</span>));
</span></span><span>
</span><span><span>foreach($products as $key=>$product) {
</span></span><span>    <span>$doc["div ul"]->append("<li><span><span>$product[0]</span></li><li><span>$product[1]</span></li>"</span>);
</span></span><span><span>}
</span></span><span><span>print $doc;</span></span>

Vous pouvez voir que nous avons la liste non ordonnée maintenant. Mais tous les éléments sont dans une seule colonne, qui est la valeur par défaut. Nous devons déplacer les éléments pair de la liste dans une deuxième colonne.

<span><span><?php
</span></span><span><span>...
</span></span><span><span>$doc["div ul"]->attr("style", "width:420px;");
</span></span><span><span>$doc["div ul"]->find("li:even")->attr("style","width:200px; float:left; padding:5px; list-style:none;");
</span></span><span><span>$doc["div ul"]->find("li:odd")->attr("style","width:200px; float:left; padding:5px; list-style:none;");</span></span>

J'utilise l'attribut de style pour définir les styles CSS requis pour notre exemple ici, mais il n'est pas recommandé d'utiliser les styles en ligne à moins qu'il ne soit vraiment nécessaire. Utilisez toujours des cours CSS pour ajouter des styles. Maintenant, mettons en surbrillance l'en-tête et même les lignes numérotées à l'aide de méthodes PHPQuery.

<span><span><?php
</span></span><span><span>...
</span></span><span><span>$doc["div ul"]->find("li:nth-child(4n)")->attr("style","background:#EEE; width:200px; float:left; padding:5px; list-style:none;");
</span></span><span><span>$doc["div ul"]->find("li:nth-child(4n-1)")->attr("style","background:#EEE; width:200px; float:left; padding:5px; list-style:none;");
</span></span><span><span>$doc["div ul"]->find("li:lt(1)")->attr("style","background:#CFCFCF; width:200px; float:left; padding:5px; list-style:none;");</span></span>

Nous avons terminé notre exemple simple, et vous devriez maintenant avoir une idée de la façon dont PhpQuery peut être utilisé pour simplifier le côté du serveur HTML Generation. Tout ce que nous avons fait est presque le même que celui qui serait fait avec jQuery, sauf que nous avons fait toutes les actions contre l'objet $ doc.

Importance de phpQuery

Même si j'ai expliqué la fonctionnalité de PHPQuery, vous devez vous demander pourquoi nous avons besoin de la bibliothèque lorsque nous avons jQuery sur le côté client. Je vais montrer l'importance de PhpQuery en utilisant un scénario pratique. Considérez la situation suivante: Supposons que nous ayons une table comme ce qui suit, qui contient toutes les informations sur les développeurs Web qui sont allés à une entrevue.

Voici maintenant la liste des exigences que nous devons développer dans ce scénario:

• Les candidats qui ont obtenu une marque de plus de 60 pour l'examen devraient être mis en évidence en bleu.
• Les candidats ayant plus de 3 ans d'expérience de travail doivent avoir un lien en front étiqueté «Postuler pour l'ingénieur logiciel senior» et d'autres candidats doivent avoir le lien «Postuler pour l'ingénieur logiciel».
• L'entreprise a une structure de salaire basée sur l'expérience:
  • 1 an - 5 000 $
  • 2 ans - 10 000 $
  • 3 ans - 20 000 $
  • plus de 3 ans - 50 000 $
  La colonne de salaire doit être mise en évidence en vert pour les candidats qui correspondent aux critères.

C'est à quoi devrait ressembler la sortie:

Un développeur peut fournir la solution suivante pour répondre aux exigences en utilisant du code PHP pur.

<span><span><?php
</span></span><span><span>require("phpQuery/phpQuery.php");
</span></span><span><span>$doc = phpQuery<span>::</span>newDocument("<div/>");</span></span>

Maintenant, faisons-le à l'aide de phpQuery et comparez le code et les avantages.

<span><span><?php
</span></span><span><span>...
</span></span><span><span>$doc["div"]->append("<ul><li>Product Name</li><li>Price</li></ul>");
</span></span><span><span>$products = array(
</span></span><span>    <span>array("Product 1","<span><span></span>"</span>),
</span></span><span>    <span>array("Product 2","<span><span></span>"</span>),
</span></span><span>    <span>array("Product 3","<span><span></span>"</span>));
</span></span><span>
</span><span><span>foreach($products as $key=>$product) {
</span></span><span>    <span>$doc["div ul"]->append("<li><span><span>$product[0]</span></li><li><span>$product[1]</span></li>"</span>);
</span></span><span><span>}
</span></span><span><span>print $doc;</span></span>

PHPQuery est facile si vous avez déjà la connaissance de travailler avec jQuery. La plupart des code ci-dessus seront explicites. Je tiens à mentionner cependant que PQ () fait référence au document actuel. Tous les autres sont des fonctions jQuery. Et même si les deux semblent similaires, le code qui utilise PHPQuery offre une meilleure qualité et extensibilité. Pensez à quel point le code d'origine peut être fragile si vous devez ajouter des fonctionnalités supplémentaires plus tard. Supposons que nous voulons ajouter une validation supplémentaire sur les marques en fonction de l'expérience de travail. Dans ce scénario, vous devez ajouter une autre méthode et attribuer le résultat renvoyé dans la boucle foreach. Cela signifie que vous devez changer de code déjà écrit, violant le principe ouvert:

Les entités logicielles (classes, modules, fonctions, etc.) doivent être ouvertes pour l'extension, mais fermées pour la modification.

Avec le deuxième exemple qui utilise PHPQuery, le code est d'abord généré sans aucune validation, puis nous passons le tableau dans chaque fonction et les modifications sont placées dans la table d'origine. Chaque fonction n'affecte pas les autres fonctions, nous pouvons donc écrire une nouvelle fonction pour les nouvelles exigences et l'utiliser en dehors de la boucle avec les autres fonctions. Nous ne modifions pas le code déjà existant, ce qui sonne bien, non? C'est ce qu'on appelle la décoration:

Le motif du décorateur est un motif de conception qui permet à un comportement d'être ajouté à un objet existant dynamiquement.

Résumé

Nous avons commencé ce tutoriel en introduisant les fonctionnalités de PHPQuery et son importance. Après avoir appris à utiliser PHPQuery en utilisant un exemple simple, nous avons passé à un exemple pratique où il est devenu beaucoup plus important pour améliorer la qualité du code. PHPQuery nous a fourni une nouvelle perspective pour travailler avec HTML à côté du serveur, et j'espère que vous utiliserez PHPQuery de différentes manières et partagerez vos expériences personnelles dans les commentaires ci-dessous.

Des questions fréquemment posées sur la manipulation HTML côté serveur à l'aide de phpQuery

Qu'est-ce que PHPQuery et pourquoi est-il important pour la manipulation HTML côté serveur?

PHPQuery est une API d'objet de document (DOM) côté serveur, chaintable, CSS3, basé sur la bibliothèque javascript jQuery. Il est écrit en PHP5 et fournit un moyen facile de gérer les éléments HTML du côté du serveur. Il permet aux développeurs d'effectuer des tâches telles que la traversée de documents HTML et la manipulation, la manipulation des événements et l'animation, qui ont été traditionnellement effectuées du côté client. Cela peut améliorer considérablement les performances et la sécurité des applications Web.

Comment PHPQuery se compare-t-il aux autres bibliothèques de manipulation DOM?

PHPQuery se distingue par sa simplicité et sa facilité d'utilisation, en particulier pour les développeurs déjà familiers avec jQuery. Il prend en charge la majeure partie de la syntaxe jQuery, ce qui facilite la sélection, la manipulation et la traversée des éléments HTML. Contrairement à certaines autres bibliothèques, PHPQuery est chaînable, ce qui signifie que vous pouvez relier plusieurs actions dans une seule instruction.

Comment installer PHPQuery?

PHPQuery peut être installé à l'aide de Composer, un outil de gestion de la dépendance pour PHP. Vous pouvez ajouter PHPQuery à votre projet en exécutant le compositeur de commande exiger phpQuery / phpQuery. Cela téléchargera et installera la dernière version stable de PHPQuery et de ses dépendances.

Comment sélectionner les éléments à l'aide de PhpQuery?

PHPQuery utilise des sélecteurs CSS3 pour sélectionner des éléments, similaires à jQuery. Par exemple, pour sélectionner tous les paragraphes d'un document, vous utiliseriez $ doc ['p']. Vous pouvez également utiliser des sélecteurs plus complexes, tels que $ doc ['div.content> p'] pour sélectionner tous les paragraphes qui sont des enfants directs d'une div avec la classe «Contenu».

Comment manipuler les éléments à l'aide de phpQuery?

PhpQuery fournit plusieurs méthodes pour manipuler des éléments. Par exemple, vous pouvez utiliser les méthodes APPEND (), prend (), après () et avant () pour insérer du contenu. Vous pouvez également utiliser la méthode att () pour obtenir ou définir la valeur d'un attribut, et les méthodes addClass (), removeclass () et toggleClass () pour manipuler les classes.

Comment gérer les événements à l'aide de la méthode phpQuery?

phpQuery prend en charge la gestion des événements via la méthode bind (). Vous pouvez utiliser cette méthode pour attacher des gestionnaires d'événements sur des éléments. Par exemple, $ doc ['p'] -> bind ('click', function () {echo 'paragraphe cliquait!';}); Echo "paragraphe serait cliqué!" Chaque fois qu'un paragraphe est cliqué.

Puis-je utiliser phpQuery avec ajax?

Oui, PHPQuery prend en charge Ajax via la méthode AJAX (). Cette méthode vous permet d'envoyer des demandes HTTP asynchrones au serveur et de manipuler la réponse à l'aide de phpQuery.

Comment effectuer des animations à l'aide de phpQuery?

PHPQuery prend en charge les animations via la méthode Animate (). Cette méthode vous permet de créer des animations personnalisées en modifiant les propriétés CSS au fil du temps.

Comment puis-je traverser le DOM à l'aide de phpQuery?

PhpQuery fournit plusieurs méthodes pour traverser le DOM, telles que les enfants (), parent (), next (), prev (), find (), et le plus proche (). Ces méthodes vous permettent de naviguer dans les éléments dans un document.

Puis-je utiliser PHPQuery avec d'autres bibliothèques PHP?

Oui, PHPQuery peut être utilisé aux côtés d'autres bibliothèques PHP. Il est conçu pour être flexible et interopérable, ce qui en fait un excellent outil pour la boîte à outils de tout développeur PHP.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!