Catégorie : RPI RESEAUX

créer un serveur WEB APACHE avec votre raspberry PI c’est possible , nous allons voir ici comment faire tout cela.

MISE A JOUR DU PI:

comme toujours avant toute manip d’installation , faire une mise a jour de votre systeme:

sudo apt update
sudo apt upgrade 

INSTALLER APACHE :

nous allons commencer par installer la couche logicielle du serveur WEB , à savoir APACHE2 . rien de plus facile , taper:

sudo apt install apache2

TESTER L’INSTALLATION:

une fois l’installation faite , pour vérifier que tout fonctionne, essayer une connexion sur votre RPI via un PC lui aussi connecté sur votre réseau domestique . tout d’abord , récupérer l’adresse IP de votre RPI. pour cela positionner le pointeur de votre souris sur l’icône de connexion réseau dans la barre de menu du RPI ( en haut ou en bas a droite suivant le type d’affichage choisis).

vous devriez voir apparaitre quelque chose du genre:

eth0: Configured 193.168.1.17

c’est l’adresse IP de votre RPI sur votre reseau domestique.

ouvrez votre navigateur WEB et taper dans la barre de navigation l’adresse IP trouvée avec devant “http://” :

http://193.168.1.17

si tout est OK vous devriez voir apparaitre une page de ce type signe que tout fonctionne:

APACHE est donc installé et il utilise le répertoire /var/www/html comme racine pour le site.

l’installation a déposé dans le repertoire /var/www/html un fichier Index.html qui est la page d’exemple qui s’affiche .

