TP1 

: TP Pratique de Système d’Information Et

Programmation Orientée Objet
TP1 – Exercice 1 : Enoncé

Client
idClient <pi> Entier <O> Fournisseur
nomClient Caractère variable (50) CodeFournisseur <pi> Caractère variable (5) <O>
adresseClient Caractère variable (50) nomFournisseur Caractère variable (50)
emailClient Caractère variable (50) adresseFournisseur Caractère variable (50)
telClient Caractère variable (50) telFournisseur Caractère variable (50)
...

1,n 1,n

Passer Produit
refProduit <pi> Caractère variable (5) <O>
libelléProduit Caractère variable (50)
qtestockProduit Entier
qteseuilProduit Entier
Effectuer
1,1 prixProduit Entier
...

Commande 1,n 1,n

idCommande <pi> Entier <O>
dateCommande Date Associer
qteCommande Entier 1,1
...

1,1 Livraison
idLivraison <pi> Entier <O>
1,1 dateLivraison Date
Composer qteLivraison Entier
...

TAF :

1) Créer Le MD à l’écran (Entité, Propriété, Type de Données, Association, Cardinalité) Et Vérifier

votre MCD ;
2) Générer le MPD et le fichier de la base de données et nommez ce fichier « bdd_gestionmagasin ».
Placer ce fichier dans un répertoire « GestionMag » crée précédemment sur votre bureau ;
3) Lancer phpMyAdmin et créer une nouvelle base de donnée vide « bdd_gestionmag » ;
4) Editer votre fichier .SQL en insérant les clauses « AUTO_INCREMENT » sur les toutes clés
primaire de type INT (Entier). Et Importer le fichier .SQL dans votre base de données ;
5) Vérifier la structure complète de votre base de données et Insérer les valeurs dans chaque table de
votre base de données.
TP1 – Exercice 1 : Eléments de Correction (Liste des Etapes à Suivre)

1) Schématisation du MCD :
a) Créer Un Nouveau Modèle : Lancez PowerAMC, Menu Fichier, Nouveau Modèle, Type
de Modèle, Modèle Conceptuel de Données, Diagramme Conceptuel, Donnez Un Nom à
votre Modèle Et Cliquez Sur Le Bouton OK.
b) A L’aide de l’outil Entité de la Palette, Cliquer Sur Entité, Placez Sur L’Espace de Travail.
Doublez Cliquez Sur L’Entité Et :
i. Onglet Général, Inscrivez Le Nom de Votre Entité ;
ii. Onglet Attributs, insérer l’ensemble des propriétés de l’entité en précisant le nom
de la propriété, le type de données de la propriété et si la propriété est une clé
primaire, cocher la case P pour Primaire ;
c) Une fois toutes les entités placées (avec pour chacun ses propriétés), aller encore sur la
palette, chercher l’outil lien d’association, et mettez vos entités en relation. Pour chaque
relation :
i. Modifier le nom de la relation (toujours un verbe à l’infinitif) ;
ii. Préciser les cardinalités de la relation en tenant compte des règles de gestion du
système telles que définies dans le schéma du MCD ;
d) Vérifier votre MCD, Menu Outils, Commande Vérifier Le Modèle. Le rapport de
vérification doit pouvoir afficher 00 Erreurs Et / Ou 00 Avertissements.
2) Générer le MPD. Menu Outils, Commande Générer Un Modèle Physique de Données. Dans la
boite de dialogue, sélectionnez le SGBD MySQL 5.0, donnez un nom à votre modèle MPD et
cliquez sur le bouton OK ;
3) Etant sur le MPD Généré, Menu SGBD, Commande Générer La Base de Données. Indiquez le
répertoire de génération du fichier SQL de la Base de Données, indiquer le Nom de Votre Fichier
SQL et cliquer sur le bouton OK.
4) Editer votre fichier .SQL : une fois le fichier SQL généré à partir de PowerAMC, ouvrer le
répertoire de destination, et éditer le fichier en ajoutant le mot clé « AUTO_INCREMENT » sur
toutes lignes de clés primaire de type INT : donc sur la Table Client, Commande Et Livraison,
Devant Leur Id, Ajouter La Clause AUTO_INCREMENT (entre le type de données INT et la
clause NOT NULL) et enregistrer votre fichier SQL ;
5) Lancer phpMyAdmin et sur le panneau de configuration et d’administration de phpMyAdmin,
créer une base de données vide avec le nom « bdd_gestionmag » et allez dans l’onglet importer et
importer le fichier SQL généré à partir de PowerAMC ;
6) Insérer les valeurs Test. Sur chaque table, allez dans l’onglet « Insérer » et insérer les valeurs dans
la table mais chaque valeur dois respecter le type et la taille de la données. Si la colonne est une
clé primaire de type INT AUTO_INCREMENT alors ne rien inscrire comme valeurs.
TP1 – Exercice 2 : Enoncé (Contrôles de Base Avec Microsoft Visual Studio 2015)

TAF : Réaliser L’Interface Homme / Machine (IHM) à l’écran et insérer du code VB.NET afin de
programmer l’ensemble des évènements associés à chaque bouton.
TP1 – Exercice 2 : Eléments de Correction (Etapes Par Etapes)

1) Créer Un Nouveau Projet Visual Studio :

a) Menu Fichier, Commande Nouveau, Puis Commande Projet. Déroulez « Modèles »,
Sélectionner Le Langage Visual Basic, Puis Application Window Forms, Donner Un Nom
à Votre Projet (Calculatrice) Et Cliquer Sur Le Bouton OK ;
b) Sur le formulaire qui s’affiche :
i. Propriété Text : Valeur Calculatrice et valider ;
ii. Agrandissez un peu votre fenêtre et commencer à placer vos contrôles. Prennes les
sur la barre à outils et cliquez et déposer sur votre formulaire ;
c) Une fois les contrôles placés, commencer donc la programmation évènementielle :
i. Doublez cliquer sur le bouton ayant le signe + et taper ceci :

ii. Doublez cliquer sur le bouton ayant le signe - et taper ceci :

TextBox3.Text = TextBox1.Text - TextBox2.Text

iii. Doublez cliquer sur le bouton ayant le signe * et taper ceci :

TextBox3.Text = TextBox1.Text * TextBox2.Text

iv. Doublez cliquer sur le bouton ayant le signe / et taper ceci :

TextBox3.Text = TextBox1.Text / TextBox2.Text

v. Doublez cliquer sur le bouton ayant le signe % et taper ceci :

TextBox3.Text = TextBox1.Text % TextBox2.Text

vi. Doublez cliquer sur le bouton CE et taper ceci :

vii. Doublez cliquer sur le bouton Quitter et taper ceci :

