Cours 1 – Exercices
Première partie
À l’aide du fichier css fourni, utilisez le système de grilles de Bootstrap pour arriver aux configurations suivantes :
1. 6 colonnes
a. < 576px
b. 576px à 991px :
c. 992px et plus :
2. 5 colonnes
a. < 768px :
b. 768px à 1199px :
c. 1200px et plus :
3. 6 colonnes :
a. < 576px
b. 576px à 1199px :
c. 1200px et plus :
Deuxième partie :
Reprenez les exercices de la première partie pour arriver aux configurations suivantes :
1. 6 colonnes
a. < 576px
b. 576px à 991px :
c. 992px et plus :
2. 5 colonnes
a. < 768px :
b. 768px à 1199px :
c. 1200px et plus :
3. 6 colonnes :
a. < 576px
b. 576px à 1199px :
c. 1200px et plus :
Troisième partie :
• Configurez les formulaires suivants dans des fichiers différents.
• Pour l’instant mettez toutes les méthodes en POST et les actions vers [Link]
[Link]/~afilion/[Link].
• Tous les textes dans les boîtes sont des placeholder.
• La taille des boutons pour envoyer le formulaire a été relevée (trouvez la classe Bootstrap appropriée).
• Tous les titres sont en h1.
• Faites en sorte d’ajuster les ratios selon les résolutions d’écran.
1 – Formulaire de commande de chèques
• Tous les champs sont requis.
• Valeurs exactes des id et noms des champs :
o nom
o adr1
o adr2
o codePostal
o qte
o noDepart
• Le code postal doit être validé avec l’expression régulière « [A-Z][0-9][A-Z] ?[0-9][A-Z][0-9] »
• Le champ « Quantité à produire » a une valeur minimale de 1 et maximale de 500.
• Le champ « Numéro du 1er chèque » a une valeur minimale de 1 et maximale de 99 999.
2 – Sélecteur d’autos
• Modèle :
o Nom et id : modele
o Choix (texte / valeur)
▪ Chevrolet Spark / chevrolet
▪ Honda Fit / honda
▪ Mazda 3 / mazda
▪ Mercedes AMG / mercedes
▪ Mustang GT / ford
• Couleur :
o Nom et id : couleur
o Choix (texte / valeur)
▪ Noir / N
▪ Blanc / B
▪ Rouge / R
▪ Gris / G
3 – Convertisseur
• Longueur :
o Nom et id : longueur
o Champ de nombre, obligatoire
• Mode de conversion :
o Nom et id : modeConversion
o Choix (valeur) :
▪ cmVersPo
▪ poVersCm
4 – Demande de tutorat
• Pour le cours :
o Nom et id : cours
o Choix (texte / valeurs) :
▪ 420-W10-SF Introduction à la programmation / 420-W10-SF
▪ 420-W12-SF Systèmes d’exploitation / 420-W12-SF
▪ 420-W14-SF Perspectives professionnelles en TI / 420-W14-SF
▪ 420-W15-SF Programmation Web I / 420-W15-SF
▪ 201-423-SF Mathématiques pour l’informaticien I / 201-423-SF
▪ 420-W20-SF Programmation objet I / 420-W20-SF
▪ 420-W23-SF Bases de données relationnelles / 420-W23-SF
▪ 420-W24-SF Programmation Web II / 420-W24-SF
▪ 420-W33-SF Réseaux / 420-W33-SF
▪ 201-424-SF Mathématiques pour l’informaticien II / 201-424-SF
▪ 420-W30-SF Programmation objet II / 420-W30-SF
▪ 420-W31-SF Algorithmique avancée / 420-W31-SF
▪ 420-W34-SF Bases de données avancées / 420-W34-SF
▪ 420-W35-SF Conception d’applications et méthodes agiles / 420-W35-SF
▪ 420-W44-SF Infrastructure technologique et virtualisation / 420-W44-SF
▪ 420-W45-SF Installation des serveurs et des services / 420-W45-SF
▪ 420-W46-SF Applications Web et bases de données / 420-W46-SF
▪ 420-W47-SF Développement de services d’échange de données / 420-W47-SF
▪ 420-W48-SF Applications mobiles et objets connectés / 420-W48-SF
▪ 420-W54-SF Innovation et veille technologique / 420-W54-SF
▪ 420-W55-SF Enjeux en cybersécurité / 420-W55-SF
▪ 360-W56-SF Interactions professionnelles à l’ère numérique / 360-W56-SF
• Objectifs :
o Nom et id : description
