Tworzenie Aplikacji Internetowych

Tworzenie Aplikacji Internetowych 5 dr Wojciech M. Gańcza

Formatowanie • Informacje mogą być wyświetlane w różny sposób • Możemy korzystać z różnych wielkości czcionek, kolorów, sposobów formatowania • Większość tych informacji można umieścić w dokumencie HTML przy pomocy atrybutów odpowiednich znaczników • Jednak nie wszystko da się tak osiągnąć

Formatowanie … • Atrybuty możemy określić w znaczniku którego formatowanie dotyczy • Musimy to robić za każdym razem (dla każdego znacznika) <p align=„right”> • Możemy też określić atrybuty stylu (uwaga: inny format) <p style=„text-align: right”> • Możemy umieścić wiele atrybutów w jednym znaczniku

Formatowanie … • W razie konieczności przeformatowania dokumentu – czeka nas sporo pracy dlatego… • Możemy określać całe grupy styli i używać ich przy formatowaniu. <p class=„doprawej”> • Taką klasę stylu należy wcześniej zdefiniować • Możemy też określić jaki styl będą miały wszystkie elementy danego typu

CSS2 • Do określania styli służy język CSS2 • Wartości poszczególnych atrybutów określane są poprzez konstrukcję: nazwa-atrybutu: wartość • Jeśli występuje więcej niż jeden atrybut w opisie – oddzielone są średnikiem • Wartości mogą zawierać listę elementów – separatorem jest spacja

CSS2 … • Grupa atrybutów powinna być przypisana do nazwy elementu którego styl dotyczy body { margin: 0 0 0 0; background: black; text-color: #0fed945 }

Klasy styli • Jeśli określimy styl dla konkretnego elementu – wszystkie elementy w dokumencie będą wyświetlane w tym stylu. • Gdy chcemy stosować dla elementów tego samego typu różne style – musimy je nazwać .doprawej { text-align: right; }

Klasy styli • Nazwane klasy styli mogą dotyczyć wybranego typu elementu: p.doprawej { text-align: right; } • Możemy także określić atrybuty dla wszystkich elementów * { font-family: Helvetica; }

Pseudoklasy • Jeśli element może być w różnych stanach – możemy określić styl dla każdego z nich a:link {color:yellow; background: blue} a:visited {color:green} a:hover {background:blue; color:red} a:active {background:olive; color:black} :focus {color:white; background:black} • Jeśli pseudoklasa doyczy wszyskich elementów – nie podajemy nazy elementu

CSS2 – gdzie określać • Definicję stylu możemy umieścić na stronie wewnątrz znacznika <style> … </style> • Przydaje się to gdy listę styli tworzymy dynamicznie (z kodu PHP) • Możemy też włączyć plik zawierający definicje styli <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

Uwaga na błędy • W odróżnieniu od interpretera PHP czy błędów w znacznikach HTML które niektóre przeglądarki mogą pokazywać błędy w określeniu styli NIE SĄ RAPORTOWANE • Informacje o stylu są interpretowane do pierwszego błędu – potem są ignorowane • Arkusze styli należy tworzyć uważnie i często sprawdzać rezultaty zmian.

Dlaczego „kaskadowe” • Atrybuty określone w elemencie są zazwyczaj dziedziczone przez podelementy – na przykład atrybuty znacznika <body> są dziedziczone przez umieszczone w nim paragrafy <p> • Nie dotyczy to wszystkich znaczników i wszystkich atrybutów – szczegóły można znaleźć w opisach atrybutów CSS2

Łączenie class i style • Aby niepotrzebnie nie mnożyć definicji klas styli możemy mieszać użycie klas i bezpośrednią definicję atrybutów <tdclass="zajecia" style="background-color: #ffff80"> • Możemy w ten sposób jedynie dodawać atrybuty – nie możemy ich nadpisywać

Niezgodności • Niestety style mogą być różnie obsługiwane przez różne przeglądarki • Możemy zbudować różne arkusze styli i włączać je w zależności od przeglądarki dla której przygotowujemy stronę • Dobrze użyte style powinny pozwalać na zachowanie wyglądu mimo zmiany przeglądarki

Wracamy do aplikacji • Przypomnijmy: • Określiliśmy dostęp do bazy danych • Przygotowaliśmy połączenie oraz źródło danych • Zbudowaliśmy kreatora baz i tabel • Wypada stworzyć bazę danych

Baza książek • Nasz aplikacja powinna pamiętać kalie podręczniki są niezbędne dla danej grupy użytkowników. • Użytkownik może być w wielu grupach • Ten sam tytuł może być potrzebny wielu grupom • Użytkownik może posiadać potrzebną książkę • Może też posiadać niepotrzebną

Model danych

Książki – więcej informacji

A co ze sprzedawaniem… • Użytkownicy mogą oferować niepotrzebne książki • Mogą też kupować książki oferowane przez innych użytkowników • Potrzebujemy jeszcze innego spojrzenia na dane…

A co ze sprzedawaniem …

Trudne pytania • Niemal wszędzie będziemy potrzebowali dostęp do danych ksiązki • Budowanie zapytania które zwraca wielu autorów jest trudne (podzapytania!) • Podzapytania długo się wykonują • Postać normalna jest OK., ale… • Niektóre informacje warto zapisać w tabeli podręcznej

Cache! • Dodajmy nową tabelę w której wyniki takich podzapytań będą po prostu zapamiętane

Wreszcie określamy bazę • Teraz trzeba zebrać wszystkie diagramy • Relacje jeden do wielu możemy zaimplementować jako pole odnoszące się do identyfikatora w innej tabeli • Relacje wiele do wielu – to oddzielne tabele • Zauważmy, że niektóre tabele są bardzo podobne - słowniki

Projekt bazy danych

Znów konstruktor tabel • Nasz konstruktor tabel warto wzbogacić o • Tworzenie tabeli – słownika • Tworzenie tabeli – relacji wiele do wielu • Pola takich tabel można tworzyć automatycznie • Możemy wzbogacić klasę konstruktora tabel, albo napisać nową (dziedziczącą lub używającą konstruktora)

createVocabulary function createVocabulary($name) { $this->startTable($name); $this->addField($name . "Name", "name"); $this->createTable(); }

createMultireference function createMultireference( $name1, $name2) { $this->startTable($name1 . $name2); $this->addReference($name1 . "ID", $name1); $this->addReference($name2 . "ID", $name2); $this->addUnique($name1 . $name2 . "unique", "${name1}ID,${name2}ID"); $this->createTable(); }

Constraint • A jeśli potrzebujemy zapwnić unikalność danych: function addUnique($name, $fildList) { $this->contraints .= ", CONSTRAINT $name UNIQUE ($fildList)"; }

Constraints… • Musimy także zmodyfikować konstruktor tabel tak by • Zawierał pole przechowujące aktualna listę constraintów • Dodawał tą listę podczas zamykania tabeli

W następnym odcinku • Dostęp do danych • Konstruujemy dane testowe • Wyświetlamy dane z tabel • A wszystko to dla różnych użytkowników • Ale tylko listy potrzebnych książek 

Tworzenie Aplikacji Internetowych