PFE Finale

See discussions, stats, and author profiles for this publication at: https://www.researchgate.
net/publication/354573162
Projet de Fin d'Études pour l'obtention du Diplôme d'Ingénieur d'Etat en

Télécommunications Conception et Réalisation d'une Application QR code au
service de l'INTTIC
Thesis · September 2021
CITATIONS READS
0 104
2 authors:
Abdelwadoud Achouche Mohammed Chellal

Institut National des Télécommunications et des Technologies de l'Information et…
2 PUBLICATIONS 0 CITATIONS
3 PUBLICATIONS 0 CITATIONS
SEE PROFILE
SEE PROFILE
Some of the authors of this publication are also working on these related projects:
Conception et Réalisation d'une Application QR code au service de l'INTTIC View project
All content following this page was uploaded by Abdelwadoud Achouche on 14 September 2021.
The user has requested enhancement of the downloaded file.

Projet de Fin d’Études pour l’obtention du Diplôme d’Ingénieur
d’Etat en Télécommunications
Thème
Conception et Réalisation d'une Application
QR code au service de l'INTTIC
Présenté Par :
 CHELLAL Mohammed.
 ACHOUCHE Abdelwadoud.
Encadrée Par :
 Dr. Ghizlène SOULIMANE MERAD.

Soutenu devant le jury :
 Pr. Belkacem KOUNINEF Président

 Dr. Mohamed DJELTI Examinateur
Promotion : IGE 41
Année Universitaire : 2020 - 2021
Résumé
Les codes QR « Quick Response » ou codes à réponse rapide semblent apparaître

partout de nos jours. Nous pouvons les voir sur des affiches, des publicités dans des
magazines, des sites Web, des produits… etc. L'utilisation des codes QR permet de connecter
numériquement les consommateurs à l’internet via des téléphones portables, car les
téléphones portables sont devenus une nécessité fondamentale pour tout le monde.
Dans ce mémoire, nous présentons une méthodologie pour la mise en œuvre de la

technologie de QR code au niveau de l’institut où nous allons créer des codes QR
« Générateur » par lesquels les utilisateurs (agents de l’administration) entrent les
informations d’authentification dans un navigateur Web et obtiennent le code QR généré pour
chaque étudiant. Nous avons conçu aussi un lecteur code QR où les utilisateurs (les agents qui
travaillent dans le restaurant) peuvent lire le code QR avec leur téléphones portables et obtenir
les informations liées aux étudiants avec le nombre de tentatives atteints.
Nous avons utilisé le langage JavaScript pour l’encodage et le décodage des

informations des utilisateurs, le langage HTML & CSS pour la conception de l’interface
graphique de notre application et le PHP pour la connexion avec la base de données et pour
l’envoi automatique des emails aux étudiants.
La bibliothèque populaire « QRCode for Javascript library » nous a aidés pour

développer une interface utilisateur sur le navigateur Web et encoder les données dans un
symbole de code QR.
Mots-clés : QR code, encodage, décodage, code QR générateur, lecteur code QR, base de
donnée, interface graphique, bibliothèque, navigateur web.
i
Abstract
“ QR codes ” or “ Quick Response codes ” seem to appear everywhere these days. We

can see them on posters, magazine ads, websites and products and so on. Using the QR codes
allows consumers to connect digitally to the internet via mobile phones since the mobile
phones have become a basic necessity thing of everyone.
In our project, we present a methodology for the implementation of the QR code

technology at the institute where we will create QR codes “ QR code generator “ by which the
users (administrative workers) enter the authentication information into a web browser and
get the QR code generated for each student. We have also made a QR code reader where users
(restaurant workers) can read the QR code with their mobile phones and get the stored
information related to the students with the number of attempts reached.
We used JavaScript for encoding and decoding user information, HTML & CSS for
the design of our application's GUI, and PHP for connecting to the database.
The popular library “ QRCode for Javascript “ helped us to develop a user interface on
the web browser and encode the data in a QR code symbol.
Keywords : QR code, encoding, decoding, QR code generator, QR code reader, database,

GUI, library, web browser.
ii
Table des matières
Résumé ................................................................................................................... i
Abstract.................................................................................................................. ii
Table des matières ................................................................................................ iii
Dédicace ................................................................................................................ v
Remerciements ..................................................................................................... vi
Liste des figures................................................................................................... vii
Liste des tableaux ................................................................................................. ix
Liste des acronymes .............................................................................................. x
Introduction générale............................................................................................. 1
Chapitre I : Généralité sur le code QR. ................................................................. 3
1.1. Introduction ................................................................................................ 3
1.2. Historique ................................................................................................... 3
1.3. Définition d’un code QR ............................................................................ 4
1.4. Description d’un code QR.......................................................................... 5
1.5. Structure d’un code QR.............................................................................. 7
1.6. Principes de fonctionnement .................................................................... 10
1.7. Domaines d’utilisation des codes QR ...................................................... 13
1.8. Conclusion................................................................................................ 19
Chapitre II : Aspect technique des codes QR...................................................... 21
2.1. Introduction .............................................................................................. 21
2.2. Elaboration d’un code QR........................................................................ 21
2.2.1. L'analyse des données ........................................................................ 21
2.2.2. Codage de donnée .............................................................................. 23
2.2.3. Codage de correction d'erreur ............................................................ 26
2.2.4. Structure finale d’un message ............................................................ 31
2.2.5. Placement du module dans la matrice................................................ 36
2.2.6. Placer les bits de données .................................................................. 42
iii
2.3. Conclusion................................................................................................ 45
Chapitre III : Conception et réalisation de l’application. .................................... 48
3.1. Introduction .............................................................................................. 48
3.2. Analyse des besoins ................................................................................. 48
3.2.1. Besoins fonctionnels .......................................................................... 48
3.2.2. Besoins non fonctionnels ................................................................... 48
3.3. Spécification des Besoins......................................................................... 49
3.4. Cas d’utilisation ....................................................................................... 49
3.5. Conception de la base de données............................................................ 49
3.6. Environnement de travail ......................................................................... 50
3.6.1. Environnement matériel ..................................................................... 50
3.6.2. Environnement logiciel ...................................................................... 50
3.7. Architecture physique et technique .......................................................... 52
3.8. Interface de l’application ......................................................................... 52
3.9. Conclusion................................................................................................ 59
Conclusion générale ............................................................................................ 61
Bibliographie ....................................................................................................... 62
Webographie ....................................................................................................... 62
iv
Dédicace
Tous d’abord, je tiens à remercier ALLAH, qui m’a aidé et donné la patience et le
courage durant cette longue année d’études.
Je dédie ce modeste travail à mes parents, mes frères : Bilal & Yacine et ma petite sœur
et toute la grande famille CHELLAL qui par leurs encouragements et leur patience, j’ai pu
surmonter tous les obstacles.
Je ne manquerais pas de dédier et dire un grand merci à qui ont contribué de près ou de
loin à l’élaboration de ce travail.
À tous ceux qui j’aime et qui m’aiment.
Mohammed CHELLAL
Je dédie ce modeste travail à :

Mes chers parents, qui ont tout fait pour ma réussite, de leurs soutiens, de leurs sacrifices et de
leurs conseils dans ma vie.
Mes frères et mes sœurs, qui sont toujours pour moi l’exemple de la persévérance, pour leurs
soutiens et encouragements.
Toute ma famille et tous mes amis.
Mon binôme Mohammed que je le souhaite de réussir le chemin de ses ambitions.
À tous ceux qui, par un mot, m’ont donné la force de continuer…
Abdelwadoud ACHOUCHE
v
Remerciements
Nous tenons à remercier avant tout « ALLAH » qui nous a accordé la santé, la possibilité
ainsi que la volonté d’entamer et de continuer nos études.
Nous remercions profondément notre encadreur Dr. GHIZLENE SOULIMANE MERAD

pour ses conseils avisés, et pour la qualité de son encadrement et sa disponibilité.
Nous remercions les membres du jury : Pr. Belkacem KOUNINEF et Dr. Mohammed
DJELTI, d’avoir accepté d’examiner et d’évaluer notre modeste travail.
Nous remercions tous ceux qui ont contribué de près ou de loin, pour leur soutien moral ou
matériel, dans la réalisation de notre projet.
Nous remercions chaleureusement nos parents et toutes nos familles (merci pour vos
encouragements permanents et pour votre confiance).
Et enfin, un remerciement particulier à tous étudiants de la promotion IGE 41, pour ces cinq
superbes années d’études en leur compagnie.
Nous leur souhaitons à tous une carrière réussie dans le domaine des TICs.
Abdelwadoud & Mohammed
vi
Liste des figures
Figure 1 : Exemple de code QR. .......................................................................... 4

Figure 2 : Le code QR sur 2 axes. ........................................................................ 5
Figure 3 : Evaluation de code QR. ....................................................................... 5
Figure 4 : Le code QR dans tous les sens. ........................................................... 6
Figure 5 : Les différentes versions du code QR. .................................................. 7
Figure 6 : La structure de code QR version 1. ..................................................... 7
Figure 7 : La structure de code QR version 2. ..................................................... 8
Figure 8 : La structure de code QR version 1 et 2. .............................................. 9
Figure 9 : La structure de code QR version 40. ................................................. 10
Figure 10 : Exemple d’un code de correction. ................................................... 11
Figure 11 : Autre exemple du code de correction. ............................................. 12
Figure 12 : Code QR dans les panneaux publicitaires. ...................................... 13
Figure 13 : Code QR dans les livres. ................................................................ 14
Figure 14 : Code QR sur un emballage produit. ................................................ 14
Figure 15 : Code QR pour un évènement. ......................................................... 15
Figure 16 : Code QR imprimés sur produit....................................................... 15
Figure 17 : Code QR pour renseigner visiteurs sur un musée. .......................... 16
Figure 18 : Code QR pour renseigner sur médicaments. ................................... 16
Figure 19 : Code QR raconte histoire de la ville de BORDEAUX. .................. 17
Figure 20 : Code QR renseigne sur les horaires de transport. ........................... 17
Figure 21 : Code QR pour faire authentification. .............................................. 18
Figure 22 : Les modèles (motif) d'un code QR. ................................................ 37
Figure 23 : Motif de recherché. .......................................................................... 38
Figure 24 : Motif de recherche pour version 1 et 18.......................................... 38
Figure 25 : Code QR après ajout des séparateurs. ............................................. 39
Figure 26 : Motif d'alignement........................................................................... 39
Figure 27 : Emplacement de motif d'alignement. .............................................. 40
Figure 28 : Emplacement de motif de synchronisation. .................................... 41
Figure 29 : Les zones réserves. .......................................................................... 42
Figure 30 : Les emplacements des zones réservées aux code QR de version 7 ou
plus. ..................................................................................................................... 42
Figure 31 : Placement des bits de données d'un code QR. ................................ 43
Figure 32 : Ordre de placement ascendant. ........................................................ 43
vii
Figure 33 : Le placement des bits dans la première colonne ascendante. ......... 44
Figure 34 : Placement vers le bas. ...................................................................... 44
Figure 35 : intersection avec le motif d'alignement. .......................................... 45
Figure 36 : Le saut des modèles de fonction. .................................................... 45
Figure 37 : Diagramme de cas d’utilisation. ...................................................... 49
Figure 38 : L’architecture physique « trois tiers » de l’application. .................. 52
Figure 39 : Page d’accueil de l’application. ....................................................... 53
Figure 40 : Générateur du code QR. .................................................................. 53
Figure 41 : Le code QR généré. ......................................................................... 54
Figure 42 : Réception d’un email. ...................................................................... 54
Figure 43 : Contenu de l’email reçu................................................................... 55
Figure 44 : Lecteur QR code. ............................................................................. 55
Figure 45 : Lecteur prêt à scanner le code QR. .................................................. 56
Figure 46 : Contenu du code QR scanné............................................................ 56
Figure 47 : Code QR est déjà scanné. ................................................................ 57
Figure 48 : Base de données............................................................................... 57
Figure 49 : Activation du paramètre d’accès à l’email. ..................................... 58
Figure 50 : Empêchement de l’envoi d’email par Google. ................................ 58
viii
Liste des tableaux
Tableau 1 : Capacité de stockage des données du code QR. ............................... 6

