php/extjs experience feedback - iav case - 1

Environnement

de travail

Fayçal TIRICH

11/2006

Serveur de déploiement

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...

Poste de développement

Poste de développement

•OS: Debian + bureau Gnome

•Editeur: Eclipse

•Principal plugin:

oPHP

Development

Tools

Poste de développement

oPlugin

complémentaire

Aptana

Development Tools

Poste de développement

•Principaux avantages du

plugin Aptana:

oEditeur HTML,CSS,

JavaScript...

oSynchronisation

FTP/SFTP

Poste de développement

•Administration de la

base de données :

oMySQL Admin

PHP

PHP

•Programmation Orientée Objet

PHP

•Gestion d'erreurs par Exception

Outils de débugage

Outils de débugage

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

oAlternatif : Xdebug

Outils de débugage

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

Outils de débugage

• L'extension Firebug de

Firefox

Outils de débugage

•Exemple de debugage Pas-

à-pas d'un code Javascript

via l'extension Firebug

PHP – Accès aux bases de données

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é

...

PHP – Accès aux bases de données

•Autres avantages de PHP ADOdb

oMéthodes pratiques de manipulation d'ordres SQL

PHP – Accès aux bases de données

•Autres avantages de PHP ADOdb

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

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

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

....

PHP – Couche présentation

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

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...

PHP – Couche présentation

•Un deuxième fichier PHP contenant la

classe implémentant les différentes

méthodes définissant la logique

applicative

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

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.

Applications Web... lourdes

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

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 ...

Applications Web... lourdes •ExtJS en action

Exemples d'application

Installation et configuration du serveur

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.

Partie développement

www.iavcha.ac.ma

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

oLe cas PHP/Smarty:

www.iavcha.ac.ma

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

•Moteur de recherche

interne

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)

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

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

•Module de

publication de CV

Online

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

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

•Résultat obtenu d'une

page personnelle d'un

membre

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

•Partie administration:

oGestion des

utilisateurs

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

•Partie administration:

oGestion du

contenu

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

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

•Exemple du

résultat d'une

galerie Ajax

Gestion du Stock

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

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

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 ....

Gestion du Stock

•Exemple de

personnalisation du

rendu des

composants:

coloration des

cellules d'une

DataGrid selon une

règle spécifique de

gestion

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

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

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

Conclusion

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 ...

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

• ...

Merci pour votre attention