Université Sultan Moulay Slimane

FACULTÉ POLYDISCIPLINAIRE
DÉPARTEMENT DE PHYSIQUE
- BÉNI MELLAL -

Licence d’Études Fondamentales

SCIENCES DE LA MATIERE PHYSIQUE (SMP)

Option : Electronique

Projet de Fin d’Etudes

Commande à distance via Internet

Avec ARDUINO et Page WEB

••••• Réalisé par FOUAD MOURCHID et OTHMAN IBOURK

Soutenu le Prof. M. DRIOUICH, Président

••••• 06/07/2022 devant
le jury composé Prof. N . TAIFI, Examinatrice
de :
Prof. A . MALAOUI, Encadrant

Année Universitaire : 2021-2022

Sommaire

Introduction générale…………………………………………….………………………….................5
Dédicace……………………………………………………………….………………..........................6
Remerciement………………………………………………………….……………………..................7
Chapitre I : Les principes de base..………………………………….…………………….................8
I. Introduction.....................................................................................................................8
II. INTERNET des choses (IoT)………… ……………………….…………………..................8
1. définition………………………………………………….…………………................8
2. Marché et applications…………………………………………………..…...............9
III. Transmission des données sur les réseaux………………………….……….…..................9
1. Couches TCP/IP………………………………………………………...…...............10
1. Couche physique………………………………….……..…............10
2. Couche de liaison de données………………………..…..............10
3. Couche réseau…………………………………………..….............10
4. Couche transport…………………………………………..............11
5. Couche application………………………………………..............11
2. Les protocoles de communication…………………….…………………..............11
1. Protocoles d'accès…………………………………... .……..........11
2. Protocoles Applicatifs……………….….……..…….……............12
IV. Le protocole HTTP…………………………………………………….………….................12
1. Définition…………………………………………………………….…..…..............12
2. Communication entre navigateur et serveur…..…….……….…..….................12
3. Requête http………………………………………………………….…..….............13
4. Réponse http………………………………………………..……………….............13
V. Le protocole ETHERNET……………………………………………….….….…..............14
1. Définition…………………………………………….……………….….….............14
2. La façon de travailler……………………………………….……….…..…...........14
VI. Les différentes cartes utilise pour commande par INTERNET……….…..…..............14
1. Arduino ……………………………………………………………………..............14
2. La carte Ethernet……………………………………………………………..........15
VII. Les applications de contrôle à distance via Internet………………............................15
1. Application desktop ou mobile………………………………….…….................15
2. Site WEB……………………………………………………………………............15
3. Les concepts de base communs entre les applications et les sites WEB.........15
1. La page WEB………………………………………………………............16
2. HTML……………………………………………………………….............16
3. CSS………………………………………………………………….............17
4. JAVASCRIPT………………………………………………………............17
5. PHP…………………………………………………………….……...........17
6. MYSQL………………………………………………………….........…..…18
7. Base de données…………………………...…………….……............…18
8. CLIENT………………………………………………………….............…19

2
 9. SERVER…………………………………………………………...............…19
10. Adresse IP…………………………………………………….……..............19
11. Adresse MAC……………………………………………………..............…19
12. Localhost………………………………………………….…………............19
VIII. Conclusion.....................................................................................................................19

Chapitre II : La partie matérielle………………………………………………………...................20

I. Introduction...................................................................................................................20
II. Arduino UNO………………………………………………….............……………….……..20
1. Introduction………………………………………………………............…..….…...20
2. Spécifications techniques……….……………………………………................…..21
3. Les fonctions……………………………………………………………...............…..21
III. La carte Ethernet Shield W5100…………………….…………………..……....................23
1. Introduction……………………………………….……………………….................23
2. Les bibliothèques…………….…………………….……………………..................23
1. Usage……………………………...…………………………............24
2. Client Class…………………………………………………............24
a. EthernetClient……………………………………………..….........24
b. Ethernet.begin…………………….………….…………..…...........24
c. Client.connect…………………………………………...…….........24
d. Client.available………………….…………………...……….........24
e. Client.read……………………….………………………....….........24
f. Client.stop………………………….…………….…………............25
g. Client.Print………………………………………………….............25
h. IPAdress……………………………….…………………..........…...25
IV. Les composants contrôlés……………………………………...………………...................25
1. La lampe 220V…………………………………………………………......…...........25
2. Relais 1 channel………………………………………………….….....……….........25
3. Le capteur DHT11………………………………………….………….…................26
1. Introduction…………………………………………………...........26
2. La bibliothèque…………………………………………….............26
4. Le Moteur 6V………………………………………………….……........................26
V. Schéma de montage……………………………………………………..………..................27
VI. Conclusion...................................................................................................................28

Chapitre III : La partie logicielle ……………….………………...………………….…................29

I. Introduction...................................................................................................................29
II. La base de donnees.......................................................................................................29
III. Le site WEB comme plateforme de contrôle………………...….…….............…….....29
1. La page de contrôle…………………………………………...….…...…................30
1. Le code HTML, PHP et JavaScript…………........………......…30
2. Les fichiers externes………………….………………......….........31
 Fichier : fonctions.php………….……………...….…..............…31
 Fichier : connexion.php………………………..….…..............…32

3
  Fichier : style.css et bootstrap.css………..…………...............…33
IV. Le programme pour l’Arduino…………………………………….……….........................33
1. Les fichiers PHP pour l’Arduino………………………………..…...................…33
1. Fichier : mettreAJourValeur.php…………….…...……..............33
2. Fichier : ApporterValeur.php…………..……….…......….......... 34
2. Le programme de l’Arduino IDE…………………………….….....……..............35
V. Conclusion....................................................................................................................38
Chapitre IV : Réalisation du projet…………………………………………..……........................39
I. Introduction...................................................................................................................39
II. Réalisation du montage ……………………............…………………………….…...……39
1. Circuit H-Bridge……………………...........…………………………….....……….39
2. Circuit pour le capteur DHT11………..............……………………....…..………39
3. Circuit de la lampe………………………………..............………………...………40
4. Circuit final………………………………………………............……….....……….41
III. Configurer le serveur dans localhost…………………………………................………...42
1. Démarrer le serveur avec l’application XAMPP………………….................…42
2. L’adresse de serveur…………………………………………………...............…...42
3. Création de la base de données……………………………………….…...............43
4. Mettre des fichiers sur le serveur……………………………………..…..............46
IV. Transmission et réception des données partielle dans localhost………....…...............47
1. Transmission et réception des données entre la page WEB et la base de
données dans localhost…………………………………………….........................47
2. Transmission et réception des données entre l’Arduino et la base de données
dans localhost ……………………………………….............................................49
V. Transmission et réception des données entre la page WEB et l’Arduino dans
localhost……………………………………………………………………….................……49
VI. Transmission et réception des données entre la page WEB et l’Arduino dans
host……………………………………………………………………………….….................50
VII. Conclusion………………………………………………………………………………..........53
Conclusion générale ………………………………........................…………………………………54
Bibliographie…...........................................………………….....………………………………….55

4
Introduction Générale

L’échange d’informations à distance est devenu intuitif à notre époque, et le secteur

du contrôle à distance a connu une croissance rapide.

Le contrôle à distance réduit les efforts et le temps, ce qui est la meilleur solution
pour travailler dans des conditions pandémies qui paralysent le travail humain.

Nos recherches s’inscrivent dans cette croissance rapide de cet important secteur,
nous mentionnons les objectifs que nous aspirons à atteindre grâce à cette recherche.

 Réalisation de Transmission et réceptions des données à distance via Internet

entre l’Arduino et la page WEB (la page de contrôle) .

C’est-à-dire. Nous contrôlerons une lampe et la variation de la vitesse d’un petit

moteur de 6V à distance en utilisant Internet une page WEB, et la page WEB affiche la
valeur de la température et d’humidité envoyée par Arduino.

5
Dédicace

Je dédie ce modeste travail et ma profonde gratitude à ma mère et mon père pour l’éducation
qu’ils m’ont prodigué ; avec tous les moyens et au prix de toutes les sacrifices qu’ils ont
consentis à mon égard, pour le sens du devoir qu’ils m’ont enseigné depuis mon enfance.
A la famille toute entière
A mon binôme
Ma gratitude la plus profonde à mes amis et frères présents, ou absents.
A tout le corps enseignant, administratif, et le personnel de la FPBM.

6
Remerciements

Nous tenons à remercier tout premièrement «‫ » ا‬les tout puissances

pour la volonté, la santé et la patience, qu’il m’a donnée durant toutes
ces longues années

Je tiens à travers ce mémoire à exprimer mes sincères

remerciements à toute l’équipe pédagogique de la FPBM et les
intervenants professionnels responsables de la filière SMP-
Electronique pour m’avoir assuré une bonne formation.

J’exprime ma profonde gratitude ainsi que toute ma reconnaissance

à mon encadrant de la FPBM, le professeur Malaoui qui m’a fait
bénéficier de ses conseils appréciables, sa disponibilité, son aide et
pour l’intérêt manifeste qu’il a porté à ce projet.

