Fil d'Ariane
Mis à jour le mardi 8 janvier 2013
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Un petit site d'accueil

Connectez-vous ou inscrivez-vous pour bénéficier de toutes les fonctionnalités de ce cours !

Vous avez peut-être déjà remarqué, quand vous allez par exemple sur Osgrid, qu'une page de présentation de la grille s'affiche dans votre viewer. Mais quand vous allez sur votre standalone avant votre connexion, la fenêtre du viewer est toute noire. :(

Tant que vous êtes seuls utilisateurs de votre standalone, ce n'est peut-être pas important. Mais vous aurez peut-être envie d'améliorer cela pour accueillir des visiteurs. Alors voyons rapidement ce que nous pouvons faire.

En fait, Osgrid a associé un site web de présentation à son installation. :p

Les outils nécessaires

Le grand secret

En fait, pour afficher un site d'accueil, Osgrid a associé un site web de présentation à son installation. Et pour ne pas vous faire languir plus longtemps, il suffit d'indiquer l'adresse de votre site dans la rubrique [GridInfo] du fichier OpenSim.ini de votre installation comme ceci à partir de la ligne 1089 dans la version 0.6.9 :

; login page: optional: if it exists it will be used to tell the client to use
 ;                       this as splash page
 ; currently unused
 welcome = http://adresse de la page à afficher/

Le matériel nécessaire

Vous aurez besoin de plusieurs outils pour mettre en place ce site d'accueil.

  • - Une standalone fonctionnelle.

  • - Un hébergeur : c'est là que vous allez mettre tous les fichiers qui composeront votre site Web.

  • - Une adresse : cette adresse prendra la forme http://nom_de_domaine/dossier_du_mini-site/index.php

  • - Des logiciels pour créer et gérer le site :

    • - Un éditeur de texte : Bloc-notes pour Microsoft ou gedit pour Linux par exemple.

    • - LAMPP pour les systèmes d'exploitation Linux : avec Apache2, le serveur de bases de données MySQL et PhpMyAdmin

    • - WAMPP pour les systèmes d'exploitation Microsoft : avec Apache2, le serveur de bases de données MySQL et PhpMyAdmin

    • - Un navigateur comme Firefox, ou Internet Explorer.

    • - Votre viewer, Hippo ou Emerald par exemple.

Comme vous pouvez le constater, vous connaissez à peu près tout dans cette liste. Seul l'hébergement d'un site web, et par conséquent l'obtention d'une adresse , méritent d'être traités. Ainsi je vais de ce pas vous expliquer comment trouver et utiliser un hébergement pour votre site d'accueil.

Les hébergements possibles

Pour créer un site Web accessible depuis Internet, il vous faut un emplacement sur un disque dur sur lequel vous transférerez les fichiers du site. Cet emplacement doit être accessiblevia Internet.
Ainsi il existe trois solutions. Je vais rapidement vous les présenter.

Les hébergements mutualisés

Un hébergeur est une entreprise qui possède de nombreux serveurs connectés 24 heures sur 24 à Internet. Sur ces serveurs sont installés les logiciels nécessaires à la création de sites Web, comme Apache ou le serveur MySQL par exemple. Chaque serveur héberge plusieurs sites. Ainsi, lorsque vous louez un espace sur un serveur mutualisé, vous disposez des outils nécessaires à la création de votre site. En revanche, vous n'êtes pas l'administrateur du serveur et vous ne pouvez pas l'installer comme vous le désirez.

Transfert des fichiers du site vers votre hébergeur

Votre hébergeur devrait vous fournir les outils nécessaires pour transférer facilement vos fichiers sur votre espace. Mais quelques fois, ces outils sont lents et limités. Ainsi, il se peut que vous ne puissiez envoyer qu'un seul fichier à la fois, ce qui risque d'être fastidieux à la longue.
C'est pourquoi je vous conseille d'utiliser un client FTP comme par exemple Filezilla, disponible pour Windows, Linux et MacOS.

Pour plus d'informations sur l'utilisation de Filezilla référez-vous au sous-chapitre « Transférer des fichiers de votre PC au serveur » du chapitre « Utiliser un serveur dédié » de ce tutoriel.

Filezilla Connexion rapide

Pour créer une connexion rapide dans Filezilla vers votre hébergement, entrez ce qui suit :

  • - L'adresse du serveur FTP de votre espace (hôte) : si votre nom de domaine est « mon_domaine.info », cette adresse sera ftp.mon_domaine.info.

  • - Votre nom d'utilisateur fourni par l'hébergeur.

  • - Votre mot de passe fourni par l'hébergeur.

  • - Le port FTP : par défaut qui est le port 21 et qui devra être ouvert.

Ensuite cliquez sur « Connexion rapide » : une série d'informations va s'afficher. Si la connexion réussit, dans l'une des deux colonnes de la fenêtre de Filezilla, vous devriez voir un « / »marquant la racine de votre site distant, votre site local affiché dans l'autre colonne étant sur votre ordinateur. Ainsi, vous pourrez passer vos fichiers d'un site à l'autre très facilement en les faisant glisser avec votre souris.

La connexion à Internet

Vous n'aurez pas à vous soucier de cela. Lorsque votre site sera installé, vous pourrez l'ouvrir directement depuis un navigateur web en utilisant une adresse du type "http://www.votre-domaine.info/dossier_du_mini-site/index.php".

Petite astuce

En réalisant ce tutoriel, j'ai découvert le site salmioche.net qui fourmille de précieux conseils pour trouver un hébergeur gratuit sinon bon marché.

Sur votre ordinateur

Si vous utilisez Windows

Mon but n'étant pas de faire un tutoriel sur la création d'un serveur Web sur un ordinateur, et comme je ne connais pas assez les systèmes d'exploitation Microsoft j'ai choisi de vous proposer le lien d'un bon tutoriel : http://www.framasoft.net/article1929.html

Si vous utilisez Linux

Sous Linux c'est différent, j'ai l'habitude ; sans oublier que c'est le système d'exploitation par excellence pour les serveurs. Voici donc comment procéder pour créer un serveur Web sous Linux :

  • Vous devez avoir installé Apache2, serveur HTTP.

  • Créez le dossier de votre site dans votre home :

    sudo mkdir /home/monsite
  • Donnez les droits nécessaires :

    sudo chown -R $USER:users /home/monsite
  • Modifiez le fichier /etc/apache2/sites-available/default pour gérer l'accès aux différents répertoires de votre disque dur :
    - ouvrir le fichier dans un éditeur de texte. Par exemple :

    sudo gedit  /etc/apache2/sites-available/default

    - Pour empêcher l'accès au dossier /var/www de votre ordinateur, remplacez le bloc :

    <Directory /var/www/>
            Options Indexes FollowSymLinks MultiViews
            AllowOverride None
            Order allow,deny
            Allow from all
    </Directory>

    par le bloc :

    <Directory /var/www/>
            Options Indexes FollowSymLinks MultiViews
            AllowOverride None
            Order Deny,Allow
            Deny from all
            Allow from 127.0.0.1                # local
            Allow from 192.168.1.0/24        # ici utilisez les adresses IP internes de votre réseau local.
    </Directory>

    - Permettez l'accès à votre site d'accueil depuis l'extérieur en ajoutant à la suite du bloc <Directory /var/www/></Dircetory> ce nouveau bloc :

    ## ZONE MONSITE
    Alias /monsite /home/monsite
    <Directory /home/monsite>
            Options Indexes FollowSymLinks MultiViews
            AllowOverride All
            Order allow,deny
            Allow from all
    </Directory>
  • Créez un lien symbolique pour que le dossier du site soit vu par le système. C'est un peu comme si on disait au système un gros mensonge pour qu'il situe le dossier de votre site à l'adresse habituelle d'un site Web pour tout système Linux qui se respecte ;) :

    sudo ln -s /home/monsite  /var/www/monsite
  • Redémarrer apache2 :

    sudo /etc/init.d/apache2 restart
  • Le port par défaut pour les serveurs Web est le port 80. Ouvrez-le et redirigez-le si ce n'est déjà fait. Si vous ne savez plus comment faire, vous pouvez revenir en arrière.

