All posts by Zebra

Code <>, HTML 5

HTML 5 – Les formulaires

Leave a comment

Une page web qui affiche du texte, des images, et tout, c’est cool. Mais on peut aussi demander des informations aux visiteurs, tels que leur adresse email, leur nom, ou simplement de laisser un message. De quels outils disposons-nous en HTML 5 ? Les formulaires sont la réponse à cette question.

Tout formulaire commence doit être contenu dans les balises <form></form>. Il ne peut y avoir d’autre formulaire à l’intérieur. Il existe bien une possibilité pour avoir un design plus responsive, mais je n’en parlerais pas, car elle n’est pas compatible avec tous les navigateurs.

<form>

La balise <form> en elle même possède plusieurs attributs. Le premier, « action », définit la page cible où envoyer les données du formulaire. Le second attribut, « method », permet de définir une méthode d’envoi. Ce denier peut prendre la valeur « GET » ou « POST ». Par défaut, si l’attribut « method » est omis, c’est la méthode « GET » qui sera utilisé. La différence entre les deux méthodes, c’est qu’avec « GET », toutes les données seront envoyées dans l’url de destination (ex: http://monsite.fr/formulaire.html?nom=monnom&commentaire=mon&nbsp;commentaire). Avec la méthode « POST », les données sont envoyées séparément de l’url de destination (l’url resterait donc http://monsite.fr/formulaire.html). C’est une méthode recommandée, surtout si vous faites un formulaire de connexion où le mot de passe doit être envoyé.

Cependant, pour traiter ces informations, il vous faudra un programme du côté du serveur qui héberge vos pages. Celui-ci peut être écris en C++, ASP, PHP, ou autre. Je travaillerais personnellement avec le PHP pour vous montrer comment récupérer les données d’un formulaire et les traiter efficacement. Lisez mon blog section Code<> / PHP pour en apprendre plus; Cet article n’a que pour but de vous informer quant au fonctionnement des formulaires en HTML 5.

Note: On peut aussi traiter les formulaires avec du JavaScript, côté client (donc chez le visiteur), mais il est rare de le faire, d’autant plus en HTML 5.

La balise <form> peut donc avoir un attribut « action », qui s’il est omis, renverra automatiquement le formulaire sur la même page. Plutôt pratique, mais déconseillé de le laisser vide.

Un début de formulaire ressemble donc à ceci :

<form action="formulaire.html" method="POST">
</form>
<input>

La balise <input> est plutôt vaste. Elle prendra des formes diverses et variées en fonction de son attribut « type ». Elle doit posséder un attribut « name » pour avoir la possibilité de récupérer sa valeur par le biais du programme côté serveur. Ces balises ne se referment pas, on entrera jamais du texte ou quoique soit d’autre entre deux balises <input> et </input>. Toutes les balise <input> peut avoir l’attribut « required » pour signaler au navigateur que le champ est obligatoire. Si le champ est laissé vide et que le visiteur clique sur le bouton d’envoi du formulaire, le navigateur affiche alors l’erreur et n’enverra pas le formulaire. Certains champs <input> peuvent utiliser en plus l’attribut « placeholder » pour afficher du texte en arrière-plan lorsque le champ n’est pas rempli, et qui s’effacera au premier caractère entré par le visiteur. Vous pouvez spécifier aussi l’attribut « value » pour soit mettre une valeur par défaut, soit spécifier une valeur de choix (ex: <input type= »radio »>).

<input type= »text »>

Permet au visiteur d’entrer du texte brut, sur une ligne. On peut spécifier l’attribut « maxlength » pour définir une longueur maximale de la chaine d’entrée.

<input type= »password »>

Permet au visiteur d’entrer un mot de passe. Similaire au type « text », mais les caractères ne sont pas visible.

<input type= »submit »>

Affiche un bouton qui enverra le formulaire. Pour définir son texte, utilisez l’attribut « value ».

<input type= »email »>

Permet de demander une adresse email au visiteur. Si l’adresse est invalide, le navigateur affichera une erreur au moment d’envoyer le formulaire, et annulera son envoi. Permet aussi aux smartphones d’afficher un clavier différent lors de la saisie.

<input type= »radio »>

Permet de demander un choix au visiteur par le biais d’un bouton radio (exemple: est-il un homme ou une femme ?). Pour que plusieurs <input> « radio » puissent fonctionner de concert, il faudra leur attribuer le même nom. De plus, il faudra spécifier l’attribut « value » pour connaître la valeur choisie. Vous pouvez spécifiez l’attribut « checked » pour présélectionner une option.

<input type= »checkbox »>

Permet d’afficher une case à cocher, pour valider par exemple des CGU ou activer ou non certaines options sur votre site. Peut utiliser l’attribut « checked ».

<input type= »button »>

Permet d’afficher un bouton, qui typiquement, ne fera rien. Il est généralement utilisé conjointement avec du JavaScript pour effectuer des actions précises. Utilisez l’attribut « value » pour lui attribuer un texte à afficher.

<input type= »url »>

Vous demander au visiteur d’indiquer l’adresse d’un site web. Ce champ ressemble au type « text », mais le navigateur attendra une adresse valide. Permet aussi aux smartphones d’afficher un clavier différent lors de la saisie. Note: Ce type de champs n’est pas forcément compatible avec tous les navigateurs.

Petit exemple de formulaire :
<form action="formulaire.html" method="post">
  <div><input type="text" name="nom" placeholder="Votre nom" required></div>
  <div><input type="password" name="motdepasse" required></div>
  <div>Êtes-vous un homme ou une femme ?</div><div>Homme <input type="radio" name="genre" value="homme" checked>
  Femme <input type="radio" name="genre" value="femme"></div>
  <div>Afficher votre nom sur le site ? <input type="checkbox" name="afficher_nom"></div>
</form>

Note: Si vous ne voulez pas avoir d’erreur 404 avec votre navigateur, enregistrez ce formulaire dans un fichier nommé « formulaire.html ».

Il existe d’autres types d'<input>, mais ne sont pas forcément pris en charge par tous les navigateurs, ce qui est regrettable. A vous de voir si vous souhaitez vous en servir ou non. Dans tous les cas, pour les champs de type « date », « range », « number » ou encore « color », il reste la possibilité d’utiliser du JavaScript pour obtenir le même effet.

<textarea>

Si vous voulez que votre visiteur vous laisse un commentaire par exemple, c’est cette balise qu’il vous faut. Elle permet au visiteur d’entrer du texte sur plusieurs lignes. Cette balise par contre, se referme!

Exemple :
<form action="formulaire.html method="post">
  <textarea name="commentaire">Texte du visiteur</textarea>
</form>
<label>

Le label permet de spécifier un titre au champ voulu. C’est une balise qui doit se refermer, et qui utilise l’identifiant du champ (attribut « id » du champ, et attribut « for » du <label>) pour faire effet (on peut cliquer sur le label, qui aura le même effet que de cliquer sur le champ associé).

Exemple :
<form action="formulaire.html" method="post">
  <label for="nom">Votre nom : </label><input type="text" name="nom" id="nom" placeholder="Entrez votre nom ici" required>
</form>
Conclusion

Voila, vous ne connaissez maintenant un minimum sur les formulaires. Encore une fois, pour traiter les envois de formulaires, on utilisera en règle générale un langage de programmation côté serveur. J’utiliserais moi-même le PHP, je vous conseillerais donc de regarder dans le menu Code <> puis PHP.

Code <>, CSS 3

CSS 3 – Les classes et les identifiants

Leave a comment

Pour styliser une page web, on a le CSS, ça on l’a vu. On a vu dans l’introduction qu’on pouvait styliser les balises HTML. Ce qu’on va voir aujourd’hui c’est l’utilisation des classes CSS, et des identifiants HTML.

Les classes

Une classe CSS commence toujours par un « . ». Elle peut être attachée à une balise précise, ou être complètement détachée des balises pour être un peu plus généraliste.

Nous allons reprendre l’exemple HTML suivant (fichier « index.html »):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ma seconde feuille de styles</title>

    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
    <h3>Ma seconde feuille de styles</h3>
    <p>Petit paragraphe d'<span>exemple</span> avec des <span>classes</span>.</p>
  </body>
</html>

Dans notre feuille de styles « index.css » on pourrait mettre des classes. Pour quoi faire ? Simplement pour séparer deux types de contenus distincts, mais utilisant la même balise HTML. Dans le code HTML que je viens de vous fournir, on a deux fois la balise <span>. Si on utilise la feuille de styles de l’introduction, on aurait alors les deux mots « exemple » et « classes » en italique. Je souhaiterais que le premier reste en italique, mais que le second soit en caractères gras.

Nous allons le faire, avec des classes. Comme je l’ai dit précédemment, une classe CSS se définit toujours en commençant par un « . ». Nommons une classe « Italique », et une autre classe « Gras ».

Contenu du fichier « index.css » :

.Italique { font-style: italic; }
.Gras { font-weight: bold; }

Voila mes deux classes de définies. Utilisons-les maintenant dans l’exemple ci-dessus grâce à l’attribut HTML « class ». Puisque nous avons une classe générique, nous pouvons nous en resservir pour un autre élément HTML. Ajoutons donc un paragraphe italique.

Contenu du fichier « index.html » :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ma seconde feuille de styles</title>

    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
    <h3>Ma seconde feuille de styles</h3>
    <p>Petit paragraphe d'<span class="Italique">exemple</span> avec des <span class="Gras">classes</span>.</p>
    <p class="Italique">Copyrights Zebra's</p>
  </body>
</html>
Les identifiants

Dans les attributs HTML existe l’identifiant définit par « id ». Celui-ci est censé être unique dans le document. Il est toutefois régulièrement utilisé en JavaScript pour identifier facilement un élément HTML précis. Sachez qu’on peut se servir des identifiants HTML au sein d’une feuille de styles.

Page « index.html », modifié avec des identifiants :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ma seconde feuille de styles</title>

    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
    <h3>Ma seconde feuille de styles</h3>
    <p>Petit paragraphe d'<span id="Italique">exemple</span> avec des <span id="Gras">classes</span>.</p>
    <p id="Copyrights">Copyrights Zebra's</p>
  </body>
</html>

En CSS, pour utiliser un identifiant HTML, il faut précéder son nom par un « # ».

Fichier « index.css », modifié avec les identifiants :

#Italique { font-style: italic; }
#Gras { font-weight: bold; }

#Copyrights { font-style: italic; }

Voila, ouvrez la page HTML avec votre navigateur, nous avons le même résultat que précédemment.

Simplifications

Notre dernier exemple peut être simplifié. Lorsqu’on utilise le même style sur plusieurs éléments HTML, on peut séparer nos identifiants et classes par des « , ».

Fichier « index.css » simplifié (identifiants) :

#Italique, #Copyrights { font-style: italic; }
#Gras { font-weight: bold; }

Les identifiants « Italique » et « Copyrights » auront désormais le même style appliqué, sans réécrire sans cesse la même chose. Plutôt pratique, n’est-ce pas ?

Attribuer une classe à un élément HTML précis

Autre chose que nous pouvons faire, c’est attribuer des classes à des éléments HTML spécifiques. La syntaxe est « élément.class { attributs; }« .

Exemple :
span.Italique, p.Copyrights { font-style: italic; }
span.Gras { font-weight: bold; }

Si on prend ce code CSS et qu’on le met dans notre premier fichier d’exemple, on aura une fois de plus le même résultat, mais écrit différemment.

La magie des CSS

On peut appliquer plusieurs styles différents en fonction de l’élément, de la classe, de son identifiant. On peut très bien utiliser plusieurs classes pour un même élément HTML, en les séparant par des  » « . Mettons tout cela en pratique et faisons quelque chose d’un peu plus poussé.

Fichier « index.html » :
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ma seconde feuille de styles</title>

    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
    <h3>Ma seconde feuille de styles</h3>
    <p>Petit paragraphe d'<span class="Italique Gras">exemple</span> avec des <span class="Gras">classes</span>.</p>
    <p class="Italique">Copyrights Zebra's</p>
  </body>
</html>
Fichier « index.css » :
.Italique { font-style: italic; }
.Gras { font-weight: bold; }

Cette fois, le résultat est qu’on a le mot « exemple » en gras et italique, le <span> ayant hérité des deux classes CSS, en prenant bien soin de séparer le nom des classes par un espace. On appelle cela la cascade.

Les priorités

Que se passerait il si on utilisait à la fois l’identifiant HTML, la classe CSS, l’attribut HTML « style », du code dans les balises <style>, et tant qu’à faire, qu’on utilise deux classes en même temps ?

Tout est question de priorités. En premier style défini, on a celui du navigateur lui-même. Celui-ci présente déjà des styles prédéfinis par défaut, et ce n’est pas forcément le même d’un navigateur à l’autre. D’où l’importance cruciale de faire un nettoyage en début de feuilles de styles. En second, qui vient écraser les paramètres du navigateur, on a le fichier CSS que l’on a lié au document HTML via la balise <link>. Ensuite viennent les styles définis dans l’entête du document HTML. En dernier lieu, celui qui vient écraser tous les autres et aura sa plus forte priorité est celui de l’attribut « style ». Je n’ai pas parlé des identifiants contre les classes, c’est le dernier lu qui l’emporte.

Pour résumer  : <style> <– <link> <– CSS <– Navigateur.

Conclusion

Pour éviter toute confusion dans les styles, souvenez-vous bien des priorités, commencez par écrire les règles générales, puis les règles plus précises. Evitez de dédoubler les règles, évitez d’utiliser les identifiants le plus possible (réservez-les pour le JavaScript), pensez ) nettoyer les règles des navigateurs en début de feuille de styles, utilisez au plus possible les feuilles de styles externalisées que possible, définissez bien vos éléments, et ensuite vos classes.

