TP1 : TP Pratique de Système d’Information Et

Programmation Orientée Objet

TP1 – Exercice 1 : Enoncé

Client
Fournisseur
idClient <pi> Entier <O>
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 [Link] 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 :

[Link] = [Link] - [Link]

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

[Link] = [Link] * [Link]

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

[Link] = [Link] / [Link]

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

[Link] = [Link] % [Link]

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
TelephoneEtudiant
...
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
([Link]) 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 [Link]

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

[Link]()
Try
cmd = [Link]
[Link] = "insert into etudiant(matEtudiant,nomEtudiant,telEtudiant)values(@matEtudiant,@nomEtudiant,@telEtudiant);"

[Link]("@matEtudiant", [Link])
[Link]("@nomEtudiant", [Link])
[Link]("@telEtudiant", [Link])
 [Link]()
MaLoad()
Catch ex As Exception

End Try

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

Dim cmd As MySqlCommand

[Link]()
Try
cmd = [Link]
[Link] = "update etudiant set nomEtudiant=@nomEtudiant, telEtudiant=@telEtudiant where
matEtudiant=@matEtudiant;"
[Link]("@matEtudiant", [Link])
[Link]("@nomEtudiant", [Link])
[Link]("@telEtudiant", [Link])
[Link]()
MaLoad()
Catch ex As Exception
End Try

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

Dim cmd As MySqlCommand

[Link]()
Try
cmd = [Link]()
[Link] = "delete from etudiant where matEtudiant=@matEtudiant;"
[Link]("@matEtudiant", [Link])
[Link]()
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
[Link]()
adapater = New MySqlDataAdapter("select * from etudiant where nomEtudiant like '%" & [Link] & "%'", con)
[Link](ds)
[Link] = [Link](0)
[Link]()
[Link]()
[Link]()
[Link]()
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 [Link]
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()
[Link](ds, "Emp")
[Link] = [Link](0)
[Link]()
[Link]()
[Link]()
[Link]()
[Link]()
[Link]()
End Sub
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles [Link]
MaLoad()

End Sub

Private Sub Button5_Click(sender As Object, e As EventArgs) Handles [Link]

Close()

End Sub

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles [Link]

[Link]()
[Link]()
[Link]()
[Link]()
[Link]()
End Sub

Private Sub Button3_Click(sender As Object, e As EventArgs) Handles [Link]

Dim query As String = "select * from Produit order by libProduit"
Dim adpt As New MySqlDataAdapter(query, con)
Dim ds As New DataSet()
 [Link](ds, "Emp")
[Link] = [Link](0)
[Link]()
[Link]()
[Link]()
[Link]()
[Link]()
[Link]()
End Sub

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

[Link]
Dim row As DataGridViewRow = [Link]
Try
[Link] = [Link](0).[Link]()
[Link] = [Link](1).[Link]()
[Link] = [Link](2).[Link]()
[Link] = [Link](3).[Link]()
[Link] = [Link](4).[Link]()

Catch ex As Exception

End Try
End Sub

Private Sub Button4_Click(sender As Object, e As EventArgs) Handles [Link]

Dim cmd As MySqlCommand
[Link]()
Try
cmd = [Link]
[Link] = "insert into
Produit(libProduit,QteStockProduit,QteSeuilProduit,PrixProduit)values(@libProduit,@QteStockProdui
t,@QteSeuilProduit,@PrixProduit);"
[Link]("@libProduit", [Link])
[Link]("@QteStockProduit", [Link])
[Link]("@QteSeuilProduit", [Link])
[Link]("@PrixProduit", [Link])
[Link]()
MaLoad()
Catch ex As Exception

End Try
End Sub

Private Sub Button2_Click(sender As Object, e As EventArgs) Handles [Link]

Dim cmd As MySqlCommand
[Link]()
Try
cmd = [Link]()
[Link] = "delete from Produit where idProduit=@idProduit;"
[Link]("@idProduit", [Link])
[Link]()
MaLoad()
Catch ex As Exception

End Try
End Sub

Private Sub Button6_Click(sender As Object, e As EventArgs) Handles [Link]

Dim cmd As MySqlCommand
[Link]()
Try
cmd = [Link]
[Link] = "update Produit set libProduit=@libProduit,
QteStockProduit=@QteStockProduit, QteSeuilProduit=@QteSeuilProduit, PrixProduit=@PrixProduit
where idProduit=@idProduit;"
[Link]("@idProduit", [Link])
[Link]("@libProduit", [Link])
 [Link]("@QteStockProduit", [Link])
[Link]("@QteSeuilProduit", [Link])
[Link]("@PrixProduit", [Link])
[Link]()
MaLoad()
Catch ex As Exception

End Try
End Sub

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

[Link]
Dim adapater As MySqlDataAdapter
Dim ds As New DataSet
Try
[Link]()
adapater = New MySqlDataAdapter("select * from Produit where libProduit like '%" &
[Link] & "%'", con)
[Link](ds)
[Link] = [Link](0)
[Link]()
[Link]()
[Link]()
[Link]()
[Link]()
[Link]()

Catch ex As Exception

End Try
End Sub

Private Sub Button7_Click(sender As Object, e As EventArgs) Handles [Link]

Dim query As String = "select * from Produit where QteStockProduit < QteSeuilProduit"
Dim adpt As New MySqlDataAdapter(query, con)
Dim ds As New DataSet()
[Link](ds, "Emp")
[Link] = [Link](0)
[Link]()
[Link]()
[Link]()
[Link]()
[Link]()
[Link]()
End Sub

Private Sub Button8_Click(sender As Object, e As EventArgs) Handles [Link]

MaLoad()

End Sub

Private Sub Button9_Click(sender As Object, e As EventArgs) Handles [Link]

Dim n1 = Val([Link])
Dim n2 = Val([Link])

Dim cmd As MySqlCommand

[Link]()
Try
cmd = [Link]
[Link] = "update Produit set QteStockProduit=@QteStockProduit where
idProduit=@idProduit;"
[Link]("@idProduit", [Link])
[Link]("@QteStockProduit", n1 + n2)
[Link]()
MaLoad()
[Link]()

Catch ex As Exception
 End Try
End Sub

Private Sub Button10_Click(sender As Object, e As EventArgs) Handles [Link]

Dim n1 = Val([Link])
Dim n2 = Val([Link])

Dim cmd As MySqlCommand

[Link]()
Try
cmd = [Link]
[Link] = "update Produit set QteStockProduit=@QteStockProduit where
idProduit=@idProduit;"
[Link]("@idProduit", [Link])
[Link]("@QteStockProduit", n1 - n2)
[Link]()
MaLoad()
[Link]()

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

Client
Appartenir Matériel
idClient
1,n NomClient NumeroMatériel
NomMatériel
Projet LibelleT ypeMatériel
idProjet 1,1 ReferenceConstructeurMatériel
AppelationProjet ...
T hemeProjet 1,1
DateDebutProjet 1,n Possèder 1,1 T ache
DateEcheanceProjet idT ache 1,n
DateFinProjet LibelleT ache
... CoutT ache
1,n ... Utiliser
1,1

Coordoner Participer
Fonction
DateParticipation
CodeFonction
LibelleFonction
1,n

Avoir
1,n 1,n 1,1

Employe
T ravailler
0,1 MatriculeEmploye 1,1
NomEmploye Regrouper

Division
NumeroDivision 1,n 1,n
NomDivision
Equipe
Ville idEquipe
1,1
idVille NomEquipe
1,n LibelleVille LibelleCompetenceEquipe
...
Localiser

MLD Sur PowerAMC

M atéri el
Cl i ent # Num eroM atéri el
Apparteni r # i dCl i ent i dT ache
Uti l i ser
Nom Cl i ent Nom M atéri el
Li bel l eT ypeM atéri el
ReferenceConstructeurM atéri el
...

T ache
Proj et
Possèder # i dT ache
# i dProj et i dProj et
M atri cul eEm pl oye Li bel l eT ache
i dCl i ent CoutT ache Parti ci per
Appel ati onProj et ...
T hem eProj et
DateDebutProj et Coordoner
DateEcheanceProj et
DateFi nProj et
...

Foncti on
# CodeFoncti on Parti ci per
Avoi r
Li bel l eFoncti on # M atri cul eEm pl oye
Parti ci per
# i dT ache
DateParti ci pati on

Em pl oye
# M atri cul eEm pl oye
Num eroDi vi si on Regrouper
Di vi si on T ravai l l er CodeFoncti on
# Num eroDi vi si on i dEqui pe
i dVi l l e Nom Em pl oye
Nom Di vi si on ...
... Equi pe
# i dEqui pe
Vi l l e Nom Equi pe
# i dVi l l e Li bel l eCom petenceEqui pe
Local i ser ...
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..* + idT ache : int 1..1
1..1 + LibelleT ache : [Link] 1..*
+ CoutT ache : int
Projet Matériel
+ idProjet : int + NumeroMatériel : [Link]
+ AppelationProjet : [Link] 1..* + NomMatériel : [Link]
+ T hemeProjet : [Link] + LibelleT ypeMatériel : [Link]
1..* + DateDebutProjet : [Link] + ReferenceConstructeurMatériel : [Link]
+ DateEcheanceProjet : [Link]
1..1 + DateFinProjet : [Link]

Client Participer
+ idClient : int 1..*
+ DateParticipation : [Link]
+ NomClient : [Link]
1..*

Employe
Fonction
+ MatriculeEmploye : [Link] 1..*
1..1 + CodeFonction : [Link]
+ NomEmploye : [Link] 1..1 + LibelleFonction : [Link]

1..* 1..*

Division
+ NumeroDivision : int 0..1
Equipe
+ NomDivision : [Link]
+ idEquipe : int
+ NomEquipe : [Link]
Ville 1..1 + LibelleCompetenceEquipe : [Link]
+ idVille : int
1..*
1..1 + LibelleVille : [Link]
 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="[Link]">
</head>

<body>
<form method="post" action="[Link]">
<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 « [Link] » : 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 « [Link] » : 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 « [Link] » 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 « [Link] » : 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 « [Link] » : 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 « [Link] » : 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 « [Link] » : 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 « [Link] » : 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é IdStation Libellé Prix

IdStattion NomStation Caparité

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

IdClient Nom Prénom Ville Solde idClient IdActivité Début NbrePlaces

101 Ben sassi Salah Kairouan 2000 101 1 03-07-2012 2

102 Friwa Mokhtar Bizerte 1800 102 2 15-07-2012 1

103 Jlassi Khaoula Kef 2200 103 3 18-07-2012 3

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> FK_COMPOSER Station
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 « [Link] » 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 « [Link] » 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 « [Link] » 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 « [Link] » 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 [Link],
Le Fichier [Link], Le Fichier [Link])
a) Dans Le Fichier [Link] Tapez Ceci :
 b) Dans Le Fichier [Link] Tapez Ceci :

c) Dans Le Fichier [Link] Tapez Ceci :

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

// [Link]

/** 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).