18.11.2009 14:05:36

Języki Automaty Obliczenia

Programowanie sterowane zdarzeniami

1. Cel ćwiczenia

Celem ćwiczenia jest utworzenie graficznego interfejsu użytkownika (GUI) do programu, który liczy
iloczyn kartezjański N zbiorów. Program został opracowany w trakcie poprzednich zajęć.

2. Wstęp

GUI do programu opracowane zostanie w języku HTML i będzie uruchomione na serwerze WWW.

2.1. Formularze HTML

Należy przypomnieć sobie z lekcji w gimnazjum tworzenie formularzy w języku HTML, które
zawierają przyciski i pola tekstowe.

2.2. Błyskawiczny kurs CGI

2.2.1. Metody GET i POST
Kiedy przeglądarka wysyła do serwera WWW żądanie dostarczenia zasobu:

http://materialy.prz-rzeszow.pl/index.php?doc=inz_opr.pdf&user=student&passwd=haslo

serwer WWW uruchamia skrypt o nazwie

index.php

i przekazuje do skryptu parametry:

1.

doc = inz_opr.pdf

2.

user = student

3.

passwd = haslo

Skrypt może odczytać wartości tych parametrów i na ich podstawie podjąć pewne działania.
Mówimy, że parametry zostały przekazane metodą GET. Inny sposób przekazywania parametrów to
metoda POST:

<form action='index.php' method='

post

'>

<input type='text' name='doc' value='inz_opr.pdf'/>
<input type='text' name='user' value='student'/>
<input type='hidden' name='passwd' value='haslo'/>
<input type='submit' name='send' value='Wyślij'/>

</form>

Metoda POST różni się w pewien sposób od metody GET, ale z punktu widzenia skryptu jest to
różnica mało istotna, ponieważ serwer WWW także utworzy odpowiednie parametry [1].
W formularzu powyżej, kliknięcie przycisku Wyślij spowoduje uruchomienie na serwerze WWW
skryptu

index.php

i przekazanie do niego parametrów takich, jak opisano wyżej (dodatkowo

ustawiany jest parametr

send='Wyślij'

).

2.2.2. Przesłanie danych z formularza do serwera
Żeby przeglądarka przesłała dane z formularza po kliknięciu w przycisk, przycisk musi być
elementem

input

typu

submit

:

1

<form action='index.php' method='

post

'>

<input type='text' name='doc' value='inz_opr.pdf'/>
<input type='text' name='user' value='student'/>
<input type='hidden' name='passwd' value='haslo'/>
<input type='submit' name='send' value='Wyślij'/>

</form>

Przycisk powstanie także jeżeli użyjemy typu

button

, lecz nie będzie on wtedy automatycznie

przesyłał danych z formularza.

2.2.3. Przesłanie pliku do serwera
Jeżeli chcemy, żeby przeglądarka przesłała do serwera plik z komputera lokalnego, formularz musi
mieć określony sposób kodowania i posiadać pole wyboru pliku:

<form action='index.php' method='

post

' enctype="multipart/form-data">

<input type='file' name='doc' value=''/>
<input type='text' name='user' value='student'/>
<input type='hidden' name='passwd' value='haslo'/>
<input type='submit' name='send' value='Wyślij'/>

</form>

W linii 1 zaznaczono, że formularz będzie przesyłał pliki, tekst wykraczający poza kodowanie ASCII,
dane binarne. Linia 2 utworzy pole wyboru pliku.

2.2.4. Odczyt parametrów przez skrypt PHP
Skrypt PHP uzyskuje dostęp do zmiennych z formularza za pomocą zmiennej

_REQUEST

. W celu

sprawdzenia, czy wciśnięto przycisk Wyślij na formularzu z punktu 2.2.3., użyjemy kodu:

if(isset($_REQUEST['send'])) { .... }

W przykładzie powyżej sprawdzamy, czy ustawiony jest element o indeksie

send

w tablicy

_REQUEST

. Jeżeli jest, i prawdziwy jest warunek

$_REQUEST['send'] == 'Wyślij'

to znaczy, że wciśnięto przycisk Wyślij. Używamy indeksu

'send'

tablicy

_REQUEST

, dlatego że

atrybut

name

przycisku Wyślij w punkcie 2.2.3. ma wartość

send

.

2.2.5. Odczyt pliku przesłanego na serwer
W przykładzie w punkcie 2.2.3. pokazano formularz, którego pole o nazwie

doc

służy do przesłania

pliku na serwer. W języku PHP w celu uzyskania dostępu do tego pliku, użyjemy kodu:

$nazwaPliku = $_FILES["doc"]["tmp_name"];

Indeks

doc

tablicy