Code <>, CSS 3

CSS 3 – Introduction

Leave a comment

Vous souhaitez mettre en couleurs une page web (et pas que) ? Vous êtes alors au bon endroit.

Qu’est ce que CSS ?

CSS signifie « Cascading Style Sheet », soit « Feuille de style en cascade » en français. Avec la magie des feuilles de styles, on peut mettre en forme un document HTML sans soucis.

Si vous ne savez pas comment faire une page web, direction l’introduction HTML dans la partie Code <>.

Mise en place de l’arsenal

Tout bon travailleur possède de bons outils. Il va nous falloir un bon éditeur de code CSS, qui nous mette le code en couleurs. Il en existe plein, cherchez avec un moteur de recherche aux mots clés « IDE CSS », vous en trouverez pléthore. Personnellement j’utiliserais PSPad disponible sur http://www.pspad.com.

Comment ça marche ?

Nous allons prendre l’exemple HTML 5 suivant pour notre première feuille de styles :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ma première feuille de styles</title>
  </head>
  <body>
    <h3>Ma première feuille de styles</h3>
    <p>Petit paragraphe d'<span>exemple</span></p>
  </body>
</html>

Nous avons 3 méthodes pour styliser la page :

  1. Utiliser l’attribut « style » des balises HTML
  2. Programmer la feuille de style au sein du document HTML
  3. Lier une feuille de style au document HTML

Nous allons changer la couleur de fond de la page, la couleur des textes, et mettre le mot « exemple » en italique. Je vous montrerais les 3 méthodes utilisable pour styliser notre page.

