php/extjs experience feedback - iav case - 1

60
Environnement de travail Fayçal TIRICH 11/2006

Upload: fayway

Post on 21-Jun-2015

832 views

Category:

Technology


3 download

DESCRIPTION

Brief presentation of my work as an Software Engineer for IAV between 10/2006 and 09/2007 - Part 1

TRANSCRIPT

Page 1: PHP/ExtJs experience feedback - IAV case - 1

Environnement

de travail

Fayçal TIRICH

11/2006

Page 2: PHP/ExtJs experience feedback - IAV case - 1

Serveur de déploiement

Page 3: PHP/ExtJs experience feedback - IAV case - 1

Serveur de déploiement

•OS: Debian Server

• Serveur Web: Apache 2

oPrincipaux modules: mod_alias, mod_ssl, mod_php5, mod_rewrite...

•Base de données: MySQL 5

oMoteur de table: InnoDB, MyISAM

•Utilitaires: Shell, Shorewall, OpenSSH, SSMTP, phpMyAdmin...

Page 4: PHP/ExtJs experience feedback - IAV case - 1

Poste de développement

Page 5: PHP/ExtJs experience feedback - IAV case - 1

Poste de développement

•OS: Debian + bureau Gnome

•Editeur: Eclipse

•Principal plugin:

oPHP

Development

Tools

Page 6: PHP/ExtJs experience feedback - IAV case - 1

Poste de développement

oPlugin

complémentaire

Aptana

Development Tools

Page 7: PHP/ExtJs experience feedback - IAV case - 1

Poste de développement

•Principaux avantages du

plugin Aptana:

oEditeur HTML,CSS,

JavaScript...

oSynchronisation

FTP/SFTP

Page 8: PHP/ExtJs experience feedback - IAV case - 1

Poste de développement

•Administration de la

base de données :

oMySQL Admin

Page 9: PHP/ExtJs experience feedback - IAV case - 1

PHP

Page 10: PHP/ExtJs experience feedback - IAV case - 1

PHP

•Programmation Orientée Objet

Page 11: PHP/ExtJs experience feedback - IAV case - 1

PHP

•Gestion d'erreurs par Exception

Page 12: PHP/ExtJs experience feedback - IAV case - 1

Outils de débugage

Page 13: PHP/ExtJs experience feedback - IAV case - 1

Outils de débugage

•PHP Debug: Classe pratique pour analyser les variables échangées

oAlternatif : Xdebug

Page 14: PHP/ExtJs experience feedback - IAV case - 1

Outils de débugage

•Pour Javascript/CSS/HTML : Console d'erreurs du navigateur Firefox

Page 15: PHP/ExtJs experience feedback - IAV case - 1

Outils de débugage

• L'extension Firebug de

Firefox

Page 16: PHP/ExtJs experience feedback - IAV case - 1

Outils de débugage

•Exemple de debugage Pas-

à-pas d'un code Javascript

via l'extension Firebug

Page 17: PHP/ExtJs experience feedback - IAV case - 1

PHP – Accès aux bases de données

Page 18: PHP/ExtJs experience feedback - IAV case - 1

PHP – Accès aux bases de données

• Librairie: PHP ADOdb

oAvantages :

Abstraction des bases de données : Changer la base sans changer le code

Codage en POO et support du PHP5

Support des Exceptions

Rapidité

Gratuité

...

Page 19: PHP/ExtJs experience feedback - IAV case - 1

PHP – Accès aux bases de données

•Autres avantages de PHP ADOdb

oMéthodes pratiques de manipulation d'ordres SQL

Page 20: PHP/ExtJs experience feedback - IAV case - 1

PHP – Accès aux bases de données

•Autres avantages de PHP ADOdb

oMéthodes pratiques de génération d'ordres SQL

Page 21: PHP/ExtJs experience feedback - IAV case - 1

PHP – Accès aux bases de données

•Autres avantages de PHP ADOdb

oMise en cache des requêtes SQL: Soulager le serveur de la base de données en

« cachant » les requêtes dans des fichiers avec une date d'expiration personnalisée

selon le cas

Page 22: PHP/ExtJs experience feedback - IAV case - 1

PHP – Accès aux bases de données

•Autres avantages de PHP ADOdb

oADOdb Active Record :

Librairie Object-Relational Mapping

implémentant les bases de données

relationnelles

Comporte un grand nombre de fonctions

pratiques : save(), replace(), delete(),

load(), find()...

Supporte les transactions et le caching

Supporte la connexion multiples aux bases

de données

Modèle objet flexible offrant la possibilité

de surcharger les méthodes de base

....

Page 23: PHP/ExtJs experience feedback - IAV case - 1

PHP – Couche présentation

Page 24: PHP/ExtJs experience feedback - IAV case - 1

PHP – Couche présentation

•Moteur de template Smarty :

oSéparation entre la logique applicative et la présentation:

•Par exemple pour générer

la page à gauche, on

mélange jamais le code

PHP avec le code HTML.

Cela permet de :

oGagner du temps vu

que le codeur PHP et

le designer HTML

peuvent travailler en

parallèle.

o faciliter la

maintenance

omieux s'organiser dans

les grands projets

Page 25: PHP/ExtJs experience feedback - IAV case - 1

PHP – Couche présentation

•Ainsi la page précédente est organisée comment suivant:

oUn premier fichier template ne contenant que du HTML et du code Smarty mais jamais du code

PHP ou de requêtes SQL...

Page 26: PHP/ExtJs experience feedback - IAV case - 1

PHP – Couche présentation

•Un deuxième fichier PHP contenant la

classe implémentant les différentes

méthodes définissant la logique

applicative

Page 27: PHP/ExtJs experience feedback - IAV case - 1

PHP – Couche présentation

•Un troisième fichier PHP faisant la

relation entre le premier fichier

template et le deuxième fichier PHP

contenant la bonne classe avec les

bonnes méthodes à appeler

Page 28: PHP/ExtJs experience feedback - IAV case - 1

PHP – Couche présentation

•Autre point fort de Smarty :

oGestion du cache : Permet de mettre en cache des pages entières ou seulement des parties

ayant des données qui ne changent pas fréquemment afin d'éviter une re-compilation inutile

pouvant ralentir le serveur web.

Page 29: PHP/ExtJs experience feedback - IAV case - 1

Applications Web... lourdes

Page 30: PHP/ExtJs experience feedback - IAV case - 1

Applications Web... lourdes •Toute en gardant la même logique applicative concernant la couche métier et la couche d'accès aux

données, la tendance pour la couche présentation va de plus en plus vers de nouvelles plateformes

basées sur la technique Ajax (Asynchronous JavaScript and XML) qui offrent des composants aussi

performant que les composants des bibliothèques telles que Qt , wxWidget, Swing ou celles de la

plateforme .Net

Page 31: PHP/ExtJs experience feedback - IAV case - 1

Applications Web... lourdes •Plateforme Ajax adoptée : ExtJS

•Avantages :

oCompatibilité avec la majorité des navigateurs

oPeut être adaptée avec plusieurs librairies surtout Yahoo! User Interface, l'une des plus mûres

librairies Ajax

oLa partie présentation est totalement indépendante du langage utilisé dans la partie backend:

On peut donc migrer de PHP à Pyton, JSP ou RubyOnRails par exemple sans changer le code

Javascript des interfaces

oUne sélection de composants complète : DataGrid, TreeView, TabPanel, ToolBar, Calendar,

Menu, Layout, ModalBox, WYSIWYG....

oGratuite

oSupport de la communauté

o ...

Page 32: PHP/ExtJs experience feedback - IAV case - 1

Applications Web... lourdes •ExtJS en action

Page 33: PHP/ExtJs experience feedback - IAV case - 1

Exemples d'application

Page 34: PHP/ExtJs experience feedback - IAV case - 1

Installation et configuration du serveur

Page 35: PHP/ExtJs experience feedback - IAV case - 1

Préparation du serveur de

déploiement •Partie installation et configuration :

oMise en place de la version Server du dernier Debian (Version 4.0 Etch au moment du

déploiement)

oY installer et configurer OpenSSH Server (changer le port et interdire au root de se connecter à

distant)

o Installer MySQL et sécuriser le compte root

o Installer PHP5 ainsi que ses principaux modules : php5-mysql, php5-gd...

o Installer Apache2 et et ses principaux modules et surtout activer le mode rewrite et le https en

utilisant une clé auto-générée (pour le moment)

o Installer et configurer PhpMyAdmin

o Installer le firewall Shorewall et fermer tous les ports à l'exception des ports, 80, 443 et le port

de l'OpenSSH server

o Installer le package SSMTP pour pouvoir envoyer des mails depuis des commandes Shell à

l'extérieur

oRéaliser des petits scripts Shell faisant une sauvegarde compressée journalière de la base

données MySQL et une autre hebdomadaire des codes sources des sites. Ces points de sauvegarde

sont envoyés après à un compte GMAIL créé spécialement pour cette tâche de sauvegarde.

Page 36: PHP/ExtJs experience feedback - IAV case - 1

Partie développement

Page 37: PHP/ExtJs experience feedback - IAV case - 1

www.iavcha.ac.ma

Page 38: PHP/ExtJs experience feedback - IAV case - 1

www.iavcha.ac.ma •Partie développement :

oLe cas PHP/Smarty:

www.iavcha.ac.ma

Page 39: PHP/ExtJs experience feedback - IAV case - 1

www.iavcha.ac.ma •Principales fonctions du cas PHP/Smarty: www.iavcha.ac.ma

•Moteur de recherche

interne

Page 40: PHP/ExtJs experience feedback - IAV case - 1

www.iavcha.ac.ma •Principales fonctions du cas PHP/Smarty: www.iavcha.ac.ma

•Compte sécurisé

pour chaque

membre du

personnel: Les

variables échangées

sont protégées

contre les attaques

du type Injection

SQL et les attaques

XSS (Cross-site

scripting)

Page 41: PHP/ExtJs experience feedback - IAV case - 1

