Exemples

Citation

Améliorer la vitesse de votre site avec une bonne configuration Apache

Ce petit extrait des exemples n'est en rien lié à Vae Soli! mais nous avons trouvé utile de le renseigner ici pour documentation.

Utilisation des entêtes d'expiration

Règle #1 : activation des entêtes d'expiration !

Rendre un site web rapide dépend pour beaucoup de la gestion du cache des navigateurs. La technique présentée ici vise donc à faire en sorte qu'un maximum de fichiers soient cachés par le navigateur du client ce qui évitera ainsi une requête visant à obtenir lesdits fichiers.

Par exemple, il est utile de mettre en cache les fichiers dont vous savez qu'ils n'évoluent pas souvent (voire jamais) : des fichiers javascripts, des fichiers image, des feuilles de style, des documents, des fichiers audio, etc.

Nous conseillons donc de mettre les directives suivantes dans le fichier de configuration httpd.conf d'Apache :

<FilesMatch "\.(?i:ico|gif|bmp|png|jpe?g|js|css|swf|wmv|wav|mov|webm|ogg|mp3|mp4|pptx?|xlsx?|docx?|pdf|zip)$">
    ExpiresActive On
    ExpiresDefault "access plus 5 years"
</FilesMatch>

Ceci aura pour effet d'ajouter un header HTTP d'expiration pour toutes les ressources (fichiers) dont les extensions sont indiquées dans la directive (nous avons inclus une liste assez standard d'extensions qui dénotent des ressources statiques; il vous appartient de compléter cette liste avec les autres types de fichier que vous utilisez).

Bien que vous puissiez traiter les fichiers différemment en fonction de leur casse (majuscules/minuscules), nous avons inclus le traitement insensitif dans l'expression régulière qui a été mentionnée ^[1]  : ?i: ^[2] . Ainsi, les fichiers .jpg our les fichiers .JPG (voire .JpEg) seront traités de la même manière.

Le header qui sera positionné fera état d'une invalidité de la ressource (expiration) 5 ans plus tard que son accès, de quoi être largement dans le futur (ExpiresDefault "access plus 5 years") et donc d'activer le cache des navigateurs pour une longue période.

Voici les headers HTTP typiques qui sont positionnés en renvoi à une requête correspondant à une ressource bénéficiant de cette technique d'expiration (exemple pris de notre serveur Apache) :

HTTP/1.1 304 Not Modified
Date: Mon, 27 Aug 2012 09:00:52 GMT
Server: Apache/2.2.11 (Win32) PHP/5.3.5
Connection: Keep-Alive
Keep-Alive: timeout=5, max=100
ETag: "1b000000019eaf-1363-4c321e748faf4"
Expires: Sat, 26 Aug 2017 09:00:52 GMT
Cache-Control: max-age=157680000

Attention, pour qu'Apache puisse se livrer à cet exercice, n'oubliez pas d'activer le module expires_module.

Compression des rendus

Règle #2 : compressez vos ressources !

Le temps qui est nécessaire à transférer les ressources du serveur au navigateur du client est pour large part dépendant de la taille de la ressource en question : plus la ressource est grosse, plus de temps sera nécessaire à l'envoyer vers l'internaute parce qu'il faudra plus de paquets pour la lui faire parvenir.

Il est donc utile de compresser les données en question. En Apache 2.x cela se fait grâce au module mod_deflate et par l'utilisation de la directive AddOutputFilterByType.

Steve Souders, dans son excellent bouquin "High Performance Web Sites", préconise la compression des scripts (*.js) et des feuilles de style (.css). De notre côté, nous préconisons l'utilisation de la compression sur base de types MIME. Voici les directives de compression telles que nous les avons extraites de notre propre configuration Apache, et ce pour tous les sites dont nous nous occupons :

<Directory "d:/allsites/*/www/http/">
    ... other instructions
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
</Directory>

Attention, pour qu'Apache puisse se livrer à cet exercice, n'oubliez pas d'activer le module deflate_module.

Contenu à récurrence : se servir des filtres day, month, week et/ou year 2012-08-24

Depuis l'opus "5.0.0006"

Voilà encore une série de filtres sur les contenus. Ici il s'agit de s'intéresser à des contenus qui ne sont à afficher qu'à certaines dates, mais de manière un peu plus complexe qu'entre deux dates (ce à quoi servent d'ailleurs les filtres pubdate et expiry).

Imaginons par exemple que vous souhaitiez qu'une île ne soit affichée que les lundis, mercredis et vendredis. Voici comment réaliser la chose :

<Contents>
    <Archipelago id="body" active="yes" category="body">
        <Island id="test" active="yes" class="LSContents" xhtml="yes" day="1;3;5">
            <p style="font-size:5em;color:red;font-weight:bold;">JOUR IMPAIR</p>
        </Island>
        <Island id="pm" active="yes" class="LSContents">
            <param name="storage"><![CDATA[pm-{page->lang}.php]]></param>
        </Island>
    </Archipelago>
</Contents>

Nous avons utilisé le filtre day et avons donné les jours de la semaine qui nous conviennent : 1 pour les lundis, 3 pour les mercredis et 5 pour les vendredis.

Le même raisonnement s'applique aux mois, aux semaines et aux années. Voici des exemples de chaque cas :

<Contents>
    <Archipelago id="body" active="yes" category="body">
        <Island id="test" active="yes" class="LSContents" xhtml="yes" month="1;3;5;7;9;11">
            <p style="font-size:5em;color:red;font-weight:bold;">MOIS IMPAIR</p>
        </Island>
        <Island id="pm" active="yes" class="LSContents">
            <param name="storage"><![CDATA[pm-{page->lang}.php]]></param>
        </Island>
    </Archipelago>
</Contents>

<Contents>
    <Archipelago id="body" active="yes" category="body">
        <Island id="test" active="yes" class="LSContents" xhtml="yes" week="30-50">
            <p style="font-size:5em;color:red;font-weight:bold;">BONNE SEMAINE</p>
        </Island>
        <Island id="pm" active="yes" class="LSContents">
            <param name="storage"><![CDATA[pm-{page->lang}.php]]></param>
        </Island>
    </Archipelago>
</Contents>

Avec une petite particularité liée à notre exemple qui spécifie une fourchette de semaines : de la 30ème à la 50ème semaine !

<Contents>
    <Archipelago id="body" active="yes" category="body">
        <Island id="test" active="yes" class="LSContents" xhtml="yes" year="2000-2010;2012">
            <p style="font-size:5em;color:red;font-weight:bold;">C'EST LA BONNE ANNEE</p>
        </Island>
        <Island id="pm" active="yes" class="LSContents">
            <param name="storage"><![CDATA[pm-{page->lang}.php]]></param>
        </Island>
    </Archipelago>
</Contents>

Et avec une nouvelle particularité liée à notre exemple qui spécifie une fourchette d'années et l'année 2012 en sus : de 2000 à 2010, ou 2012 !

Comme les exemples le laissent supposer, les fouchettes ET les dates précises sont possibles dans le même filtre MAIS si vous utilisez les deux en même temps, les fourchettes DOIVENT TOUJOURS PRÉCÉDER les dates. Par exemple day="1-3;5;7" est valable mais pas day="5;7;1-3" !

NOTA BENE : ces quatre filtres sont évidemment cumulables (comme le sont d'ailleurs tous les filtres) ! Ainsi, l'île suivante est affichée les lundis et jeudis de septembre à décembre :

<Contents>
    <Archipelago id="body" active="yes" category="body">
        <Island id="test" active="yes" class="LSContents" xhtml="yes" day="1;4" month="9-12">
            <p style="font-size:5em;color:red;font-weight:bold;">SALUT TOI</p>
        </Island>
        <Island id="pm" active="yes" class="LSContents">
            <param name="storage"><![CDATA[pm-{page->lang}.php]]></param>
        </Island>
    </Archipelago>
</Contents>

Les filtres pubdate et expiry revus pour s'appliquer à des heures sans prise en compte de date 2012-08-25

Depuis l'opus "5.0.0006"

Jusqu'à la version 5.0.0005 de Vae Soli! les filtres pubdate et expiry acceptaient le seul format YYYYMMDD[HH[mm[SS]]] (date et heure jusqu'à la seconde).

Depuis l'opus 5.0.0006 de Vae Soli! le format HH:mm[:SS] est également permis. L'exemple suivant vous sera parfaitement compréhensible :

<Contents>
    <Archipelago id="body" active="yes" category="body">
        <Island id="test" active="yes" class="LSContents" xhtml="yes" pubdate="20:00" expiry="23:59">
            <p style="font-size:5em;color:red;font-weight:bold;">SALUT TOI</p>
        </Island>
        <Island id="pm" active="yes" class="LSContents">
            <param name="storage"><![CDATA[pm-{page->lang}.php]]></param>
        </Island>
    </Archipelago>
</Contents>

Cet exemple démontre simplement comment mentionner une île qui ne sera affichée que de 20:00 à 23:59 (heure du serveur!). Une fois de plus, ces filtres sont cumulables avec les autres et voici dès lors comment conjuguer des heures de publication et d'expiration avec les filtres day, month, week et/ou year :

<Contents>
    <Archipelago id="body" active="yes" category="body">
        <Island id="test" active="yes" class="LSContents" xhtml="yes" day="1;4" month="9-12"  pubdate="20:00" expiry="23:59">
            <p style="font-size:5em;color:red;font-weight:bold;">SALUT TOI</p>
        </Island>
        <Island id="pm" active="yes" class="LSContents">
            <param name="storage"><![CDATA[pm-{page->lang}.php]]></param>
        </Island>
    </Archipelago>
</Contents>

Les filtres, encore les filtres, toujours les filtres … get, post, cookie et server 2012-08-24

Depuis l'opus "5.0.0006"

Souhaitez-vous n'activer une île QUE si un paramètre de l'URL vaut une certaine valeur ? Rien de plus simple : il vous suffit de définir le filtre get (par analogie à $_GET). Exemple :

<Island id="warning" xhtml="yes" get="warning=on">
    <h2 style="color:#600;">Attention</h2>
    <p style="color:#900;">

        Certains des exemples que nous fournissons ci-dessous ne
        sont pas complets. D'emblée, nous nous en excusons, bien
        sûr.
    </p>
</Island>

Il est possible de mentionner plusieurs filtres get avec la syntaxe suivante : get="var1=value;var2=value;var3...". Voici un exemple où $_GET['warning'] doit être égal à on et $_GET['id'] doit être égal à 18 :

<Island id="warning" xhtml="yes" get="warning=on;id=18">
    <h2 style="color:#600;">Attention</h2>
    <p style="color:#900;">

        Certains des exemples que nous fournissons ci-dessous ne
        sont pas complets. D'emblée, nous nous en excusons, bien
        sûr.
    </p>
</Island>

Si vous souhaitez tout simplement tester l'existence de la variable $_GET, utilisez la syntaxe suivante : get="var". Voici par exemple comment tester la présence de la variable $_GET['warning'] :

<Island id="warning" xhtml="yes" get="warning">
    <h2 style="color:#600;">Attention</h2>
    <p style="color:#900;">

        Certains des exemples que nous fournissons ci-dessous ne
        sont pas complets. D'emblée, nous nous en excusons, bien
        sûr.
    </p>
</Island>

Si vous avez compris comment fonctionne le filtre get, alors vous saurez comment gérer les filtres post, cookie et server : ils sont similaires en tous points, sauf qu'ils butinent du côté du $_POST, du $_COOKIE, ou $_SERVER ! Exemple :

<Island id="warning" xhtml="yes" post="warning=true">
    <h2 style="color:#600;">Attention</h2>
    <p style="color:#900;">

        Certains des exemples que nous fournissons ci-dessous ne
        sont pas complets. D'emblée, nous nous en excusons, bien
        sûr.
    </p>
</Island>

Résumé des syntaxes possibles

• Egalité : filtre="var=value" (e.g. get="warning=on")
• Non égalité : filtre="var!=value" (e.g. get="warning!=on")
• Plus grand que : filtre="var>value" (e.g. get="warning>4") (le caractère '>' n'est pas acceptable !)
• Plus grand ou égal : filtre="var>=value" (e.g. get="warning>=on") (le caractère '>' n'est pas acceptable !)
• Plus petit que : filtre="var<value" (e.g. get="warning<4") (le caractère '<' n'est pas acceptable !)
• Plus petit ou égal : filtre="var<=value" (e.g. get="warning<=on") (le caractère '<' n'est pas acceptable !)
• valeur dans une liste de valeurs : filtre="var$value1,value2[,...]" (e.g. get="warning$on,true,yes")
• Existence : filtre="var" (e.g. get="warning")
• Non existence : filtre="!var" (e.g. get="!warning")

Quelques exemples choisis

<Island id="warning" xhtml="yes" post="warning$true,on,yes">
    <h2 style="color:#600;">Attention</h2>
    <p style="color:#900;">

        Certains des exemples que nous fournissons ci-dessous ne
        sont pas complets. D'emblée, nous nous en excusons, bien
        sûr.
    </p>
</Island>

<Island id="warning" xhtml="yes" cookie="last-visit&lt;20120501">
    <p style="color:#900;">
        Nous sommes heureux de vous revoir !
    </p>
</Island>

<Island id="warning" xhtml="yes" cookie="last-visit">
    <p style="color:#900;">
        Welcome back !
    </p>
</Island>

<Island id="warning" xhtml="yes" post="!txtDate">
    <p style="color:#900;">
        Nous rencontrons un problème avec votre formulaire car nous ne trouvons
        pas la zone Date.
    </p>
</Island>

Après le filtre device et le filtre model, voici le filtre browser ! 2012-08-22

Depuis l'opus "5.0.0006"

Il est possible de positionner des paramètres particuliers pour les îles en utilisant les filtres device et model. Nous avons pensé que le filtre browser pourrait aussi être intéressant, aussi l'avons-nous intégré directement dans la version 5.0.0006 de Vae Soli!, une version qui est planifiée pour le 31/08/2012.

Exemple :

<Island id="booking" active="yes" class="LSContentsBooking">
    …
    <param name="start-hour"            browser="opera">9</param>
    <param name="start-hour"            browser="chrome">10</param>
    <param name="start-hour"            >11</param>
    <param name="end-hour"              >22</param>
    <param name="minutes-per-slot"      >30</param>
    …
</Island>

Le filtre port permet de "tamiser" votre output 2012-08-22

Depuis l'opus "5.0.0006"

Beaucoup de nouveaux filtres d'affichage ont fait leur apparition ces derniers temps dans Vae Soli! – ou plutôt, quelques nouveaux filtres ont été développés et beaucoup ont enfin été documentés.

Au rang de ces filtres, le filtre port qui permet de n'afficher les éléments que si le bon numéro de port est mentionné. Ce filtre s'applique tant aux pages, qu'aux archipels et aux îles.

Voilà qui est éminemment pratique, par exemple, pour permettre de tester une partie de votre site car en effet il suffit de mentionner dans l'URL le port à utiliser et le contenu ne se montrera QUE si le port en question est utilisé (bien entendu, il faudra aussi vous arranger pour que votre serveur web, Apache par exemple, écoute sur le port en question et que votre virtual host soit correctement configuré).

Exemple :

<Contents>
    <Archipelago id="body" active="yes" category="body">
        <Island id="test" active="yes" class="LSContents" xhtml="yes" port="8000">
            <p style="font-size:5em;color:red;font-weight:bold;">SALUT</p>
        </Island>
        <Island id="pm" active="yes" class="LSContents">
            <param name="storage"><![CDATA[pm-{page->lang}.php]]></param>
        </Island>
    </Archipelago>
</Contents>

Dans l'exemple ci-dessus, le petit mot "SALUT" n'apparaîtra QUE si le port utilisé est "8000". Vous pouvez donc déduire de ceci que vous pouvez créer des contenus qui ne seront visibles qu'à condition de mentionner le bon port. Il vous suffira dès lors de mentionner – mais cela ne reste qu'un exemple d'utilisation – le port à utiliser dans les requêtes pour que votre équipe de test puisse tester la nouvelle version de votre page.

Pour que l'exemple soit complet, voici la configuration Apache nécessaire :

Dans httpd.conf

Listen 80
Listen 8000

Dans httpd-vhosts.conf (fichier de définition des vhosts)

<VirtualHost *:80 *:8000>
    DocumentRoot c:/websites/mydomain/www/httpdocs
    ServerName mydomain.com
    ServerAlias www.mydomain.com
</VirtualHost>

Syntaxes possibles

• Egalité : port="value" (e.g. port="8000")
• Non égalité : port="!value" ou port="!=value"(e.g. port="!8000")
• Plus grand que : port=">value" (e.g. port=">80") (le caractère '>' n'est pas acceptable !)
• Plus grand ou égal : port=">=value" (e.g. port=">=80") (le caractère '>' n'est pas acceptable !)
• Plus petit que : port="<value" (e.g. port="<80") (le caractère '>' n'est pas acceptable !)
• Plus petit ou égal : port="<=value" (e.g. port="<=80") (le caractère '>' n'est pas acceptable !)
• Valeur dans une liste de valeurs : port="$value[,...]" (e.g. port="$80,8000")

Application

Il est important de préciser que le filtre port, comme la quasi totalité des filtres, s'applique tant aux pages, aux archipels et aux îles.

LSInput : de nouvelles additions en masse 2012-07-31

Depuis l'opus "5.0.0005"

LSInput('date')

On n'y coupe pas… c'est l'assignation de la valeur de la zone qui est touffue, un peu spéciale. Pour donner une valeur au contrôle, il faut que cette valeur soit formatée conformément aux spécifications : il faut une chaîne de temps valide. C'est quoi une chaîne de temps valide ? Réponse : c'est une chaîne qui représente le mois de manière valide + '-' (un tiret) + le jour du mois en deux chiffres. Merci les specs ! Prochaine question : c'est quoi une chaîne de mois valide. Réponse : c'est quatre chiffres réprésentant l'année + '-' (un tiret) + 2 chiffres représentant le mois.

Allons-y ! Mettons-le tout ensemble : YYYY-MM-DD. C'est pas plus simple de le dire comme cela ? Voilà qui est dit !

Vae Soli! n'a pas attendu que HTML5 définisse une zone de type date pour fournir ce type de contrôle. A vrai dire, si vous ne spécifiez rien d'autre vous risquez d'être un peu surpris car Vae Soli! vous présentera une simple zone text affublée néanmoins de javascript dont la tâche sera de s'assurer que vous entrez bien une date. Pour que Vae Soli! vous présente la zone date comme un contrôle HTML5, il faut dire que le formulaire suit les règles des Web Forms 2.0 C'est ce que nous avons mis en évidence dans le code qui vous est présenté ci-dessous.

Revenons dès lors un instant à la manière de positionner la valeur du contrôle. Finalement Vae Soli! vous permet de montionner la valeur avec les formats suivants :

• Alternative #1: $txtDate->szValue = '29-02-2012'
• Alternative #2: $txtDate->szValue = '29/02/2012'
• Alternative #3: $txtDate->szValue = '2012-02-29'
• Alternative #4: $txtDate->szValue = '2012/02/29'

Tous les cas sont supportés, ce qui devrait vous simplifier la tâche, du moins le pensons-nous.

Code HTML :

<script type="text/javascript">
// <![CDATA[


function __chkDate( evt,oControl,szErrMsg )
{
    evt = (evt) ? evt : event;
    if ( evt.which )
    {
        var keyCode = '' + evt.which;
    }
    else
    {
        var keyCode = '' + evt.keyCode;
    }

    if ( evt.which != 0 )
    {
        if ( evt.ctrlKey )
        {
            keyCode = '^' + keyCode;
            return ( true );
        }
        if ( keyCode != '13'       && /* Enter */    
             keyCode != '47'       && /* / */        
             keyCode != '48'       && /* 0 */        
             keyCode != '49'       && /* 1 */        
             keyCode != '50'       && /* 2 */        
             keyCode != '51'       && /* 3 */        
             keyCode != '52'       && /* 4 */        
             keyCode != '53'       && /* 5 */        
             keyCode != '54'       && /* 6 */        
             keyCode != '55'       && /* 7 */        
             keyCode != '56'       && /* 8 */        
             keyCode != '57'       && /* 9 */        
             keyCode != '8'        && /* Backspace */
             keyCode != '9'        && /* Tab */      
             keyCode != '144'      && /* NumLock */  
             keyCode != '63497'    && /* Up arr */   
             keyCode != '63498'       /* Down arr */
           )
        {
            alert( szErrMsg.length > 0 ? szErrMsg : "Digits or '/' only! (" + keyCode + ")" );
            return ( false );
        }
        else
        {
            if ( keyCode == '13' )    /* Enter */    
            {
                oControl.blur();
            }
        }
    }
    return ( true );
}


function DAT_IsValid( iYear,iMonth,iDay,szErrMsg )
/*----------------------------------------------*/
{
    /* First, let's adjust the year */
    if ( iYear < 100 )
    {
        if ( iYear < 50 )
        {
            iYear += 2000;  /* e.g. 0 to 49 will yield 2000 to 2049 */
        }
        else
        {
            iYear += 1900;  /* e.g. 50 to 99 will yield 1950 to 1999 */
        }
    }
    /* Is month correct? */
    if ( iMonth < 1 || iMonth > 12 )
    {
        if ( szErrMsg && szErrMsg.length > 0 )
        {
            szMsg = szErrMsg;
        }
        else
        {
            szMsg = 'Incorrect month!';
        }
        alert( szMsg );
        return ( false );
    }
    /* Find out is we are dealing with a leap year or not */
    if ( iYear % 4 == 0 && iYear % 100 != 0 || iYear % 400 == 0 )
    {
        iFebDays = 29;
    }
    else
    {
        iFebDays = 28;
    }
    /* Preparing number of days per month */
    aDays = new Array( 31,iFebDays,31,30,31,30,31,31,30,31,30,31 );
    if ( iDay < 1 || iDay > aDays[iMonth-1] )
    {
        if ( szErrMsg && szErrMsg.length > 0 )
        {
            szMsg = szErrMsg;
        }
        else
        {
            szMsg = 'Date is invalid!';
        }
        alert( szMsg );
        return ( false );
    }
    return ( true );
}


function __chkForm_eebe183e21b41168ef375c89dd2cde03( oForm )
/*----------------------------*/
{
    bRetVal = true;
    if ( ( oObj = document.getElementById( 'txtDate' ) ) )
    {
        var szDate = oObj.value;
        szDay    = szDate.substr( 0,2 );
        szMonth  = szDate.substr( 3,2 );
        if ( szDay.charAt(0)   == '0' ) { szDay   = szDay.charAt(1);   }
        if ( szMonth.charAt(0) == '0' ) { szMonth = szMonth.charAt(1); }
        iDay    = parseInt( szDay   );
        iMonth  = parseInt( szMonth );
        iYear   = parseInt( szDate.substr( 6,4 ) );
        if ( ! DAT_IsValid( iYear,iMonth,iDay,'' ) )
        {
            oObj.focus();
            return ( false );
        }
    }
    return ( bRetVal );
}

//]]>
</script>

<form action="/samples.php" method="post" id="frmDateSample" 
onsubmit="return __chkForm_eebe183e21b41168ef375c89dd2cde03(this);">
<label id="lblDate">Date: </label><input type="text" value="28/10/2021" id="txtDate"
tabindex="1" maxlength="10" onkeypress="return __chkDate(event,this,'');" /></form>

<?php
$oForm            = new LSForm( 'frmDateSample' );              // Création du formulaire
$oForm->szVersion = 'Web 2.0';                                  // Utilisation des Web forms 2.0
$txtDate          = new LSInput( 'date','txtDate' );            // Création de la zone 'date'
$txtDate->szValue = date( 'Y-m-d' );                            // Positionnement de la valeur (YYYY-MM-DD)

$lblDate          = new LSLabel( 'lblDate',null,'Date: ' );     // Création d'un label
$oForm->AddObject( array( $lblDate,$txtDate ) );                // Ajout du label et de la zone 'date' au formulaire
$szHTML = $oForm->Render();                                     // Rendu HTML du formulaire
echo $szHTML;                                                   // echo
?>

Attention : Les propriétés Min, Max et Step ne sont supportées que dans les Web forms 2.0. Voici un exemple conçu pour montrer ces propriétés en action :

<?php
$oForm            = new LSForm( 'frmDateSample2' );             // Création du formulaire
$oForm->szVersion = 'Web 2.0';                                  // Utilisation des Web forms 2.0
$txtDate          = new LSInput( 'date','txtDate' );            // Création de la zone 'date'
$txtDate->szValue = date( 'Y-m-d' );                            // Positionnement de la valeur (YYYY-MM-DD)
$txtDate->Min     = sprintf( '%04d-%s',( (int) date('Y') - 1 ), date( 'm-d' ) );// Minimum (doit être une date valable)
$txtDate->Max     = sprintf( '%04d-%s',( (int) date('Y') + 1 ), date( 'm-d' ) );// Maximum (doit être une date valable)
$txtDate->Step    = 10;                                         // Incrément de 10 jours

$lblDate          = new LSLabel( 'lblDate',null,'Date: ' );     // Création d'un label
$oForm->AddObject( array( $lblDate,$txtDate ) );                // Ajout du label et de la zone 'date' au formulaire
$szHTML = $oForm->Render();                                     // Rendu HTML du formulaire
echo $szHTML;                                                   // echo
?>

<script type="text/javascript">
// <![CDATA[


function __chkDate( evt,oControl,szErrMsg )
{
    evt = (evt) ? evt : event;
    if ( evt.which )
    {
        var keyCode = '' + evt.which;
    }
    else
    {
        var keyCode = '' + evt.keyCode;
    }

    if ( evt.which != 0 )
    {
        if ( evt.ctrlKey )
        {
            keyCode = '^' + keyCode;
            return ( true );
        }
        if ( keyCode != '13'       && /* Enter */    
             keyCode != '47'       && /* / */        
             keyCode != '48'       && /* 0 */        
             keyCode != '49'       && /* 1 */        
             keyCode != '50'       && /* 2 */        
             keyCode != '51'       && /* 3 */        
             keyCode != '52'       && /* 4 */        
             keyCode != '53'       && /* 5 */        
             keyCode != '54'       && /* 6 */        
             keyCode != '55'       && /* 7 */        
             keyCode != '56'       && /* 8 */        
             keyCode != '57'       && /* 9 */        
             keyCode != '8'        && /* Backspace */
             keyCode != '9'        && /* Tab */      
             keyCode != '144'      && /* NumLock */  
             keyCode != '63497'    && /* Up arr */   
             keyCode != '63498'       /* Down arr */
           )
        {
            alert( szErrMsg.length > 0 ? szErrMsg : "Digits or '/' only! (" + keyCode + ")" );
            return ( false );
        }
        else
        {
            if ( keyCode == '13' )    /* Enter */    
            {
                oControl.blur();
            }
        }
    }
    return ( true );
}


function DAT_IsValid( iYear,iMonth,iDay,szErrMsg )
/*----------------------------------------------*/
{
    /* First, let's adjust the year */
    if ( iYear < 100 )
    {
        if ( iYear < 50 )
        {
            iYear += 2000;  /* e.g. 0 to 49 will yield 2000 to 2049 */
        }
        else
        {
            iYear += 1900;  /* e.g. 50 to 99 will yield 1950 to 1999 */
        }
    }
    /* Is month correct? */
    if ( iMonth < 1 || iMonth > 12 )
    {
        if ( szErrMsg && szErrMsg.length > 0 )
        {
            szMsg = szErrMsg;
        }
        else
        {
            szMsg = 'Incorrect month!';
        }
        alert( szMsg );
        return ( false );
    }
    /* Find out is we are dealing with a leap year or not */
    if ( iYear % 4 == 0 && iYear % 100 != 0 || iYear % 400 == 0 )
    {
        iFebDays = 29;
    }
    else
    {
        iFebDays = 28;
    }
    /* Preparing number of days per month */
    aDays = new Array( 31,iFebDays,31,30,31,30,31,31,30,31,30,31 );
    if ( iDay < 1 || iDay > aDays[iMonth-1] )
    {
        if ( szErrMsg && szErrMsg.length > 0 )
        {
            szMsg = szErrMsg;
        }
        else
        {
            szMsg = 'Date is invalid!';
        }
        alert( szMsg );
        return ( false );
    }
    return ( true );
}


function __chkForm_82cba4d2127d49d424177d9915c3e1ab( oForm )
/*----------------------------*/
{
    bRetVal = true;
    if ( ( oObj = document.getElementById( 'txtDate' ) ) )
    {
        var szDate = oObj.value;
        szDay    = szDate.substr( 0,2 );
        szMonth  = szDate.substr( 3,2 );
        if ( szDay.charAt(0)   == '0' ) { szDay   = szDay.charAt(1);   }
        if ( szMonth.charAt(0) == '0' ) { szMonth = szMonth.charAt(1); }
        iDay    = parseInt( szDay   );
        iMonth  = parseInt( szMonth );
        iYear   = parseInt( szDate.substr( 6,4 ) );
        if ( ! DAT_IsValid( iYear,iMonth,iDay,'' ) )
        {
            oObj.focus();
            return ( false );
        }
    }
    return ( bRetVal );
}

//]]>
</script>

<form action="/samples.php" method="post" id="frmDateSample2" 
onsubmit="return __chkForm_82cba4d2127d49d424177d9915c3e1ab(this);">
<label id="lblDate">Date: </label><input type="text" value="28/10/2021" id="txtDate"
tabindex="1" maxlength="10" onkeypress="return __chkDate(event,this,'');" /></form>

LSInput('time')

<?php
$oForm            = new LSForm( 'frmTimeSample' );              // Création du formulaire
$txtTime          = new LSInput( 'time','txtTime' );            // Création de la zone 'time'
$txtTime->szValue = date( 'H:i' );                              // Positionnement de la valeur (hh:mm)
$txtTime->Min     = date( 'H:00' );                             // Minimum (doit être une heure valable)
$txtTime->Max     = sprintf( "%2d:00",(int) date( 'H' ) + 1 );  // Maximum (doit être une heure valable)
$txtTime->Step    = 300;                                        // Incrément de 5 minutes (300 sec)
$lblTime          = new LSLabel( 'lblTime',null,'Time: ' );     // Création d'un label
$oForm->AddObject( array( $lblTime,$txtTime ) );                // Ajout du label et de la zone 'time' au formulaire
$szHTML = $oForm->Render();                                     // Rendu HTML du formulaire
echo $szHTML;                                                   // echo
?>

Le rendu du formulaire donne :

<script type="text/javascript">
// <![CDATA[

//]]>
</script>

<form action="/samples.php" method="post" id="frmTimeSample">
<label id="lblTime">Time: </label><input type="time" value="00:15" max="01:00" min="00:00" step="300" 
id="txtTime" tabindex="1"  /></form>

LSInput('datetime')

Pour ne rien changer aux bonnes habitudes, c'est le positionnement de la valeur du contrôle qui est la partie la plus compliquée. Voici ce que dit la norme HTML5 : il faut que la valeur soit représentée par une chaîne de global date and time, soit une chaîne date valable + un 'T' ou un espace ' ' + une chaîne temps valide +. une indication de zone de temps.La question est donc de savoir ce qu'est une chaîne date valide et ce qu'est une chaîne temps valide. Mais justement, nous venons de voir ce qu'on entend par là dans les contrôles LSInput('date') et LSInput('time'). Il s'agit alors de joindre les deux en y insérant un 'T' ou un espace (' ') et d'y ajouter la zone de temps. Très bien. Pour la zone de temps, un 'Z' indique qu'on fait référence à une valeur UTC.

De cette spec, on déduit que 2012-08-01T18:00Z indique la date du 1 août 2012, 18h00 en valeur UTC. La partie qui serait dédiée aux secondes n'est PAS prise ne compte par Vae Soli! sauf si vous spécifiez vous-même le format valide (notez que le support de secondes peut s'avérer différent de navigateur à navigateur).

<?php
$oForm                  = new LSForm( 'frmDateTimeSample' );        // Création du formulaire
$txtDateTime            = new LSInput( 'datetime','txtDateTime' );  // Zone semaine ('datetime')
$txtDateTime->szTooltip = "Choisissez la date et heure";            // Tooltip
$txtDateTime->szValue   = '2012-08-02T18:03Z';                      // Positionnement de la valeur

$lblDateTime            = new LSLabel( 'lblDateTime',null,'Date et heure: ' );// Création d'un label
$lblDateTime->szFor     = $txtDateTime;                             // Le label est destiné à la zone txtWeek
$oForm->AddObject( array( $lblDateTime,$txtDateTime ) );            // Ajout du label et de la zone 'file' au formulaire
$szHTML = $oForm->Render();                                         // Rendu HTML du formulaire
echo $szHTML;                                                       // echo
?>

Là également nous avons tenté de simplifier votre travail au cas où vous ne souhaiteriez PAS vous charger de la zone de temps (time zone). Par exemple, le format suivant est tout à fait permis : YYYYMMDDHHmm[SS] … où tout ce qui suit mm est ignoré. Les formats possibles sont :

• $txtDateTime->szValue = '2012-08-02T18:03Z'
• $txtDateTime->szValue = '20120802'
• $txtDateTime->szValue = '2012080218'
• $txtDateTime->szValue = '201208021803'
• $txtDateTime->szValue = '20120802180315'
• $txtDateTime->szValue = '2012 08 02 18 03 15'
• $txtDateTime->szValue = '2012-08-02 18:03:15'

LSInput('week')

La partie la plus tricky du contrôle week est le formatage approprié de sa valeur. La norme dit qu'une semaine est formatée avec l'année en quatre chiffres, un tiret de séparation, le caractère 'W' et le numéro de la semaine en deux chiffres. Par exemple, la semaine du 30 juillet au 5 août 2012, soit la semaine 31 de l'année, sera formatée comme suit : 2012-W31.

Le contrôle LSInput('week') est plus souple et il se chargera de formater la valeur de la date de la bonne manière selon un ensemble de possibilités plus naturelles. Les valeurs reconnues sont :

• $txtWeek->szValue = 31;
• $txtWeek->szValue = '31';
• $txtWeek->szValue = 'W31';
• $txtWeek->szValue = '2012-W31';
• $txtWeek->szValue = '2012W31';
• $txtWeek->szValue = '2012-31';
• $txtWeek->szValue = '2012/31';
• … et aussi $txtWeek->szValue = '2012-W31';

<?php
$oForm                  = new LSForm( 'frmWeekSample' );            // Création du formulaire
$txtWeek                = new LSInput( 'week','txtWeek','txtWeek' );// Zone semaine ('week')
$txtWeek->szTooltip     = "Choisissez la semaine";                  // Tooltip
$txtWeek->szValue       = isset( $_POST['txtWeek'] )    ?           // Positionnement de la valeur
                          $_POST['txtWeek']             :
                          date( 'Y' ) . '-W' . date( 'W' );
$lblWeek                = new LSLabel( 'lblWeek',null,'Week: ' );   // Création d'un label
$lblWeek->szFor         = $txtWeek;                                 // Le label est destiné à la zone txtWeek
$oForm->AddObject( array( $lblWeek,$txtWeek) );                     // Ajout du label et de la zone 'week' au formulaire
$szHTML = $oForm->Render();                                         // Rendu HTML du formulaire
echo $szHTML;                                                       // echo
?>

Ce qui donne :

<script type="text/javascript">
// <![CDATA[

//]]>
</script>

<form action="/samples.php" method="post" id="frmWeekSample">
<label id="lblWeek" for="txtWeek">Week: </label></form>

LSInput('day')

<?php
$oForm              = new LSForm( 'frmDaySample' );                 // Création du formulaire
$txtDay             = new LSInput( 'day','txtDay','txtDay' );       // Zone jour
$txtDay->szTooltip  = "Choisissez le jour";                         // Tooltip
$txtDay->szValue    = isset( $_POST['txtDay'] ) ?                   // Positionnement de la valeur
                      $_POST['txtDay']          :
                      date( 'd' );
$lblDay             = new LSLabel( 'lblDay',null,'Day: ' );         // Création d'un label
$lblDay->szFor      = $txtDay;                                      // Le label est destiné à la zone txtDay
$oForm->AddObject( array( $lblDay,$txtDay ) );                      // Ajout du label et de la zone 'day' au formulaire
$szHTML = $oForm->Render();                                         // Rendu HTML du formulaire
echo $szHTML;                                                       // echo
?>

Ce qui génère le code suivant :

<script type="text/javascript">
// <![CDATA[

//]]>
</script>

<form action="/samples.php" method="post" id="frmDaySample">
<label id="lblDay" for="txtDay">Day: </label><select  id="txtDay" name="txtDay"
title="Choisissez le jour" tabindex="1"><option value="mo">Lundi</option>
<option value="tu">Mardi</option>
<option value="we">Mercredi</option>
<option value="th">Jeudi</option>
<option value="fr">Vendredi</option>
<option value="sa">Samedi</option>
<option value="su">Dimanche</option></select></form>

LSInput('month')

<?php
$oForm                  = new LSForm( 'frmMonthSample' );            // Création du formulaire
$txtMonth               = new LSInput( 'Month','txtMonth','txtMonth' ); // Zone mois
$txtMonth->szTooltip    = "Choisissez le mois";                     // Tooltip
$txtMonth->szValue      = isset( $_POST['txtMonth'] ) ?             // Positionnement de la valeur
                        $_POST['txtMonth']          :
                        date( 'd' );
$lblMonth               = new LSLabel( 'lblMonth',null,'Month: ' ); // Création d'un label
$lblMonth->szFor        = $txtMonth;                                // Le label est destiné à la zone txtMonth
$oForm->AddObject( array( $lblMonth,$txtMonth ) );                  // Ajout du label et de la zone 'Month' au formulaire
$szHTML = $oForm->Render();                                         // Rendu HTML du formulaire
echo $szHTML;                                                       // echo
?>

Ce qui génère le code suivant :

LSInput('file') : nouveaux paramètres

accept, et multiselect sont les deux additions les plus remarquables du contrôle :

<?php
$oForm                  = new LSForm( 'frmFileSample' );            // Création du formulaire
$txtFile                = new LSInput( 'file','txtFile','txtFile' );// Zone fichier
$txtFile->szTooltip     = "Choisissez un ou des fichiers";          // Tooltip
$txtFile->szValue       = isset( $_POST['txtFile'] )    ?           // Positionnement de la valeur
                          $_POST['txtFile']             :
                          '';
$txtFile->szAccept      = "audio/*";                                // Types de fichiers à accepter
$txtFile->IsMultiSelect = true;                                     // Acceptation de plusieurs fichiers
$lblFile                = new LSLabel( 'lblFile',null,'File: ' );   // Création d'un label
$lblFile->szFor         = $txtFile;                                 // Le label est destiné à la zone txtFile
$oForm->AddObject( array( $lblFile,$txtFile) );                     // Ajout du label et de la zone 'file' au formulaire
$szHTML = $oForm->Render();                                         // Rendu HTML du formulaire
echo $szHTML;                                                       // echo
?>

Le rendu du formulaire donne :

<script type="text/javascript">
// <![CDATA[

//]]>
</script>

<form action="/samples.php" method="post" id="frmFileSample" enctype="multipart/form-data">
<label id="lblFile" for="txtFile">File: </label><input type="file" id="txtFile" name="txtFile"
title="Choisissez un ou des fichiers" tabindex="1"  accept="audio/*" /></form>

LSInput : de nouvelles additions en masse … un petit bémol

Le support dans les navigateurs est encore très inégal (du moins à la date où nous écrivons ces lignes, cad le 02/08/2012 à 07:12:09). Il est donc important d'être prudent dans l'utilisation de ces nouveaux contrôles propres au HTML5. Sans surprise, c'est IE9 qui est le plus en retard. C'est dramatique parce que cela ralentit considérablement l'adoption des améliorations apportées par HTML5 à l'expérience utilisateur. Gageons qu'en changeant de navigateur (passage à Opera ou Chrome par exemple) de plus en plus d'internautes bénéficieront ainsi des bénéfices inédits de la dernière norme HTML.

LSForm : new additions ! 2012-07-28

Depuis l'opus "5.0.0005"

Attribut name

L'arrivée de HTML5 bouscule les habitudes que nous, développeurs, avions prises, puis parfois abandonnées, au cours des années. Ainsi, nous avions rénoncé à l'attribut name sur un formulaire. Et bien, nous avons dû le réintroduire. C'est chose faite avec la version 5.0.0005 de Vae Soli!

$oForm                  = new LSForm( 'frmMyForm' );
$oForm->szName          = $oForm->szID;

Attribut autocomplete

L'attribut autocomplete est un attribut énuméré du HTML5. Il peut prendre deux valeurs :

• on
• off

D'après la spéc, cet attribut peut très bien être complètement omis. Si indiqué et si off, cet attribut indique que toutes les zones includes dans le formulaire ont leur propre attribut autocomplete mis à off.

$oForm                  = new LSForm( 'frmMyForm' );
$oForm->szName          = $oForm->szID;
$oForm->szAutocomplete  = 'off';

Attribut novalidate

Si cet attribut est méntionné, alors le formulaire n'est pas validé.

$oForm                  = new LSForm( 'frmMyForm' );
$oForm->szName          = $oForm->szID;
$oForm->NoValidate      = true;

Attribut target

Si cet attribut est méntionné et qu'il dispose d'une bonne valeur, soit _blank, _self, _parent, ou _top, alors il est positionné dans le formulaire.

$oForm                  = new LSForm( 'frmMyForm' );
$oForm->szName          = $oForm->szID;
$oForm->szTarget        = '_self';

Ajout d'un tableau d'objets dans le formulaire

<?php
$oForm            = new LSForm( 'frmTimeSample' );              // Création du formulaire
$txtTime          = new LSInput( 'time','txtTime' );            // Création de la zone 'time'
$txtTime->szValue = date( 'H:i' );                              // Positionnement de la valeur (hh:mm)
$txtTime->Min     = date( 'H:00' );                             // Minimum (doit être une heure valable)
$txtTime->Max     = sprintf( "%2d:00",(int) date( 'H' ) + 1 );  // Maximum (doit être une heure valable)
$txtTime->Step    = 300;                                        // Incrément de 5 minutes (300 sec)
$lblTime          = new LSLabel( 'lblTime',null,'Time: ' );     // Création d'un label
$oForm->AddObject( array( $lblTime,$txtTime ) );                // Ajout du label et de la zone 'time' au formulaire
$szHTML = $oForm->Render();                                     // Rendu HTML du formulaire
echo $szHTML;                                                   // echo
?>

Précédent Suivant