End
TP1 – Exercice 3 : Enoncé (Table Etudiant : Matricule Etudiant, Nom Etudiant, Quartier Etudiant,
Téléphone Etudiant).

Etudiant
MatriculeEtudiant
NomEtudiant
QuartierEtudiant
T elephoneEtudiant
...
TAF :

1) Créer la table « Etudiant » telle que définie, directement à partir de l’outil phpMyAdmin et insérer
quelques données tests ;

2) A partir de Visual Studio pour .NET concevez l’interface ci – dessous :

3) A partir de .Net, traiter des évènements « clique » dans les boutons de l’interface de gestion. Les
boutons Afficher, Nouveau, Ajouter, Modifier, Supprimer, Trier et l’Espace pour rechercher des
informations en fonction du critère de recherche ;
TP1 – Exercice 3 : Eléments de Correction (Liste des Etapes A Suivre)

1) Création et exploitation de la table de données :

a) Lancer votre serveur web et placez – vous sur le panneau de phpMyAdmin. Onglet base de
données et donner le nom à votre nouvelle base de données et cliquez sur créer afin de
créer une base de données vide du nom de « bddetd » ;
b) Une fois la base de données créée, donner un nom à votre nouvelle table en précisant le
nombre de colonne de la table et cliquer sur exécuter ;
c) Etant sur la table, on passe donc à l’édition des colonnes en donnant le nom de la colonne,
le type de données de la colonne, la taille si possible et cliquer sur le bouton sauvegarder
afin d’enregistrer la structure de votre table. Si la colonne est une clé primaire,
sélectionnez dans INDEX, le mot PRIMARY et si cette colonne est de type INT, cochez la
case A_I ;
d) La table étant donc créer, insérer les données test sur la table. Onglet insérer et ajouter
quelques lignes de données dans votre table de gestion.
2) Création Projet Visual Studio :
a) Créer Un Nouveau Projet Visual Studio : Menu Fichier, Commande Nouveau, Puis
Commande Projet. Déroulez « Modèles », Sélectionner Le Langage Visual Basic, Puis
Application Window Forms, Donner Un Nom à Votre Projet (Calculatrice) Et Cliquer Sur
Le Bouton OK. Sur le formulaire qui s’affiche, Agrandissez un peu votre fenêtre et
commencer à placer vos contrôles (GroupBox, Button, Label, TextBox, DataGridView).
Prenez les sur la barre à outils et cliquer et déposer sur votre formulaire. Une fois les
contrôles placés, la programmation évènementielle peut donc débuter ;
b) Commencer par ajouter une référence MySQL à votre projet. Ceci permettra de manipuler
les bases de données de type MySQL. Etant sur l’explorateur de solution, clic droit sur le
nom du projet puis commande ajouter, puis référence. Dans la boite de dialogue qui
s’affiche, lien parcourir, bouton parcourir et sélectionnez votre fichier .DLL
(MySql.Data.DLL) et cliquer sur ajouter et OK.
c) La Programmation proprement dite :
i. Importer La Bibliothèque MySQL dans Mon Projet : Barre de Titre de la fenêtre du
projet et doublez cliquer et taper :

Imports MySql.Data.MySqlClient

ii. Créer Une Chaine de Connexion A La Base de Données :

Dim str As String = "server=localhost; uid=root; pwd=; database=bddetd"

Dim con As New MySqlConnection(str)
 iii. Programmer Mon Code de Chargement des Données :

iv. Appelez Mon Code Chargement Au Lancement de Ma Fenêtre : doublez cliquer

sur la barre des titres de la fenêtre et taper ceci :

v. Manipulation du Champ DataGridView : déjà sur la partie IHM, sélectionnez votre

contrôle DataGridView et manipuler 2 propriétés : MultiSelect (Valeur = False),
ReadOnly (Valeur = True) et ensuite aller sur l’onglet évènement, placer le curseur
devant la propriété « CellClick » tapez entrée sur le clavier et taper ceci :

i. Manipulation des Boutons de Gestion : Le Bouton Nouveau : doublez cliquer et

taper

ii. Manipulation Bouton de Gestion : Le Bouton Ajouter : doublez cliquer et taper

Dim cmd As MySqlCommand

con.Open()
Try
cmd = con.CreateCommand
cmd.CommandText = "insert into etudiant(matEtudiant,nomEtudiant,telEtudiant)values(@matEtudiant,@nomEtudiant,@telEtudiant);"

cmd.Parameters.AddWithValue("@matEtudiant", TextBox1.Text)
cmd.Parameters.AddWithValue("@nomEtudiant", TextBox2.Text)
cmd.Parameters.AddWithValue("@telEtudiant", TextBox3.Text)
cmd.ExecuteNonQuery()
MaLoad()
Catch ex As Exception

End Try

vi. Manipulation des Boutons de Gestion : Le Bouton Modifier : doublez cliquer et

taper

Dim cmd As MySqlCommand

con.Open()
Try
cmd = con.CreateCommand
cmd.CommandText = "update etudiant set nomEtudiant=@nomEtudiant, telEtudiant=@telEtudiant where
matEtudiant=@matEtudiant;"
cmd.Parameters.AddWithValue("@matEtudiant", TextBox1.Text)
cmd.Parameters.AddWithValue("@nomEtudiant", TextBox2.Text)
cmd.Parameters.AddWithValue("@telEtudiant", TextBox3.Text)
cmd.ExecuteNonQuery()
MaLoad()
Catch ex As Exception
End Try

iii. Manipulation des Boutons de Gestion : Le Bouton Supprimer :

Dim cmd As MySqlCommand

con.Open()
Try
cmd = con.CreateCommand()
cmd.CommandText = "delete from etudiant where matEtudiant=@matEtudiant;"
cmd.Parameters.AddWithValue("@matEtudiant", TextBox1.Text)
cmd.ExecuteNonQuery()
MaLoad()
Catch ex As Exception
End Try
End Sub
 iv. Manipulation des Boutons de Gestion : Le Bouton Trier :

v. Manipulation des Boutons de Gestion : Le Champ Rechercher :

Dim adapater As MySqlDataAdapter

Dim ds As New DataSet
Try
con.Open()
adapater = New MySqlDataAdapter("select * from etudiant where nomEtudiant like '%" & TextBox4.Text & "%'",
con)
adapater.Fill(ds)
DataGridView1.DataSource = ds.Tables(0)
con.Close()
TextBox1.Clear()
TextBox2.Clear()
TextBox3.Clear()
Catch ex As Exception
End Try
End Sub

vi. Manipulation des Boutons de Gestion : Le Bouton Fermer :

End
 TP1 – Contrôle Continu : Enoncé

Mini Application de Gestion des Produits. TAF :