_FILES

zawiera informacje o pliku przesłanym przez element

input

typu

file

o nazwie

doc

:

<input type='file' name='doc' value=''/>

Zmienna

$nazwaPliku

zawiera pełną ścieżkę do pliku przesłanego na serwer i może być użyta

bezpośrednio w funkcji

fopen

lub podobnej.

2.2.6. Zmienne globalne aplikacji WWW
Kiedy kończy się wykonywać skrypt określony w atrybucie action formularza, usuwane są wszystkie
zmienne utworzone przez ten skrypt. Jeżeli chcemy, żeby aplikacja zapamiętała wartość pewnej
zmiennej pomiędzy kolejnymi wywołaniami skryptu, należy zastosować zmienne sesyjne:

session_start(); // rozpoczęcie sesji serwera WWW
$zbiory = $_SESSION['zbiory']; // odczyt zmiennej sesyjnej
$wynik = oblicz($zbiory);
$_SESSION['wynik'] = $wynik; // zapisanie zmiennej sesyjnej

Pierwsza linia włącza mechanizm sesji serwera. Kolejne linie pokazują, w jaki sposób zapamiętać
zmienną w sesji i odczytać ją. Tablica

$_SESSION

zawiera zmienne, których wartości przechowywane

2

są pomiędzy kolejnymi wywołaniami skryptów.

2.3. PHP – zastępowanie tekstu w pliku

W trakcie ćwiczenia wykorzystane zostaną funkcje języka PHP, przy pomocy których można
zastępować zawartość pliku.
Załóżmy, że w pliku

wynik.xhtml

mamy pole tekstowe, w którym chcemy prezentować wynik

obliczeń:

<textarea id="wynik" name="wynik" rows="20" cols="40" readonly="readonly">

:wynik:

</textarea>

W miejscu znacznika

:wynik:

ma się pojawić wynik obliczeń. W programie w języku PHP możemy

podstawić za znacznik

:wynik:

wartość pewnej zmiennej:

$wynikObliczen = print_r($wynik, TRUE); // przygotowuję zmienną z wynikiem
$html = file_get_contents("wynik.xhtml"); // pobieram plik z szablonem
$search = array(":wynik:"); // co ma być wyszukiwane w szablonie
$replace = array($wynikObliczeń); // czym zastąpić $search
$html = str_replace($search, $replace, $html); // zastępuję elementy $search
echo $html; // wyświetlam

Funkcja

print_r

użyta w sposób pokazany wyżej nie wysyła nic do bufora wyjściowego, tylko

zwraca reprezentację zmiennej czytelną dla człowieka.
Jeżeli chcemy wykonać kilka zastąpień tekstu jednocześnie, to należy rozbudować tablice:

$search = array(":wynik:", ":daneWejsciowe:", ":komunikat:");
$replace = array($wynikObliczeń, $daneWejsciowe, $komunikat);

3

3. Konfiguracja serwera Apache

3.1. Pakiet xampplite w systemie Windows

W laboratorium w sali D104 nie wykonujemy punktu 1, ponieważ uprawnienia są ustawione
prawidłowo.

1. Sprawdź, czy użytkownik, na koncie którego pracujesz w systemie, ma uprawnienia do

modyfikowania zawartości następujących folderów:

•

c:\xampplite\temp

•

c:\xampplite\apache\logs

•

c:\xampplite\htdocs

2. Uruchom konsolę i wpisz następujące polecenia:

3. W panelu sterowania

xampp

kliknij przycisk

start

przy module Apache.

4

4. Jeżeli przy module Apache nie pojawiła się zielona etykieta

Running

, sprawdź punkt 1 oraz

komunikaty serwera:

3.2. Pakiet httpd w systemach Unix

W laboratorium w sali D10a nie trzeba nic robić, wszystko działa.

1. Sprawdź, czy użytkownik (lub grupa użytkowników) na koncie którego pracujesz w systemie,

ma uprawnienia do modyfikowania zawartości katalogu z zasobami serwera WWW:

Na rysunku jest to katalog

html

, grupa

users

ma uprawnienia do zapisu, a wszyscy do

odczytu i przeglądania.

2. Upewnij się, że serwer WWW pracuje:

service httpd restart

3. W przypadku wystąpienia błędów, sprawdź log serwera:

cat /var/log/httpd/error_log

4. Jeżeli twój system to nie Red Hat Linux, sprawdź w dokumentacji systemu jak nazywa się

pakiet serwera WWW, gdzie jest katalog z jego zasobami, jak zarządzać serwerem i gdzie są
pliki jego logów.

5

4. Konfiguracja projektu Netbeans