Méthode #1 : L’attribut « style »
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ma première feuille de styles</title>
  </head>
  <body style="background-color: #dddddd; color: #550000;">
    <h3>Ma première feuille de styles</h3>
    <p style="color: #00aa00;">Petit paragraphe d'<span style="font-style: italic;">exemple</span></p>
  </body>
</html>

Allez-y, copiez ce code HTML dans un fichier (avec l’extension « html » bien sûr), et ouvrez-le. Le fond est devenu grisâtre, le titre dans un bordeaux plutôt foncé, le paragraphe est quant à lui devenu vert, et le mot « exemple » est vert + italique.

C’est une méthode plutôt lourde quand on développe un site web. Il faut tenir compte du poids du fichier que l’on envoie à nos visiteurs, et ce n’est guère pratique.

Notez qu’il y a « héritage » du vert du paragraphe <p> envers son enfant <span>. On parle ici d’héritage des attributs, d’un parent envers un enfant (« parent » et « child » en anglais).

Méthode #2: L’intégration au sein de la page web

Pour ce faire, on va utiliser la balise HTML <style> :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ma première feuille de styles</title>
    
    <style type="text/css">
      body
      {
        background-color: #dddddd;
        color: #550000; 
      }
      
      p { color: #00aa00; }
      span { font-style: italic; }
    </style>
  </head>
  <body>
    <h3>Ma première feuille de styles</h3>
    <p>Petit paragraphe d'<span>exemple</span></p>
  </body>
</html>

Voila, c’est exactement la même chose que précédemment, mais j’ai deux petits trucs à dire là-dessus : la première, c’est que c’est plus lisible – on a séparé le style de la mise en forme, la seconde, c’est qu’on a stylisé ici toutes les balises de la même façon. C’est-à-dire que dans notre première méthode, il nous fallait définir l’attribut « style » à chaque paragraphe que l’on écrivait, à chaque <span>, … Désormais, à chaque fois qu’on utilisera le tag <p>, son texte se verra colorisé en vert, chaque <span> sera en italique … Autre petite chose, la balise HTML <style> se met dans l’entête du document, et pas ailleurs.

Vous noterez que dans mes deux exemples il y a un « ; » après chaque attribut. C’est normal. Lorsqu’on a qu’un attribut CSS dans l’attribut HTML « style », on peut se permettre de l’omettre, cependant, je vous conseille de prendre la bonne habitude de le rajouter à chaque fois, ce qui permettra de rajouter un attribut sans perdre de temps lorsque vous utiliserez cette méthode.

Méthode #3: La feuille de style

Avec PSPad, créez un fichier CSS (menu « Fichier », « Nouveau fichier », « CSS », « OK »). Enregistrez-le à côté de votre document html. Chez moi, le document HTML se nomme « index.html », j’ai donc nommé ma feuille de styles « index.css ».

Contenu du fichier « index.css » :

body
{
  background-color: #dddddd;
  color: #550000; 
}

p { color: #00aa00; }
span { font-style: italic; }

Contenu du fichier « index.html » :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ma première feuille de styles</title>

    <link rel="stylesheet" type="text/css" href="index.css">    
  </head>
  <body>
    <h3>Ma première feuille de styles</h3>
    <p>Petit paragraphe d'<span>exemple</span></p>
  </body>
</html>

Enregistrez le tout, et chargez votre document HTML dans votre navigateur favori. On a exactement le même résultat. C’est déjà plus élégant non ? On a complètement séparé le contenu de l’apparence graphique. Ca nous permet d’une, de mettre en cache la feuille de style par le navigateur internet du visiteur de la page, de deux de séparer les parties métiers. C’est-à-dire que pour un même contenu, on pourrait imaginer plusieurs designs différent, sans retoucher au contenu. C’est la méthode la plus pratique et la plus couramment utilisée sur le web.

Conclusions

Si vous voulez développer un site web, il vous faudra bien connaître d’une part le langage HTML, et d’autre part les feuilles de styles en cascade. Dans un prochain article, je développerais les possibilité des CSS, je n’ai fait qu’effleurer le sujet pour le moment.

Code <>, HTML 5

HTML 5 – Introduction

Leave a comment

Vous souhaitez développer un site web ? Vous êtes au bon endroit.

Comment on fait ?

Pour commencer, tout bon travailleur possède de bons outils, on va commencer par là. Il va nous falloir un bon éditeur de code HTML, qui nous mette le code en couleurs. Il en existe plein, cherchez avec un moteur de recherche aux mots clés « IDE HTML », vous en trouverez pléthore. Personnellement j’utiliserais PSPad disponible sur http://www.pspad.com.

Une fois que vous aurez votre IDE (Integrated Development Environment – Environnement de Développement Intégré, IDE en français), vous pourrez aisément créer un fichier HTML.

Sous PSPad, cliquez sur le menu « Fichier » -> « Nouveau fichier », sélectionnez ensuite « HTML multihighlighter » et cliquez sur « OK ».

A l’heure où j’écris ces lignes, PSPad est encore par défaut en HTML 4, seulement ici on n’écrira que du HTML 5, compatible désormais avec tous les navigateurs, en particulier les mobiles.

Supprimez donc tout ([Ctrl]+[A], puis [Suppr.]), on va tout refaire de zéro.

Définition HTML

HTML signifie « HyperText Markup Language ». En français, ça donne « Langage de balisage hypertexte ». Ce n’est pas un langage de programmation à proprement parler, mais plutôt un langage de mise en forme de documents. Dans sa version 5, il possède de très nombreux atouts et permet d’éviter Adobe Flash, si on le combine proprement avec du CSS 3.

Structure de base d’un document HTML

Un document HTML commence toujours par un « doctype », suivit d’une balise « html », d’une entête de document, et d’un corps.

Dans sa version 5, le doctype a été grandement simplifié, aussi, pour définir que l’on sert de l’HTML 5 et non 4 ou autre, on commence le document ainsi :

<!DOCTYPE html>

Et c’est tout! Juste tel que, on définit de l’HTML 5. Avant cela, il fallait ajouter la version HTML utilisée. l’HTML étant pensé pour évoluer dans le temps, il n’y a plus de versioning.

Ensuite, on doit définir les balises « html » :

<html></html>

Une balise dite « ouvrante », et l’autre balise dite « fermante ».

On notera qu’une balise s’écrira toujours de la même façons :

<nombalise>
<nombaliseouverte></nombaliseouverte>

Entre nos 2 balises « html », on doit y placer l’entête, obligatoire :

<head></head>

Puis un corps de document, juste après l’entête :

<body></body>

Ce qui nous donnera au final, si on formate le code et laissons de la place pour la suite :

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
La balise <title>

La balise « title » permet de définir un titre à votre document. Elle se place dans l’entête. Définissons un titre à notre document HTML :

<title>Tutoriel HTML 5</title>

Vous avez remarqué ? On a écrit le titre du document entre les deux balises « title ». Ca sera comme ça pour toutes les balises permettant d’incorporer du texte.

Les attributs

Les balises peuvent comporter des attributs, mais ceux-ci sont aujourd’hui très peu exploité de nos jours, et ont quasiment disparu en HTML 5. Cependant certains restent toujours valide, aussi je vais vous en présenter un pour notre entête.

<meta charset="UTF-8">

Voila, l’attribut « charset » a été défini pour l’entête du document, et on lui a attribué la valeur « UTF-8 ». Dans PSPad, cliquez sur le menu « Format » et sélectionnez « UTF-8 » s’il n’est pas déjà sélectionné. PSPad se chargera de transcoder tout votre document html en utf-8.

En toute logique, la balise meta contenant le jeu de caractères utilisé dans le document devrait être définie avant le titre.

UTF-8 étant un standard à l’heure où j’écris ces lignes, je vous conseille vivement d’écrire toutes vos pages web avec ce jeu de caractères, permettant entre autres, l’utilisation des accents, tout en restant compatible avec le reste du monde (qui a dit « World Wide Web » ?).

Un attribut se place donc dans la balise elle-même, la balise pouvant contenir zéro, un, ou plusieurs attributs, et un attribut peut on non posséder une valeur. S’il possède une valeur, alors on la place entre deux guillemets.

Ca y’est, on a désormais un document valide HTML 5. Il ne reste plus qu’à le remplir un peu. Ecrivons un peu dans le corps du document et voyons ce que ça donne :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Tutoriel HTML 5</title>
  </head>
  <body>
    J'apprends l'HTML 5.
  </body>
</html>

Enregistrez le fichier sous « index.html », puis ouvrez-le avec votre navigateur favori. Pourquoi « index » et pas « tutoriel1 » par exemple ? Pour vous apprendre que quand on appelle une adresse internet en la terminant par un nom de dossier, le serveur web cherche en priorité la page « index.html ». L’entrée d’un site web se fait toujours par l’index, alors va falloir s’y habituer!

Et si on veut de la couleur ?

Eh bien, si on veut mettre un peu de couleur, en HTML 5 il nous faudra obligatoirement passer par une feuille de style, l’attribut « style », ou la balise « style » dans l’entête permettant de définir une feuille de style à l’intérieur même du document html. Seulement l’HTML 5 n’est plus qu’un langage de mise en forme générale du document et descriptif.

Je vous conseille donc d’aller voir du côté du CSS pour en apprendre plus. Je ne traiterais pas des couleurs mais uniquement de la mise en forme et de la partie description.

Quelques balises courantes
<h1> […] <h6>

Les balises <h1>, <h2>, <h3> … jusque <h6> permettent de décrire un titre d’entête à un paragraphe.

<h3>Titre de mon paragraphe</h3>
<p>

La balise <p> permet de décrire un paragraphe. On peut y incorporer une balise <hX> par exemple, ou d’autres balises que je vous montrerais plus tard.

<p>Mon paragraphe</p>
<hr>

Cette balise est une des exceptions html. Elle ne se ferme pas et permet de tracer une ligne horizontale.

<hr>
<div>

La balise <div> permet de créer un bloc brut et de regrouper des éléments en son sein.

<div>
  <h3>Mon titre</h3>
  <p>Mon paragraphe</p>
</div>
<table>, <thead>, <tbody>, <tfoot>, <tr>, <td>, <th>

Ces balises servent à créer des tableaux. <thead> permet de décrire l’entête d’un tableau, <tbody> son corps, et <tfoot> son pied. <tr> sert à créer une nouvelle ligne, <td> quant à elle, permet de créer une cellule. La balise <th> est similaire à la balise <td>, mais sert aux entêtes des tableaux. Si vous avez des données qui nécessitent une représentation de type tableur, ces balises peuvent vous être utile.

La balise <td> peut être accompagnée de l’attribut « colspan » pour spécifier le nombre de cellules qu’elle regroupe. Il existe aussi l’attribut « rowspan » pour regrouper une cellule sur plusieurs lignes.

<table>
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Provenance</th>
      <th>Prix</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Fraise</th>
      <td>Espagne</td>
      <td>1.50€/kg</td>
    </tr>
    <tr>
      <th>Pomme</th>
      <td>France</td>
      <td>1.25€/kg</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Produits d'Europe uniquement</td>
    </tr>
  </tfoot>
</table>

Certaines de ces balises, telles que <thead> ou <tfoot> sont optionnelles. Cependant, je vous conseille d’utiliser au maximum la bonne sémantique pour être bien compris que ce soit tant au niveau des navigateurs que des moteurs de recherches.

<span>

La balise <span> permet de regrouper des éléments sur une même ligne. Elle peut servir par exemple à coloriser une partie d’un texte ou le formater différemment (italique, gras, souligné, barré …).

<p>Petit paragraphe <span>d'une</span> ligne.</p>
Conclusions

Pour conclure, voila ce qu’il nous faut retenir: HTML est langage descriptif de documents, qui, en version 5, se voit accompagné de feuille(s) de style (CSS) pour la mise en page. Il faut bien différencier HTML et CSS.

J’ai volontairement omis certaines balises, d’une parce que je ne vais pas toutes les mettre, de deux parce que ceci n’est qu’une introduction, et de trois, parce qu’on en verra certaines d’entre elles dans d’autres articles.

Code <>, Général

Structure d’un programme

Leave a comment

Un programme, qu’il soit informatique ou autre, est défini par plusieurs choses :

  1. Des instructions
  2. Des variables
  3. Des opérateurs
  4. Des embranchements conditionnels
  5. Des boucles
  6. Des méthodes

Nous avons déjà un programme simple sous le coude dans mon précédent article, nous allons le reprendre ensemble. Je me cite : « Je souhaites réaliser un programme qui me dit si je suis majeur ou mineur, et qui devra effectuer des actions précises dans les deux cas de figure. ». Reprenons donc mon algorithme :

Début

Demander Age
  Si Age >= 18 Faire ActionMajeur
  Sinon Faire ActionMineur

Fin

Pour commencer, j’ai un début et une fin de programme. Je le rappelle, un programme possède toujours un début et une fin, quel qu’il soit.

Dans ce programme, j’ai besoin d’une variable « Age », qui devra exécuter une action « ActionMajeur » ou « ActionMineur ». J’ai utilisé pour ce faire une condition, et on pourrait imaginer les deux actions comme des méthodes.

Je ne vais pas vous donner d’exemple du programme ici dans un langage précis, cela ne servirait à rien. On va rester très général encore une fois.

1) Les instructions

Suivant la machine, le jeu d’instruction ne sera pas le même. Par exemple, un processeur ARM ne comprend rien à un programme écrit pour un processeur Intel, et un programme Intel ne sera pas non plus compris par un processeur AMD. Il en existe bien d’autres, mais limitons-nous déjà à ces trois fabriquants de micro-processeurs.

Les processeurs ne connaissent que des instructions simple, comme mettre un nombre à un emplacement mémoire, ajouter, soustraire … Cependant, certains processeurs possèdent des instructions un peu plus complexes conçues pour accélérer l’exécution des programmes, comme par exemple l’instruction Intel x86 « CRC » (Cyclic Redundancy Check). On pourrait parfaitement la programmer avec des instructions simples.

Le jeu d’instruction qu’un micro-processeur connaît, encore une fois, dépend de son fabriquant. Les instructions sont codées en binaire au niveau de la machine, et ont une longueur indéterminée. Elles sont généralement codées en octets (un octet étant représenté sur 8 bits). Cependant, inutile d’écrire un programme en binaire, ça ne se fait plus depuis l’invention du premier compilateur, fort heureusement. De plus, les programmes devenant de plus en plus complexes au fils des ans, il est nécessaire aujourd’hui d’avoir un compilateur sachant transcoder notre programme en langage machine.

2) Les variables

