Contenu du cours INF 171 – Programmation Web Statique (voir le support de cours)

1. Introduction à la programmation web

2. Bases du langage HTML
3. Notions Avancées du HTML - JavaScript
4. Feuilles de style – CSS

Programmation web : langages et logiciels

Il est temps d’aborder avec vous la programmation web. Un domaine toujours aussi populaire
et à la mode depuis de nombreuses années. Ce n’est pas un scoop : le monde veut être
connecté de nos jours, peu importe le lieu. Même si les applications mobiles sont à la mode
aujourd’hui, les applications web n’ont jamais autant suscité d’intérêt depuis quelques années.
Les entreprises privées en sont de plus en plus demandeuses. Il est fini le temps de se
connecter à son ERP en mode bureau. Place à la facilité et aux avantages de la programmation
web !
Ce petit Mémo est destiné aux débutants qui recherchent des informations et des éléments
précis sur la programmation web de manière générale. Nous ne rentrerons pas dans les détails
de chaque partie comme vous allez le voir, car il y a beaucoup à dire.

I. Langage de balisage/affichage

1.1. HTML/CSS
Sans le HTML, il n’y aura pas de web. Cela constitue donc la base de la programmation web.
Il faut comprendre que le HTML n’est pas un langage de programmation, mais un langage de
balisage, car il n’est pas possible d’exécuter un algorithme ou des tests conditionnels par
exemple. Le HTML représentera la structure de votre site internet pour l’affichage de votre
contenu. Vous allez pouvoir structurer ce que vous voulez mettre à l’écran pour que
l’ensemble des navigateurs comprennent la hiérarchisation de votre contenu, mais aussi pour
les différents moteurs de recherche pour le référencement.
Le CSS va de pair avec le HTML puisque cela s’applique sur les balises HTML. Grâce à ce
qu’on appelle des feuilles de style, le CSS va vous permettre de rendre plus esthétique votre
site Internet, mais il va aussi vous permettre de gérer l’emplacement et l’affichage de votre
contenu comme vous le souhaitez.
Ce sont les premiers langages à apprendre pour la programmation web, c’est assez simple et
rapide à assimiler. Une fois que vous les maîtrisez, vous pourrez vous tourner vers des
frameworks CSS vous aidant à gérer la structure de votre site internet comme Bootstrap ou
Materialize par exemple.
1.2. Langage client (Frontend)
JavaScript
Pour rendre les sites internet et applications web plus interactives, nous avons besoin d’un
langage qui s’exécute côté client (sur le navigateur) permettant de donner la possibilité au

www.kelmass.com Tel : 694 841 716

visiteur d’interagir avec votre contenu. Celui que tous les navigateurs comprennent c’est de
façon incontournable le JavaScript créé par Brendan Eich en 1995. Le JavaScript va vous
permettre, suivant les interactions des utilisateurs, d’adapter le contenu de votre site web
suivant votre logique et les choix des utilisateurs avec par exemple un simple montrer/cacher
du contenu sur un clic ou de faire apparaître certains champs suivant un choix. Une fois que
vous maîtrisez les bases, vous pourrez apprendre un framework qui vous sera d’une grande
aide dans votre développement.
Le plus connu est JQuery, mais il existe de nombreuses alternatives dont l’approche est
différente, mais tout aussi redoutable comme Angular, VueJS ou encore ReactJS.

1.3. Langage serveur (Backend)

