claudelsioslam.files.wordpress.com · Author: Julien Claudel Created Date: 4/6/2013 9:12:45 PM

12
Rapport de modifications apportées à l’intranet de Bicêtre. Installation de la machine virtuelle permettant l’hébergement du site - Mise en place de la machine virtuelle sur ORACLE Virtual BOX Nom DNS : G11-VB-SRVCENTOS01 Adresse ip : 10.163.218.81 Masque de sous réseau : 255.255.254.0 Passerelle : 10.163.218.1 - Montage de dossier à partager sous Windows depuis linux avec la commande : mount -t vboxsf <dossier> mount_point Dans le but d’avoir un répertoire d’échange entre la machine virtuelle et la machine physique. - Apprentissage de l’utilisation de la machine virtuelle sous linux avec interface GNOME Utilisation des commandes de ma machine virtuelle sous Linux - Utilisation de l’éditeur de texte VI dans le terminal avec des raccourcis tel que : Echap = Quitter mode commande ; i = insertion ; Y = copier ; p = coller ; ^ = Début de ligne ; nDD = Tout copier ; q ! = quitter sans sauvegarder ; wq= sauvegarder et quitter ; - Utilisation des différents raccourcis clavier sur le terminal comme ipconfig ou encore la commande « man » qui permet d’avoir un tutoriel sur la commande que l’on souhaite, par exemple : man httpd.

Transcript of claudelsioslam.files.wordpress.com · Author: Julien Claudel Created Date: 4/6/2013 9:12:45 PM

Page 1: claudelsioslam.files.wordpress.com · Author: Julien Claudel Created Date: 4/6/2013 9:12:45 PM

Rapport de modifications apportées à l’intranet de Bicêtre.

Installation de la machine virtuelle permettant l’hébergement du site

- Mise en place de la machine virtuelle sur ORACLE Virtual BOX

Nom DNS : G11-VB-SRVCENTOS01Adresse ip : 10.163.218.81 Masque de sous réseau : 255.255.254.0Passerelle : 10.163.218.1

- Montage de dossier à partager sous Windows depuis linux avec la commande :

mount -t vboxsf <dossier> mount_point

Dans le but d’avoir un répertoire d’échange entre la machine virtuelle et la machine physique.

- Apprentissage de l’utilisation de la machine virtuelle sous linux avec interface GNOME

Utilisation des commandes de ma machine virtuelle sous Linux

- Utilisation de l’éditeur de texte VI dans le terminal avec des raccourcis tel que :

Echap = Quitter mode commande ; i = insertion ; Y = copier ; p = coller ; ^ = Début de ligne ;

nDD = Tout copier ; q ! = quitter sans sauvegarder ; wq= sauvegarder et quitter ;

- Utilisation des différents raccourcis clavier sur le terminal comme ipconfig ou encore la commande « man » qui permet d’avoir un tutoriel sur la commande que l’on souhaite, par exemple : man httpd.

Page 2: claudelsioslam.files.wordpress.com · Author: Julien Claudel Created Date: 4/6/2013 9:12:45 PM

Mise en place du serveur Web Apache

Apache : Fichiers importants

Le fichier de configuration du serveur Web Apache est /etc/httpd/conf/httpd.conf.

Httpd.conf généré à l’installation et ne concerne qu’apache. Httpd est le serveur Apache du protocole de transfert hypertexte.

Racine des binaires et du répertoires des « logs » et configurations :

# Do NOT add a slash at the end of the directory path.#ServerRoot "/etc/httpd"

Répertoire permettant de dissocier les configurations du serveur Apache et des outils annexes (exemple php, asp, etc…) ne dependant pas d’apache.

## Load config files from the config directory "/etc/httpd/conf.d".#Include conf.d/*.conf

Nos deux fichiers :

Virtual-hosts.conf : Permet de gérer les hôtes virtuels. L'hébergement virtuel (virtual hosting) est le

fait de servir plusieurs sites web sur une même instance de serveur.

NameVirtualHost *:80