On a parfois besoin de variables dans un programme. Par exemple, si on a besoin d’ajouter 2 à un nombre donné par l’utilisateur, il nous sera nécessaire de définir une variable en mémoire, puis de lui ajouter 2. Les variables peuvent avoir une portée globale (visible par tout le programme), ou locale (visible par une portion du programme).

En pratique, il est fortement déconseillé d’utiliser des variables globales, générant plus facilement des bogues, ou, dans le cas de certains programmes, des failles de sécurité.

Plusieurs types de variables existent : les nombres entiers, les nombres à virgule (flottante ou fixe), les chaines de caractères et par extension les caractères (qui eux-mêmes sont représentés par des entiers). Les nombres ont une représentations dite signée (le bit de poids le plus fort sert à savoir si le nombre est positif (0) ou négatif (1)) ou non signée (le nombre étant alors strictement positif ou nul). La machine possède une limite de taille maximum pour une variable, en fonction de son architecture. Par exemple, un processeur 32 bits ne peut supporter que des nombre de 32 bits de longueur – un bit étant représenté par un 0 ou un 1. En conséquences, sur un nombre entier, sa taille maximum peut être calculé de la façon suivante : 2^32. Sa plage de valeurs peut être calculée de la façon suivante :

  • Pour un nombre entier non signé : [ 0 ; 2^32 – 1 ]
  • Pour un nombre entier signé : [ -2^(32-1) ; 2^(32-1) – 1 ]

