Faire son site perso

Le minimum - Principes - HTML - JavaScript - MySQL - PHP

Le minimum

sommaire

Le minimum pour faire créer son site perso Web, c'est :

• Une idée de site, c'est presque le plus dur !
• Un éditeur de texte, par exemple Notepad sous Windows.
  Cependant, il est sans doute plus simple de commencer avec FrontPage. Ce logiciel permet de débuter assez facilement la création de pages. Il permet de gérer les liens des pages entre elles. De plus, on peut se rendre compte rapidement du rendu du site, puisque que l'on peut jouer avec le site sans être obligé de l'héberger.
  Personnellement, je continue à utiliser beaucoup FrontPage 
• Un hébergeur (FAI : Fournisseur Acces Internet), payant ou gratuit. L'hébergeur permet de mettre les pages créer en local (sur son PC) sur un serveur "Web" accessible par tous. Il fournit souvent des adresses e-mail en plus qui servent pour le courrier électronique.
  J'ai choisi Free, car c'est gratuit. De plus, on peut mettre jusqu'à 100 Mo de données. Enfin, il y a la possibilité de gérer une base de données (MySQL) ...
• Un outil de transfert de fichiers du PC local sur le serveur (FTP : File Transfer Protocol).
  Pour ma part, j'utilise encore beaucoup le FTP intégré dans Windows, il me suffit de modifier un fichier texte où je donne la liste des fichiers à transférer. Cela est manuel mais reste acceptable au regard du nombre de pages du site.
  Sinon, j'ai de plus un logiciel très pratique, Crystal SiteUpdater qui permet d'automatiser la mise à jour des sites. Il compare les différences entre les fichiers sur le PC local et sur le serveur et fait les mises à jour automatiquement... vraiment très pratique.

Si on a rien compris à ce qui a été dit ici, on peut aller vérifier quelques termes techniques sur un Dico du Web ou me demander des précisions. 

Puis, il faut se lancer...

Principes

sommaire

Quelques principes, fruit de quelques erreurs et galères.