Tableau 2 : Representation binaire de chaque mode. ........................................ 22
Tableau 3 : les niveaux de correction d'erreurs. ................................................ 23
Tableau 4 : Les capacités de quelques versions de code QR............................. 24
Tableau 5 : Les indicateurs de mode pour chaque mode. .................................. 25
Tableau 6 : Le codage après le choix de mode. ................................................. 26
Tableau 7 : Nombre total de mots de code de données pour cette version et
niveau EC. ........................................................................................................... 27
Tableau 8 : division de code QR verison 5-Q en bloc. ...................................... 29
Tableau 9 : les mots de code de correction de données de chaque bloc les mots
de code de correction d'erreur générés. ............................................................... 33
Tableau 10 : Les mots de code de donnée de chaque bloc. ............................... 34
Tableau 11 : Description de la classe entité « etudiants »…………...……...…50
ix
Liste des acronymes
AIM : Association for Automatic Identification and Mobility.
AOC : Appellation d'Origine Contrôlée.
CE : Correction d’Erreur.
CEI : Commission Electro technique International.
CSS : Cascading Style Sheets.
ECT : Extended Channel Interpretation.
FNC1 : Function Code One.
GUI : Graphical User Interface.
HTML : Hyper Text Markup Language.
IDE : Integrated Development Environment.
ISO : International Organization for Standardization.
JIS : Japanese Institute of Standards.
MVC : Model Vue Controller.
PHP : Hypertext Preprocessor.
PLV : Point de Vente.
QR : Quick Response.
RAM : Random Access Memory.
UTF-8 : Universal Character Set Transformation Format - 8 bits.
VS Code : Visual Studio Code.
XAMPP : Multiplatform Apache MariaDB Php Perl.
x
INTRODUCTION
GENERALE
xi
Introduction générale
Le code QR, c'est-à-dire «Quick Response», est un code matriciel 2D conçu en tenant
compte de deux points, c'est-à-dire qu'il doit stocker une grande quantité de données par
rapport aux codes à barres 1D et qu'il doit être décodé à grande vitesse à l'aide de n'importe
quel appareil portable comme les téléphones. Le code QR offre une capacité de stockage de
données élevée, une numérisation rapide, une lisibilité omnidirectionnelle et de nombreux
autres avantages, notamment la correction des erreurs (afin que le code endommagé puisse
également être lu avec succès) et différents types de versions.
De nos jours, un code QR est appliqué dans différents flux d'applications liés au
marketing, à la sécurité, aux universitaires, etc. et gagne en popularité à un rythme très élevé.
Jour après jour, de plus en plus de personnes prennent conscience de cette technologie
et l'utilisent en conséquence.
La popularité du code QR augmente rapidement avec la croissance des utilisateurs de

smartphones et le code QR atteint donc rapidement des niveaux élevés d'acceptation dans le
monde entier.
L’objectif de ce PFE est la conception et la réalisation d’une application QR code au

service de l’INTTIC. Pour faire ça, nous avons donc réparti notre travail en trois chapitres. Le
premier chapitre aborde des généralités sur le QR code, le second chapitre présente l’aspect
technique des codes QR et le troisième chapitre traite la partie application où nous allons
présenter la conception et la réalisation de notre application.
1
Chapitre I :
Généralité sur le code

QR
2
Chapitre 1 : GENERALITE SUR LE CODE QR
Chapitre I : Généralité sur le code QR.
1.1. Introduction
De nos jours, un code QR est appliqué dans différents flux d'applications liés à notre
vie, donc nous le trouvons partout.
Dans ce chapitre nous allons voir quelques notions ou vue globale sur la définition de
code QR ainsi la structure de ce dernier et aussi les caractéristiques qui spécifient les codes
QR.
1.2. Historique
Le code QR a été créé par l'entreprise japonaise Denso-Wave en 1994 pour suivre le
chemin des pièces détachées dans les usines de Toyota.
Il est rendu public en 1999 sous licence libre, cela a contribué à la diffusion du code au Japon.
Par la suite, il prend un réel essor avec l'avènement des smartphones.
À la fin des années 2000, il devient l'un des codes bidimensionnels les plus populaires
dans le monde, et les applications de lecture de codes QR sont souvent déjà installées par les
fabricants dans les téléphones mobiles. [1]
En 1999, tout en conservant les droits du brevet, Denso-Wave accorde l'utilisation du

code QR avec une licence libre, défini et publié en tant que norme ISO.
 En octobre 1997 publication du standard AIM (Association for Automatic Identification

and Mobility), renouvelé en 1999.
 En 1999 publication du standard japonais JIS X 0510
 En juin 2000 publication de la norme ISO/CEI 18004.
 En novembre 2004, approbation du Micro QR code par la norme JIS X 0510.
 Le 1er septembre 2006, la norme ISO/CEI 18004.
 La dernière révision de la norme date de 2015.
3
1.3. Définition d’un code QR
Le code QR (en anglais QR Code) est un type de code-barres en deux dimensions (ou
code matriciel) constitué de modules noirs disposés dans un carré à fond blanc L'agencement
de ces modules définit l'information que contient le code QR (QR est l’abréviation de l'anglais
Quick Response) ce qui signifie que le contenu du code peut être décodé rapidement après
avoir été lu par un lecteur de code-barres, un téléphone mobile, un smartphone, ou encore une
webcam. Son avantage est de pouvoir stocker plus d'informations qu'un code à barres, et
surtout des données directement reconnues par des applications. [2]
Les principaux avantages sont :
 Capacité de données élevée.

 Lecture à grande vitesse.
 Correction élevée de l’erreur (7 % ∼ 30 %).
 Petite taille d’impression.
 Différentes versions disponibles (1 ∼ 40).
Figure 1 : Exemple de code QR.
4
1.4. Description d’un code QR
Un code QR a la capacité de stocker ses informations horizontalement et verticalement.

En effet, la lecture se fera sur 2 axes, un code QR peut être représenté par une matrice (x,y).
Figure 2 : Le code QR sur 2 axes.
Le passage de 1 dimension à 2 dimensions a permis également d'augmenter la capacité

de stockage des codes-barres tout en réduisant la taille de l'image. Il est ainsi possible de
traduire une information de plusieurs dizaines de caractères en un seul code QR de 2 cm de
côté.
Figure 3 : Evaluation de code QR.
5
Le principal atout du QR-Code est donc sa haute capacité de stockage :
Type de donnée quantité maximale de données

Numériques (0-9) 7089 caractères
Alphanumériques (ASCII) 4296 caractères
Octets (binaires 8-bit) 2953 caractères
Kanji (caractères japonais) 1817 caractères
Tableau 1 : Capacité de stockage des données du code QR.
Le code QR a l'atout de pouvoir être placé dans des espaces réduits, mais il faut faire
attention pour permettre une lecture aisée.
En effet, plus il y a de points dans la matrice, plus il y a de l'information stockée dans le code
QR. Donc il faut faire un compromis entre la taille et la lisibilité du code QR sous peine
d'avoir des difficultés à le décoder.
Le code QR a également la capacité de pouvoir être lu dans tous les sens (360°) de manière très
rapide grâce à des repères dans la matrice facilement détectables. [2]
Figure 4 : Le code QR dans tous les sens.
En effet, le Code QR tolère d'être abîmé (déchirures, salissures, etc.) car ce dernier
contient un code correcteur et de redondance de l'information.
En résumé, la force du code QR est d'intégrer un taux de correction d'erreur qui définit la
quantité d'informations répétées, et donc une tolérance plus ou moins importante aux
dégradations.
6
Plus le taux de correction d'erreurs est élevé, plus le code QR sera complexe à la lecture.
Il existe différentes versions de code QR allant de 25 à 4 296 caractères :
Figure 5 : Les différentes versions du code QR.
1.5. Structure d’un code QR
Le code QR est composé de plusieurs parties distinctes. Certaines sont directement liées
aux données contenues dans le symbole (zone d’encodage), tandis que d’autres ont des
fonctions précises pour faciliter la lecture du code QR (motifs fonctionnels ou function
patterns).
Figure 6 : La structure de code QR version 1.
7
Comme nous pouvons le remarquer, un code QR est composé de carrés noirs et blancs qui
s'appellent modules. Chaque module représente une valeur binaire :
 NOIR => 1.
 BLANC => 0.
La zone de silence est composée de 4 modules de largeur pour délimiter le code QR, cette
dernière est non obligatoire mais recommandée. Cette zone facilite fortement la lecture du code
QR.
Motif de repérage (ou de détection du position) toujours au nombre de 3 positionnés en haut à

gauche, en haut à droite et en bas à gauche, sont très importants et seront détaillés un peu plus
tard.
Les séparateurs permettent de séparer les motifs de repérage (motifs de détection du position)
du reste du code.
Motif de synchronisation permettent de densifier le code QR (par l'alternance de modules

blancs/noirs), de déterminer la version du code QR; et de fournir des positions de référence
pour le calcul des coordonnées de chaque module.
8
Motif d'alignement sont composés de 3 carrés concentriques superposés et de taille 5x5

modules pour le premier noir, 3x3 modules pour le blanc et un seul module central noir. Le
nombre de ces patterns d'alignement dépend de la version de QR Code généré.
Les motifs de détection de position sont très ressemblants aux motif d'alignement, à la
différence près qu'ils sont plus gros et qu'ils sont toujours présents au nombre de 3 dans le
motif du code QR.
La région du code contient toutes les données encodées, avec le code de correction d'erreur, les
informations de version et de format.
Il existe dans le code 2 principales régions. Le code contenant les données à stocker et le code
correcteur. Le code correcteur permettra, en cas de perte des données stockées, à corriger
celles-ci et récupérer les informations détruites. [2]
Toutefois, il est important de noter que plus un code QR a une version élevée, plus il sera
difficile à décoder.
Ainsi, pour permettre une meilleure lecture, le nombre de motif de détection de position
augmentera en fonction de la version utilisée.
De plus, nous remarquerons que pour un QR Code très simple (version 1), il n'y a pas besoin de
motif d'alignement. [3]
Figure 8 : La structure de code QR version 1 et 2.
9
1.6. Principes de fonctionnement
Le principe du code QR, qui en fait son principal atout, est d'utiliser la redondance
d'informations.
En informatique, la redondance des données (ou data redundancy en anglais) désigne le fait des
données identiques soient disponibles dans différentes bases ou différents gisements de
données.
Ces données redondantes peuvent réapparaître dans différents champs d’une même base de
données ou dans plusieurs emplacements différents.
En effet, la redondance est employée dans le code QR de manière à prévenir toute

