La transformation du XML et du XSLT profite énormément à la conception Web. Avec les transformations XML et XSLT, vous pouvez stocker du verbiage dynamique et du contenu de sites Web dans une base de données. Vous pouvez transférer la base de données au format XML puis la convertir en script HTML via la transformation XSLT.
Au début du développement du réseau, la cohésion était obtenue côté serveur, mais cela impliquait beaucoup de travail manuel de gestion de fichiers. Heureusement, à mesure que le Web évolue, les outils de développement Web évoluent également. Par exemple, sous le framework .NET, vous pouvez créer divers contrôles Web pour unifier la conception.
Lors de la conception des fonctions d'interaction utilisateur/données, comment garantir l'intégrité des données, la fonctionnalité de l'interface utilisateur et la perfection des règles métier. Cet article fournira un exemple de site Web et expliquera comment XML et XSLT peuvent rendre la conception de votre site Web transparente.
Ce qui suit est un fragment de citation :
<html> <head> </head> <body> <form method="POST" name="thisForm" id="thisForm" action="somepage.php"> <input type="text" name="txtText" id="txtText" size="25"><br> <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"> </form> </body> </html>
L'extrait de code ci-dessus complète la fonction principale, mais XML et XSLT sont également nécessaires pour l'embellir.
En XML, le code a des balises d'ouverture et de fermeture, mais en HTML il n'y en a pas. Les balises INPUT et BR sont des cas particuliers, elles ne nécessitent pas de balise de fin. Cependant, l'ajout d'une barre oblique avant la balise de fermeture ">" garantit que le code HTML est conforme à la spécification XML. Si vous faites attention à suivre ces spécifications lors de l'écriture de scripts HTML, vous pouvez convertir XML/HTML (alias XHTML) en de bonnes pages HTML.
Ce qui suit est un fragment de citation :
<form method="POST" name="thisForm" id="thisForm" action="somepage.php"> <input type="text" name="txtText" id="txtText" size="25" transform="blueText"/> <br/> <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" transform="bigButton"/> </form> 运行下列代码,完成XSLT转换: <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" > <xsl:output method="html"/> <xsl:template match="/"> <table width="100%" cellpadding="0" cellspacing="0"> <tr><td align="center">This is the defined header</td></tr> <tr><td><xsl:apply-templates select="//form"/></td></tr> <tr><td align="center">This is the defined footer</td></tr> </table> </xsl:template> <xsl:template match="form"> <xsl:element name="form"> <xsl:attribute name="method"><xsl:value-of select="@method"/></xsl:attribute> <xsl:attribute name="action"><xsl:value-of select="@action"/></xsl:attribute> <xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute> <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute> <xsl:apply-templates select="*"/> </xsl:element> </xsl:template><xsl:template match="*"> <xsl:choose> <xsl:when test="@transform='blueText'"><xsl:element name="input"> <xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute> <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute> <xsl:attribute name="type">text</xsl:attribute> <xsl:attribute name="style">color:blue</xsl:attribute> <xsl:if test="@value"><xsl:attribute name="value"><xsl:value-of select="@value"/></xsl:attribute></xsl:if> </xsl:element> </xsl:when> <xsl:when test="@transform='redText'"><xsl:element name="input"> <xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute> <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute> <xsl:attribute name="type">text</xsl:attribute> <xsl:attribute name="style">color:red</xsl:attribute> <xsl:if test="@value"><xsl:attribute name="value"><xsl:value-of select="@value"/></xsl:attribute></xsl:if> </xsl:element> </xsl:when> <xsl:when test="@transform='bigButton'"><xsl:element name="input"> <xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute> <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute> <xsl:attribute name="style">height:30px;width:100px;font- size:18pt;font-weight:700;</xsl:attribute> <xsl:attribute name="value"><xsl:value-of select="@value"/></xsl:attribute> </xsl:element> </xsl:when> </xsl:choose> </xsl:template> </xsl:stylesheet>
Le code ci-dessus ne peut pas créer un espace de noms, définir des balises XML, confirmer une DTD ou un schéma pour vous. Il vous permet de créer des scripts HTML fonctionnels qui peuvent être transformés en de nouvelles pages complètes sans vous soucier des considérations de conception.
Dans la feuille de style, utilisez l'attribut de conversion de la balise HTML pour piloter l'opération de conversion. J'ai envisagé d'utiliser un formulaire FORM comme unité pour définir les contrôles utilisateur requis pour les opérations de conversion, car tous les contrôles pour la saisie utilisateur doivent être dans un FORMULAIRE. Dans cet exemple, la sortie est un texte INPUT, la couleur du texte est bleue ; un bouton de 20 pixels de haut et 100 pixels de large, avec une police en gras de 18 points. Nous pouvons changer la couleur du texte dans la zone de texte en modifiant la propriété transform.
Il existe de nombreuses façons d'ajouter du contenu statique à une page Web. Dans cet exemple, nous utilisons uniquement la méthode la plus simple, qui consiste à ajouter un en-tête et un pied de page à la feuille de style.
Désormais, lorsque vous souhaitez créer un nouveau formulaire pour la saisie de l'utilisateur, tout ce que vous avez à faire est de créer un formulaire standard. Une fois que les formulaires généraux réussissent le test, ces formulaires peuvent être ajoutés à la transformation pour générer la sortie HTML du thème. Tout ce que vous avez à faire est de mémoriser le type de contrôle d'entrée et de vous assurer de l'ajouter en tant que propriété de conversion.
Ce qui précède est le contenu de la combinaison de XML et XSLT pour intégrer la conception du site Web. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !