r10_t.pdf

Rozdział 10

Przykład 1 — ankieta

W niniejszym rozdziale utworzymy:

• Gustowny, zaprojektowany we Flashu interfejs ankiety, łatwy do użycia na dowolnej witrynie lub

stronie.

• Plik wielokrotnego użytku, odpowiedzialny za otwieranie połączenia z bazą danych oraz wykonywanie

najważniejszych funkcji.

• Dwa nowe, wspaniałe skrypty, pobierające dane z ankiety, rejestrujące i zachowujące głosy

ankietowanych oraz wyświetlające wyniki.

• Przyjazną, administratorską stronę HTML, umożliwiającą tworzenie nowych ankiet.

Panie i panowie, rozpoczynamy najważniejsze godziny nauki PHP. Wszyscy przywdziali już wykwintne

sukienki i fraki, a jedyne co pozostało, to udać się w jakieś miłe miejsce.

Co powiecie na PHP Club? Znam kilka wspaniałych przykładów, które warto omówić. Będą one omówione

bardziej szczegółowo, niż aplikacje tworzone dotychczas, co pozwoli nam poszerzyć zdobytą wiedzę i

zrozumieć, dlaczego Flash, PHP i MySQL tworzą tak doskonały zespół.

Każdy z omawianych przykładów będzie bardziej złożony od poprzednich, ale wszystkie będą mieściły się w

zakresie naszych możliwości, jako znawców PHP. Pięliśmy się poprzez kolejne szczeble trudności, a teraz

przyszedł czas wypłaty. Jeśli któreś części projektu wydadzą się niezupełnie zrozumiałe, wystarczy wrócić do

odpowiedniego rozdziału i ugruntować wiedzę.

Światli ludzie powiadają, że nigdy nie dojdziemy do celu, nie wiedząc, gdzie jesteśmy. Aby uniknąć zagubienia

się, każdy przykład będzie omawiany jako pełny projekt. Oznacza to, że zanim zajmiemy się kodowaniem i

pracą we Flashu, omówimy dokładnie, co zamierzamy osiągnąć.

Określimy koncepcję całego projektu, upewniając się, że jest ona przejrzysta. Następnie, zastanowimy się, czego

nam potrzeba, by osiągnąć wyznaczony cel, a także nad tym, jak poszczególne części projektu będą ze sobą

współdziałały. Na koniec, przejdziemy do etapu właściwej budowy projektu, być może także poddamy go

testom!

A zatem, głowa do góry, pierś na przód i wchodzimy, idąc na spotkanie poważnym zadaniom PHP!

Rys. str. 314

Och, przepraszam.

Nie wiedziałem, że to Wy.

Wejdźcie, proszę!

Od czego zacząć tworzenie ankiety

Serię przykładowych projektów rozpoczniemy od przygotowania ankiety. Każdy z nas, bez wątpienia,

wielokrotnie spotkał się z takimi ankietami, na różnych stronach w sieci Web. Ankiety te stanowią bowiem

doskonałe narzędzie zbierania opinii odwiedzających, na różnorodne tematy.

Zakres tematyczny pytań stawianych w ankietach jest bardzo szeroki, począwszy od bardzo poważnych, typu

"Kto powinien zostać kolejnym prezydentem?", po zupełnie błahe, na przykład "ED Cola — pełna, dietetyczna

czy bezkofeinowa?"

Ponieważ u podłoża każdego projektu powinien lec dobry pomysł, poświęćmy kilka minut i przyjrzyjmy się

kilku witrynom, by przekonać się, na ilu z nich można spotkać ankiety.

Gdy popatrzymy na te ankiety, wyróżnimy kilka podstawowych elementów, które musimy wziąć pod uwagę

także w naszym projekcie:

• Pierwsza i najważniejsza rzecz, to zadawane pytanie . Nie znając pytania, użytkownik nie będzie

wiedział, na jaki temat ma wyrazić opinię, ani nawet jaką ma opinię!

