SAE203
Site Web et BDD
- 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 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.
Le portfolio SAE 203
- < 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.
On remarque bien la hiérarchisation entre les balises et on se reperd bien dans le code
La aussi le CSS est bien espacé pour pouvoir comprendre très vite le code
AC4103
Générer des pages Web ou vues à partir de données structurées incluant des interactions simples.
Le portfolio SAE 105
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.
Le portfolio SAE 203
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.
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.
Les changements de classe avec une fonction combinée avec un ForEach mettant en éxecution "toggle" pour les intéractions
L'exemple des menus déroulant grâce au JavaScript
AC4104
Mettre en ligne une application Web en utilisant une solution d’hébergement standard.
Le portfolio SAE 105
Il est possible de visualiser ce portfolio grâce à ce lien : portfolio SAE 105.
Le portfolio SAE 203
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.
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.
L'interface du logiciel FileZilla
L'URL en localHost correspondant à la page explicative des SAE
L'URL sur le réseau de l'IUT correspondant à la page explicative des SAE
AC4105
Modéliser les données et les traitements d’une application Web.
Après avoir créé un MCD permettant de savoir les tables ainsi que les clefs étrangères que nous avons besoin.
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.
Le schéma qui m'a permis de créer ma base de données (2 tables et une clef étrangère)
Ma base de donnée Portefolio dans PHPmyAdmin, vu sur la table enseignement
AC4106
Utiliser et adapter un modèle d’accès aux données.
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.
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.
Les requêtes SQL avec la fonction lecture et le ForEach permettant de faire apparaître les données souhaitées