Ingénierie Web Ingénierie Multimédia et Web Nicolas Thome Ruven Pillay Page 1
Ingénierie Web Partie Développnt Web Page
Ingénierie Web Planning des Cours 1er Partie: Indexation d'images: Nicolas Thome 4/11/010 01/1/010 08/1/010 Partie: Développnt Web: Ruven Pillay 15/1/010 Vacances! 05/01/011 1/01/011 19/01/011 Page 3
Ingénierie Web Ruven Pillay Ingénieur de Recherche au CRMF au départnt des Archives et Nouvelles Technologies de l'information Imagerie multi/hyperspectrale, 3D Technologies web Web sémantique Ontologies Base de données Page 4
Ingénierie Web CRMF Crée in 1931 Centre nationale pour les musées de France Situé dans le musée du Louvre 500m,150 chercheurs, restaurateurs etc Laboratoires pour l'analyse scientifique et restauration des oeuvres Page 5
Ingénierie Web Analyses Scientifiques Micro X-ray Fluorescence PIXE analyses Page 6
Ingénierie Web Accélérateur de particules! Page 7
Ingénierie Web 3D Page 8
Ingénierie Web Imagerie Multi/Hyper spectrale Page 9
Ingénierie Web Archive Documentaire Archives historique sur l état des oeuvres Rapports sur l état des oeuvres depuis le 19 siècle Rapports de restauration Rapports d'analyse scientifique Données analytique Utilisation des technologies web et base de données avancé Ontologies Web sémantique Accès Multilingue Page 10
Ingénierie Web Base de Données Page 11
Ingénierie Web Base de Données Page 1
Ingénierie Web Base de Données Ruby on Rails 6TB de donnés 10 langues Contenu: 50000 oeuvres 300000 images 50000 rapports 15000 analyses scientifiques Lien XML/RDF avec Europeana Page 13
Ingénierie Web Planning des Cours 1er Partie: Indexation d'images: Nicolas Thome 4/11/010 01/1/010 08/1/010 Partie: Développnt Web: Ruven Pillay 15/1/010 Vacances! 05/01/011 1/01/011 19/01/011 Page 14
Ingénierie Web Objectif Globale Travaux pratique Utiliser des méthodes de conception et architectures web Utiliser les standards Apprendre à mieux déboguer Programmation «propre», modulaire, bien commenté Techniques web avancé Créer une application web avancé pour la reconnaissance d'image en ligne Page 15
Ingénierie Web Objectif Technique Utilisation des architectures Logiciel: MVC Service: REST Javascript / Ajax / JSON CSS Utilisation des frameworks pour aider le développnt Javascript, CSS, PHP Optimisation Communication avec services extérieur Page 16
Ingénierie Web Evaluation Rapport à rendre sur les 4 séances Code source Structuration Documentation Propre Élégance Evaluation finale Examen (60%) sur les 7 séances Rapports (40%) Page 17
Ingénierie Web RETIN Application web avancé pour la reconnaissance d'image en ligne Page 18
Ingénierie Web RETIN ETIS, laboratoire des Equipes Traitnt de l'information et Systèmes commune à: ENSEA et l'université de Cergy-Pontoise Moteur d'indexation d'images Algorithmes de recherche et indexation en C++ Serveur en C++ pour gérer les recherches Application web en PHP Méta-données dans MySQL Page 19
Ingénierie Web http://retin.ensea.fr Page 0
Ingénierie Web Page 1
Ingénierie Web Page
Ingénierie Web Page 3
Ingénierie Web Page 4
Ingénierie Web Cours Aujourd hui L'architecture Logiciel L'architecture Service REST Composants Logiciel MVC LAMP: Linux, Apache, MySQL et PHP Utiliser un framework PHP Page 5
Ingénierie Web Environnnt Logiciel LAMP : Linux, Apache, MySQL, PHP Page 6
Ingénierie Web LAMP Beaucoup de technologies pour développnt web: LAMP Linux, Apache, MySQL, PHP PHP PHP, Java, Python, Ruby, Perl, ASP, Coldfusion etc Script Interprété pas compilé Syntaxe dérivé de C Efficace et vite MySQL Base de données relationnelle Page 7
Ingénierie Web Architecture Logiciel MVC : Model View Controller Page 8
Ingénierie Web MVC Architecture Modèle-VueContrôleur Méthode de conception de logiciel Simple Point d'entrée unique ex: index.php Controller Controller View View Model Model Structure flexible Page 9
Ingénierie Web Model Gère les données de l'application Interaction avec la base de données Assure l'intégrité des données Méthodes pour: Insertion Suppression Changnt Récupération Exemple Web: Base de données + logique + authentification etc Page 30
Ingénierie Web View Affichage de l'interface entre l'application et utilisateur Effectue aucun traitnt Affiche les résultats Exemple Web: Génération de HTML, XML etc Page 31
Ingénierie Web Controller Gestion des événnts Gestion de droit d'accès Mets à jour le modèle et view Demande la modification des données au modèle mais modifie rien lui même. Exemple Web: Reçois les requêtes GET, POST etc et contrôle le modele et view Page 3
Ingénierie Web MVC Web Controller Controller (PHP) (PHP) XHTML XHTML CSS CSS Javascript Javascript Model Model (PHP) (PHP) MySQL MySQL View View (PHP) (PHP) Page 33
Ingénierie Web Exemple Controlleur Class Controller{ function index(){ $list = $model->getall(); $template->render($list); } function new(){ $m = $_POST['object']; $model->new($m); } function delete(){ $m = $_DELETE['object'] ; $model->delete($m) ; }; Page 34
Ingénierie Web Exemple Modèle Class Model{ function get($id){ $m = $database->query( ' SELECT * FROM model WHERE id = ' + $id ) ; return $m ; } function new($m){ $database->query( 'INSERT INTO model (title) VALS(' + $m->title + ')' ); } function delete($m){ $m = $_DELETE['object'] ; $database->query(' DELETE FROM model WHERE id = ' + $m + ); }; Page 35
Ingénierie Web Exemple Vue <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <html> <body> <h1> $template->title </h1> <p> $template->text </p> </body> </html> Page 36
Ingénierie Web Routing Une seule point d'entré : index.php Utilise les fonctions Rewrite de Apache Par exemple : /images/avions1 /images/avions1/edit /index.php?controller=images&id=avions1&action=index /index.php?controller=images&id=avions1&action=edit Permet des URL plus sémantique Page 37
Ingénierie Web Architecture Services REST : Representational State Transfer Page 38
Ingénierie Web REST Style architecturale conçu pour les services web (comme SOAP, XML-RPC) Ressource avec identifiant globale URI pour HTTP Ex: http://lip6.fr/images/avion1 http://lip6.fr/ordinateurs/macbookpro Utilise les entêtes de HTTP pour les méthodes Stateless Représentations multiple XML, HTML, JSON etc... Page 39
Ingénierie Web REST Méthodes HTTP standards (verbes) GET -> récupérer POST -> créer PUT -> mettre à jour DELETE -> détruire Exemples Liste des images Récupérer une image GET http://service.com/images/avion1 Détruire une image GET http://service.com/images DELETE http://service.com/images/avion1 Créer une image POST http://service.com/images/avion Page 40
Ingénierie Web REST Avantages Simplicité Architecture adaptative (Scalabilité) marche bien avec HTTP cache et serveur proxy Interface qui sépare bien le serveur et client Désavantages Seulnt 4 méthodes Pas pour services complexes Page 41
Ingénierie Web Frameworks Exemple PHP : Codeigniter Page 4
Ingénierie Web Framework CodeIgniter Logiciel Libre MVC REST Minimaliste mais puissante Documentation bon Bon librairie pour apprendre http://codeigniter.com Page 43
Ingénierie Web Structure de Code / index.php system/ application/ config/ models/ views/ controllers/... codeigniter/ database/ libraries/ plugins/... Page 44
Ingénierie Web Flux de Contrôle Page 45
Ingénierie Web TD1 : Objectif Créer une application web images Architecture MVC, REST Technologies Linux, Apache, MySQL, PHP XHTML Framework PHP Fonctionnalités: Visualiser une base de données des images avec navigation Gérer l'affichage de 1000's images Pagination Navigation Recherche texte Points importants: Structuration propre Modularité Page 46
Ingénierie Web Etapes MySQL Créer une base de données et table pour les images Remplir le base PHP Tester PHP et la connexion entre PHP et MySQL Télécharger la librairie CodeIgniter et la configurer Etudier le structure MVC Créer notre propre contrôleur, modèle et vues pour les images Ajouter possibilité de naviguer dans les images Ajouter fonctions pour recherche texte Ajouter du «Logging» Nouvelle table MySQL Enregistrer tous les requetes sur le site Page 47
Ingénierie Web Questions? Page 48