• Kolejny element, to lista możliwych odpowiedzi, z których użytkownik będzie mógł wybrać

odpowiedź na zadane pytanie.

• Na koniec, po oddaniu głosu, często mamy możliwość obejrzenia bieżących wyników ankiety.

Zadanie to nie wygląda chyba na zbyt trudne, nieprawdaż? Powinniśmy sobie z nim poradzić — nie marnując

amunicji!

Ustanawiając reguły...

No dobrze, aby uprościć sobie nieco zadanie, ustalmy pewne reguły dla naszego projektu. Reguły są, jak nam

wiadomo, najważniejszym elementem etykiety PHP. Zapobiegają one zbaczaniu w kierunku nie do końca

sprecyzowanych pomysłów.

Po pierwsze, poweźmiemy założenie, że każdemu pytaniu będą towarzyszyły tylko trzy możliwe odpowiedzi.

Jest to rozsądne wyjście kompromisowe, umożliwiające zadawanie takich pytań jak:

Czy lubisz marmur?

Twoja ulubiona potrawa?

Ile masz lat?

>> Tak

>> Szynka

>> poniżej 10

>> Nie

>> Dżem

>> 10 do 29

>> A co to jest marmur?

>> Spam

>> ponad 30

Ponadto, użytkownik nie będzie miał dostępu do żadnych innych ankiet, poza bieżącą — nawet w celu

obejrzenia.

Ostatnią rzeczą, na którą należy zwrócić uwagę, jest to, że ankieta będzie działała do momentu opracowania

nowej. Choć może to stanowić pewien problem, gdy ankieta ma charakter logiczny (na przykład, pytanie "Kto

wygra nagrodę Grand Prix w następnym sezonie Formuły 1?" stanie się nieaktualne, gdy Michael Schumacher

powróci już z nagrodą do domu), to jednak zmusi nas to do aktywnego uaktualniania ankiety.

Choć mówiliśmy tu o ograniczeniach, można je jednak obejść. Kto czuje się na siłach, by temu podołać, jednak

nie wie, od czego zacząć, wiele użytecznych wskazówek znajdzie na witrynie www.phpforflash.com .

Najważniejsze decyzje...

Ponieważ nasze wiadomości na temat MySQL są jeszcze świeże, warto wykorzystać wiedzę na temat baz

danych, a informacje użyte w ankiecie zachować w takiej właśnie bazie.

Biorąc to pod rozwagę, a także wskazane ograniczenia, możemy nakreślić zadania dla naszej małej aplikacji.

Po pierwsze, film Flasha powinien pobierać ostatnie wyniki ankiety. Oczywiście, Flash nie ma bezpośredniego

dostępu do bazy danych, w związku z czym, musi mu w tym dopomóc PHP.

• Po załadowaniu informacji, pytanie oraz odpowiedzi do wyboru mogą zostać przedstawione

użytkownikowi.

• Gdy użytkownik wybierze odpowiedź spośród dostępnych opcji, jego wybór musi zostać zapisany w

bazie danych. Również to zadanie zlecimy naszemu zaufanemu przyjacielowi, PHP.

• Po zapisaniu oddanego głosu, bieżące wyniki zostaną przedstawione użytkownikowi. Informacja ta

będzie zwracana do Flasha, który zaprezentuje ją respondentowi w estetycznej formie zestawienia

rezultatów.

Ponadto, należałoby uniemożliwić respondentom kilkukrotnego oddawania głosów. Mogłoby to spowodować

przekłamanie wyników i wprawić nas w zdumienie, ile razy można oddawać głos w tej samej sprawie.

Istnieją dwie metody, których moglibyśmy użyć, ale pozostańmy przy dobrze nam znanych ciasteczkach,

zważywszy na fakt, nie bacząc na fakt, że są on względnie łatwe do usunięcia dla użytkownika zdecydowanego