1) Sois ta table « Produit » à créer dans phpMyAdmin et définie comme suis :

o idProduit : Type INT. Index = PRIMARY. Cocher A_I pour AUTO_INCREMENT ;

libProduit : Type VARCHAR(50) ; stockProduit : Type INT ; seuilProduit : Type INT ;
prix_unitProduit : Type INT ;

2) Insérer les données suivantes :

o Produit 1 : CLAVIER – 0 – 5 – 5000 ;

o Produit 2 : SOURIS – 0 – 10 – 3000 ;

o Produit 3 : LAPTOP – 0 – 15 – 45000 ;

o Produit 4 : IMPRIMANTE – 0 – 20 – 35000 ;

o Produit 5 : ECRAN ORDINATEUR – 0 – 25 – 100000.

3) Créez un nouveau projet Visual Studio et reproduisez la maquette suivante :

4) Insérer les codes des boutons NOUVEAU + AJOUTER + MODIFIER + SUPPRIMER + TRIER
+ AFFICHER + FERMER + ELEMENT TEXTBOX RECHERCHER ;
 5) Pour Les Autres Boutons : ALERTE : Afficher la liste des produits qui doivent faire l’objet d’une
nouvelle livraison. Un produit doit faire faire l’objet d’une nouvelle livraison si sa quantité stock
est inférieur à sa quantité seuil ; LIVRAISON : augmente la quantité stock d’un produit
sélectionné et met à jour le stock ; SORTIE : diminue la quantité stock d’un produit sélectionné et
met à jour le stock.

TP1 – Contrôle Continu : Eléments de Correction (Liste des Etapes de Travail)

1) phpMyAdmin :
a) Lancer votre serveur web et placez – vous sur le panneau de phpMyAdmin. Onglet base de
données et donner le nom à votre nouvelle base de données et cliquez sur créer afin de
créer une base de données vide du nom de « gestionProduit» ;
b) Une fois la base de données créée, donner un nom à votre nouvelle table en précisant le
nombre de colonne de la table et cliquer sur exécuter ;
c) Etant sur la table, on passe donc à l’édition des colonnes en donnant le nom de la colonne,
le type de données de la colonne, la taille si possible et cliquer sur le bouton sauvegarder
afin d’enregistrer la structure de votre table. Si la colonne est une clé primaire,
sélectionnez dans INDEX, le mot PRIMARY et si cette colonne est de type INT, cochez la
case A_I ;
d) La table étant donc créer, insérer les données test sur la table. Onglet insérer et ajouter
quelques lignes de données dans votre table de gestion.
2) Code Associé A Chaque Elément de La Fenêtre :

Imports MySql.Data.MySqlClient
Public Class Form1
Dim str As String = "server=localhost; uid=root; pwd=; database=gestionProduit"
Dim con As New MySqlConnection(str)

Sub MaLoad()
Dim query As String = "select * from Produit"
Dim adpt As New MySqlDataAdapter(query, con)
Dim ds As New DataSet()
adpt.Fill(ds, "Emp")
DataGridView1.DataSource = ds.Tables(0)
con.Close()
TextBox1.Clear()
TextBox2.Clear()
TextBox3.Clear()
TextBox4.Clear()
TextBox5.Clear()
End Sub
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
MaLoad()

End Sub

Private Sub Button5_Click(sender As Object, e As EventArgs) Handles Button5.Click

Close()

End Sub
 Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
TextBox1.Clear()
TextBox2.Clear()
TextBox3.Clear()
TextBox4.Clear()
TextBox5.Clear()
End Sub

Private Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click

Dim query As String = "select * from Produit order by libProduit"
Dim adpt As New MySqlDataAdapter(query, con)
Dim ds As New DataSet()
adpt.Fill(ds, "Emp")
DataGridView1.DataSource = ds.Tables(0)
con.Close()
TextBox1.Clear()
TextBox2.Clear()
TextBox3.Clear()
TextBox4.Clear()
TextBox5.Clear()
End Sub

Private Sub DataGridView1_CellClick(sender As Object, e As DataGridViewCellEventArgs) Handles

DataGridView1.CellClick
Dim row As DataGridViewRow = DataGridView1.CurrentRow
Try
TextBox1.Text = row.Cells(0).Value.ToString()
TextBox2.Text = row.Cells(1).Value.ToString()
TextBox3.Text = row.Cells(2).Value.ToString()
TextBox4.Text = row.Cells(3).Value.ToString()
TextBox5.Text = row.Cells(4).Value.ToString()

Catch ex As Exception

End Try
End Sub

Private Sub Button4_Click(sender As Object, e As EventArgs) Handles Button4.Click

Dim cmd As MySqlCommand
con.Open()
Try
cmd = con.CreateCommand
cmd.CommandText = "insert into
Produit(libProduit,QteStockProduit,QteSeuilProduit,PrixProduit)values(@libProduit,@QteStockProdui
t,@QteSeuilProduit,@PrixProduit);"
cmd.Parameters.AddWithValue("@libProduit", TextBox2.Text)
cmd.Parameters.AddWithValue("@QteStockProduit", TextBox3.Text)
cmd.Parameters.AddWithValue("@QteSeuilProduit", TextBox4.Text)
cmd.Parameters.AddWithValue("@PrixProduit", TextBox5.Text)
cmd.ExecuteNonQuery()
MaLoad()
Catch ex As Exception

End Try
End Sub

Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click

Dim cmd As MySqlCommand
con.Open()
Try
cmd = con.CreateCommand()
cmd.CommandText = "delete from Produit where idProduit=@idProduit;"
cmd.Parameters.AddWithValue("@idProduit", TextBox1.Text)
cmd.ExecuteNonQuery()
MaLoad()
Catch ex As Exception
 End Try
End Sub

Private Sub Button6_Click(sender As Object, e As EventArgs) Handles Button6.Click

Dim cmd As MySqlCommand
con.Open()
Try
cmd = con.CreateCommand
cmd.CommandText = "update Produit set libProduit=@libProduit,
QteStockProduit=@QteStockProduit, QteSeuilProduit=@QteSeuilProduit, PrixProduit=@PrixProduit
where idProduit=@idProduit;"
cmd.Parameters.AddWithValue("@idProduit", TextBox1.Text)
cmd.Parameters.AddWithValue("@libProduit", TextBox2.Text)
cmd.Parameters.AddWithValue("@QteStockProduit", TextBox3.Text)
cmd.Parameters.AddWithValue("@QteSeuilProduit", TextBox4.Text)
cmd.Parameters.AddWithValue("@PrixProduit", TextBox5.Text)
cmd.ExecuteNonQuery()
MaLoad()
Catch ex As Exception

End Try
End Sub

Private Sub TextBox6_TextChanged(sender As Object, e As EventArgs) Handles