Je tiens à exprimer ma gratitude aux membres de jury qui se sont

libérés de leurs obligations pour assister à la soutenance et juger mon
travail.

Enfin, à tous ceux qui ont contribué de près ou de loin à la réussite

de ce travail, je dis merci du fond du cœur.

7
Chapitre I : Les principes de base

I. Introduction

Dans ce chapitre, nous en apprendrons davantage sur l’Internet des objets, les
protocoles responsables de l’envoi et de la réception des données, les différentes
applications de telecommande via Internet et la définition des langues communes à ces
applications

II. INTERNET des objets (IoT)

1. Définition
L'Internet des objets (IdO ou IoT pour Internet of Things en anglais) représente
l'extension d'Internet à des choses et à des lieux du monde physique.
Alors qu'Internet ne se prolonge habituellement pas au-delà du monde électronique,
l'internet des objets connectés représente les échanges d'informations et de données
provenant de dispositifs présents dans le monde réel vers le réseau Internet.
L'internet des objets est considéré comme la troisième évolution de l'Internet, baptisée
Web 3.0 qui fait suite à l'ère du Web social.
L'internet des objets revêt un caractère universel pour désigner des objets connectés
aux usages variés, dans le domaine de la e-santé, de la domotique ou du Quantified Self.
L'internet des objets est en partie responsable d'un accroissement exponentiel du
volume de données générées sur le réseau, à l'origine du Big Data.

Selon une équipe de l'ETH de Zurich avec les smartphones puis un nombre croissant
d'objets connectés, en dix ans (2015-2025) 150 milliards d'objets devraient se
connecter entre eux, avec l'internet et avec plusieurs milliards de personnes.

8
 2. Marché et applications
Le nombre de connexions entre des personnes et de choses et la quantité de données
générées étaient précédemment inimaginables. Une explosion du nombre de
périphériques avec un accès à la puissance de l'Internet (du nuage) permet de nouvelles
interactions intelligentes entre ces choses. On considère que l'ère de l'IoT a commencé à
partir du moment où le nombre d'objets connectés a dépassé le nombre d'êtres humains
sur le globe.

L'impact de l'IoT sur l'économie couvre aussi bien les industries que les marchés
verticaux. Il s'agit d'économiser des coûts d'exploitation grâce aux avantages de l'IoT
comme par exemple dans l'industrie des énergies fossiles.

Pour les fournisseurs d'équipement réseau et d'applications, l'IoT représente

potentiellement une énorme opportunité de marché. Différentes tendances sont
apparues ces dernières années et annoncent ensembles l'émergence du marché IoT :
 Croissance rapide des données et de leurs analyses disponibles grâce à
l'informatique en nuage Cloud Computing
 Croissance rapide des prériphériques mobiles intelligents
 Augmentation de l'interconnectivité entre des périphériques industriels,
opérationnels et mobiles
 Convergence des réseaux industriels et d'entreprise pour rendre disponible des
applications comme la vidéosurveillance, la prise de mesure intelligente, le suivi
d'actifs, la gestion de véhicules, la surveillance de la santé, etc.

Les applications IoT les plus populaires sont :

1. La maison intelligente : thermostats, ampoules, frigo, fermtures de portes
intelligents
2. Les vêtements connectés : montres, bracelets et lunettes intelligentes
3. Les villes intelligentes : parking et gestion des déchets intelligents

Mais on retrouve l'IoT au quotidien dans la gestion des bâtiments (facility), dans la
surveillance physique, dans les loisirs, dans le secteur de la santé, dans la gestion des
modes de transport.

III. Transmission des données sur les réseaux.

9
 Principe de transmission des donnees sur le reseau

1. Couches TCP/IP

 Couche physique
La couche physique décrit les caractéristiques physiques de la communication, comme
les conventions à propos de la nature du média utilisé pour les communications (les
câbles, les liens par fibre optique ou par radio), et tous les détails associés comme les
connecteurs, les types de codage ou de modulation, le niveau des signaux, les longueurs
d'onde, la synchronisation et les distances maximales.

 Couche de liaison de données

La couche de liaison de données spécifie comment les paquets sont transportés sur la
couche physique, et en particulier le tramage (i.e. les séquences de bits particulières qui
marquent le début et la fin des paquets). Les en-têtes des trames Ethernet, par exemple,
contiennent des champs qui indiquent à quelle(s) machine(s) du réseau un paquet est
destiné. Exemples de protocoles de la couche de liaison de données : Ethernet, Wireless
Ethernet, SLIP, Token Ring et ATM.

 Couche réseau
Dans sa définition d'origine, la couche de réseau résout le problème de l'acheminement
de paquets à travers un seul réseau. Exemples de protocoles de ce type : X.25, et le Initial
Connection Protocol d'ARPANET.
Lorsque deux terminaux communiquent entre eux via ce protocole, aucun chemin pour
le transfert des données n'est établi à l'avance : il est dit que le protocole est « non
orienté connexion ». Par opposition, pour un système comme le réseau téléphonique
commuté, le chemin par lequel va passer la voix (ou les données) est établi au
commencement de la connexion : le protocole est « orienté connexion ».

10
  Couche transport
Les protocoles de la couche de transport peuvent résoudre des problèmes comme la
fiabilité des échanges (« est-ce que les données sont arrivées à destination ? ») et assurer
que les données arrivent dans l'ordre correct. Dans la suite de protocoles TCP/IP, les
protocoles de transport déterminent aussi à quelle application chaque paquet de
données doit être délivré.
TCP (protocole IP numéro 6) est un protocole de transport « fiable », orienté
connexion, qui fournit un flux d'octets fiable assurant l'arrivée des données sans
altérations et dans l'ordre, avec retransmission en cas de perte, et élimination des
données dupliquées. Il gère aussi les données « urgentes » qui doivent être traitées dans
le désordre (même si techniquement, elles ne sont pas émises hors bande).
TCP essaie de délivrer toutes les données correctement et en séquence — c'est son but
et son principal avantage sur UDP, même si ça peut être un désavantage pour des
applications de transfert ou de routage de flux en temps-réel, avec des taux de perte
élevées au niveau de la couche réseau.

 Couche application

C'est dans la couche application que se situent la plupart des programmes réseau.
Ces programmes et les protocoles qu'ils utilisent incluent HTTP (World Wide Web),
FTP (transfert de fichiers), SMTP (messagerie), SSH (connexion à distance sécurisée),
DNS (recherche de correspondance entre noms et adresses IP) et beaucoup d'autres.
Les applications fonctionnent généralement au-dessus de TCP ou d'UDP, et sont
souvent associées à un port bien connu. Exemples : HTTP port TCP 80 ; …

2. Les protocoles de communication

 Protocoles d'accès
Protocoles M2M / WPAN / WBAN
Protocoles LAN (Ethernet et Wi-Fi)
Protocoles WAN (Ethernet, xDSL / DOCSIS et GSM)

11
  Protocoles Applicatifs

IPv4 / IPv6 / 6LoWPAN TCP/UDP

HTTP UPnP
XMPP MQTT

IV. Le protocole HTTP

1. Définition
Le protocole HTTP (HyperText Transfer Protocol) est le protocole le plus utilisé sur
Internet depuis 1990. La version 0.9 était uniquement destinée à transférer des données
sur Internet (en particulier des pages Web écrites en HTML] La version 1.0 du protocole
(la plus utilisée) permet désormais de transférer des messages avec des en-têtes
décrivant le contenu du message en utilisant un codage de type MIME.
Le but du protocole HTTP est de permettre un transfert de fichiers (essentiellement au
format HTML) localisés grâce à une chaîne de caractères appelée URL entre un
navigateur (le client) et un serveur Web

2. Communication entre navigateur et serveur

 Le navigateur effectue une requête HTTP

 Le serveur traite la requête puis envoie une réponse HTTP
En réalité la communication s'effectue en plus de temps si on considère le traitement
de la requête par le serveur. Etant donné que l'on s'intéresse uniquement au protocole
HTTP, le traitement du côté serveur ne sera pas explicité dans le cadre de cet article... Si
ce sujet vous intéresse, référez-vous à l'article sur le traitement des CGI.

12
 3. Requête http
Une requête HTTP est un ensemble de lignes envoyé au serveur par le navigateur. Elle
comprend :
 Une ligne de requête: c'est une ligne précisant le type de document demandé, la
méthode qui doit être appliquée, et la version du protocole utilisée. La ligne
comprend trois éléments devant être séparés par un espace :
 La méthode
 L'URL
 La version du protocole utilisé par le client (généralement HTTP/1.0)
 Les champs d'en-tête de la requête: il s'agit d'un ensemble de lignes facultatives
