Port
folio
fondimgSAE203

SAE203

Site Web et BDD

Développer un site web, exploitant une base de données et permettant quelques interactions simples pour le client (liste, recherche, ajout, ...). Le site proposera une mise en page respectant l’accessibilité et le W3C, mais aussi des interactions.
Retour à la sélection
Ressources
  • R212 : Intégration
  • R213 : Développement web
  • R214 : Système d'information
  • R215 : Hébergement

AC4102

Produire des pages Web statiques et fluides utilisant un balisage sémantique efficace.

Le portfolio SAE 105

J’ai fait attention que chaque élément puisse être lisible et visible et essayer d’être le plus responsive en fonction des différents écrans. Et j’ai bien sûr fait suffisamment d’espace vide entre les éléments pour pouvoir respirer malgré le contenu.

J’ai aussi rajouté quelques détails très simples, tel que le logo qui remonte en haut de la page ou encore la sélection du texte à la souris qui est d’une différente couleur. Ces détails permettent de rendre mon site plus ressemblant à mon image.

J'ai produit des pages Web statiques et fluides utilisant un balisage sémantique efficace. J’ai donc réalisé mon programme sur le même logiciel avec les balises adéquates tout en ayant une bonne hiérarchisation avec des commentaires pertinents permettant la bonne lecture de celui-ci. Les pages sont fluides et ne présentent pas de temps de chargement excessifs, et ne possèdent pas d'erreurs.

Le portfolio SAE 203