Voilà, le dossier de votre site est accessible depuis l'extérieur. Vous n'aurez plus qu'à placer votre mini-site dans ce dossier. :)

Une autre solution : le serveur dédié

J'ai déjà développé un chapitre sur les serveurs dédiés dans ce tutoriel et fidèle à ma politique restrictive (les temps sont durs) je ne vais pas tout vous réexpliquer. Référez-vous à la page de ce chapitre ici.

Vous pourrez créer un site Web sur votre serveur dédié de la même façon que sur votre ordinateur.

Ossature du site

Voilà, vous etes prêt pour créer votre mini-site d'accueil pour votre simulation :

  • Vous avez votre hébergement connecté à internet et accessible de l'extérieur.

  • Vous avez tous les logiciels nécessaires à la création et à l'utilisation de votre site.

  • Apache et votre serveur MySQL sont démarrés.

Si c'est le cas, nous pouvons commencer à créer les fichiers qui composeront votre fabuleux site d'accueil pour votre standalone. :)

En voici la liste :

  • Le fichier index.php : plaque tournante de votre site et fichier principal.

  • Le fichier menu.php qui va afficher et activer un menu pour votre site avec les options accueil, réglement et enregistrement, aide.

  • Le fichier entete.php pour l'entête de votre site.

  • Le fichier pied.php pour afficher un pied de page où vous pourrez par exemple indiquer une adresse mail ou vos coordonnées.

  • Le fichier accueil.php qui va afficher une page de bienvenue pour votre simulation.

  • Le fichier reglement.php où on trouvera les conditions d'utilisation de votre simulation.

  • Le fichier enregistrer.php, page phare du site, qui permettra aux utilisateurs de s'enregistrer sans votre concours.

  • Le fichier aide.php où vous pourrez expliquer comment se connecter à votre standalone avec le viewer Hippo.

  • Des fichiers images pour l'entête et les illustrations de vos pages.

  • Et enfin le fichier style.css, pour la décoration et la présentation du site.

Il faudra également créer un sous-dossier "images" et un sous dossier "style".

Le fichier index.php

Le code ci-dessous est composé de deux parties
  • une partie dynamique en php pour définir la page à afficher en fonction du choix fait par l'utilisateur dans le menu. (Le fichier menu.php sera traité un peu plus loin.)

  • une partie pour afficher la page du site composée de code html et de code php. Dans cette partie vous pouvez voir les noms des différents fichiers que nous allons créer. Certains seront toujours affichés comme entete.php, menu.php et pied.php alors que les autres dépendront du choix fait par l'utilisateur.