głosować więcej niż raz. Żaden system nie zapobiegnie temu w stu procentach, a zatem upieranie się przy tym

nie jest warte zachodu.

Ćwiczenie w prawach administratorskich

Jeśli chodzi o część administratorską, użyjemy prostej metody umieszczania nowych ankiet w systemie oraz

listowania wszystkich dotychczasowych, wraz z wynikami. Ponieważ część administratorska schowana jest

przed wzrokiem użytkowników, nie musimy jej tworzyć we Flashu. Wystarczy nam, jeśli zrobimy to w czystym

HTML.

Mimo, iż cała witryna phpforflash.com została w całości zaprojektowana we Flashu, sekcja administratorska

(dostępna tylko mnie i Alanowi) utworzona jest w czystym HTML-u.; jest to najszybsza i najprostsza metoda

konstruowania tego typu elementów, a przy tym niezawodna. Na jej przykładzie można też przekonać się, jak

łatwe jest wykorzystanie nabytych wiadomości na temat PHP w innych technologiach, niż Flash.

Dochodzimy tu do bardzo ważnej wskazówki. Otóż, nigdy nie róbmy niczego bardziej skomplikowanym, niż

tego wymaga sytuacja — w przeciwnym razie nabawimy się tylko bólu głowy!

Interfejs użytkownika

Poza wyczerpującymi odpowiedziami dotyczącymi projektu, powinniśmy mieć także jakąś wizję tego, co

zamierzamy zbudować. Dochodzimy zatem do etapu projektowania interfejsu użytkownika dla naszej aplikacji.

Jest to bardzo ważny punkt i najlepiej będzie jeśli wykorzystamy tu staromodne narzędzia, w postaci kartki

papieru i pióra.

Musimy wziąć pod uwagę wszystkie etapy pracy aplikacji, o których mówiliśmy wcześniej i każdemu z nich

poświecić wystarczająco wiele uwagi.

Patrząc na listę etapów opisanych w poprzedniej części rozdziału, widzimy, że interfejs wymaga utworzenia

dwóch, głównych sekcji.

Pierwsza z nich będzie prezentowała użytkownikowi pytanie oraz udostępniała przyciski, dla trzech możliwych

odpowiedzi. Widoczna będzie również data oddania głosu.

Mając na względzie te wytyczne, naszkicowałem następujący projekt...

Rys. str. 317

Widok ankiety

Pytanie

Przyciski opcji do wyboru

Data oddania głosu

Szkic ten obejmuje wszystkie niezbędne elementy wizualne ankiety — łącznie z przyciskami umożliwiającymi

respondentowi dokonanie wyboru odpowiedzi.

Po wybraniu opcji przez użytkownika oraz przetworzeniu oddanego głosu, w oknie ankiety powinny zostać

wyświetlone aktualne wyniki głosowania.

Rys. str. 318

Widok rezultatów

Pytanie

Procentowe wskaźniki głosowania

Liczba głosów oddanych na poszczególne opcje

Jak widać, tu również wyświetlane będzie pytanie oraz możliwe odpowiedzi, ale tym razem jednak użyjemy

dwóch metod prezentacji dotychczasowych wyników. Pierwsza z nich polegać będzie na użyciu pól tekstowych,

podających liczby głosów oddanych na każdą z opcji, wskazując jednocześnie na popularność ankiety. Ponadto,

wyświetlone zostaną wskaźniki procentowego udziału poszczególnych odpowiedzi, w postaci wykresów

paskowych.

Udoskonalanie za kulisami — skrypty

Po opracowaniu wizualnej strony projektu, czas zająć się drugą stroną aplikacji. Ogólnie rzecz biorąc, określimy

teraz kształt bazy danych dla naszej aplikacji, co ułatwi nam późniejsze przygotowanie tablicy.

Ponieważ będziemy przechowywać bardzo proste informacje, możemy ograniczyć się tylko do jednej tablicy.

Rozważając, jakie informacje należy przechowywać w bazie, można zdefiniować taką oto listę:

• pytanie

• data oddania głosu

• 1 opcja

• 2 opcja

• 3 opcja

• liczba głosów oddanych na opcję 1

• liczba głosów oddanych na opcję 2

• liczba głosów oddanych na opcję 3

Konieczna będzie również możliwość identyfikacji poszczególnych głosowań.

Biorąc powyższą listę pod uwagę, nakreśliłem kształt tablicy, który opisuje nie tylko jej strukturę, ale także

wskazuje typ informacji przechowywanych w poszczególnych kolumnach.

Taką metodę stosuję w każdym projekcie związanym z bazą danych, a staje się ona szczególnie użyteczna, gdy

konieczne jest użycie więcej, niż tylko jednej tablicy.

Tablica: ankieta

Nazwa kolumny

Typ danych

Opis

pollID

Integer

Kolumna ta będzie sprawowała funkcję podstawowego klucza

tablicy. Za jej pomocą będziemy w stanie zidentyfikować

poszczególne, oddane głosy.

question Łańcuch

Zadawane pytanie.

posted

Integer

W kolumnie tej będziemy przechowywać unixowe znaczniki czasu,

reprezentujące daty oddania poszczególnych głosów.

option1 Łańcuch

Treść pierwszej odpowiedzi.

option2 Łańcuch

Treść drugiej odpowiedzi.

option3 Łańcuch

Treść trzeciej odpowiedzi.

votes1

Integer

Liczba głosów oddanych na opcję 1.

votes2

Integer

Liczba głosów oddanych na opcję 2.

votes3

Integer

Liczba głosów oddanych na opcję 3.

Po przygotowaniu specyfikacji i wstępnego zarysu projektu, możemy przejść do zasadniczego etapu, którym

będzie budowa właściwej aplikacji.

Tworzenie aplikacji ankiety

Jak zwykle, zanim udamy się dalej, popatrzmy najpierw, jak powinien wyglądać nasz projekt po ukończeniu...

Jak widać, oprzemy się tu omówionej wcześniej koncepcji, tworząc przyjemny i przejrzysty interfejs

użytkownika, spójny pod względem graficznym z poprzednimi przykładami.

Aplikacja będzie się składała z głównej sekcji, w której użytkownik otrzyma pytanie, wraz z trzema opcjami do

wyboru. Po uzyskaniu odpowiedzi, aplikacja wyświetli dotychczasowe wyniki ankiety. Pomiędzy tymi dwoma

oknami, umieścimy dwa okna informujące o wczytywaniu danych, ale zajmiemy się nimi w odpowiednim

czasie.

Robiąc postępy

Zanim przejdziemy do tworzenia właściwego filmu Flasha, poświęćmy kilka minut na przygotowanie

paskowych wskaźników procentowych, widocznych na ilustracji powyżej.

Ponieważ wskaźnik zostanie użyty trzykrotnie, utworzymy go w formie oddzielnego klipu filmowego, który

będziemy mogli wykorzystać również w innych filmach!

A zatem, przede wszystkim, musimy przygotować klip filmowy, w którym umieścimy niezbędne elementy.

1. Wybierz polecenie New Symbol (Nowy symbol) z menu Insert (Wstaw) lub naciśnij klawisze Ctrl+F8 ,

tworząc klip filmowy. Nadaj mu nazwę Percent Bar , po czym kliknij przycisk OK .

2. Następnie, utwórz strukturę warstw i ujęć klipu. Będzie to stosunkowo proste zadanie, gdyż wszystkie

elementy będą się znajdowały w jednym ujęciu.

Użyj poniższej ilustracji jako wzorca.

W tej chwili nie musisz martwić się kodem ActionScript na warstwie Actions . Powrócisz do niego

później.

3. Skieruj teraz swą uwagę ku warstwie Bar BG . Jak wskazuje jej nazwa, umieścisz na niej tło wskaźnika

procentowego.

