Tutoriels Informatique (InfoWebMaster)

[jQuery] Cr�er un bouton de retour en haut de page

Tue, 05 Oct 2010 17:17:53 +0100

La biblioth�que jQuery est gratuite et permet d'ajouter des effets en Javascript sur un site web. Ce tutoriel explique comment cr�er un bouton qui permet de retourner en haut de page, gr�ce � un effet de scroll plus agr�able � regarder qu'un effet basique qui consiste � "sauter" en haut de page.
Pour tester ce que permet de faire ce tutoriel, il est possible d'utiliser cette page d'exemple: bouton jQuery de retour en haut de page.

Pr�requis

Il n'est pas n�cessaire d'avoir des connaissances en Javascript, ni m�me de grande connaissance en XHTML. Il faut juste �tre un peu d�brouillard et avoir un site sur lequel il est possible de personnaliser la source.

Installer la biblioth�que jQuery

La premi�re �tape consiste � ajouter la biblioth�que jQuery dans la source de la page web. Il y a un code � utiliser pour que cette biblioth�que puisse s'utiliser. Pour cela il faut ajouter le code suivant entre les balises <head> et </head> de la page web:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Ce code r�cup�re la biblioth�que jQuery sur une adresse externe. L'avantage, c'est que certains sites utilisent d�j� ce code et que les visiteurs peuvent donc d�j� avoir la biblioth�que en cache sur le navigateur. En d'autres mots, il n'y a pas besoin de la t�l�charger � nouveau, ce qui acc�l�re le temps d'affichage des pages web.
Alternativement, il est possible de se rendre sur le site de jQuery, de t�l�charger la derni�re version de la biblioth�que, de l'envoyer sur un site web et d'adapter le code pr�c�dent en rempla�ant la valeur de src.

Bouton XHTML

La seconde �tape consiste � ajouter le bouton dans le corps de la page. Il y a plusieurs fa�ons de cr�er un tel bouton. Pour faire simple, le code suivant peut �tre ins�r� en bas de page:

<div><a href="#header">Retour en haut</a></div>

Ce code cr�er un lien. Par d�faut il permet de retourner en haut de page sans effet. Il faut ajouter un code pour que jQuery am�liore l'effet pour retourner en haut.

Code jQuery

Pour finir, il faut ins�rer ce code Javascript dans le code de la page web, entre <head> et </head>:

<script type="text/javascript">

$(function() {

  $('a[href=#header]').click(function(){

    $('html').animate({scrollTop:0}, 'slow');

    return false;

});

});

</script>

Ce code donne un effet d'animation, lorsqu'un internaute clique sur un lien qui pointe vers une ancre "header". Pour tester le r�sultat il faut ouvrir une page web qui est suffisamment longue, descendre sur la page et cliquer sur le lien "Retour en haut". Normalement, le r�sultat sera le m�me que l'effet sur la page d'exemple de ce tutoriel.

Source: [jQuery] Cr�er un bouton de retour en haut de page.

Cr�er et installer un favicon

Sun, 03 Oct 2010 22:32:08 +0100

Le favicon est une petite ic�ne sur les sites web, qui se retrouve juste � c�t� de la barre o� il y a la barre d'URL (voir la capture d'�cran ci-dessous). Cette petite image donne une identit� visuelle � un site pour �tre retrouv�e plus facilement dans les favoris. Ce petit tutoriel explique comment cr�er et mettre une telle image sur un site web.

Format accept�

En g�n�ral les sites web choisissent le format ico, png ou gif. Malheureusement, tous les navigateurs ne g�rent pas tous ces formats. Les vieilles versions d'internet explorer affichent uniquement les images au format ico. De m�me, la dimension d'un favicon peut �tre de 16*16 pixels ou de 32*32 pixels, mais pour internet explorer il faut se contenter d'une image au format 16*16.
Le favicon peut avoir l'opportunit� d'�tre anim� (image GIF).

Cr�er le favicon

Il y a plusieurs mani�res de cr�er un favicon. Deux techniques vont �tre pr�sent�es.

Transformer une image en favicon

Il existe plusieurs ressources en ligne pour cr�er un favicon � partir d'une image ou � cr�er � partir d'un �diteur sp�cifique. Les liens suivants sont des outils en ligne gratuits pour cet usage:

La plupart de ces sites permettent d'envoyer une image et de la transformer automatiquement en favicon.

Utiliser un logiciel

Il est possible de cr�er un favicon � partir d'un logiciel de graphisme tel que Gimp. L'id�al est d'utiliser une image au format PNG ou ICO avec une dimension de 16*16px. Un tutoriel indiqu� "r�duire le poids des images" explique comment redimensionner une image avec Gimp.

Installer le favicon

