|
|
||||||||||||||||
 |
||||||||||||||||
| Pràctica |
 |
 |
 |
 |
 |
 |
 |
Exercicis
|
 |
|||||||
| Un altre entorn de treball | ||||||||||||||||
|
|
L'objectiu d'aquesta pràctica és donar a conèixer un entorn d'edició anomenat HPAEDIT. Es tracta d'un editor de codi lliure, gratuït i modular amb molt bones prestacions. Pel seu potencial, l'estabilitat i la gran facilitat d'ús, hem cregut convenient incloure una introducció a aquest editor en aquest curs. (La versió en Linux s'està desenvolupant.) |
|
| HAPedit (Html Asp Php Editor) | |
|
Aconseguir el programa |
|
|
Podeu trobar el programa a la web del projecte http://hapedit.free.fr/, així com les últimes novetats i actualitzacions. El programa porta un sistema intern d'actualització de versions i mòduls per mantenir-lo actualitzat. |
Figura 1.7.1. Editor HAPedit |
|
| Podeu trobar també el fitxer hapedit.zip al paquet de materials de formació, al CD Eines o bé al servei Cd-web de la XTEC. | |
| L'HAPedit és un editor molt complet que compta amb moltes opcions i facilitats a l'hora de programar; a continuació us en detallem unes quantes: | |
 |
|
| Instal·lació | |
 |
Simplement heu de descomprimir el fitxer hapedit.zip a la carpeta que vosaltres vulgueu del vostre ordinador (per exemple, C:\Archivos de Programa\HAPedit\ o C:\ Archivos de Programa\EasyPHP1-7\HAPedit\, per allò de centralitzar-ho dins la carpeta de l'EasyPHP, però pot estar en qualsevol lloc, és indiferent). |
| Entre els fitxers que heu descomprimit, destaquen HAPedit_ES.html, que és un fitxer en format web, que és el manual d'aquest programa, i el fitxer del programa anomenat HAPedit.exe; seleccioneu aquest últim fitxer i executeu-lo per fer el procés d'instal·lació. En primer lloc, es demana l'idioma per defecte. | |
Figura 1.7.2. Selecció de l'idioma de l'HAPedit |
|
| S'obre el programa i ràpidament sol·licita permís per actualitzar la versió d'aquest editor. | |
Figura 1.7.3. Procés d'actualització de la versió de l'HAPedit |
|
| El sistema descarrega el mòdul i actualitza l'editor. Una possible vista d'aquest entorn podria ser com la que es presenta a la figura 1.7.4. Podeu activar diferents 'subvistes' a partir del menú ' Vista (explorador de codi, llibreria de recursos, llenguatges de desenvolupament, llista de missatges...). | |
Figura 1.7.4. Pantalla d'exemple de l'editor HAPedit |
|
| Ara seria el moment de descarregar una utilitat anomenada SmartUpdate, que s'encarrega de controlar la descàrrega i l'actualització dels mòduls principals de l'HAPedit. Podeu accedir a la utilitat al menú Eines | Afegits | SmartUpdate. | |
Figura 1.7.5. Descàrrega de SmartUpdate de l'HAPedit |
|
| Seguidament, SmartUpdate es connecta amb la web del projecte HAPedit, i controla les versions existents, i pot sortir un avís tal com mostra la figura següent. Una vegada descarregats els fitxers, el sistema s'encarrega d'actualitzar l'HAPedit a la nova versió. Els fitxers descarregats els emmagatzema a la carpeta ... / HAPedit / Updates /. | |
Figura 1.7.6. Actualització de versions amb SmartUpdate |
|
| Una de les característiques de l'HAPedit és la seva modularitat. Al menú Eines | Afegits també podeu descarregar el client d'FTP, un arxivador de projectes, una utilitat gràfica anomenada iCoBox i un explorador. Si no estan instal·lats, la primera vegada que hi accediu, un sol·licitarà permís per fer la descàrrega i instal·lació. | |
| A la part superior de l'HAPedit hi ha unes icones, com les de la figura, que modifiquen les Vistes de l'entorn de treball; també hi podeu accedir a través de menú Vista | Mostra. A la Vista de / Informacions / seleccioneu |Enton | i visualitzareu les característiques del vostre sistema i del mateix HAPedit. Doneu un cop d'ull a les altres opcions d'aquesta vista (Ajuda a la web, Crèdits...). | |
Figura 1.7.7. Icones de diferents Vistes de l'HAPedit. |
|
|
I per últim, configureu, per exemple, l'ajuda del PHP. Els millors fitxers d'ajuda del PHP els trobareu, com és natural, a la mateixa web del PHP, a l'apartat Documentació. Aquesta documentació es pot consultar en línia, o es poden baixar en local els fitxers d'ajuda del PHP en format Windows Help (*.chm) o en format web (*.htm). Als materials de formació del CD Eines trobareu una versió en format *.chm i un altra en format *.htm comprimit. |
|
Creeu una carpeta amb el nom manuals i guardeu-hi el fitxer php_manual_es.chm; aquesta carpeta pot penjar de la mateixa carpeta de l'HAPedit o de qualsevol altre lloc, fins i tot d'una xarxa. Ara configurareu l'HAPedit perquè ho enllaçi com la seva ajuda. Accediu al menú Ajuda | Carpeta del manual php, i seleccioneu la carpeta on teniu el fitxer d'ajuda del PHP, tal com mostra la figura següent. |
Figura 1.7.8. Selecció de la carpeta manual PHP |
|
| Ara ja teniu instal·lat el manual del PHP. Si us poseu dins el codi PHP i premeu F1, s'obre una finestra d'ajuda que conté el manual del PHP (recordeu de tenir obert un fitxer amb codi PHP; per exemple, accediu al menú Fitxer | Nou | Pàgina PHP). | |
Figura 1.7.9. Interfície d'ajuda del Windows (manual del PHP) |
|
| Definir l'entorn de treball | |
|
Accediu al menú Opcions | opcions | i visualitzareu una finestra per configurar alguns aspectes interns de funcionament de l'HAPedit. Dins l'apartat de General podeu configurar diferents aspectes d'aparença, de cracterístiques de l'editor i fitxers, i la informació d'on establiu la carpeta web principal, tal com mostra la figura següent. |
Figura 1.7.10. Finestra Opcions | Opcions | General | Projectes |
|
 |
Fixeu-vos que heu definit el servidor local com a http://localhost/ i heu seleccionat com a carpeta arrel dels projectes la carpetat /www que penja de l'EasyPHP que heu instal·lat a la pràctica 3 d'aquest mateix mòdul. |
|
Un altre dels aspectes més importants és la localització del fitxer php.ini, per part de l'HAPedit; això ho fareu des de l'apartat Desenvolupament | PHP, dins aquesta finestra d'opcions, tal com mostra la figura. |
Figura 1.7.11. Finestra Opcions | Opcions | Desenvolupament | PHP |
|
|
En primer lloc, localitzeu el fitxer de configuració del PHP (php.ini), que a l'EasyPHP es troba a la carpeta ... \ EasyPHP1-7\Apache (en algunes versions el podeu trobar a \EasyPHP\php/). Automàticament, ell localitzarà a partir de la informació d'aquest fitxer on es troba el fitxer executable del PHP. En segon lloc, activeu el fitxer de Compilació per a PHP: és el servidor local. (Tingueu en compte que per executar els fitxers PHP, tindreu activat i en funcionament l'EasyPHP.) |
Figura 1.7.12. Missatge informatiu sobre el paràmetre error_log de php.ini |
|
|
Observeu que s'informa delsegüent: "No esteu preparats per controlar els errors de compilació. Hauríeu de modificar el fitxer php.ini". No us preocupeu, però si voleu evitar-ho, aneu al fitxer php.ini i doneu un nom de fitxer al paràmetre error_log. Es tracta d'un fitxer tipus log que guarda còpia dels errors de compilació que es produeixen. Obriu php.ini i localitzeu la línia següent: |
| ; Log errors to syslog (Event Log on NT, not valid
in Windows 95). ; error_log = syslog |
|
| Observeu que comença per ';', això vol dir que aquestes línies estan comentades; modifiqueu la segona línia i encamineu-la a un fitxer, per exemple: | |
| error_log = "C:\Archivos de programa\EasyPHP1-7\HAPedit\error_syslog.log" | |
| El primer fitxer | |
| Obriu l'HAPedit i accediu al menú Fitxer | Nou | Pàgina PHP (a vista Documents); s'obre un model estandard per crear pàgines php amb el codi següent, amb l'avantatge que el codi està acolorit i podeu diferenciar visualment la zona d'HTML de la del PHP (entre els dos símbols de color rosa <? i ?>). | |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html> <head> </html> |
|
| Llistat 1.7.1. Fitxer de la plantilla del document del PHP | |
| Recordeu que a la pràctica 4 d'aquest mòdul s'ha comentat que els programes que fareu al llarg del curs han d'incloure una capçalera com aquesta: | |
| <?php /*----------------------------------------------------------------- * Mòdul: 1 Pràctica: 4 Fitxer: m1p41.php * Autor: identificatiu alumne Data: ......... * Descripció: descripció curta del programa * Pre condi.: condicions abans d'executar el programa * Post cond.: condicions després d'executar el programa -----------------------------------------------------------------*/ ?> |
|
| El fitxer resultant queda de la següent manera: | |
| <?php /*----------------------------------------------------------------- * Mòdul: 1 Pràctica: 4 Fitxer: m1p41.php * Autor: D116 Data: * Descripció: descripció curta del programa * Pre condi.: pre_condicions abans d'executar el programa * Post cond.: post_condicions després d'executar el programa -----------------------------------------------------------------*/ ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </html> |
|
| Llistat 1.7.2. Fitxer exemple.php | |
|
Guardeu-lo (menú Fitxer | Anomena i desa) a ...\Archivos de programa\EasyPHP1-7\www amb el nom exemple.php. Una vegada estigui guardat, premeu la icona de Compilar (encerclada en verd a la figura 1.7.13). Si no hi ha errors de sintaxi, us informarà que tot ha estat correcte; en cas d'errors, el mateix sistema us situa sobre la línia que conté l'error i us informa del tipus d'error detectat. |
Figura 1.7.13. Vista del procés d'edició, compilació i execució |
|
| Ara accediu a la icona de l'Explorador (encerclada en vermell a la figura 1.7.13), i s'obrirà una finestra amb el navegador que tingueu definit, amb l'execució del fitxer php. Recordeu que heu de tenir activat l'EasyPHP. | |
| Creació d'una plantilla per al curs D116 | |
|
Si ho desitjeu, copieu aquest fitxer i guardeu-lo com a plantilla (Fitxer | Guarda com a plantilla) per a les pràctiques d'aquest curs, amb el nom plantilla_d116.php; guardeu-lo a la carpeta .../HAPedit/modeles. Per obrir un nou fitxer seguint la plantilla, accediu a Fitxer | Nou | Importa plantilla, i observeu a la capçalera Data. Per a més informació: Ajuda | Documentació de HAPedit. |
| <?php /*----------------------------------------------------------------- * Mòdul: 1 Pràctica: X Fitxer: m1pXX.php * Autor: D116 Data: %longdate% * Descripció: descripció curta del programa * Pre condi.: condicions abans d'executar el programa * Post cond.: condicions després d'executar el programa -----------------------------------------------------------------*/ ?> <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Mòdul 1 Exercici X </title> </head><body> <?php // ******************* echo "Fitxer de mostra"; |
|
| Llistat 1.7.3. Fitxer de la plantilla per al curs d116 plantilla_d116.php | |
|
|
Fins aquí hem explicat alguns aspectes mínims per treballar amb aquest editor, però realment disposa de moltes altres característiques realment útils. Per a un coneixement més acurat d'aquest programa, consulteu el fitxer HAPedit_ES.html que hi ha a la carpeta que heu instal·lat, HAPedit. A continuació en destaquem alguns que considerem interessants: |
|
|
|
|||||||||||||
|
Exercicis |
|
|||||||||||