Le site web que j’ai imaginé a été codé avec le logiciel Visual Studio Code, ce qui m’a permis de créer mon site web avant de pouvoir l’héberger. Pour coder ce site Web, j’ai utilisé les balises adéquates< /span>, indispensable dans le langage de programmation permettant de créer le contenu. Nous avons les plus communes tel que :
  • < div> : la balise de base permettant de créer des boîtes (celles-ci pouvant contenir d’autres balises.
  • < h1> : utilisée pour les titres. Il existe différentes tailles : h2, h3, h4, h5, h6.
  • < p> : utilisée pour le texte. P comme paragraphe.

Ces balises sont placées dans une certaines hiérarchie en fonction du site et il est important de soigner cette hiérarchie car elle permet d’éviter des erreurs tel que des informations qui ne s’affichent pas ou encore des dysfonctionnement de div. Mais cela permet aussi d’avoir un meilleur référencement dans une recherche Google. Les navigateurs mettent en avant les sites avec des programmes bien écrit.

code_hierarchisation
HTML bien agencé

On remarque bien la hiérarchisation entre les balises et on se reperd bien dans le code

css_hierarchisation
CSS bien agencé

La aussi le CSS est bien espacé pour pouvoir comprendre très vite le code

1

AC4103

Générer des pages Web ou vues à partir de données structurées incluant des interactions simples.

Le portfolio SAE 105

Cette partie de la SAE est la plus importante car elle consiste à utiliser une base de données sur une page type. Le but est donc de faire une page type qui aura la même structure pour chaque SAE mais qui aura un contenu différent sur chaque page.

Il faut donc commencer par faire en sorte que l’url soit modifié en cliquant sur les SAEs et les nommer avec des numéros par exemple. Tout cela sur JavaScript, on crée ensuite notre base de données avec les noms de notre choix pour pouvoir écrire le contenu que l’on souhaite.

Enfin avec les littéraux de gabarits on affiche la base de données sur le site web.

Grâce à cette étape, j’ai généré des pages Web ou vues à partir de données structurées incluant des interactions simple grâce au JavaScript. La base de données m’a permis de n’avoir qu’une seule page HTML pour toutes mes SAEs. Ce qui est plus simple et plus rapide car tout l’HTML et le CSS de la page sont déjà générés.

Le portfolio SAE 203

Ce site web possède un grand nombre d’interaction, contrairement à la SAE 105. Tel qu’un filtreun menu ouvrir/fermer et un formulaire.

Le filtre ainsi que le menu ouvrir/fermé ont pratiquement le même fonctionnement. Le but est de créer des classes correspondant à l’interaction souhaitée (ex : une classe avec l’élément et une classe sans l’élément). Ensuite on passe au Javascript qui va nous permettre de switcher entre les deux classes et donc de choisir la classe sans ou avec l’élément.

Pour le formulaire, rien de plus simple. C’est un formulaire dans la forme normal, mais qui permet d’ajouter une SAE dans la base de données. On va donc lui demander d’exécuter une commande SQL reprenant chaque information saisie dans le formulaire.

Ce sont des interactions simples mais qui permettent à l’utilisateur du site à retrouver plus facilement l’information souhaitée (le filtre). Cela sert aussi de gagner de la place en fonction de l’agencement du site (menu ouvrir/fermé). Enfin la base de données va être utile dans de nombreux sites contenant des logins et connexions. Il est bien plus simple de gérer les informations via un formulaire et une base de données regroupant le nécessaire.

Javascript
Javascript

Les changements de classe avec une fonction combinée avec un ForEach mettant en éxecution "toggle" pour les intéractions

menu_deroulant_ex
Menu déroulant

L'exemple des menus déroulant grâce au JavaScript

1

AC4104

Mettre en ligne une application Web en utilisant une solution d’hébergement standard.

Le portfolio SAE 105

À la fin de mon portfolio, il ne me reste qu’a mettre en ligne une application Web en utilisant une solution d’hébergement standard. J’ai fait ce procédé grâce au logiciel FileZilla en déplaçant tout mon dossier avec mes images, pages HTML, etc, sur le réseau. Il ne reste plus qu’à insérer cette adresse dans la barre URL d’une page web : zoegabet.iutmmmiweb01.uha.fr et mon site s’affichera.

Il est possible de visualiser ce portfolio grâce à ce lien : portfolio SAE 105.

Le portfolio SAE 203

Le système est assez similaire au premier semestre. En effet, j’utilise toujours le logiciel Filezilla pour héberger mon site Web.

Mais la nuance se fait sur la base de données que j’ai créé et rempli sur PHPmyAdmin. En effet j’ai exporté ma BDD puis je l’ai importé sur le PHPmyAdmin du réseau de l’IUT. Cette action permet à ma BDD d’être accessible en dehors de mon localHost.

Sur mon site Web, je n’ai plus qu’à changer les logins pour ma connexion à ma base de données car il n’est pas le même en localHost. Ce changement se fait sur le fichier PHP me permettant de me connecter à ma BDD grâce à un PDO.

Après m’être connectée au réseau de l’IUT sur Filezilla, je n’ai plus qu’à faire glisser mon dossier de mon site Web avec tous mes fichiers PHP sur le réseau de l’IUT.

Voila, maintenant mon site Web n’est plus seulement sur mon localHost mais sur le réseau de l’IUT, et donc il peut être vu par toutes les personnes présentent sur ce réseau.

Filezilla_interface
FileZilla

L'interface du logiciel FileZilla

url_localhost
URL en localHost

L'URL en localHost correspondant à la page explicative des SAE

url_reseaux
URL sur le réseau

L'URL sur le réseau de l'IUT correspondant à la page explicative des SAE

1

AC4105

Modéliser les données et les traitements d’une application Web.

C’est la partie la plus longue de la SAE. La création d’une base de données contenant toutes les informations concernant les SAEs. C’est à dire les ressources mobilisées, les apprentissages critiques, les semestres, les années, les descriptions, les noms et les compétences.

Après avoir créé un MCD permettant de savoir les tables ainsi que les clefs étrangères que nous avons besoin.

Ensuite, il suffit de remplir la base de données grâce à des requêtes SQL dans PHPmyAdmin. >. Mais attention à ne pas oublier les clefs primaires qui permettent de relier deux tables, ici « enseignement et AC ».

Cette base de données va tout simplement permettre de remplir le site en un clin d’œil. Etant donné que chaque SAE comporte les même types d’informations, une requête SQL va remplir le site d’un coup. Sur le long terme, la base de données est très utile, il suffit de faire la requête une seule fois pour que cela s’applique à toutes les prochaines actions.

AC4104
Le MCD

Le schéma qui m'a permis de créer ma base de données (2 tables et une clef étrangère)

AC4104.2
PHPmyAdmin

Ma base de donnée Portefolio dans PHPmyAdmin, vu sur la table enseignement

1

AC4106

Utiliser et adapter un modèle d’accès aux données.

Ceci est la suite de l’apprentissage critique au-dessus. En effet, cette partie va permettre à notre base de données dans PhpMyAdmin d’être utilisée dans le site.

Tout d’abord, il faut faire la connexion vers la base de donnée grâce à la fonction connexionBDD et grâce à la création d’un PDO.Il suffira de mettre son login de PhpMyAdmin pour que la connexion soit finalisée. Ensuite c’est au tour de la fonction lecture de lire les requêtes SQL pour pouvoir faire apparaitre notre base de données. Chaque requête SQL permet de récupérer une données ou des données précises dans la base de données.

Cette fonction est associée au forEach pour que la requête SQL s’exécute en boucle jusqu’à la dernière SAE. Il suffit enfin de remplir l’HTML avec des balises echo pour que le style apparaisse sur notre site Web.

C’est la partie la plus importante car elle permet d’utiliser la base de données que l’on a créé et rempli juste avant. C’est grâce à ces requêtes et le ForEach, que les informations s’ajoutent dans le site en un clin d’œil.

codebdd
Les requêtes SQL

Les requêtes SQL avec la fonction lecture et le ForEach permettant de faire apparaître les données souhaitées

1