Ouvrez votre éditeur de texte et copiez ce code dans un nouveau document. Vous pouvez supprimer les blocs de commentaires si vous le désirez. Puis enregistrez le fichier "index.php"dans le dossier de votre mini-site.

Ajouter une page

Vous pourriez avoir envie d'ajouter une page à vote site pour, par exemple, afficher un agenda, développer un projet, présenter des captures d'écran de votre simulation. Pour chaque page vous devrez ajouter deux lignes, une dans la première partie et une dans la deuxième partie du code aux endroits des blocs de commentaires.

Le code
<?php session_start();?>
<?php 
 //--------------------------------------------------------------------
 //Code php pour définir la page qui va s'afficher
 //--------------------------------------------------------------------
if(isset($_GET['page'])) 
{
 if($_GET['page']==1) $page=1; //accueil
 if($_GET['page']==2) $page=2; //aide
 if($_GET['page']==3) $page=3; //règlement
 if($_GET['page']==4) $page=4; //enregistrement 
//vous pouvez ajouter une ligne ici pour une page supplémentaire. 
//La prochaine page aura le numéro 5 puis 6... jusqu'à n pages. 
//(Ecrivez le numéro et n'utilisez pas n). 
// if($_GET['page']==n) $page=n; //votre nouvelle page. 
}
else
{
 $page=1;
}
 //--------------------------------------------------------------------
 //Dessiner la page du site 
 //--------------------------------------------------------------------
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/xhtml1-frameset.dtd">
<!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" lang="fr">
 <head>  
 <title>Ma Simulation</title> <!--Modifiez le titre de votre site ici entre les deux balises-->
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <link rel="stylesheet" media="screen" type="text/css" title="Design" href= "style/design.css" />
 </head>
 <body>
 <div id="entete" ><?php include ("entete.php")?></div>
 <p></p>   
 <div id="menu" ><?php include ("menu.php")?></div>
 <?php
 if ($page==1) include ("accueil.php");
 if ($page==2) include ("aide.php");
 if ($page==3) include ("reglement.php");
 if ($page==4) include ("enregistrer.php");
//vous pouvez ajouter une ligne ici pour une page supplémentaire.
// La prochaine page aura le numéro 5 puis 6... jusqu'à n pages. 
// if ($page==n) include ("nom-de-votre-page.php"); 
//Il faudra créer le fichier nom-de-votre-page.php. et le placer
// dans le dossier du site.(Ecrivez le numéro et n'utilisez pas n). 
 ?>
 <div id="pied"><?php include ("pied.php")?></div>
 </body>
</html>

Le fichier entete.php

Cette fois le code est très très petit, le voici :

<div>
<h1> NOM DE VOTRE SIMULATION</h1> 
</div>
aperçu du mini site 01

Copiez ce code dans un nouveau document de votre éditeur de texte. Écrivez le nom de votre simulation entre les balises <h1></h1>, puis enregistrez le fichier entete.php. Placez ce fichier à la racine de votre site. Maintenant, le fichier index devrait pouvoir afficher l'entête de votre site comme sur l'image ci-contre.

Le fichier pied.php

aperçu du mini site 02

Pour ce fichier, le code est également très petit. Si vous connaissez le langage HTML, vous pourrez le modifier. Voici celui que je vous propose :

<div>    
 <p><a href="/cogito/tutoriel/mailto:
 adresse@machin.fr Cette adresse e-mail est protégée contre les robots des spammeurs ; vous devrez activer Javascript pour la voir.
 ">contact</a>
 --Copyright "Nom de la simulation" 2010, tous droits réservés </p>   
 </div>

Vous pourrez indiquer une adresse e-mail et remplacer le texte du copyright.

Le fichier menu.php

Un peu plus long mais guère plus voici le code du menu :