Aplikacja będzie uruchamiana przez serwer WWW, w związku z czym trzeba lekko zmodyfikować
właściwości projektu.

4.1. Konfiguracja projektu w systemie Windows

1. Wybierz właściwości projektu, w kategorii

Sources

zaznacz kopiowanie plików do katalogu

zasobów serwera WWW. Katalog zasobów to

c:\xampplite\htdocs

Po nazwie katalogu podaj nazwę folderu z aplikacją.

2. W kategorii

Run Configuration

wybierz

uruchomienie

projektu

na lokalnym serwerze

WWW oraz wpisz URL aplikacji. Zwróć uwagę, że

numer portu serwera

to

8080

a

katalog

aplikacji

jest taki, jak w ustawiono punkcie 1.

6

4.2. Konfiguracja projektu w systemie Linux

Na laboratorium w sali D104 debugger działa tylko w jednym procesie Netbeans.

1. Wybierz właściwości projektu, w kategorii

Sources

zaznacz kopiowanie plików do katalogu

zasobów serwera WWW. Katalog zasobów to

/var/www/html

Po nazwie katalogu podaj nazwę konta użytkownika.

2. W kategorii

Run Configuration

wybierz

uruchomienie

projektu

na lokalnym serwerze

WWW oraz wpisz URL aplikacji. Zwróć uwagę, że

katalog aplikacji

jest taki, jak

w ustawiono punkcie 1.

7

5. Przebieg ćwiczenia

5.1. Odtworzenie projekt z poprzednich zajęć

Rozpakuj archiwum z projektem Netbeans z poprzednich zajęć i otwórz go w środowisku Netbeans.
Upewnij się, czy w środowisku Netbeans jest otwarty wyłącznie twój projekt. Jeżeli otwartych jest
kilka projektów, zamknij wszystkie i wykonaj jeszcze raz punkt 5.1.

5.2. Dodanie okienka GUI

Do plików źródłowych projektu dodaj nowy plik
XHTML o nazwie

gui.xhtml

.

Jeżeli pozycji

XHTML File

nie ma na liście, wybierz

Other

i poszukaj w okienku, które się pojawi.

5.3. Kontrola poprawności ćwiczenia

Sprawdź, czy w twoim projekcie są następujące pliki:

1. index.php
2. IliczynKartezjański.php
3. OdczytDanych.php
4. dane.txt
5. ProgramJAO.php
6. gui.xhtml

Jeżeli brakuje któregokolwiek z tych plików, lub jest obecny
logicznie, jednak jego nazwa jest inna, skoryguj projekt.

5.4. Utworzenie GUI

W pliku

gui.xhtml

wpisz takie znaczniki języka HTML, które

utworzą stronę pokazaną na obrazku z prawej strony. Pamiętaj
o następujących rzeczach:

•

w nagłówku musi być element

title

zawierający tytuł

strony,

•

elementy

input

formularz muszą być zawarte wewnątrz

paragrafów (element

p

),

•

każdy element

input

musi mieć określony atrybut

name

,

•

przycisk to element

input

, którego atrybut

type

ma

wartość

submit

,

•

duże okienko na wynik to element

textarea

o kilkunastu wierszach i kolumnach.

8

5.5. Wynik obliczeń

W pliku

gui.xhtml

do zawartości znacznika

textarea

wstaw tekst

:wynik:

(patrz 2.3.). Tekst ten

będzie zastąpiony wynikiem obliczeń.

5.6. Kontrola poprawności ćwiczenia

W oknie projektu kliknij prawym przyciskiem myszy w plik

gui.xhtml

i z menu kontekstowego

wybierz polecenie Validate XHTML.
Jeżeli walidator wyświetlił jakiekolwiek błędy lub ostrzeżenia, skoryguj plik.

5.7. Obsługa akcji użytkownika

Otwórz plik

index.php

i skasuj zawartość pomiędzy znacznikami

<?php

a

?>

.

Pisząc kod wstawiaj komentarze informujące o krokach algorytmu, np.:

session_start(); // punkt 1

Napisz program wg algorytmu:

1. Rozpocznij sesję serwera WWW (patrz 2.2.6.).
2. Jeżeli wciśnięto przycisk Wczytaj (patrz 2.2.4.), to:

2.1. Zapisz do zmiennej

nazwaPliku

nazwę pliku z danymi (patrz 2.2.5.).

2.2. Utwórz nowy obiekt klasy

OdczytDanych

.

2.3. Używając obiektu utworzonego w kroku 2.2. algorytmu, odczytaj zawartość pliku

i zapisz ją do zmiennej sesyjnej (patrz 2.2.6.)

3. Jeżeli wciśnięto przycisk Oblicz (patrz 2.2.4.), to:

3.1. Odczytaj z sesji zmienną zapisaną w kroku 2.3. algorytmu (patrz 2.2.6.) - są to zbiory

odczytane z pliku przesłanego z przeglądarki.

3.2. Utwórz nowy obiekt klasy

IloczynKartezjański

.

3.3. Używając obiektu utworzonego w kroku 3.2. algorytmu, oblicz iloczyn kartezjański

zbiorów odczytanych z sesji w kroku 3.1..

3.4. Zapisz obliczony iloczyn kartezjański do zmiennej sesyjnej (patrz 2.2.6.)

4. Jeżeli wciśnięto przycisk Wyświetl (patrz 2.2.4.), to:

4.1. Odczytaj z sesji zmienną zapisaną w kroku 3.4. algorytmu (patrz 2.2.6.) - jest to iloczyn

kartezjański zbiorów z pliku przesłanego z przeglądarki.

4.2. Przygotuj prezentację wyniku, używając funkcji

print_r

(patrz 2.3.).

5. Wyświetl plik

gui.xhtml

zamieniając znacznik

:wynik:

zawartością zmiennej

przygotowanej w kroku 4.2. algorytmu (patrz 2.3.).

5.8. Informacja o stanie aplikacji

Wykonanie tego etapu ćwiczenia jest opcjonalne.
Po prawidłowym wykonaniu punktu mamy działający program, lecz po wciśnięciu przycisku Wczytaj
użytkownik nie jest informowany, że dane zostały wczytane. Podobnie, po wciśnięciu przycisku
Oblicz, nie wiemy, czy obliczenia są wykonane.

9

Uzupełnij plik

gui.xhtml

dodając znaczniki informujące o stanie aplikacji:

1. Za elementem

input

tworzącym przycisk Wczytaj umieść tekst

:daneWczytane:

.

2. Za elementem

input

tworzącym przycisk Oblicz umieść tekst

:obliczeniaWykonane:

.

3. Uzupełnij tablice

search

i

replace

z kroku 5. algorytmu z punktu 5.7., tak żeby teksty

:daneWczytane:

i

:obliczeniaWykonane:

były zastępowane wartościami z odpowiednich

zmiennych, np.

:daneWczytane:

będzie zastępowane wartością zmiennej

$daneWczytane

.

4. Do bloków kodu obsługujących kliknięcia w przyciski Wczytaj i Oblicz dopisz kod

ustawiający wartości zmiennych użytych w kroku 3., np.

$daneWczytane = "dane

wczytane";

5. Za instrukcją rozpoczynającą sesję serwera WWW dopisz instrukcje, które zapisują do

zmiennych używanych w kroku 3. puste łańcuchy tekstowe.

5.9. Kontrola poprawności wykonywania ćwiczenia

Sprawdź, czy:

1. Program napisany przez ciebie wykonuje się bez błędów i realizuje cel ćwiczenia.
2. Program składa się z sześciu plików:

dane.txt

,

index.php

,

ProgramJAO.php

,

IloczynKartezjański.php

i

OdczytDanych.php

,

gui.xhtml

.

3. Plik

gui.xhtml

jest poprawny składniowo.

4. Kod w pliku

index.php

jest zgodny z algorytmem z punktu 5.7.

5. Linie kodu z pliku

index.php

zawierają w komentarzach odnośniki do punktów algorytmu.

5.10.

Koniec ćwiczenia

1. W środowisku Netbeans ustal położenie katalogu z projektem (informacja o tym jest we

właściwościach projektu).

2. Zamknij projekt w środowisku Netbeans.
3. Zarchiwizuj katalog z projektem i prześlij go na adres e-mail podany przez osobę prowadzącą

zajęcia.

6. Sprawozdanie

Na stronie internetowej z materiałami dydaktycznymi znajduje się szablon sprawozdania
z ćwiczenia 3. Należy go zastosować do wykonania sprawozdania.

7. Pytania na wejściówkę

1. Czy do wykonania tego ćwiczenia potrzebny jest projekt Netbeans z ćwiczenia 2?
2. Jaki jest obecnie obowiązujący standard dokumentów HTML?
3. Jaki znacznik HTML tworzy formularz?
4. Jaki znacznik HTML tworzy przycisk służący do wysyłania danych formularza?
5. Jak utworzyć pole formularza HTML służące do wysyłania plików?
6. Jak w kodzie PHP sprawdzić, czy wciśnięto przycisk na formularzu HTML?

10

7. W jaki sposób w języku PHP wyświetlić zawartość pliku przesłanego przez przeglądarkę?

8. Literatura

1. Rafe Colburn „CGI”. Helion 1998.

11