altération du motif et ainsi fournir au lecteur l'information codée originale sans problèmes.
C'est le code correcteur d'erreurs du code QR qui créé la redondance afin d'accroître la fiabilité
de l'information. Le code de Hamming est un exemple de code correcteur.
10
L'objectif d'un code correcteur est la détection ou la correction d'erreurs après la

transmission d'un message, cette correction est permise grâce à l'ajout d'informations
redondantes.
Le message est plongé dans un ensemble plus grand, la différence de taille contient la
redondance, l'image du message par le plongement est transmise. En cas d'altération du
message, la redondance est conçue pour détecter ou corriger les erreurs. [3]
Pour illustrer le fonctionnement du code correcteur, voici un petit exemple très

simplifié qui illustre le processus de reconnaissance et de correction d'erreur.
Voici le premier exemple sur le fonctionnement du code de correction.
Figure 10 : Exemple d’un code de correction.
11
Voici un autre exemple :
Figure 11 : Autre exemple du code de correction.
Le codeur de code QR va ajouter à l'information source deux nombres des nombres de

redondance d'information. Le premier nombre de redondance correspond à la somme des 3
nombres, et le second nombre de redondance est la somme pondérée des 3 nombres, chacun est
multiplié par son rang.
Si le message transmis est altéré, c'est au rôle du décodeur de détecter l'erreur et de la

corriger. Il va s'aider des nombres de redondance d'information ajoutés par le codeur.
Un recalcule de la somme des nombres devrait permettre de retomber sur le même premier
nombre de redondance d'information.
Dans notre exemple ici, le décodeur trouve 45 au lieu de 41, Il sait donc détecter qu'il y
a eu une erreur lors de la transmission du message, donc Il note de côté la différence entre le
nouveau nombre trouvé et celui qu'il a en mémoire.
Cette différence trouvée correspond à la valeur de l'erreur.
Maintenant, pour corriger l'erreur, il doit trouver où se situe celle-ci parmi les informations
reçues. Pour le second nombre de redondance, il trouve une différence. Cette différence divisée
par la valeur de l'erreur donnera la position de l'erreur. Il faut donc retirer 4 au nombre du
rang 2. Le décodeur a donc pu détecter et corriger l'erreur simplement pour fournir le bloc
original, et ce malgré l'altération du message. Il faut noter que lors d'une transmission sans
perturbation, les différences des sommes simples et des sommes pondérées sont nulles.
12
1.7. Domaines d’utilisation des codes QR
Il ne fait aucun doute que le code QR est présent dans la plupart des domaines de notre
vie, donc nous le trouvons partout, parmi ces domaines sont les suivants : [4]
 Supports de communication générale
Vos Code QR servent autant pour la communication ciblée que générale : publicité,
lancement de nouveautés, affichage de campagnes promotionnelles, Evènement…
Vos Code QR peuvent être utilisés pour vos campagnes de publicité sur panneaux.
Figure 12 : Code QR dans les panneaux publicitaires.
 Edition, Bibliothèques…
Code QR pour renseigner sur un auteur, un éditeur, Code QR au dos de livre, Code QR
pour le rangement et l’information en bibliothèque, Code QR pour le classement de
livres.
13
Figure 13 : Code QR dans les livres.
 Emballage des produits

Apposez un Code QR sur un emballage produit permet de créer instantanément un lien
entre vous, vos produits et vos clients : informations consommateurs, notices, coupons
virtuels, jeux, vidéos…
Figure 14 : Code QR sur un emballage produit.
 Evènementiel, culture…
Code QR pour salon, foire et évènements en tous genres, Code QR pour les stands et
affiches d’expos… Un Code QR imprimé au dos d’un ticket, ou sur un programme, un
magazine ciné donne accès à un contenu spécifique, Code QR extraits de films, Code
QR pour donné des informations sur des évènements, Code QR de remises, offres
commerciales de partenaires, Code QR culturels.
14
Figure 15 : Code QR pour un évènement.
 Grande distribution
Les Code QR imprimés sur vos produits, ou sur vos catalogues ou sur vos PLV
permettent de promouvoir les ventes, renseigner vos clients, gérer des opérations
promotionnelles…
Figure 16 : Code QR imprimés sur produit.
15
 Musées, Expos, Œuvres
Code QR pour renseigner les visiteurs sur un musée, code QR pour renseigner sur une
œuvre, une peinture, une sculpture, code QR pour commenter une expo, Code QR pour
raconter l’histoire d’un lieu, Code QR pour donner des indications horaires, Code QR
pour tarifs, plans d’accès…
Figure 17 : Code QR pour renseigner visiteurs sur un musée.
 Santé et domaines connexes
Code QR pour assurer la traçabilité, Code QR pour renseigner sur médicaments, Code
QR pour assurer le suivi des lots, Code QR pour limiter la contrefaçon, Code QR
composition des produits.
Figure 18 : Code QR pour renseigner sur médicaments.
16
 Tourisme, Ville, Site
Code QR pour office de tourisme, Code QR pour renseigner les touristes, Code QR
pour gérer les horaires des sites, Code QR pour aider la visite de site, Code QR pour les
horaires, accès sites, Code QR pour tarifs, Code QR pour raconter l’histoire d’un lieu…
Figure 19 : Code QR raconte histoire de la ville de BORDEAUX.
 Transport, accessibilité
Un Code QR renseigne sur les horaires, les destinations, le trafic, et donne des
informations en temps réel pour vos voyageurs; dans vos véhicules les codes QR
rendent la publicité interactive !
Figure 20 : Code QR renseigne sur les horaires de transport.
17
 Traçabilité, sécurité
Une authentification par Code QR permet de valider la réception d’un produit, suivre la
distribution. Le contenu web d’un Code QR alimentaire donne son origine, sa
certification, sa composition.
Code QR pour renseigner avant achat, Code QR pour filière AOC, Code QR pour
traçabilité filière alimentaire, Code QR pour filière Alcools, vins, champagnes…
Figure 21 : Code QR pour faire authentification.
18
1.8. Conclusion
Ce chapitre a été consacré à la description des codes QR, leur structure et aussi
quelques domaines d’utilisation, dans le chapitre suivant nous rentrerons dans un aspect plus
technique et détaillé dans l'élaboration de ces fameux petits carrés bourrés d'informations.
19
Chapitre II :
Aspect technique des
codes QR
20
Chapitre 2 : ASPECT TECHNIQUE DES CODES QR
Chapitre II : Aspect technique des codes QR.
2.1. Introduction
Au cours de ce chapitre, nous avons présenté les notions basiques pour élaborer un code
QR. Nous avons commencé par l’analyse des données qui est la 1ère étape pour élaborer un
code QR, puis nous parlons sur le codage des données, nous citons toutes les étapes du codage
jusqu'à ce que nous arrivions à placer les modules dans la matrice.
2.2. Elaboration d’un code QR
Afin de créer le code, nous devons suivre les étapes suivantes :
2.2.1. L'analyse des données
Un code QR encode une chaîne de texte, Le standard de code QR comporte plusieurs

modes de codage du texte parmi le : numérique, alphanumérique, byte et kanji.
Chaque mode code le texte sous forme de chaîne de bits, mais chaque mode utilise une
méthode différente pour convertir le texte en bits.
Chaque méthode est optimisée pour générer la chaîne de bits la plus courte possible pour ce
type de données. [5]
2.2.1.1. Les modes de codage de code QR
Les modes d'encodage incluent les caractères suivants :
 Le mode numérique est pour les chiffres décimaux de 0 à 9.

 Le mode alphanumérique concerne les chiffres décimaux de 0 à 9, ainsi que les lettres
majuscules (pas les minuscules !), et les symboles $, %, *, +, -,. , /, et : ainsi qu'un
espace.
 Le mode octet, par défaut, concerne les caractères du jeu de caractères ISO-8859-1.
Cependant, certains scanners de codes QR peuvent détecter automatiquement si UTF-8
est utilisé en mode octet à la place.
 Le mode Kanji est destiné aux caractères à deux octets du jeu de caractères Shift JIS.
Alors que l’UTF-8 peut encoder des caractères Kanji, il doit utiliser trois ou quatre
octets pour le faire. Shift JIS, en revanche, n'utilise que deux octets pour encoder
21
chaque caractère Kanji, de sorte que le mode Kanji compresse les caractères Kanji plus
efficacement. Si la chaîne d'entrée entière se compose de caractères dans la plage à
deux octets de Shift JIS, utilisez le mode Kanji.
 Le mode Extended Channel Interpretation (ECI) spécifie directement le jeu de
caractères (par exemple UTF-8). Cependant, certains lecteurs de codes QR ne prennent
pas en charge le mode ECI et ne comprendront pas les codes QR qui l'utilisent.
 Le mode d'ajout structuré encode les données sur plusieurs codes QR, jusqu'à un
maximum de 16 codes QR.
 Le mode FNC1 permet au code QR de fonctionner comme un code-barres.
2.2.1.2. Comment choisir le mode le plus efficace
Pour sélectionner le mode le plus efficace pour le code QR, il faut examiner les
caractères de la chaîne d'entrée et vérifier les conditions suivantes :
 Si la chaîne d'entrée se compose uniquement de chiffres décimaux (0 à 9), utiliser le

mode numérique.
 Si le mode numérique n'est pas applicable et si tous les caractères de la chaîne d'entrée
se trouvent dans la colonne de gauche du tableau alphanumérique, utiliser le mode
alphanumérique.
Les lettres minuscules ne peuvent pas être codées en mode alphanumérique ; seulement
en majuscule.
 S'il y a un caractère qui n'est pas dans la colonne de gauche du tableau alphanumérique
mais qui peut être codé en ISO 8859-1, utiliser le mode octet. Comme mentionné ci-
dessus (Tableau 2), les lecteurs de code QR peuvent être en mesure de reconnaître
UTF-8 en mode octet.
 Si tous les caractères sont dans le jeu de caractères Shift JIS, utiliser le mode Kanji. Les
caractères Shift JIS peuvent être codés en UTF-8 à la place, il est donc possible
d'utiliser le mode octet pour les caractères Kanji, mais il est généralement plus efficace
d'utiliser Shift JIS et d'utiliser le mode Kanji pour les caractères Kanji. [6]
2.2.1.3. Modes de mixage et optimisation
Il est possible d'utiliser plusieurs modes dans un seul code QR en incluant l'indicateur
de mode avant chaque section d'octets qui utilise ce mode (4 bits qui définissent le mode).
Numérique alphanumérique octet Kanji ECI ajout FNC1 motif de