<div>
 <ul>
 <br/><li><a href =" index.php?page=1 ">Accueil</a></li>
 <br/><li><a href =" index.php?page=2 ">Aide</a></li>
 <br/><li><a hre f=" index.php?page=3 ">Réglement</a></li>
 <br/><li><a href =" index.php?page=4 ">Créer un compte</a></li>
 <!--
 Si vous voulez ajouter une page à votre site vous devrez ajouter 
 une ligne ici. Les pages suivantes auront pour numéro 5 puis 6 ... puis n.
 Ajoutez cette ligne :
 <br/><li><a href =" index.php?page=n ">Nouvelle rubrique</a></li>
 Vous devrez aussi ajouter une ligne dans le fichier index.php
 et créer un nouveau fichier.
 (Ecrivez le numéro et n'utilisez pas n).
 -->
 <br/></ul></div>
aperçu du mini site 03

Copiez ce code dans un nouveau document de votre éditeur de texte et enregistrez le fichier menu.php. Placez le fichier à la racine de votre site.

Le squelette du site est terminé. Il reste à créer les différentes pages du menu. Nous finirons par la décoration.

Les trois premières pages

Le fichier accueil.php

Maintenant nous allons créer la première vraie page du site, avec un contenu : la page d'accueil. Elle pourra contenir un texte et une image par exemple. C'est cette page qui s'affichera dans le viewer hippo. C'est donc la vitrine de votre simulation.
Voici son code que vous allez copier et enregistrer dans un fichier nommé "accueil.php" qui sera placé à la racine du site:

<?php session_start();?>
<div id="corps"> 
 <!-- Affichage d'une image ( pour redimensionner votre image faites varier width ) -->
 <p><center> <img src=" images/image.jpg "
 alt="Nom-image" width="25%"  /></center></p>
 <!-- Le texte de la page d'accueil -->
 <p>Bienvenue sur le site de <strong> Nom de votre simulation </strong>!</p>        
 <p> Sur ce site vous trouverez toutes les informations nécessaires pour
 visiter facilement (Nom de votre simulation)</p>
 <p>Le menu du site vous propose :</p>         
 <ul>
 <br/><li>Une page d'aide: ainsi vous pourrez installer et configurer
 très rapidement Hippo, unique logiciel dont vous aurez besoin.</li>      
 <br/><li>La charte de bonne conduite de (Nom de votre simulation)</li>  
 <br/><li>Une page d'inscription à la région : en quelques secondes
 vous pouvez créer votre avatar (personnage virtuel qui matérialisera
 votre présence sur la région.)</li>
 </ul>  
 <p>Bonne visite !</p>      
 </p>    
 </div>
apperçu du mini site 04
L'image

Créez un dossier « images » à la racine de votre site et placez l'image que vous comptez afficher sur la page d'accueil. Ne choisissez pas une image trop lourde. Bien que dans le code il soit prévu un redimensionnement à l'aide de l'option « width » qui impose à l'image de prendre 25 % de la largeur de la fenêtre, si l'image est trop grosse, elle prendra plus de temps pour se charger et elle va ralentir votre site pour rien.

Remplacez « image.jpg » par le nom du fichier de votre image.

Le texte

Vous pouvez remplacer le texte comme bon vous semble. Voici les balises HTML que j'ai utilisées :

  • - Pour les paragraphes, utiliser <p>Votre texte </p>

  • - Pour sauter une ligne, utiliser la balise <br/>

  • - Texte en gras <strong> votre texte </strong>

  • - Les listes avec puces prennent cette forme :

    <ul>
    <li> texte </li>
    <li> texte </li>
    <li> texte </li>
    </ul>

Pour plus d'informations et pour connaître d'autres balises HTML, référez-vous en à un tutoriel de création de site comme celui de M@teo.
Si vous choisissez d'utiliser le menu, la page d'accueil doit disparaître lorsque que vous cliquez sur les trois dernières options et réapparaître quand vous cliquez sur « Accueil ». C'est magique ! :)

Le fichier aide.php

Ici, je vais vous proposer une page pour expliquer comment utiliser le navigateur Hippo à un néophyte. Mais vous pouvez très bien y mettre d'autres informations. Voici le code de la page à copier et à enregistrer avec le nom « aide.php », fichier que vous placerez toujours à la racine de votre site :

<?php session_start();?>
 <div id="corps"> 
 <h5> Installer et configurer Hippo Viewer</h5>
 <ul>
   <li> Téléchargez Hippo ici :
     <ul>
     <li>Si vous êtes sous windows : 
      <a href="/cogito/tutoriel/http://forge.opensimulator.org/gf/download/frsrelease/217/792/
      Hippo_OpenSim_Viewer_v0.6.3_Windows_Setup.exe">Setup d'Hippo pour windows</a></li>         
     <li>Si vous êtes sous Linux : <a href="/cogito/tutoriel/http://forge.opensimulator.org/gf/
     download/frsrelease/217/791/Hippo_OpenSim_Viewer_v0.6.3_Linux_Setup.zip">
     Setup d'Hippo pour Linux</a></li>
     </ul>
   </li>
 <br/><li>Installez Hipo en exécutant le fichier que vous venez de télécharger.<br></li>
 <br/><li>Ouvrez Hippo et choisissez <strong>Grids</strong> en bas de la page. Une fenêtre s'ouvre. </li>
 <br/><li>Sous le menu déroulant <strong> Select grid</strong> cliquez sur <strong>Add</strong> <br> </li>
 <br/><li>Dans le formulaire écrivez l'adresse de la grille : <strong>http://DNS ou IP:port/</strong></li>
 <br/><li>Pressez sur <strong>Get Grid</strong> puis sur <strong>OK</strong>. 
 Si la région n'est pas connectée, vous ne pourrez pas non plus vous connecter.</li>
 <br/><li>Entrez le <strong> Prénom</strong>et le <strong>Nom</strong> de votre avatar puis votre 
 <strong>mot de passe.</strong></li>
 <br/><li>Pressez sur <strong>Login </strong> : vous arrivez sur <strong>Nom de la simulation</strong>
 , Bonne visite !</li>     
 </ul>
 </div>
apperçu du mini site 05
Liens vers un site externe

Les liens de cette page sont marqués par les balises <a > </a>. Vous pourriez avoir envie de changer ces liens pour utiliser une nouvelle version du client ou pour proposer un autre viewer comme Emerald ou Imprudence par exemple. Pour cela il suffit de remplacer l'adresse du lien en faisant très attention de mettre cette adresse entre guillemets.

La forme générale d'un lien en HTML est :
<a href= " http://adresse ">Le texte sur lequel on va cliquer.</a>

Listes à puces

En ce qui concerne les listes à puces j'ai deux remarques à faire :)

  • - Vous pouvez mettre un lien <a></a> entre les balises <li> </li>.

  • - Vous pouvez placer une liste à puces dans une autre liste à puce pour avoir un sous-menu. Porcédez ainsi :

    <ul>
      <li> 
        <ul>
        <li> texte </li>
        <li> texte </li>
        <li> texte </li>
        </ul>
     </li>
      <li> texte </li>
      <li> texte </li>
    </ul>

Le fichier reglement.php

Pour cette page je vais aller très vite, je n'ai rien d'intéressant à dire, tout est dans le code ou a déjà été dit.
Voici le code à enregistrer dans « reglement.php » et à placer à la racine de votre site. Vous pourrez écrire vos Condition Générales d'Utilisation (CGU) de votre simulation en utilisant les balises vues précédemment. Vous pourrez même insérer des images que vous passerez dans le dossiers « images » de votre site.

<?php session_start();?> 
<div id="corps">
<strong>Conditions générales d'utilisation sur (Nom de votre simulation)</strong>
<p> Je vais vous proposer un modèles de ce qui se fait sur 
sur New World Grid, vous pourrez vous en inspirer peut-être, 
ou écrire vous-même votre propre charte. </p>
<ul>
<li><a href="/cogito/tutoriel/http://www.newworldgrid.com/lang/fr/virtual-world/rules">
Conditions générales d'utilisation de New World Grid </a> </li>
</ul>
</div>
Il est temps de passer aux choses sérieuses : la page des inscriptions. :pirate:

La page d'inscription des utilisateurs

Cette page d'inscription est un peu complexe et son code est relativement long par rapport aux pages précédentes. Mais pas de problème. Comme pour les autres pages vous allez le copier dans un nouveau document de votre éditeur de texte puis vous enregistrerez le fichier "enregistrer.php" pour finalement le placer à la racine de votre site.

Toutefois vous devrez faire quelques modifications importantes.

Le code pour les versions 0.7.0 et suivantes d'OpenSim

<?php
/** * @copyright Copyright (C) 2010 Tous droits réservés 
* @license GNU/GPL 
* Page d'enregistrement à une simulation OpenSim version 0.7.0 et suivantes 
* Auteur : acryline Erin pour le tutoriel "Tout sur l'OpenSim" */
session_start();?>
<?php
//------------------------------------------------------------------------------------- 
//variables 
//-------------------------------------------------------------------------------------
$i;
$test=0;
$message1=""; $message2=""; $message3="";$message4="";
$first_name="" ; $last_name=""; $email=""; $conf_email="";
$password=""; $conf_password="";
$HOST;$USER ;$PASSE ; $BASE ;
$HOST ="localhost"; //nom de l'hôte de votre BDD
$USER ="root"; //nom de l'utilisateur de la BDD
$PASSE = "mot de passe"; //mot de passe
$BASE ="opensim"; //Nom de la BDD
$n=30; //nombre maximum d'enregistrements
$nom_de_la_simulation = "Ma simulation"; //Nom de votre simulation
$folderArr = array(0 => "My Inventory",1 => "Animations",2 => "Textures",3 => "Sounds",4 => 
"Scripts",5 => "Trash",6 => "Landmarks",7 => "Photo Album",8 => "Calling Cards",9 =>
"Clothing",10 => "Lost And Found",11 => "Gestures",12 => "Body Parts",13 => 
"Notecards",14 => "Objects");
$typeArr = array(0 => 9,1 => 20,2 =>0 ,3 =>1 ,4 =>10 ,5 =>14 ,6 =>3 ,7 =>15 ,8 => 2,9 =>
 5,10 => 16,11 =>21 ,12 =>13 ,13 =>7 ,14 =>6 );
nombreAvatars();
//------------------------------------------------------------------------------------- 
//nombre d'utilisateurs enregistrés 
//-------------------------------------------------------------------------------------
function nombreAvatars()
{
global $HOST; global $USER; global $PASSE; global $i;
mysql_connect($HOSTE, $USER, $PASSE); // Connexion à MySQL
$i=0;
mysql_select_db($BASE);
$reponse = mysql_query("SELECT FirstName FROM UserAccounts"); 
while ($donnees = mysql_fetch_array($reponse) )
{$i++;}
mysql_close(); //Fermer la connexion
}
//------------------------------------------------------------------------------------- 
//Voir si le pseudo existe déja dans la base de données 
//-------------------------------------------------------------------------------------
function pseudoExiste()
{
global $BASE; global $first_name; global $last_name;
mysql_select_db($BASE);
$reponse = mysql_query("SELECT FirstName,LastName FROM UserAccounts"); 
while ($donnees = mysql_fetch_array($reponse) )
{
if ( $donnees['FirstName']==$first_name && $donnees['LastName']==$last_name )
{ return true;} 
}
return false;
}
//------------------------------------------------------------------------------------- 
//Vérification des nom et prénom 
//-------------------------------------------------------------------------------------
function nomPrenom()
{
global $first_name;global $last_name; global $message1;
global $HOST; global $USER; global $PASSE;global $BASE;
if ($first_name != "" AND $last_name != "") // Si on a quelque chose à enregistrer
{
mysql_connect($HOSTE, $USER, $PASSE); // Connexion à MySQL
if(pseudoExiste())
{
$message1="Ce nom d'utilisateur existe déjà, veuillez en choisir un autre.";
return false;
}
mysql_close(); //Fermer la connexion
}
else
{
$message1="Il manque le prénom et/ou le nom de votre avatar.";
return false;
}
return true;
}
//------------------------------------------------------------------------------------- 
//vérification de l'email 
//-------------------------------------------------------------------------------------
function verifEmail()
{
global $email; global $conf_email; global $message2;
if($email!= "") 
{
if($conf_email!= "") 
{
if($email!=$conf_email)
{
$message2="Les deux adresses sont différentes.";
return false;
}
else return true;
}
else
{
$message2="Entrez la confirmation de l'adresse email.";
return false;
}
}
else
{
$message2="Entrez un adresse email.";
return false;
}
return true;
}
//------------------------------------------------------------------------------------- 
//Vérification du mot de passe 
//-------------------------------------------------------------------------------------
function verifPassWord()
{
global $password; global $conf_password; global $message3;
if($password!= "") 
{
if((strlen($password)) >=5 )
{
if($conf_password!= "") 
{
if($password!=$conf_password)
{
$message3="Les deux mots de passe sont différents.";
return false;
}
else return true;
}
else
{
$message3="Entrez la confirmation du mot de passe.";
return false;
}
}
else
{ 
$message3="Ce mot de passe est trop court, il doit avoir plus de 5 caractères.";
return false;
}
}
else
{
$message3="Entrez un mot de passe.";
return false;
}
return true;
}
//------------------------------------------------------------------------------------- 
//Accepter le réglement 
//-------------------------------------------------------------------------------------
function verifReglement()
{
global $message4;
if(isset($_POST['accepter']))
{ return true;}
else
{
$message4="Vous n'avez pas accepté les Conditions Générales d'Utilisation.";
return false;
}
}
//------------------------------------------------------------------------------------- 
//Enregistrer l'utilisateur dans la base de données
//-------------------------------------------------------------------------------------
function enregistrerUser()
{
global $HOST; global $USER; global $PASSE;global $BASE;
global $first_name;global $last_name; global $email;global $password;
global $folderArr; global $typeArr;global $passwordSalt; global $passworldHash;
 
mysql_connect($HOSTE, $USER, $PASSE); // Connexion à MySQL
mysql_select_db($BASE); 
$UUID= shell_exec( 'uuidgen' ); //création d'un UUID pour l'avatar
$passwordSalt = md5(str_replace("-","",shell_exec( 'uuidgen' )));
$passwordHash = md5(md5($password) .":". $passwordSalt);
$timeCretation = time();
$accountType = "UserAccount"; 
$boleen = false;
$vecteur = "<0,0,0>";
//Table UserAccounts
mysql_query("INSERT INTO UserAccounts VALUES('$UUID',
'00000000-0000-0000-0000-000000000000',
'$first_name',
'$last_name',
'$email',
'HomeURI= GatekeeperURI= InventoryServerURI= AssetServerURI=',
'$timeCretation',
0,0,'')");
//Table auth
mysql_query("INSERT INTO auth VALUES('$UUID',
'$passwordHash','$passwordSalt',
'00000000-0000-0000-0000-000000000000',
'$accountType')");
//Table GidUser
mysql_query("INSERT INTO GridUser VALUES('$UUID',
'00000000-0000-0000-0000-000000000000',
'$vecteur','$vecteur',
'00000000-0000-0000-0000-000000000000',
'$vecteur','$vecteur',
'$boleen',0,0)");
//Table inventoryfolders
for ($i = 0; $i < 15; $i++)
{
$folderName= $folderArr[$i];
$type = $typeArr[$i];
$version=1;
$folderID = shell_exec( 'uuidgen' );
if ($i ==0) {$parentFolderID = "00000000-0000-0000-0000-000000000000";}
mysql_query("INSERT INTO inventoryfolders VALUES('$folderName',
'$type','$version','$folderID','$UUID','$parentFolderID')");
if ($i==0) {$parentFolderID = $folderID;}
}
mysql_close(); //Fermer la connexion
}
//------------------------------------------------------------------------------------- 
//Partie principale du code php : Vérification du formulaire si le 
//nombre d'utilisateurs est inférieur à la limite permise 
//-------------------------------------------------------------------------------------
if($test!=1 && $i<$n )
{
$test=1; //0 pour marquer que le formulaire est mal rempli et 1 pour marquer qu'il est bien rempli
mysql_connect($HOSTE, $USER, $PASSE); // Connexion à MySQL
if (isset($_POST['first_name'])) {$first_name= mysql_real_escape_string(htmlspecialchars($_POST['first_name']));}
if (isset($_POST['last_name'])) $last_name = mysql_real_escape_string(htmlspecialchars($_POST['last_name']));
if (isset($_POST['email'])) $email=mysql_real_escape_string(htmlspecialchars($_POST['email']));
if (isset($_POST['conf_email'])) $conf_email=mysql_real_escape_string(htmlspecialchars($_POST['conf_email']));
if (isset($_POST['motPasse'])) $password =mysql_real_escape_string(htmlspecialchars($_POST['motPasse']));
if (isset($_POST['conf_password'])) $conf_password = mysql_real_escape_string(htmlspecialchars($_POST['conf_password']));
mysql_close(); //Fermer la connexion
//Vérification des entrées du formulaire
if (!nomPrenom()) $test=0;
//Vérifier l'email
if(!verifEmail()) $test=0;
//Vérifier le mot de passe
if(!verifPassWord()) $test=0;
//Vérifier si le réglement est accepté
if(!verifReglement()) $test=0;
}
//------------------------------------------------------------------------------------- 
//Partie principale du code php : Enregistrement de l'utilisateur 
//Message de confirmation 
//-------------------------------------------------------------------------------------
if ($test==1 && $i<=$n )
{
?>
<div id="corps">
<h5> Créer un compte sur </h5>
<?php
//enregistrement réussi
enregistrerUser();
echo("Merci de vous être enregistré sur " .$nom_de_la_simulation.",
maintenant vous pouvez vous connecter avec votre viewer.");
?>
</div>
<?php
}
//------------------------------------------------------------------------------------- 
//Partie principale du code php : Trop d'utilisateur enregistrés 
//Message d'information 
//-------------------------------------------------------------------------------------
if ($test==1 && $i>$n )
{
?>
<div id="corps">
<h5> Créer un compte sur </h5>
<?php
echo("Il y a trop d'utilisateurs dans la base de données, vous ne pouvez
pas vous enregistrer, désolée.");
?>
</div>
<?php
}
//------------------------------------------------------------------------------------- 
//Partie principale du code php 
//Affichage du formulaire(HTML) 
//Affichage des messages d'erreur si nécessaire 
//-------------------------------------------------------------------------------------
if ($test==0 && $i<$n )
{
?>
<!-- code d'affichage de la page -->
<div id="corps">
<h5> Créer un compte sur </h5>
<form action="index.php?page=4"; method="post">
<table>
<tr>
<td><br>Prénom de l'avatar:</td><td><br>
<input type="text" name="first_name" value=""
size="30" maxlength="30"></td
</tr>
<tr>
<td><br>Nom de l'avatar :</td><td><br>
<input type="text" name="last_name" value=""
size="30" maxlength="30"></td>
</tr>
<tr>
<td><br>Email </td><td><br>
<input type="text" name="email" value=""
size="30" maxlength="30"></td>
</tr>
<tr>
<td><br>Confirmation de l'email:</td><td><br>
<input type="text" name="conf_email" value=""
size="30" maxlength="30"></td>
</tr>
<tr>
<td></td><td><br><br>Le mot de passe doit contenir au minimum 5 caractères.</td>
</tr>
<tr>
<td><br>Mot de passe :</td><td><br>
<input type="password" name="motPasse" value=""
size="30"></td>
</tr>
<tr>
<td><br>Confirmation du mot de passe : </td><td><br>
<input type="password" name="conf_password"
size="30"></td>
</tr>
<tr>
<td colspan="2"><br><br>
<input type="checkbox" name="accepter">Vous acceptez les Conditions Générales d'Utilisation.
(Lien dans le menu ci-contre.) </td><td></td>
</tr>
<tr>
<td></td>
<td><br><br><button name="enregistrer" type="submit">Enregistrer</button></td>
</tr>
</table>
</form>
<p class="rouge">
<?php
echo ($message1);?><br/><?php
echo ($message2);?><br/><?php
echo ($message3);?><br/><?php
echo ($message4);
}
?>
</p>
</div>

Les modifications

apperçu du mini site 06

Vous allez devoir renseigner plusieurs données dans le code de cette page :

  • Tout d'abord, entrez les informations de connexion à votre base de données au début du code lignes 19 ,20, 21 et 22. Si votre base de données n'est pas sur votre ordinateur, remplacez « localhost » par l'adresse IP ou le DNS de votre serveur de base de données. Renseignez également le nom d'utilisateur pour cette base de données ainsi que le mot de passe et le nom de la base de données.

  • Ensuite, pour ne pas risquer une surcharge de la base de données, fixez le nombre maximal d'usagers pour votre simulation. À la ligne 23, remplacez le 30 de « $n = 30 » par un nombre de votre choix.

  • Entrez le nom de votre simulation à la ligne 24 dans : $nom_de_la_simulation = "Ma simulation";

  • Uniquement pour la version 0.6.9, plus bas dans le code à la ligne 173, remplacez le numéro de la région d'accueil par celui que vous trouverez dans votre base de données.

  • Voilà, c'est presque terminé. Il vous reste à lire la prose des messages (en rouge dans le code), à corriger les fautes d'orthographe et de style pour donner des explications plus claires que les miennes . :)

Et maintenant, il ne nous reste qu'à faire joli. :soleil:

Décoration du site

Pour décorer un peu notre site, nous allons utiliser une feuille de style CSS. Encore une fois, le but de ce chapitre n'est pas de vous apprendre à réaliser une feuille de style. J'aimerais simplement vous permettre de personnaliser votre mini-site.

Voici à quoi ce site peu ressembler avec très peu de travail, et je suis certaine que vous pourrez faire mieux. ;)aperçu du mini site 07aperçu du mini site 08

Le code CSS

Ouvrez un nouveau document dans votre éditeur de texte. Collez le code ci-dessous dans ce document puis enregistrez-le dans le sous-dossier « style » de votre mini-site en lui donnant le nom de « design.css ».

Placez une image au format jpg dans le sous dossier « images » de votre site. Vous nommerez cette image « fond.jpg ». Elle servira de fond à votre site.

Voilà : votre site devrait être transformé. Mais peut-être aimeriez-vous le personnaliser. Référez-vous aux commentaires de chaque ligne écrits à cet effet. Vous pourrez modifier la configuration du site à votre gré en remplaçant les valeurs à droite des propriétés en vert.

/**
* @copyright    Copyright (C) 2010  Tous droits réservés
* @license        GNU/GPL
* Feuille de style CSS pour le mini site de présentation d'une sim
* Auteur : acryline Erin pour le tutoriel "Tout sur l'OpenSim"
*/
/*Pour l'ensemble de la page*/
body                                                 /*Ne pas modifier cette ligne */
{width: 100%;                                        /*Largeur de la page*/
margin: auto;                                        /*centrer la page à l'écran */
background-color: #97a3a3;                           /*fond blanc s'il n'y a pas d'image de fond*/
background-image: url("../images/fond.jpg");         /*placer une image de fond*/
}
/* Style de l'entête */
#entete                                              /*Ne pas modifier cette ligne */
{width: 100%;                                        /*largeur de l'entête*/
height: 120px;                                       /*hauteur de l'entête */
background-color: #474c4c;                           /*couleur de fond */
border: 1px solid #474c4c;                           /* bordure de la bannière : épaisseur, forme et couleur */
font-size: 30px;                                     /* taille de la police */
font-family: "Arial Black", Arial, Verdana, serif;   /* police à afficher dans l'ordre de préférence*/
text-align: center;                                  /* centrer le titre */
color:#1b1d1d;                                       /* couleur du texte */
}
/*Style du menu */
#menu{                                               /*Ne pas modifier cette ligne */
background-color: #aebbbb;                           /*Couleur de fond du menu */
border: 1px solid #474c4c;                           /*Bordure : largeur,forme et couleur*/
font-family: "Arial Black", "Times New Roman", Times, serif; /* police à afficher dans l'ordre de préférence*/
float: left;                                         /*Menu placé à gauche*/
width: 165px;                                        /*Largeur du menu*/
font-size: 1em;                                      /*Taille de la police*/
color : #1b1d1d;                                     /*Couleur de la police*/

}

