0.

Avant- propose

Ce document entre dans le cadre de la préparation d’un rapport de projet de fin

d’année en vue de faire valoir nos connaissance acquise toute au long de notre
cursus académique de l’année académique 2023-2024, au sein de la prestigieuse
institut supérieur informatique, programmation et analyse.

C’est ainsi que nous avons eu l’occasion de préparer notre projet de fin d’année
basé sur deux principaux Cours; je cite,le cours de programmation Html et Css et le
cours de Visual Basic.
Sous un sujet pour chaque cours.
Ø Dans le cas du cours de programmation html et css nous avons comme sujet:
La conception et réalisation d’un site web hôtelier.
Ø Et concernant le cours de Visual Basic, il s’agit de: la gestion des gagnants de
jeu parifoot.

Ce projet a pour apport bénéfique enfin de contribuer à notre évolution sur ce dont
nous avons appris tout au long de notre année académique.

1. INTRODUCTION

En guise d’introduction, il nous a été demandé de faire un projet d’HTML

et VB NET en groupe de 5 personnes et notre groupe est composé de :
MENA KUMINA
KABONGO NDUKA
NZUZI KAPITA
MABOTI LANDU
MABIKA KENA
JEMIMA LUKOMBO

2. DÉVELOPPEMENT
a. Projet VB NET
Pour le projet VB Net il nous a été demandé de faire une application
sur la gestion des gagnants parifoot et nous avons commencé à créer une base des
données qui est puis le connecter sur le visuel basic. Placer le table sur le visuel
basic. Sur le menu mise à jour on a programmé les boutons ( NOUVEAU,
ENREGISTRER, MODIFIER ET SUPPRIMER) et nous avait ajouté la base de donnée
pour que les informations soit placée dans la base de données et nous avons ajouté
une autre formulaire pour faire des recherches. On programme le textbox et nous
avons aussi ajouté la base de données.
Pour la consultation nous avons aussi ajouté une formulaire on a aussi
ajouté la base de données. Et nous avons ajouté une nouvelle formulaire pour le
mot de passe. Nous avons ajouté les photos et les buttons ( Connecter et Quittez)
Le bouton connecté vas directement nous envoyer sur la page de
progressbar et si on appuie sur le button quittez l’application sera fermée. Si vous
appuyez sur le button quittez vous verrez un message ( voulez vous quittez?) Nous
avons utilisé une commande qui est “ Msgbox) nous l’avons fait aussi pour
enregistrer ( enregistrement effectué). Nous avons aussi une formulaire où y a une
propriété qui est le progressbar. Cette propriété nous permet de personnaliser
l’apparance et le comportement de la barre de progression, nous avons définit la
valeur minimale et maximale de la [Link] valeur minimale est 1 et la
propriété maximale est définie sur 100.
Après que le prograssbar arrive à 100% directement on sera sur le form
MENU
Pour la beauté de notre application nous avons utilisé les outils et
propriétés qui sont: :
• Panel : c’est une zone rectangulaire sur laquelle on peut placer et
organiser d’autres contrôles tels que des boutons, des étiquettes, zones des textes,
etc ...
• Groupebox : pour regrouper d’autres contrôles connexes au sein d’une
bordure avec un titre optionnel.
• Label : utilisé pour afficher le texte
• Textebox : sont utilisés pour la saisie des données, que ce soit des
mots , des nombres ou d’autres types d’informations
• Font:: permet de spécifier des propriétés telles que la famille de police,
la taille, le style( gars, italique, souligné) et la couleur du texte.
• Bouton : pour déclencher des fonctions spécifiques lorsque l’utilisateur
interagit avec eux.
Voilà comment on a pu créer cette application sur la gestion des gagnants
parifoot.....
B. Projet HTML
Concernant notre projet HTML on nous a demandé de concevoir et
réaliser une site web d’hoteliier. On a commencé par créer un dossier puis à
l’intérieur nous avons créé 3 dossiers ( font, images, vidéo) et nous avons ajouté un
fichier visuel studio code.... Puis nouveau projet et nous avons écrit ( [Link]).
Pour associé [Link] et [Link] nous avons utilisé la balise <link> dans le code
html faut d’abord s’assurer que le [Link] et [Link] soit dans le même
répertoire. La balise <link> est à l’intérieur de la balise <head> pour lier le fichier
CSS externe. Puis nous avons créé le bloc1 pour mettre le logo, le titre, liste non
ordonnée. On a ajouté une <a> pour mettre des liens de liste non ordonnée. Ex :
<a href= “[Link]”>accueil</a></li>
Après nous avons créé le bloc 2 pour mettre une photo en arrière plan, les textes et
le button
Nous avons aussi ajouté le bloc3 juste pour mettre les textes, nous
avons juste modifié la font size, color, etc... Et le bloc4 nous avons ajouté 3 photos
et quelques propriétés CSS. Nous avons aussi le bloc5 où nous avons ajouté une
photo et les textes. Le bloc6 nous avons ajouté la balise <marquee> qui est utilisé
pour faire défilé un message sur la page web. Nous avons aussi ajouté le [Link]
dans nos liens de liste non ordonnée.
• Voici quelques balise que nous avons utilisé
Ø La balise div : pour la division, est un élément de bloc qui a vocation
a contenir d’autres éléments.
Ø La balise Span une valeur d’affichage inline, ce qui signifie qu’elle
s’écoule avec le texte et ne crée pas de nouvelle ligne.
Ø liste de classes associées à l'élément courant
Ø La balise p : représente un paragraphe de texte
Ø La balise h: Les balises H sont vos titres et vos sous-titres. H, c'est un
acronyme pour headings (titres en anglais) qui font au code HTML qui permet de
structurer et hiérarchiser le contenu d'une page Web.
Ø La balise ul : liste non ordonnée
 Ø La balise li: permet de passer à l'élément suivant dans une liste.