TextBox6.TextChanged
Dim adapater As MySqlDataAdapter
Dim ds As New DataSet
Try
con.Open()
adapater = New MySqlDataAdapter("select * from Produit where libProduit like '%" &
TextBox6.Text & "%'", con)
adapater.Fill(ds)
DataGridView1.DataSource = ds.Tables(0)
con.Close()
TextBox1.Clear()
TextBox2.Clear()
TextBox3.Clear()
TextBox4.Clear()
TextBox5.Clear()

Catch ex As Exception

End Try
End Sub

Private Sub Button7_Click(sender As Object, e As EventArgs) Handles Button7.Click

Dim query As String = "select * from Produit where QteStockProduit < QteSeuilProduit"
Dim adpt As New MySqlDataAdapter(query, con)
Dim ds As New DataSet()
adpt.Fill(ds, "Emp")
DataGridView1.DataSource = ds.Tables(0)
con.Close()
TextBox1.Clear()
TextBox2.Clear()
TextBox3.Clear()
TextBox4.Clear()
TextBox5.Clear()
End Sub

Private Sub Button8_Click(sender As Object, e As EventArgs) Handles Button8.Click

MaLoad()

End Sub

Private Sub Button9_Click(sender As Object, e As EventArgs) Handles Button9.Click

Dim n1 = Val(TextBox3.Text)
Dim n2 = Val(TextBox7.Text)
 Dim cmd As MySqlCommand
con.Open()
Try
cmd = con.CreateCommand
cmd.CommandText = "update Produit set QteStockProduit=@QteStockProduit where
idProduit=@idProduit;"
cmd.Parameters.AddWithValue("@idProduit", TextBox1.Text)
cmd.Parameters.AddWithValue("@QteStockProduit", n1 + n2)
cmd.ExecuteNonQuery()
MaLoad()
TextBox7.Clear()

Catch ex As Exception

End Try
End Sub

Private Sub Button10_Click(sender As Object, e As EventArgs) Handles Button10.Click

Dim n1 = Val(TextBox3.Text)
Dim n2 = Val(TextBox8.Text)

Dim cmd As MySqlCommand

con.Open()
Try
cmd = con.CreateCommand
cmd.CommandText = "update Produit set QteStockProduit=@QteStockProduit where
idProduit=@idProduit;"
cmd.Parameters.AddWithValue("@idProduit", TextBox1.Text)
cmd.Parameters.AddWithValue("@QteStockProduit", n1 - n2)
cmd.ExecuteNonQuery()
MaLoad()
TextBox8.Clear()

Catch ex As Exception

End Try
End Sub
End Class
 TP1 - Prototype Sujet Examen - Enoncé

TRAVAUX PRATIQUES SYSTÈME D’INFORMATION ET PROGRAMMATION ORIENTÉE

OBJET

OUTILS : Power AMC, WAMPSERVER OU XAMPSERVER, VISUAL STUDIO POUR .NET OU

NETBEANS pour JAVA.

Partie A : SI Et BDD : 60Points

Enoncé : Une entreprise est organisée par divisions implantées géographiquement en des localités
distinctes. Chaque division est identifiée par un numéro et possède un nom. Les salariés de l'entreprise
sont identifiés par leur numéro de matricule, travaillent dans une division où ils exercent une fonction. Ils
perçoivent un salaire. Les salariés sont regroupés dans des équipes représentant des pôles de compétence.
Il est possible que certains salariés ne travaillent dans aucune division.

Un projet, coordonné par un salarié, le chef de projet, est caractérisé par un numéro, une
appellation, un thème, des dates de début et de fin de réalisation. Les projets sont réalisés pour des clients
à une date d'échéance. Un projet est constitué de tâches caractérisées par un coût. Des salariés participent
à tout ou partie de ces tâches entre deux dates déterminées. Les salariés utilisent des matériels identifiés
par un numéro, désignés par un nom, caractérisés par leur type et la référence du constructeur.

Section 1 : Analyse du cas avec la méthode MERISE : 40Points

En vous servant de Power AMC, réaliser le modèle conceptuel des données (MCD) et le modèle
logique de données relationnel (MLDR) en précisant les suppositions que vous serez éventuellement
amenés à faire et les impacts que ceux-ci auront sur l’utilisateur du système.

Section 2 : Administration de BD avec MySQL (Wampserver ou XampServer) : 20Points

En vous servant du SGBD MySQL du Package WampServer, faites les opérations suivante : -
Créer la Base de données : Gestion_Projet; - Créer les tables découlant du MCD défini à la Section 1 ; -
Insérer les données de test dans les différentes tables permettant de sauvegarder et exporter votre base de
données.
Partie B : PROGRAMMATION ORIENTEE OBJET : 40Points

Section 1 : Translation du MCD en diagramme de classe : 5Points

En vous servant du MCD de la partie A section 1, créé à partir de Visual Studio pour .NET ou
NETBEANS pour JAVA le diagramme de classe de notre système.

Section 2 : Conception des IHM : 10Points

A partir de Visual Studio pour .NET ou NETBEANS pour JAVA concevez des interfaces
ergonomiques pour :

 le formulaire page connexion, le formulaire servant de menu principal avec des commandes de
l’application, les formulaires de gestion et enregistrement dans les tables projet, client. Avec les
boutons.

Section 3 : Interfaçage avec la BD à l’aide de .NET ou JAVA : 25Points

A partir de .Net ou Java, effectuez une connexion sur la base de données «Gestion_Projet » définie
à la section 2 de la partie A et Affichez à partir de l’interface « afficher la liste des projets », la liste des
salariés et des clients de votre base de données. Traiter des évènements « clique » dans les boutons de
l’interface de gestion des projets et dans la table client également.
TP1 - Prototype Sujet Examen - Eléments de Correction

Partie A :

Section 1 : MCD sur PowerAMC

Cl ient
Appartenir Matériel
idCli ent
1,n Nom Client NumeroM atéri el
NomM atéri el
Projet LibelleT ypeM atériel
i dProjet 1,1 ReferenceConstructeurM atéri el
AppelationProjet ...
T hem eProjet 1,1
DateDebutProjet 1,n Possèder 1,1 T ache
DateEcheanceProjet idT ache 1,n
DateFinProjet LibelleT ache
... CoutT ache
1,n ... Util iser
1,1

Coordoner Participer
Fonction
DatePartici pation
CodeFonction
Libell eFonction
1,n

Avoir
1,n 1,n 1,1

Employe
T ravaill er
0,1 M atri culeEm ploye 1,1
Nom Em pl oye Regrouper