Note: le caractère « ^ » signifie « exposant ».

La représentation des nombres en mémoire dépend de l’architecture de la machine (ARM, Intel, AMD …) et donc du fabriquant. Le compilateur existe entre autres choses pour nous épargner la tâche de conversion entre les différentes machines.

3) Les opérateurs

Il existe plusieurs catégories d’opérateurs. Les plus courant sont les opérateurs mathématiques : « + » pour additionner, « – » pour soustraire, « * » pour multiplier, et « / » pour diviser. Ils existent dans presque tous les langages de programmation. Il existe aussi dans certains langages un opérateur de concaténation, utilisé pour assembler deux chaines de caractères ensemble.

Nous possédons aussi à notre éventail des opérateurs logiques (AND, OR, XOR), souvent un opérateur de négation (« ! » ou « NOT »), parfois l’ensemble de ces deux catégories, et des opérateurs binaires (AND, OR, XOR, NOT).

Suivant le langage de programmation choisi, ils ne s’écrivent pas de la même façon (le Basic et le C# sont par exemple complètement différent l’un de l’autre sur les opérateurs).

4) Les embranchements conditionnels

On a parfois besoin d’un embranchement conditionnel pour effectuer une tâche en fonction d’un ou plusieurs paramètres. Nous l’avons vu dans mon exemple de programme. Le code à l’intérieur d’une condition n’est exécuté que si la condition est vraie. Si la condition est fausse, on saute à l’instruction de fin de condition. Une condition doit toujours posséder un début et une fin, sinon, risque de bogue ou de faille de sécurité en perspective! Les conditions sont souvent combinées avec des opérateurs logiques.

5) Les boucles

On a parfois besoin de faire une boucle, elle parfois constituée d’une condition d’entrée, et possède presque toujours une condition de sortie. Un conseil, évitez d’écrire des boucles infinies, elles finissent toujours par mal tourner. En pratique, on les évite comme la peste.

Dans les langages de haut niveau, il existe les boucles « Tant que condition … Faire instruction(s) … Fin Tant que », les boucles « Faire instruction(s) … Tant que condition« .

6) Les méthodes

Une méthode est un sous-programme, qui peut posséder zéro, un, ou plusieurs paramètres, qui a la possibilité de retourner un résultat, et qui est appelée par le programme principal.

Suivant le langage de programmation choisi, les méthodes ne s’écrivent pas de la même façon. De plus, tous les processeurs ne permettent pas forcément l’appel à des méthodes. Mais si vous souhaitez programmez en informatique, je vous rassure, tous nos processeurs peuvent faire appel à des méthodes!

Voila pour ce qui est des généralités de la programmation, si j’ai oublié quelque chose, ou si j’ai mal expliqué un point ou deux, merci de me laisser un message, soit en commentaire, soit par email en passant par le formulaire de contact.

Code <>, Général

Général – Définition et algorithmie

Leave a comment

Vous voulez apprendre à programmer ? Vous êtes le bienvenu !

Comment ça marche ?

La programmation, c’est un peu comme une recette de cuisine. Si on compare la programmation informatique avec la cuisine d’un grand restaurant, on pourrait dire que le Chef du dit restaurant programme sa cuisine, et qu’un ordinateur lit la recette.

Un ordinateur, pour fonctionner, à besoin qu’on lui dise quoi faire, et comment le faire. Autant pour l’être humain, ce fonctionnement est inné, mais pour la machine, c’est une toute autre histoire.

On doit dire à notre machine, quelle qu’elle soit (ordinateur, téléphone, tablette, machines de production …) ce qu’elle doit faire. Pour ce faire, on va lui donner une série d’instructions, compatibles avec la machine, et cette dernières les interprètera non pas comme elle le voudrait, mais comme on le lui a dit. Cette série d’instruction sera donnée dans un langage que la machine comprend.

Oui, mais fondamentalement, comment ça marche ?