La premi�re �tape consiste � envoyer l'image sur le site web.
Par d�faut les navigateurs c�l�brent tel que Firefox, Google Chrome, Opera ou encore Safari v�rifient si une image existe sous le nom "favicon.ico" � la racine d'un site. De cette fa�on, m�me si le site n'a pas fait de lien vers le favicon, le navigateur est en mesure de l'afficher. Toutefois, pour les autres navigateurs et logiciels en tout genre qui peuvent reprendre cette petite ic�ne, il faut utiliser un code particulier. Le code ci-dessous est � utiliser:

<link rel="icon" href="favicon.ico" />

Ou celui-ci:

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

En utilisant une image d'un format autre que "ico" il faut utiliser le code suivant, mais l'adapter selon le format de l'image:

Format PNG: modifier type par "image/png"
Format GIF: modifier type par "image/gif"
Format JPEG: modifier type par "image/jpeg"

Finalement, le code doit �tre ins�r� sur les pages en s'assurant de deux choses:

Placer le code entre les balises <head> et </head>
Adapter l'adresse de href s'il le faut

Puis, il ne reste plus qu'� tester le r�sultat.
Information: il faut s'assurer de rafraichir la page web de votre site au cas o� la page utilise un cache.

Source: Cr�er et installer un favicon.

[PHP] V�rifier le format d'une adresse email

Sat, 02 Oct 2010 00:03:11 +0100

Dans le langage PHP il est parfois n�cessaire de v�rifier la bonne conformit� d'une adresse email. C'est pratique par exemple pour v�rifier qu'un utilisateur � indiqu� une adresse email correct et non une suite de caract�re qui n'a rien � voir. Il existe plusieurs fa�ons en PHP pour v�rifier le format d'une adresse email. L'astuce ne permet pas de v�rifier que l'adresse email existe, mais de v�rifier qu'une chaine de caract�re respecte le m�me format qu'une adresse email.

Pr�requis

Ce tutoriel donne des exemples de code PHP. Pour bien comprendre et appliquer ce qui est expliqu�, il faut avoir des notions de bases en PHP.

Utiliser la fonction filter_var()

Fort heureusement, il y a une fonction PHP qui permet de v�rifier facilement si une chaine de caract�re ressemble � un email. Il s'agit de la fonction filter_var(). Le second param�tre de cette fonction doit �tre "FILTER_VALIDATE_EMAIL".

<?php

//$email = 'test'; // test avec une chaine qui n'est pas une adresse email

$email = 'test@example.com'; // test avec une chaine qui est une adresse email