/*Style du menu déjà visité*/
#menu a:visited                                      /*Ne pas modifier cette ligne */
{color : #1b1d1d;                                    /*Couleur du texte déjà visité*/
}
/* Style des  pages (accueil, CGU, inscription, aide, ... */
#corps {                                             /*Ne pas modifier cette ligne */
margin-left: 170px;                                  /*Largeur de la marge à gauche*/
margin-right: 170px;                                 /*Largeur de la marge à droite*/
padding: 5px;                                        /* Espace entre le texte et la bordure*/
background-color: #aebbbb;                           /*Couleur de fond de la page*/
border: 1px solid #474c4c;                           /*Bordure : largeur,forme et couleur*/
text-align :justify;                                 /*Alignement du texte*/
font-family: Arial, "Arial Black", "Times New Roman",Times, serif; /* police à afficher dans l'ordre de préférence*/
min-height:700px;                                    /*Hauteur minimal de la page*/
font-size:1em;                                       /*Taille du texte*/
}
/*Style des listes dans les pages.*/
#corps li{                                           /*Ne pas modifier cette ligne */
list-style-position:inside;                          /*Position de la liste*/
}
/*Style du pied de page*/
#pied{                                               /*Ne pas modifier cette ligne */
padding: 5px;                                        /* Espace entre le texte et la bordure*/
text-align: center;                                  /* Alignement du texte*/
background-color: #474c4c;                           /*Couleur de fond*/
border: 2px solid #474c4c;                           /*Bordure : largeur,forme et couleur*/
font-size:0.7em;                                     /*Taille du texte*/
}
/*pour les messages d'erreur*/
.rouge{                                              /*Ne pas modifier cette ligne */
color:red;                                           /*Couleur du texte*/
font-size:0.8em;                                     /*Taille du texte*/
}