permettant de donner des informations supplémentaires sur la requête et/ou le
client (Navigateur, système d'exploitation, ...). Chacune de ces lignes est composée
d'un nom qualifiant le type d'en-tête, suivi de deux points (:) et de la valeur de l'en-
tête
 Le corps de la requête: c'est un ensemble de lignes optionnelles devant être
séparées des lignes précédentes par une ligne vide et permettant par exemple un
envoi de données par une commande POST lors de l'envoi de données au serveur par
un formulaire

Voici donc un exemple de requête HTTP :

GET [/ https://www.abc.ac/ ] HTTP/1.0

Accept : text/html
If-Modified-Since : Saturday, 15-January-2000 14:37:11 GMT
User-Agent : Mozilla/4.0 (compatible ; MSIE 5.0 ; Windows 95)

4. Réponse http
Une réponse HTTP est un ensemble de lignes envoyées au navigateur par le serveur.
Elle comprend :
 gne précisant la version du protocole utilisé et l'état du traitement de la requête à
l'aide d'un code et d'un texte explicatif. La ligne comprend trois éléments devant être
séparés par un espace :
 La version du protocole utilisé
 Le code de statut
 La signification du code
 Les champs d'en-tête de la réponse: il s'agit d'un ensemble de lignes facultatives
permettant de donner des informations supplémentaires sur la réponse et/ou le
serveur. Chacune de ces lignes est composée d'un nom qualifiant le type d'en-tête,
suivi de deux points (:) et de la valeur de l'en-tête
 Le corps de la réponse: il contient le document demandé

Voici donc un exemple de réponse HTTP :

13
 HTTP/1.0 200 OK
Date : Sat, 15 Jan 2000 14:37:12 GMT Server : Microsoft-IIS/2.0
Content-Type : text/HTML
Content-Length : 1245
Last-Modified : Fri, 14 Jan 2020 08:25: 13 GMT

V. Le protocole ETHERNET

1. Définition
Ethernet est un protocole de réseau local à commutation de paquets. C'est dans la couche
de liaison, et C'est une norme internationale : ISO/IEC 802-3.

2. Comment ça marche
Le protocole Ethernet spécifie un ensemble de règles pour permettre la
communication dans un réseau local.
Voici les grandes étapes d’une connexion Ethernet dans un réseau LAN :
 Le périphérique doit comporter une carte réseau Ethernet avec une prise
Ethernet
 on branche un câble RJ45 vers un routeur ou commutateur réseau (switch)
 On fait de même avec les autres équipements que l’on souhaite connecter au
réseau LAN ou WAN
 Ensuite on configure le protocole IP (adresse IP, passerelle, masque de sous-
réseau).

Les paquets IP sont encapsulés dans la trame Ethernet qui est diffusée sur le réseau.
Elle stocke la source et le destinataire à l’aide de l’adresse MAC.

VI. Les différentes cartes utilise pour commande par INTERNET

1. Arduino
Arduino est une société de matériel et de logiciels open sources, un projet et une
communauté d’utilisateurs qui conçoit et fabrique des microcontrôleurs à carte unique
et des kits de microcontrôleurs pour la construction d’appareils numériques.
La carte Arduino est utilisée pour la programmer afin d’effectuer un ou plusieurs
services de routine récurrents au fil du temps, par exemple, contrôler la lampe externe
pour l’allumer pendant la nuit et éteignez automatiquement la lampe pendant la journée.

 Arduino UNO
La carte Arduino Uno est une carte de microcontrôleur open sources basée sur le
microcontrôleur Microchip ATmega328P et développée par Arduino.cc.

14
 2. La carte Ethernet
Utilisé pour active la connexion réseau (locale et Internet) à l’aide de la carte Ethernet
Arduino ou du Shield

 Arduino Ethernet Shield W5100

L’Arduino Ethernet est une carte de microcontrôleur basse sur l’ATmega328, Il dispose
de 14 broches d’entrée/sortie numériques, de 6 entrées analogique, d’un oscillateur a
cristaux de 16 MHz, d’une connexion RJ45, d’une prise d’alimentation, d’un en-tête ICSP
et d’un bouton de réinitialisation.

VII. Les applications de contrôle à distance via Internet

1. Application Desktop ou mobile
 Application Desktop
Une application de bureau est un logiciel qui peut être exécute sur un ordinateur
autonome pour effectuer une tache spécifique par un utilisateur final.

 Application Mobile
Une application mobile est un logiciel qui peut être exécute sur un appareil mobile ou
une tablette autonome pour effectuer une tache spécifique par un utilisateur final.

2. Le site WEB
Un site web, site Web ou simplement site, est un ensemble de pages web et de
ressources reliées par des hyperliens, défini et accessible par une adresse web, par
exemple le site web suivante :

Exemple d’un site web

3. Les langages et les concepts commun entre les applications et les

sites WEB
Les langages commun entre les applications et les sites WEB.

15
 1. La page WEB
La page web1, ou page Web2,1, est l'unité de consultation du World Wide Web. Ce
terme a une signification pratique ; il n'a pas de définition technique formelle. Les pages
web sont conçues pour être consultées avec un navigateur web3. Elles sont identifiées
par une adresse web.
Techniquement, une page web est généralement constituée d'un document rédigé en
Hypertext Markup Language (HTML) pour la structure de base, d'images numériques,
de feuilles de style en cascade (CSS) pour la mise en page, et de JavaScript pour la
programmation informatique des fonctionnalités plus avancées.

2. HTML

Le HyperText Markup Language, généralement abrégé HTML ou, dans sa dernière

version, HTML5, est le langage de balisage conçu pour représenter les pages web.
Ce langage permet :

 d’écrire de l’hypertexte, d’où son nom,

 de structurer sémantiquement la page,
 de mettre en forme le contenu,
 de créer des formulaires de saisie,
 d’inclure des ressources multimédias dont des images, des
vidéos, et des programmes informatiques,
 de créer des documents interopérables avec des équipements
très variés de manière conforme aux exigences de l’accessibilité
du web.

Il est souvent utilisé conjointement avec le langage de programmation JavaScript et des

feuilles de style en cascade (CSS).
Exemple :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>titre de la page web</title>
</head>
<body>
<h1>titre de la paragraphe</h1>
<p>Le HyperText Markup Language,
généralement abrégé HTML ou,
dans sa dernière version, HTML5,
est le langage de balisage conçu pour représenter les pages web.</p>
</body>
</html>

16
 3. CSS
Les feuilles de style en cascade1, généralement appelées CSS de
l'anglais Cascading Style Sheets, forment un langage
informatique qui décrit la présentation des documents HTML et
XML. Les standards définissant CSS sont publiés par le World
Wide Web Consortium (W3C). Introduit au milieu des années
1990, CSS devient couramment utilisé dans la conception de sites
web et bien pris en charge par les navigateurs web dans les
années 2000.
Exemple :

1. <!DOCTYPE html>
2. <html lang="fr">
3. <head>
4. <meta charset="UTF-8">
5. <title>titre de la page web</title>
6. <style>
7. body {background-color: #9e9e9e70;}
8. h1 {
9. background-color: aliceblue;
10. padding: 0px 0px 0px 28px;
11. margin: 23px -12px 0px -12px;
12. }
13. </style>
14.
15. </head>
16. <body>
17. <h1>titre de la paragraphe</h1>
18. <p>Le HyperText Markup Language,
19. généralement abrégé HTML ou,
20. dans sa dernière version, HTML5,
21. est le langage de balisage conçu pour représenter les pages web.</p>
22. </body>

23. </html>

4. JAVASCRIPT
JavaScript est un langage de programmation de scripts
principalement employé dans les pages web interactives et à ce
titre est une partie essentielle des applications web. Avec les
langages HTML et CSS, JavaScript est au cœur des langages utilisés
par les développeurs web3. Une grande majorité des sites web
l'utilisent4, et la majorité des navigateurs web disposent d'un
moteur JavaScript5 pour l'interpréter.

5. PHP

PHP ou Hypertext Preprocessor, plus connu sous son

sigle PHP (sigle auto-référentiel), est un langage de
programmation libre, principalement utilisé pour produire
des pages Web dynamiques via un serveur HTTP, mais
pouvant également fonctionner comme n'importe quel
langage interprété de façon locale. PHP est un langage

17
impératif orienté objet.

PHP a permis de créer un grand nombre de sites web célèbres, comme Facebook et
Wikipédia. Il est considéré comme une des bases de la création de sites web dits
dynamiques mais également des applications web.

6. MYSQL
MySQL est un système de gestion de bases de
données relationnelles (SGBDR). Il est distribué sous
une double licence GPL et propriétaire. Il fait partie
des logiciels de gestion de base de données les plus
utilisés au monde3, autant par le grand public
(applications web principalement) que par des
professionnels, en concurrence avec Oracle,
PostgreSQL et Microsoft SQL Server.
Son nom vient du prénom de la fille du cocréateur
Michael Widenius, My (sv) (prononcer [my]). SQL
fait référence au Structured Query Language, le langage de requête utilisé.
MySQL AB a été acheté le 16 janvier 2008 par Sun Microsystems pour un milliard de
dollars américains4. En 2009, Sun Microsystems a été acquis par Oracle Corporation,
mettant entre les mains d'une même société les deux produits concurrents que sont
Oracle Database et MySQL. Ce rachat a été autorisé par la Commission européenne le 21
janvier 20105,6.
Depuis mai 2009, son créateur Michael Widenius a créé MariaDB (Maria est le prénom
de sa deuxième fille) pour continuer son développement en tant que projet Open Source.

7. Base de données

Une base de données permet de stocker et de retrouver des

données structurées, semi-structurées ou des données
brutes ou de l'information, souvent en rapport avec un
thème ou une activité ; celles-ci peuvent être de natures
différentes et plus ou moins reliées entre elles.
Leurs données peuvent être stockées sous une forme très
structurée (base de données relationnelles par exemple), ou
bien sous la forme de données brutes peu structurées (avec
les bases de données NoSQL par exemple). Une base de
données peut être localisée dans un même lieu et sur un
même support informatisé, ou répartie sur plusieurs machines à plusieurs endroits.
La base de données est au centre des dispositifs informatiques de collecte, mise en
forme, stockage et utilisation d'informations. Le dispositif comporte un système de
gestion de base de données (abréviation : SGBD) : un logiciel moteur qui manipule la
base de données et dirige l'accès à son contenu. De tels dispositifs comportent

18
 également des logiciels applicatifs, et un ensemble de règles relatives à l'accès et
l'utilisation des informations1.
Lorsque plusieurs objets nommés « bases de données » sont constitués sous forme de
collection, on parle alors d'une banque de données.

8. Client
En informatique, un client est un matériel informatique ou unlogiciel qui accède à un
service mis à disposition par un serveur dans le cadre du modèle client-serveur des
réseaux informatiques. Le serveur se trouve souvent (mais pas toujours) sur un autre
système informatique, auquel cas le client accède au service par le biais d’un réseau.

9. Serveur
En informatique, un serveur est un élément de matériel ou de logiciel informatique
(programme informatique) qui fournit des fonctionnalités pour d’autres programmes ou
dispositifs, appelés "clients".cette architecture est appeléé le modèle client-serveur. Les
serveurs peuvent fournir diverses fonctionnalités, souvent appelees "services", telles
que le partage de donnees ou de ressources entre plusieurs clients.

10.Adresse IP
Une adresse de protocole Internet (adresse IP) est une étiquette numérique telle que
192.168.1.1 qui est connectée à un réseau informatique qui utilise le protocole Internet
pour la communication. Une adresse IP remplit deux fonctions principales :
l’identification de l’interface réseau et l’adressage de localisation.

11.Adresse MAC
Une adresse de contrôle d’accès aux medias ("Media Access Control address (address
MAC)") est un identifiant unique attribué à un contrôler d’interface réseau (NIC) pour
être utilise comme adresse réseau dans les communications au sein d’un segment de
réseau. Cette utilisation est courante dans la plupart des technologies réseau IEEE 802, y
compris Ethernet, Wi-Fi et Bluetooth, les adresses MAC sont utilisées dans la sous-
couche de protocole de contrôle d’accès moyen de la couche de liaison de données.

12.Localhost
Localhost (hôte local), c’est un service fourni par un ordinateur connecte à un réseau
(Wi-Fi) liée avec l’internet. Ce service est permettre à divers périphériques (Ordinateurs,
Smartphones, Tablettes …) d’accéder à des fichiers sur le réseau (Wi-Fi), mais il n’est pas
accessible depuis l’extérieur du réseau (Wi-Fi). Contrairement à un host (hôte),
accessible de n’importe où dans le monde via internet.

VIII. Conclusion
Utilisant la page WEB pour contrôler a distance via Internet, cette page se caractérise
par le fait qu’elle fonctionne sur l’ordinateur et au smartphones. Au contraire, vous
devez dévleopper deux applications, une application pour le smartphone et une
application pour l’ordinateur.

19
Chapitre II : La partie matérielle

I. Introduction

On va parlé dans ce chapitre sur les matérielles utilise dans ce projets, et les
bibliothèques, les classes et les fonctions dont nous aurons besoin.

II. Arduino UNO

La carte Arduino UNO est une carte programmable, C'est la plus simple et la plus économique
carte à microcontrôleur d'Arduino. Des connecteurs situés sur les bords extérieurs du circuit imprimé
permettent d'enficher une série de modules complémentaires.

La carte Arduino UNO

1. Introduction
Le mot "UNO" signifie "un" en italien et a été choisi pour marquer la sortie initiale
d’Arduino Software.
La carte Arduino Uno est une carte de microcontrôleur open sources basée sur le
microcontrôleur Microchip ATmega328P, est une carte programmable, et développée
par Arduino.cc.
Parmi les langues de programmation de cette carte : Langage C
Pour programme cette carte, tu as besoin l’application ARDUINO IDE, un fichier des
codes dans cette application est constitué par trois partie, première partie est la partie
des définitions (bibliothèques, variables ….), deuxième partie est la fonction setup(),
cette fonction est appelée au démarrage d'une esquisse. Utilisez-le pour initialiser des
variables, épingler des modes, commencer à utiliser des bibliothèques, etc. La fonction
setup() ne s'exécutera qu'une seule fois, après chaque mise sous tension ou

20
 réinitialisation de la carte Arduino., troisième partie est Après avoir créé une fonction
setup(), qui initialise et définit les valeurs initiales, la fonction loop() fait exactement ce
que son nom suggère, et boucle consécutivement, permettant à votre programme de
changer et de répondre. Utilisez-le pour contrôler activement la carte Arduino.

2. Spécifications techniques

Les caractéristiques de la carte Arduino UNO.

Tension de fonctionnement 5 Volts
Tension d’entrée 7 à 20 Volts
14 broches (dont 6 peuvent fournir une sortie
Broches d’E/S numériques
PWM)
Epingles PWM Les broches 3, 5, 6, 9, 10 et 11
Broches d’entrée analogiques 6 broches
Vitesse d’horloge 16 MHz
Courant continu par broche d’E/S 20 mA
Courant continu par broche de 3,3 V 50mA
Mémoire flash 32 Ko dont 0,5 Ko utilisé parbootloader
SRAM 2 KB
EEPROM 1 KB
UART 1
I2C 1
SPI 1

Les caractéristiques de la carte Arduino UNO

3. Les fonctions
Il y a plusieurs bibliothèques et beaucoup des fonctions, on définit seulement les
fonctions qui utilisée dans ce projet.

 Fonction pinMode(pin, mode)

Configure la branche (the pin) spécifiée pour qu’elle se comporte comme INPUT (une
entrée) ou OUTPUT (une sortie).

 Fonction digitalWrite (pin, value)

Ecrivez une valeur HIGH ou LOW sur une branche numérique.

21
 Si la branche ( the pin) a été configurée en OUTPUT (sortie) avec pinMode(pin, mode),
sa tension sera définie sur la valeur correspondante : 5v (ou 3.3V) pour HIGH, 0V (mise a
la terre) pour LOW.

 delay(ms)
Met le programme en pause pendant la durée (en millisecondes) spécifiée comme
paramètre.

 analogWrite(pin, value)
PMW signifie Pulse Width Modulation et c’est une technique utilisée pour contrôler la
luminosité de la LED, contrôler la vitesse du moteur à courant continu, contrôler un
servomoteur ou où vous devez obtenir une sortie analogique avec des moyens
numériques.
L'IDE Arduino a une fonction intégrée "analogWrite (pin, value)" qui peut être utilisée
pour générer un signal PWM. La fréquence de ce signal généré pour la plupart des
broches sera d'environ 490 Hz et nous pouvons donner la valeur de 0 à 255 en utilisant
cette fonction.
analogWrite(pin, 0) signifie un signal de rapport cyclique de 0 %.

Le période T

analogWrite(pin, 64) signifie un signal de rapport cyclique de 25 %.

Le période T

analogWrite(pin, 127) signifie un signal de rapport cyclique de 50 %.

Le période T

analogWrite(pin, 191) signifie un signal de rapport cyclique de 75 %.

Le période T

analogWrite(pin, 255) signifie un signal de rapport cyclique de 100 %.

Le période T

22
 Sur Arduino Uno, les broches PWM sont 3, 5, 6, 9, 10 et 11. La fréquence du signal
PWM sur les broches 5 et 6 sera d'environ 980Hz et sur les autres broches sera de
490Hz. Les broches PWM sont étiquetées avec le signe ~.

III. La carte Ethernet Shield W5100

1. Introduction
Le module Arduino Ethernet Shield permet à une carte Arduino UNO de se connecter à
internet. Basé sur le composant Wiznet 5100, il est équipé d'un support pour carte
mémoire SD, d'un connecteur RJ45, d'un bouton reset et de LEDs d'indication de statut,
et communique via le bus SPI.

2. Les bibliothèques
Permet la connexion réseau (locale et Internet) à l'aide de la carte ou du bouclier
Ethernet Arduino.
Avec cette bibliothèque, vous pouvez utiliser l'Ethernet Arduino (shield ou board) pour
vous connecter à Internet. La bibliothèque fournit à la fois des fonctionnalités client et
serveur. La bibliothèque vous permet de vous connecter à un réseau local également
avec DHCP et de résoudre DNS.
Pour utiliser cette bibliothèque
#include <SPI.h> #include <Ethernet.h>

23
 1. Usage
Cette bibliothèque est conçue pour fonctionner avec Arduino Ethernet Shield, Arduino
Ethernet Shield 2, Leonardo Ethernet et tout autre appareil basé sur
W5100/W5200/W5500. La bibliothèque permet à une carte Arduino de se connecter à
Internet. La carte peut servir soit de serveur acceptant les connexions entrantes, soit de
client effectuant les connexions sortantes. La bibliothèque prend en charge jusqu'à huit
(W5100 et les cartes avec <= 2 Ko de SRAM sont limitées à quatre) connexions
simultanées (entrantes, sortantes ou une combinaison).
La carte Arduino communique avec le shield via le bus SPI. C'est sur les broches
numériques 11, 12 et 13 sur l'Uno et les broches 50, 51 et 52 sur le Mega. Sur les deux
cartes, la broche 10 est utilisée comme SS. Sur le Mega, la broche matérielle SS, 53, n'est
pas utilisée pour sélectionner la puce du contrôleur Ethernet, mais elle doit être
conservée comme sortie ou l'interface SPI ne fonctionnera pas.

2. Client Class
a. EthernetClient()
Crée un client qui peut se connecter à une adresse IP et un port Internet spécifiés
(définis dans la fonction client.connect()).

b. Ethernet.begin()
initialise la bibliothèque Ethernet et les paramètres réseau.

Avec la version 1.0, la bibliothèque prend en charge DHCP. En utilisant

Ethernet.begin(MAC) avec la configuration réseau appropriée, le shield Ethernet
obtiendra automatiquement une adresse IP, ou vous pouvez entrer l’adresse IP de votre
choix avec Ethernet.begin(MAC, IP)

c. client.connect()
Se connecte à une adresse IP et un port spécifiés. La valeur de retour indique le succès
ou l'échec. Prend également en charge les recherches DNS lors de l'utilisation d'un nom
de domaine.
Syntaxe : client.connect(ip, port) ou client.connect(URL, port)

d. client.available()
Renvoie le nombre d'octets disponibles pour la lecture (c'est-à-dire la quantité de
données écrites sur le client par le serveur auquel il est connecté).

e. client.read()
Lit le prochain octet reçu du serveur auquel le client est connecté (après le dernier
appel à read()).

24
 f. client.stop()
Déconnectez-vous du serveur.

g. client.print()
Imprimer des données sur le serveur auquel un client est connecté. Imprime les
nombres sous la forme d'une séquence de chiffres, chacun étant un caractère ASCII (par
exemple, le nombre 123 est envoyé sous la forme des trois caractères " 1 ", " 2 ", " 3 ").
Syntaxe : client.print(données)

h. IPAddress()
Définit une adresse IP. Il peut être utilisé pour déclarer des adresses locales et
distantes.

IV. Les composants contrôlés

1. La lampe 220V
La lampe est un objet destiné à produire de la lumière,
généralement polychromatique

2. Relais

Relais est un interrupteur électromécanique, ce relais est typiquement

utilisé pour actionner des accessoires de tension élevé, en DC ou AC. Sur
le bornier à vis, vous raccorderez l'accessoire ou équipement de haute
tension. Au centre des 3 bornes à vis se trouve le commun

On alimente le circuit par 5V, et on

branche GND vers GND.
Si (I/O PIN μC est HIGH) alors COM et NO
sont fermé, et COM avec NC sont ouvert
Sinon Si ((I/O PIN μC est LOW) alors COM et
NC sont fermé, et COM avec NO sont ouvert

Schéma de relais 1 Channel 5V courant continu

3. Le capteur DHT11
1. Introduction
Ce capteur de température et d'humidité fournit une sortie numérique pré-calibrée. Un
élément de capteur capacitif unique mesure l'humidité relative et la température est
25
mesurée par une thermistance à coefficient de température négatif (NTC). Il a une
excellente fiabilité et une stabilité à long terme. Veuillez noter que ce capteur ne
fonctionnera pas pour des températures inférieures à 0 degré.

VCC
OUT NCGND

Capteur DHT11

Le capteur DHT11 facilement mesuré des humidités relatives entre 20 % et 90 %, avec

une précision de 5 %.
Le capteur DHT11 facilement mesuré des températures relatives entre 0 °C et 50 °C,
avec une précision de 2 °C.
VCC est alimentation de 5V, GND est mise à la terre, OUT est pour sortie de données et
NC est n’utilise pas.

2. La bibliothèque
La bibliothèque : "DHT.h"
Bibliothèque Arduino pour DHT11, DHT22, etc. Capteur de température et d'humidité
DHT dht(pin, DHT11) :
dht : Définition de la branche pour lire les données, et DHT11 est le type de senseur
DHT.
dht.readTemperature() : qui renvoient la valeur de la température
dht.readHumidity() : qui renvoient la valeur d’humidité

4. Le Moteur

Est un moteur de nom "Moteur 130", ce

moteur est fonctionne entre 3 et 6V, la
vitesse minimal est 5000 RPM pour
alimentation de 3V, et la vitesse maximale
est 10000 RPM pour l’alimentation de 6V.
Moteur 130 courant continu

26
Voltage : 3–6V Vitesse : 5000 RPM ( 3 V ) et 10000 RPM ( 6 V )
Courant : 0,3 A Poids : 14 g

IV. Schéma de montage

Schéma de montage est le schéma qui nous utilisons pour le contrôle de la lampe et
de la vitesse, et pour obtenir la valeur de la température et la valeur d’humidité.
On liée le circuit de la lampe avec l’Arduino UNO, et la circuit de moteur
On utilise relais 1 channel avec la lampe comme un interrupteur électromécanique
pour contrôler la lampe à travers la broche 7 de l’’Arduino UNO, Si la broche 7 est de
mode OUTPUT et de valeur HIGH alors la lampe est allumée, sinon si la broche 7 est de
mode OUTPUT et de valeur LOW alors la lampe est éteindre.
On utilise le moteur dans le circuit H_Bridge pour contrôler le sens de la rotation du
moteur, et on utilise les broche 5 et 6 pour générer une onde rectangulaire stable du
rapport cyclique spécifie, c-a-d. Contrôler la tension sortant de la broche, et cette
tension est comprise entre 0 et 5V, Si la broche 6 est de mode OUTPUT et de valeur zéro
alors le transistor 4 est équivalent à un fil ouvert et la broche 4 est de mode OUTPUT et de
valeur LOW alors le transistor 2 est équivalent à un fil ouvert et la broche 2 est de mode
OUTPUT est de valeur HIGH alors le transistor 3 est équivalent à un fil fermé et la broche 5
est de mode OUTPUT et de valeur entre 0 et 255 alors Nous contrôlons donc la vitesse du
moteur à travers la valeur qui sort de la broche 5.
Si la broche 5 sort une valeur a entre 0 et 255, alors la transistor permet à un
��
tension égal ��� volts de passer dans le moteur, c’est-à-dire. La rotation est dans le sens
direct dans le cas de a ≠ 0.
On utilisé la broche 8 pour obtenir la valeur de la température et la valeurs
d’humidité du capteur DHT11 de la température d’humidité.

Schéma des circuits liée avec l’Arduino UNO

27
 On branche la carte Ethernet Shield W5100 avec l’Arduino UNO du schéma
précédent, Nous obtenons le Schéma ci-dessous.

Schéma circuit d’Arduino liee avec la carte Ethernet Shield W5100

V. Conclusion
Grâce à ce chapitre, nous avons appris les matérielles que nous utiliserons dans ce
projet, et nous avons appris les outils de ces matérielles.

28
Chapitre III : La partie logicielle

I. Introduction

Dans ce chapitre, nous parlerons sur des fichiers que nous avons utilisés pour la page
de contrôl, et le code pour l’Arduino IDE, et les fichiers extérieur.

II. La base de données

On utilisée l’application XAMPP pour obtenue un serveur, pour crée une base de
données sur localhost.
On crée une base de données de nom ethernet, et on crée un tableau de nom element
dans la base de données ethernet.
Le tableau element initialement est sous la forme suivante.

Id nom Valeur

1 lampe 0

2 vitesse 0

3 temperature 0

4 humidite 0

III. Le site WEB comme plate-forme de contrôle

On utilise le site comme un page de contrôle ou bien plate-forme de contrôle, la page

est constitue par les balises HTML et des instructions PHP et JavaScript, et les fichiers
extérieur pour transmission et réception des données.

La page WEB dans le navigateur sur L’ordinateur

La page WEB dans le navigateur
sur le mobile
29
 1. La page de contrôle
1. Le Code HTML & PHP & JavaScript
C’est la page principale, c’est la page de contrôle, c’est page forme par les balises HTML
et les instructions PHP et JavaScript, et c’est page est liée avec plusieurs fichiers externe,
les fichiers externe sont fonctions.php et style.css et bootstrap.css
On utilisant JavaScript pour l’affichage du niveau de la vitesse dans la page avant de
l’envoie à la fonction miseAJour(vitesse, valeur) qui est dans le serveur, pour mise à
jour la valeur de la vitesse dans la base de données.
1. <?php include 'fonctions.php';?>
2. <!DOCTYPE html>
3. <html lang="fr">
4. <head>
5. <meta charset="UTF-8">
6. <meta http-equiv="refresh" content="0">
7. <title>Contrôle à distance via internet</title>
8. <link rel="stylesheet" href="style.css">
9. <link rel="stylesheet" href="bootstrap.css">
10. </head>
11. <body>
12. <div class="cont">
13. <pre>
14. Université Sultan Moulay Slimane
15. Faculté Polydisciplinaire
16. Béni Mellal
17. </pre>
18. <div class="Gtit"> <i><bold>PFE</bold> SMP-ELECTRONIQUE </i></div>
19. <div class="tit">La lampe est
20. <?php if(apporterValeur("lampe")==0){echo "OFF" ;}else {echo "ON" ;}?>
21. </div>
22. <form action="" method="POST">
23. <button class="btn" type="submit" name="led" value="1">ON</button>
24. <button class="btn"type="submit" name="led" value="0">OFF</button>
25. </form>
26. <div class="tit">La vitesse est
27. <?php
28. if(apporterValeur("vitesse")<0){
29. echo "<bstyle=\"color:BLACK;\">".(apporterValeur("vitesse")*(-1))."RPM</b> sens
30. inverse";
31. }else{
32. echo "<b style=\"color:BLACK;\">".apporterValeur("vitesse")."RPM</b> sens direct";
33. }
34. ?>
35.
36. </div>
37. <form action="" method="POST">
38. <input type="range" name="vitesse" min="-10000" max="10000" step="100" value="0"

30
39. class="slider" id="myRange">
40. <span id="demo"></span><br>
41. <input class="btn" type="submit">
42. <script>
43. var slider = document.getElementById("myRange");
44. var output = document.getElementById("demo");
45. output.innerHTML = slider.value;
46. slider.oninput = function() {
47. if(slider.value > 0){
48. output.innerHTML = this.value + " RPM sens direct";
49. }else{
50. output.innerHTML = this.value*(-1) + " RPM sens inverse";
51. }
52. }
53. </script>
54. </form>
55. <div class="table">
56. <table>
57. <tr>
58. <td>La température</td>
59. <td>L'humidité</td>
60. </tr>
61. <tr>
62. <td><?php echo apporterValeur("temperature"); ?> ^°C</td>
63. <td><?php echo apporterValeur("humidite"); ?> ^%</</td>
64. </tr>
65. </table>
66. </div><br><br><br><br><br><footer>Copy right &copy; MOURCHID FOUAD</footer>
67. </div>
68. <?php
69. if(isset($_POST['led'])){
70. mettreAJour("led", $_POST['led']);
71. header("Refresh:0");}
72. if(isset($_POST['vitesse'])){
73. mettreAJour("vitesse", $_POST['vitesse']);
74. header("Refresh:0");}?>
75. </body></html>

2. Les fichiers externe

Les fichiers internes sont des fichiers a l’exterieur de la fichier index.php, mais il peut
être mis en œuvre par le biais du fichiers principale.

 Fichier : fonctions.php
Ce fichier contient la définition de deux fonctions PHP, l’une pour mettre à jour les
données de la base de données, et l’autre pour apporter les données de la base de
données.

31
 La fonction de mise à jour les données est appelé miseAjour(nom, valeur) ; allez dans
la base de données, et changez la valeur du nom en nouvelle valeur, et la fonction pour
apporter les données est appelé apporterValeur(nom) ; apporter la valeur du nom
dans la base de données.

1. <?php
2. function aporterValeur($nom){
3.
4. include 'connexion.php';
5.
6. $sql = "SELECT valeur FROM element WHERE nom='$nom'";
7. $result = mysqli_query($conn, $sql);
8. if (mysqli_num_rows($result) > 0) {
9. // écrire la valeur
10. while($row = mysqli_fetch_assoc($result)) {
11. return $row["valeur"];
12. }
13. } else {
14. return 0 ;
15. }
16. $conn->close();
17.}
18.// mise à jour les données
19.function miseAJour($nom, $valeur){
20.
21. include 'connexion.php';
22.
23. $sql2 = "UPDATE element SET valeur='$valeur' WHERE nom='$nom'";
24. if ($conn->query($sql2) === TRUE) {
25. return 1;
26. } else {
27. return 0;
28. }
29. // close connection
30. $conn->close();
31.} ?>

 Fichier : connexion.php
On utilisée ce fichier pour crée une liaison entre le serveur et la base de données, pour
apporter ou mise a jour les données dans la base de donnes

2. <?php
3. $servername = "localhost";
4. $username = "root";
5. $password = "";
6. $dbname = "ethernet";
7. // Create connection
8. $conn = new mysqli($servername, $username, $password, $dbname);

32
 9. // Check connection
10. if ($conn->connect_error) {
11. die("Connection failed: " . $conn->connect_error);
12. }
13. ?>

 Fichiers : style.css et bootstrap.css

Les fichiers style.css et bootstrap.css sont des fichiers de désigne de la page.
 Le fichier style.css :
1. .cont{ position: absolute; left: 2.5%; top: 0%; width: 95%;text-align: center;}
2. .table{ position: relative; padding-top: 7px; left: 2.5%; top: 0%; width: 100%;
3. text-align: center;}
4. .btn{ background-color: grey; border: none; color: white; padding: 15px 32px;
5. Text-align: center; text-decoration: none; display: inline-block; font-size: 16px;
6. margin: 4px 2px; cursor: pointer; border-radius: 30px; }
7. .btn:hover { background-color: #555; }
8. .tit {background: dodgerblue;color: white;padding: 7px;font-size: 23px;
9. margin: 30px 0 3px 0;}
10. #btnRed {background: tomato;}
11. .tempVal{background: gray;color: white;padding: 7px;font-size: 23px;
12. margin: 5px 0 3px 0;}
13. .Gtit{background: #d7d7d7;color: black;padding: 7px;font-size: 27px;
14. margin: 5px 0 3px 0;}
15. footer{background-color: black;color: aliceblue;height: 21px;
16. text-align: center;padding: 5px;}
17. td { width: 47.5%; text-align: center;}
18. tr { background: dodgerblue; color: white; font-size: 23px;}
19. table {width: 95%;}

 Le fichier bootstrap.css :
1. .slider { -webkit-appearance: none; width: 50%; height: 15px;
2. border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7;
3. -webkit-transition: .2s; transition: opacity .2s;}
4. .slider:hover {opacity: 1;}
5. .slider::-webkit-slider-thumb {-webkit-appearance: none;
6. appearance: none;width: 25px;height: 25px;border-radius: 50%;
7. background: #04AA6D;cursor: pointer;}
8. .slider::-moz-range-thumb {width: 25px;height: 25px;border-radius: 50%;
9. background: #04AA6D; cursor: pointer;}

IV. Le programme pour l’ARDUINO

1. Les fichiers PHP pour l’ARDUINO
 Fichier : mettreAJourValeur.php
L’ARDUINO utilisé ce fichier pour mettre à jour les valeurs de la température et de la
humidité du tableau element.

33
 2. <?php
3. function mettreAJour($nom, $valeur){
4.
5. include 'connexion.php';
6.
7. $sql2 = "UPDATE element SET valeur='$valeur' WHERE nom='$nom'";
8. if ($conn->query($sql2) === TRUE) {
9. //echo "Record updated successfully";
10. return "Enregistrement mis à jour avec succès";
11. } else {
12. echo "Error updating record: ". $conn->error;
13. return 0;
14. }
15. // close connection
16. $conn->close();
17. }
18. mettreAJour("temperature", $_GET['temperature']);
19. mettreAJour("humidite", $_GET['humidite']);
20. ?>

 Fichier : apporterValeur.php
L’ARDUINO est utilisé ce fichier pour apporte les valeurs de la lampe et de la vitesse du
tableau de nom element.
1. <?php
2.
3. include 'connexion.php';
4.
5. $sql = "SELECT valeur FROM element WHERE id=$id";
6. $result = $conn->query($sql);
7.
8. if ($result->num_rows > 0) {
9. // output data of each row
10. while($row = $result->fetch_assoc()) {
11. $nbr = $row["valeur"] ;
12. }
13. } else {
14. echo "0 results";
15. }
16. echo "valeur=" . $nbr.";";
17. $conn->close();
18. ?>

34
 2. Le programme de l’ARDUINO IDE
Dans le programme de l’ARDUINO IDE, on utilise plusieurs fonctions, pour faciliter la
lire du programme.
Premièrement, on définies les bibliothèques qui déjà on a vue dans la chapitre derniers.
#include "DHT.h"
#include <SPI.h>
#include <Ethernet.h>

#define DHTPIN 8 // pour DHT11

#define DHTTYPE DHT11

DHT dht(DHTPIN, DHTTYPE);

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};

//IPAddress ip(192, 168, 8, 103);

EthernetClient client;

char server[] = "192.168.8.100";

int port = 80 ;

float temperature;
float humidite;
String valeur;
String chaineDeCaract;
boolean fin = false;

void setup() {

Serial.begin(9600);
Serial.println("Serial connect.");

if (Ethernet.begin(mac) == 0) {
Serial.println("Failed to configure Ethernet");
for(;;)
;
}

Serial.print("Adresse IP : ");
Serial.println(Ethernet.localIP());

dht.begin();
delay(1000);

pinMode(7, OUTPUT);

35
 pinMode(4, OUTPUT);
pinMode(2, OUTPUT);

void loop() {

temperature = dht.readTemperature();
humidite = dht.readHumidity();
Serial.print("temperature : ");
Serial.print(temperature);
Serial.print(" Humidite : ");
Serial.println(humidite);
envoyerDonnee(temperature, humidite);
delay(300);
lampeStat(apporterDonnee("lampe"));
vitesseValeur(apporterDonnee("vitesse"));

void envoyerDonnee(int temp, int hum)

{
if (client.connect(server, port)) {
// HTTP request:
client.print("GET /pfe/arduinoFichiers/mettreAJourValeur.php?temperature=");
client.print(temp);
client.print("&humidite=");
client.print(hum);

client.print(" "); //SPACE BEFORE HTTP/1.1

client.print("HTTP/1.1");
client.println();
client.println("Host: 192.168.8.100");
client.println("Connection: close");
client.println();
Serial.println("temp et hum sont a ete envoyee");

} else {
Serial.println("Echec de la connexion au serveur");
client.stop();
}
delay(300);
}

String apporterDonnee(String nom) {

int id ;
if (nom == "lampe") {
id = 1;
} else if (nom == "vitesse") {

36
 id = 2;
}

if (client.connect(server, 80)) {
client.print("GET /pfe/arduinoFichiers/ApporterValeur.php?id=");
client.print(id);
client.println(" HTTP/1.1");
client.println("Host: 192.168.8.100");
client.println("User-Agent: arduino-ethernet");
client.println("Connection: close");
client.println();
}
else {
Serial.println("Echec de la connexion au serveur");
client.stop();
}
delay(300);

while (client.available()) {
char c = client.read();
chaineDeCaract += c;
fin = true;
}
if (fin) {
int longitud = chaineDeCaract.length();
int posicion = chaineDeCaract.indexOf("valeur=");
valeur = "";
for (int i = posicion + 7; i < longitud; i ++) {
if (chaineDeCaract[i] == ';') i = longitud;
else valeur += chaineDeCaract[i];
}
fin = false;

client.stop();
}

chaineDeCaract = "";
return valeur;
}

void lampeStat(String stat) {

if (stat == "1") {
digitalWrite(7, LOW);
Serial.println("lampe : ON");
} else if (stat == "0") {
digitalWrite(7, HIGH);
Serial.println("lampe : OFF");

37
 }
}

void vitesseValeur(String RPM) {

int RPMInt = RPM.toInt();
if (RPMInt == 0 && RPM == "0") {

analogWrite(5, 0);
analogWrite(6, 0);
digitalWrite(2, LOW);
digitalWrite(4, HIGH);
Serial.println("vitesse : NULLE");

} else if (RPMInt < 0) {

analogWrite(5, 0);
digitalWrite(2, LOW);
delay(1000);
digitalWrite(4, HIGH);

RPMInt *= -1 ;
double voltage = (5 * RPMInt) / (10000);
int analog = (255 * voltage) / 5;
analogWrite(6, analog);

Serial.print("vitesse : ");
Serial.print(RPMInt);
Serial.println(" RPM dans le sens inverse");

} else {
analogWrite(6, 0);
digitalWrite(4, LOW);
delay(1000);
digitalWrite(2, HIGH);

double voltage = (5 * RPMInt) / (10000);

int analog = (255 * voltage) / 5;

analogWrite(5, analog);

Serial.print("vitesse : ");
Serial.print(RPMInt);
Serial.println(" RPM dans le sens direct");
}
}

V. Conclusion
Ces fichiers peuvent être programmés pour ajouter d’autres éléments pour le contrôle
à distance via Internet.

38
Chapitre IV : Réalisation du projet

I. Introduction
Dans ce chapitre, nous parlerons de la façon de créer la base de données pour ce projet, et sur
la façon de télécharger des fichiers sur localhost, et sur la façon d’accéder à la page de contrôle
dans localhost, et nous parlerons de la façon d’obtenir un host pour les fichiers dans localhost.

II. Réalisation du montage

1. Circuit H-bridge
Le circuit H_Bridge utilise pour varier le sens de la rotation du moteur, nous utilisons les
broches 5 et 6 de l’Arduino UNO pour contrôler la vitesse du moteur.

6V 6V

GND GND

Le circuit H_Bridge Le circuit H_Bridge avec les lignes communes

En rouge : les collecteurs, en bleu : l’émetteurs, en vert : les bases et en orange, il se

connecte l’émetteurs avec les collecteurs.

2. Circuit pour le capteur DHT11

Le circuit du capteur de la température d’humidité DHT11 est constitue à une

résistance de 5KOhm. Arduino UNO lit la valeur de la température et d’humidité à
travers le fil vert.

39
Le circuit de capteur DHT11 avec les lignes communes Le circuit de capteur DHT11

En rouge : 5V, en bleu : GND, en vert sortie de données et en orange, il n’est pas utilisé.

3. Circuit de la lampe.
La lampe est liée avec l’intercepteur électromécanique ou bien relais.

La lampe avec relais 1 Channel

Coupez un fil et reliée à relais 1 Channel, le circuit de relais a une tête qui peut être reliée
à une source de 220V, et a trois branches, deux branches de l’alimentation de relais, et
l’autre pour le contrôle.

La partie de bases tension de relais

La partie de haute tension de relais
40
 Relais 1 channel est a six broches, trois de la partie de bases tension, une broche VCC
pour l’alimentation de 5V, et une broche de GND, et l’autre broche pour contrôler ce
relais. Et trois pour la partie haute tension, COM est la broche commune, et NO (Normal
Open) normalement ouvert avec COM, et NC (Normal Close) fermeture normale avec
COM.

4. Le circuit final.

Selon schéma "Schéma circuit d’Arduino liee avec la carte Ethernet Shield W5100" et
les circuits qu’on déja vu, nous otenons le circuit suivant.

Schéma circuit d’Arduino liée avec la carte Ethernet Shield W5100

Avec l’alimentation de la lampe est 220V, et l’alimentation d’Arduino est 5V par le

cable USB ou cable DC jack, et l’alimentation du moteur est 5V de la broche de 5V
d’Arduino, et l’alimentation de DHT11 est 3.3V de la broche de 3.3V d’Arduino.

41
III. Configurer le serveur dans localhost

Pour obtenir le serveur local "localhost", on utilisée l’application XAMPP.

1. Démarrer le serveur avec l’application XAMPP

On utilise l’application XAMPP pour transformer l’ordinateur en serveur dans
localhost (hote local).

L’application XAMPP Début Apache et MySQL

2. L’adresse de serveur
L’adresse de serveur est l’adresse de l’ordinateur, pour connaitre
l’adresse de l’ordinateur, nous suivons les étapes suivantes.

Premier étape, vous appuyez sur l’icone

Windows dans le clavier et la bouton R dans le
même temps, donc la fenêtre suivants.

Deuxième étape, écrivez la commande suivante

ipconfig, et appuyez sur entrez.

Troisième étape, l’adresse IPv4 est l’adresse IP de l’ordinateur, c’est-à-

dire, l’adresse de serveur. si XAMPP est fonctionne de manière de la II.1

Configuration IP de Windows 42
 3. Création de la base de données
Ouvrez le navigateur et entrez le lien suivant : localhost/phpmyadmin/

D’après, appuyez sur entrée.

D’après, appuyez sur "Nouvelle base de données".

D’après, entrez le nom de la base de données "ethernet", et appuyez sur Crée.

D’après, entrez le nom du tableau "element", et le nombre des colonnes de ce tableau,

et appuyez sur Crée.

43
 D’après, entrez les titres des colonnes, avec les caractéristiques de chaque titre.
Titre "id" de type INT (entier) et crochez sur PRIMARY.
Titre "nom" de type VARCHAR (chaine de caractères) et écrivez le nombre maximal de
caractères des lignes de cette colonne.
Titre "valeur" de type VARCHAR (chaine de caractères) et écrivez le nombre maximal
de caractères des lignes de cette colonne.
Ensuite, appuyez sur "Enregistrer".

D’après, appuyez sur "SQL", et ajoutez les codes suivants pour remplir le tableau du nom
"element".

INSERT INTO `element`(`nom`, `valeur`) VALUES ('lampe','0');

INSERT INTO `element`(`nom`, `valeur`) VALUES ('vitesse','0');
INSERT INTO `element`(`nom`, `valeur`) VALUES ('temperature','0');
INSERT INTO `element`(`nom`, `valeur`) VALUES ('humidite','0');

Comme dans l’image ci-dessous.

44
Ensuite, appuyez sur "Exécuter", d’après la fenêtre suivante.

D’après, appuyez sur "element", pour afficher le tableau.

Alors jusqu’à maintenant la base de données de nom "ethernet" est créé, et dans cette
base de données, il y a un tableau de nom "element".
Le tableau est :

Le tableau dans la base de données

45
 4. Mettre les fichiers sur le serveur

Nous allons au dossier XAMPP, et d’après

ouvrir le dossier htdocs C:\xampp\htdocs, et puis
nous créons un dossier au nom "pfe".

Création de le dossier pfe

D’après, créer deux dossiers, premier dossier au
nom "arduinoFichiers" et autre dossier au nom "pageDeControle".

Création de les dossiers, arduinoFichiers et pageDeControle

D’après, ajoutez dans le dossier de nom "pageDeControle" les fichiers (index.php,

fonctions.php, connexion.php, style.css et bootstrap.css) que nous avons créés
précédemment.

Mettre les fichiers dans le dossier pageDeControle

Ensuite ajoutez dans le dossier de nom " arduinoFichiers " les fichiers
(apporterValeur.php, mettreAJourValeur.php et connexion.php) que nous avons créés
précédemment.

46
Mettre les fichiers dans le dossier arduinoFichiers
 D’après, ouvrez le navigateur et entrez l’adresse du serveur sous forme
http://192.168.1.108/pfe/ pageDeControle /index.php pour ouvrir la page de contrôle.

La page de contrôle

IV. Transmission et réception des données partielle.

1. Transmission et réception des données entre la page WEB et la
base de données.
Premièrement, ouvrez la page de contrôle, et la page du tableau "element" qui est dans
la base de données "ethernet", et d’après varier l’état de la lampe et la valeur de la
vitesse.
Appuyez sur "ON", et choisissez une certaine vitesse, puis appuyez sur envoyer, Vous
devez remarquer le changement dans l’état de la lampe et la valeur de vitesse dans la
page de contrôle, et dans le tableau "element".

La page de contrôle avec variation de la vitesse et de l’état de la lampe

47
 Deuxièmement, ouvrez la page de contrôle, et la page du tableau "element" qui est
dans la base de données "ethernet", et d’après varier la valeur de la température et de
l’humidité dans le tableau "element", par exemple modifier la valeur de la température,
c.-à-d. appuyez sur "Editer".

Le tableau de la base de données avec variation de la vitesse et de l’état de la

lampe
D’après varier la valeur à 37, et appuyez sur "Exécuter".

Et la même pour varier la valeur d’humidité vers 29, ensuite allez à la page de contrôle
et actualisez cette page, et remarquez le changement des valeurs de température et
d’humidité dans la page de contrôle, et dans le tableau "element" qui est dans la base de
données "ethernet".

La page de contrôle avec variation de la vitesse et de l’état de la lampe et la température et l’humidité

48
 2. Transmission et réception des données entre l’Arduino et la base
de données dans localhost.
Premièrement, ajoutez le code de l’arduino dont nous avons parlé à la page 38 à
l’application Arduino IDE, et après avoir connecté arduino à l’ordinateur, et choisis le
port, et appuyez sur Vérifier et ensuite, appuyez sur Téléverser, et après liée
ETHERNET SHIELD W5100 avec ARDUINO UNO en parallèle, et branchez les circuits
partielles à l’ETHERNET SHIELD W5100.

le code Arduino IDE

Deuxièmement, remarquez dans le tableau "element", qui est dans la base de données
"ethernet", la variation de la valeur de la température et de l’humidite. Ensuite, modifiez
la valeur de la lampe vers 1, et la valeur de la vitesse de vers 10000, et remarquez dans
le montage l’allumage de la lampe et le travail du moteur.

V. Transmission et réception des données entre la page WEB et l’Arduino

dans localhost.

Ajoutez le code de l’arduino dont nous avons parlé à la page 38 à l’application Arduino
IDE, et après avoir connecté Arduino à l’ordinateur, et choisis le port, et appuyez sur
Vérifier et ensuite, appuyez sur Téléverser, et après liée ETHERNET SHIELD W5100
avec ARDUINO UNO en parallèle, et branchez les circuits partielles à l’ETHERNET
SHIELD W5100.
D’après, contrôlez dans la même réseau (Wi-Fi), l’état de la lampe et la valeur de la
vitesse par la page WEB via Internet, mais avec localhost.

49
VI. Transmission et réception des données entre la page WEB et l’Arduino
dans host.

Pour contrôler l’arduino n’importe où dans le monde via Internet, on utilisant

l’application ngrok.
Utilisez l’application ngrok pour copiez la page de contrôle et d’autres fichiers de
localhost vers local, c’est-à-dire contrôle depuis n’importe où dans le monde.
D’après, crée un compte sur le site ngrok, allez à la configuration et à l’installation
"setup & installation", et copier le lient dans la partie "Connect your account".

Notre compte dans le site ngrok

D’après, ouvrir l’application ngrok, comme sur les photos.

Sélectionnez l’application ngrok, et appuyez sur le Botton droite, et appuyez sur
"Exécuter en tant qu’administration".
D’après, la fenêtre suivante.

La fenêtre de l’application ngrok 50

 D’après, collez le lient que vous avez copié lorsque vous avez créé un compte ngrok.

La première commande dans l’application ngrok

D’après appuyez sur "entrez", et écrivez la commande suivant "ngrok http 80", et
appuyez sur "entrez".

La deuxième commande dans l’application ngrok

D’après, copiez le lien (host) qui existe avant de "Forwarding", coloré en blanc dans
l’image suivante.

51
 Le lien host de localhost

D’après, allez dans le navigateur et collez le lien, et ajoutez à ce lien la partie "/
pfe/pageDeControle/index.php", comme sur la photo suivante.

Ensuite, appuyez sur "entrez".

D’après, appuyez sur "Visit Site", et puis la page de contrôle appairait comme suit.

52
 La page de contrôle dans host

Cette page de contrôle est fonctionné tant que l’ordinateur exécutant le localhost
(l’hôte local) est connecté à Internet.

VII. Conclusion

Cette approche permet de construire un réseau d’appareils connectés et de

programmer une page de contrôle au besoin.

Et il se caractérise par une réponse rapide, par exemple dans cette réalisation,
l’Arduino est envoyé la valeur de la température et d’humidité, et il est apporté la valeur
de la lampe et de la vitesse, dans une répétition de la fonction loop(), avec décalage
horaire de 3s entre l’envoi de la valeur de la température et de la valeur d’humidité et
l’envoi suivant, et avec un décalage de 1s entre l’envoi et la réception des données, ou
bien entre la réception et la réception suivant des données.

53
 Conclusion générale

Notre objectif dans cette recherche était de parvenir à un canal de

communication entre la page WEB et l’Arduino, afin de contrôler Arduino
par la page WEB via Internet, ainsi que d’apporter des données d’Arduino
via Internet.

Nous contrôlons la vitesse et le sens de rotation du moteur par la page

WEB, et toutes les trois secondes, la valeur de la température et la valeur
d’humidité atteignent.

L’une des principales choses pour la développement de cette recherche

est d’avoir un serveur sur Internet caractérisé par la vitesse de traitement
de l’information.

Cette recherche peut être développée et son temps de réponse peut être
réduit, et peut être utilisé pour contrôler les drones, les grandes pompes,
les gros véhicules et divers appareils électriques et systèmes mécaniques... .

54
Bibliographie

"ARDUINO REFERNECE", "ARDUINO BLOG" et "ARDUINO DOCS" https://f arduino.cc

W3SCHOOL "HTML", "CSS", "JAVASCRIPT"," PHP", "MySQL" et "SQL"https://w3schools.com
OUALI ALAMI MOHAMMED, "La Conception d’une prise connectée basée sur la technologie
d’IoT" https://www.electronique-mixte.fr/wp-content/uploads/2018/07/PFE-
Rapport-de-projet-de-fin-d%E2%80%99%C3%A9tude-39-1.pdf
Enrique Gómez , "De MySQL a Arduino, leer datos de la base de datos"
https://rinconingenieril.es
Embedotronics Technologies "Sending Temperature and Humidity Data to MySQL
Server(PHPMYADMIN) using Arduino" https://youtu.be/wSSTSGYk-m0
Wikipedia https://fr.wikipedia.org/
"Datashet DHT11" https://www.mouser.com/datasheet/2/758/DHT11-Technical-
Data-Sheet-Translated-Version-1143054.pdf
Seeed Wiki https://wiki.seeedstudio.com/

55