if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // V�rifie si la chaine ressemble � un email

    echo 'Cet email est correct.';

} else {

    echo 'Cet email a un format non adapt�.';

?>

En utilisant ce code tel quel, le message "Cet email est correct" devrait s'afficher. Il est possible de d�placer les deux slashs de la premi�re ligne � la deuxi�me ligne, pour tester ce code avec un code qui ne ressemble pas � une adresse email.

Utiliser une expression r�guli�re

Le code pr�c�dent peut �tre r�alis� de fa�on similaire avec une expression r�guli�re (une REGEX). Le code PHP ci-dessous est donc pratiquement identique met utilise une REGEX.

<?php

//$email = 'test'; // test avec une chaine qui n'est pas une adresse email

$email = 'test@example.com'; // test avec une chaine qui est une adresse email

if (preg_match('#^[\w.-]+@[\w.-]+\.[a-z]{2,6}$#i', $email)) { // V�rifie si la chaine ressemble � un email

    echo 'Cet email est correct.';

} else {

    echo 'Cet email a un format non adapt�.';

?>

En testant ce code PHP, normalement le r�sultat sera le m�me que pr�c�demment, la page affichera "Cet email est correct".

Source: [PHP] V�rifier le format d'une adresse email.

S�curiser un dossier (avec htpasswd)

Fri, 01 Oct 2010 14:44:14 +0100

Sur un site web il peut �tre recommand� de s�curiser certains dossiers tels que la partie administration. Cela est facilement possible si la partie administration se trouve dans un dossier sp�cifique (exemple: un dossier appel� "admin").
Une m�thode assez simple pour tr�s bien s�curiser un tel dossier serait d'utiliser un fichier ".htpasswd". Cet article va expliquer dans ce tutoriel comment r�aliser une telle protection.

Tutoriel

Il faut noter que la m�thode d�crite dans ce cours s'utilise avec des serveurs qui fonctionnent sous Apache. Si un autre type de serveur est utilis� sur un site web, alors il est possible que �a ne fonctionne pas.

S�curisation d'un dossier

Lorsqu'il y a une protection par htpasswd une fen�tre s'ouvre pour demander un nom d'utilisateur et un mot de passe. Une fois le tutoriel termin�, voici un exemple de la fen�tre qui s'ouvrira lorsqu'un utilisateur souhaitera acc�der au dossier s�curis�:

Fen�tre n�cessitant une authentification

En entrant les bonnes donn�es (le nom d'utilisateur avec son mot de passe associ�) alors il est possible d'acc�der au dossier. Dans le cas contraire la page ne sera pas autoris� � �tre ouverte et il y aura alors une erreur 401 (aussi appel�e "Unauthorized").

Cr�ation du fichier htaccess

La premi�re �tape pour s�curiser un dossier c'est de cr�er un fichier htaccess. Ce fichier permet de s�curiser un dossier et permet d'indiquer au serveur o� se situe le pseudo et le mot de passe. Ainsi, le serveur saura quel sont les utilisateurs autoris� � acc�der � la zone s�curis�e.

Le dossier htaccess doit �tre cr�� partir du bloc-notes windows ou d'un �diteur de texte quelconque. Il faut noter que vous devez absolument ne pas lui donner d'extension (tel que .txt ou .doc). Le nom exact que vous devez lui donner c'est: ".htaccess". Cela pose souvent un soucis car le syst�me d'exploitation Windows ne permet pas de commencer un nom de fichier par un point. En raison de ce probl�me, il faut uniquement appeler le fichier "htaccess" pour le moment (sans le premier point et sans extension).

Le fichier htaccess doit ensuite contenir le code suivant:

Code pour le fichier .htaccess:

AuthName "Page d'administration prot�g�e, veuillez vous identifier"
AuthType Basic
AuthUserFile "/home/dossier/www/votre-repertoire/admin/.htpasswd"
Require valid-user

Toutefois, la ligne "AuthUserFile" doit imp�rativement �tre modifi�e pour qu'elle corresponde � votre site. Chaque site web poss�de un chemin absolu qui diff�re selon les h�bergeurs. Par cons�quent, il est n�cessaire d'effectuer une certaine manipulation pour le connaitre. Voici la manipulation a effectuer pour connaitre le chemin absolu de votre h�bergeur.

Il est tout d'abord obliger d'utiliser une page PHP. Pour vous donner un exemple clair, il est recommand� de cr�er une page expr�s pour d�terminer ce chemin absolu (que vous pouvez appel� "chemin-absolu.php" par exemple). Dedans il faut utiliser la fonction PHP "realpath". Autrement dit, il faut copier le texte suivant sur la page que vous venez juste de cr�er:

Code PHP � ins�rer sur la page "chemin-absolu.php":

<?php
echo realpath("chemin-absolu.php");
?>

Une fois que c'est fait, il ne reste plus qu'� uploader la page "chemin-absolu.php" sur le serveur (dans le dossier � s�curiser, tel que "admin"). Puis, il faut ouvrir cette page dans un navigateur web (par exemple � la page: http://www.example.com/admin/chemin-absolu.php).
Une fois la page ouverte, vous obtenez un chemin. C'est ce chemin qui va �tre utilis� dans le code donn� pr�c�demment (� la place o� il y avait AuthUserFile).

En ayant suivis correctement les instructions, le fichier appel� "htaccess" est pr�s � �tre utilis�. Il faut l'uploader sur le serveur. Finalement, il est possible de renommer le nom du fichier sur le serveur en ajoutant un "point" au d�but du nom "htaccess". De ce fait, le fichier s'appelle dor�navant ".htaccess".

Cr�ation du fichier htpasswd

Cette �tape est beaucoup plus simple (le plus dur � �t� effectu�). Le fichier htpasswd comporte les informations avec les noms des utilisateurs qui peuvent acc�der au dossier. Pour chaque utilisateur il y a un mot de passe associ�. Il faut savoir qu'il peut y avoir autant d'utilisateur que souhait�.

Il y a un code particulier � ins�rer dans le fichier ".htpasswd", car le mot de passe est cod� (pour �viter qu'il puisse �tre r�cup�r� par un utilisateur malveillant). Voici un exemple concret de code envisageable dans un tel fichier (exemple fictif):

Exemple de code � ins�rer sur la page ".htpasswd":

nom-utilisateur1:$1$hdkZ3x0v$iADjlj7l3V6T8dDuv3UhB/
nom-utilisateur2:$1$rRAJj8b6$bAa4BugX0ehWRHdo0Cbks/
nom-utilisateur3:$1$HtWwWac.$AoNSxMUcr.9aw2u5gP5Tu0

Sur ce code, il est possible de voir le nom d'utilisateur � gauche et le mot de passe crypt� � droite.

A noter que les webmasters qui ont un espace d'h�bergement sur free n'ont pas besoin d'avoir un mot de passe crypt�. Ce qui donne un code tel que celui-ci:

Exemple de code � ins�rer sur la page ".htpasswd":

nom-utilisateur1:mot_de_passe
nom-utilisateur2:motdepasse
nom-utilisateur3:password

Pour g�n�rer chacune des lignes il y a un outil pour g�n�rer un fichier ".htpasswd". En utilisant cet outil, il est possible d'obtenir tr�s facilement le code � ins�rer sur la page ".htpasswd". Rendez-vous sur cette page, inscrivez votre nom d'utilisateur et votre mot de passe, puis cryptez-les pour savoir le code qu'il faut ins�rer sur la page ".htpasswd". Lorsque vous aurez g�n�rer le code � l'aide du g�n�rateur de code htpasswd pour la page associ�e vous aurez juste � l'ajouter a votre dossier admin et ce sera fini.
Il ne faut pas perdre de vue qu'il faut cr�er la page "htpasswd" (sans le point pour les utilisateurs de Windows) puis penser � rajouter le point au d�but du nom du fichier.

Protection suppl�mentaire

Ce cours viens d'expliquer comment cr�er un fichier intitul� ".htpasswd", mais il est possible de nommer le fichier diff�remment, ce nom n'est pas obligatoire. Il est par exemple possible de nommer le fichier ".htnomdefichiersecuriter". De cette mani�re, si un pirate informatique recherche un fichier intitul� ".htpasswd" il ne trouvera rien sous ce nom.

Source: S�curiser un dossier (avec htpasswd).

Cr�er une page web en PHP

Thu, 30 Sep 2010 15:15:58 +0100

Ce cours simple permet de cr�er une petite page PHP simple. Il n'est pas n�cessaire de connaitre PHP pour r�ussir ce tutoriel. C'est le cours de base avant d'essayer d'aller plus loin avec PHP. A la fin du cours vous aurez cr�� une page PHP � mettre en ligne sur un site web.

Pr�requis

Pour bien comprendre ce tutoriel il est vivement recommand� d'avoir lu le cours pour cr�er sa premi�re page en XHTML. Car une page simple en PHP poss�de au minimum du contenu en XHTML et parce qu'il faut savoir comment utiliser l'�diteur de texte Notepad++.
Dans ce pr�c�dent tutoriel, vous avez cr�� une page web intitul� "page.html". Pour poursuivre ce tutoriel, vous devez obligatoirement avoir cette page.

Transformer la page en PHP

La premi�re �tape consiste � ouvrir le fichier "page.html" avec Notepad++. Une fois que c'est fait, il faut cliquer sur "fichier" -> "enregistrer sous". C'est alors qu'une fen�tre s'ouvre. Pour transformer la page de l'XHTML au PHP il faut s�lectionner le type PHP (dans la liste d�roulante � droite de "type:").

Enfin, il suffit de cliquer sur "Enregistrer" et la page PHP sera ainsi cr��.
Information: n'essayez pas de l'ouvrir avec un navigateur web, �a ne fonctionnera pas. Une page PHP doit obligatoirement �tre trait�e par un serveur web (ou un logiciel qui simule un serveur web). Pour voir la page, il faut donc l'envoyer sur votre espace d'h�bergement web.

Ins�rer du code PHP

En reprenant le code XHTML d�j� pr�sent sur la page, il est possible d'ajouter une ligne suppl�mentaire �crite en PHP. Voici le nouveau code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

  <head>

    <title>Titre de la page</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  </head>

  <body>

    <p>Contenu de la page.</p>

    <?php echo '<p>Cette ligne est �crite en PHP</p>'; ?>

  </body>

</html>

Tout ce qui se trouve entre <?php et ?> est interpr�t� comme du code PHP. Par ailleurs, il faut savoir que "echo" est une instruction qui stipule du texte � afficher. Tout le texte qui sera plac� entre les deux guillemets sera visible dans le code source de la page. Mais le code "<?php" ou m�me l'instruction "echo" ne sera pas visible dans la source de la page XHTML.
Pour voir le r�sultat dans un navigateur web, il faut bien entendu envoyer la page web sur un espace d'h�bergement (ou sur un logiciel qui simule un serveur web).

Source: Cr�er une page web en PHP.

Cr�er une page de contact en PHP

Thu, 30 Sep 2010 13:59:46 +0100

Ce petit tutoriel permet de cr�er une page web de contact en PHP. Ajout� � un site web, les visiteurs pourront contacter le webmaster du site. Ce cours est facile � r�aliser car tous les codes sont fournit et des explications sont fournissent. Ainsi, vous pouvez r�ussir � cr�er la page de contact en PHP, m�me si vous ne connaissez pas ce langage informatique.

Pr�requis

Il faut savoir comment cr�er une page web en PHP pour pouvoir y int�grer les codes suivants. De plus, pour mieux comprendre ce qui suis, c'est mieux si vous connaissez un peu le XHTML et le PHP (mais pas indispensable si vous �tes d�brouillard).
Quoi qu'il en soit, les tutoriels suivant peuvent aider si vous ne connaissez pas certain points abord�s plus loin.

D�finition des besoins

Cette petite partie d�finit ce qui va �tre cr�� tout au long de ce tutoriel. Les points ci-dessous permettent de stipuler les contraintes du formulaire de contact.

Demander le nom et pr�nom, l'email (pour pouvoir r�pondre � l'internaute apr�s qu'il est envoy� le message) et le message en lui-m�me
Obliger � l'utilisateur de pr�ciser son email et le message (le nom et le pr�nom �tant facultatifs)
V�rifier que l'email ressemble � un email (pour �viter que l'internaute �crive n'importe quoi)

Cr�er le formulaire XHTML

Le code ci-dessous est celui du formulaire en XHTML. Il faut copier et coller l'ensemble de ce code source sur une nouvelle page web.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    <title>Titre de la page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
    <h1>Contacter le webmaster</h1>
    <!-- Ceci est un commentaire HTML. Le code PHP devra remplac� cette ligne -->
    <form method="post" action="<?php echo strip_tags($_SERVER['REQUEST_URI']); ?>">
      <p>Votre nom et pr�nom: <input type="text" name="nom" size="30" /></p>
      <p>Votre email: <span style="color:#ff0000;">*</span>: <input type="text" name="email" size="30" /></p>
      <p>Message <span style="color:#ff0000;">*</span>:</p>
      <textarea name="message" cols="60" rows="10"></textarea>
      <!-- Ici pourra �tre ajout� un captcha anti-spam (plus tard) -->
      <p><input type="submit" name="submit" value="Envoyer" /></p>
    </form>
  </body>
</html>

Si vous utilisez un logiciel particulier pour la cr�ation des pages web, ce qui importe le plus est le code compris entre <body> et </body>.
Information: il y a un bout de code en PHP (celui situ� entre <?php et ?>). Il stipule l'URL courante de la page. Il d�finit que l'adresse o� le formulaire sera trait� est l'adresse courante.

Cr�er le code PHP

L'utilisation seule du code XHTML permet uniquement d'afficher le formulaire. Mais il faut maintenant cr�er le code qui va r�cup�rer les informations et les envoyer par email lorsque le visiteur cliquera sur le bouton "Envoyer".

Code simple

<?php

// S'il y des donn�es de post�es

if ($_SERVER['REQUEST_METHOD']=='POST') {

  // (1) Code PHP pour traiter l'envoi de l'email

  // R�cup�ration des variables et s�curisation des donn�es

  $nom = htmlentities($_POST['nom']); // htmlentities() convertit des caract�res "sp�ciaux" en �quivalent HTML

  $email = htmlentities($_POST['email']);

  $message = htmlentities($_POST['message']);

  // Variables concernant l'email

  $destinataire = 'contact@example.com'; // Adresse email du webmaster (� personnaliser)

  $sujet = 'Titre du message'; // Titre de l'email

  $contenu = '<html><head><title>Titre du message</title></head><body>';

  $contenu .= '<p>Bonjour, vous avez re�u un message � partir de votre site web.</p>';

  $contenu .= '<p><strong>Nom</strong>: '.$nom.'</p>';

  $contenu .= '<p><strong>Email</strong>: '.$email.'</p>';

  $contenu .= '<p><strong>Message</strong>: '.$message.'</p>';

  $contenu .= '</body></html>'; // Contenu du message de l'email (en XHTML)

  // Pour envoyer un email HTML, l'en-t�te Content-type doit �tre d�fini

  $headers = 'MIME-Version: 1.0'."\r\n";

  $headers .= 'Content-type: text/html; charset=iso-8859-1'."\r\n";

  
  // Envoyer l'email

  mail($destinataire, $sujet, $contenu, $headers); // Fonction principale qui envoi l'email

  echo '<h2>Message envoy�!</h2>'; // Afficher un message pour indiquer que le message a �t� envoy�
  
  // (2) Fin du code pour traiter l'envoi de l'email

?>

Le code est suffisamment comment� pour �tre comment� une nouvelle fois.

�viter les erreurs

Par d�faut le programme pr�c�dent ne respecte pas le cahier des charges. Il faut ajouter du code pour �viter l'envoi de l'email si l'utilisateur � oubli� d'indiquer le message ou un email valide. Le code ci-dessous reprend donc ce qui a d�j� �t� fait et ajoute des �l�ments suppl�mentaires. Encore une fois, il y a de nombreux commentaires pour comprendre la signification du code.

<?php

// S'il y des donn�es de post�es

if ($_SERVER['REQUEST_METHOD']=='POST') {

  // Code PHP pour traiter l'envoi de l'email

  $nombreErreur = 0; // Variable qui compte le nombre d'erreur

  
  // D�finit toutes les erreurs possibles

  if (!isset($_POST['email'])) { // Si la variable "email" du formulaire n'existe pas (il y a un probl�me)

    $nombreErreur++; // On incr�mente la variable qui compte les erreurs

    $erreur1 = '<p>Il y a un probl�me avec la variable "email".</p>';

  } else { // Sinon, cela signifie que la variable existe (c'est normal)

    if (empty($_POST['email'])) { // Si la variable est vide

      $nombreErreur++; // On incr�mente la variable qui compte les erreurs

      $erreur2 = '<p>Vous avez oubli� de donner votre email.</p>';

    } else {

      if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {

        $nombreErreur++; // On incr�mente la variable qui compte les erreurs

        $erreur3 = '<p>Cet email ne ressemble pas un email.</p>';

  if (!isset($_POST['message'])) {

    $nombreErreur++;

    $erreur4 = '<p>Il y a un probl�me avec la variable "message".</p>';

  } else {

    if (empty($_POST['message'])) {

      $nombreErreur++;

      $erreur5 = '<p>Vous avez oubli� de donner un message.</p>';

  }
  
  // (3) Ici, il sera possible d'ajouter plus tard un code pour v�rifier un captcha anti-spam.

  if ($nombreErreur==0) { // S'il n'y a pas d'erreur

    // Ici il faut ajouter tout le code pour envoyer l'email.
    // Dans le code pr�sent� au chapitre pr�c�dent, cela signifie au code entre les commentaires (1) et (2).

  } else { // S'il y a un moins une erreur

    echo '<div style="border:1px solid #ff0000; padding:5px;">';

    echo '<p style="color:#ff0000;">D�sol�, il y a eu '.$nombreErreur.' erreur(s). Voici le d�tail des erreurs:</p>';

    if (isset($erreur1)) echo '<p>'.$erreur1.'</p>';

    if (isset($erreur2)) echo '<p>'.$erreur2.'</p>';

    if (isset($erreur3)) echo '<p>'.$erreur3.'</p>';

    if (isset($erreur4)) echo '<p>'.$erreur4.'</p>';

    if (isset($erreur5)) echo '<p>'.$erreur5.'</p>';
    // (4) Ici, il sera possible d'ajouter un code d'erreur suppl�mentaire si un captcha anti-spam est erron�.

    echo '</div>';

?>

Et voil�, avec ce nouveau code, il y aura des erreurs d'affich�es si le visiteur oubli d'inscrire des informations l� o� c'est obligatoire et il y aura une erreur s'il entre une fausse adresse email. Vous pouvez copier/coller le code (en l'adaptant l� o� c'est demand�) pour v�rifier soi-m�me la bonne conformit� du code.

Mettre un captcha anti-spam simple

Le code cr�� jusqu'� pr�sent est tr�s pratique, mais il peut �tre exploit� par des robots. Pour se prot�ger contre de telles utilisations il faut utiliser un captcha anti-spam. Il s'agit d'une protection que seuls les humains peuvent passer. Les robots feront normalement un erreur. Pour faire tr�s simple, le formulaire va demander aux humains de r�pondre � une petite question qui sera: "Quel est le r�sultat de 1+3" (les humains devront r�pondre: 4).
Pour cela il faut ajouter ce champ au formulaire XHTML:

<p>Combien font 1+3: <span style="color:#ff0000;">*</span>: <input type="text" name="captcha" size="2" /></p>

Enfin, il faut ajouter le code PHP qui va g�rer cette nouvelle contrainte. Voici le code qui doit �tre ajout� au commentaire (3):

<?php
  if (!isset($_POST['captcha'])) {
    $nombreErreur++;
    $erreur6 = '<p>Il y a un probl�me avec la variable "captcha".</p>';
  } else {
    if ($_POST['captcha']!=4) { // V�rifier que le r�sultat de l'�quation est �gal � 4
      $nombreErreur++;
      $erreur7 = '<p>D�sol�, le captcha anti-spam est erron�.</p>';
    }
  }

?>

Maintenant qu'une nouvelle contrainte est d�finit, il faut ajouter un code PHP � l'emplacement du commentaire (4) afin de sp�cifier le message � afficher pour les erreurs $erreur6 et $erreur7:

<?php
	if (isset($erreur6)) echo '<p>'.$erreur6.'</p>';
	if (isset($erreur7)) echo '<p>'.$erreur7.'</p>';

?>

Une fois mis en place, la page de contact sera am�lior�e d'une mani�re basique contre les robots de spam.

T�l�charger la page de contact PHP

Pour simplifier tout ce qui a �t� dit, et au cas o� vous n'avez pas compris o� et comment ajouter les codes, vous pouvez t�l�charger le code de la page de contact. Ce fichier est au format texte, mais contient tout le code n�cessaire. Il suffit de renommer la page en ".php" et de l'installer sur votre site pour pouvoir l'utiliser.

Source: Cr�er une page de contact en PHP.

Cr�er une page XHTML simple

Tue, 28 Sep 2010 23:19:11 +0100

Ce petit cours pour d�butant explique comment cr�er une page web (en XHTML), m�me si vous n'y connaissez rien en informatique et programmation. A la fin de ce tutoriel, vous aurez cr�� une premi�re petite page web et obtenu des connaissances de bases en XHTML.

Pr�requis

Il est n�cessaire d'avoir envie d'apprendre quelques bases sur le langage X HTML et de poss�der un �diteur de texte basique. Si vous n'en avez pas, je vous sugg�re de t�l�charger Notepad++, qui est un �diteur texte tr�s pratique pour la programmation.

Cr�er un fichier XHTML

La premi�re chose � faire consiste � ouvrir une nouvelle page ("fichier" -> "nouveau"). Puis il faut enregistrer cette page vierge au format XHTML. Pour cela il faut cliquer sur "fichier" -> "enregistrer sous", choisir l'endroit o� la page web doit �tre enregistr�e et indiquer un nom tel que "page.html". Pour information, il y a deux extensions possibles ".html" ou ".htm". Pour finir, il faut cliquer sur "Enregistrer" pour sauver la toute fraiche page nouvellement cr��e.

Code d'une page XHTML simple

La page web est donc cr��, mais elle est vierge. Pour cr�� une page web simple il faut copier et coller le code XHTML suivant:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

  <head>

    <title>Titre de la page</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  </head>

  <body>

    <p>Contenu de la page.</p>

  </body>

</html>

Une fois ce code cr��, il faut enregistrer en s�lectionnant "fichier" -> "enregistrer". Voil�, la page est cr��e.

Ouvrir la page web

Maintenant que la page est cr��, il doit y avoir un fichier de ce type � l'endroit o� vous avez enregistr� la page:

Pour ouvrir la page avec un navigateur web (exemple: Internet Explorer, Firefox ...) il faut double-cliquer sur le fichier. Si vous utilisez Firefox vous devriez voir une page de ce type:

Vous pouvez dors et d�j� remarquer que le titre "Titre de la page" est visible en haut du navigateur et que le contenu "Contenu de la page" est visible sur la page.

Comprendre le code

Vous avez d�j� surement compris o� vous devez agir pour modifier le titre et le contenu. Voici des explications plus d�taill�es:

La premi�re ligne stipule le doctype. �a donne des informations sur le code qui le succ�de, pour que les navigateurs web sachent comment afficher la page
La page web est comprise entre <html> et </html>
Le code entre <head> et </head> est interpr�t� par le navigateur et stipule des directives pour la page web
Le texte entre <title> et </title> est tout simplement le titre principal d'une page web
Le texte qui commence par <meta ...> d�finie le codage des caract�res
Le code entre <body> et </body> c'est le texte qui sera visible sur la page
La balise d�finit un paragraphe. Le texte pr�sent entre et est le texte d'un paragraphe

Aller plus loin

Pour aller plus loin, il est possible d'essayer d'autre balises XHTML. Par exemple pour mettre du texte en gras il faut placer du texte entre et . Et puis pour mettre du texte en italique il faut le mettre en et .

Source: Cr�er une page XHTML simple.

Envoyer un email en PHP

Tue, 28 Sep 2010 21:28:04 +0100

Le langage PHP permet d'envoyer des email facilement gr�ce � la fonction mail(). Ce tutoriel va expliquer comment envoyer facilement un email gr�ce � cette fonction. Plusieurs codes seront fournit pour envoyer des emails basiques, ou au format HTML ou encore avec des en-t�tes suppl�mentaires qui permettent de faire des emails qui passent plus facilement les filtres anti-spam.

Pr�requis

Il est n�cessaire d'avoir un espace web et de savoir comment cr�er une page en PHP. L'id�al est d'avoir des notions en PHP pour comprendre les codes donn�es ci-apr�s.

Envoyer un email au format texte basique

Le code PHP ci-dessous permet d'envoyer un email basique � n'importe quelle adresse email.

<?php
$destinataire = 'contact@example.com'; // Adresse email du destinataire
$sujet = 'Titre du message'; // Titre de l'email
$message = 'Bonjour. Ceci est un message qui sera envoy� par email. Au revoir.'; // Contenu du message de l'email

mail($destinataire, $sujet, $message); // Fonction principale qui envoi l'email
echo 'Email envoy�!';
?>

Les trois variables $destinataire, $sujet et $message contiennent les principales informations (� personnaliser) de l'email.

Envoyer un email au format HTML

Alors que le code pr�sent� dans le chapitre ci-dessus est tr�s basique, l'autre code, pr�sent� ci-dessous est au format HTML pour pouvoir personnaliser et agr�menter le message (ajouter des images, un design ...).

<?php
$destinataire = 'contact@example.com'; // Adresse email du destinataire
$sujet = 'Titre du message'; // Titre de l'email
$message = '<html>
<head>
<title>Titre du message</title>
</head>
<body>
<p>Contenu du message. Les balises <strong>HTML</strong> peuvent �tre utilis�e.</p>
</body>
</html>'; // Contenu du message de l'email

// Pour envoyer un email HTML, l'en-t�te Content-type doit �tre d�fini
$headers = 'MIME-Version: 1.0'."\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1'."\r\n";

mail($destinataire, $sujet, $message, $headers); // Fonction principale qui envoi l'email
echo 'Email envoy�!';
?>

Le code est presque similaire mis � part que le message contient du code HTML et que la variables $headers contient un ent�te qui d�finie le type de l'email comme �tant du code HTML.

Ajouter des en-t�tes additionnels

Gr�ce aux en-t�tes de l'email, il est possible d'am�liorer l'envoi d'email par PHP. Il est possible d'am�liorer le contenu de la variable $headers gr�ce � ce code:

<?php
$headers = 'MIME-Version: 1.0'."\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1'."\r\n";
$headers .= 'From: "Votre Nom et Pr�nom"<contact@example.com>'."\n"; // Votre adresse email (� personnaliser)
$headers .= 'Reply-To: contact@example.com'."\n"; // Votre adresse email (� personnaliser).
// Lorsque le destinaire cliquera sur "r�pondre", par d�faut l'adresse email de "reply-to" sera utilis�e
?>

Cet exemple n'utilise que quelques en-t�tes. Il en existe d'autres pour divers objectifs mais ceux pr�sent�s sont les plus courant.
En installant et testant ces codes, vous �tes maintenant capable d'envoyer un email avec PHP.

Source: Envoyer un email en PHP.

R�duire le poids des images

Mon, 27 Sep 2010 23:40:22 +0100

Le poids des images web est important pour optimiser la vitesse d'affichage d'une page web. Ce tutoriel explique comment r�duire le poids des images avec le logiciel The Gimp et l'application web Smushit de Yahoo.

Pr�requis

Ce tutoriel est assez simple � comprendre et d�tail la plupart des �tapes. Id�alement il faut avoir The Gimp d'install� sur votre ordinateur ou au mieux il faut tout de m�me savoir comment t�l�charger et installer ce logiciel.

Utiliser The Gimp

Le logiciel Gimp est un outil de retouche d'image. C'est un peu l'�quivalent gratuit de Photoshop. Si vous ne l'avez pas sur votre ordinateur il est facile de t�l�charger Gimp et de l'installer.

Redimensionner une image

En redimensionnant une image, le poids peut �tre r�duit significativement. Cela est avantageux d'autant plus que le changement de dimension n'affecte pas forc�ment la qualit� de l'image pour certain type d'utilisation.
Pour redimensionner une image il suffit de cliquer dans la barre des t�ches sur "image" (� c�t� de "fichier", "�dition" ...) puis sur "�chelle et taille de l'image".

D�s lors une fen�tre s'ouvre pour choisir les nouvelles dimensions. Il faut ensuite valider le choix des nouvelles dimensions en cliquant sur "�chelle".

Et enfin enregistrer l'image en cliquant sur "fichier" -> "enregistrer".

R�duire la qualit� d'une image Jpeg

Le format d'image Jpeg peut �tre compress� � diff�rent taux. Plus une image est compress�, moins elle est lourde et plus la qualit� se d�grade. L'avantage de Gimp c'est que lorsqu'une image Jpeg est sauvegard�e, le logiciel demande automatiquement � quel taux il doit �tre compress�.
L'�tape pour choisir le taux de compression consiste � cliquer sur "Fichier" -> "Enregistrer sous" et dans l'une des fen�tres qui s'ouvre, il suffit de choisir la qualit� entre 0 et 100.

Utiliser Smushit

L'outil Smushit permet de compresser une nouvelle fois une image. L'outil supprime les informations inutiles sans toucher � la qualit� de l'image. Voici les points caract�ristiques qui font le succ�s de Smushit:

Plusieurs types d'image accept�e
Plusieurs fa�on pour envoyer une image (upload ou � partir d'une URL)
Informations pour savoir le poids qui a �t� gagn�
A la fin toutes les images sont incluses dans un fichier zip

Avec Gimp et Smushit, les images peuvent optimis�e au mieux. C'est ainsi id�al pour optimiser le chargement des images sur un site web.

Source: R�duire le poids des images.