1. Conception
   Il faut mieux bien concevoir sur la papier l'architecture du site, en s'inspirant de ce que l'on a vu sur le Web. Il sera toujours temps après de voir si on peut le faire. Par architecture, j'entends des réponses aux questions suivantes :
   • Un menu, un barre de navigation ? Où la mettre ? Quelles rubriques ?
   • Comment les pages vont-elles s'enchaîner ? Est-ce logique ? Est-ce facile ?
   • Quelles couleurs ? Quelles polices utilisées ? (voir l'utilisation des styles en HTML)
   • Des images ? Où ? ...
2. Contenu
   Que mettre dans le site ? Il faut mieux s'assurer que cela ne choque, voire ne soit pas illégal...
3. Se renseigner pour la réalisation. Pour cela, il y a beaucoup de sites qui proposent des exemples, des conseils plus ou moins avisés. Je reviendrais sur ces conseils dans les rubriques suivantes.
4. Référencer son site
   Cela correspond à le faire connaître, il y a principalement deux types de référencement gratuit. Je ne parle pas des moteurs de recherche qui fonctionnent 'automatiquement'.
   • Par demande ponctuelle (Yahoo, ...). Il faut aller sur le site sur lequel on veut apparaître. On choisit la rubrique sur laquelle on veut apparaître et on demande. Le site se réserve le fait d'accepter ou pas.
   • Par des aides au référencement (Add-Site) qui permet de gratuitement ou pas de se faire référencer sur une multitude d'annuaires. Mais, attention, le nombre ne promet pas forcément la qualité...

HTML

sommaire

Le HTML est le langage de base pour créer des documents sur Internet. si on peut très bien commencer à créer des pages et un site sans rien y connaître, il faut cependant assez vite s'y mettre.

Bien sûr, on n'est pas obligé de 'tout savoir'. Cependant, j'ai un bon document de référence qui se trouve sur Internet. De même, on peut s'intéresser au DHTML (Dynamic HTML) en utilisant le document suivant.

En simplifié et accéléré, tout fonctionne avec des "tags" qui disent ce qu'il faut faire avec le texte qui suit. Il y a le "tag" ouvrant et son pendant celui qui ferme. Ainsi un paragraphe commence par <p> et finit par </p>. de même, il existe des titres (<h1> ... <h6>), des liens (<a href="">), etc... Avec FontPage, on peut se rendre compte assez facilement de ce que l'on fait et de ce que cela cache.

Il est facile de créer de multiples pages HTML mais la gestion devient rapidement fastidieuse. On peut essayer d'uniformiser un peu la gestion de ces pages en uniformisant par des feuilles de style

Feuilles de Style

Les feuilles de style (extension .css) permettent de définir des constantes de bases dans toutes les pages du site. Il suffit de rajouter dans l'entête (entre <head> et </head>), la commande suivante :

<link rel="StyleSheet" type="text/css" href="perso.css"> 

Dans le fichier perso.css, on définit alors par exemple que les tags p, h1, h2, h3 utiliseront la fonte par défaut "Comic Sans MS".

p, h1, h2, h3
{font-family: Comic Sans MS, Arial}

Bien sûr, on peu multiplier ce genre de définition...

Meta Tags

Ils sont principalement utilisés par les moteurs de recherche, mais servent aussi pour certains annuaires. Ils permettent de définir des caractéristiques de la page. Par exemple, on définit le titre de la page, par le meta tag suivant:

<meta name="title" content="Faire son site perso">

Finalement, le HTML est assez robuste mais requiert rapidement une énorme énergie pour gérer les multiples pages qui servent aux diverses informations d'un site. C'est pourquoi, il est nécessaire de passer à l'étape suivante simplifier et uniformiser, en un mot gagner du temps dans la gestion de son site.

JavaScript

sommaire

L'avantage du JavaScript, c'est que cela permet de 'programmer' et donc de générer des pages 'à la volée'. Ce qui est aussi agréable, c'est que le JavaScript ne demande aucune installation de logiciel particulière pour l'interpréter, l'exécuter. Donc on peut développer et essayer sur son PC directement. Une dernière validation sera peut-être nécessaire une fois la mise à jour effectuée sur le serveur, encore que cela marche souvent directement...

Il existe un bon document de référence sur Internet, je l'utilise régulièrement. Alternativement, j'ai copié l'ensemble de ces documents pour reproduire cette référence sur mon PC (cela évite la connexion obligatoire). Par ailleurs, il existe de nombreux sites qui proposent des exemples de Javascript, un de mes préférés est l'Editeur JavaScript.

Cela dit, je vais présenter des exemples de ce que l'on peut faire avec un peu de JavaScript.

Une page de cadre suffit !

Comme, vous pouvez vous rendre compte, ce site utilise souvent un sommaire à droite (Tour du monde / Photo / Dernières Nouvelles).

En Html, il faut à chaque fois gérer une page pour les cadres qui donne à chaque fois le sommaire à droite et ce que le chapitre au centre... Ce qui multiplie le nombre de page assez inutilement.

En JavaScript, il suffit de :

• appeler un page générique (frame.htm) avec deux paramètres.

  <p><a href="frame.htm?newslast.htm&news_ref.htm">Quoi de neuf</a></p>

• Récupérer les deux paramètres. Dans ce cas on peut même gérer trois paramètres séparés par le "&". On remarque aussi que l'on gère la notion de signet dans la page avec la fonction hash.

  <script language="JavaScript">
  <!--
  // Valeur par défaut
  var ar0 = "centre.htm";
  var ar1 = "sommaire.htm";
  var ar2 = "";
  
  var str = location.search;
  var pos = str.indexOf("&");
  var hsh = location.hash;
  
  if (pos != -1) {
      ar2 = str.substring(pos + 1, str.length);
      window["ar0"] = str.substring(1, pos);
      window["ar1"] = ar2;
  
      pos = ar2.indexOf("&");
      if (pos != -1) {
          window["ar1"] = ar2.substring(0,pos);
          ar2 = ar2.substring(pos + 1, ar2.length);
          ar0 = ar0 + "?" + ar2
      }
      else {
      ar2 = "";
      }
  
      if (hsh.length != 0 ) {
          ar0 = ar0 + hsh
      }
  
  }
  
  // -->
  </script>

• Générer la page de cadre ...

  <script language="JavaScript">
  <!--
  document.write (
  '<frameset cols="*,150">' ,
  ' <frame name="centre" src="',ar0,'" marginheight=5 marginwidth=10>' ,
  ' <frame name="toc_droit" target="centre" src="',ar1,'">' ,
  ' <noframes>' ,
  ' <body>' ,
  ' <p>Cette page utilise des cadres, mais votre navigateur ne les prend pas en charge. ' ,
  ' <p> ar0=',ar0,' / ar1=',ar1,' / ar2=',ar2,
  ' </body>' ,
  ' </noframes>' ,
  '</frameset>'
  );
  // -->
  </script>

Afficher les pages de photos

De la même manière, on peut très bien gérer l'affichage de toutes les photos à l'aide de deux pages en JavaScript.

Pour cela, j'ai une page HTML qui me sert de sommaires de toutes les pages de photos que je vais appeler. J'appelle la page voulue par :

<a href="photo_book.htm?23">Page 23</a> ou <a href="frame.htm?photo_book.htm&photo_ref.htm&23">Page 23</a>

Enfin, tout est fait par photo_book.htm (plus exactement en combinaison avec frame.htm pour avoir la page de cadre):

1. On définit dans un fichier de données (photo.js) toutes les pages de photos dans l'entête.
2. On charge les données de la pages voulues (fonction loaddata).
3. On affiche les vignettes des photos avec le titres et le lien pour afficher la photo en plus grand dans un tableau.

La page est donc :

<head>
<script language="JavaScript">
<!--
var ar0 = "00";
var ar1 = "titre" ;
var dir = "photos" ;
var str = location.search;
if (str.length > 1)
   ar0 = str.substring(1,str.length);
// -->
</script>

<script src="include/photo.js"></script>
</head>
<body>
<script language="javascript">
<!--
loaddata(ar0);

// Generate table
document.write('<h5>',ar1,'</h5>');
document.write('<table border="0">');

for (var i = 0; i < max; i++) {
    if ( i % 5 == 0 ) {
        document.write('</tr>');>
        document.write('<tr>');
    }

    if ( pht[i] == "" )
        document.write (
        ' <td valign="middle" align="center" ' ,
        ' style="border-style: outset; border-width: 2">',
        ' <font face="Comic Sans MS" size="2">',cmt[i],'</td>'
        )
    else
        document.write (
        ' <td valign="middle" align="center" ' ,
        ' style="border-style: outset; border-width: 2">' ,
        ' <a href="photo_view.htm?'dir,'&',pht[i],'&',cmt[i],'">' ,
        ' <img src="',dir,'/',pht[i],'_s.jpg" border="0" alt="',cmt[i],'"></a>' ,
        ' <br><font face="Comic Sans MS" size="1">',cmt[i],'</font></td>'
        ) ;
}
document.write('</table>');
// -->
</script>
</body>

Dans le fichier "include" photos.js, on a la définition :

1. des variables.
2. de la fonction loaddata.
3. des différentes pages.

var max = 25
pht = new Array(max) // Define pictures lists
cmt = new Array(max) // Define comments on pictures

// Initialize values ...
for (var i = 0; i < max; i++) {
pht[i]="" ;
cmt[i]="" ;
}

function loaddata(page) {
dir="photos"
switch (page) {
case "23" : data23(); break;
case "22" : data22(); break;
...
}

function data23() {
ar1="Titre de la Page 23"
// Define values ...
var i=0
pht[i]="photo01"
cmt[i]="Commentaire photo01"
i++
pht[i]="photo02"
cmt[i]="Commentaire photo02"
i++
...
}

De la même manière, on affiche la photo en grand en utilisant un fichier JavaScript (photo_view.htm) en passant comme paramètres le répertoire, le nom du fichier et la description de la photo.

MySQL

sommaire

Pour encore automatiser le travail précédent, on peut penser à utiliser une base de données ou l'on a défini la table des photos et la table des pages de photos. Ce éviterait de gérer manuellement le fichier photo.js. Enfin, il faut une base de données. Le plus simple est d'utiliser MySQL (qui fonctionne de pair avec PHP). Une bonne documentation existe sur Nexen.

Free, fournit un bon outil de gestion de cette base de données. Enfin, pour aller plus loin il faut se lancer dans le PHP.

PHP

sommaire

On peut tout faire en PHP. Mais, pour moi, il y a une limitation; cela ne fonctionne que si :

• La page est envoyée sur le serveur Free et donc, il faut rester connecter des heures pour développer, envoyer, tester, corriger, etc ...
• On installe un serveur PHP en local. Là, on se lance dans du Linux / Apache / etc... C'est pire ! Cela demande une certaine connaissance (plutôt une connaissance experte).
• Enfin, ce n'est pas trop simple, le code se rapproche du C. il faut ajouter les célèbres "\n" pour que le code généré possède des retours à la ligne.

Cependant, on peut multiplier les possibilités en utilisant les bases de données et s'affranchir ainsi de fichier fichier "include" en javascript. Cela revient donc à automatiser plus encore les pages qui sont pilotées par la base de données. A l'extrême limite, il pourrait n'y avoir qu'une seule page en PHP qui gère tout le site en fonction des paramètres passés à cette page. Pratiquement, il est plus logique de développer des pages différentes. Pour s'affranchir dans une certaine mesure des erreurs PHP (base indisponible, server en erreur), on peut toujours ajouter une réference à une page HTML.

<p align="center"><font size="1">Si l'affichage n'est pas correct, <a href="frame.htm?photo_book.htm&photo_ref.htm&31">cliquez-ici</a></font></p>

Un documentation de PHP existe aussi en ligne sur Nexen. PHP-Scripts propose de nombreux exemples de scripts PHP, mais ce n'est pas le seul site de ce genre.

Ainsi, dans ma page d'accueil , l'affichage d'une photo aléatoire et l'affichage des trois prochains anniversaires est fait en PHP.

Afficher une photo au hasard

Il suffit de:

• Utiliser la fonction aléatoire fournie par PHP en l'initialisant correctement (srand).
• Récupérer la nombre de photos de la page de données ($max).
• Définir un nombre aléatoire pour récupérer la photo ($id).
• Récupérer les informations de la photo.
• Afficher la photo en limitant la taille (width=180).
• Permettre un lien sur la page où cette photo apparaît.

Tout est dans le code suivant...

<script language="php">
# Define the seed for proper rounding
srand((double)microtime()*1000000);

# Define default values
$photo="photo01" ;
$comment="Commentaire Photo 01" ;
$groupe="Page01";
$page=1;

$free_login = 'login';
$free_passwd = 'Mot_de_passe';

# Connect to DB
$db = mysql_connect('sql.free.fr',$free_login,$free_passwd) or die ("probleme connexion");
@mysql_select_db($free_login,$db) or die ("probleme dans selection base");

# Check Connexion
if ($db <> 0) {

    # Get max value
    $sql = "SELECT MAX(pic_nbr) FROM photo" ;
    $res = mysql_query($sql,$db);
    $max = mysql_result($res,0,0);

    $id = rand(1, $max) ;

    # Get the photo !
    $sql = "SELECT a.pic_nam, a.pic_desc_txt, b.pic_grp_nam, b.pic_grp_pg ";
    $sql .= "FROM photo a, photo_grp b ";
    $sql .= "WHERE a.pic_nbr = $id AND a.pic_grp_id = b.pic_grp_id ";
    $res = mysql_query($sql,$db);
    $photo = mysql_result($res,0,0);
    $comment = mysql_result($res,0,1);
    $groupe = mysql_result($res,0,2);
    $page = mysql_result($res,0,3);

}

echo '<p align="center">' ;
echo '<a href="photo_view.htm?',$photo,'&',$comment,'">',$comment,'</a><br>' ; echo "\n" ;
echo '<a href="photo_view.htm?',$photo,'&',$comment,'">' ;
echo '<img src="photos/',$photo,'.jpg" border=0 width=180 alt="',$comment,'"></a><br>' ; echo "\n" ;

if ($page <> 0) {
    $page = sprintf("%02d", $page-1);
    $groupe = sprintf("<a href=\"frame.htm?photo_book.php&photo_ref.php&page=%s\">%s</a>", $page, $groupe) ;
}

echo '<font size=1>( catégorie : ',$groupe,')</font></p>' ; echo "\n" ;
@mysql_close($db) ;
</script>

Afficher les trois prochains anniversaires

Il suffit de:

• Définir la date du jour ($today) et le nombre maximum d'anniversaires à afficher ($max).
• Définir une fonction d'affichage de la date (en fonction de ce qui est récupéré dans les tables).
• Récupérer les anniversaires qui sont dans les jours à venir (>= $today).
• Afficher les prochains anniversaires (par un boucle) en prenant le nombre d'anniversaires trouvés ($row).
• Si on a pas affiché assez d'anniversaire ($row < $max) on récupère les anniversaires à partir du 1^er Janvier. Ceci peut arriver quand on est en fin d'année !
• Afficher les anniversaires qu'il faut pour compléter la liste...

Tout est dans le code suivant...

<script language="php">
# Define default values
$today=date("m")*100+date("d") ;
$year=date("Y");
$max=3;
$day=array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
$mth=array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");

function display_birth ($name, $yr, $birth) {
    global $day, $mth, $year, $today ;
    $iyear = $year;

    if ( $birth + 0 < $today ) $iyear = $iyear + 1;
    if ( strlen($birth) < 4 ) $birth = "0" . $birth ;

    $imth=substr($birth,0,2);
    $iday=substr($birth,2,2)+0;
    echo '',$day[date ("w", mktime(0,0,0,$imth,$iday,$iyear) )],' ',$iday,' ',$mth[$imth-1],'</i> :' ;
    echo ' ',$name,' (',substr($yr,2,2),')' ;
    echo "\n";
}

$free_login = 'login';
$free_passwd = 'Mot_de_passe';

# Affiche la première ligne
echo '<p><b>Anniversaires</b>';

# Connect to DB
$db = mysql_connect('sql.free.fr',$free_login,$free_passwd) or die ("probleme connexion");
@mysql_select_db($free_login,$db) or die ("probleme dans selection base");

# Check Connexion
if ($db <> 0) {
    # Get the birthday !
    $sql = "SELECT a.prsn_frst_nam, a.brth_day_dat, a.brth_yr ";
    $sql .= "FROM person a ";
    $sql .= "WHERE a.brth_day_dat >= $today " ;
    $sql .= "ORDER BY a.brth_day_dat, a.prsn_frst_nam " ;
    $res = mysql_query($sql,$db);
    $row = mysql_numrows($res);

    for ($i = 0; $i < min($row,$max); $i++) {
        $frst_nam = mysql_result($res,$i,0);
        $brth_day = mysql_result($res,$i,1);
        $brth_yr = mysql_result($res,$i,2);

        echo '<br><i>';
        display_birth($frst_nam,$brth_yr,$brth_day);
    }

    if ( $row < $max ) {
        $sql = "SELECT a.prsn_frst_nam, a.brth_day_dat, a.brth_yr ";
        $sql .= "FROM person a ";
        $sql .= "WHERE a.brth_day_dat < $today " ;
        $sql .= "ORDER BY a.brth_day_dat, a.prsn_frst_nam " ;
        $res = mysql_query($sql,$db);
        $newrow = mysql_numrows($res);

        for ($i = 0; $i < min($newrow,$max-$row); $i++) {
            $frst_nam = mysql_result($res,$i,0);
            $brth_day = mysql_result($res,$i,1);
            $brth_yr = mysql_result($res,$i,2);

            echo '<br><i>';
            display_birth($frst_nam,$brth_yr,$brth_day);
        }
    }

}

echo '</p>';
echo "\n";
mysql_free_result($res);
@mysql_close($db) ;
</script>