a. PHP
Si vous vous êtes un peu renseigné sur la programmation web, vous avez certainement
entendu parler de PHP. Ce langage a plus de 20 ans. Pour sa petite histoire, PHP veut dire à la
base « Personal Home Page Tools » (Hypertext Preprocessor aujourd’hui) lorsque Rasmus
Lerdorf l’a créé. Et c’était loin d’être le langage de nos jours. Fort immature et très précaire, il
a été utilisé par son créateur au départ pour tracer les visiteurs consultant son curriculum vitae
en ligne avant de pouvoir créer des sites web dynamiques. Il a tout même fortement bien
évolué depuis son rachat par la société Zend.
C’est le langage de programmation web côté serveur le plus utilisé à ce jour avec plus de 80%
de parts de marché. C’est celui que j’utilise tous les jours dans mon travail. En plus d’être
efficace, il est très simple à appréhender dans son utilisation. Par contre, ne comptez pas sur
ce langage pour apprendre les bonnes pratiques malgré de très gros efforts effectués à ce
niveau depuis l’arrivée de PHP 7.
Il existe de nombreux frameworks PHP où chacun a leurs avantages/inconvénients. Les plus
connus et les plus populaires sont Symfony, Laravel, CakePHP, CodeIgniter ou encore
Yii.
b. ASP .NET
L’ASP .NET (Active Server Page) est un langage Microsoft permettant la création de sites
internet avec le framework .NET. Il peut être très aisé de l’apprendre surtout si vous avez de
bonnes bases en C#. Vous devez comprendre que l’ASP .NET est une très bonne alternative
au PHP malgré qu’il ne représente qu’un faible pourcentage au niveau mondial. La cause
principale est le coût d’un site internet sur cette technologie dû notamment aux licences
Microsoft. En effet, pour faire tourner un site internet en ASP .NET, vous devez posséder un
serveur Windows Server (ce qui veut dire acquérir une licence Windows Server).
c. Node.js
Un autre langage serveur créé spécifiquement pour le web et qui se nomme Node.js. Il est
basé sur le JavaScript, mais avec la particularité de s’exécuter côté serveur plutôt que côté
client. Il est bien entendu possible de combiner le JavaScript côté client et côté serveur avec
cette technologie. C’est ce que fait très bien le framework Meteor qui se base sur Node.js et

www.kelmass.com Tel : 694 841 716

qui est très puissant pour faire des prototypes d’applications comme des applications de
production. Il existe bien entendu d’autres frameworks pour ce langage comme Sails.js.
d. Python, Ruby, Java
Il existe bien d’autres langages qui n’ont pas été conçus à la base pour le web, mais qui
peuvent tout aussi bien en faire à l’aide de framework ou de librairie annexe. C’est le cas du
Python avec son célèbre framework « Django ». Ruby avec son framework « Ruby On Rails
». Java avec l’extension « Java EE ».

II. Base de données

1. MySQL
Système de Gestion de Base de Données Relationnelle (SGBDR) le plus répandu et le plus
populaire au niveau du développement web Open Source. Cela vous permet de créer des bases
de données relationnelles pour y stocker des données dans le but d’être publié dynamiquement
sur un site internet ou une application web.
MySQL a été fondé par Michael Widenius en 1995 et bien plus tard racheté par la société Sun
qui fut rachetée par Oracle ensuite. Il faut savoir qu’après le rachat par Oracle, Michael
Widenius a décidé de continuer une variante de MySQL appelé MariaDB pour continuer le
projet Open Source qu’est MySQL. Michael Widenius a donné le prénom de ses filles « My »
et « Maria » pour MySQL et MariaDB.
MySQL couplé à PHP permet de produire des sites internet et des applications web
dynamiques fiables et à moindre coût. Ils existent bien entendu d’autres technologies pour
répondre à ces besoins, mais elles sont très populaires pour 2 principales raisons :
Open Source - Proposées par la plupart des plateformes d’hébergements payantes et gratuites
dans le monde
2. SQL Server
SQL Server est un SGBDR créé par Microsoft. Très professionnel et très performant, il est
meilleur que MySQL pour des bases de données colossales et c’est indéniable. Le couple ASP
.NET/SQL Server fonctionne aussi bien que le couple PHP/MySQL. Malgré la version
Express (gratuite) de SQL Server, il reste assez onéreux au niveau des coûts de licence
utilisateur.
3. Oracle Database
Sans doute le meilleur SGBDR à ce jour. Il est particulièrement redouble et efficace lorsque
vous devez posséder des bases de données conséquentes en termes d’accès et de stockage de
données. Mais il faut savoir qu’Oracle Database est un SGBDR très coûteux en termes de
licence (bien plus que SQL Server). Suivant la version du logiciel, le nombre d’utilisateurs et
même votre configuration serveur, le coût peut-être abordable comme exorbitant.
4. MongoDB

