Modification de pages HTML

Expression du besoin

Les caméras IP hébergent souvent des serveurs web embarqués pour accéder à leurs services. Les pages générées sont au format HTML (Hypertext Markup Language), le format de données conçu pour les représenter.

HTML

C’est un langage de balisage permettant d’écrire de l’hypertexte. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des programmes informatiques. Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade CSS).

Le langage est standardisé par le W3C.

Liens : cours HTML (1° partie) et cours HTML (2° partie)

Le code HTML contenu dans une page web est interprété côté client par le navigateur.

Un document HTML valide doit déclarer la version HTML qu’il utilise. La déclaration de type de document indique la définition de type de document (DTD) en vigueur pour le document. Par exemple, HTML 4.01 spécifie trois DTD (Strict, Transitoire et Frameset) et les DTD varient selon les éléments qui y sont gérés.

La spécification HTML 4.01 en français : www.la-grange.net/w3c/html4.01/.

API Qt

Qt fournit un module QtWebkit pour le web qu’il faut activer dans son fichier de projet .pro :

...
QT += webkit
...

Dans ce module, Qt fournit un moteur de navigateur Web qui rend facile l’intégration de contenu du World Wide Web dans des applications :

• Le module QtWebKit (fr)

Dans ce module, Qt fournit une classe QWebView qui est un widget permettant de voir et d’éditer des documents Web :

• La classe QWebView en Qt4 (en)

• La classe QWebView en Qt5 (en)

Il est aussi possible d’utiliser le module QtNetwork qui fournit notamment la classe QNetworkAccessManager pour envoyer des requêtes et recevoir des réponses.

...
QT += network
...

• La classe QNetworkAccessManager en Qt4 (en)

Objectifs

Être capable de manipuler des documents HTML dans différents contextes.

Séquence 1 : modifier un document HTML

Actuellement, la page mobile.htm de la caméra IP produit ceci :

1. Modifier la page précédente pour créer une page mobile2.htm pour obtenir ceci :

Il vous faudra accéder par telnet à la caméra afin d’accéder aux pages HTML du serveur web embarqué.

Ne modifier pas directement les pages actuellement stockées dans la caméra. Par contre, vous pouvez copier une page existante puis la modifier avec vi. Le copier/coller entre votre poste de travail et l'accès telnet à votre caméra est possible.

Pour rendre fonctionnel les changements effectués, il faudra ajouter du code javascript. Ceci est décrit dans l’activité Javascript.

Séquence 2 : visualiser une page HTML dans une application GUI

L’utilisation de la classe QWebView est très facile pour afficher un document HTML dans une fenêtre Qt :

// instancie le widget QWebView
QWebView *webView = new QWebView;

// il est possible d'utiliser des signaux de QWebView
connect(webView, SIGNAL(urlChanged(QUrl)), this, SLOT(webview_changed(const QUrl &)));

// Fabrique une URL
QUrl URL("index.htm");

// Charge le document 
webView->load(URL);

2. Écrire une application GUI Qt permettant d’afficher dans une fenêtre la page index.htm d’une caméra IP.

Si le document nécessite une authentification, il faudra faire :

// Fabrique une URL
QUrl URL("index.htm");

URL.setUserName("admin");
URL.setPassword("");

// Charge le document 
webView->load(URL);

Exemple pour la page admin.htm :

Retour au sommaire