Vous maitrisez HTML, CSS et PHP mais vous n’avez pas encore mis tout cela en pratique dans un vrai projet ?
Ce cours et l’occasion de “mettre le maçon au pied du mur”.
Ce cours s’adresse à tous ceux qui souhaitent créer un site Web dynamique, c’est à dire dont les pages sont créées à la volée suivant les requêtes de l’internaute et ceci à partir de zéro, tout le code du site sera VOTRE (notre) code.
Il est préférable d’avoir déjà des notions de PHP, HTML et CSS que nous utiliserons pour construire un site au fur et à mesure que nous avancerons dans les leçons. Celles-ci sont principalement constituées de vidéos, au départ pour expliquer comment notre projet de développement va être conduit. Nous discuterons aussi ergonomie et interface graphique, nous verrons ensuite comment développer votre propose framework pour développer plus vite et plus simplement.
Ensuite, nous construirons petit à petit le site. Plutôt qu’un cours magistral, il s’agit donc de partir d’une feuille blanche et de construire, ligne après ligne, le site que je vous propose. À partir de cet exemple, il vous sera très simple de construire votre propre site, avec votre contenu.
Après chaque leçon dans laquelle du code est présenté, vous aurez en téléchargement un ou plusieurs fichiers contenant le code source présenté. Je vous donnerai également quelques exercices de programmation dont la solution sera également fournie sous la forme de code source et d’une vidéo explicative pour les plus complexes.
Après avoir suivi ce cours vous serez capable de :
Et surtout…
VOUS SEREZ CAPABLE DE DÉVELOPPER SEUL N’IMPORTE QUEL TYPE DE SITE
C’est une compétence que vous pourrez mettre en avant sur votre CV et utiliser professionnellement.
Dans cette première vidéo nous allons poser les bases de ce qui sera vu dans le cours. Les outils, l'environnement de programmation et quelques détails sur le contenu.
Les liens qui accompagnent cette première séance vous permettrons de retrouver les fondamentaux qu'il est nécessaires de maitriser pour tirer parti de la suite (HTML, CSS, PHP et finalement MySQL).
Dans cette série de 3 lectures, je vous présente les outils Open Source que nous allons utiliser pendant le cours pour construire le site. Il s'agit du serveur Web Apache et de l'IDE NetBeans.
Ceci est une étape optionnelle pour ceux qui veulent voir les détails de l'installation de XAMPP.
Si plutôt que d'installer XAMPP, vous préférez utilser le serveur natif pré-installé dans votre Mac OS X, voici les quelques commandes qui vont permettre de l'activer pour l'utiliser.
Donc, attention, ces 2 installations sont mutuellement exclusives. Si vous installez 2 serveurs Apache sur votre machine, ils vont être en conflit et il faudrait veiller à arrêter l'un pour démarrer l'autre.
Cette fois ci nous allons nous préparer à passer aux choses sérieuses et envisager les différentes étapes de développement de notre site.
Nous allons enfin commencer à coder notre site. Pour l'instant cela va être une simple page index.php avec un design que nous irons chercher sur http://www.oswd.org
La mise en place est expliquée dans la vidéo suivante où je vous montre comment cela se passe pour utiliser XAMPP et NetBeans.
On ouvre enfin NetBeans pour écrire nos premières lignes de code.
Ecrire ? Pas tout à fait, pour nos premières ligne de code PHP nous allons tricher... et ne coder d'abord que de l'HTML. Pour courroner le tout, nous allons même télécharger un code HTML déjà tout prêt.
En attachement vous trouverez le code de la template que j'ai téléchargé depuis le site "Open Source Web Design".
Quelques conseils
Attention aux mélanges de ' et de " quand vous copiez le code HTML, il peut y avoir des caractères innoportuns qui vont faire des erreurs PHP. D'où l'importance de bien choisir d'utiliser
echo 'Bonjour';
ou
echo "c'est moi";
ou encore
?>
plus de problème.
Multiligne.
c'est le bonheur
<?php
suivant le cas. L'important est de faire simple et lisible.
Je vous ai laissé une dernière fonction à coder, en vous disant de faire simple. Si toutefois vous voulez conserver la colonne de droite, il faudrait ajouter une fonction...Voire une autre si vous voulez conserver la possibilité d'afficher des résumés d'articles.
Dans la prochaine vidéo, je vous montrerai comment j'ai procédé et vous aurez le code source à télécharger.
C'est quand même une fonction centrale dans notre système... puisque c'est elle qui affiche ce qui est au centre !
Voici ma manière de procéder, le code à télécharger pour que nous soyons sur la même longueur d'onde se trouvera dans la prochaine vidéo une fois le nettoyage terminé.
On termine le nettoyage de HTML vers PHP.
Cette fois on s'occupe de la colonne de droite, on identifie les résumés d'article façon blog et on fait passer tout ça à travers des fonctions.
Dans le futur ceci est sans doute appelé à migrer ailleurs, mais pour l'instant cela nous permet de garder la structure de la page HTML originale et encore une fois, on avance à petits pas pour ne rien perdre ni personne en route.
À partir de là, on peut encore imaginer de paramétrer la fonction qui gère la colonne de droite pour obtenir une infrastructure suffisement souple, en utilisant par exemple un tableau pour passer une liste de liens. On peut aussi modifier le pied de page pour ajouter le nom de votre site.
Je vous propose une solution à télécharger, il est compressé parce qu'il n'est pas possible de poster directement un fichier PHP pour des raisons de sécurité.
Reste la colonne de droite à nettoyer pour la rendre dynamique, elle est constituée de 2 parties, une boite de texte et une liste de liens. Commençons par la boite de texte.
Nous allons maintenant faciliter la création et l'affichage de la liste de liens.
Création de la structure de notre framework, dossiers menu et inc avec à l'intérieur notre bibliothèque de fonctions.
Vous trouverez en téléchargement un fichier compressé contenant les fichiers index.php et fonctions.inc.php.
Nous avons pour l'instant une seule page, index.php, très simple et qui fait appel à des fonctions de notre mini "framework" pour construire la page HTML qui est affichée.
Avant de développer d'autres pages, il faut pouvoir les appeler, pour cela nous allons maintenant modifier la fonction qui affiche le menu pour qu'elle soit dynamique.
Création du dossier menu avec NetBeans, il faut ensuite ajouter à l'intérieur de celui-ci ce que nous voudrions voir apparaitre au niveau du menu.
Maintenant nous modifions notre fonction AfficheMenu pour qu'elle lise le contenu du dossier menu, le mette en forme et le transforme en liens qui s'affichent à la place du menu statique existant.
Le code complet est détaillé dans la lecture suivante.
Avec le code que vous trouverez en téléchargement, je vous propose mes commentaires pour le mettre en perspective.
Google 
Facebook