www.iavcha.ac.ma •Principales fonctions du cas PHP/Smarty: www.iavcha.ac.ma

•Modification

dynamique et

instantanée des

profils par les

membres concernés

Page 42: PHP/ExtJs experience feedback - IAV case - 1

www.iavcha.ac.ma •Principales fonctions du cas PHP/Smarty: www.iavcha.ac.ma

•Module de

publication de CV

Online

Page 43: PHP/ExtJs experience feedback - IAV case - 1

www.iavcha.ac.ma •Principales fonctions du cas PHP/Smarty: www.iavcha.ac.ma

•Exemple de formulaire

d'ajout/modificationd'u

ne section de CV

Page 44: PHP/ExtJs experience feedback - IAV case - 1

www.iavcha.ac.ma •Principales fonctions du cas PHP/Smarty: www.iavcha.ac.ma

•Résultat obtenu d'une

page personnelle d'un

membre

Page 45: PHP/ExtJs experience feedback - IAV case - 1

www.iavcha.ac.ma •Principales fonctions du cas PHP/Smarty: www.iavcha.ac.ma

•Partie administration:

oGestion des

utilisateurs

Page 46: PHP/ExtJs experience feedback - IAV case - 1

www.iavcha.ac.ma •Principales fonctions du cas PHP/Smarty: www.iavcha.ac.ma

•Partie administration:

oGestion du

contenu

Page 47: PHP/ExtJs experience feedback - IAV case - 1

www.iavcha.ac.ma •Principales fonctions du cas PHP/Smarty: www.iavcha.ac.ma

•Partie administration:

oGestion des

galeries de la

média-thèque

Page 48: PHP/ExtJs experience feedback - IAV case - 1

www.iavcha.ac.ma •Principales fonctions du cas PHP/Smarty: www.iavcha.ac.ma

•Exemple du

résultat d'une

galerie Ajax

Page 49: PHP/ExtJs experience feedback - IAV case - 1

Gestion du Stock

Page 50: PHP/ExtJs experience feedback - IAV case - 1

Gestion du Stock •Exemple 2 : Le cas PHP/ExtJs via une application de gestion de stock

Page 51: PHP/ExtJs experience feedback - IAV case - 1

Gestion du Stock

•Cette application

est installée dans un

serveur sécurisé

(https) pour assurer

une confidentialité

extrême des

données échangées

contre les logiciels

espions de capture

des paquets

Page 52: PHP/ExtJs experience feedback - IAV case - 1

Gestion du Stock

•Exemples de

composants utilisés

dans cette application:

oModalBox

oTreeView

personnalisable

oLayout

dimensionable

oDatePicker

oComboBox avec

auto suggestion

oData Grid (Triable,

dimensionable,

colonnes cachées,

pagination...)

o ....

Page 53: PHP/ExtJs experience feedback - IAV case - 1

Gestion du Stock

•Exemple de

personnalisation du

rendu des

composants:

coloration des

cellules d'une

DataGrid selon une

règle spécifique de

gestion

Page 54: PHP/ExtJs experience feedback - IAV case - 1

Gestion du Stock •Génération de rapport PDF avec la librairie FPDF

Page 55: PHP/ExtJs experience feedback - IAV case - 1

Gestion du Stock •Exemple de graphe synthétique de type « Ligne » créé avec la librairie PlotKit

Page 56: PHP/ExtJs experience feedback - IAV case - 1

Gestion du Stock •Un autre exemple de graphe camembert en utilisant la même librairie PlotKit

Page 57: PHP/ExtJs experience feedback - IAV case - 1

Conclusion

Page 58: PHP/ExtJs experience feedback - IAV case - 1

Conclusion

•Ces exemples d'applications Web permettent entre autres de:

oCentraliser les applications dans des serveurs et donc éviter toute installation ou mise à jour

dans les postes clients

oFaciliter la maintenance et la sauvegarde des données

oPratique pour les personnes mobiles qui peuvent consulter, opérer et générer des rapports

depuis n'importe quel ordinateur connecté à internet

oRenaître des vieux ordinateurs clients vu que la majorités des traitements se font du coté

serveur

oAnnuler le coût software en utilisant des librairies gratuites

oMinimiser le coût hardware en optant pour Debian/Apache/PHP/MySQL aptes à assurer une

performance extrême même dans des serveurs plutôt modestes

oDans le coté fonctionnel; offrir des solution informatiques limitant les erreurs et augmentant

l'efficacité dans le travaille quotidien tout en donnant des outils fiables d'aides à la décision

aux responsables

o ...

Page 59: PHP/ExtJs experience feedback - IAV case - 1

Exemples d'applications en cours de réalisation

•Application de gestion de budgets

•Application de gestion d'ordre de missions

• Site Web référentiel de la collection du jardin botanique du Complexe Horticole d'Agadir

•Application de gestion des notes

•Application de gestion de bibliothèque avec interface Web pour consultation en ligne depuis

internet

• ...

Page 60: PHP/ExtJs experience feedback - IAV case - 1

Merci pour votre attention