0% ont trouvé ce document utile (0 vote)
4 vues7 pages

Formulaire de Paiement en Ligne et SQL

Le document décrit le développement d'un formulaire de paiement en ligne pour une entreprise d'électroménagers, incluant des spécifications pour le HTML, CSS et JavaScript. Il aborde également la création d'une base de données pour gérer les interventions des techniciens, avec des requêtes SQL pour manipuler les données. Enfin, il présente des modifications nécessaires pour intégrer des règles de gestion liées à des agences d'assurance pour les clients.

Transféré par

werghemmitakwa9
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
4 vues7 pages

Formulaire de Paiement en Ligne et SQL

Le document décrit le développement d'un formulaire de paiement en ligne pour une entreprise d'électroménagers, incluant des spécifications pour le HTML, CSS et JavaScript. Il aborde également la création d'une base de données pour gérer les interventions des techniciens, avec des requêtes SQL pour manipuler les données. Enfin, il présente des modifications nécessaires pour intégrer des règles de gestion liées à des agences d'assurance pour les clients.

Transféré par

werghemmitakwa9
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Exercice 1 :

Une entreprise spécialisée dans les appareils électroménagers a conçu le formulaire «


[Link] » pour permettre à ses clients de régler facilement leurs factures en ligne.

a- Ces figures représentent les codes HTML, CSS, JS développées afin de connecter à l’espace
payement
[Link]
onblur Se produit lorsque l'élément perd le focus
onclick Se produit lors d'un clic sur l'élément
onfocus Se produit lorsque l'élément reçoit le focus
oninput Se produit lors d'un changement de valeur
onload Se produit lorsque la page ou l'élément est chargé
onplay Se produit lorsque la lecture d'un élément multimédia commence
onpause Se produit lorsque la lecture d'un élément multimédia est mise en pause
onsubmit Se produit lorsqu'un formulaire est soumis
onchange Se produit lorsque la valeur d'un élément de formulaire change

1
[Link]

propriété CSS overflow; qui spécifie le comportement du


contenu lorsqu'il déborde de la boîte d'un élément
visible: Le contenu débordant est visible
hidden; Le contenu débordant est masqué
clip ;Semblable à hidden, sans événements
scroll; Barres de défilement ajoutées toujours
auto; Barres de défilement ajoutées si nécessaire

propriete CSS filter:


blur(px) : Applique un flou avec des unités en pixels.
grayscale(%) : Convertit en niveaux de gris avec des valeurs en %.
invert(%) : Inverse les couleurs avec des valeurs en pourcentage.
Rq;filter: invert(); /* Inversion des couleurs à 100% */

2
[Link]

Travail demandé :