structuré terminaison
0001 0010 0100 1000 0111 0011 1) 0101 0000
2) 1001
Tableau 2 : Representation binaire de chaque mode.

22
La spécification du code QR explique comment changer de mode de la manière la plus

optimale.
2.2.2. Codage de donnée
Chaque mode de codage est conçu pour créer la chaîne de bits la plus courte possible
pour les caractères utilisés dans ce mode, Chaque mode utilise une méthode différente pour
convertir le texte d'entrée en une chaîne de bits. [4]
Pour faire le codage il faut suivre les étapes suivantes :
Etape 1 : Choisir le niveau de correction d'erreur
Avant d'encoder les données, il faut sélectionner un niveau de correction d'erreur.
Les codes QR utilisent la correction d'erreur Reed-Solomon. Ce processus crée des mots de
code de correction d'erreurs (octets) sur la base des données codées. Un lecteur de code QR
peut utiliser ces octets de correction d'erreur pour déterminer s'il n'a pas lu les données
correctement, et les mots de code de correction d'erreur peuvent être utilisés pour corriger ces
erreurs.
Les codes QR utilisent le système Reed-Solomon pour la correction d'erreur sur les données.
Le code QR contient jusqu'à 30% de redondance, ce qui signifie qu’il peut être décodé même si
30% des données sont illisibles. [7]
Il existe quatre niveaux de correction d'erreur : L, M, Q, H.
Le tableau suivant répertorie les niveaux et leurs capacités de correction d'erreur.
Niveau de correction d'erreur Capacité de correction d'erreur

L (Low) Récupère 7% des données
M(Medium) Récupère 15% des données
Q(Quartile) Récupère 25% des données
H(High) Récupère 30% des données
Tableau 3 : les niveaux de correction d'erreurs.
Soyez conscient que les niveaux plus élevés de correction d’erreur nécessitent plus d’octets, de
sorte que plus le niveau de correction d’erreur est élevé, plus le code QR doit être grand.
Etape 2 : Déterminer la plus petite version des données
Les différentes tailles de codes QR sont appelées versions.
Nous avons une quarantaine de versions qui sont disponibles. La plus petite version est la
version 1 et mesure 21 pixels sur 21 pixels.
23
La version 2 est de 25 pixels par 25 pixels, La plus grande version est la version 40 et mesure
177 par 177 pixels.
Chaque version est 4 pixels plus grande que la version précédente.
Chaque version a une capacité maximale, selon le mode utilisé. De plus, le niveau de
correction d'erreurs restreint davantage la capacité.
Le tableau suivant répertorie les capacités de quelques versions QR pour un mode d'encodage
et un niveau de correction d'erreur donnés.
Version Module Niveau de Mode Mode Mode Mode

correction numérique alphanumérique octet Kanji
d'erreur
1 21x21 L 41 25 17 10
M 34 20 14 8
Q 27 16 11 7
H 17 10 7 4
2 25x25 L 77 47 32 20
M 63 38 26 16
Q 48 29 20 12
H 34 20 14 8
3 29x29 L 127 77 53 32
M 101 61 42 26
Q 77 47 32 20
H 58 35 24 15
4 33x33 L 187 114 78 48
M 149 90 62 38
Q 111 67 46 28
H 82 50 34 21
5 37x37 L 255 154 106 65
M 202 122 84 52
Q 144 87 60 37
H 106 64 44 27
Tableau 4 : Les capacités de quelques versions de code QR.
Donc pour déterminer la plus petite version il faut compter le nombre de caractères à encoder
et déterminer quelle est la version la plus petite pouvant contenir ce nombre de caractères pour
le mode d’encodage et le niveau de correction d’erreur souhaité. [7]
Par exemple, l'expression HELLO WORLD a 11 caractères. Si vous l'encodez avec la

correction d'erreur de niveau Q, le tableau des capacités de caractères indique qu'un code de
version 1 utilisant la correction d'erreur de niveau Q peut contenir 16 caractères en mode
alphanumérique, donc la version 1 est la plus petite version pouvant contenir ce nombre de
24
caractères. Si la phrase faisait plus de 16 caractères, comme HELLO THERE WORLD (qui fait
17 caractères), la version 2 serait la plus petite.
Etape 3 : Ajouter l'indicateur de mode
Chaque mode de codage possède un indicateur de mode à quatre bits qui l'identifie. Les
données codées doivent commencer par l'indicateur de mode approprié qui spécifie le mode
utilisé pour les bits qui suivent. Le tableau suivant répertorie les indicateurs de mode pour
chaque mode.
Numérique alphanumérique octet Kanji ECI ajout FNC1 motif de

structuré terminaison
0001 0010 0100 1000 0111 0011 1) 0101 0000
2) 1001
Tableau 5 : Les indicateurs de mode pour chaque mode.
Par exemple, si vous encodez HELLO WORLD en mode alphanumérique, l'indicateur de mode
est 0010.
Etape 4 : Ajouter l'indicateur de nombre de caractères
L'indicateur de nombre de caractères est une chaîne de bits qui représente le nombre de
caractères codés. L'indicateur de nombre de caractères doit être placé après l'indicateur de
mode. De plus, l'indicateur de nombre de caractères doit avoir une longueur d'un certain
nombre de bits, selon la version QR.
Comptez le nombre de caractères dans le texte d'entrée d'origine, puis convertissez ce nombre
en binaire. La longueur de l'indicateur de nombre de caractères dépend du mode d'encodage et
de la version du code QR qui sera utilisée. Pour que la chaîne binaire ait la longueur
appropriée, complétez-la à gauche avec des 0. [8]
Les listes suivantes contiennent les tailles des indicateurs de nombre de caractères pour chaque
mode et version.
Par exemple, si vous encodez HELLO WORLD dans un code QR version 1 en mode
alphanumérique, l'indicateur de nombre de caractères doit avoir une longueur de 9 bits.
Le nombre de caractères de HELLO WORLD est 11. En binaire, 11 est 1011. Complétez-le sur
la gauche pour lui faire 9 bits de long : 000001011. Mettez ceci après l'indicateur de mode de
l'étape 3 pour obtenir la chaîne de bits suivante : 0010 000001011.
Etape 5 : Encoder à l'aide du mode sélectionné
Après l’ajout de bits de L'indicateur de nombre de caractères, nous allons codée la chaine
entrée selon le mode que nous avons choisi.
 Encodage en mode numérique.
25
 Codage en mode alphanumérique.

 Codage en mode octet.
 Encodage en mode Kanji
Par exemple : HELLO WORLD est encodé sur la page d'encodage en mode alphanumérique.
Pour l'exemple suivant HELLO WORLD, la chaîne de bits jusqu'à présent est :
Indicateur de Indicateur de nombre Données codées

mode de caractères
0010 000001011 01100001011 01111000110 10001011100
10110111000 10011010100 001101
Tableau 6 : Le codage après le choix de mode.
2.2.3. Codage de correction d'erreur
 Diviser les mots de code de données en blocs si nécessaire
Avant de générer des mots de code de correction d'erreurs, il peut être nécessaire de diviser les
mots de code de données en blocs plus petits si le code QR est plus grand que la version 2,
Par exemple, si vous créez un code QR 5-Q ( code QR de version 5 avec correction d’erreurs
de niveau Q ) , Le tableau suivant montre quelques versions de code QR avec les mots de code
qui contient :
Version et niveau CE (correction d’erreur) Nombre total de mots de code de données