Il y a deux cas de figures : les langages dit « compilés » (C++, ..), et les langages dit « interprété » (Python …). Nous avons aussi des langages de « haut niveau » (C++, C# …), et des langages de plus « bas niveau » (ASM, …).

Le langage utilisé dépendra avant tout de la machine qui devra comprendre les instructions, mais aussi des besoins – ce qu’on veut lui demander de faire, et des coûts (certains langages de programmation sont payants, ou des interfaces de programmation).

Quelles différences entre langage de haut niveau et langage de bas niveau ?

Plus un langage est dit de bas niveau, plus il est proche du code machine (qui ne fonctionne qu’en binaire, avec des 0 et des 1). En conséquences, il est plus difficile à lire pour un être humain. A l’inverse, plus un langage est dit de haut niveau, et plus il est généralement proche d’une grammaire compréhensible par un humain. L’ASM est le langage de plus bas niveau, ensuite on a par exemple le C et C++ qui sont déjà dit de haut niveau, et pour des langages de plus haut niveau encore, on a le C# avec lequel on peut presque faire des phases.

Quelles différences entre langage interprété et compilé ?

Un langage compilé, est un langage comme un autre, mais qui a besoin d’un compilateur pour fonctionner. Le rôle du compilateur est de transcoder le programme, généralement de haut niveau, en langage machine. Son rôle est donc très important. Un second rôle qui lui a été attribué au fil des ans, est d’optimiser le code machine pour la machine cible, pour que le code puisse être exécuté plus rapidement. Exemples de langages compilés: C++, Java …

Dans le cadre d’un langage interprété, on n’écrit pas du code pour une machine, mais pour un interpréteur. Il n’y a généralement pas d’optimisation du automatique du code, cependant, l’avantage de ce genre de langage est qu’il peut être interprété de la même façon quelle que soit la machine cible, pour peu que la machine cible est l’interpréteur de disponible. Exemples de langages interprétés: PHP, Python …

Description d’un langage de programmation

Un programme, quel qu’il soit contient un point d’entrée. Au plus bas niveau de la machine, c’est la première « ligne » du programme qui sera interprété, puis la seconde, et ainsi de suite. Dans le cadre d’un langage interprété, il en va de même en règle générale. Cependant, dans un langage plus structuré, le point d’entrée est généralement à un endroit précis du programme. Par exemple, par défaut, en langage C, c’est la fonction « main() » qui définit le point d’entrée du programme, et ce sera la première ligne de cette fonction qui sera lue par la machine.

Chaque langage possède sa propre grammaire et sa propre syntaxe. Chaque langage possède aussi des avantages et des inconvénients. Par exemple, rien qu’entre langage compilé et langage interprété, le premier sera plus rapide à s’exécuter (avantage pour la compilation), quant au second il sera « portable » d’une machine à une autre, sans recompilation (avantage pour l’interprétation).

Les points importants avant de choisir son langage

Avant de choisir un langage de programmation, il vous faut avant tout définir ce que le programme va faire. Allez-vous lui demander de faire des calculs complexes ? Ou encore d’afficher des graphiques complexes à l’écran ? Ou même de simplement envoyer des message d’une machine à une autre ? Rien que pour ces trois cas de figure, je n’utiliserais pas le même langage. Cependant, avant de choisir un langage, il faut définir l’ensemble du programme, le généraliser avec de l’algorithmie.

L’algorithme, ou comment concevoir un programme

L’écriture et la syntaxe d’un algorithme est très personnel, et ne changera pas en fonction du langage de programmation que vous utiliserez. Cependant, il va vous aider à bien concevoir un programme, et permettra par la même de distinguer les tâches à effectuer. Il existe des algorithmes généraux, et d’autre plus détaillés. L’algorithme est parfois proche d’un langage de programmation, cependant certains se schématisent. Cela permet de plus de simplifier le programme et le scinder en plusieurs parties et sous-ensembles, permettant de mieux visualiser son programme, et de requérir à d’autre programmeurs pour aider sur un ensemble ou sous-ensemble du programme.

Il existe toutefois des standards pour l’algorithmie (un standard, contrairement à une norme, n’est pas obligatoire). Si possible, restez au plus proche de ces standards, ils ont été conçus de sorte qu’un maximum de gens puisse comprendre ce que vous faites. Cependant, lorsque l’on souhaite programmer seul, et que ça le restera tout le long de l’écriture du programme, un peu de liberté ne fait jamais de mal.

Exemple d’algorithmes

Prenons un cas simple. Je souhaites réaliser un programme qui me dit si je suis majeur ou mineur, et qui devra effectuer des actions précises dans les deux cas de figure.

Algorithme général écrit:

Début

Demander Age
  Si Age >= 18 Faire ActionMajeur
  Sinon Faire ActionMineur

Fin

Algorithme général schématique:

Ces 2 algorithmes sont exactement les même et font la même chose, cependant, d’une ils ne sont pas écrit de la même façon, mais en plus, je ne respecte pas les standards algorithmiques. L’essentiel est de pouvoir structurer son code et ses pensées. Vous aurez remarqué que dans les deux algorithmes il y a un début et une fin. C’est simplement parce que tout programme, quel qu’il soit, quel que soit le langage utilisé ou la machine cible, comporte un début et une fin.

Note: Les plus pointilleux d’entre vous remarqueront que j’ai mis deux fins sur mon schéma, et que je n’ai pas aligné mes deux « Fin » (en plus!). Je rappelle qu’ici ce sont des exemples très personnels de programme.

Ce programme général est compatible avec n’importe quel langage de programmation. On pourrait même s’en servir ici pour en faire un circuit électronique, si on le souhaitait. C’est la magie de l’algorithme.

Conclusions

Avant d’écrire un programme, toujours penser à définir ce que va faire ce programme, qui permettra de faire un choix par la suite du langage de programmation à utiliser. Faire un algorithme permet de simplifier son programme et de le scinder en plusieurs sous-ensembles simple. On peut ensuite définir chaque sous-ensemble d’un programme en un ou plusieurs autres sous-ensembles. J’ai omis de définir les actions à réaliser dans mon programme, permettant ainsi une libre interprétation. Je reprendrais probablement cet exemple dans un autre article.

Bref, toujours bien définir les besoins de son programme, le réfléchir et le penser avant sur papier, puis ensuite définir quel langage utiliser en fonction de ce que l’on veut faire, mais aussi de ses préférences (ASP vs PHP, C vs C++, Java vs .Net, …).

LAMP (manuel), Tutoriaux

LAMP – Partie 4/4 – phpMyAdmin

Leave a comment

Si vous avez suivi le tutoriel jusque là, bravo, vous voulez monter un serveur web sous GNU/Linux, et il nous manque encore phpMyAdmin.

Qu’est ce que phpMyAdmin ?

phpMyAdmin est un logiciel web programmé en PHP. Il nous permettra de faire tout ce qu’on veut sur les bases de données MySQL sans avoir besoin d’être sur la machine qui héberge le serveur MySQL. Tout se fait à distance, comme n’importe quelle application web, c’est fait pour.

Installation de phpMyAdmin

Comme d’habitude, on se connecte en root sur la tty1, on se déplace dans notre dossier de téléchargement, puis on va naviguer chez phpMyAdmin.net :

root@tutolamp:~# cd /other/downloads
root@tutolamp:/other/downloads# lynx http://www.phpmyadmin.net

Sélectionnez un peu plus bas « Download votreversion » puis téléchargez et enregistrez le fichier sur le disque, puis quittez.

Pour ma part, c’est la version 4.6.6 de phpMyAdmin qui m’est proposée, à l’heure où j’écris ce tutoriel.

Cette fois, nous avons obtenu un fichier ZIP, mais ça n’empêche en rien de le décompresser, on a juste besoin d’un paquet supplémentaire dans mon cas :

root@tutolamp:/other/downloads# apt-get unzip
root@tutolamp:/other/downloads# unzip phpMyAdmin-votreversion-all-languages.zip

Installons maintenant phpMyAdmin dans le répertoire « htdocs » d’Apache, et changeons son nom en « phpmyadmin » pour plus de facilité d’accès :

root@tutolamp:/other/downloads# cp -R phpMyAdmin-votreversion-all-languages.zip /other/server/httpd24/htdocs
root@tutolamp:/other/downloads# cd /other/server/httpd24/htdocs
root@tutolamp:/other/server/httpd24/htdocs# mv phpMyAdmin-votreversion-all-languages phpmyadmin

Vérifions que tout se passe bien :

root@tutolamp:/other/server/httpd24/htdocs# lynx http://localhost/phpmyadmin

Tentez de vous connecter avec le compte MySQL « root » et le mot de passe que vous aviez défini (pour moi c’était « toto »).

Tout à l’air de bien se passer, on peut quitter phpMyAdmin par le lien « Log out », et lynx par la touche [Q].

Profitez-en pour quittez la console :

root@tutolamp:/other/server/httpd24/htdocs# exit

Vous possédez désormais un serveur Linux / Apache / MySQL / PHP fonctionnel de base.

LAMP (manuel), Tutoriaux

LAMP – Partie 3/4 – PHP

Leave a comment

Après MySQL, après Apache, il nous manque encore PHP. Donc allons-y, installons celui-ci.

Qu’est-ce que PHP ?

PHP Hypertext Preprocessor est un langage de script, aujourd’hui orienté objet, qui se situe du côté serveur. Il possède aussi un côté client qui permet d’écrire des scripts et de les exécuter en mode console.

Exemples de codes PHP
<?php  echo 'Hello World!';  ?>

Ce petit script affichera la chaine « Hello World! » sur votre console ou dans votre navigateur.

<?php

  $var = 'foo' . 'bar';
  echo '<b>', $var, '</b>';

?>

Cet autre script nous affichera « <b>foobar</b> » en console, cependant, s’il est exécuté par l’intermédiaire d’un serveur web (ex: Apache), il nous fournira alors la chaine « foobar » en caractères gras, le « . » servant d’opérateur de concaténation;

Je ne vais pas m’éterniser sur le sujet, d’autres tutoriaux seront présents pour apprendre la programmation.

Installation de PHP au sein d’Apache

Et on recommence encore une fois, on se connecte en root sur notre tty1, puis on navigue jusque php.net, et en changeant de répertoire courant au passage :

root@tutolamp:~# cd /other/downloads
root@tutolamp:/other/downloads# lynx http://php.net

On descend jusque « Downloads » puis on y va.

On cherche « Current Stable » et on va sélectionner « php-votreversion.tar.gz ». Au moment du tutoriel, c’est PHP 7.1.2 qui est mis à l’honneur.

On descend pour choisir un site miroir d’où télécharger PHP, j’ai choisi fr2.php.net, se situant en France, et on active le lien de téléchargement en appuyant sur [D]. Enregistrez le fichier sur le disque puis quittez avec [Q].

On décompresse PHP et on va dans son répertoire :

root@tutolamp:/other/downloads# tar zxvf php-votreversion.tar.gz
root@tutolamp:/other/downloads# cd php-votreversion

PHP a lui aussi son petit lot de dépendances, on va les installer de suite :

root@tutolamp:/other/downloads/php-votreversion# apt-get install libxml2-dev

Place à la configuration de PHP, à sa compilation, puis son installation :

root@tutolamp:/other/downloads/php-votreversion# ./configure --prefix=/other/server/php71 --with-apxs2=/other/server/httpd24/bin/apxs --enable-mbstring --with-mysql-sock=/tmp/mysql.sock --enable-embedded-mysqli --with-mysqli
root@tutolamp:/other/downloads/php-votreversion# make
root@tutolamp:/other/downloads/php-votreversion#
make install

On va configurer maintenant Apache pour qu’il puisse nous servir des pages PHP, mais pour cela on va avoir besoin d’un éditeur de texte. Je vais personnellement utiliser « joe », libre à vous de choisir autre chose (« vi(m) », …) :

root@tutolamp:/other/downoads/php-votreversion#: apt-get install joe
root@tutolamp:/other/downoads/php-votreversion#: cd /other/server/httpd24/conf
root@tutolamp:/other/server/httpd24/conf# joe httpd.conf

PHP s’est permis de nous installer son module dans le fichier de configuration, c’est toujours ça de moins à faire!

Cherchez d’abord la ligne ServerName pour lui ajouter un nom comme suit:

ServerName localhost:80

Cherchons maintenant cette ligne :

DirectoryIndex index.html

Rajoutons « index.php » comme suit :

DirectoryIndex index.php index.html

Maintenant cherchons les lignes de type « AddType application/ » et ajoutons-y cette ligne :

AddType application/x-httpd-php .php

Enregistrez le fichier et quittez l’éditeur en effectuant la combinaison [Ctrl]+[K] puis [X].

Redémarrez maintenant Apache :

root@tutolamp:/other/server/httpd24/conf# /etc/init.d/apachectl restart

Créons rapidement un script de test PHP:

root@tutolamp:/other/server/httpd24/conf# cd ../htdocs
root@tutolamp:/other/server/httpd24/htdocs# joe index.php

Avec pour contenu :

<?php

  phpinfo();

?>

Enregistrez et quittez comme tout à l’heure, et regardons si cela a bien fonctionné correctement :

root@tutolamp:/other/server/httpd24/htdocs# lynx http://localhost

Parfait, tout fonctionne! Il ne nous reste plus que phpMyAdmin dans le tutoriel suivant, et notre LAMP sera complet.

LAMP (manuel), Tutoriaux

LAMP – Partie 2/4 – Apache

Leave a comment

Pour installer notre serveur LAMP, après MySQL, on va s’attaquer à Apache.

Pour ceux qui n’ont pas lu le précédent tutoriel sur LAMP MySQL, je rappelle que je suis une distribution GNU/Linux Debian 8.7.1 x64 en minimal. Nous avons dû installer quelques paquets précédemment pour installer MySQL, je vous conseille vivement d’aller y jeter un œil avant de continuer.

Qu’est-ce qu’Apache ?

Apache n’est pas un programme, mais un éditeur de logiciels (Apache Software Fundation). En réalité, nous n’allons pas installer Apache, mais le serveur httpd d’Apache, autrement appelé « Apache HTTP Server ». Il est couramment dénommé Apache, mais son nom de service se trouve pourtant être « httpd » pour « HTTP Daemon ».

Installation d’Apache sous Microsoft Windows

D’abord, connectez-vous en root sur votre tty1, et allez de suite dans notre répertoire de téléchargements :

root@tutolamp:~# cd /other/downloads

On s’apprête à télécharger Apache, naviguons donc jusque chez eux :

root@tutolamp:/other/downloads# lynx http://apache.org

Descendez jusque « By Name » et sélectionnez « HTTP Server ».

Descendez maintenant jusque « Download! » et sélectionnez « From a Mirror ».

Enfin, descendez jusque « Source: httpd-votreversion.tar.gz ». Sélectionnez le lien appuyez sur [D] pour télécharger le fichier.

Enregistrez-le sur le disque, puis quitter « lynx » via [Q].

Note: La version que j’ai téléchargé au moment du tutoriel est la version 2.4.25 d’Apache.

Décompressons immédiatement notre nouveau fichier, puis entrons dans le nouveau répertoire ainsi créé :

root@tutolamp:/other/downloads# tar zxvf httpd-votreversion.tar.gz
root@tutolamp:/other/downloads/ cd httpd-votreversion

Apache dépend de quelques petits programmes, installons-les maintenant :

root@tutolamp:/other/downloads/httpd-votreversion# apt-get install libapr1-dev libaprutil1-dev libpcre3-dev

Tout est prêt désormais pour configurer, compiler, et installer Apache. Nous l’installerons dans le répertoire « httpd24 » sous la bannière de notre répertoire dédié « /other/server », en prenant soin d’activer le chargement des librairies dynamiques (nous en aurons besoin pour PHP):

root@tutolamp:/other/downloads/httpd-votreversion# ./configure --prefix=/other/server/httpd24 --enable-so
root@tutolamp:/other/downloads/httpd-votreversion# make
root@tutolamp:/other/downloads/httpd-votreversion# make install

Changeons maintenant de répertoire, démarrons Apache, et testons s’il fonctionne :

root@tutolamp:/other/downloads/httpd-votreversion# cd /other/server/httpd24
root@tutolamp:/other/server/httpd24# bin/apachectl start
root@tutolamp:/other/server/httpd24# lynx http://localhost

Personnellement, Apache me répond: « It works ! », c’est donc que tout est ok.

Installons maintenant Apache au démarrage du système :

root@tutolamp:/other/server/httpd24# cp bin/apachectl /etc/init.d
root@tutolamp:/other/server/httpd24# update-rc.d apachectl defaults

Vous pouvez désormais quitter la console et passer au tuto suivant pour installer PHP.

root@tutolamp:/other/server/httpd24# exit
LAMP (manuel), Tutoriaux

LAMP – Partie 1/4 – MySQL

Leave a comment

Pour installer un serveur Linux/ Apache / PHP / MySQL, on va commencer par installer le serveur MySQL.

Qu’est-ce que MySQL ?

MySQL est un système de gestion de bases de données relationnelles (SGBDR). Ca signifie qu’il va être capable d’enregistrer vos données et de vous les resservir, mais ce, via des requêtes basées sur le langage SQL (Structured Query Language).

MySQL est, du côté des performances, accentué sur le côté lecture plus que de l’écriture de données. Il nous permettra en conséquent de concevoir efficacement des sites internet, qui ont besoin de données clients, produits, ou tout autre genre d’informations qui nécessiteraient une base de données.

Quelques exemples de requêtes sous MySQL
SELECT `nom_utilisateur` FROM `table_utilisateurs` WHERE `age_utilisateur` > 18 ORDER BY `nom_utilisateur` ASC;

Cette première requête permet de récupérer dans la table « table_utilisateurs » le nom de tous les utilisateurs enregistrés qui ont un âge supérieur à 18 ans, et de les trier par ordre alphabétique.

SHOW DATABASES;

Seconde requête, qui nous permet ici de lister toutes la bases de données auxquelles l’utilisateur MySQL courant a accès.

Je ne vais pas vous détailler ici toutes les requêtes possible, je souhaitais simplement vous montrer comment on peut communiquer avec MySQL. On peut envoyer des requêtes SQL via un client dédié ou via un langage de programmation tel que le PHP, que nous installerons tout à l’heure.

Installation de MySQL sous GNU/Linux

Pour commencer, je tiens à signaler que je pars d’une installation minimale fraiche de GNU/Linux Debian 8.7.1 en 64 bits (netinst), installation effectuée sous machine virtuelle (Oracle VM VirtualBox). Elle ne contient donc aucun paquet inutile, et il faudra les installer à chaque fois que c’est utile. J’ai tout de même choisi la possibilité de télécharger des logiciels non libres via le gestionnaire de paquets, mais libre à vous de refuser ce choix. La configuration de la machine sous Debian ne contient pas de serveur graphique, car sur un serveur dédié que vous louez chez un prestataire, vous n’en aurez pas non plus. J’ai tout décocher lors de l’installation des paquets, excepté le serveur SSH, pour me retrouver dans un environnement le plus simple et minimaliste au possible.

Pour commencer, nous allons nous connecter sur une première console en super-administrateur (root / tty1).

On va de suite créer quelques répertoires à la racine. Un répertoire « other » qui contiendra lui-même deux sous-répertoires : « downloads » pour les téléchargements, et « server » pour les installations.

root@tutolamp:~# mkdir /other && cd /other
root@tutolamp:/other# mkdir downloads server

Schéma des répertoires ainsi créés :

/
+-- other
    +-- downloads
    +-- server

On peut maintenant se rediriger vers le répertoire « downloads » et chercher nos paquets. Nous installerons MySQL & consort depuis les sources, on devra donc les compiler soi-même, puis les installer dans le répertoire « server ».

Seconde chose à faire, c’est de récupérer un navigateur internet en console, ça pourrait nous être utile. Sous debian, on a un formidable outil pour installer des paquets, « aptitude », on va s’en servir de suite pour installer un butineur :

root@tutolamp~/other# apt-get install links lynx

Vous noterez que j’en ai installé deux, vous avez le choix entre « links » et « lynx ». J’utiliserais « lynx » personnellement dans ce tutoriel. Appuyez sur [O] ou [Y] selon votre distribution GNU/Linux et votre langue pour valider l’installation des logiciels et de leur dépendances.

Déplacez-vous maintenant dans le dossier de téléchargements :

root@tutolamp~/other# cd downloads/

Puis maintenant, on va naviguer sur http://www.mysql.com pour récupérer les sources de MySQL.

root@tutolamp~/other/downloads/# lynx http://www.mysql.com

Naviguez entre les liens avec les flèches [Haut] et [Bas] de votre clavier jusqu’à sélectionner « Downloads », puis flèche [Droite] pour continuer à la page suivante.

Sélectionnez ensuite le lien « Community », puis continuez avec flèche [Droite].

Sélectionnez ensuite « MySQL Community Server » et continuez.

Sélectionnez ensuite « Download MySQL votreversion » et continuez.

Descendez jusque « Select Platform », juste en dessous, appuyez sur [Entrée] ou flèche [Droite] pour sélectionner « Source Code », validez en appuyant encore sur [Entrée] ou flèche [Droite], sélectionnez « Select » avec la flèche du [Bas] et flèche [Droite].

Descendez jusqu’à « Generic Linux (Architecture Independent), Compressed TAR Archive Includes Boost Headers », puis sélectionnez « Download ».

Descendez maintenant jusqu’à « No thanks, just start my download » et validez (flèche [Droite]). Validez le téléchargement en appuyant sur [D] comme demandé par le navigateur.

Le fichier téléchargé, sélectionnez maintenant « Enregistrement sur disque » et validez, puis validez le nom choisi avec [Enter].

Vous pouvez désormais quittez « lynx » par la touche [Q] ou la combinaison [Ctrl]+[C] (break command).

Voila, il ne nous reste plus qu’à décompresser l’archive téléchargée par la commande tar :

root@tutolamp:/other/downloads/# tar zxvf mysql-boost-votreversion.tar.gz

Note: La version MySQL que j’ai téléchargé est la 5.7.17.

On va avoir besoin de quelques logiciels pour compiler MySQL, alors installons-les maintenant :

root@tutolamp:/other/downloads/# apt-get install cmake make g++ libncurses5

Déplacez-vous maintenant dans le dossier de MySQL :

root@tutolamp:/other/downloads/# cd mysql-votreversion

Puisque j’ai la version 5.7.17, je vais nommer le répertoire où sera installé MySQL « MySQL57 », histoire de s’y retrouver dans les différentes versions, parfois incompatibles.

root@tutolamp:/other/downloads/mysql-votreversion/# cmake . -DCMAKE_INSTALL_PREFIX=/other/server/MySQL57 -DWITH_BOOST=boost/

Une fois cette phase de configuration terminée, on peut compiler MySQL (vous avez le temps de boire un café, c’est pas mal long) :

root@tutolamp:/other/downloads/mysql-votreversion/# make

Puis, une fois MySQL compilé, on va pouvoir l’installer :

root@tutolamp:/other/downloads/mysql-votreversion/# make install

Naviguez à présent vers le répertoire d’installation de MySQL :

root@tutolamp:/other/downloads/mysql-votreversion/# cd /other/server/MySQL57

Créons maintenant un groupe et un utilisateur pour MySQL :

root@tutolamp:/other/server/MySQL57# groupadd mysql
root@tutolamp:/other/server/MySQL57# useradd -r -g mysql -s /bin/false mysql

Nous devons créer un nouveau répertoire où seront stockées nos bases de donnnées. Nommons-le « data », et changeons ses droits d’accès pour des raisons de sécurité :

root@tutolamp:/other/server/MySQL57# mkdir data
root@tutolamp:/other/server/MySQL57# chmod 750 data

Changeons maintenant le propriétaire du répertoire MySQL :

root@tutolamp:/other/server/MySQL57# chown -R mysql .
root@tutolamp:/other/server/MySQL57# chgrp -R mysql .

Initialisons maintenant les bases de données :

root@tutolamp:/other/server/MySQL57# bin/mysqld --initialize --user=mysql

Notez bien le mot de passe temporaire pour le compte « root » que MySQL vous donne, il nous servira par la suite (nous le changerons).

Nous pouvons rechanger le propriétaire de l’installation :

root@tutolamp:/other/server/MySQL57# chown -R root .
root@tutolamp:/other/server/MySQL57# chown -R mysql data

Nous pouvons désormais démarrer MySQL :

root@tutolamp:/other/server/MySQL57# support-files/mysql.server start

Une fois lancé, appuyez sur [Entrée] une fois de plus pour revenir à la console. Nous allons changer le mot de passe root immédiatement. Pour se connecter à MySQL, procédez comme suit :

root@tutolamp:/other/server/MySQL57# bin/mysql --user=root -p

A ce moment, il vous sera demandé le mot de passé généré tout à l’heure, il est temps de le taper. Attention: sous GNU/Linux, nous ne savons pas où nous en sommes dans le mot de passe, il se peut que vous vous trompiez facilement. Ne vous en faite pas, recommencez juste la commande précédente, et réessayez.

Nous voici donc dans le shell MySQL, réfléchissez à votre mot de passe, notez-le, et nous allons maintenant modifier le mot de passe root MySQL par ce nouveau mot de passe. Le mien sera « toto ». Je l’écrirais en italique pour que vous mettiez le votre à sa place. Communiquons maintenant avec MySQL par l’intermédiaire d’une requête :

mysql> ALTER USER root@localhost IDENTIFIED BY 'toto';

On peut maintenant quitter le shell MySQL et revenir à notre console :

mysql> quit;

On va maintenant procéder au démarrage automatique de MySQL avec le système. Pour ce faire, on va juste copier le fichier « support-files/mysql.server » dans « /etc/init.d », puis dire au système de le lancer automatiquement :

root@tutolamp:/other/server/MySQL57# cp support-files/mysql.server /etc/init.d
root@tutolamp:/other/server/MySQL57# systemctl enable mysql.server

On peut désormais quitter la console :

root@tutolamp:/other/server/MySQL57# exit

Voila qui conclu ce premier tutoriel LAMP. MySQL est installé, il démarre avec la machine automatiquement, s’arrête aussi automatiquement lorsque la machine s’éteint, c’est super.