Będzie ono miało formę białego prostokąta.

Oczywiście, możesz nadać mu inny styl, ale musisz to być figura, którą będzie można łatwo rozciągać

w poziomie, bez zniekształceń — przyczyna stanie się bardziej zrozumiała w następnym punkcie.

4. Czas przygotować właściwy wskaźnik który będzie służył do identyfikacji wartości procentowych na

warstwie Bar.

Ponieważ wskaźnik pokazujący wartość 100% powinien mieć takie same rozmiary i kształt, jak

umieszczone za nim tło, najlepszym rozwiązaniem będzie skopiowanie paska tła, a za pomocą

polecenia Paste in Place (Wklej w miejscu) z menu Edit (Edycja) wklej nową kopię dokładnie w tym

samym miejscu warstwy Bar.

Po wklejeniu paska wskaźnika, nadaj mu kolor kontrastujący z kolorem warstwy Bar BG . Ja wybrałem

niebieski, ale jeśli jaskrawy różowy podoba Ci się bardziej, użyj go!

5. Jeśli zastanawiasz się, w jaki sposób wskaźnik będzie zmieniał swą długość, w miarę przybywania

głosów i zmian wartości procentowych, odpowiedź znajdziesz poniżej.

Każdy klip filmowy ma właściwość _xscale i, na nasze szczęście, wyraża się ją w procentach.

Jednakże, nie można skalować całego klipu Percent Bar , ponieważ w ten sposób skalowane byłoby

również tło utworzone na warstwie Bar BG .

Cóż więc począć z tym dylematem? Cóż, wystarczy zwyczajnie skonwertować zawartość warstwy Bar

do postaci odrębnego klipu filmowego, do którego będzie można odwoływać się niezależnie od

pozostałych elementów klipu.

6. Wyselekcjonuj zawartość warstwy Bar, po czym wydaj polecenie Convert to Symbol (Konwertuj w

symbol) z menu Insert lub naciśnij klawisz F8 . Nadaj nowo powstałemu klipowi odpowiednią nazwę,

na przykład Bar , a następnie naciśnij przycisk OK .

7. Po utworzeniu klipu filmowego Bar , należy poddać go niewielkim manipulacjom, które zapewnią mu

właściwe skalowanie.

Należy przez to rozumieć modyfikację właściwości _xscale klipu filmowego, polegającą na zmianie

skali klipu względem znacznika środka (mały krzyżyk).

W tej chwili znacznik środka klipu filmowego Bar pokrywa się z punktem środkowym prostokąta.

Twoim zadaniem jest takie wyrównanie klipu, by krzyżyk pokrył się z jego lewą krawędzią.

8. Wyselekcjonuj nowy klip Bar, a następnie wybierz polecenie Edit Symbols (Edytuj symbole) z menu

Edit lub naciśnij klawisze Ctrl+E .

9. Upewnij się, że niebieski prostokąt jest wyselekcjonowany, po czym użyj panelu Align (Wyrównanie)

do wyrównania lewej krawędzi prostokąta do znacznika środka.

10. Kiedy to zrobisz i powrócisz do klipu filmowego Percent Bar , przekonasz się, że niebieski pasek

przesunął się. Jest to wynik poprzedniej operacji, ale pasek należy na powrót wyrównać z tłem.

W tym celu ponownie posłuż się panelem Align . Wyselekcjonuj klip filmowy Bar i naciśnij przycisk

poziomego wypośrodkowania.

11. Teraz należy nadać klonowi klipu filmowego Bar nazwę, poprzez którą będzie można odwoływać się

do niego z ActionScript.

12. Wszystko, co pozostało, to utworzyć funkcję wewnątrz klipu, która umożliwi zmianę wskazań

procentowych z zewnątrz.

Jest to obiecany moment powrotu do kodu ActionScript, o którym była mowa w punkcie 2.

ActionScript:

function setPos (percent) {

bar._xscale = percent;

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: