[ L'hébergeur  | La page d'accueil | Comment les sections sont construites ]

Dernière modification 31.12.00

FUNIX côté garage

L'hébergeur

J'utilise online, sans vouloir faire de publicité, voilà les détails de la prestation.

Les prix sont les suivants :
-  327.98FF HT pour 24 mois pour enregistrer le nom de domaine pour 24 mois
- 163.99FF HT pour renouveller un nom de domaine pour pour 12 mois
-  190,23FF HT à payer chaque année pour l'hébergement

Pour ce prix là on dispose de :

- Espace de 50 Mo
- Nombre de compte e-mail 10
- Nombre illimité d'alias email
- Alias collecteur
- 5 forward par compte e-mail
- Trafic illimité
- Alimentation redondante onduleur 50 kVA
- Générateur électrique d'une  capacité de 48 kVa
- Serveur de fichier Haute Performance Network Appliance
- Supervision des serveurs  24h/24h
- 98 Mb/s de bande  passante  internationale
- 80 Mb/s de Peering
- Mise à jour illimitée par FTP,  24h/24h
- Support technique par email
- Administration de vos domaines  par interface Web
- Form par mail
- Compteur personnalisé
- sites web supplémentaires
- Php 3
- Base de données
- Tableau de statistiques sommaires
- Log brut des statistiques du serveur Apache

Et vous n'avez bien entendu aucune publicité sauvage sur votre site ou dans le corps de vos mails. J'ai donc la possiblité de créer des sous domaines, pour l'instant seul le sous domaine news.funix.org est opérationnel, c'est un embryon de portail de news utilisant PHPNuke.

Globalement je suis très content du service d'online.

[Retour haut de la page]

La page d'accueil

La page d'accueil http://www.funix.org/index.php est décomposée comme suit :
 
Emplacement de la bannière FUNIX
Liens rapides vers les différentes sections
Colonne 1, avec le détail des différentes sections  Colonne 2 avec :
- le texte de bienvenu sur FUNIX,
- le système de news utilisant une base de données MySQL.		 Colonne 3 avec :
- le nombre de visiteurs, 
- les dernières modifs sur le site,
- le champ pour être mis au courant.
Pied de page avec les copyrights

Par ailleurs on fait en sorte que la page taille 800 pixels de large pour coller aux écrans 15''. Les colonnes 1 et 3 prennent chacune 20% de la largeur (des 800 pixels), la colonne 2 fait le reste (60%).

Voici le détail du fichier :

D'abord l'entête du fichier avec les méta caractères classiques

<html>

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta name="Author" content="Olivier hoarau">
 <meta name="Description" content="Cours UNIX, administration LINUX, Windows et technologie réseau">
 <meta name="Identifier-URL" content="http://www.funix.org">
 <meta name="Publisher" content="Olivier Hoarau">
 <meta name="Keywords" content="serveur,mandrake,intranet,cours,proxy,apache,php,linux,hpux,unix,sendmail,pop,windows,pgp,cryptographie,securite">
<meta name="GENERATOR" content="Mozilla/4.73 [fr] (X11; I; Linux 2.2.15-4mdk i686) [Netscape]">
<title>FUNIX Mettez un pingouin dans votre PC</title>
</head>

<body bgcolor="#000080">

Définition de la première division avec la bannière

<div align="center"><center>

<table border="0" width="765">
    <tr>
        <td colspan="3" width="100%" bgcolor="#31CEFF"><img
        src="images/banniere-top.gif" width="700" height="100"></td>
    </tr>
</table>
</center></div>

Définition de la deuxième division avec les liens rapides vers les différentes sections, c'est ici qu'on définit la largeur de la page, 765 pour coller avec les écrans 800, le reste étant pour le scrollbar sur la droite.

<table border="0" width="765">
    <tr>
        <td colspan="3" bgcolor="#FFFFFF"><p align="center"><font
        size="2">[</font><a href="index.php"><font size="2">Accueil</font></a><font
        size="2"> | </font><a href="fr/linux/main-linux.php?ref=main&page=menu"><font size="2">Linux</font></a><font
        size="2"> | </font><a href="fr/windows/main-windows.php?ref=main&page=menu"><font size="2">Windows</font></a><font
        size="2"> | </font><a href="fr/php/main-php.php?ref=main&page=menu"><font size="2">PHP/MySQL</font></a><font
        size="2"> | </font><a href="fr/reseau/main-reseau.php?ref=main&page=menu"><font size="2">Réseau</font></a><font
        size="2"> | </font><a href="fr/unix/main-unix.php?ref=main&page=menu"><font size="2">Unix</font></a><font
        size="2"> | </font><a href="http://funix.free.fr/informatique/hpux/index.htm"><font size="2">HP-UX</font></a><font
        size="2"> | </font><a href="fr/linuxdoc/download.htm"><font size="2">Téléchargement</font></a><font
        size="2"> | </font><a href="carte.htm"><font size="2">Plan
        du site</font></a><font size="2"> | </font><a
        href="historique.htm"><font size="2">Historique du site</font></a><font
        size="2"> | </font><a href="banniere.htm"><font size="2">Bannières
        et logos FUNIX</font></a><font size="2"> | </font><a
        href="accueil/index_presentation.htm"><font size="2">L'auteur</font></a><font
        size="2"> | <a href="http://funix.free.fr/reserve/main.htm">Section réservée</a> ]</font></p>
        </td>
    </tr>

Définition de la première colonne qui fait 20% du total (de 765 pixels donc)

[Retour haut de la page]

<tr>
        <td valign="top" rowspan="2" width="20%" bgcolor="#FFFFFF">

Définition du tableau pour la section linux

       <div align="center"><center><table border="1" width="100%"
        bordercolor="#33CEFF" bordercolordark="#33CEFF"
        bordercolorlight="#33CEFF">
            <tr>
                <td bgcolor="#33CEFF"><img
                src="images/tux-icone.gif" width="18" height="21"
                nosave><a
                href="fr/linux/main-linux.php?ref=main&amp;page=menu"><font
                color="#FFFFFF">Linux</font></a></td>
            </tr>
            <tr>
                <td><font size="2">- Configuration internet&nbsp;</font>
                <br>
                <font size="2">- Configuration réseau&nbsp;</font>
                <br>
                <font size="2">- Sécuriser son poste</font> <br>
                <font size="2">- Environnement graphique&nbsp;</font>
                <br>
                <font size="2">- Configurations diverses</font> <br>
                <font size="2">- Coin ludique</font> <br>
                <font size="2">- Applis diverses</font></td>
            </tr>
        </table>
        </center></div>

Définition du tableau pour la section windows

        <div align="center"><center><table
        border="1" width="100%" bordercolor="#33CEFF"
        bordercolordark="#33CEFF" bordercolorlight="#33CEFF">
            <tr>
                <td bgcolor="#33CEFF"><img
                src="images/windows.gif" width="14" height="14"
                nosave><a
                href="fr/windows/main-windows.php?ref=main&amp;page=menu"><font
                color="#FFFFFF">Windows</font></a> </td>
            </tr>
            <tr>
                <td><font size="2">- Configuration internet</font>
                <br>
                <font size="2">- Configuration réseau</font> <br>
                <font size="2">- Sécurité</font> <br>
                <font size="2">- Applis spécifiques</font> <br>
                <font size="2">- Multimédia</font> </td>
            </tr>
        </table>
        </center></div>

Idem pour les tableaux réseau, unix, hp-ux et PHP/MySQL

Définition de la colonne 2 qui fait 60% des 765 pixels

</td>
        <td valign="top" width="60%" bgcolor="#FFFFFF">

Définition de la partie avec le texte de bienvenu

        <p><center><b><u>Bienvenue sur Funix.Org</u></b></center><p>Ce
        site a pour vocation de vous donner les moyens de mettre
        en place un réseau informatique complet et efficace pour
        une utilisation dans un cadre privé ou de petite
        structure type association ou école disposant de peu de
        moyen avec des logiciels gratuits (freeware, licence GPL,
        ...).<br>
        Le but de ce site n'est pas de s'épancher sur l'aspect
        théorique, mais plutôt de vous donner les bases et de
        vous guider pour l'installation et la configuration des
        différents outils pas à pas.<br>
        Pour finir, ce site s'adresse à tout public, y compris
        les novices en informatique, les &quot;gourous&quot;
        pourront néanmoins y trouver quelques matières.
        </p>

[Retour haut de la page]

Ca c'est le petit texte d'appel à contribution que j'ai rajouté

        <hr WIDTH="100%">
        <center><b><u>Appel à contribution</u></b></center>
        <p>
        Si vous avez des articles à me proposer qui ont pour sujet le logiciel libre (présentation de logiciel, réflexion diverse, ...)
         je me ferai une joie de les mettre en ligne sur ce site. Envoyez moi vos articles à l'email marqué en bas de la page (format tx        </p>
        <p> </p>
        </td>

Définition de la colonne 3, qui fait 20%

<td valign="top" rowspan="2" width="20%" bgcolor="#FFFFFF">

Définition de la partie nombre de visiteurs :

        <div align="center"><center><table border="1" width="100%"
        bordercolor="#33CEFF" bordercolordark="#33CEFF"
        bordercolorlight="#33CEFF">
            <tr>
                <td width="100%" bgcolor="#33CEFF">Nombre de
                visiteurs depuis la création du site</td>
            </tr>
            <tr>
                <td><center>
                <?
                $compteur="compteur.php";
                include($compteur);
                ?></center>
                </td>
            </tr>
        </table>
        </center></div>

Définition de la partie pour les dernières modifs du site, en fait on inclut un fichier htm tout simple :

        <div align="center"><center><table
        border="1" width="100%" bordercolor="#33CEFF"
        bordercolordark="#33CEFF" bordercolorlight="#33CEFF">
            <tr>
                <td bgcolor="#33CEFF">Les dernières modifs du
                site</td>
            </tr>
            <tr>
                <td>
                <?
                $modif="modif.htm";
                include($modif);
                ?>
                </td>
            </tr>
        </table>
        </center></div>

Définition de la partie pour être mis au courant des dernières modifs, on fait appel à un fichier form2mail.php

[Retour haut de la page]

        <div align="center"><center><table
        border="1" width="100%" bordercolor="#33CEFF"
        bordercolordark="#33CEFF" bordercolorlight="#33CEFF">
            <tr>
                <td bgcolor="#33CEFF">Pour être mis au courant
                des dernières modifications</td>
            </tr>
            <tr>
                <td>
                <form action="form2mail.php"
                        method="POST">
                <table BORDER=0 WIDTH="100%" NOSAVE >
                <tr NOSAVE>
                <td VALIGN=TOP COLSPAN="2" WIDTH="100%" NOSAVE>
                </td>
                </tr>
                 <tr>
                 <td COLSPAN="2" WIDTH="100%" NOSAVE><font size=-1><b>N'oubliez pas</b>
                 de donner votre adresse email&nbsp;</font>
                  <p><input  type="text" size="12" maxlength="40" name="email"></td>
               </tr>
               <tr>
               <td COLSPAN="2"><input type="checkbox" name="C2"><font size=-1>Cochez
               cette case pour ne plus &ecirc;tre averti</font></td>
               </tr>
               <tr>
               <td ALIGN=CENTER><input type="submit"
                value="Envoyer"><input type="reset"
                value="Annuler"></td>
                <td ALIGN=CENTER><font size=-1>&nbsp;</font></td>
                </tr>
                </table>
                </form>
                </td>
            </tr>
        </table>
        </center></div></td>
    </tr>

Définition de la partie inclusion du système de news au niveau de la colonne 2
 
        <tr>
        <td valign="top" width="60%" bgcolor="#FFFFFF">
        <p><center><b><u>Journal de bord</b></u></center>
        <p>
        <?
         $journal="news/index.php";
         include($journal);
         ?>
         </td>
    </tr>

Définition de la partie copyright tout en bas.

    <tr>
        <td colspan="3" bgcolor="#FFFFFF"><p align="center">Copyright
        <a href="mailto:olivier.hoarau@funix.org">Olivier Hoarau</a>
        / 1998-2000 (c)</p>
        </td>
    </tr>
</table>
</center></div>
</body>
</html>

Le système de news utilisé a été récupéré sur http://plebian.com

[Retour haut de la page]

Pour info voici à quoi ressemble form2mail.php

<?php
 
// IMPORTANT VOUS DEVEZ CONFIGURER
// L'ADRESSE EMAIL DE DESTINATION
$dest="webmaster@funix.org";
 
// on recupere les infos
$referer= getenv("HTTP_REFERER");
 
$ok=1;
 
if($ok){
// envoi du resultat par email
$sujet= "Form2Mail de ".$referer;
$body.="Page d'origine : $referer\n";
$body.="\n*** Valeurs resultats ***\n";
 
if(count($HTTP_POST_VARS)){
      while (list($key, $val) = each($HTTP_POST_VARS)){
                      $body.="$key : $val\n";
      }
}
 
if(count($HTTP_GET_VARS)){
       while (list($key, $val) = each($HTTP_GET_VARS)){
                     $body.="$key : $val\n";
       }
}
 
$body.="*************************\n";
if(!email("webmaster",$dest,$sujet,$body)){
                    print "erreur envoi email <br>";
}
 
// affiche le html qui suit si succes
?>
<html>
<head><title>Votre requete a abouti</title></head>
<body bgcolor="white">
<h1> Votre demande a été prise en compte </h1>
</body>
</html>
<?php
}
// affiche le html qui suit si erreur
//
else{
?>
<html>
<head><title>Votre requete a abouti</title></head>
<body bgcolor="white">
<h1> Votre demande a été prise en compte </h1>
</body>
</html>
<?php
}
// affiche le html qui suit si erreur
//
else{
?>
<html>
<head><title>Erreur de formulaire</title></head>
<body bgcolor="white">
<h1> Erreur de formulaire </h1>
</body>
</html>
<?php
}
?> 

