listart cgi id=24

Helion dhtml site

Prezentowanie danych na stronie WWWAndrzej Szewczyk
[strona główna] [skrypty]
W niniejszym artykule przedstawiony został dosyć prosty i wygodny sposób prezentowania danych na stronach WWW za pomocą technologii udostępnionej przez Microsoft.

Rozbudowane serwisy WWW często wymagają dostępu do różnego rodzaju baz danych. Coraz częstsze jest umieszczanie w sieci przez firmy baz dotyczących produktów, sieci sprzedaży, itd. Stosowane najczęściej do tego celu technologie mają liczne wady. Strony są - korzystając z baz danych - budowane po stronie serwera, co znacznie wpływa na jego obciążenie.
Począwszy od wersji 4.0 przeglądarki Internet Explorer Microsoft udostępnił nowe możliwości prezentowania danych na stronie WWW.

Łączenie strony WWW z bazą danych

Aby prezentować dane w tabeli w sposób dynamiczny należy na stronie WWW osadzić odpowiednią kontrolkę ActiveX. Wykorzystujemy do tego znacznik <OBJECT>. Niezbędny do tego kod może wyglądać następująco:
<OBJECT ID="Baza" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" WIDTH=0 HEIGHT=0>
<PARAM NAME=DataURL Value="dane.txt">
<PARAM NAME=TextQualifier Value=",">
<PARAM NAME=UseHeader Value=True>
</OBJECT>

W ten sposób osadzony obiekt uzyskuje nazwę "Baza". Atrybut CLASSID identyfikuje konkretną kontrolkę, której konfigurowanie odbywa się za pomocą znaczników <PARAM>. Parametr DataURL określa lokalizację pliku z danymi, w którym pola są oddzielane znakiem określonym parametrem TextQualifier. W pliku zawierającym dane, pierwszy wiersz może zawierać nazwy poszczególnych kolumn, o czym przesądza parametr UseHeader. Istnieją jeszcze inne parametry, do których wrócimy w dalszej części artykułu.

Utwórzmy plik o nazwie dane.txt zawierający przykładowe dane o osobach:

Nazwisko,Imie,Wzrost:INT,Telefon,Miasto
Barbara,Nowak,177,818-21-43,Poznan
Kazimierz,Kowalski,180,brak,Gdynia
Elzbieta,Wisniewska,169,brak,Lublin
Anita,Droczynski,182,321-32-21,Polkowice
Marek,Matuszczyk,150,432-43-34,Opole
Katarzyna,Buchta,182,832-321-43,Katowice
Ewa,Kawa,179,brak,Gdynia
...
...

W pierwszej linii plik zawiera nazwy poszczególnych kolumn bazy. Następne linie pliku to kolejne rekordy. Przyrostek INT w pierwszej linii oznacza, że pole "Wzrost" zawierać będzie liczby.

Prezentowanie danych w tabeli
Aby połączyć element strony internetowej z bazą danych wprowadzono atrybuty: DATASRC oraz DATAFLD. Pierwszy kojarzy dany element z konkretnym źródłem danych, drugi służy do wyboru pola rekordu. Atrybuty mogą być stosowane w różnego rodzaju znacznikach, np.: DIV, SPAN, INPUT-TEXT, TEXTAREA, IMG, BUTTON, A, LABEL. Na przykład dla znacznika SPAN skojarzenie z polem "Nazwisko" naszej bazy może wyglądać następująco:
<SPAN DATAFLD="Nazwisko" DATASRC="#Baza">

W przypadku znacznika TABLE dostępny jest tylko atrybut DATASRC, który umożliwia skojarzenie całej tabeli ze źródłem danych. Poniższy wydruk przedstawia kod strony, na której zostaną wyświetlone wszystkie dane z naszej bazy:

<HTML>
<BODY>
<OBJECT ID="Baza" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" WIDTH=0 HEIGHT=0>
<PARAM NAME=DataURL Value="dane.txt">
<PARAM NAME=TextQualifier Value=",">
<PARAM NAME=UseHeader Value=True>
</OBJECT>
<TABLE BORDER=1 DATASRC="#Baza">
<THEAD BGCOLOR="Silver">
<TD><B>Imie</B></TD>
<TD><B>Nazwisko</B></TD>
<TD><B>Wzrost</B></TD>
<TD><B>Telefon</B></TD>
<TD><B>Miasto</B></TD>
</THEAD>
<TBODY>
<TR>
<TD><DIV DATAFLD="Imie"></DIV></TD>
<TD><DIV DATAFLD="Nazwisko"></DIV></TD>
<TD><DIV DATAFLD="Wzrost"></DIV></TD>
<TD><DIV DATAFLD="Telefon"></DIV></TD>
<TD><DIV DATAFLD="Miasto"></DIV></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

Wykorzystany znacznik <THEAD> określa nagłówek tabeli, czyli pierwszy jej wiersz zawierający nazwy kolumn. Część tabeli zawierająca dane jest ujęta w parę znaczników <TBODY></TBODY>. W każdej komórce prezentowane jest jedno z pól rekordu naszej bazy. Przeglądarka sama rozpoznaje ile rekordów zawiera nasza baza, a tym samym ile wierszy ma mieć prezentująca ją tabela.

W znacznikach obok DATAFLD może wystąpic także atrybut DATAFORMATS, który służy do określenia sposobu wyświetlania danych. W przypadku, gdy pole zawiera znaczniki HTML standardowo nie będą one interpretowane i zostaną wyświetlone jako zwykły tekst. Jednakże w sytuacji, gdy pole wyświetlające dane będzie skonfigurowane w następujący sposób:

<DIV DATAFLD="Telefon" DATAFORMATAS="html"></DIV>

to jeżeli w polu "Telefon" znajdą się znaczniki HTML, zostaną one zinterpretowane. Na przykład jeżeli pole jest zdefiniowane w następujący sposób:
<B>+48 32</B> 432-43-43

na ekranie zostanie wyświetlony napis:
+48 32 432-43-43

Stronicowanie tabeli

Istnieje możliwość ograniczenia długości wygenerowanej w opisany powyżej sposób tabeli. Atrybut DATAPAGESIZE określa liczbę rekordów jaka ma być jednorazowo prezentowana na ekranie. Możemy zdefiniować deklarację przedstawionej poprzednio tabeli w następujący sposób:
<TABLE BORDER=1 ID="Tableka" DATAPAGESIZE=2 DATASRC="#Baza">

W takim przypadku na ekranie wyświetalne będą tylko dwa rekordy bazy. Wykorzystując JavaSript możemy swobodnie zmieniać wyświetlane strony za pomocą metod nextPage() oraz prevoiusPage(). Wprowadźmy na stronę odpowiednie klawisze umożliwiający spacerowanie po kolejnych stronach:
<img src="prev.gif" width=100 height=100 border=0 onClick="tabelka.previousPage()">
<img src="next.gif" width=100 height=100 border=0 onClick="tabelka.nextPage()">

Możliwa jest także zmiana wielkości strony poprzez zwykłe przypisanie. Możemy na przykład wprowadzić klawisz ustawiający wielkość strony na 5 rekordów:
<img src="newsize.gif" width=100 height=100 border=0 onClick="tabelka.dataPageSize=5">
Sortowanie tabeli

Do skonstruowanej w ten sposób tabeli można wprowadzić sortowanie. Aby posortować generowaną tabelkę (przyjmijmy sortowanie względem nazwiska), wystarczy wykorzystać kolejny parametr naszej kontrolki:
<PARAM NAME=SortColumn VALUE="Nazwisko">

Możliwe są także dynamiczne zmiany sposobu sortowania. Wywołanie funkcji JavaScript:
function wgImienia() {
Baza.Sort="Imie"
Baza.Reset();
}

spowoduje zmianę kolumny, według której posortowane są rekordy. Metoda Reset() powoduje ponowne wygenerowanie tabeli według nowych kryteriów.

Filtrowanie danych