quand on contact l’adresse IP du RPI , on se connecte sur le port 80 du RPI (commande http://…) et apache va cherche dans le repertoire /var/www/html/.

par exemple , si vous tappez : http:// 193.168.1.17/monsite apache cherchera automatiquement le fichier “monsite” dans le repertoire /var/www/html/ et si on ne rajoute pas de nom de fichier et juste la commande: http:// 193.168.1.17/ , apache va chercher le fichier index.html comme tout appel classique a un site internet .

MODIFIER LES DROITS D’ACCÈS:

nous allons donner des droits d’accès au dossier d’apache , ce qui permettra d’administrer les sites installés ( modification et création de fichiers => voir plus bas). Pour cela, lancez les commandes suivantes :

sudo chown -R pi:www-data /var/www/html/
sudo chmod -R 770 /var/www/html/

INSTALLER PHP:

pour pouvoir faire fonctionner votre serveur et par exemple installer un site internet , il faudra pour interpréter des commandes PHP. pour cela nous allons devoir installer l’interpréteur PHP qui exécutera ces commandes PHP.

pour installer PHP sur votre RPI, taper:

sudo apt install php php-mbstring

TESTER PHP:

avant de continuer plus loin, comme pour apache, nous allons tester le fonctionnement de PHP. pour cela avec l’explorateur du RPI ou en ligne de commande , aller supprimer le fichier Index.html qui est dans le répertoire /var/www/html/ puis créer un fichier index.php avec un éditeur de texte et mettez y la commande simple suivante:

echo "<?php phpinfo(); ?>" > /var/www/html/index.php

NOTA : les modif précédentes ne peuvent être faites qu’a condition d’avoir modifié les droits d’accès.

ouvrir le navigateur web sur sotre PC connecté sur le reseau et connectez vous a l’adresse IP du RPI , vous devriez voir apparaitre ceci :

INSTALLER MySQL et mariadb-server

nous allons maintenant installer le moteur/gestionnaire de base de données MySQL, et mariadb-server, pour cela taper:

NOTA: mariadb-server remplace mysql-server

sudo apt install mariadb-server php-mysql

TEST DE MySQL:

le test se fait en ligne de commande avec : sudo mysql –user=root

cette commande démarre mariadb qui va nous permetre queluqes config de base, pour cela taper les commandes suivantes derrière le prompt MariaDB [(none)]>:

DROP USER 'root'@'localhost';
CREATE USER 'root'@'localhost' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON *.* TO 'root'@'localhost' WITH GRANT OPTION;

dans la deuxieme ligne de commande , remplacer ‘password’ par un mot de passe de votre choix. ce mot de passe servira avec PHPmyAdmin

INSTALLER PHPMyAdmin:

PHPMyadmin est une interface plus simple qu’une console pour gerer une base de donnée MySQL. pour l’installer :

sudo apt install phpmyadmin

pendant l’installation, des fenêtres de configuration de paquet s’ouvre , réponses aux différentes questions:

serveur web a reconfigurer: apache2

config de phpmyadmin: repondre non

puis activer l’extension de mysqli avec :

sudo phpenmod mysqli
sudo /etc/init.d/apache2 restart

TEST de PHPmyadmin:

avec le navigateur internet de votre PC , connectez vous avec la commande:

http://193.168.1.17 /phpmyadmin

si vous avez un message d’erreur c’est parce que probablement le répertoire d’installation de phpmyadmin n’est pas dans var/www/html , en général , Phpmyadmin est installé dans usr/share/ , alors taper la commande ci dessous qui va créer un lien entre les 2 répertoires :

sudo ln -s /usr/share/phpmyadmin /var/www/html/phpmyadmin

normalement tout devrait rentrer dans l’ordre et avec l’adresse plus haut on obtiens le

résultat suivant:

CONFIGURATION/CHANGEMENT DU MOT DE PASSE PHPmyAdmin:

en ligne de commande Bash, aller dans le repertoire var/www/html/phpmyadmin et copier/coller le fichier “config.sample.inc.php” en le renommant avec la commande shell ci dessous:

cp config.sample.inc.php config.inc.php

ensuite ouvrir le fichier config.inc.php avec l’editeur nano :

sudo nano config.inc.php

une fois le fichier ouvert en mode éditeur , au debut on trouve un ensemble de ligne sous le commentaire /* serveur parameter */ qui commencent toutes par $cfg[‘Servers’][$i][‘wxyz’]

aller sous la ligne : $cfg[‘Servers’][$i][‘host’] = ‘localhost’; et ajouter les 2 lignes suivantes ( a la place de password reprendre le mot de passe de la config mariaDB.:

RENDRE VOTRE RPI accessible depuis le WEB

le serveur Web est prêt mais il n’est pas encore accessible via le web , uniquement en local. pour cela il va falloir que la box redirige les requêtes entrantes vers le RPI qui héberge le serveur. Pour mettre ces redirections en place, nous allons devoir accéder a l’interface de configuration de la Box.

pour accéder a l’interface de config de votre box voir les documents relatif fournis par votre fournisseur d’accès . une fois dans l’interface via vos identifiants et mot de passe d’administration, il vous faudra trouver l’option qui permet de rediriger les connexions entrante . sur une box orange, il faut activer l’option “réseau” dans les préférences et créer/activer les service et port correspondants .

.une fois fait , votre RPI est accessible depuis l’extérieur via l’adresse IP de votre box .

DYN DNS:

votre fournisseur d’acces vous affecte une adresse dynamique , pour résoudre ce problème , il faut utiliser les service d’un fournisseur de nom de “domaine” reliant le nom de domaine a l’adresse dynamique . il en existe plusieurs , un des plus connus est le suivant:

http://noip.com

vous pouvez créer un compte et un nom de domaine fixe en quelques clic et faire le lien de ce nom de domaine fixe avec votre paramétrage DYN/DNS chez votre fournisseur d’accès .

pour cela , vous vous connectez a votre compte administrateur de box et saisissez les données de connexion a votre compte noip et le tour est joué (voir copie écran ci dessous dans le cas de la livebox orange) . il ne reste plus qu’a vous connecter au nom de domaine pour avoir accès a votre serveur web RPI quelque soit votre adresse IP dynamique …

ne reste plus qu’a créer votre site internet et donc les pages hébergées sur le serveur du RPI dans le repertoire var/www/html . ce sera l’objet d’un ou plusieurs autres tutos …

NOTA: si vous vous connectez de façon distante avec un http://domaine.ddns.net/phpmyadmin , vous pouvez aller configurer votre base de donnée de façon distante …

vous avez installé APACHE, PHP ,MySQL et PhpMyAdmin, voyons comment créer une base de donnée et une table avec PhpMyAdmin.

connectez vous a votre adresse d’administration via votre IP , la connexion se fait avec un lien du type :

http://192.168.1.xx/phpmyadmin

après connexion au serveur , s’affiche l’écran de login, taper votre mot de passe puis “Exécuter”:

s’ouvre alors l’écran général de phpMyAdmin:

faisons un petit zoom dans cet ecran :

a gauche apparait la liste des bases de données existantes , pour pouvoir en créer une nouvelle , il suffit de cliquer dans la case “base de données” dans la bande de menu en haut (case entourée en rouge ci dessus).

dans l’ecran suivant ,en dessous de la ligne “créer une base de donnée” , donner un nom a votre BDD (ici MaBDDtest”), puis cliquer sur créer:

la base et créée , un nouvel ecran s’affiche , on voit a gauche la nouvelle BDD , reste a créer la premiere table de la base de données.

donner un nom a cette premiere table ( ici adherents par exemple pour créer un fichier d’adhérents a une asso) et spécifier le nombre de colonnes ( qui correspond au nombre de données a enregristrer dans la table), ici 7 . puis cliquez a droite de l’ecran sur executer

l’ecran suivant va vous permetre de donner un nom au differents champs d’enregistrement , de déclarer un type de donnée, puis le nombre de caracteres reservés a l’enregistrement concerné.

en bas de page a droite , le bouton ” ” vous permet de sauvegarder la saisie ;

voila votre base de donnée avec sa première table est créée , l’écran récapitulatif possède des options a droite permettant de modifier a tout moment la définition de chaque enregistrement. vous pouvez donc revenir ultérieurement sur votre table si besoin de la faire évoluer .

CREER UNE PREMIERE LIGNE DANS LE FICHIER:

pour pouvoir tester le fonctionnement de la base de donnée , il peut être utile de créer un premier enregistrement de données , pour cela aller dans l’onglet SQL et saisissez une ligne d’exemple sous ce format:

INSERT INTO MaBDDtest.adherents (NOM, PRENOM, RUE, CODEPOSTAL, VILLE, PORTABLE, MAIL) VALUES ('LEPONGE', 'Bob', '1 rue du lavabo', '75', 'PARIS', '0670564357', 'bobleponge@gmail.com');

puis faire exécuter en bas a droite , ne reste plus qu’a aller dans affichage pour constater l’enregistrement:

MESSAGE D’ERREUR LA PREMIÈRE FOIS:

il se peut que vous ayez un message d’erreur sur fonnd rouge/rose comme celui ci dessous a la première tentative ( c’était mon cas).

Warning in ./libraries/sql.lib.php#613
count(): Parameter must be an array or an object that implements Countable

une recherche google sur ce message d’erreur permet de résoudre le problème. voici la solution trouvée qui a réglé mon soucis:

• aller dans le fichier /usr/share/phpmyadmin/libraries/sql.lib.php à l’aide de cette commande : nano /usr/share/phpmyadmin/libraries/sql.lib.php
• Recherche (count($analyzed_sql_results[‘select_expr’] == 1) à l’aide des touches CTRL + W
• Remplace le par ((count($analyzed_sql_results[‘select_expr’]) == 1)
• Puis sauvegarder avec CTRL + X et confirmer avec Oui.
• redémarrer le serveur web avec la commande : service apache2 restart

tout devrait rentrer dans l’ordre .

pas de serveurs web et bases de données MySQL sans un minimum de connaissances des bases du PHP.

nous allons voir ici quelques manipulations “stratégiques” en PHP sur les bases de données. l’objectif ici n’est pas de faire un cours de PHP , mais de proposer des modules de programme “tout cuits” utilisables dans vos applications . pour une meilleure compréhension des instruction , faire une recherche type google.

pour tester les petits bouts de programmes suivants , il vous suffit de les copier/coller dans votre editeur raspberry et de les enregistrer dans le répertoire var/www/html puis de les lancer dans votre navigateur via une ligne du type :http://192.168.x.y/nomfichier.php ou 192.168.x.y est l’adresse ip locale de votre serveur RPI et nomfichier.php le nom de votre fichier enregistré dans ce repertoire

création d’ une base de donnée:

le petit bout de php ci dessous se connecte au serveur local avec le nom d’utilisateur et le mot de pass créés l’ors de l’installation de Mysql. et crée une base de donnée apellée demo .il integre des message de diagnostic . les commandes strategiques sont celles en rouge.

<?php
$link = mysqli_connect("localhost", "root", "password");
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
} 
$sql = "CREATE DATABASE demo";
if(mysqli_query($link, $sql)){
    echo "Database created successfully";
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
mysqli_close($link);
?>

création d’ une table dans une base de donnée:

ci dessous , on se connecte a la base de donnée démo créée précédemment, et on crée une table “persons” qui contient 4 données: numero d’enregistrement , nom, prénom, adresse mail. c’est 4 données ont des noms de “variables” respectif : id, first_name, last_name et email. la variable id est en auto-incrémentation (la valeur associéé s’incrémente automatiquement a chaque nouvel enregistrement. c’est en plus la clé primaire de tri (PRIMARY KEY). pour les 3 autres variables, VARCHAR(x) précise le type de variable et la place (x) reservée a la variable. NOT NULL précise que l’enregistrement ne paut pas etre vide.

<?php
$link = mysqli_connect("localhost", "root", "password", "demo"); 
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
$sql = "CREATE TABLE persons(
    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    first_name VARCHAR(30) NOT NULL,
    last_name VARCHAR(30) NOT NULL,
    email VARCHAR(70) NOT NULL UNIQUE
)";
if(mysqli_query($link, $sql)){
    echo "Table created successfully.";
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
mysqli_close($link);
?>

REMARQUE: creation d’une base et de sa table sont plus facile via PhpMyAdmin. mais les 2 exemples fournis permettent eventuellement de créer des scripts dynamiques .

insertion d’un enregistrement :

<?php
$link = mysqli_connect("localhost", "root", "", "demo");
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
$sql = "INSERT INTO persons (first_name, last_name, email) VALUES ('Peter', 'Parker', 'peterparker@mail.com')";
if(mysqli_query($link, $sql)){
    echo "Records inserted successfully.";
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
mysqli_close($link);
?>

affichage du contenu de la table d’une BDD :

<?php
$link = mysqli_connect("localhost", "root", "password", "demo");
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
$sql = "SELECT * FROM persons";
if($result = mysqli_query($link, $sql)){
    if(mysqli_num_rows($result) > 0){
        echo "<table>";
            echo "<tr>";
                echo "<th>id</th>";
                echo "<th>first_name</th>";
                echo "<th>last_name</th>";
                echo "<th>email</th>";
            echo "</tr>";
        while($row = mysqli_fetch_array($result)){
            echo "<tr>";
                echo "<td>" . $row['id'] . "</td>";
                echo "<td>" . $row['first_name'] . "</td>";
                echo "<td>" . $row['last_name'] . "</td>";
                echo "<td>" . $row['email'] . "</td>";
            echo "</tr>";
        }
        echo "</table>";
         mysqli_free_result($result);
    } else{
        echo "No records matching your query were found.";
    }
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}

voici le résultat de l’affichage dans le navigateur dans le cas d’un exemple perso de base de donnée d’une station météo:

ENVOI DE DONNEES A PARTIR D’UN FORMULAIRE:

nous avons vu plus haut comment insérer des données avec un script PHP. nous allons voir maintenant comment insérer des données a partir d’un formulaire dans une page HTML.

1-creation du formulaire:

le fichier fourni au format txt devra etre enregistré au format html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Add Record Form</title>
</head>
<body>
<form action="insert.php" method="post">
    <p>
        <label for="firstName">First Name:</label>
        <input type="text" name="first_name" id="firstName">
    </p>
    <p>
        <label for="lastName">Last Name:</label>
        <input type="text" name="last_name" id="lastName">
    </p>
    <p>
        <label for="emailAddress">Email Address:</label>
        <input type="text" name="email" id="emailAddress">
    </p>
    <input type="submit" value="Submit">
</form>
</body>
</html>

2-récuperation des données et insertion:

quand l’ utilisateur clique sur le bouton d’envoi du formulaire , le fichier formulaire HTML envoie les données au fichier « insert.php ». Le fichier ‘insert.php’ se connecte au serveur de base de données MySQL, récupère les champs des formulaires à l’aide des variables PHP $_REQUEST et exécute la requête d’insertion pour ajouter les enregistrements.

le fichier insert.txt devra etre chargé avec l’extension.php dans le repertoire var/www/html du serveur raspberry

<?php
$link = mysqli_connect("localhost", "root", "password", "demo"); 
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
} 
$first_name = mysqli_real_escape_string($link, $_REQUEST['first_name']);
$last_name = mysqli_real_escape_string($link, $_REQUEST['last_name']);
$email = mysqli_real_escape_string($link, $_REQUEST['email']); 
$sql = "INSERT INTO persons (first_name, last_name, email) VALUES ('$first_name', '$last_name', '$email')";
if(mysqli_query($link, $sql)){
    echo "Records added successfully.";
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
} 
mysqli_close($link);
?>

pour faire fonctionner l’ensemble , une fois les 2 pages dans le repertoire html , il suffit d’appeler la page html avec le navigateur via une ligne de commande du type ci dessous:

http://192.168.x.y/formulaire

voici le résultat du formulaire test de mes essais sur une base de donnée météo ( exemple plus haut):

une fois le serveur APACHE bâti , reste a faire son site web. voici un kit version light pour un premier site basique a structure légère , peu consommateur de ressources et dédié aux débutants n’ayant aucune connaissance en HTML ou PHP.

NOTA: pour des site beaucoup plus lourds et plus pro , je recommande l’installation et l’utilisation de WordPress comme c’est le cas pour ce site (hébergé chez un fournisseur dédié et non pas sur un serveur local RPI) .

FICHIERS :

pour batir un site a structure basique, vous trouverez ci dessous un dossier compressé “sitesimple.rar” contenant les fichier de base pour réaliser votre premier site sur votre serveur apache.

le dossier contient egalement des images et fichiers d’aide qui rappellent les consignes ci dessous.

INSTALLATION DU DOSSIER:

extraire les fichiers de l’archive RAR , vous obtenez l’ensemble des fichiers ci dessous:

copier l’ensemble de ces fichiers et dossiers dans la racine du site de votre serveur sur le RPI ( en general le dossier “var/www/html“.

si vous avez ouvert l’accès extérieur a votre serveur sur votre box ( detail de la manip en bas de page ICI) , et que vous vous connectez via un acces exterieur , la page Index doit s’ouvrir et vous afficher le site basique qui ressemble a cela:

PRINCIPE DE FONCTIONNEMENT:

cette version très basique fonctionne sur le principe des frames (fenetres). l’affichage est divisé en 3 fenetres (Frame) :

• bandeau gris foncé horizontal du Haut avec le tire de votre site (ici “Ma page du Haut” )
• le bandeau gris clair de gauche avec le Menu . 3 options de bases en standard , page “Accueil” , acces page 1 , acces page 2
• la fenetre centrale qui affiche la page courante ( page d’accueil a l’ouverture)

le fait de cliquer sur une des options du menu de gauche fait changer/afficher la page concernée dans la fenetre centrale . pour tester sans passer par une navigation exterieure , il vous suffit d’aller dans le repertoir d’installation du package et de double cliquer sur le ficher “Index.html” . le site s’ouvre et si vous cliquez dans les différentes options de gauche vous verrez la page centrale changer. la page accueil affiche un tutos basiques qui explique comment changer tout ça. reste maintenant a modifier les fichiers pour batir votre site perso sur cette base. voyons comment faire.

MODIFICATIONS / ADAPTATION :

il ne vous reste plus qu’a modifier les contenu des différents fichiers pour adapter cette structure basique a vos souhaits :

modification du titre :

ouvrir le fichier “framehaut.html” avec l’editeur HTML ( libre office par exemple) et changer le titre “Ma page du haut” avec le titre que vous souhaitez . changer la police, la taille des caracteres et les couleurs en fonction de vos préférences. n’oubliez pas de sauvegarder le resultat avec l’extension html.

modification du menu de gauche:

ouvrez le fichier “framemenu.html” avec un éditeur de texte genre bloc note , et dans les 2 lignes ci dessous qui affichent les tire de menu et exécutent les redirection de pages, remplacez les testes en ROUGE par le texte de menu que vous souhaitez.

<P><A HREF="page1/page1.html" TARGET="pagesite"><SPAN STYLE="font-variant: normal"><FONT COLOR="#000000"><FONT FACE="Times New Roman, serif"><FONT SIZE=3><SPAN STYLE="font-style: normal"><B>Page1</B></SPAN></FONT></FONT></FONT></SPAN></A></P>
<P><A HREF="page2/page2.html" TARGET="pagesite"><SPAN STYLE="font-variant: normal"><FONT COLOR="#000000"><FONT FACE="Times New Roman, serif"><FONT SIZE=3><SPAN STYLE="font-style: normal"><B>Page2</B></SPAN></FONT></FONT></FONT></SPAN></A></P>

vous pouvez ensuite changer police de caractere, couleur et taille avec l’editeur de texte plus evolué ( libreoffice par exemple)

création/modification des différentes pages:

les différentes pages peuvent ensuite etre modifiées directement avec un editeur de texte evolué pour saisir le texte a afficher , les polices de caractere , les couleurs etc..

les 3 pages a modifier sont :

• “mapageaccueil.html” dans le repertoire racine
• “page1.html” dans le repertoire page1
• “page2.html” dans le repertoire page2

penser a chaque fois a bien sauvegarder vos pages au format HTML.

ajout d’une page pages:

pour ajouter une page, il y a 2 opérations a faire:

• ajouter un repertoire supplémentaire page3 – page4-….pagex , par copy/paste d’un des 2 repertoires existant et en changeant le numéro du nom du repertoire “pagex” et du fichier “pagex.html” a l’intérieur et en modifiant le contenu du fichier “pagex.html” avec un editeur de texte
• ajouter une ligne de menu dans “framemenu.html” pour renvoyer a la page supplémentaire. pour cela ouvrir “framemenu.html” dans un editeur de texte basique genre bloc note et faire un copy paste d’une des deux ligne appelant les pages 1 ou 2:

• modifier les nom des liens de redirection et sauvegarder le fichier au format html :

on peut recommencer l’opération autant de fois que de pages a rajouter .

NOTA: les modifications du site peuvent etre effectuées sur un PC avant d’etre installées sur le Raspberry PI.

voila pour les consignes basiques pour un site Web basique sur serveur APACHE raspberry PI.

voyons comment implémenter une galerie photo basique avec le site web basique .

a partir du site simple décrit ici , nous allons modifier le répertoire “page1” en lui ajoutant 8 photos comme ci dessous . attention pour la dénomination des fichiers photos choisir une codification simple. ici en l’occurrence , les miniatures seront affichées par paquet de 4 sur plusieurs lignes ( 2 lignes pour cet exemple) donc le nom de fichier est numéroté avec un index ligne colonne

Contenu de “page1.html” :

voici le code html et les commandes de style de “page1.html” . ce fichier au format texte devra bien entendu etre modifié en html en changeant le nom de l’extension.

la partie entre les balise <style> et </style> permet de definir le style (formater) le contenu de la page . vous pouvez donc modifier les valeur suivant vos besoins .

voici le détail du code :

<!DOCTYPE html>
<html>
  <head>
	<title> GALERIE PHOTO 1</title>
	<style>
	img
	{
	  width: 140px;
	  heigh: 110px;
	}
	th
	{
	  font-size: 2em;
	  background-color: #f9ddff;
	  padding: 20px;
	}
	body
	{
	  font-family: sans-serif;
	  font-size: lem;
	  text-align: center;
	  background-color: slateblue;
        }
	table
	{
	  background-color: white;
	  width: 60%;
	}
	td
	{
	  padding: 25px;
	}
	</style>
   </head>

   <body>
	<table align="center">	
	<tr>
	  <th colspan="4">GALERIE PHOTO 1</th>
	</tr>
	<tr>
	  <td colspan="4">clicker sur la vignette pour agrandir la photo</td>
	</tr>
	<tr>
	  <td><a href="image01.jpg" target="_blank"><img src="image01.jpg"></a></td>
	  <td><a href="image02.jpg" target="_blank"><img src="image02.jpg"></a></td>
	  <td><a href="image03.jpg" target="_blank"><img src="image03.jpg"></a></td>
	  <td><a href="image04.jpg" target="_blank"><img src="image04.jpg"></a></td>
	</tr>

	<tr>
	<td><a href="image11.jpg" target="_blank"><img src="image11.jpg"></a></td>
	<td><a href="image12.jpg" target="_blank"><img src="image12.jpg"></a></td>
	<td><a href="image13.jpg" target="_blank"><img src="image13.jpg"></a></td>
	<td><a href="image14.jpg" target="_blank"><img src="image14.jpg"></a></td>
	</tr>
	</table>
  </body>
</html>

en appelant la page 1 via le menu de gauche du site web basique , on ouvre “page1.html” dans la fenetre de visualisation et cela donne:

et quand on clique sur une des vignettes de la page, on ouvre une nouvelle fenêtre avec la photo en taille maxi adaptée a la fenêtre , par exemple en cliquant sur la deuxième vignette de la deuxième ligne on obtient cette page:

voila , pas plus compliqué que ça . vous pouvez bien entendu créer plusieurs galeries photos , appelée chacune par une ligne différente dans le menu de gauche …

pour cela , créer autant de répertoire et de fichiers “pagex.html” avec les photos relatives dans le répertoire .

Comme pour la galerie photo , voyons comment créer une page de vidéos. le principe est le meme que pour la galerie photo. on va créer un repertoire avec les videos ( ici au format MP4) et une page html pour l’affichage.

comme pour la page photo, voici le fichier htlm au format txt ( penser a remetre l’extension html dans votre repertoire du serveur ):

par rapport a la page de galerie photo , dans la partie table, on a remplacé les code de redirection photo par des codes de redirection video . ces codes lancent le lecteur vidéo maintenant inclus en standard dans les navigateurs classiques . le format vidéo MP4 est également maintenant un des format standard supporté => il vous faudra donc faire attention a ne pas utiliser n’importe quel format video sur votre site.

<!DOCTYPE html>
<html>
	<head>
		<title> VIDEOS 1</title>
		<style>
		th
		{
			font-size: 2em;
			background-color: #f9ddff;
			padding: 20px;
		}
		body
		{
			font-family: sans-serif;
			font-size: lem;
			text-align: center;
			background-color: slateblue;
		}
		table
		{
			background-color: white;
			width: 60%;
		}
		td
		{
			padding: 25px;
		}

		</style>
	</head>
	<body>
		<table align="center">	
			<tr>
				<th colspan="4">VIDEOS</th>
			</tr>
			<tr>
				<td>
				<video width="640" height="480" controls>
				<source src="saturneweb.mp4" type="video/mp4">
				Your browser does not support the video tag.
				</video>
				</td>
			</tr>
			<tr>
				<td>
				<video width="640" height="480" controls>
  				<source src="jupiterweb.mp4" type="video/mp4">
				Your browser does not support the video tag.
				</video>
				</td>
			</tr>
		</table>
	</body>
</html>

voila le look de la page ainsi bâtie après ouverture dans le navigateur:

nous allons voir ici comment limiter l’acces a une page avec identifiant et mot de passe via .htaccess et .htpasswd.

le principe consiste a mettre dans le repertoire de la page html un fichier .htacces contenant un script reconnu par le serveur appache. ce script n’autorisera l’acces au repertoire et l’ouverture de la page html qu’a condition de fournir un identifiant et un mot de passe contenu dans un fichier texte .htpasswd

nous travaillons sur la base du site web basique proposé ICI .

dans ce cadre , nous allons créer un repertoire “page3” avec dedans un fichier html “page3.html” dont nous limiterons l’acces par identifiant et mot de passes

CREATION DU FICHIER .htpasswd

le fichier .htpasswd devra être créé en mode console de façon a ce que le serveur Apache intègre le cryptage du mot de passe . en effet , le mot de passe sera crypté dans le fichier .htpasswd.

pour sécurisé doublement l’accès , nous le mettrons dans un répertoire créé a l’intérieur du répertoire “page3 ” ( il faudra créer ce répertoire en préliminaire) . quand nous aurons créé le fichier .htaccess et le fichier .htpasswd dans son répertoire nous aurons une structure de la page 3 comme ci dessous:

et dans le répertoire “password” :

pour créer le fichier .htpasswd, voici la ligne de commande shell a taper :

sudo htpasswd /var/www/html/page3/password/.htpasswd identifiant

il faudra remplacer identifiant par l’identifiant que vous souhaitez

après avoir validé la commande , shell vous demande de saisir un mot de passes. choisissez celui que vous souhaitez ( le noter en clair sur un papier) puis faire entré , le shell linux vous demande de confirmer le mot de passe . ne soyez pas étonné de ne rien voir apparaitre au moment de la frappe du mot de passe , c’est normal sous linux. apres avoir fini , si vous allez dans le répertoire password vous devriez voir un fichier .htpasswd et si vous l’ouvrez avec un éditeur de texte vous y verrez votre identifiant suivi de “:” et d’une série de chiffres et de lettres qui sont la forme cryptée de votre mot de passe.

vous pouvez créer d’autre identifiants et mots de passes en retapant la commande shell avec a la fin un nouvel identifiant autant de fois que vous souhaitez des users différents , le shell vous demandera ensuite un nouveau mot de passe et rajoutera le nouvel identifiant et le nouveau mot de passe dans le fichier .htpasswd.

CREATION DU FICHIER .htaccess

voici le fichier .htacces sous forme de fichier texte:

et voici le contenu

AuthUserFile /var/www/html/page3/password/.htpasswd
AuthName "Accès sécurisé" 
AuthType Basic 
Require valid-user 

la première ligne spécifie le chemin d’accès du fichier .htpasswd. il est imperatif de saisir le chemin d’acces complet sinon cela ne marchera pas . la deuxième ligne le message d’authentification, la troisième ligne spécifie le type d’authentification. et la dernier ligne précise que tous les user du fichier .htpasswd seront autorisés.

il faudra mettre le fichier texte dans le répertoire “page3” et modifier le nom du fichier en “.htaccess” (sans les guillemets mais avec le point devant) .

ACTIVER LES FICHIER .htaccess SUR RASPBIAN

sur un raspberry PI avec raspbian, les fichier .htaccess ne sont pas activés par défaut car il ralentissent le fonctionnement d’un serveur Apache. il va donc falloir activer le support des htaccess dans apache. nous allons donc modifier les configurations d’Apache2 et pour cela, éditez le fichier de configuration par défaut des sites d’Apache via le shell. voici la commande a taper pour rentrer dans l’éditeur du fichier de config apache:

sudo nano /etc/apache2/apache2.conf

Puis, cherchez les lignes : ” AllowOverride None” , et remplacer par ” AllowOverride All” et enregistrer les modifications (CTRL + O et ENTREE )

pour que les modifications soient prise en compte il faut redémarrer Apache avec une commande shell :

/etc/init.d/apache2 restart

tout devrait maintenant être opérationnel , voici un exemple de ce que cela donne quand on clique sur le menu de gauche dans un site exemple=> une fenêtre demandant un nom d’utilisateur et un mot de passe s’ouvre. l’accès a la page ne pourras se faire qu’une fois un identifiant et mot de passe du fichier htpasswd reconnu.

on peut protéger de la même façon autant de répertoires/pages que souhaitées voir même l’accès au site complet et differnecier les identifiant et mot de passe suivant les pages concernées.

page classique d’un site web , le formulaire de contact qui permet a une personne de se renseigner et contacter l’administrateur. nous allons voir comment mettre tout ça en place .

ENVOI DE MAIL

première étape pour faire fonctionner un formulaire qui envoi un message de contact , l’envoi de mail. nous allons voir ici l’envoi SMTP avec une live box orange et une messagerie GMAIL ( le smtp utilise la messagerie gmail pour envoyer les mails).

installer un service SMTP:

nous allons ici utiliser msmtp et mta , ils ont remplacé ssmtp devenu obsolète même si c’est celui que l’on trouve le plus souvent en recherche google.

sudo apt-get install msmtp msmtp-mta

configurer la sécurité de gmail et generer un mot de passe d’application:

la sécurité de gmail doit être configurée pour generer un mot de passe utilisable dans le fichier de config (point suivant)

ouvrez votre compte gmail correspondant au mail gmail utilisé par la suite et cliquez dans l’option “securité” du menu du compte:

ensuite aller dans la fenêtre “connexion a google” , vous devriez normalement avoir l’option “validation en 2 étapes” d’activée . si ce n’est pas le cas il faudra l’activer pour pouvoir profiter de la génération d’un mot de passe d’applications extérieures accédant a la boite gmail. cliquez dans la case mot de passe des applications.

ensuite il faudra ressaisir votre identifiant et votre mot de passe puis saisir le code reçu sur votre smartphone par sms ( issu de la validation en 2 étapes) vous aurez ainsi une fenêtre du type ci dessous:

dans “sélectionner une application” choisir “messagerie” et dans” sélectionner un appareil”, choisissez “autre” et saisissez un nom , par exemple “raspberri pi” puis cliquez sur la case bleu “GENERER”, une fenêtre s’ouvre avec une serie de 4 valeurs comme ci dessous (exemple).

notez ces valeurs sur un papier , il faudra les mettre dans “passwordgmail” du fichier de configuration(point suivant).

configurer le SMTP pour utilisation via GMAIL:

une fois le paquet msmtp installé et le mot de passe gmail généré , il va falloir créer un fichier de config appelé msmtprc dans lequel on va spécifier un certain nombre de données et paramètres utiles a msmtp et permettant la redirection via gmail. le fichier doit être installé dans le répertoire raspberry Pi “/etc“. voici la commande shell pour créer ce fichier:

sudo nano /etc/msmtprc

voici ci dessous, un contenu basique , version passe partout (qui fonctionne bien dans mon cas) a mettre dans ce fichier config avec l’éditeur nano , il comporte un compte (account) nommé “default” qui sera utilisé pour l’envoi de mail . le “passwordgmail” a utiliser est celui généré par gmail dans le point précédent.

account default
host smtp.gmail.com
protocol smtp
auth on
user moncompte@gmail.com
password: passwordgmail
tls on
tls_starttls on
from moncompte@gmail.com
maildomain gmail.com
port 587

TEST SMTP

il reste maintenant a tester le fonctionnement de l’envoi de messages mail avec msmtp. pour cela nous allons créer un petit fichier message dans le répertoire /etc avec nano:

sudo nano etc/demo_email

dont voici le contenu

from: Name <monmail@gmail.com>
to: <destinataire@toto.fr>
subject: Test
ceci est la premiere ligne
​​​​​​​ceci est la deuxieme ligne

commande Shell de test d’envoi mail du message

reste a taper une commande shell pour envoyer le contenu du fichier .le mot “default” correspond au compte “defaut” du fichier de config “msmtprc” plus haut . il est possible de créer plusieurs comptes dans msmtprc de façon a envoyer differents mail via differents comptes .

cat demo_email | msmtp -a default destinataire@toto.fr

si vous ouvrez votre boite mail destinataire , vous devriez trouver un mail avec le contenu du fichier demo_email.

envoi de mail avec pièces jointes :

en utilisant la commande ci dessous positionné dans un répertoire comportant un fichier “filename.ext”

/Downloads $ mutt -a filename.ext -s "fichier" --destinataire@toto.fr

on envoi un mail avec le fichier joint.

FORMULAIRE DE CONTACT

première chose a faire , une petite page html permettant d’afficher un formulaire et de saisir le texte dans les case avec un bouton “Envoyer“

le code html du formulaire :

<HTML>
<HEAD>
<TITLE>E-Mail Formulaire</TITLE>
</HEAD>
<BODY>
<FORM method="POST" action="envoi.php">
<P>Votre nom:<br>
<INPUT type="text" name="nom" size=30>
</p>
<P>Votre adresse E-Mail:<br>
<INPUT type="text" name="email" size=30>
</p>
<P>Message:<br>
<textarea name="message" cols=30 rows=5></textarea>
</p><INPUT type="submit" value="Envoyer">
</FORM>
</BODY>
</HTML>

le resultat:

et le fichier php qui envoi le contenu :