[Retour haut de la page]

Comment les sections sont construites

Les sections linux, windows, réseau, unix sont architecturées autour du même principe, prenons par exemple la section linux, on appelle en fait un fichier unique main-linux.php qui inclue d'autres fichiers voici son contenu :

Entête HTML classique :

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="GENERATOR" content="Mozilla/4.61 [en] (X11; I; Linux 2.2.9-19mdk i686) [Netscape]">
   <title>Linux</title>
</head>
<body bgcolor="#000080">

Construction des trois parties de la page, le top en haut, le menu à gauche et la page principale à droite de l'écran :

<table BORDER=0 CELLSPACING=3 CELLPADDING=3 WIDTH="100%" NOSAVE >
<tr NOSAVE>
<td ALIGN=RIGHT COLSPAN="2" WIDTH="100%" BGCOLOR="#31CEFF" NOSAVE>

<table BORDER=0 CELLSPACING=3 CELLPADDING=3 WIDTH="100%" NOSAVE >
<tr NOSAVE>
<td COLSPAN="2" WIDTH="100%" BGCOLOR="#31CEFF" NOSAVE>
<table BORDER=0 WIDTH="100%" NOSAVE >
<tr NOSAVE>

Construction du top avec l'icône Funix et la mention Page principale Linux :

<td><a href="../../index.php"><img SRC="../../images/funix-icone.gif"
ALT="Retour à la page d'accueil" NOSAVE
height=100 width=126></a></td>

<td ALIGN=CENTER NOSAVE><font size=+3><a href="main-linux.php?ref=main&page=menu">Page principale Linux</a></font>
<p>Retrouvez une partie de ces pages en <a
href="../linuxdoc/download.htm">t&eacute;l&eacute;chargement</a>

</td>

Inclusion du menu à droite :

<td ALIGN=RIGHT NOSAVE><font size=-1>
</font></td>
</tr>
</table>
</tr>
</table>

</td>
</tr>
<?

        if ($page=="menu")
        {
                $menu="menu.htm";
                include($menu);
        }
?>

Inclusion de la partie principale, c'est là que se trouve l'astuce, mes fichiers et mes images se trouvent sur mon compte sur Free, avec les 100Mo dont je dispose sur ce compte, la limitation de 50Mo du compte Online n'est donc plus une gène et c'est totalement transparent pour le visiteur.
 

<td VALIGN=TOP WIDTH="50%" BGCOLOR="#FFFFFF">
<?
    if ($ref!="")
    {
        $file="http://funix.free.fr/informatique/linux/".$ref.".htm";
    }
    else
    {
        $file="http://funix.free.fr/informatique/linux/main.htm";
    }
    include ($file);
</td>
</tr>
</table>

</body>
</html>

A noter que pour ma section PHP/MySQL les fichiers sont directement sur le serveur d'Online, cette partie là est donc différente :

<?
    if ($ref!="")
    {
        $file=$ref.".htm";
    }
    else
    {
        $file="main.htm";
    }
    include ($file);

?>

 main-linux.php s'appelle avec deux arguments qui sont $page et $ref, le premier indique si on veut un affichage pleine page ($page=full) ou avec le menu ($page=menu), le deuxième argument indique le nom du fichier html à appeler pour remplir la partie principale ($ref=proxy).

Par exemple main-linux.php?page=$menu&ref=$proxy, provoque l'affichage de la page avec menu et le fichier proxy.htm s'affiche au niveau de la partie principale. main-linux.php?page=$menu  provoque l'affichage du menu et de la page principale main.htm (par défaut si l'argument $ref n'est pas précisé).

Les pages htm qui s'affichent au niveau de la partie principale adoptent tous le même principe très simple, le plus simple est de visualiser le code d'une page, voici le lien direct vers une de ces pages (sur le compte Free).

L'avantage d'une construction PHP est que c'est beaucoup plus simple pour maintenir le site, notamment pour faire évoluer son look, puisqu'il n'y a aucun style particulier au niveau des pages htm, il n'y a que les quelques fichiers principaux en php à modifier. Un des inconvénients est que les aspirateurs (GetWeb, ...) et autres robots métachercheurs (Slurp, ...) ont du mal à s'y retrouver.
 
[Retour page d'accueil FUNIX]