Création d'une WebApp (part01)

1 - Le projet

Là, pas besoin d’outils, juste le client, ses besoins, un papier, un crayon 🙂
Poser les bonnes questions qui vont permettre de bien architecturer la structure de la future base de données.

2 - La Base de données

Là aussi pas besoin d’outils particuliers, une feuille de papier et un stylo feront l’affaire.
Une base de données va permettre de créer des tables pour chaque éléments clés de notre projet, et surtout établir des liens entres elles.

Petite analogie :
Une base de données est un peu comme un fichier excel.
Une "TABLE" est un peu comme une feuille excel, qui peut comporter plusieurs feuilles, une ligne pour chaque fiche, et une colonne pour chaque champs.

Chacun son habitude pour le nommage, mais pour ma part, je procède comme ça pour les champs :
En premier, et pour chaque table, toujours avoir un id qui sera notre clé primaire, qui va s’auto-incrémenter et qui sera unique pour chaque table.
Ensuite, on va ajouter les liens, par exemple, cela pourrait être une table séparée pour l’historique (au sens large), que je nomme par principe "id_historique" pour la lier à une table "historiques".

Toujours écrire en minuscules, sans accents, sans espaces, etc.
Il n’y a pas vraiment de règles strictes la dessus, mais ne pas les respecter peut avoir des conséquences inattendues.

Les autres champs sont bien sûr en fonction des besoins de chaque table.

L’idée est d’éviter de saisir plusieurs fois les même choses.

Par exemple, on pourrait imaginer une base cliente importante en taille, et séparer du coup la civilité, le cp et la ville dans deux autres tables 'civilites', et 'villes'. on aura qu’à mettre dans la table 'clients' deux champs 'id_civilite' et 'id_ville' pour compléter la fiche. L’avantage sera un gain de taille, et une facilité pour changer par exemple le nom d’une ville (une fois), plutôt que de réviser l’ensemble des fiches clients. Ceci est un exemple bien sûr !

3 - Les Outils

Pour les outils il faut un serveur web, avec php et mysql qui tourne (en dernière version si possible).
Un éditeur de texte comme BBEdit, TextWrangler, SubEtaEdit, Coda, ou même textedit feront l’affaire.
Pour l’administration des bases MySQL, on peut passer par un logiciel tiers en local comme SequelPro ou en version web comme phpMyAdmin.

On peux ensuite attaquer seul tous les tutos de la planète pour se faire la main sur l’html, le css, mysql, et php !

Par la suite, il va falloir monter d’un cran et utiliser des frameworks, sorte de sur-couches à nos languages favoris.

Pour un site web, l’affichage sera toujours de l’html.
l’html sera donc la base de nos connaissances.
le css va se charger de mettre en forme notre page html.
php va pouvoir, coté serveur, effectuer des requêtes à notre base de données, et mettre en forme le résultat (après calculs éventuels) en html donc.

Pour le CSS, il existe un framework très connu et très répandu qui se nomme Bootstrap.
Pour le PHP, j’utilise pour ma part le framework CodeIgniter qui a un avantage sur tout les autres frameworks car il ne nécessite pas vraiment d’apprendre une nouvelle syntaxe : il travaille en php.

Vous serez aussi amenés à utiliser du javascript lors de projet un peu plus poussés.
Là aussi l’usage d’un framework, comme jQuery est un plus.

L’usage de tout ces sur-couches apporte aussi une meilleure compatibilité, une sécurité accrue, et le fait de ne pas avoir à réinventer la roue lorsque d’autre l’on déjà fait, et bien mieux que vous !

4 - Installation du serveur en local

Rappel : je m’adresse essentiellement à des utilisateurs mac 🙂
Téléchargez MAMP
Installez-le et démarrez-le.
Dans votre dossier 'Applications', vous trouverez le dossier 'MAMP' contenant un dossier 'htdocs'.
Ce dossier est ce qu’on appelle la racine de votre site web.
Vous y aurez accès en tapant dans votre navigateur web http://localhost

vous pouvez donc supprimer tout ce qu’il y a dans ce dossier et commencer à créer les votre.
un fichier par défaut sera nommé 'index.html', ou 'index.php'. c’est le premier fichier qui sera affiché lorsqu’on arrive dans un dossier.
Par exemple si vous avez un projet 'tuto_01' à la racine du disque, on aura htdocs/tuto_01/index.html physiquement, et, dans votre navigateur : http://localhost/tuto_01 suffira pour afficher le contenu du fichier index.

Si vous avez un hébergement web dédié, il est bien sûr conseillé de l'utiliser 😉

---

Création d'une WebApp (part02)