Division
Num eroDivi sion 1,n 1,n
Nom Di vi sion
Equipe
Ville i dEquipe
1,1
idVi lle Nom Equipe
1,n Libell eVille Li bel leCom petenceEquipe
...
Local iser

MLD Sur PowerAMC

 M atéri el
Cl i ent # Num eroM a téri el
App arten i r # i dCl i e nt i dT ache
Uti l i ser
Nom Cl i ent Nom M atéri el
Li b el l eT ypeM até ri e l
ReferenceConstructeu rM atéri el
...

T ache
Proj et
Possèder # i dT ache
# i dProj et i dP roj et
M atri cul eEm pl oye Li b el l eT ache
i dCl i ent CoutT ache Parti ci per
App el ati onProj et ...
T he m eProj e t
DateDebutProj et Coordoner
DateEcheanceProj et
DateFi nProj et
...

Foncti o n
# CodeFoncti on Parti ci per
Avo i r
Li bel l eFoncti o n # M atri cul eEm pl oye
P arti ci per
# i dT ache
DateParti ci p ati on

Em pl oye
# M atri cul eEm pl oye
Num eroDi vi si o n Regrouper
Di vi si o n T ravai l l er CodeFoncti on
# Num eroDi vi si on i dEqui pe
i d Vi l l e Nom Em pl oye
Nom Di vi si on ...
... Equi pe
# i dEqui pe
Vi l l e Nom Equ i pe
# i dVi l l e Li b el l eCom peten ce Equi pe
Local i se r ...
Li bel l eVi l l e

Section 2 : La Base de Données Avec phpMyAdmin

 Schématiser le MCD, le vérifier et générer le modèle physique de données (Menu Outils,

commande générer un modèle physique de données) ;
 Etant sur le MPD, faites Menu SGBD et commande générer la base de données ;
 Une fois le fichier SQL de la base de données généré, l’éditer en ajoutant 6fois le mot clé
AUTO_INCREMENT devant les clés primaire de type INT (inscrire le mot clé entre le type INT
et la clause NOT NULL) ;
 Lancez phpMyAdmin, créer une base de données vide et importer le fichier SQL et obtenez un
schéma de données comme suit :
Partie B :

Section 1 : Diagramme de Classe : (MCD, Menu Outil, Commande Générer Un MOO :
T ache
1..* + i dT ache : i nt 1..1
1..1 + Libel l eT ache : j ava.lang.Stri ng 1..*
+ CoutT a che : i nt
Proj et M atéri el
+ idProj e t : i nt + NumeroM atéri el : java.l ang.String
+ Appel a ti onProj et : j ava.lang.Stri ng 1..* + NomM atéri el : java.l ang.String
+ T heme Proj et : j ava.lang.Stri ng + Li b el leT ypeMatéri el : java.l ang.String
1..* + DateDebutProj et : j ava.util .Date + ReferenceConstructeurM atéri el : java.l ang.String
+ DateEcheance Proj et : j ava.util .Date
+ DateFi nProjet : j ava.util .Date
1..1

Cl i ent Parti ci per

+ idCl ient : i nt 1..*
+ DateParti ci pati on : j ava.util .Date
+ NomCl i ent : j ava.lang.Stri ng
1..*

Em pl oye
Foncti on
+ M atri cule Employe : j ava.lang.Stri ng 1..*
1..1 + CodeFoncti on : j ava.l ang.String
+ NomEmp l oye : j ava.lang.Stri ng 1..1 + Li bel le Foncti on : j ava.l ang.String

1..* 1..*

Di vi si on
+ Nume roDi vi si on : i nt 0..1
Equi p e
+ NomDi vi si on : j ava.l an g.String
+ i dEquipe : i nt
+ No mEqui pe : j ava.l ang.Stri ng
Vi l l e 1..1
+ Li bel l eCom petenceEqui pe : j ava.l ang.Stri ng
+ idVi ll e : int
1..*
1..1 + Li bel l eVi ll e : java.l ang.String

Section 2 : Interfaces Homme / Machine

Fenêtre de Login :

Fenêtre Menu Principal :

Formulaire Gestion Client :

TP2 : TP Programmation Web Et Mobile

TP2 – Exercice 1 : Enoncé – Formulaire HTML5 Avec Application Feuille de Style CSS
TP2 – Exercice 1 : Eléments de Correction

1) Le Fichier CSS :

font-family: Avenir, sans-serif;

}
fieldset{
background-color: RGBa(240, 160, 0, 0.2);
}
legend{
font-weight: bold;
}
.champ{
margin-bottom: 10px;
}
textarea{
width: 80%;
height: 100px;
}
input{
width: 150px;
}
input[type="radio"], input[type="checkbox"]{
width: auto;
}
input[type="submit"]{
width: 100px;
}

2) Le Fichier HTML5 :

<!DOCTYPE html>
<html>
<head>
<title>Cours HTML et CSS</title>
<meta charset= "utf-8">
<link rel="stylesheet" href="cours.css">
</head>

<body>
<form method="post" action="form.php">
<fieldset>
<legend>Informations personnelles :</legend>
<div class="champ">
<label for="nom">Nom de famille :</label>
<input type="text" id="nom" name="nom">
</div>
<div class="champ">
<label for="prenom">Prénom :</label>
<input type="text" id="prenom" name="prenom">
</div>
<div class="champ">
<label for="mail">Adresse mail :</label>
<input type="email" id="mail" name="mail">
</div>
<div class="champ">
<label for="age">Age :</label>
<input type="number" id="age" name="age">
</div>
<div class="champ">
<input type="radio" id="h" name="sexe" value="homme">
<label for="h">Homme</label>
<input type="radio" id="f" name="sexe" value="femme">
<label for="f">Femme</label>
</div>
<div class="champ">
<label for="pays">Pays de résidence :</label>
 <select id="pays" name="pays">
<optgroup label="Europe">
<option value="france">France</option>
<option value="belgique">Belgique</option>
<option value="suisse">Suisse</option>
</optgroup>
<optgroup label="Afrique">
<option value="algerie">Algérie</option>
<option value="tunisie">Tunisie</option>
<option value="maroc">Maroc</option>
<option value="madagascar">Madagascar</option>
<option value="benin">Bénin</option>
<option value="togo">Togo</option>
</optgroup>
<optgroup label="Amerique">
<option value="canada">Canada</option>
</optgroup>
</select>
</div>
</fieldset>
<fieldset>
<legend>Compétences / expérience :</legend>
<div class="champ">
<input type="checkbox" id="html" name="competences" value="html">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="competences" value="css">
<label for="css">CSS</label>
<input type="checkbox" id="js" name="competences" value="javascript">
<label for="js">JavaScript</label>
<input type="checkbox" id="php" name="competences" value="php">
<label for="php">PHP</label>
<input type="checkbox" id="sql" name="competences" value="sql">
<label for="sql">SQL</label>
<input type="checkbox" id="seo" name="competences" value="seo">
<label for="seo">SEO</label>
</div>
<div class="champ">
<textarea name="exp" placeholder="Décrivez une expérience pro"></textarea>
</div>
</fieldset>
<fieldset>
<legend>Validation :</legend>
<div class="champ">
<label for="pass">Choisissez un mot de passe :</label>
<input type="password">
</div>
<input type="submit" value="Envoyer">
</fieldset>
</form>
</body>