<VirtualHost *:80> ServerAdmin [email protected] DocumentRoot /var/www/html/ ServerName g11-vb-srvcentos01.bct.aphp.fr ServerAlias g11-vb-srvcentos01 DirectoryIndex index.htm index.php ErrorLog logs/g11-vb-srvcentos01-error_log CustomLog logs/g11-vb-srvcentos01-access_log combined <Directory /var/www/html/> Options FollowSymLinks Order allow,deny Allow from all </Directory></VirtualHost>

<VirtualHost *:80> ServerAdmin [email protected] DocumentRoot /var/www/html/bicetre/ ServerName bicetre-test.bct.aphp.fr

Page 3: claudelsioslam.files.wordpress.com · Author: Julien Claudel Created Date: 4/6/2013 9:12:45 PM

ServerAlias bicetre-test DirectoryIndex index.html index.php ErrorLog logs/bicetre-test-error_log CustomLog logs/bicetre-test-access_log combined <Directory /var/www/html/bicetre/> Options FollowSymLinks Order allow,deny Allow from all </Directory></VirtualHost>

Php.conf

## PHP is an HTML-embedded scripting language which attempts to make it# easy for developers to write dynamically generated webpages.#<IfModule prefork.c> LoadModule php5_module modules/libphp5.so</IfModule><IfModule worker.c> LoadModule php5_module modules/libphp5-zts.so</IfModule>

## Cause the PHP interpreter to handle files with a .php extension.#AddHandler php5-script .phpAddType text/html .php

## Add index.php to the list of files that will be served as directory# indexes.#

DirectoryIndex index.php

## Uncomment the following line to allow PHP to pretty-print .phps# files as PHP source code:##AddType application/x-httpd-php-source .phps

Dans ce fichier, ce qui est important de voir c’est que nous limitons l’accès et l’exécution des scripts Php au point d’entrée mentionné dans DirectoryIndex index.phpCela n’empêche pas l’utilisateur de taper un autre fichier « .php », par exemple : « design.php ».

Mais au cas où il ne connaisse que l’url du site, il sera redirigé automatiquement vers « index.php »

Page 4: claudelsioslam.files.wordpress.com · Author: Julien Claudel Created Date: 4/6/2013 9:12:45 PM

Début des modifications sur le site :

- Modification des majuscules car Linux est sensible à la casse contrairement à Windows.

- Adaptation des accents, car le serveur linux travail en UTF8 alors que les Windows sont en WEI8195.

- Adaptation des langages PHP, JavaScript et améliorations du CSS et du HTML.

- Améliorations des cellules des applications, disposées correctement dans un tableau au lieu d’être placée n’importe comment.

- Modifications des systèmes de frames sur la page index.php, c’est-à-dire remplacer par des includes pour que les modifications futur à apporter sur la page index.php soit plus facile. La page bctentete.php et la page bctapps.php sont appliqués sur le site respectivement en haut et à gauche grâce aux includes. Pour le site de l’aphp mis au centre du site, c’est une Iframe, c’est-à-dire un frame local.

- Création de plusieurs pages php comportant les documents d’informations sur les différents logiciels, les pages sont : docKDOS.php, docGILDAWEB.php, docSTARE.php, docORBIS.php, docAGENDAWEB.php. Elles remplacent l’ancien système pas très esthétique des boutons informations. Anciennement quand on ouvrait les informations d’un des logiciels, la page s’ouvrait dans un page extérieure, maintenant grâce à l’iframe, les informations s’ouvrent directement à la place du site de l’aphp situé au centre de l’intranet grâce à :

Code dans index.php concernant le site ouvert par défaut, et le nom de cette iframe qui est FENETRE :

<iframe src="http://portail-cms.aphp.fr/aphp-info/?page=accueil&commun=ok" name="FENETRE" width="100%" height="100%">

Code dans bctapps.php qui envoi les informations dans l’iframe avec la fonction target :

<a href="http://bicetre-test.bct.aphp.fr/docSTARE.php" target="FENETRE" title="Acc&egrave;s aux Informations STARE">

- Le code php ci-dessus a été ajouté à chacun de ces documents pour pouvoir afficher dynamiquement les fichiers qui sont comportés dans les différents dossiers.

Page 5: claudelsioslam.files.wordpress.com · Author: Julien Claudel Created Date: 4/6/2013 9:12:45 PM

