Panel des technologies Web - pierrejean.wp.imt.fr · Notepad++, Netbeans Php Gestion des...
68
Transcript of Panel des technologies Web - pierrejean.wp.imt.fr · Notepad++, Netbeans Php Gestion des...
Objectif
Un panorama des technologies Web pour comprendre leurs positionnements et leurs utilisations
Questions
Evaluation
Sommaire
Avant propos
Les principes d’Internet
Les types de projets Web
Web statique
Principes de la programmation
Web dynamique JavaScript CSS Administration CMS Enfin
Le vocabulaire
Serveur Web Navigateur Registrar xhtml
Linux Base de données Html Css JavaScript
Apache DNS Php SQL Web2.0 Client Formulaire Jquery phpMyAdmin Eclipse-Pdt
Plugin Opensource Mysql xml Flux rss Hyperlien Mysql Debugger Adresse IP firewall MVC XP Flash FTP Firefox
La base
Le navigateur de l’internaute va émettre une demande auprès d’un serveur web qui va répondre en transmettant du contenu Html, Css, Xml, Images, contenu flash et/ou JavaScript.
Ce contenu peut être en partie extrait depuis une base de données stockant les informations.
Beaucoup de technologies
Partie présentation des informations:
Html5, Xhtml, Css, Images, Flash/Flex, Silverlight
Partie Serveur
Langage: Php, Asp, Java, Python, Ruby, Perl
Serveur d’application .Net, JbossAS, Symfony2
CMS: Drupal, Wordpress, Joomla
Partie base de données
SGBD: Mysql, MS Sql Server, Oracle, Sqlite
Nosql: BigTable, Hbase, couchDB
Autre: XML, Json, Lucene
Les principes d’Internet
Le principe du Web Le serveur Web Apache
Adresses IP Domain Name Server
Le navigateur est le client du serveur web Développement
Le logiciel de base de données
Le principe du Web
NAVIGATEUR URL
Requête
http://www.test.com/index.html
Réponse
Serveur Web
1 2
3
4 5
6
Le serveur Web Apache
Apache: +50% des serveurs web
URL Unified Ressource Locator Domaine, racine, dossiers, ressource
http://www.test.com/dossiers/page.html
http://146.19.252.215:8080/
https://drive.google.com:443/
DocumentRoot: le dossier racine du site web
Le fichier Httpd.conf
Adresse IP
aaa.bbb.ccc.ddd forme de l’adresse IP
IP v4 passage à IP v6
Serveur ctn
146.19.252.215
IP du FAI
158.12.1.5
192.168.1.1
192.168.1.5
192.168.1.4 Réseau local Internet
IP du site
146.19.2.1
Domain Name Server
Adresse Ip | Nom de domaine
127.0.0.1 localhost
146.19.2.1 laporte.site-eerie.ema.fr
146.19.252.215 www.master-ctn.ema.fr
146.19.252.212 svn.mines-ales.fr
DNS google 8.8.8.8
DNS EMA 146.19.1.117
Le navigateur est le client du
serveur web
Internet Explorer, Mozilla Firefox, Safari, Chrome, version mobile des navigateurs
L’interprétation du HTML est à la libre discrétion des navigateurs
Attention à la mise en cache ! Test ACID3
Navigateur en % 2013 – 01.NET
Hébergement et développement
Conception sur votre PC EasyPhp, Xampp, Wampp
Apache, Php, Mysql, phpMyAdmin
Mise à jours automatique, interface d’administration
Dreamweaver, Zend Studio, Eclipse PDT, Notepad++, Netbeans Php Gestion des différents fichiers htmls, images,
javascripts, organisation des dossiers
Déploiement en production, debugger
Le logiciel de base de données
Un outil fonctionnant de manière autonome pour conserver des données structurées
Extraction et manipulation des données via une syntaxe le SQL
Un outil pour la gestion des bases de données et des tables: phpmyadmin
Les types de projets
Projet : site web statique Projet avec du contenu dynamique
Projet : site Web manipulant des données Projet : vitrine Web avec des animations
Projet : type application Web Projet : Service Web
Projet : site web statique
Html + Css pour simplifier la mise en page Dreamweaver pour produire le contenu La charte graphique est à penser sous forme
de Div (Css Zen Garden pour des exemples) Pas de stockage d’information possible en
base de données Pas fonctionnalités type contributions,
intranet ou wiki
Projet avec du contenu
dynamique
L’utilisation d’un CMS est recommandée
Le stockage des informations dans une base de données est nécessaire
Présentation des informations avec une technologie de type template
La structure du CMS est complexe
Projet : site web manipulant
des données
Une application spécifique en Php avec une base de données Mysql, affichage Html+Css+javascript ou/et flash
Type d’application qui peut être intégré dans un CMS comme module
Une version responsive pour tablette et téléphone
Projet : vitrine web avec des
animations
Utilisation massive de flash/Silverlight/Javascript pour la présentation des informations
Nouvelles technologies Html5, application embarqué sur mobile ou dans le navigateur
Développement en Php ou en Java avec stockage de données, communication en XML
Projet : type application Web
Développement spécifique avec un framework Zend framework, .Net, Jboss, Spring, Ruby on rails, Symfony2
Utilisation de Html/Css/Javascript
Stockage des informations dans une base de données
Interface proche d’une application cliente
Projet : Service Web
Utilisation de framework dédié: .Net, Jboss, Php Zend Framework, Ruby on rails
Communication par Xml avec une application cliente tierce
Projet très spécialisé consultant des données aussi bien depuis un navigateur qu’une application autonome (smartphone)
WEB Statique
HTML: HyperText Markup Language Un "hello World!" en HTML
Le <tag> </tag> URL relatives ou absolues Les liens hypertexte ( ici )
HTML:Hyper-Text markup
Language
Objectif premier: publication scientifique
Langage à balises, normé par W3C
Actuellement HTML4.2 début de l’HTML5
Outils de vérification de la conformité
Forme du tag: <mot réservé> </mot réservé>
La structure de la page classique
Afficher le source d’une page
Un "hello World!" en HTML
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html> <head> <title> Exemple de HTML: Hello World! </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content=« Exemple, Hello World, Master CTE" /> <link rel="shortcut icon" href="/favicon.ico" /> </head> <body> <h1> <center>Hello World ! (centré en gros ) </center></h1> Ceci est une phrase avec un <a href="cible.html">hyperlien</a>. <p> Ceci est un paragraphe où il n’y a pas d’hyperlien. </p> <br /> Merci Wikipedia </body> </html>
URL Relatives ou absolues
Afficher une image par adresse absolue
<img src="htp://www.ema.fr/images/logo.gif" title="logo EMA" />
Afficher par rapport à la page Html l’incluant
<img src="images/logo.gif" />
Supposons que la page est dans /accueil/
<img src="../images/logo.gif" />
Les liens hypertextes
<a href="cv.html">ici mon cv</a>
<a href="cv.pdf">ici mon cv en pdf</a>
<a href="fr.html"><img src="fr.png" /></a>
<a href="fr.html#haut_page"><img src="fr.png" /></a>
<a name="haut_page">ici le haut de la page</a>
Le <tag> </tag>
<tag attribut1="valeur1" attribut2="valeur2" > </tag>
Tags imbriqués <ul><li>H</li><li>F</li></ul> De <h1> à <h6> Retour à la ligne et espace ne comptent pas <p> </p> <br />
<!-- ceci n’est pas afficher à l’écran --> Caractères spéciaux € é
Principe de la
programmation
Variables Tableaux Objets
Fonctions Ajouter sa fonction
Variables
Ceci est un nombre: 464
Ceci est du texte "Hello World!«
Valeur booléenne : true/false
$tentative = 0;
$message = "Entrez de nouveau votre code";
$message2 = 'code "PIN" ';
$tentative = $tentative + 1;
Tableaux
$notes[0]=10; $notes[1]=12; $notes[2]=14;
$excel[0][0]="HG"; $excel[0][1]="HD"; $excel[1][0]="BG"; $excel[1][1]="BD";
$bac["svt"]= 6; $bac["math"]= 11;
$nbrNotes = count( $notes );
$clefs = array_keys( $notes );
Objets
$status->text
SimpleXMLElement Object( [created_at] => Wed Sep 19 11:06:47 +0000
2012
[id] => 248377593307463680
[text] => Soutenances #TIC&Santé
Fonctions
echo("Joueur:"); echo( $score );
$arrondi = round( 1.95583 , 2 );
$arrondi = 1.95;
$xmlValide = $simpleXMLElement->valid();
echo ( $simpleXMLElement->valid() );
Ajouter sa fonction
function afficheScore( $nom , $score ) echo( "score du joueur " );
echo( $nom );
echo( $score );
afficheScore( "jean" , 100 );
afficheScore( "dray" , 50 );
Web Dynamique
Fabrication du HTML Le formulaire HTML
Envoyer des données avec GET Formulaire en POST
Extraire l’information de l’URL $#%£¤§%&!◊Ω≈
Fabrication du HTML
Apache-Php http://localhost/index.php
<html> <head><title>Premiere page Php</title></head> <body> <h1>Ceci est ma premiere page php</h1> Voici la date générée en Php : 08 Sep 2006 </body> </html>
Le formulaire HTML
Formulaire HTML soumettant des données vers un programme du serveur web en changeant de page <form action="programme.php" method="get">
<input type="submit">
</form>
Méthode Get via un lien hypertexte :<a href="log.php?image=1">ici</a>
Envoyer des données avec GET
<html> <title>Formulaire</title> <body> <form method="get" action="log.php">
Indiquez votre nom:<input type="text" name="le_nom" value="ici SVP">
Indiquez la civilité a utiliser:<input type="radio" name="civilite" value="Mr">Monsieur
<input type="radio" name="civilite" value="Mme">Madame <input type="submit" name="bouton" value="Ok">
</form> </body></html>
Formulaire en POST
POST selon la quantité des données (upload), masque les informations de l’URL, en test mettre GET, puis POST en production
Autres types de champs de formulaire
<input type="hidden" …
<input type="checkbox" …
<input type="radio" …
Apache http://localhost/log.php log.php page html virtuelle
Extraire l’information de l’URL
$#%£¤§%&!◊Ω≈
HTML: langage de présentation de l’information Navigateur Internet est un client lisant du HTML et exécutant du
Javascript Javascript: est un langage de programmation pour rendre plus facile
l’utilisation de sites Internet par exemple avec de l’Ajax Ajax: sous-ensemble de Javascript pour changer de l’information dans la
page HTML sans changer de page HTML Apache: Serveur Web distribuant du contenu HTML aux navigateurs
Internet et comprenant aussi le langage Php Php: langage de programme installé dans Apache et fabriquant de
l’HTML et du javascript pour le Navigateur sous les ordres d’Apache Formulaire Html: permet de demander de l’information à l’internaute et
l’information est soumise à Apache qui appelle un programme écrit en Php qui fabrique des pages Html contenant du javascript
Javascript
HTML+XML=XHTML Javascript un nouveau language
Le DOM : Document Object Model La recherche par DOM
Ajax Jquery
HTML+XML=XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN« "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Exemple XHTML 1.0 depuis WIKIPEDIA</title> </head>
<body> <ul> <li>Tous les éléments doivent être explicitement balisés.</li> <li>Les balises fermantes ne sont pas optionnelles.</li> <li>Les noms d'éléments et d'attributs <em class="important">doivent</em> être en minuscules.</li> <li>Tous les attributs doivent avoir une valeur explicite <input type="checkbox" checked="checked" value="..." />.</li> <li>Les guillemets sont <em class="important">toujours</em> obligatoires autour des valeurs d'attribut.</li> <li>Les éléments vides doivent être fermés <img src="i.png" alt="i"/>.</li> </ul>
</body> </html>
Javascript, un nouveau langage
Langage embarqué dans l’HTML Evènement déclenchant les programmes
onclick, onload, onchange Des nouvelles bibliothèques puissantes
JQuery, Dojo, Prototype, Rico, Json, Google toolkit
<script type="text/javascript"> document.write('Hello World!'); </script>
Le DOM
DOM=Document Object Model Un tag peut avoir un id unique dans la page Un tag peut avoir une ou plusieurs classes partagées <body id="css-zen-garden"> <h1 id="principal" class="titres"> Css<span
class="acronyme gras">Zen Garden</span></h1> <h2 id="titre_rubrique"><span class="gras">La
beauté de la conception</span> </h2>
La recherche par DOM
div#titre <div id="titre">…</div>
.gras <span class="gras">…</span>
<h2 class="gras">…</h2>
div#titre > h1 <div id="titre"><h1>
#sp .gr <h3 id="sp"><ul><li class="gr">
ul.firstChild <ul><li>un</li><li>deux</li>
input[type=radio] <input type="radio"/>
Ajax
Asynchronous Javascript And Xml permet de modifier dynamiquement une page sans changer d’URL
document.getTagById(‘principal’).innerHtml=‘Nouveau titre’; ajax = new XMLHttpRequest(); ajax.open(‘POST’,’heure.php’, true); ajax.onreadystatechange = function() if (ajax.readyState == 4)
getElementById(‘heure').innerHTML = ajax.responseText; Afficher la source, Afficher la source générée
Jquery
<script type="text/javascript" src="js/jquery.js" /> <script type="text/javascript"> $(document).ready(function() $('img#wait').show('slow'); ); </script>
<img src="images/wait.gif" id="wait" style="display:
none;" />
CSS
CSS: Cascading Style Sheet DIV et Span
La mise en boite des DIVs CSS fluide
Séparer pour mieux s’organiser Programmation orientée internaute Bootstrap, Boilerplate, Foudation
CSS: Cascading Style Sheet
<h1 style="color:red;font-style:italic;">
<style type="text/css">
bodycolor:red;font-style:italic;
h1.grasfont-style:bold; font-size:12pt;
h1# principal display:none;
background-image:url(‘rubrique2.png’);
</style>
DIV-ision des infos,
SPAN un morceau d’info
Les tags DIV (élément de type bloc) et SPAN (inline) avec le CSS pour réaliser une mise en page
div#container position:absolute; left:5px; top:5px; width600px;
height:400px; h2 span border: 2px 1px 3px 4px dotted black; h2>span#premierfont-size:2em;
La mise en boîte des DIVs
<html>
Div vue par Web developer
Css Zen Garden 1 fichier Html fixe
# Css différents
CSS fluide & Responsive
<html><head><title>glish.com</title> <style type="text/css"> #main border:1px solid #000; background-color:#fff; #main #menu border:1px solid #000; float:right; width:230px; background-color:#eee;
margin:3px 3px 3px 3px; </style></head><body> <div id="main"> <div id="menu"> <h1>menu</h1> <p>........</p> </div> <h1>main</h1> <p>...</p> </div> </body></html>
Séparer pour mieux
s’organiser
<title>Hypertext Markup Language - Wikipédia</title> <!-- Feuille de styles --> <link rel="stylesheet" href="/skins.css" type="text/css"
media="screen" /> <link rel="stylesheet" href="/print.css" type="text/css"
media="print" /> <link rel="stylesheet" href="/skins-main.css" type="text/css"
media="screen" /> <!-- Javascript --> <script type="text/javascript" src="ajax.js"></script> <script type="text/javascript" src="get.js"></script>
Programmation orientée
internaute
Fonctionnalités pour les internautes 3 clics au maximum pour les informations
Mode dégradé sans image
Mode impression sans fond de couleur
Prévoir un design fluide ou responsive selon le terminal mobile, tablette, pc, tv grand écran
URL Explicite
Bootstrap, Boilerplate,
Foundation
Framework CSS
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input name="inputRemenberMe"
type="checkbox">
Remember me
</label>
</div>
</div>
</div>
Administration d’un CMS
Structure d’un CMS Stockage de d’information
Gestion de la sécurité Droits: chmod
Structure d’un CMS
Des fichiers php qui s’appellent en cascade La fonction include La modularité du code
Des objets qui stockent une information var_dump(); print_r(); les fichiers de logs
Il faut lire la documentation pour comprendre la philosophie de l’outil
Stockage de l’information
Réaliser des sauvegardes, de tout ?
Ce qui est dans la base de données
Ce qui est dans un dossier particulier
Les modules, leur version, leur configuration
Gestion de la sécurité
Mot de passe pas trop simple
Gestion fine des droits d’utilisateurs
Suivi des messages des logs
Mise à jours de sécurité
Version de test, version de production
Reprise après incident
Droits: chmod
Utilisateur exécute apache.exe
- 421 421 421 index.php
drwx rwx rwx
user grp other
chmod 755
Upload de fichiers sur le serveur
$#%£¤§%&!◊Ω≈
Navigateur Internet est un client lisant HTML et exécutant du Javascript qui peut être de l’Ajax
Page Php est un programme qui est installé dans le serveur Apache, recevant des données par des formulaires Html, interrogeant le SGBD pour produire du contenu pour le navigateur; contenu en Html et avec du Javascript
SGBD est un logiciel pour stocker les informations dans des tables de bases de données et permettant de répondre rapidement aux questions en SQL
Bon sens
Compte de base de données: droits limités Complexité des mots de passes Politique de sauvegarde BD et Fichiers essayez de faire une reprise après incident
Lister les modifications importantes agir de manière réversible
Tester en local avant de déployer Organisation rigoureuse des données
Il faut
Savoir utiliser le Firebug et debugger Eclipse Pdt
Indenter le code et écrire des commentaires
Lire de la documentation en quantité Php.net, Mysql.com, alsacréation ,site du zéro
Clic droit: afficher la source
La suite
TP PHP, Twitter, base de données
Installation sur le serveur web du master ctn
Présentation d’autres CMS et outils web
Conception et Manipulation de SGBD
![Is projet[1] projet carriere](https://static.fdocuments.fr/doc/165x107/58f14ccb1a28abfe728b4595/is-projet1-projet-carriere.jpg)