TP2 – Exercice 2 : Enoncé

 L’objectif dans cette section du cours est la création et l’exécution des scripts écrits en PHP et ceci
permettra la manipulation et l’exploitation de la base de données MySQL. Pour chaque table présente
dans votre base de données, et de manière générale et ordonnée (capture image en ordre désordre) :

TP2 – Exercice 2 : Eléments de Correction (Liste des Fichiers A Créer Par Etape)
  Etape 1 : Créer un fichier «  Connecion.php » : qui permettra de se connecter à la base de
données et en cas de mauvais paramètres de connexion, le fichier devra renvoyer un message
d’erreur :

 Etape 2  : Créer le fichier « Liste.php » : Ce fichier permettra d’afficher l’ensemble des

informations enregistrées dans la table présente dans votre base de données. Les éléments de ce
fichier sont entre autres : L’inclusion du fichier « Connecion.php » permettant de vérifier si
l’utilisateur est bel et bien connecté à la base de données ; Créer une variable résultat permettant
de récupérer le résultat de la requête d’affichage des informations de la base de données ; Créer un
tableau associatif qui permettra de représenter dans un tableau l’ensemble des informations de la
table. Et de manière générale, ce tableau sera toujours sous la forme suivante :

Action
Colonne 1 Colonne 2 Colonne N
Editer (Modifier) Supprimer
Lien Pour Lien Pour
Valeur Colonne 1 Valeur Colonne 2 Valeur Col. N
Modifier Supprimer
 Etape 3 : Créer le fichier « Nouveau.php » : qui est un formulaire permettant à l’utilisateur
d’insérer les valeurs et de cliquer sur le bouton valider ou ajouter ou insérer afin d’ajouter une
nouvelle ligne de données dans la table.
 Etape 4 : Créer le fichier « Insert.php » : qui est un script php permettant de récupérer les
valeurs du formulaire et d’exécuter la commande SQL « INSERT ». après insertion, l’utilisateur
doit automatiquement se rediriger vers la liste afin de visualiser le nouvel ajout.
 Etape 5 : Créer le fichier « Supprimer.php » : qui est un script php permettant de supprimer
l’information sur la ligne de données souhaitée mais surtout doit demander une confirmation à
l’utilisateur (gestion de l’évènement « OnClick » de JavaScript)

 Etape 6  : Créer le fichier « Editer.php » : qui est un formulaire mais en mode édition
oumodification permettant à l’utilisateur de modifier les valeurs anciennes avec les nouvelles et de
cliquer sur le bouton modifier ou éditer afin de valider la mise à jour de la ligne de données
souhaitée dans la table.

 Etape 7 : Créer le fichier « Update.php » : qui est un script php permettant de validant la mise à
jour et / ou les modifications sur une ligne de données déjà existante.
 TP2 – Contrôle Continu : Enoncé

TRAVAUX PRATIQUES PROGRAMMATION WEB ET MOBILE

Enoncé : Il s'agit de définir un schéma de base de données, et d'y insérer quelques informations. TAF :

1. Créez les tables du schéma 'StationVoyage donné ci-dessous. Les attributs en gras sont les clés
primaires. Choisissez les types de données qui vous semblent adaptés.

 Station (IdStation, NomStation, Capacité) ;

 Activite (IdActivite, #IdStation, Libellé, Prix) ;

 Client (IdClient, Nom, Prénom, Ville, Solde) ;

 Sejour (#IdClient, #IdActivité, DateDébut, NbrePlaces).

2. Insérez dans la base de données, les données se trouvant ci-dessous avec des ordres INSERT.

Station Activite IdActivité IdStatio Libellé Prix

IdStattio NomStation Caparité
n n

1 KRIBI 100 1 1 Voile 10000

2 LIMBE 90 2 3 Plongée 3000

3 DOUALA 45 3 1 Nage 5000

4 2 Camping 2000

Client Sejour
idClien
IdClien Nom Prénom Ville Solde IdActivité Début NbrePlaces
t
t
101 1 03-07-2012 2
101 Ben sassi Salah Kairouan 2000
102 2 15-07-2012 1
102 Friwa Mokhtar Bizerte 1800
103 3 18-07-2012 3
103 Jlassi Khaoula Kef 2200

Dans la suite de cet exercice, on va créer une petite application pour tester la connexion
PHP/MySQL

4. Créez un formulaire permettant de saisir les informations sur un client ;

5. Faire une page web permettant d’afficher la liste des séjours de la station.
 TP1 – Contrôle Continu : Eléments de Correction

1) En se servant des règles de passage du MCD au Modèle Logique, Construire le MCD sur format
papier et le Schématiser, le vérifier et générer le modèle physique de données (Menu Outils,
commande générer un modèle physique de données) :

Le MCD Sur PowerAMC :

Composer

1,1

Activité
idActivité <pi> Entier <O> 1,n
LibelleActivité Caractère variable (100)
PrixActivité Entier
... Station
idStation <pi> Entier <O>
NomStation Caractère variable (100)
CapaciteStation Entier
VilleStation Caractère variable (100)

1,n
Client
idClient <pi> Entier <O>
1,n Séjourner
NomClient Caractère variable (100)
PrenomClient Caractère variable (25) DateDébutSéjour Date
VilleClient Caractère variable (50) NbrePlace Entier
SoldeClient Entier
...

Le MPD Sur PowerAMC :

Activité
idActivité int <pk>
idStation int <fk> Station
FK_COMPOSER
LibelleActivité varchar(100) idStation int <pk>
PrixActivité int NomStation varchar(100)
...
CapaciteStation int
VilleStation varchar(100)
...

FK_SEJOURNER2

Séjourner
idClient int <pk,fk1>
Client idStation int <pk,fk2>
FK_SEJOURNER DateDébutSéjour date
idClient int <pk>
NbrePlace int
NomClient varchar(100) ...
PrenomClient varchar(25)
VilleClient varchar(50)
SoldeClient int
...
 2) Etant sur le MPD, faites Menu SGBD et commande générer la base de données. Une fois le fichier
SQL de la base de données généré, l’éditer en ajoutant 3fois le mot clé AUTO_INCREMENT
devant les clés primaire de type INT (inscrire le mot clé entre le type INT et la clause NOT
NULL)

/*==============================================================*/

/* Nom de SGBD : MySQL 5.0 */

/*==============================================================*/

/*==============================================================*/

/* Table : ACTIVITE */

/*==============================================================*/

create table ACTIVITE

IDACTIVITE int AUTO_INCREMENT not null,

IDSTATION int not null,

LIBELLEACTIVITE varchar(100),

PRIXACTIVITE int,

primary key (IDACTIVITE)

);

/*==============================================================*/

/* Table : CLIENT */

/*==============================================================*/

create table CLIENT

IDCLIENT int AUTO_INCREMENT not null,

NOMCLIENT varchar(100),

PRENOMCLIENT varchar(25),

VILLECLIENT varchar(50),
 SOLDECLIENT int,

primary key (IDCLIENT)

);

/*==============================================================*/

/* Table : SEJOURNER */

/*==============================================================*/

create table SEJOURNER

IDCLIENT int not null,

IDSTATION int not null,

DATEDEBUTSEJOUR date,

NBREPLACE int,

primary key (IDCLIENT, IDSTATION)

);

/*==============================================================*/

/* Table : STATION */

/*==============================================================*/

create table STATION

IDSTATION int AUTO_INCREMENT not null,

NOMSTATION varchar(100),

CAPACITESTATION int,

VILLESTATION varchar(100),

primary key (IDSTATION)

);

alter table ACTIVITE add constraint FK_COMPOSER foreign key (IDSTATION)

 references STATION (IDSTATION) on delete restrict on update restrict;

alter table SEJOURNER add constraint FK_SEJOURNER foreign key (IDCLIENT)

references CLIENT (IDCLIENT) on delete restrict on update restrict;

alter table SEJOURNER add constraint FK_SEJOURNER2 foreign key (IDSTATION)

references STATION (IDSTATION) on delete restrict on update restrict;

3) Manipulation dans phpMyAdmin : Lancez phpMyAdmin, créer une base de données vide 5(au
nom de bdd_gestionstation) et importer le fichier SQL et obtenez un schéma de données comme
suit :

4) Programmation des Scripts PHP :

a) Créer un espace de travail : sur le dossier web de votre serveur, créer un dossier
« StationVoyage » et créer vos scripts PHP à l’intérieur ;
b) Le script PHP pour se connecter à la base de données :
c) Le script PHP pour le formulaire afin de saisir les informations sur un nouveau client :
d) Le script PHP pour la page web permettant d’afficher la liste des séjours de la station :
 TP1 - Prototype Sujet Examen - Enoncé

TRAVAUX PRATIQUES PROGRAMMATION WEB ET MOBILE

FORME DE L’EPREUVE : EPREUVE PRATIQUE ;

DUREE DE L’EPREUVE : 05 heures ;

CREDIT : 7 ;

L’épreuve comporte deux parties indépendantes qui doivent être traitées et corrigées sur
ordinateur. Outils : un ordinateur contenant les logiciels suivants : Editeur Notepad ++, Wamp Server
pour MySQL, HTML5, CS3, ANGULAR VERSION X (Connexion Internet momentanément pour
installer les packages nécessaires à la programmation mobile).

Partie A : Programmation Web Dynamique – 70Points

Enoncé : En votre qualité future de technicien supérieur en informatique option génie logiciel,
l’administration de l’enseignement supérieur au Cameroun MINESUP vous demande de réaliser une mini
application permettant de gérer de manière simple un répertoire téléphonique. Un répertoire est constitué
d’un ensemble de contacts. Chaque contact est caractérisé par un numéro ou ID, un nom, une adresse
email, un numéro de téléphone à 9caractères. L’ensemble des contacts sera sauvegardé dans une base de
données nommée « dbgesion_MINESUP ». TRAVAIL A FAIRE :

1) Créez cette base de données en utilisant phpmyAdmin de WAMPSERVER OU XAMPSERVER ;

2) Créez la ou les différentes tables de la base de données ;

3) Insérer les données de test dans les différentes tables permettant de sauvegarder et exporter votre
base de données ;

4) Créer un projet web « gestionContact » et le placer dans votre répertoire web. Dans ce dossier sera
créé l’ensemble des pages HTML ou PHP permettant d’effectuer un ensemble de manipulations ;

5) Créez un script PHP « liste_contact.php » permettant d’afficher l’ensemble des contacts de la base
de données ;

6) Créez une page PHP « nouveau_contact.php » contenant le formulaire d’enregistrement d’un

contact en prévoyant un bouton « Valider ».

7) Mettez en forme la page HTML en utilisant le CSS. Cette mise en forme dépendra de l’ingénierie
de chaque étudiant ;
 8) Configurez la page web avec un fichier « insertContact.php » qui permettra d’enregistrer les
contacts dans la table « contact » de la base de données à partir du formulaire ;

9) Enregistrez 03 contacts dans la base de données à partir du formulaire.

10) Configurez la page web avec un fichier « supprimerContact.php » qui permettra de supprimer un
contact sélectionné dans la liste des contacts affiché dans la page « liste_contact.html ».

Partie B : Développement d’Application Mobile – 30Points

 Créer un projet simplifié nommé « FormContact » avec la suite Angular X, NodeJS, Apache
Cordova, Ionic permettant d’afficher un formulaire de login à partir d’un Terminal Mobil
Android. Ce projet devra être crée sur le bureau. Et à la fin, chercher à avoir l’un des écrans ci –
dessous :
 TP1 - Prototype Sujet Examen - Eléments de Correction

Partie A : Programmation Web Dynamique :

1) Création de la base de données en utilisant phpmyAdmin de WAMPSERVER OU

XAMPSERVER :

 Lancer votre serveur web et placez – vous sur le panneau de phpMyAdmin. Onglet base de
données et donner le nom à votre nouvelle base de données et cliquez sur créer afin de créer une
base de données vide du nom de « dbgesion_MINESUP » :

2) Création de la table :

 Une fois la base de données créée, donner un nom à votre nouvelle table en précisant le nombre de
colonne de la table et cliquer sur exécuter ;
 Etant sur la table, on passe donc à l’édition des colonnes en donnant le nom de la colonne, le type
de données de la colonne, la taille si possible et cliquer sur le bouton sauvegarder afin
d’enregistrer la structure de votre table. Si la colonne est une clé primaire, sélectionnez dans
INDEX, le mot PRIMARY et si cette colonne est de type INT, cochez la case A_I ;

3) Insérer les données de test dans la table de données : La table étant donc créer, insérer les données
test sur la table. Onglet insérer et ajouter quelques lignes de données dans votre table de gestion.
4) Création de la page PHP « liste_contact.php » permettant d’afficher l’ensemble des contacts de la
base de données :