Il affiche donc les documents présents, ce qui permet, quand un ajout ou une suppression de document est apporté dans ce dossier, elle sera réactualisée automatiquement sur le site, ce ne sont pas des codes html statiques. Affiche également le nombre de fichiers qui sont dans le dossier.

<?php

$nb_fichier = 0;

If ($dossier = opendir('./documentation/<nom_du_dossier>'))

{

While (false !== ($fichier = readdir($dossier)))

{

If ($fichier != '.' && $fichier != '..' && $fichier != 'index.php')

{

$nb_fichier++;

echo '<h3><li><a href="./documentation/<nom_du_dossier>/' . $fichier . '">' . $fichier . '</a></li></h3><br>';

}

}

echo '</ul><br />';

echo '<center>Il y a <strong>' . $nb_fichier .'</strong> document(s) dans le dossier</center>';

closedir($dossier);

}

else

echo 'Le dossier n\' a pas pu être ouvert';

?>

- Création de plusieurs fiches de styles comportant différentes couleurs. Numérotés de stylesheet à stylesheet10.

Page 6: claudelsioslam.files.wordpress.com · Author: Julien Claudel Created Date: 4/6/2013 9:12:45 PM

- Chaque fiche de style comporte des couleurs différentes qui pourront être choisie directement par l’utilisateur.

<div class="exemple" align="center">

<a href="#" onclick="javascript:window.location.reload();setActiveStyleSheet('css-astuces1');return false;"><IMG ALIGN="center" SRC="images/1.jpg" WIDTH=15 HEIGHT=15 border="1"></a>

<a href="#" onclick="javascript:window.location.reload();setActiveStyleSheet('css-astuces2'); return false;"><IMG ALIGN="center" SRC="images/2.jpg" WIDTH=15 HEIGHT=15 border="1"></a>

<a href="#" onclick="javascript:window.location.reload();setActiveStyleSheet('css-astuces3'); return false;"><IMG ALIGN="center" SRC="images/3.jpg" WIDTH=15 HEIGHT=15 border="1"></a>

<a href="#" onclick="javascript:window.location.reload();setActiveStyleSheet('css-astuces4'); return false;"><IMG ALIGN="center" SRC="images/4.jpg" WIDTH=15 HEIGHT=15 border="1"></a>

<a href="#" onclick="javascript:window.location.reload();setActiveStyleSheet('css-astuces5'); return false;"><IMG ALIGN="center" SRC="images/5.jpg" WIDTH=15 HEIGHT=15 border="1"></a>

<a href="#" onclick="javascript:window.location.reload();setActiveStyleSheet('css-astuces6'); return false;"><IMG ALIGN="center" SRC="images/6.jpg" WIDTH=15 HEIGHT=15 border="1"></a>

<a href="#" onclick="javascript:window.location.reload();setActiveStyleSheet('css-astuces7'); return false;"><IMG ALIGN="center" SRC="images/7.jpg" WIDTH=15 HEIGHT=15 border="1"></a>

<a href="#" onclick="javascript:window.location.reload();setActiveStyleSheet('css-astuces8'); return false;"><IMG ALIGN="center" SRC="images/8.jpg" WIDTH=15 HEIGHT=15 border="1"></a>

<a href="#" onclick="javascript:window.location.reload();setActiveStyleSheet('css-astuces9'); return false;"><IMG ALIGN="center" SRC="images/9.jpg" WIDTH=15 HEIGHT=15 border="1"></a>

<a href="#" onclick=" javascript:window.location.reload();setActiveStyleSheet('css-astuces10'); return false;"><IMG ALIGN="center" SRC="images/10.jpg" WIDTH=15 HEIGHT=15 border="1"></a>

</div>

- Quand on clique sur une de ces images colorées, cela active la feuille de style correspondant au nom css-astuce… et applique donc la couleur choisie sur tous le site grâce à une réactualisons du site grâce au bout de code javascript suivant :

Javascript:window.location.reload ();

Ensuite la couleur choisie est sauvegardée dans un cookie, grâce à plusieurs fonctions qui sont placés dans le fichier styleswitcher.js.

Le code suivant, fait un appel de la feuille de style qu’a choisie l’utilisateur lors de son dernier clique.

Page 7: claudelsioslam.files.wordpress.com · Author: Julien Claudel Created Date: 4/6/2013 9:12:45 PM

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