www.kelmass.com Tel : 694 841 716

Nous sommes obligés de parler de ce moteur de base de données puisqu’il est utilisé avec le
Framework Meteor (Node.js). MongoDB n’a rien à voir avec les bases de données
relationnelles puisque c’est un moteur de base de données NoSQL (Not Only SQL).
Il existe plusieurs types de bases de données NoSQL :
clef/valeur comme Redis
colonnes comme Cassandra
graphe comme Neo4J
document comme CouchDB
Le plus répandu est l’orienté document et c’est le cas de MongoDB. L’accès aux données
comme leurs injections sera très similaire au format JSON. Ce genre de moteur pourra être
fortement utile dans certaines de vos applications comme le stockage de données non
relationnelles ou tout simplement non structurées.
5. PostgreSQL
PostgreSQL est un système de gestion de base de données relationnelle et objet (SGBDRO).
C’est un sérieux concurrent aux autres systèmes comme MySQL, MariaDB, SQL Server ou
Oracle. Avant MySQL 5, PostgreSQL était bien meilleur que MySQL niveau performance
malgré sa popularité bien moins grande que MySQL. Néanmoins, il est tout de même utilisé
par des sites internet réputés comme SourceForge.
PHP/MySQL est le plus répandu
Les hébergeurs de sites Internet/applications web se sont tournés vers les technologies Open
Source, car elles sont moins coûteuses, plus simples à déployer et à maintenir. C’est pour cela
que le PHP/MySQL est devenu très populaire et que beaucoup de développeurs se sont
tournés vers ses technologies.
Nous nous concentrerons sur les logiciels touchant à ce couple, mais certains d’entre eux
peuvent être utilisés pour les autres langages énoncés plus haut.

III. Logiciels
1. Serveurs Web
Pour faire tourner tout ce petit monde, il vous faudra un serveur web à installer sur votre
machine pour vos développements. Sachez qu’ils en existent plusieurs autant sur Windows,
Linux et Mac OSX.
Pour PHP/MySQL, vous devrez installer un serveur HTTP en plus de ces langages.
Le plus populaire est Apache. Il existe également une bonne alternative nommée Nginx, mais
si vous débutez je ne vous la conseille pas car un peu plus complexe. Enfin il existe également
le système de Windows nommé IIS.

www.kelmass.com Tel : 694 841 716

Le plus simple lorsque l’on est débutant et que l’on veut se mettre au PHP/MySQL sans se
prendre la tête, c’est d’utiliser un serveur web clé en main. On retrouve notamment :
WampServer (Apache/PHP/MySQL pour Windows)
XAMP (Apache/PHP/MySQL pour Linux)
MAMP (Apache/PHP/MySQL pour Windows)
Pour Windows, si vous souhaitez bénéficier d’une solution plus polyvalente et plus puissante
que Wampserver, nous vous conseillons Neard.
Pour les plus aventureux et les plus courageux, nous vous conseillons de vous constituer ce
petit monde sur Docker qui est une solution beaucoup plus flexible et beaucoup moins figée
que les serveurs clés en main.
2. Éditeur de texte
Ils sont légers et simples à utiliser. Très utile lorsqu’il faut modifier un fichier rapidement et
efficacement. Généralement, ses éditeurs de textes comportent des fonctionnalités très
basiques, mais utiles comme la coloration syntaxique, l’autocomplétion ou la multivue.
Notepad ++ est le plus connu et le plus basique dans ses fonctionnalités.
D’autres alternatives à Notepad ++ existent comme Sublime Text 3, Atom ou encore le tout
récent Visual Studio Code. Il est d’ailleurs difficile de les catégoriser comme des éditeurs de
texte puisqu’ils sont plus complets, mais pas aussi complets d’un IDE dédié à un langage. En
effet, il est possible de les enrichir de fonctionnalités supplémentaires grâce à l’ajout de plug-
ins.
3. IDE
Un IDE (Integrated Development Environnement) est un logiciel qui rassemble plusieurs
outils dans vous aurez besoin pour mener à bien le développement qu’il vous concerne. Le
gros avantage des IDE c’est qu’il possède énormément d’outils permettant d’améliorer la
productivité de vos développements, le tout en une seule interface. Il peut être très
déstabilisant d’utiliser un IDE puisqu’il y a des boutons et des fonctionnalités partout et que
cela est un peu fastidieux à configurer.
Quand on débute sur un nouvel IDE cela peut être un frein qui est déstabilisant, mais avec
beaucoup de patience et un minimum de configuration, on s’aperçoit très vite que ce sont des
outils vraiment redoutables. Naturellement, on pourrait se tourner vers l’IDE de la société
gérant PHP à savoir Zend Studio.
Mais pour l’avoir utilisé dans le passé, nous ne le recommandons vraiment pas, car il est lourd
et surtout très lent sur de très gros projets. Il est loin d’être satisfaisant pour un IDE payant. Le
meilleur IDE payant selon nous pour faire de la programmation web avec PHP, c’est
PHPStorm. Ils existent des IDE gratuit pour PHP comme Eclipse ou encore Netbeans que
nous avons beaucoup utilisés par le passé.
4. Gestion de votre code
Cela s’applique à tous les langages qui existent, mais une piqûre de rappel ne fait pas de mal.
Vous devez versionner votre code coûte que coûte. Ils existent plusieurs logiciels pour le faire