Filtrowanie danych w tabeli polega na wyświetleniu w niej tylko tych rekordów, które odpowiadają pewnemu ściśle określonemu kryterium. Funkcja wyświetlająca w tabeli tylko te osoby z naszej bazy, które mieszkają w Poznaniu może mieć postać:

function ktozPoznania() {
Baza.FilterColumn="Miasto";
Baza.FilterValue="Poznan";
Baza.FilterCriterion="=";
Baza.Reset();
}

Parametr FilterValue określa klucz, względem ktorego będą filtrowane dane, natomiast FilterCriterion określa sposób porównywania danych z kluczem (możliwe są następujące operatory: <, <=, >, >=, =, <>).

Po wprowadzeniu stronicowania i przykładu filtrowania na stronę z tabelką (rys) otrzymujemy następujący kod całości:

<HTML>
<BODY>
<OBJECT ID="Baza" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
WIDTH=0 HEIGHT=0>
<PARAM NAME=DataURL Value="dane.txt">
<PARAM NAME=TextQualifier Value=",">
<PARAM NAME=UseHeader Value=True>
<PARAM NAME=SortColumn VALUE="Nazwisko">
</OBJECT>
<TABLE BORDER=1 ID="tabelka" DATASRC="#Baza" DATAPAGESIZE=4>
<THEAD BGCOLOR="Silver">
<TD><b>Imie</b></TD>
<TD><b>Nazwisko</b></TD>
<TD><b>Wzrost</b></TD>
<TD><b>Telefon</b></TD>
<TD><b>Miasto</b></TD>
</THEAD>
<TBODY>
<TR>
<TD><DIV DATAFLD="Imie"></DIV></TD>
<TD><DIV DATAFLD="Nazwisko"></DIV></TD>
<TD><DIV DATAFLD="Wzrost"></DIV></TD>
<TD><DIV DATAFLD="Telefon"></DIV></TD>
<TD><DIV DATAFLD="Miasto"></DIV></TD>
</TR>
</TBODY>
</TABLE>
<IMG SRC="prev.gif" WIDTH=119 HEIGHT=66 BORDER=0 ALT="" onClick="tabelka.previousPage()">
<IMG SRC="next.gif" WIDTH=119 HEIGHT=66 BORDER=0 ALT="" onClick="tabelka.nextPage()">
<BR>
<DIV onClick="wgNazwiska()">Sortuj wg nazwiska</DIV><BR>
<DIV onClick="wgImienia()">Sortuj wg imienia</DIV><BR>
<DIV onClick="wgMiasta()">Sortuj wg miasta</DIV><BR>
<DIV onClick="ktozPoznania()">Wyświetl tylko osoby z Poznania</DIV><BR>

<SCRIPT>
function wgNazwiska() {
Baza.Sort="Nazwisko"
Baza.Reset();
}

function wgImienia() {
Baza.Sort="Imie"
Baza.Reset();
}

function wgMiasta() {
Baza.Sort="Miasto"
Baza.Reset();
}

function ktozPoznania() {
Baza.FilterColumn="Miasto";
Baza.FilterValue="Poznan";
Baza.FilterCriterion="=";
Baza.Reset();
}
</SCRIPT>
</BODY>
</HTML>

Możliwośc dynamicznego prezentowania danych pochodzących z odrębnych plików może być bardzo wygodna. Wystarczy zauważyć, że modyfikacja pliku zawierającego dane (np. dopisanie do bazy kilku osób) nie pociąga za sobą konieczności wprowadzania jakichkolwiek zmian na stronie prezentującej te dane.

© Wydawnictwo Helion

Wyszukiwarka

Podobne podstrony:
listart cgi id=3
listart cgi id=22
listscript cgi id=24
listart cgi id=25
listart cgi id=5
listart cgi id=2
listart cgi id=16
listart cgi id=26
listart cgi id=15
listart cgi id=18
listart cgi id=4
listart cgi id=4
listart cgi id=20
listart cgi id=7
listart cgi id=21
listart cgi id=6
listart cgi id=10
listart cgi id=11
listart cgi id=19

więcej podobnych podstron