I- HTML
Compléter (sur la figure de la page « [Link] » en respectant ces règles :

• Il faut prendre en considération lors de remplissage de la page qu’elle est liée avec une
feuille de styles ([Link]), un script JS([Link]) qui contient toutes les fonctions
appelés ,
• Dès le chargement de la page les champs mois et année seront remplis par le mois et
l’année courants (on utilisant la fonction « remplirAnneeMois() » développée dans
[Link] »)
• Si le champs nom perd le focus la fonction verifierNom() sera appelée et affiche un
message d’erreur dans la zone output.
• En cliquant sur le bouton envoyer la fonction payementForm() sera appelée.
• On souhaite ajouter la figure suivante dans la dernière ligne du formulaire

3
Le nom d’image est [Link] ayant comme légende « payement en ligne »
Compléter le code nécessaire pour effectuer cette tache

<img src="[Link]" alt="payement en ligne" id="imgPay">

II- CSS
Compléter la page [Link] afin de :
• Couper le débordement du paragraphe p en ajoutant une barre de défilement
horizontale.
• Ajouter à ce paragraphe une marge extérieure de 10px et une marge intérieure de 20px
• Les bordures des champs de formulaire seront supprimées lors du survol de la souris
• Inverser les couleurs de l’image lors de survol de la souris

III- javaScript
Compléter sur la figure [Link] :

• la fonction alpha(x) qui permet de vérifier si une chaine x est alphabétique ou non .
• la fonction verifierNom() qui permet de vérifier le nom puis affiche dans le champs output le
message « vérifier votre nom » si le nom n’est pas valide ou cache le message s’il est valide
• la fonction remplirAnneeMois() afin de remplir les champs mois et année par le mois et l’année
courants.
IV- BASE DE DONNEES
Partie A
Le responsable du SAV (Service après-vente) d’une entreprise d’électroménager a mis en place une petite
base de données afin de gérer les interventions de ces techniciens. Le modèle relationnel à la source de
cette base de données est le suivant :
Client (codecl, nomcl, prenomcl, adresse, cp, ville)
Produit (reference, désignation, prix)
Techniciens (codetec, nomtec, prenomtec, tauxhoraire)
Intervention (numero, dateinte, raison, codecl #, référence #, codetec #)
Ci-joint un tableau de description pour la base de données
attribut type description contrainte
Codecl Entier (auto incrémentée) Identifiant unique du client
nomcl Chaine de 20 caractères Nom du client obligatoire
prenomcl Chaine de 20 caractères Prenom du client obligatoire
adresse Chaine de 255 caractères Adresse du client obligatoire
cp Entier de taille 4 Code postal du client Entre 1000 et 9000
Ville Chaine de 255 caractères Ville du client obligatoire
reference entier(auto incrémentée) Identifiant unique du produit
désignation Chaine de 255 caractères Nom ou désignation du produit obligatoire
Prix Decimal(10,2) Prix du produit >0
codetec Entier (auto incrémentée) Identifiant unique de technicien

4
nomtec Chaine de 255 caractères Nom du technicien obligatoire
prenomtec Chaine de 255 caractères Prenom du technicien obligatoire
tauxhoraire Entier Taux horaire du technicien obligatoire
numero entier(auto incrémentée) Identifiant unique de
l’intervention
dateinte Date Date d’intervention obligatoire
raison Chaine de 255 caractères Raison d’intervention

1- donner la requête SQL qui permet de modifier la table intervention pour s'assurer que la date de
l'intervention est par défaut la date courante
2- lors de l’ajout de client bouzidi Ali habitant à Jilma Sidi bouzid qui a comme code postal 9110
une erreur s’est produite, donner :
• la cause de cette erreur : ………………………………………………………………………………………………
• la contrainte non respectée :……..…………………………………………………………………………………
• En Tunisie, les codes postaux sont généralement compris entre 1000 et 9999 : donner la requête
SQL qui permet apporter les modifications nécessaires pour accepter ce client :
………………………………………………………………………………………………………………………………………..

3- Donner la commande SQL pour supprimer les interventions qui ont eu lieu il y a plus de 30 jours :
………………………………………………………………………………………………………………………………………………..

4- Donner la requête SQL pour ajouter à la table produit le produit" Climatiseur 12000 BTU
Inverter" qui a comme prix 2600 dt
………………………………………………………………………………………………………………………………………………………….
5- L’administrateur souhaite ajouter une table fournisseur contenant
champs Type et contrainte
idFournisseur Entier auto incrémenté (identifiant unique du fournisseur)
Nom fournisseur Varchar(20)
Et respectant ces règles
R1 : un fournisseur peut produire plusieurs produits
R2 : un produit est fourni par un seul fournisseur

• Donner les commandes SQL pour :


➢ Créer la table fournisseur :
……………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………
➢ Apporter les modifications sur la base de données s’ils existent afin de respecter les
règles (représenter les tables modifiés textuellement)
……………………………………………………………………………………………………..
……………………………………………………………………………………………………
6- Donner les commandes SQL pour afficher :
• Les noms des techniciens qui ont affecté des interventions par ordre alphabétiques des noms :
………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
• La liste des interventions (numero) dont la raison d'intervention est indiquée.
…………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………..

5
………………………………………………………………………………………………………………………………..

• Afficher le nombre des interventions pour le dernier produit inséré dans la table produit
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………

• Le nombre d’intervention par codetec techniciens.


………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
• Les interventions (numero,date effectuées par le technicien : ‘gafsi ali’ en mois août 2024.
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………

• La liste des techniciens (codetec, nomtec,prenomtec)qui ont un taux horaire > moyenne des taux
horaire.
…………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………..
• Le nombre d'intervention par produit (reference ,designation) qui dépasse 2 interventions
…………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………
• Par ailleurs le produit référencé 123 a vu augmenter son prix de 20%, donner la requête SQL qui
répond à ce besoin :
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
Partie B

Suite à une modification de la loi de finances, le législateur tunisien exige que chaque client soit assuré par
la société. Pour cela l’administrateur ajoute une table

Agence_Assurance (id_agence,location)

Et a mis ces régles de gestion :

R3-un client peut avoir des contrats avec plusieurs agences

R4- une agence peut assurer plusieurs clients

1- Donner la nouvelle représentation textuelle de la base de données afin de répondre à ces


règles (justes les modifications)

6
……………………………………………………………………………

………………………………………………………………………….

………………………………………………………………………

2- Il s’est avéré qu’un client peut avoir plus qu’un contrat avec une seule agence dans des
dates différentes

Donner la commande SQL qui permet d’application cette modification.

………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..

Common questions

Alimenté par l’IA

The JavaScript function 'alpha' checks if a given string is entirely alphabetic, which assists in validating user input like names . Meanwhile, 'verifierNom' utilizes 'alpha' to verify the name input when the name field loses focus. If the input is not alphabetic, 'verifierNom' displays an error message in the 'output' field, prompting the user to correct the name . Together, these functions ensure only valid names are processed, enhancing data integrity in the payment form.

To ensure a product is supplied by only one provider, the database needs a foreign key relation, likely in a table linking products to providers . Create a 'Produit_Fournisseur' table with a foreign key constraint linking product reference to fournisseur ID, enforcing that each product can correspond to only one fournisseur ID. This design aligns with the constraint rule that 'a product is supplied by a single provider' and maintains relational integrity .

To increase the price of the product with reference 123 by 20%, you can use the following SQL query: `UPDATE Produit SET prix = prix * 1.2 WHERE reference = 123;` . This query multiplies the current price by 1.2, effectively applying a 20% increase.

The database schema is adjusted by adding a new associative table that includes fields for client, agency, and contract details . This schema supports multiple contracts by recording entries where one client can have several contracts with different agencies, adhering to rules R3 and R4. SQL commands likely involve creating a new table 'Contracts' with fields such as client ID, agency ID, and contract specifics, allowing for multiple contracts between the same client and agency across different dates .

To list all interventions by 'Gafsi Ali' in August 2024, use the query: `SELECT numero, dateinte FROM Intervention JOIN Techniciens ON Intervention.codetec = Techniciens.codetec WHERE nomtec = 'Gafsi' AND prenomtec = 'Ali' AND dateinte BETWEEN '2024-08-01' AND '2024-08-31';` . This query looks up interventions where the technician matches 'Gafsi Ali' and filters based on the intervention dates falling within August 2024.

The 'style.css' file uses CSS properties to improve user experience: it applies color inversion to images on mouse hover to provide visual feedback . Overflow properties with 'auto' allow scroll bars if necessary, ensuring content visibility . Additionally, it removes form field borders on mouse hover for a cleaner interface and sets margin properties to separate content spatially, enhancing readability . These styles help maintain an intuitive and visually appealing user interface.

To add interactivity by changing image colors on hover, use the ':hover' pseudo-class in CSS. For example, you could apply an invert filter to an image `#imgPay:hover { filter: invert(100%); }` which inverts the colors when the user hovers over the image. This interactivity offers visual feedback, improving user engagement with the online payment form . Such CSS hover effects create a more dynamic and visually responsive interface.

The relational model divides the data into the tables 'Client', 'Produit', 'Techniciens', and 'Intervention'. The 'Client' table contains fields like codecl, nomcl, and adresse for client details, while 'Produit' holds reference, désignation, and prix for product specifics. 'Techniciens' includes codetec, nomtec, and tauxhoraire for technician information. 'Intervention' links these through foreign keys like codecl, reference, and codetec, which associate interventions to the corresponding clients, products, and technicians . This model supports efficient data management and query execution.

The 'payment.html' page uses several JavaScript functions to manage interactions: 'remplirAnneeMois()' fills the month and year fields with the current date upon page load . 'verifierNom()' is triggered when the name field loses focus to validate the name and display an error message if invalid . Clicking the submit button activates 'payementForm()' to handle form submission . These functions ensure proper user input handling and validation as part of the payment process.

To accommodate a new customer like Bouzidi Ali with a postal code 9110, an SQL modification is needed due to a constraint error, as the provided code does not fall within the 1000 to 9000 range . The postal code constraint must be altered to accept values between 1000 and 9999, which would involve altering the constraint on the 'cp' column to expand its valid range . This ensures compliance with regional postal standards while maintaining the database integrity.

Vous aimerez peut-être aussi