www.kelmass.com Tel : 694 841 716

avec des solutions d’hébergements en ligne ou la possibilité de faire son propre serveur de
versionning.
a. Débogage & tests
En PHP, il existe des manières assez archaïques et manuelles pour faire le débogage de son
code comme vous pourrez le voir. Il existe un outil qui est particulièrement efficace pour
faciliter le debugging et surtout vous faire gagner du temps c’est XDebug. Grâce à lui, vous
pourrez mettre des points d’arrêt dans votre programme, changer les valeurs de vos variables
pendant vos exécutions de codes et bien d’autres choses encore.
Concernant les tests, on parle souvent de tests unitaires. Là encore PHP n’a pas une belle
réputation concernant la mise en place de ces tests. C’est dû naturellement à son immaturité
lors de ces premières versions et de la « non-prise de cette habitude » dès le début qui fait de
nombreux programmeurs ne les mettent pas en place. Pourtant ils sont très importants pour la
pérennité de votre code surtout si vous devez faire souvent du refactoring. Il y a un outil
efficace pour pallier à cela, il se nomme PHPUnit. Il est léger et très simple à comprendre
ainsi qu’à mettre en place.
Pour terminer vos tests, il vous arrivera sûrement que votre site web envoie des e-mails. Et si
vous voulez les envoyer en masse, vous vous doutez bien que vous n’allez pas faire vos tests
en réel. Pour cela il est possible d’utiliser des SMTP pour vos développements pour que de
vrais e-mails partent dans une boîte hébergée sur votre ordinateur. C’est très pratique. Il y a
deux assez populaires pour réaliser cela : MailHog et MailDev
b. Gestion des dépendances
Un autre outil assez pratique pour le PHP : Composer, Composer est un outil de gestion de
librairie. L’avantage de cet outil c’est que vous pourrez gérer les dépendances de vos projets
et utiliser que certaines de celle-ci en mode développement. Cela facilitera les versions de vos
dépendances et leurs mises à jour. Par exemple vous pouvez mentionner à Composer
d’installer la dépendance PHPUnit sur votre projet, mais que celle-ci ne doit fonctionner que
lorsque vous êtes en mode développement et pas en production.
c. Wappalyzer
Enfin, un des outils de supervision de site web : Wappalyzer, Wappalyzer est un outil libre
qui joue les détectives pour vous permettre de découvrir la technologie qui se cache derrière
n'importe quel site ou blog. Lorsque vous visitez un site, un clic suffit pour savoir avec quoi il
est fait.

Conclusion
Il y a encore tant d’outils à découvrir pour la programmation web, mais si vous vous
intéressez déjà à cela ce sera déjà pas mal. Nous aurions pu étoffer un peu plus chaque partie,
mais nous pensons que le mémo est déjà assez long comme ça. Nous avons effectué une
bonne synthèse de ce qu’il se fait au niveau programmation web.

www.kelmass.com Tel : 694 841 716