pour cette version et niveau EC
1-L 19
1-M 16
1-Q 13
1-H 6
2-L 34
2-M 28
2 –Q 22
2-H 16
3-L 55
3-M 44
3-Q 34
3-H 26
4-L 80
4-M 64
4-Q 48
26
4-H 36
5-L 108
5-M 86
5-Q 62
5-H 46
Tableau 7 : Nombre total de mots de code de données pour cette version et niveau EC.
Le tableau de correction d'erreur [9] indique qu'un code 5-Q a 62 mots de code de données
(chaînes de nombres binaires de 8 bits), par exemple :
(mot de code #1) 01000011 (mot de code #34) 01110111

(mot de code #3) 01000110 (mot de passe #36) 00000111
(mot de code 25) 01010110 (mot de code #58) 11101100
(mot de code #61) 00010001
(mot de code #29) 10010010
(mot de code #30) 00000110
(mot de code #31) 10110110
(mot de code #33) 11110111
27
Le tableau de correction d'erreurs [9] mentionne 'groupe 1' et 'groupe 2', ainsi que 'nombre de
blocs'. Cela signifie que les mots de code de données doivent être divisés en deux groupes
maximum, et au sein de chaque groupe, les mots de code de données peuvent être encore divisés
en blocs. Les mots de code de données sont décomposés séquentiellement (c'est-à-dire en
commençant par le mot de code 1, puis le mot de code 2, et ainsi de suite.)
Pour un code QR de version 5-Q, il indique qu'il existe deux groupes, dont le premier doit être
divisé en 2 blocs contenant chacun 15 mots de code de données, et le second doit être divisé en 2
blocs contenant chacun 16 données. Mots de code. Notez que 15+15+16+16 = 62, qui est le
nombre total de mots de code de données. Ci-dessous, sont les mots de code ci-dessus, divisés en
groupes et blocs corrects pour illustrer comment faire cette étape.
Numéro de groupe Numéro de bloc Mots de code de données

dans le groupe
Groupe 1 Bloc 1 (mot de code #1) 01000011
(mot de code #2) 01010101
(mot de code #3) 01000110
(mot de code #4) 10000110
(mot de code #5) 01010111
(mot de code #6) 00100110
(mot de code #7) 01010101
(mot de code #8) 11000010
(mot de code #9) 01110111
(mot de code #10) 00110010
(mot de code #11) 00000110
(mot de code #12) 00010010
(mot de code #13) 00000110
(mot de code #14) 01100111
(mot de code #15) 00100110
Bloc 2 (mot de code #16) 11110110
(mot de code #17) 11110110
(mot de code #18) 01000010
(mot de code #19) 00000111
(mot de code #20) 01110110
(mot de code #21) 10000110
(mot de code #22) 11110010
(mot de code #23) 00000111
(mot de code #24) 00100110
(mot de code 25) 01010110
(mot de code #26) 00010110
(mot de code #27) 11000110
28
(mot de code #28) 11000111

(mot de code #29) 10010010
(mot de code #30) 00000110
Groupe 2 Bloc 1 (mot de code #31) 10110110

(mot de code #33) 11110111
(mot de code #34) 01110111
(mot de code #35) 00110010
(mot de passe #36)00000111
(mot de code #37) 01110110
(mot de code #38) 10000110
(mot de code #39) 01010111
(mot de code #40) 00100110
(mot de code #41) 0101010
(mot de code #42) 00000110
(mot de code #43) 10000110
(mot de code #44) 10010111
(mot de code #45) 00110010
(mot de code #46) 00000111
Bloc 2 (mot de code #47) 01000110

(mot de code #48) 11110111
(mot de code #49) 01110110
(mot de code #50) 01010110
(mot de code #51) 11000010
(mot de code #52) 00000110
(mot de code #53) 10010111
(mot de code #54) 00110010
(mot de code #55) 1110000
(mot de code #56) 11101100
(mot de code #57) 00010001
(mot de code #58) 11101100
(mot de code #59) 00010001
(mot de code #60) 11101100
(mot de code #61) 00010001
(mot de code #62) 11101100
Tableau 8 : division de code QR verison 5-Q en bloc.
Dans le tableau, notez que les blocs du groupe 1 se composent de 15 mots de code de données et
que les blocs du groupe 2 se composent de 16 mots de code de données comme spécifié dans le
29
tableau de correction d'erreur. Notez également qu'ils sont décomposés séquentiellement. C'est-à-
dire qu'ils sont dans le même ordre qu'avant d'être séparés en blocs.
Le tableau de correction d'erreur indique également que pour un code 5-Q, il existe 18 mots de
code de correction d'erreur par bloc. Dans cet exemple, il y a quatre blocs, il y aura donc quatre
ensembles de 18 mots de code de correction d'erreurs, pour un total de 72 mots de code de
correction d'erreurs.
Comme indiqué dans le tableau de correction d'erreurs, les codes QR plus petits ne nécessitent
pas du tout de fractionner les mots de code de données, donc, pour un code 1-M (par exemple),
les 16 mots de code de données seraient utilisés comme un seul bloc, et Seuls 10 mots de code de
correction d'erreurs devraient être générés.
 Comprendre la division longue polynomiale
Les mots de code de correction d'erreur seront générés à l'aide d'une méthode appelée correction
d'erreur Reed-Solomon. Une partie du processus consiste à effectuer une division longue
polynomiale. C'est-à-dire en divisant un polynôme par un autre polynôme.
La division longue polynomiale est légèrement plus compliquée que la division longue standard.
Pour aider à clarifier le processus, voici un exemple simple de division longue polynomiale. [10]
Globalement, les étapes de la division longue polynomiale sont :
 Trouvez le terme approprié pour multiplier le diviseur. Le résultat de la multiplication

doit avoir le même premier terme que le dividende (dans la première étape de
multiplication) ou le reste (dans toutes les étapes de multiplication suivantes).
 Soustrayez le résultat du dividende (dans la première étape de multiplication) ou du reste
(dans toutes les étapes de multiplication suivantes).
 Répétez les étapes 1 et 2 jusqu'à ce qu'il ne soit plus possible de multiplier par un entier,
ou en d'autres termes, il serait nécessaire de multiplier par une fraction. Le nombre au bas
du tableau est le reste.
La division longue polynomiale nécessaire pour la correction d'erreur de Reed-Solomon est plus
simple à certains égards que cet exemple, car il ne sera pas nécessaire de traiter les exposants des
termes polynomiaux.
Comme mentionné dans la section précédente, pour générer des mots de code de correction
d'erreur, ce processus utilise une méthode appelée correction d'erreur Reed-Solomon. Avec la
division longue polynomiale, cette méthode utilise un champ de Galois, qui est essentiellement
un ensemble restreint de nombres, ainsi que certaines opérations mathématiques qui créent des
nombres qui sont toujours dans cet ensemble.
30
2.2.4. Structure finale d’un message
Vous devriez maintenant avoir les mots de code de données et leurs mots de code de correction
d'erreur correspondants.
Comme mentionné avant, les codes QR plus volumineux vous obligent à diviser les mots de
code de données en blocs plus petits et à générer des mots de code de correction d'erreurs
séparément pour chaque bloc.
Dans ce cas, les blocs de données et les mots de code de correction d'erreurs doivent être
entrelacés conformément à la spécification du code QR.
 Déterminer le nombre de blocs et de mots de passe de correction d'erreur requis
Le tableau de correction d'erreurs précédent indique le nombre de blocs de données et de mots

de code de correction d'erreurs par bloc requis pour chaque version et niveau de correction
d'erreurs.
Pour les codes plus petits, utilisez les mots de code de correction d'erreur et de données tels
quels.
Veuillez noter que les codes QR plus petits ne se composent que d'un bloc de mots de code de
données, avec un ensemble de mots de code de correction d'erreur pour ce bloc. Dans ce cas,
aucun entrelacement n'est nécessaire.
Placez simplement les mots de code de correction d'erreur après les mots de code de données et
passez à l'étape suivante, le placement du module dans la matrice.
Pour des codes QR plus gros, Sur la partie de codage de la correction d'erreurs, Nous avons cité
un exemple utilisant un code 5-Q.
Le tableau de correction d'erreur indique que le premier groupe d'un code 5-Q se compose de 2
blocs, avec 15 mots de code de données par bloc, et le deuxième groupe se compose de 2 blocs,
avec 16 mots de code de données par bloc.
Notez que la table de correction d'erreur indique que pour chaque bloc, un code 5-Q doit avoir 18
mots de code de correction d'erreur. Maintenant que le codage de correction d'erreurs a été
expliqué, les mots de code de correction d'erreurs pour les données ci-dessus peuvent être
calculés. [11]
Il y a quatre blocs, donc quatre ensembles de 18 mots de code de correction d'erreur doivent être
générés. Ce qui suit est un tableau mis à jour qui montre les mots de code de correction de
données de chaque bloc convertis en une liste d'entiers, et les 18 mots de code de correction
d'erreur générés pour chaque bloc.
Numéro Numéro Mots de code de données dans le Mots de code de données sous forme
de de bloc groupe d'entiers
31
groupe Mots de code de correction d'erreur

pour le bloc
Groupe Bloc 1 (mot de code #1) 01000011
1 (mot de code #2) 01010101 Mots de code de données a partir de la
(mot de code #3) 01000110 gauche sous forme d'entiers:
(mot de code #4) 10000110 67,85,70,134,87,38,85,194,119,50,6,18
(mot de code #5) 01010111 ,6,103,38.
(mot de code #6) 00100110 Mots de code de correction d'erreur :
(mot de code #7) 01010101 213 199 11 45 115 247 241 223 229
(mot de code #8) 11000010 248 154 117 154 111 86 161 111 39
(mot de code #9) 01110111
(mot de code #10) 00110010
(mot de code #11) 00000110
(mot de code #12) 00010010
(mot de code #13) 00000110
(mot de code #14) 01100111
(mot de code #15) 00100110
Bloc 2 (mot de code #16) 11110110
(mot de code #17) 11110110 Mots de code de données a partir de la
(mot de code #19) 00000111 246,246,66,7,118,134,242,7,38,86,22,1
(mot de code #20) 01110110 98,199,146,6
(mot de code #22) 11110010 87 204 96 60 202 182 124 157 200 134
(mot de code #23) 00000111 27 129 209 17 163 163 120 133
(mot de code #24) 00100110
(mot de code 25) 01010110
(mot de code #26) 00010110
(mot de code #27) 11000110
(mot de code #28) 11000111
(mot de code #29) 10010010
(mot de code #30) 00000110
Groupe Bloc 1 (mot de code #31) 10110110 Mots de code de données a partir de la
2 (mot de code #33) 11110111 gauche sous forme d'entiers:
(mot de code #34) 01110111 182,230,247,119,50,7,118,134,87,38,8
(mot de code #35) 00110010 2,6,134,151,50,7Mots de code de
(mot de passe #36)00000111 correction d'erreur :
(mot de code #37) 01110110 148 116 177 212 76 133 75 242 238 76
(mot de code #38) 10000110 195 230 189 10 108 240 192 141
(mot de code #39) 01010111
(mot de code #40) 00100110
(mot de code #41) 0101010
32
(mot de code #42) 00000110

(mot de code #43) 10000110
(mot de code #44) 10010111
(mot de code #45) 00110010
(mot de code #46) 00000111
Bloc 2 (mot de code #47) 01000110 Mots de code de données a partir de la

(mot de code #49) 01110110 70,247,118,86,194,6,151,50,16,236,17,
(mot de code #50) 01010110 236,17,236,17,
(mot de code #51) 11000010 236
(mot de code #53) 10010111 235 159 5 173 24 147 59 33 106 40
(mot de code #54) 00110010 255 172 82 2 131 32 178 236
(mot de code #55) 1110000
(mot de code #56) 11101100
(mot de code #57) 00010001
(mot de code #58) 11101100
(mot de code #59) 00010001
(mot de code #60) 11101100
(mot de code #61) 00010001
(mot de code #62) 11101100
Tableau 9 : les mots de code de correction de données de chaque bloc les mots de code de
correction d'erreur générés.
Maintenant que les mots de code de correction d'erreur pour les données ont été calculés, la
section suivante explique le processus d'entrelacement des blocs de données et des mots de code
de correction d'erreur.
 Entrelacer les blocs
Les blocs sont entrelacés en procédant comme suit:
1- Prendre le premier mot de code de données du premier bloc.

2- Suivi du premier mot de code de données du deuxième bloc.
3- Suivi du premier mot de code de données du troisième bloc.
4- Suivi du premier mot de code de données du quatrième bloc.
5- Suivi du deuxième mot de code de données du premier bloc.
6- Etc.
Ce motif est répété, en parcourant les blocs, jusqu'à ce que tous les mots de code de données
aient été entrelacés.
Après cela, procédez comme suit:
33
1- Prendre le premier mot de code de correction d'erreur du premier bloc.

2- Suivi du premier mot de code de correction d'erreur du deuxième bloc.
3- Suivi du premier mot de code de correction d'erreur du troisième bloc.
4- Suivi du premier mot de code de correction d'erreur du quatrième bloc.
5- Suivi du deuxième mot de code de correction d'erreur du premier bloc.
6- Etc.…
Faites-le jusqu'à ce que tous les mots de code de correction d'erreurs aient été utilisés. [11]
Ce processus est détaillé ci-dessous :
 Entrelacer les mots de code de données
Le tableau suivant représente les mots de code de données de chaque bloc.
Col Col Col Col Col Col Col Col Col Col Col Col Col Col Col Col
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Bloc 67 85 70 134 87 38 85 194 119 50 6 18 6 103 38
1
Bloc 246 246 66 7 118 134 242 7 38 86 22 198 199 146 6
2
Bloc 182 230 247 119 50 7 118 134 87 38 82 6 134 151 50 7
3
Bloc 70 247 118 86 194 6 151 50 16 236 17 236 17 236 17 236
4
Tableau 10 : Les mots de code de donnée de chaque bloc.
Comme décrit ci-dessus, prenez le premier mot de code de données du premier bloc, suivi du
premier mot de code de données du deuxième bloc, suivi du premier mot de code de données du
troisième bloc, suivi du premier mot de code de données du quatrième bloc.
Ou, comme indiqué dans le tableau ci-dessus, prenez les mots de code de données de la colonne
1, en commençant par le bloc 1 et se terminant par le bloc 4. Les nombres de la colonne 1 sont
67, 246, 182 et 70.
Données entrelacées jusqu'à présent:

67, 246, 182, 70.
Après cela, mettez les nombres de la colonne 2, en commençant par le bloc 1 et en terminant par
le bloc 4.
67, 246, 182, 70, 85, 246, 230, 247
Faites de même avec la colonne 3.

67, 246, 182, 70, 85, 246, 230, 247, 70, 66, 247, 118
34
Répétez le processus, colonne par colonne. Voici le résultat après avoir ajouté la colonne 15.
Données entrelacées après l'ajout de la colonne 15:

67, 246, 182, 70, 85, 246, 230, 247, 70, 66, 247, 118, 134, 7, 119, 86, 87, 118, 50, 194, 38, 134,
7, 6, 85, 242, 118, 151, 194, 7, 134, 50, 119, 38, 87, 16, 50, 86, 38, 236, 6, 22, 82, 17, 18, 198, 6,
236, 6, 199, 134, 17, 103, 146, 151, 236, 38, 6, 50, 17
La colonne 16 ne contient que deux chiffres, comme vous pouvez le voir dans le tableau ci-
dessus. Mettez simplement ces deux nombres à la fin des données entrelacées comme ceci :
Mots de code de données entrelacés:

67, 246, 182, 70, 85, 246, 230, 247, 70, 66, 247, 118, 134, 7, 119, 86, 87, 118, 50, 194, 38, 134,
7, 6, 85, 242, 118, 151, 194, 7, 134, 50, 119, 38, 87, 16, 50, 86, 38, 236, 6, 22, 82, 17, 18, 198, 6,
236, 6, 199, 134, 17, 103, 146, 151, 236, 38, 6, 50, 17, 7, 236
 Entrelacer les mots de code de correction d'erreur
Nous répétons les mêmes étapes précédentes que nous avons utilisées pour obtenir les mots de
code de données.
Mots de code de correction d'erreurs entrelacés:

213, 87, 148, 235, 199, 204, 116, 159, 11, 96, 177, 5, 45, 60, 212, 173, 115, 202, 76, 24, 247,
182, 133, 147, 241, 124, 75, 59, 223, 157, 242, 33, 229, 200, 238, 106, 248, 134, 76, 40, 154, 27,
195, 255, 117, 129, 230, 172, 154, 209, 189, 82, 111, 17, 10, 2, 86, 163, 108, 131, 161, 163, 240,
32, 111, 120, 192, 178, 39, 133, 141, 236
Mettre les mots de code de correction d'erreur entrelacés après les mots de code de données
entrelacés
Le message final se compose des mots de code de données entrelacés suivis des mots de code de
correction d'erreurs entrelacés.
Message final:
67, 246, 182, 70, 85, 246, 230, 247, 70, 66, 247, 118, 134, 7, 119, 86, 87, 118, 50, 194, 38, 134,
7, 6, 85, 242, 118, 151, 194, 7, 134, 50, 119, 38, 87, 16, 50, 86, 38, 236, 6, 22, 82, 17, 18, 198, 6,
236, 6, 199, 134, 17, 103, 146, 151, 236, 38, 6, 50, 17, 7, 236, 213, 87, 148, 235, 199, 204, 116,
159, 11, 96, 177, 5, 45, 60, 212, 173, 115, 202, 76, 24, 247, 182, 133, 147, 241, 124, 75, 59, 223,
157, 242, 33, 229, 200, 238, 106, 248, 134, 76, 40, 154, 27, 195, 255, 117, 129, 230, 172, 154,
209, 189, 82, 111, 17, 10, 2, 86, 163, 108, 131, 161, 163, 240, 32, 111, 120, 192, 178, 39, 133,
141, 236
 Convertir en binaire
Le message final est converti en binaire 8 bits. Dans notre exemple, les quatre premiers mots de
code sont 67, 246, 182 et 70. Convertis en binaire, ce sont :
35
67 = 01000011
246 = 11110110
182 = 10110110
70 = 01000110
Pour être complet, l'intégralité du message final en binaire se trouve dans la zone de texte ci-
dessous:
01000011111101101011011001000110010101011111011011100110111101110100011001000
01011110111011101101000011000000111011101110101011001010111011101100011001011
00001000100110100001100000011100000110010101011111001001110110100101111100001
00000011110000110001100100111011100100110010101110001000000110010010101100010
01101110110000000110000101100101001000010001000100101100011000000110111011000
00001101100011110000110000100010110011110010010100101111110110000100110000001
10001100100001000100000111111011001101010101010111100101001110101111000111110
01100011101001001111100001011011000001011000100000101001011010011110011010100
10101101011100111100101001001100000110001111011110110110100001011001001111110
00101111100010010110011101111011111100111011111001000100001111001011100100011
10111001101010111110001000011001001100001010001001101000011011110000111111111
10111010110000001111001101010110010011010110100011011110101010010011011110001
00010000101000000010010101101010001101101100100000111010000110100011111100000
01000000110111101111000110000001011001000100111100001011000110111101100.
 Ajouter des bits restants si nécessaire
Pour certaines versions QR, le message binaire final n'est pas assez long pour remplir le nombre
de bits requis. Dans ce cas, il faut ajouter un certain nombre de 0 à la fin du message final pour
qu'il ait la bonne longueur. Ces 0 supplémentaires sont appelés bits de reste. Un code QR version
5, comme celui de cet exemple, doit avoir 7 bits de reste ajoutés à la fin. [12]
Les 8 derniers bits de la chaîne dans la zone de texte ci-dessus sont:

11101100
Avec les 7 bits restants ajoutés à la fin, les derniers bits de la chaîne sont:
111011000000000
2.2.5. Placement du module dans la matrice
Nous savons que les carrés noirs et blancs du code QR nommé des modules plutôt que des
pixels. Il s'agit de faire la différence entre les pixels à l'écran et les carrés noirs et blancs du code
QR.
36
Par exemple, un QR code version 1 fait toujours 21 modules par 21 modules, même s'il occupe
42 par 42 pixels sur un écran d'ordinateur, soit 105x105, et ainsi de suite.
 Présentation des modèles de fonction

Les codes QR doivent inclure des modèles de fonction. Ce sont des formes qui doivent être
placées dans des zones spécifiques du code QR pour garantir que les scanners de code QR
puissent identifier et orienter correctement le code pour le décodage. La figure suivante donne
un exemple de ce que sont les modèles de fonction et où ils sont positionnés.
Figure 22 : Les modèles (motif) d'un code QR.
 Les modèles de recherche sont les trois blocs dans les coins du code QR en haut à gauche,
en haut à droite et en bas à gauche.
 Les séparateurs sont des zones d'espace à côté des motifs de recherche.
 Les modèles d'alignement sont similaires aux modèles de recherche, mais plus petits, et
sont placés dans tout le code. Ils sont utilisés dans les versions 2 et supérieures, et leurs
positions dépendent de la version du code QR.
 Les modèles de synchronisation sont des lignes pointillées qui relient les modèles de
recherche.
 Le module sombre est un module noir unique qui est toujours placé à côté du motif de
recherche en bas à gauche.
37
Nous allons expliquer ci-dessous plus de détails comment positionner les modèles de fonction.
 Ajouter les modèles de recherche

Tout d'abord, placez les modèles de recherche dans la matrice. Le motif de recherche (illustré ci-
dessous) se compose d'un carré noir extérieur de 7 modules sur 7 modules, d'un carré blanc
intérieur de 5 modules sur 5 modules et d'un carré noir solide au centre de 3 modules sur 3
modules.
Figure 23 : Motif de recherché.

Le modèle de recherche est conçu pour être un modèle qui est peu susceptible d'apparaître dans
les autres sections du code QR. Les largeurs de module du motif de recherche ont un rapport de
1:1:3:1:1.
Les scanners de code QR peuvent rechercher ce rapport de modules clairs à sombres pour
détecter les modèles de recherche et orienter correctement le code QR pour le décodage.
Les modèles de recherche sont toujours placés dans les coins supérieurs gauches, supérieur droit
et inférieur gauche du code QR, quelle que soit la version utilisée. [10]
Pour illustrer cela, les figures ci-dessous montrent les emplacements des motifs de recherche. La
première image est un code de version 1, et la deuxième image est un code de version 18.
Figure 24 : Motif de recherche pour version 1 et 18.

38
La taille d'un code QR peut être calculée avec la formule (((V-1)*4)+21), où V est la version du
code QR.
Par exemple, la version 32 est (((32-1)*4)+21) ou 145 modules par 145 modules. Par
conséquent, les positions des motifs de recherche peuvent être généralisées comme suit:
 Le coin supérieur gauche du motif de recherche en haut à gauche est toujours placé à
(0,0).
 Le coin supérieur GAUCHE du motif de recherche en haut à droite est toujours placé à
([(((V-1)*4)+21) - 7], 0)
 Le coin supérieur GAUCHE du motif de recherche en bas à gauche est toujours placé à
(0,[(((V-1)*4)+21) - 7])
 Ajouter les séparateurs
Les séparateurs sont des lignes de modules blancs, d'un module de large, qui sont placés à côté
des motifs du viseur pour les séparer du reste du code QR.
Les séparateurs ne sont placés qu'à côté des bords des motifs du viseur qui touchent l'intérieur du
code QR.
Figure 25 : Code QR après ajout des séparateurs.
 Ajouter les motifs d'alignement

Les codes QR de la version 2 et supérieure doivent avoir des modèles d'alignement. Un modèle
d'alignement, illustré ci-dessous, se compose d'un carré noir de 5 modules par 5 modules, d'un
carré blanc intérieur de 3 modules par 3 modules et d'un seul module noir au centre.
Figure 26 : Motif d'alignement.
39
Les emplacements auxquels les motifs d'alignement doivent être placés sont définis dans le
tableau [13] des emplacements des motifs d'alignement.
Les nombres doivent être utilisés à la fois comme coordonnées de ligne et de colonne. Par
exemple, la Version 2 a les numéros 6 et 18.
Cela signifie que les MODULES CENTRES des motifs d'alignement doivent être placés à (6, 6),
(6, 18), (18, 6) et (18, 18).
Cependant, les motifs d'alignement doivent être placés dans la matrice après que les motifs de
recherche et les séparateurs ont été placés, et les motifs d'alignement ne doivent pas chevaucher
les motifs de recherche ou les séparateurs.
Les images suivantes montrent un code de version 2, qui a été décrit dans le paragraphe
précédent comme ayant des motifs d'alignement centrés sur (6, 6), (6, 18), (18, 6) et (18, 18).
Cependant, comme le montre l'image de gauche, les motifs d'alignement surlignés en rouge ne
doivent pas être placés dans la matrice car ils chevauchent les motifs de recherche et les
séparateurs. Les motifs d'alignement qui chevauchent les motifs de recherche ou les séparateurs
sont simplement omis de la matrice.
Figure 27 : Emplacement de motif d'alignement.
 Ajouter les modèles de synchronisation

Les motifs de synchronisation sont deux lignes, une horizontale et une verticale, de modules
sombres et clairs alternés.
Le motif de chronométrage horizontal est placé sur la 6e rangée du code QR entre les
séparateurs, le modèle de chronométrage vertical est placé sur la 6ème colonne du code QR entre
les séparateurs.
Les modèles de synchronisation commencent et se terminent toujours par un module sombre.

Les motifs d'alignement peuvent chevaucher les motifs de synchronisation car leurs modules
clairs et sombres coïncident toujours avec les modules clairs et sombres des motifs de
40
synchronisation, comme nous pouvons le voir sur l'image de droite. La figure suivante montre
des modèles de synchronisation sur différentes versions de codes QR.
Figure 28 : Emplacement de motif de synchronisation.
 Ajouter le module sombre et les zones réservées

Il est presque temps d'ajouter les bits de données à la matrice de code QR. Cependant, avant de
faire cela, le module sombre doit être ajouté, et il y a des zones de la matrice qui doivent être
réservées pour les bits de format et de version, qui seront ajoutés plus tard.
 Module sombre : Tous les codes QR ont un module sombre à côté du motif de recherche
en bas à gauche, pour plus précisément, le module sombre est toujours situé à la
coordonnée ([(4 * V) + 9], 8) où V est la version du code QR.
 Réserver la zone d'information sur le format :
Une bande de modules à côté des séparateurs doit être réservée à la zone d'information
format comme suit:
 Près du motif de recherche en haut à gauche, une bande à un module doit être
réservée en dessous et à droite du séparateur.
 Près du motif de recherche en haut à droite, une bande à un module doit être
réservée sous le séparateur.
 Près du motif de recherche en bas à gauche, une bande à un module doit être
réservée à droite du séparateur.
La figure suivante montre les zones réservées en bleu, ils sont toujours placés le long des
séparateurs, quelle que soit la version du code QR.
41
Figure 29 : Les zones réserves.

 Réserver la zone d'informations sur la version
Les codes QR versions 7 et supérieures doivent contenir deux zones où les bits
d'information de version sont placés. Les zones sont un bloc de 6x3 au-dessus du motif
de recherche en bas à gauche et un bloc de 3x6 à gauche du motif de recherche en haut à
droite.
La figure suivante montre les emplacements des zones réservées en bleu.
Figure 30 : Les emplacements des zones réservées aux code QR de version 7 ou plus.
2.2.6. Placer les bits de données
Il est maintenant temps d'ajouter les bits de données à la matrice de code QR.
Les bits sont placés dans un motif particulier.
Modèle de placement
Les bits de données sont placés en commençant en bas à droite de la matrice et en progressant
vers le haut dans une colonne de 2 modules de large. Utilisez des pixels blancs pour 0 et des
pixels noirs pour 1. Lorsque la colonne atteint le haut, la colonne suivante à 2 modules
42
commence immédiatement à gauche de la colonne précédente et continue vers le bas. Chaque

fois que la colonne actuelle atteint le bord de la matrice, passez à la colonne suivante à 2
modules et changez de direction. Si un modèle de fonction ou une zone réservée est rencontré, le
bit de données est placé dans le prochain module inutilisé.
La figure suivante montre le modèle de placement des bits de données dans le code QR. Notez
que lorsque le modèle de synchronisation vertical est atteint, la colonne suivante commence à sa
gauche.
Figure 31 : Placement des bits de données d'un code QR.
Placement ascendant
La figure suivante montre l'ordre dans lequel placer les bits de données lorsque la colonne
monte.
Figure 32 : Ordre de placement ascendant.

L'exemple suivant illustre le placement des bits dans la première colonne ascendante.
43
Figure 33 : Le placement des bits dans la première colonne ascendante.
Placement vers le bas
La figure suivante montre l'ordre dans lequel placer les bits de données lorsque la colonne
descend.
Figure 34 : Placement vers le bas.
Sauter des modèles de fonction
44
Lorsqu'un modèle de fonction est rencontré, ignorez tous les modules occupés jusqu'à ce que
vous atteigniez le prochain module inutilisé.
Dans les figures suivantes, les bits de données sous le motif d'alignement se déroulent dans une
colonne ascendante. Notez que la colonne chevauche le motif d'alignement.
Figure 35 : intersection avec le motif d'alignement.

Lorsque le motif d'alignement est atteint, ignorez simplement les modules qui font partie du
motif d'alignement et continuez vers le haut.
Figure 36 : Le saut des modèles de fonction.

Continuez ensuite à ajouter des modules à la colonne de la manière habituelle.
En résumé, procédez toujours normalement le long des colonnes, en sautant les modules utilisés
par les modèles de fonction ou les zones réservées.
2.3. Conclusion
45
Dans ce deuxième chapitre nous avons présenté comment avoir un code QR, nous
commençons par l’analyse de données vers le codage de donnée et sans oublie la partie de la
correction d’erreurs Jusqu'à ce que nous arrivions à la construction de la matrice.
46
Chapitre III :
Conception et réalisation
de l’application
47
Chapitre 3 : CONCEPTION ET REALISATION DE L’APPLICATION
Chapitre III : Conception et réalisation de l’application.
3.1. Introduction
Dans notre application, nous proposons une solution valide pour faciliter le travail de
l'administration au sein de l'INTTIC et mettre en place une application qui numérise toutes les
informations des étudiants à travers la technologie de QR code.
Vu que cette technologie est presque partout dans le monde, nous voulons l'intégrer dans
l'institut pour faciliter plusieurs taches tels que :
 Remplacement de la carte de restauration « en papier » par un code QR qu'il reste toujours

stocké dans nos téléphones portables.
 Avoir une identité numérique unique sous forme de QR Code pour chaque étudiant.
 Diminuer les couts d'achat et de l'impression du papier.
 Se débarrasser du problème de l'oubli des cartes de restauration par certains étudiants.
3.2. Analyse des besoins
3.2.1. Besoins fonctionnels

Notre application sera constituée d’une partie visible aux utilisateurs qui constitue le
« Front End ». Elle offre les fonctionnalités suivantes :
 Remplir le formulaire et le valider.

 Générer un code QR unique à chaque étudiant selon les informations saisies.
 Possibilité de télécharger le code QR directement.
 L’envoi automatique instantané du code QR généré vers l’email soumis.
 Imprimer l’attestation d’inscription.
 Scanner le code QR et obtenir les informations stockées dedans.
 Contacter le support technique au cas où vous auriez besoin d'aide.
3.2.2. Besoins non fonctionnels

L’application que nous avons développée assure les besoins suivants :
 Une bonne performance en termes de temps de réponse et de chargement des pages.

 Une gestion des rôles et des droits d’accès aux informations.
 Besoins d’ergonomie : consistance des couleurs, l’interface graphique « GUI » flexible,
la densité d’éléments sur les écrans...
 Besoins de maintenance : gestion des erreurs, amélioration de code.
48
3.3. Spécification des Besoins

Nous allons définir les acteurs pertinents, ses rôles et ses interactions avec le système.
Nous avons principalement deux acteurs qui sont : l’utilisateur « Agent de l’administration ».
C’est lui qui permet de créer des QR Codes selon ses besoins, les gérer et consulter les
statistiques. Il peut aussi scanner les différents codes QR et obtenir les informations stockées
dedans. Le deuxième acteur est l'étudiant qui utilise son QR code pour l’accès au restaurant, il a
deux tentatives par jour représentant le déjeuner et le diner.
Donc, nous avons deux parties : la partie administration et la partie étudiant.
3.4. Cas d’utilisation

Dans cette partie, nous définissons le diagramme de cas d’utilisation « use case » qui
représente l’ensemble des processus métiers qui permet de mettre en évidence les relations entre
l’acteur et le système étudié.
Dans ce diagramme, nous allons présenter les interactions réalisées par l’acteur comme illustre la
figure ci-dessous :
Figure 37 : Diagramme de cas d’utilisation.
3.5. Conception de la base de données

Dans cette section, nous passons d’abord par une description des classes des entités puis
nous présentons le script de la création de la base de données.
49
Nous avons crée une base de donnée nommée : « admin ». Elle contient une seule table
nommée : « etudiants ». La description de cette classe entité est présentée dans le tableau ci-
dessous (Tableau 11) :
Table : « etudiants »
Attribut Libellé Type
Id Identifiant de l’étudiant Entier
Nom Nom de l’étudiant Chaine de caractère
Prenom Prénom de l’étudiant Chaine de caractère
Email Email de l’étudiant Chaine de caractère
Promotion Promotion de l’étudiant Chaine de caractère
Tableau 11 : Description de la classe entité « etudiants ».

Le script de création de la base de données est le suivant :
CREATE DATABASE admin ;
CREATE TABLE ètudiants` ( ìd` INT(20) NOT NULL AUTO_INCREMENT

, `nom` VARCHAR(40) NOT NULL , `prenom` VARCHAR(40) NOT NULL ,
èmail` VARCHAR(40) NOT NULL , `promotion` VARCHAR(40) NOT NULL
, PRIMARY KEY (ìd`(20))) ENGINE = InnoDB;
3.6. Environnement de travail

Pour mettre en œuvre notre application complète et prête à être exploité par les
utilisateurs, nous avons utilisé beaucoup de technologies et des solutions techniques.
3.6.1. Environnement matériel

Nous avons utilisé un ordinateur « Dell Inspiron 15 3000 series » avec les capacités suivantes :
 Processeur : Intel Core i3-4005U 1.70 GHz.

 Mémoire RAM : 4 Gb.
 Disque dur : 500 Gb.
 Système d’exploitation : Windows7 32 bits.
3.6.2. Environnement logiciel

3.6.2.1. Outils de développement
 Visual Studio Code
Le « VS code » est un IDE que nous avons utilisé pour le développement de l’application.
Il s’agit d’un éditeur de code qui support les langages de programmation Web, comme le
Javascript, le PHP et d’autres langages descriptifs comme l’HTML et le CSS.
50
 Xampp
« Xampp » est un logiciel libre « open source » contient des distributions Apache pour le
serveur Apache, MariaDB, PHP et Perl. Ce logiciel serveur « XAMPP » nous offre un
environnement approprié pour tester les projets MYSQL, PHP, Apache et Perl sur l'ordinateur
local.
 PhpMyAdmin
« PhpMyAdmin » est une application web qui nous permet de gérer le serveur de bases
de données MySQL. Dans un environnement multiutilisateur, cette interface permet également
de donner à un utilisateur un accès à ses propres bases de données, il est possible d'organiser les
informations, gérer, récupérer et mettre à jour les données quand vous voulez.
3.6.2.2. Langage de programmation
 JavaScript
Est un langage de programmation, principalement utilisé dans les pages web interactives.
C'est aussi un langage orienté objet à prototype, il nous permet à implémenter des mécanismes
complexes sur les pages web.
 JQuery
« JQuery » est une bibliothèque JavaScript libre « open source » qui peut être utilisée
pour simplifier la gestion des événements, les interactions Ajax et l'animation pour le
développement rapide des sites Web. JQuery simplifie les scripts côté client du HTML,
simplifiant ainsi le développement des applications Web.
 PHP
C'est un langage de programmation côté serveur qui nous aide à créer des sites Web
dynamiques. Ce langage est principalement utilisé pour construire des applications logicielles
basées sur le Web. À l’aide de PHP, nous pouvons connecter à la base de données et préparer
l’exécution du code.
 HTML
L’HTML est un langage descriptif de balisage des pages Web. Il est utilisé afin de créer
et de représenter le contenu d'une page web et sa structure d’une façon statique. Le langage
HTML utilise des « balises » pour annoter du texte, des images et d'autres contenus afin de les
afficher dans un navigateur web.
 CSS
Le CSS est l’un des langages principaux du Web. Il nous permet à modifier la
présentation des éléments HTML : couleur, taille, police de caractères, position sur la page,
largeur, hauteur, animations… et tout ce qui touche à la mise en page d’un document HTML.
51
3.7. Architecture physique et technique
 Pour l’architecture physique
Dans notre application, nous avons utilisé l’architecture 3 tiers où nous pouvons dire que
notre application est découpée en trois parties : une partie interface graphique, une partie
fonctionnelle, et une partie de stockage de données.
Figure 38 : L’architecture physique « trois tiers » de l’application.
 Pour l’architecture technique
Nous avons utilisé l’architecture MVC « Model Vue Controller ». Cette architecture
permet de séparer complètement la logique de l’interface utilisateur.
 Modèle : Données et méthodes utilisées par l’application.

 Vue : L interface graphique.
 Contrôleur : Coordonne les interactions entre le modèle et la vue.
3.8. Interface de l’application

Lorsque nous ouvrons l’application, l’interface ci-dessous (Figure 39) s’affichera :
52
Figure 39 : Page d’accueil de l’application.

Pour générer un code QR à un étudiant, il faut cliquer sur le bouton « Générateur ».
L’application va vous orientez vers cette figure :
Figure 40 : Générateur du code QR.

Pour que le code QR soit généré, le formulaire doit être rempli avec des valeurs valides. Les
boutons : « Imprimer l’attestation » et « Télécharger » sont désactivé jusqu’à l’appui sur le
bouton « Générer ».
53
Quand nous appuyons sur le bouton « Générer ». La figure ci-dessous s’affichera :
Figure 41 : Le code QR généré.

Dans ce moment là, vous avez la possibilité de télécharger votre QR code et vous pouvez aussi
imprimer l’attestation d’inscription. Au même temps, les informations soumis sont stockées dans
la base de données et un email est envoyé automatiquement à l’adresse soumis (dans ce cas,
l’email soumis est : [email protected] – Figure 42).
Figure 42 : Réception d’un email.

Dans cet email, nous trouvons les coordonnées de l’étudiant avec son code QR (Figure 43) :
54
Figure 43 : Contenu de l’email reçu.

Nous passons à l’interface du lecteur QR code illustrée dans la figure ci-dessous :
Figure 44 : Lecteur QR code.

Après l’appuie sur le bouton « Scanner », une petite fenêtre s’affichera au dessus de la page web
demandant l’autorisation d’utiliser la caméra de l’ordinateur. Si nous autorisons ça, la caméra de
l’ordinateur s’ouvrira automatiquement – Figure 45.
55
Figure 45 : Lecteur prêt à scanner le code QR.

Dans ce moment, l’application analyse le code QR scanné pour exploiter les informations
stockées dedans. Ensuite, elle affiche le contenu du QR code – Figure 46.
Figure 46 : Contenu du code QR scanné.
56
Si le code QR est scanné pour la première fois, l’application affiche « Première tentative »
(Figure 46) et nous offre la possibilité de scanner encore une autre fois. Mais si ce QR code est
déjà scanné, l’application affiche :
Figure 47 : Code QR est déjà scanné.

Les figures ci-dessus représentent l’interface graphique qui apparait à l’utilisateur. Dans la figure
suivante nous présentons la table « etudiants » de notre base de données :
Figure 48 : Base de données
57
 Modifications de quelques paramètres
Pour que nous puissions envoyer un e-mail à partir notre compte Gmail « qrcode-
[email protected] », il faut d’abord activer le paramètre " Autoriser les applications moins
sécurisées " comme il est montré dans la figure ci-dessous :
Figure 49 : Activation du paramètre d’accès à l’email.

Sinon, Google va bloquer l’envoi de l’email via l’application à cause des mesures de sécurité
comme il est indiqué dans la figure :
Figure 50 : Empêchement de l’envoi d’email par Google.
58
3.9. Conclusion
Dans ce chapitre, nous avons présenté l’analyse et la spécification des besoins en passant
par le cas d’utilisation et son diagramme. Ensuite, nous avons parlé sur l’environnement de
travail : matériel et logiciel et l’architecture physique et technique. Finalement, nous avons fini
ce chapitre par des figures qui illustrent l’interface d’utilisateur et notre base de données.
59
CONCLUSION
GENERALE
60
Conclusion générale
En élaborant ce projet, nous avons présenté, en premier lieu, des généralités sur le code
QR : un petit historique, une description de cette technologie et sa structure, son principe de
fonctionnement et ses domaines d’utilisation afin d’avoir une idée générale sur le QR code.
Par la suite, nous avons passé aux aspects techniques du QR code en citant les étapes de
l’élaboration d’un code QR : l’analyse et le codage des données, Placement des bits des
données… Cette analyse nous a permis de comprendre le principe de fonctionnement de la
technologie de QR code.
Nous avons finalisé notre projet par l’analyse et la spécification des besoins en passant
par le cas d’utilisation et son diagramme. Nous avons cité aussi l’environnement de travail
matériel et logiciel ainsi que l’architecture physique et technique adoptée avec des illustrations
qui montre l’interface d’utilisateur de notre application.
Pour conclure, la réalisation de ce projet nous à permis de travailler avec de nouvelles

technologies. Certaines difficultés ont été rencontrées, comme la gestion du temps, la courbe
d’apprentissage de nouveaux concepts ou nouvelles technologies.
Etant étudiants au niveau de l'INTTIC depuis cinq années nous avons pu voir quelques
problèmes liés à l'utilisation de la carte d'étudiant (papier, oubli...) et notre application peut y
remédier, en plus de fait que tous les étudiants possèdent un smart phone donc ils peuvent utiliser
la version mobile de notre application et pour la partie administration et génération des QR codes
les deux versions de l'application peuvent être utilisées mobile et web.
En conclusion de notre projet de fin d’étude a pour objectif : la conception et la

réalisation d’une application QR code au service de l’INTTIC. Nous souhaitons que ce modeste
travail soit mis en œuvre dans la réalité au service de notre institut.
61
Bibliographie
[3] Scan me-everybody‟s guide to the magical world of QR Codes, Winter Mick , 2010
[4]An Introduction to QR Code Technology , Sumit Tiwari , 2016
[6] QR Codes & Mobile marketing for the small business owner , Weir Michael , 2010.
[7] Samuel J.PARSONs , Reed-Solomon : construction & decoding , decembre 2007
[8] EXPLORING THE CONCEPT OF QR CODE AND THE BENEFITS OF USING QR

CODE FOR COMPANIES , Ji Qianyu , 2014
[10] A Donnedu, Cours de mathématiques (volume I et2), édition Vuibert .
[11] Creating QR and Tag Codes , Dutson Phil , 2013
Webographie
[1] https://www.qrcode.com/en/history , consulte le 10/04/2021.
[2] https://www.qrcode.com , consulte le 10/04/2021
[5] https://www.lyceerotroudreux.com/images/documents/QRCode.pdf , consulte le15/05/2021
[9]ihttps://drive.google.com/file/d/19AAWnfhqS1NY1WSbEY78YB379sHRtSKk/view?usp=sh
aring
[12] http://cerig.pagora.grenoble-inp.fr/memoire/2012/codes-2D.htm , consulte le 26/07/2021
[13]ihttps://drive.google.com/file/d/1lMPG9VfYWmvpKEP87uBbKFQ0O8JNQtks/view?usp=s
haring
62
View publication stats

PFE Finale

Transféré par

Droits d'auteur :

Formats disponibles

PFE Finale

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

PFE Finale

Transféré par

Droits d'auteur :

Formats disponibles

See discussions, stats, and author profiles for this publication at: https://www.researchgate.

Projet de Fin d'Études pour l'obtention du Diplôme d'Ingénieur d'Etat en

Thesis · September 2021

Abdelwadoud Achouche Mohammed Chellal

Conception et Réalisation d'une Application QR code au service de l'INTTIC View project

The user has requested enhancement of the downloaded file.

 Dr. Ghizlène SOULIMANE MERAD.

 Pr. Belkacem KOUNINEF Président

Les codes QR « Quick Response » ou codes à réponse rapide semblent apparaître

Dans ce mémoire, nous présentons une méthodologie pour la mise en œuvre de la

Nous avons utilisé le langage JavaScript pour l’encodage et le décodage des

La bibliothèque populaire « QRCode for Javascript library » nous a aidés pour

“ QR codes ” or “ Quick Response codes ” seem to appear everywhere these days. We

In our project, we present a methodology for the implementation of the QR code

Keywords : QR code, encoding, decoding, QR code generator, QR code reader, database,

Je dédie ce modeste travail à :

Nous remercions profondément notre encadreur Dr. GHIZLENE SOULIMANE MERAD

Abdelwadoud & Mohammed

Figure 1 : Exemple de code QR. .......................................................................... 4

Tableau 1 : Capacité de stockage des données du code QR. ............................... 6

AIM : Association for Automatic Identification and Mobility.

AOC : Appellation d'Origine Contrôlée.

CEI : Commission Electro technique International.

CSS : Cascading Style Sheets.

ECT : Extended Channel Interpretation.

FNC1 : Function Code One.

GUI : Graphical User Interface.

HTML : Hyper Text Markup Language.

IDE : Integrated Development Environment.

ISO : International Organization for Standardization.

JIS : Japanese Institute of Standards.

MVC : Model Vue Controller.

PHP : Hypertext Preprocessor.

PLV : Point de Vente.

RAM : Random Access Memory.

UTF-8 : Universal Character Set Transformation Format - 8 bits.

VS Code : Visual Studio Code.

XAMPP : Multiplatform Apache MariaDB Php Perl.

La popularité du code QR augmente rapidement avec la croissance des utilisateurs de

L’objectif de ce PFE est la conception et la réalisation d’une application QR code au

Généralité sur le code

Chapitre I : Généralité sur le code QR.

En 1999, tout en conservant les droits du brevet, Denso-Wave accorde l'utilisation du

 En octobre 1997 publication du standard AIM (Association for Automatic Identification

1.3. Définition d’un code QR

Les principaux avantages sont :

 Capacité de données élevée.

Figure 1 : Exemple de code QR.

1.4. Description d’un code QR

Un code QR a la capacité de stocker ses informations horizontalement et verticalement.

Figure 2 : Le code QR sur 2 axes.

Le passage de 1 dimension à 2 dimensions a permis également d'augmenter la capacité

Figure 3 : Evaluation de code QR.

Le principal atout du QR-Code est donc sa haute capacité de stockage :

Type de donnée quantité maximale de données

Tableau 1 : Capacité de stockage des données du code QR.

Figure 4 : Le code QR dans tous les sens.

Il existe différentes versions de code QR allant de 25 à 4 296 caractères :

Figure 5 : Les différentes versions du code QR.