Télécharger le mini-site

Le mini-site de présentation de votre simulation est terminé. Pour clore ce chapitre, je vais mettre un lien où vous pourrez le télécharger dans son intégralité.

Et c'est maintenant que tu y songes ? :colere2:

Non, bien sûr, j'ai pensé vous envoyer le code sans vous donner plus d'explication que ça. Mais ce n'était vraiment pas la bonne méthode pour permettre à tout le monde de personnaliser son mini-site.

Vous pouvez télécharger le site:

Vous pouvez me signaler toute erreur dans les commentaires. Merci. :)

À ce stade, vous en savez assez pour faire fonctionner une standaloneisolée.

  • - Vous êtes capable d'installer une simulation autonome.

  • - Vous pouvez la connecter à internet pour faire venir du monde.

  • - Et votre standalone peut exister sans que vous y soyez toujours présent.

Mais le monde des standalones est quelque fois trop restreint pour certains projets. La plupart des utilisateurs préfèrent (pour l'instant) se connecter sur des grilles plutôt que de s'inscrire sur plusieurs standalones.
Ainsi, vous aurez peut-être envie vous aussi d'être présent sur une grille pour augmenter le nombre de vos visiteurs et pour partager avec d'autres votre travail.

Il existe deux façons pour rendre cela possible :

  • - Connecter votre standalone à une grille.

  • - Utiliser l'HyperGrid (HG)

C'est ce que nous allons voir dans le prochain chapitre.

Pour aller plus loin : une autre grande partie.

Exemple de certificat de réussite
Exemple de certificat de réussite