Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Cours de Programmation web L1 Info 2018 - 2019 Par J.D. BATUBENGA Doctorant en

Cours de Programmation web L1 Info 2018 - 2019 Par J.D. BATUBENGA Doctorant en Informatique BATUBENGA M. J.D. 2 0.Les bases de la programmation web 0.1.L’internet 0.2.Le web et le site web 0.3.Le site web statique et le site web dynamique 0.4.Les différents types de sites 0.5.Les outils de développement web 0.6.Les composantes d’une application web 0.7.Les échanges de données dans une application web avec formulaire 1.Les bases de HTML et CSS 1.1. Introduction à HTML 1.2. Structure d’un programme HTML 5 1.3. Eléments et attributs de HMTL 5 1.4. Les feuilles de style 1.5. Le formulaire 1.6. Exercices PLAN DU COURS BATUBENGA M. J.D. 3 2. Créer un site web 2.1. Généralités 2.2. Structure d’une page web 2.3. Recommandations 2.4. Organisation du site et mise en ligne 3.Introduction au Javascript 3.1.Les scripts côté navigateur 3.2.Javascript dans les pages HTML 3.3.Les instructions de base 3.4.Exercices 4.Le langage PHP 4.1.Les bases du langage PHP 4.2.Configuration du PHP 4.3.Récupérer les paramètres envoyés par un client web 4.4.Gérer les bases de données MySQL PLAN DU COURS (Suite) BATUBENGA M. J.D. 4 5. Système de publication de contenu 5.1.Introduction 5.2.Avantages des logiciels de gestion de contenu 5.3.Fonctionnalités attendues pour les logiciels de gestion de contenu 5.4.Quelques solutions existantes 6.Etude de cas PLAN DU COURS (Suite) BATUBENGA M. J.D. 5 0.1.L’Internet L’Internet (Interconnected Network) comme réseau international de communication entre ordinateurs est fait de nombreux réseaux distincts et interconnectés appartenant à des organisations commerciales, académiques et gouvernementales, ainsi que de fournisseurs de services Internet (FSI). Les services proposés sur Internet sont notamment le web qui en est le mode le plus privilège d’accès, le courrier électronique (courriel ou e-mail), les forums et salles de discussion, la vidéo conférence, la faculté d’accéder à des ordinateurs distants et d’envoyer ou recevoir des fichiers… Le terme que les médias, en particulier, ont adopté, est celui « d’autoroutes de l’information », pour désigner un réseau de télécommunication numérique haut débit permettant de transmettre beaucoup d’informations à la fois. Par définition, l’Internet est une collection à l’échelle mondiale de réseaux informatiques interconnectés pour échanger les données, utilisant le protocole TCP/IP. 0. Les bases de la programmation web BATUBENGA M. J.D. 6 0.2.Le web et le site web Le web ou « World Wide Web », d’où l’acronyme www, en français « toile mondiale » est un système d’information multimédia utilisé sur internet et basé sur la technologie de l’hypertexte (ou hyperlien). Un document Hypermédia est un document hypertexte avec la différence que les liens peuvent référencer également des fichiers son, images ou images animées (vidéo). Inventé par Tim Berners-Lee, son principe repose sur l'utilisation d'hyperliens pour naviguer entre des documents (appelés «pages web») grâce à un navigateur. Une page web est un document électronique contenant du texte, du son, des images fixes ou animés, ainsi que des liens hypertextes vers d’autres pages web. Un site web (aussi appelé site internet ) est un ensemble de pages web reliées par des hyperliens, stockées ou hébergées sur un ordinateur connecté en permanence à Internet (serveur web). Il est architecturé autour d'une page centrale, «page d'accueil» 0. Les bases de la programmation web BATUBENGA M. J.D. 7 Le dialogue entre un programme serveur et un programme client s’effectue selon des règles précises constituant un protocole. Le protocole du Web est HTTP, et le FTP d’échanger des fichiers. La création d'un site web est un projet à part entière à 3 phases : • La conception qui représente la formalisation de l'idée ; • La réalisation qui correspond au développement du site web ; • L’hébergement qui se rapporte à la mise en ligne du site, de manière permanente. 0.3. Le site web statique et le site web dynamique Une page web statique est représenté par un fichier texte ne contenant que des codes HTML et CSS, avec éventuellement des images animées, des éléments défilants et des liens vers d'autres documents. Un site web statique est constitué de pages web statiques. Ce site fonctionne très bien, mais son contenu ne peut pas être mis à jour automatiquement ; il faut que le webmaster modifie manuellement le code source pour y ajouter des nouveautés. 0. Les bases de la programmation web BATUBENGA M. J.D. 8 Ce site est par ailleurs dans l’impossibilité de renvoyer une page personnalisée selon le visiteur et de créer une page dynamiquement selon les entrées d'une base de données etc. Un site dynamique est alors constitué des pages dynamiques, c-à-d des pages qui sont générées à la volée par des programmes. Et leurs contenus peuvent changer sans l'intervention du webmaster. Un site Internet est une entreprise coûteuse en termes de temps. Les mises à jour régulières sont parfois difficiles à réaliser. Or, un site qui n’évolue pas est condamné à disparaitre ou à voir sa fréquentation diminuer. L’internaute aime le changement, et non un site statique qui n’évolue guère. Les langages dynamiques facilitent les opérations de mise à jour, permettent plus d’interactivité sur les pages… Par convention l'extension donnée à une page HTML est .htm ou .html, mais une page web peut porter une autre extension : .asp pour une page générée dynamiquement en ASP ; .php, pour une page générée dynamiquement en PHP ; etc. 0. Les bases de la programmation web BATUBENGA M. J.D. 9 0.4. Les différents types de Sites a) Le site « carte de visite » : C’est un site qui ne regroupe que les informations nécessaires pour entrer en contact avec vous et votre entreprise. b) Le site vitrine : C’est un site avec plusieurs pages pour exposer votre entreprise sur le web : vos produits, vos services, vos coordonnées et éventuellement un formulaire de prise de contact ou de demande de devis. c) Le site de e-commerce : Pour vendre des produits ou des services en ligne, vous devez alors opter pour un site e- commerce d) Le site mobile : De plus en plus de connexions au web se font depuis un téléphone mobile ou un smartphone. Il est important de disposer d’un site web adapté aux petits écrans de ces appareils mobiles. Autres : application web, le site communautaire, le blog, … 0. Les bases de la programmation web BATUBENGA M. J.D. 10 0.5. Les outils de développement web Certains outils pour faire du développement web sont : • Serveur web : programme le plus important, chargé de délivrer des pages web aux visiteurs. Ex : apache, Internet Information Server (IIS) • Navigateur web : programme chargé d’afficher le contenu du fichier enregistré sur le serveur après l’avoir interprété. Ex : Internet Explorer, Firefox • Les feuilles de style (CSS - Cascading StyleSheets) : ce sont des documents avec des définitions des styles de chaque balise d'une page web ou d'un site tout entier. HTML structure le contenu du document, tandis que CSS formate un contenu structuré. • Langages de scripts côté serveur : PHP, Perl, Java, … • Langages de scripts côté navigateur : Javascript, VBScript, … Dans le cadre de ce cours, nous allons aborder le langage de structuration HTML, le langage de formatage CSS, le langage de scripts côté navigateur Javascript et le langage de scripts côté serveur PHP, associé à la base de données MySQL. (Logiciel = Wampserver). 0. Les bases de la programmation web BATUBENGA M. J.D. 11 0.6. Les composantes d’une application web Le fonctionnement d’un site nécessite : Ordinateur serveur, programme serveur en attente des requêtes, programme client qui envoie les requêtes et attend les réponses. 0. Les bases de la programmation web BATUBENGA M. J.D. 12 Un autre type important d’interaction où le programme client demande au programme serveur d’exécuter un programme, en fonction de paramètres, et de lui transmettre le résultat. 0. Les bases de la programmation web BATUBENGA M. J.D. 13 0.7. Les échanges de données dans une application web avec formulaire 0. Les bases de la programmation web J.D. BATUBENGA 14 I.1. Introduction à HTML 1.1.1. Définitions Le HTML (HyperText Markup Language, en français langage de balisage hypertexte) constitue le langage de base du Web. C’est un langage de balisage (marquage ou de structuration) qui permet de décrire la page Web élément par élément en se servant de balises de description. Le code HTML est déchiffré par le navigateur du client. Les balises permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents. HTML 5 que nous présentons ici est une recommandation du W3C (www Consortium). Il s’agit d’une version de HTML respectant les améliorations apportées par les nouvelles technologies permettant de définir de nouvelles balises et desquelles sont exclues toutes les imprécisions que l’on rencontre souvent dans les pages web. I. Les Bases de HTML et CSS J.D. BATUBENGA 15 1.1.2. Règles d’écriture de documents HTML5 Pour créer des documents en HTML 5, on commence par une déclaration DOCTYPE HTML simplifié par rapport au XHTML : Le doctype : <!DOCTYPE html> Les autres règles à respecter sont : La balise d’ouverture <html> doit se trouver avant tout autre élément (mais après la uploads/Ingenierie_Lourd/ cours-de-programmation-web.pdf