5) Création d’une page PHP « nouveau_contact.php » contenant le formulaire d’enregistrement d’un

contact en prévoyant un bouton « Valider » :
6) Script PHP « insertContact.php » qui permettra d’enregistrer les contacts dans la table « contact »
de la base de données à partir du formulaire :

7) Enregistrez 03 contacts dans la base de données à partir du formulaire :

 8) Script PHP « supprimerContact.php » qui permettra de supprimer un contact sélectionné dans la
liste des contacts affiché dans la page « liste_contact.php » :

Partie B : Développement d’Application Mobile : NB : Avoir Une Connexion Internet Fluide Mais
Stable

1) Installer Et Tester La Version Installée de Angular Js :

a) Sous MS Windows Et Sur La Racine Du Disque C, Créer Un Dossier MOBILE, et Lancez
votre invite de commande Windows en mode administrateur. Placez Vous Sur Ce Dossier
et tapez les commandes suivantes : npm install –g@angular / cli@latest ou npm install -g
@angular/cli (Valide Sur Le Bouton Entrée du Clavier) ;
 b) Ensuite tapez : ng new FormContact : et suivez les prochaines étapes

2) Edition du Formulaire de Login : Liste des Fichiers A Manipuler : Arborescence Projet Ionic Dans
Votre Dossier Projet Ionic (3 Fichiers Principalement Nous Intéressent : Le Fichier
home.page.html, Le Fichier home.page.scss, Le Fichier variables.scss)
a) Dans Le Fichier home.page.html Tapez Ceci :
b) Dans Le Fichier home.page.scss Tapez Ceci :
 c) Dans Le Fichier variables.scss Tapez Ceci :

// Ionic Variables and Theming. For more info, please see:

// http://ionicframework.com/docs/theming/

/** Ionic CSS Variables **/

:root {

/** primary **/

--ion-color-primary: #0062FF;

--ion-color-primary-rgb: 56, 128, 255;

--ion-color-primary-contrast: #ffffff;

--ion-color-primary-contrast-rgb: 255, 255, 255;

--ion-color-primary-shade: #0062FF;
--ion-color-primary-tint: #0062FF;

/** secondary **/

--ion-color-secondary: #0cd1e8;

--ion-color-secondary-rgb: 12, 209, 232;

--ion-color-secondary-contrast: #ffffff;

--ion-color-secondary-contrast-rgb: 255, 255, 255;

--ion-color-secondary-shade: #0bb8cc;

--ion-color-secondary-tint: #24d6ea;

/** tertiary **/

--ion-color-tertiary: #7044ff;

--ion-color-tertiary-rgb: 112, 68, 255;

--ion-color-tertiary-contrast: #ffffff;

--ion-color-tertiary-contrast-rgb: 255, 255, 255;

--ion-color-tertiary-shade: #633ce0;

--ion-color-tertiary-tint: #7e57ff;

/** success **/

--ion-color-success: #10dc60;

--ion-color-success-rgb: 16, 220, 96;

--ion-color-success-contrast: #ffffff;

--ion-color-success-contrast-rgb: 255, 255, 255;

--ion-color-success-shade: #0ec254;

--ion-color-success-tint: #28e070;

/** warning **/

--ion-color-warning: #ffce00;

--ion-color-warning-rgb: 255, 206, 0;

--ion-color-warning-contrast: #ffffff;
--ion-color-warning-contrast-rgb: 255, 255, 255;

--ion-color-warning-shade: #e0b500;

--ion-color-warning-tint: #ffd31a;

/** danger **/

--ion-color-danger: #f04141;

--ion-color-danger-rgb: 245, 61, 61;

--ion-color-danger-contrast: #ffffff;

--ion-color-danger-contrast-rgb: 255, 255, 255;

--ion-color-danger-shade: #d33939;

--ion-color-danger-tint: #f25454;

/** dark **/

--ion-color-dark: #222428;

--ion-color-dark-rgb: 34, 34, 34;

--ion-color-dark-contrast: #ffffff;

--ion-color-dark-contrast-rgb: 255, 255, 255;

--ion-color-dark-shade: #1e2023;

--ion-color-dark-tint: #383a3e;

/** medium **/

--ion-color-medium: #989aa2;

--ion-color-medium-rgb: 152, 154, 162;

--ion-color-medium-contrast: #ffffff;

--ion-color-medium-contrast-rgb: 255, 255, 255;

--ion-color-medium-shade: #86888f;

--ion-color-medium-tint: #a2a4ab;

/** light **/

 --ion-color-light: #f4f5f8;

--ion-color-light-rgb: 244, 244, 244;

--ion-color-light-contrast: #000000;

--ion-color-light-contrast-rgb: 0, 0, 0;

--ion-color-light-shade: #d7d8da;

--ion-color-light-tint: #f5f6f9;

/** facebook **/

--ion-color-facebook: #3b5999;

--ion-color-facebook-rgb: 59, 89, 153;

--ion-color-facebook-contrast: #ffffff;

--ion-color-facebook-contrast-rgb: 255, 255, 255;

--ion-color-facebook-shade: #324b81;

--ion-color-facebook-tint: #476bb8;

/** google **/

--ion-color-google: #cd201f;

--ion-color-google-rgb: 245, 61, 61;

--ion-color-google-contrast: #ffffff;

--ion-color-google-contrast-rgb: 255, 255, 255;

--ion-color-google-shade: #cd201f;

--ion-color-google-tint: #cd201f;

.ion-color-facebook {

--ion-color-base: var(--ion-color-facebook) !important;

--ion-color-base-rgb: var(--ion-color-facebook-rgb) !important;

--ion-color-contrast: var(--ion-color-facebook-contrast) !important;

--ion-color-contrast-rgb: var(--ion-color-facebook-contrast-rgb) !important;

 --ion-color-shade: var(--ion-color-facebook-shade) !important;

--ion-color-tint: var(--ion-color-facebook-tint) !important;

.ion-color-google {

--ion-color-base: var(--ion-color-google) !important;

--ion-color-base-rgb: var(--ion-color-google-rgb) !important;

--ion-color-contrast: var(--ion-color-google-contrast) !important;

--ion-color-contrast-rgb: var(--ion-color-google-contrast-rgb) !important;

--ion-color-shade: var(--ion-color-google-shade) !important;

--ion-color-tint: var(--ion-color-google-tint) !important;

3) Test du Formulaire : Se replacer en mode administrateur sur l’invite de commande et sur le

dossier de votre projet mobile et tapez : ng serve ou ng serve –open

NB : A La Fin de Votre Code, Voici Ce Que Vous Déviez Obtenir : Le Résultat En Aperçu (L’Une
des Aperçu).