<link rel="stylesheet" href="css/stylesheet1.css" type="text/css" title="css-astuces1">

<link rel="alternate stylesheet" href="css/stylesheet2.css" type="text/css" title="css-astuces2">

<link rel="alternate stylesheet" href="css/stylesheet3.css" type="text/css" title="css-astuces3">

<link rel="alternate stylesheet" href="css/stylesheet4.css" type="text/css" title="css-astuces4">

<link rel="alternate stylesheet" href="css/stylesheet5.css" type="text/css" title="css-astuces5">

<link rel="alternate stylesheet" href="css/stylesheet6.css" type="text/css" title="css-astuces6">

<link rel="alternate stylesheet" href="css/stylesheet7.css" type="text/css" title="css-astuces7">

<link rel="alternate stylesheet" href="css/stylesheet8.css" type="text/css" title="css-astuces8">

<link rel="alternate stylesheet" href="css/stylesheet9.css" type="text/css" title="css-astuces9">

<link rel="alternate stylesheet" href="css/stylesheet10.css" type="text/css" title="css-astuces10">

<script type="text/javascript" src="styleswitcher.js"></script>

Ce qui fait que, la couleur reste en mémoire pendant le temps qu’on lui aura accordée dans le fichier styleswitcher.js qui correspond à :

date.setTime(date.getTime()+(days*24*60*60*1000));

- Modifications du logo de Bicêtre, et du logo de l’aphp, et activation de transparence pour concorder avec les autres couleurs que le blanc initial.

-

Using username "root".

[email protected]'s password:

Last login: Fri Jan 11 08:52:35 2013 from 10.163.218.38

[root@G11-VB-SRVCENTOS01 ~]# cd /var/www/html/

[root@G11-VB-SRVCENTOS01 html]# ll

total 8

drwxr-xr-x. 5 jclaudel jclaudel 4096 8 févr. 14:32 bicetre

drwxr-xr-x. 3 root root 4096 11 janv. 08:59 old-site

Sauvegarde de mon répertoire par constitution d’un tar

Page 8: claudelsioslam.files.wordpress.com · Author: Julien Claudel Created Date: 4/6/2013 9:12:45 PM

[root@G11-VB-SRVCENTOS01 html]# tar -zcvf bicetre.tar.gz bicetre

bicetre/

bicetre/design.php~

bicetre/info-kdos.php~

bicetre/docAGENDAWEB.php~

[root@G11-VB-SRVCENTOS01 html]# ll

total 30844

drwxr-xr-x. 5 jclaudel jclaudel 4096 8 févr. 14:32 bicetre

-rw-r--r--. 1 root root 31572976 8 févr. 14:51 bicetre.tar.gz

drwxr-xr-x. 3 root root 4096 11 janv. 08:59 old-site

Récupération du chemin absolue ou se situe ma sauvegarde

[root@G11-VB-SRVCENTOS01 html]# pwd

/var/www/html

Récupération du fichier du serveur Linux pour sauvegarder mon travail

D:\Users\aut6263>scp [email protected]:/var/www/html/bicetre.tar.gz ./

[email protected]'s password:

bicetre.tar.gz | 30832 kB | 15416.5 kB/s | ETA: 00:00:00 | 100%

Transfert sur le futur hébergement.

scp ./ [email protected]:/var/www/html/bicetre.tar.gz

Sur 10.163.192.76

Page 9: claudelsioslam.files.wordpress.com · Author: Julien Claudel Created Date: 4/6/2013 9:12:45 PM

Cd /var/www/html

Tar –zxvf bicetre.tar.gz

Résultat obtenu

Ancien site WEB

Page 10: claudelsioslam.files.wordpress.com · Author: Julien Claudel Created Date: 4/6/2013 9:12:45 PM

Nouveau site WEB

Ancien : Informations des applications

Page 11: claudelsioslam.files.wordpress.com · Author: Julien Claudel Created Date: 4/6/2013 9:12:45 PM

Nouveau : Informations des applications

Ancien : Après ouverture d’un fichier information

Page 12: claudelsioslam.files.wordpress.com · Author: Julien Claudel Created Date: 4/6/2013 9:12:45 PM

Nouveau : Après ouverture d’un fichier information