Ø La balise a: avec son attribut href , crée un lien hypertexte vers des
pages web, des fichiers, des adresses e-mail, des emplacements se trouvant dans la
même page, ou tout ce qu’une URL peut adresser
Ø Font size: la taille de la police
Ø Font familly: style : pour changé la police
Ø Background-color : La propriété background-color permet de définir la
couleur utilisée pour l’arrière-plan d’un élément.
Ø Display flex : assure que les éléments fils directs seront alignés sur une
ligne
Ø Container : Son rôle principal est donc de créer et de délimiter des
zones qui peuvent ensuite être formatées avec CSS
Ø Header : la balise <head> permet d’inclure des informations générales
sur la page, notamment son titre, des liens vers des polices, vers une feuille de
style, etc.
Ø Texte-align: alignement des textes.
Ø Justify- content : indique la façon dont l'espace doit être réparti entre
et autour des éléments selon l'axe principal d'un conteneur flexible ou selon l'axe
en ligne lorsque le conteneur est une grille
Ø Padding: l’espace entre le contenu et la bordure d’un élément.
Ø Height : définit la hauteur de la boîte d'une ligne.
Ø La propriété width : permet de définir la largeur de la boîte du contenu
d’un élément.
Ø Transition : permettent de choisir : les propriétés à animer en les
listant explicitement. le début de l’animation. la durée de l’animation.
Ø Border-radius : permet de définir des coins arrondis pour la bordure
d'un élément.
Ø Border : une propriété qui permet d'insérer une bordure et de
personnaliser son apparence.
Ø Margin : définit la taille des marges sur les quatre côtés de l’élément.
Ø Imputs : est utilisé pour créer un contrôle interactif dans un formulaire
web qui permet à l’utilisatrice ou l’utilisateur de saisir des données.
Voilà quelques propriétés que nous avons utilisé pour créer notre
site web d’hoteliier.

3. CONCLUSION