Technologie bazowe i internetowe do obsługi handlu w Internecie (MYSQL i PHP)

Transkrypt

1 Uniwersytet Mikołaja Kopernika Wydział Fizyki, Astronomii i Informatyki Stosowanej Krzysztof Maliszewski nr albumu: Praca magisterska na kierunku fizyka techniczna Technologie bazowe i internetowe do obsługi handlu w Internecie (MYSQL i PHP) Opiekun pracy dyplomowej dr hab. Piotr Pepłowski Zakład Mechaniki Kwantowej Toruń 2011 Pracę przyjmuję i akceptuję Potwierdzam złożenie pracy dyplomowej... data i podpis opiekuna pracy... data i podpis pracownika dziekanatu

2 Składam serdeczne podziękowania mojemu promotorowi dr hab. Piotrowi Pepłowskiemu za okazywaną cierpliwość i pomoc w trakcie przygotowywania pracy dyplomowej. Dziękuję Panu za cenne porady, a także za życzliwą i miła atmosferę sprzyjającą pracy naukowej. Dziękuję również mojej żonie za wiarę, cierpliwość i wsparcie podczas tworzenia tej pracy.. str. 2

3 Część I... 6 Część II Podstawy... 9 Rozdział 1.Wstęp... 9 Rozdział 2. Tworzenie praktycznych projektów PHP i MySQL Rozdział 2.1 Planowanie i prowadzenie projektu stron 11 Rozdział 2.2 Wybór narzędzi pracy Rozdział 2.3 Tworzenie czytelnego i użytecznego kodu Rozdział 2.3.a Definiowanie konwencji nazewnictwa Rozdział 2.3.b Komentowanie kodu Rozdział 2.3.c Wcięcia w kodzie Rozdział 2.3.d Dzielenie kodu Rozdział 2.3.e Podział struktury katalogowej Rozdział 2.3.f Oddzielenie logiki i zawartości Rozdział 3. Wybrane technologie Rozdział 3.1 HTML Rozdział 3.1.a Czym jest HTML? Rozdział 3.1.b Historia HTML Rozdział 3.1.c XHTML Rozdział 3.1.d Walidacja HTML Rozdział 3.1.e Zastosowania Rozdział 3.2 CSS Rozdział 3.2.a Czym jest CSS? Rozdział 3.2.b Zalety CSS Rozdział 3.2.c Wady CSS Rozdział 3.2.d Historia CSS Rozdział 3.2.e Walidacja CSS Rozdział 3.2.f Zastosowania Rozdział 3.3 MySQL Rozdział 3.3.a Czym jest MySQL? Rozdział 3.3.b Zalety MySQL Rozdział 3.3.c Wady MySQL Rozdział 3.3.d Historia MySQL Rozdział 3.3.e Zastosowania Rozdział 3.4 PHP str. 3

4 Rozdział 3.4.a Czym jest PHP? Rozdział 3.4.b Jak działa PHP? Rozdział 3.4.c Historia PHP Rozdział 3.4.d Programowanie obiektowe, a programowanie strukturalne Rozdział 3.5 JavaScript Rozdział 3.5.a Czym jest JavaScript? Rozdział 3.5.b Historia JavaScript Rozdział 3.5.c Javascript i Java Rozdział 3.5.d Biblioteka Rozdział 3.5.e Zastosowanie Rozdział 4. Narzędzia Rozdział 4.1 Notepad Rozdział 4.2 WAMP Rozdział 4.3 MySQL Workbench Rozdział 4.4 Przeglądarka internetowa Rozdział 5. Główne cele projektu stworzenia własnego panelu administracyjnego sklepu internetowego Część III Rozdział 1. Wstęp Rozdział 2. Instalacja i konfiguracja narzędzi Rozdział 2.1 Serwer WAMP Rozdział 2.2 Notepad Rozdział 3. Stworzenie projektu bazy danych dla panelu administracyjnego Rozdział 3.1 Planowanie bazy danych Rozdział 3.2 Normalizacja bazy danych Rozdział 3.3 Wybieranie typów kolumn Rozdział 3.4 Zaprojektowanie bazy danych Rozdział 3.5 Tworzenie bazy danych Rozdział 3.6 Definiowanie użytkowników i przywilejów Rozdział 3.7 Tworzenie procedur składowanych Rozdział 3.8 Wykonywanie zapytań SQL za pomocą narzędzia phpmyadmin Rozdział 4. Wybór narzędzi pomocnych przy tworzeniu panelu administracyjnego INADMIN Panel CSS Step Menu str. 4

5 JQTransform Dynatree JavaScript Form Validation PHPMailer jquery UI TCPDF Tooltips Rozdział 5. Utworzenie pierwszej strony HTML Rozdział 6. Stworzenie panelu logowania do strony Rozdział 6.1 Bezpieczeństwo stron Rozdział 6.2 Stosowanie kontroli sesji Rozdział 6.3 Łączenie się z bazą danych MySQL za pomocą PHP i wykonywanie zapytań SQL Rozdział 6.4 Wysyłaniu listów elektronicznych z pomocą PHP Rozdział 6.5 Utworzeniu własnego panelu logowania Rozdział 7. Opracowanie menu serwisu i zasady jego działania Rozdział 8. Wykonanie formularzy do wyszukiwania danych Rozdział 8.1 Tworzenie formularzy Rozdział 8.2 Walidacja danych użytkownika Rozdział 8.3 Tworzenie zapytań do wyszukiwania danych w bazie MySQL Rozdział 8.4 Działanie formularzy stworzonych w panelu administracyjnym Rozdział 9. Wykonanie formularzy do modyfikacji danych Rozdział 9.1 Instrukcje SQL umożliwiające modyfikację danych w bazie Rozdział 9.2 Transakcje Rozdział 9.3 Zasada działania stworzonego systemu formularzy do modyfikacji danych Rozdział 10. Dodatkowe funkcjonalności Rozdział 10.1 Tworzenie i przywracanie kopii bazy danych Rozdział 10.2 Wyzwalacze w baziach danych SQL Rozdział 10.3 Tworzenie dokumentów PDF z pomocą PHP i HTML Część IV Rozdział 1. Podsumowanie Rozdział 2. Bibliografia Rozdział 3. Spis ilustracji Rozdział 4. Spis tabel str. 5

6 Część I W dobie rozwoju sieci komputerowych i systemów rozproszonych Internet stał się platformą zróżnicowanych działań gospodarczych. E-gospodarka jest wirtualną areną, na której prowadzona jest działalność, przeprowadzane transakcje, dochodzi do tworzenia i wymiany wartości oraz dojrzewają kontakty pomiędzy jej uczestnikami. E-biznes natomiast jest to dowolna forma wymiany zasobów i informacji pomiędzy uczestnikami przedsięwzięcia dokonywana przez łącza elektroniczne [1]. E-biznes (ang. electronic business) to termin wprowadzony w 1995 roku przez firmę IBM. Zanim nastała era biznesu internetowego, biznes elektroniczny odbywał się w dużych firmach i korporacjach pod postacią elektronicznej wymiany dokumentów (ang. EDI). Przyjmując najszerszą definicję biznesu elektronicznego, komputery po raz pierwszy zostały wykorzystane komercyjnie w latach 60. XX wieku przez wprowadzenie przez banki zautomatyzowanego systemu. Pozwalał on administrować płacami, tworzyć raporty oraz planować harmonogramów produkcji. W latach 70. i 80. działalność biznesowa rozszerzyła się o pierwsze formy komunikacji pomiędzy firmami. Powstał wtedy pierwszy system wymiany dokumentów EDI. Według firmy Euromonitor International zajmującej się badaniami rynku w 2014 roku wartość sprzedaży w Polsce w sklepach interntowych przekroczy 10 miliardów złotych, czyli będzie dwa razy większa niż obecnie. Rynek sprzedaży przez sieć rozwija się bardzo dynamicznie, a polska konsumpcja zwiększa się z roku na rok. Według innych raportów: Wydłuża się czas spędzany przez Polaków w internecie w styczniu 2009 wyniósł średnio 54 godziny 56 minut miesięcznie. Liczba internautów powyżej 15 roku życia szacowana na 14 milionów (Megapanel szacuje liczbę internautów powyżej 7 roku życia na 15,8 milionów). Megapanel PBI/Gemius, styczeń 2009 str. 6

7 Znaczenie internetu w życiu codziennym polskich konsumentów wiąż rośnie. W Europie w roku 2010 zakupy przez internet będą stanowiły 15 procen wszelkich transakcji kupna-sprzedaży, a w 2015 osiągną aż 25 procent udziału w całym rynku handlowym. Raport Obserwator Cetelem 2008 Na świecie jest 1,6 miliarda internautów, co stanowi prawie 24 procent całej populacji. Internetworldstats.com, kwiecień 2009 Internet otwiera przed przedsiębiorcami liczne okazje rynkowe. Szczególnie przed osobami kreatywnymi, potrafiącymi zagospodarować nisze rynkowe lub tworzyć innowacyjne rozwiązania. Jednak przed przystąpieniem do sprzedaży w internecie najważniejsza jest chęć działania, niebanalny pomysł, drobiazgowy plan i w dalszej kolejności jego staranne wykonanie. Niniejsza praca magisterska nie pomoże tobie w określeniu i znalezieniu tego pomysłu. Ma ona charakter edukacyjny z dziedziny programowania i tworzenia aplikacji internetowych, a jej ideą jest przekazanie wiedzy, jak stworzyć podwaliny do zaprojektowania własnego sklepu internetowego. Nie jest istotne, jak dużym doświadczeniem w tej dziedzinie dysponujesz. Ważna jest twoja determinacja, chęć nauki oraz realizacji pomysłu, przez który zapewne sięgnąłeś/sięgnęłaś po tą pracę. W sieci istnieje wiele gotowych do użycia skryptów sklepów internetowych. Wśród nich można wymienić: Quick.Cart phpshop OsCommerce Dlaczego więc pisać własny projekt od podstaw? Czy warto zabierać się za to, jeśli nie posiada się dostatecznej wiedzy w tej dziedzinie? str. 7

8 Jeżeli odpowiedź na jedno z poniższych stwierdzeń jest prawdziwe, tzn.: masz czas i chcesz nauczyć się czegoś nowego lub chcesz otworzyć własny, niepodobny do żadnego innego sklep internetowy lub chcesz pokazać innym, że możesz i potrafisz, nawet jeśli oni mówią, że to nie ma sensu odpowiedź brzmi: warto! Nawet jeśli odpowiedź na żadne pytanie nie była twierdząca, możliwe że w poniższej pracy znajdziesz coś dla siebie albo inspirację do stworzenia czegoś podobnego. Układ pracy został podzielony na cztery części: I. Wstęp do pracy, który właśnie czytasz. II. Wstęp teoretyczny, w którym zostały omówione technologie, narzędzia i cele, które będziemy chcieli zrealizować w naszym projekcie. III. W tej części przejdziemy do praktycznego wykorzystania wiedzy, którą pozyskaliśmy w poprzedniej części i stworzymy własny panel administracyjny dla sklepu internetowego. IV. Podsumowanie wykonanej pracy oraz przykładowe idee dalszego rozwoju projektu. Na płycie znajduje się Załącznik numer 1 zawierający pełną dokumentację projektu. W tekście wyróżniono dwa rodzaje pól tekstowych, aby wyróżnić istotne fragmenty tekstu: Zawierają definicje, objaśnienia i ważne uwagi Zawierają fragmenty kodu projektu, opisy funkcji oraz składni SQL wraz z przykładami str. 8

9 Część II Podstawy Rozdział 1.Wstęp W tej część powiemy parę słów o tym, co jest istotne podczas tworzenia dużych projektów programistycznych. Następnie przejdziemy do omawiania tychże idei w odniesieniu do naszego projektu. Powiemy o technologiach, których będziemy używać ich historii, podstawowych zagadnieniach z nimi związanymi, zastosowaniach, wadach i zaletach. A będą to: HTML CSS MySQL PHP JavaScript W Rozdziale 4 wybierzemy narzędzia, przy pomocy których wykonamy nasz panel administracyjny dla sklepu internetowego. Na końcu tej części określimy główne cele, które będziemy chcieli zrealizować w naszym projekcie. str. 9

10 Rozdział 2. Tworzenie praktycznych projektów PHP i MySQL Przy tworzeniu prawdziwych aplikacji WWW rzadko występują tak proste problemy, jak dodawanie dwóch liczb, czy działania na wielomianach. Kiedyś witryny internetowe posiadały parę podstron i proste formularze. Dzisiaj strony WWW stały się dużymi, rozbudowanymi aplikacjami WWW to znaczy prawdziwymi programami przesyłanymi przez sieć. Witryny urosły z kilku skryptów do tysięcy wierszy kodu. Projekty takiej wielkości wymagają odpowiedniego przygotowania i zarządzania na wzór innych projektów programistycznych. W tym rozdziale omówimy następujące zagadnienia: Planowanie i prowadzenie projektu stron WWW Wybór narzędzi pracy Tworzenie czytelnego i użytecznego kodu o Definiowanie konwencji nazewnictwa o Komentowanie kodu o Wcięcia w kodzie o Dzielenie kodu o Podział struktury katalogowej o Oddzielenie logiki i zawartości str. 10

11 Rozdział 2.1 Planowanie i prowadzenie projektu stron WWW Tworząc jakikolwiek projekt aplikacji WWW ważne jest przemyślenie wielu aspektów. Kiedy projekt nie jest zaplanowany, na końcu mogą pojawić się problemy, jak przy wdrażaniu jakiegokolwiek innego planu błędy, brak logiki w budowie projektu, nieczytelność i niejasność kodu. Nie ma jednak jednego sposobu tworzenia serwisów WWW. Niemniej istnieje kilka spraw, o których należałoby pomyśleć. Musimy być świadomi pewnych problemów i wybrać techniki odpowiednie do projektu. Przystępując do pracy nad jakimkolwiek problem należy pomyśleć, co chcemy stworzyć. Warto rozważyć, kto będzie używać naszej aplikacji. Wiele projektów chociaż są doskonale wykonane, okazuje się porażką, ponieważ nikt nie sprawdził wcześniej, czy istnieją użytkownicy zainteresowani taką aplikację. Należy rozbić daną aplikację na czynniki składowe i zastanowić się, jak działa każda z nich i jak współpracuje z innymi. Następnie należy przemyśleć, czy tak działający projekt może dobrze i logicznie działać oraz czy jest w ogóle możliwy do wykonania. Rysowanie scenariuszy, scenopisów, diagramów i schematów blokowych, czy nawet przypadków zastosowań, może okazać się przydatne w ocenie. Tworząc aplikację nie musimy wszystkiego wykonywać sami! Internet pełen jest dobrych i bezpłatnych komponentów, które możemy wykorzystać w naszej aplikacji dokonując drobnych modyfikacjach. Jeśli jednak jesteśmy ambitni, znalezione w sieci komponenty nie spełniają naszych oczekiwań albo po prostu nie istnieją, napiszmy go sami. Jeżeli wcześniej napisaliśmy moduł o pożądanej funkcjonalności, należy dokonać próby jego zastosowania. Należy podjąć decyzje co do standardów kodowania, struktury katalogów, zarządzania kontrolą wersji, wyboru środowiska programistycznego, poziomu i standardu dokumentacji oraz podziału zadań między osoby tworzące dany projekt. Podczas tworzenia aplikacji należy ją testować tak często, jak się da, aby wyłapać pojawiające się problemy w jak najszybszym czasie. str. 11

12 Rozdział 2.2 Wybór narzędzi pracy Gdy wybierzemy już środowisko programowania, musimy zdecydować, z pomocą których aplikacji będziemy tworzyć nasz projekt. Każda osoba może używać takich programów, z którymi dobrze się czuje sama, jednak pracując w zespole musimy na coś się zdecydować. Istotne jest kilka kwestii przy doborze odpowiedniej aplikacji: narzędzie, z którego będziemy korzystać, musi być kompatybilne i musi współpracować z technologiami, które wybraliśmy; aplikacja powinna zapewniać prostotę, wygodę i przejrzystość podczas pracy z nią stosunek powyższych czynników do jego ceny powinien być jak najwyższy aplikacja powinna umożliwiać łatwą pracę w zespole str. 12

13 Rozdział 2.3 Tworzenie czytelnego i użytecznego kodu Kwestia pisania użytecznego kodu jest często zaniedbywana przez programistów ze względu na ograniczenia czasowe podczas tworzenia projektu. Jednak poświęcenie niedługiego czasu i przyswojenie sobie kilku zasad w poprawnym pisaniu aplikacji może zaoszczędzić wiele trudu w przyszłości. Wiele firm branży IT posiada własne standardy, według których tworzy swoje projekty tj. wybieranie nazw plików, zmiennych, komentowania, wcinania kodu itd. W przypadku kodowania na własną rękę lub w małym zespole często nie dba się o tą kwestię. Jest to niestety błąd, który może powodować nie tylko bałagan, lecz także problemy grupy programistów, którzy nie potrafią wykorzystać istniejącego kodu. str. 13

14 Rozdział 2.3.a Definiowanie konwencji nazewnictwa Celem wyboru konwencji są: łatwiejsze poruszanie się w strukturze katalogowej projektu, jak również odczytanie kodu i struktury bazy danych. Jeśli będziemy nadawać zmiennym i funkcjom sensowne nazwy, możliwe będzie późniejsze odczytywanie kodu jako zdania w ludzkim języku lub przynajmniej jako pseudokodu. ułatwienie zapamiętywania nazw. Jeżeli identyfikatory nazwane są w sposób spójny i logiczny, łatwiej jest przypomnieć sobie, jak została nazwana konkretna zmienna lub funkcja. Dobrym zwyczajem jest nazywanie zmiennych tak, by ich nazwy opisywały przechowywane dane np. jeżeli zmienna przechowuje login użytkownika, warto nazwać ją $login. Zmienne w języku PHP deklarujemy i odwołujemy się do nich pisząc znak dolara ($), a następnie nazwę zmiennej, np. $login. Trzeba jednak znaleźć równowagę pomiędzy długością nazwy a łatwością odczytywania, na przykład przechowywanie loginu w zmiennej $l sprawia, że jest ona łatwa do napisania, ale trudna do zrozumienia, zaś z drugiej strony zmienna $login_aktualnego_uzytkownika przekazuje dokładniejszą informację o jej zawartości, lecz wymaga dużo pisania i w istocie nie ułatwia w żaden sposób zrozumienia. Należy podjąć również decyzję o stosowaniu wielkości liter w nazwach zmiennych. PHP zwraca na nią uwagę, tym samym zmienna $login i $Login to dwie różne zmienne! Zaleca się stosowanie wyłącznie małych liter, ponieważ konwencja ta jest łatwiejsza do zapamiętania. Dobrym pomysłem jest również wyróżnienie zmiennych i stałych za pomocą wielkości liter. Zazwyczaj małe litery stosuje się do nazw zmiennych, a liter dużych w stałych. Jeżeli w naszym projekcie chcemy wyróżnić do czego służą poszczególne funkcje, możemy nadawać im nazwy z przedrostkami określającymi ich zastosowanie, tak jak jest to robione w wielu modułach PHP, np. funkcje modułu MySQL rozpoczynają się od mysql_, a funkcje IMAP od imap_. str. 14

15 Rozdział 2.3.b Komentowanie kodu Wszystkie programy powinny być komentowane na rozsądnym poziomie. Warto dodawać komentarze w następujących miejscach: Pliki każdy plik powinien posiadać komentarz, określający czym jest, jakie jest jego przeznaczenie, kto go uaktualnił i kiedy. Funkcje powinno być określone jak działa dana funkcja, jakich parametrów się spodziewa oraz co zwraca. Klasy (w przypadku programowania obiektowego) powinno opisywać się przeznaczenie klasy, jej metody powinny posiadać podobny schemat opisu jak funkcje. Skomplikowane fragmenty kodu i sztuczki niektóre fragmenty kodu, które są istotne, a mogą być niezrozumiałe dla innych osób lub po pewnym czasie nieużywania kodu, powinny być opisane komentarzem mówiącym, co dany fragment robi, Komentarze powinny być wykonywane na bieżąco, w trakcie pracy. Nie należy tego odkładać na później, gdyż będziemy potrzebowali wtedy więcej czasu na odtworzenie, czym dane fragment kodu się zajmuje i jak działa. Dzięki temu oszczędzamy czas i wyrabiamy sobie dobry zwyczaj programistyczny. Rozdział 2.3.c Wcięcia w kodzie Pisanie kodu programów, w tym aplikacji WWW, jest działaniem podobnym do nadawania odpowiedniej formy raportowi lub listowi. Wcinanie ułatwia czytanie i zrozumienie kodu, jeśli wykonuje się je rozsądnie i w sposób spójny. Ogólna zasada wcinania kodu jest taka, iż każdy blok kodu należący do struktury nadrzędnej (początku funkcji, klas, pętli, instrukcji if, switch itd.) powinien być wcięty w porównaniu do otaczającego kodu. Stopień wcięcia powinien być zauważalny np. trzy spacje, jeden tabulator, ale nie nadmierny. str. 15

16 Rozdział 2.3.d Dzielenie kodu Kolejną istotną kwestią jest rozbijanie wielkiego kodu na kilka dokumentów. Skrypty warto podzielić ze względu na funkcje, klasy oraz związane ze sobą części kodu na oddzielne pliki, na przykład ulokować wszystkie funkcje związane z bazami danych w jednym pliku, a następnie podpiąć go do głównego skryptu, gdy jest to konieczne. Dzielenie kodu przynosi następujące korzyści: Ułatwia czytanie i zrozumienie kodu. Ułatwia ponowne wykorzystanie kodu i zapobiega jego rozrostowi. Jeżeli używamy tej samej funkcji parokrotnie w różnych plikach, trzeba przenieść definicję tej funkcji do jednego pliku i importować go do plików, w których była ona używana. Gdy zajdzie potrzeba modyfikacji definicji tej funkcji, wystarczy dokonać zmiany tylko w jednym miejscu. Ułatwia również pracę zespołową odpowiedzialność za wydzielone fragmenty kodu można przypisać konkretnym członkom zespołu. Przyspiesza ponadto pracę, gdyż poszczególne osoby nie muszą czekać, aż inna osoba zakończy pracę nad dużym skryptem, który jest im potrzebny. Rozpoczynając pracę nad projektem dobrze byłoby zastanowić się nad sposobem podziału projektu. Dobrym pomysłem jest narysowanie zależności między nimi i nie przejmowanie się tym, że w trakcie pracy mogą się one zmienić. Wystarczy wtedy ponownie je rozrysować i zastosować do projektu. Rozdział 2.3.e Podział struktury katalogowej Pomysłem równie niefortunnym jak utworzenie jednego ogromnego skryptu zawierającego całą funkcjonalność jest stworzenie jednego katalogu, zawierającego wszystkie pliki wchodzące w skład projektu. Należy zdecydować, jak katalogi zostaną podzielone pomiędzy składniki, logikę i pozostałą zawartość. Wskazane jest udokumentować ten podział. str. 16

17 Rozdział 2.3.f Oddzielenie logiki i zawartości Odseparowanie od siebie kodu odpowiedzialnego za logikę, zawartość i wygląd jest powszechnie znaną i stosowaną ideą. Ogólnie rzecz ujmując, ułatwia ona użycie, utrzymanie witryny oraz wprowadzenia w niej zmian. W przypadku małych projektów może ona okazać się niewarta trudu, jednak wraz ze wzrostem rozmiarów kodu daje tylko korzyści. Jeżeli nie zostanie to wykonane, kod stanie się znacznie trudniejszy w utrzymaniu, gdyż na przykład chcąc wprowadzić zmianę w wyglądzie strony, którego kod osadzony jest w różnych plikach, może się okazać to bardzo trudne i pracochłonne. str. 17

18 Rozdział 3. Wybrane technologie W Rozdziale 2.1 powiedzieliśmy, że przystępując do jakiegokolwiek projektu powinniśmy określić, dla kogo przeznaczony jest nasz projekt. Odpowiedzi na to pytanie udzieliliśmy w Części I. Następnym krokiem jest wybranie technologii, języków programowania, w których napiszemy naszą aplikację. Poniżej znajdziemy zbiór podstawowych informacji o technologiach, których użyjemy przy tworzeniu panelu administracyjnego. Rozdział 3.1 HTML Rozdział 3.1.a Czym jest HTML? HTML to skrót od angielskiego HyperText Markup Language (pol. język znaczników hipertekstowych). Jest to język programowania, który służy do tworzenia stron internetowych zgodnie z podanym opisem struktury strony. Dzięki temu opisowi możemy zdefiniować np. wielkość, kolor i rodzaj czcionki, migotanie tekstu, czy tekst jest odnośnikiem do innej strony, akapity, justowanie itd.. Najważniejszą cechą HTML jest to, że jest on kompatybilny z każdym systemem operacyjnym Windows, MacOS, OS/2, Unix, Linux i wieloma innymi. Choć HTML jest językiem programowania, to jest on bardzo prosty do nauczenia i można go opanować w kilka dni. Rozdział 3.1.b Historia HTML W 1980 fizyk Tim Berners-Lee, pracujący dla ośrodka naukowo badawczego CERN, stworzył prototyp hipertekstowego systemu (patrz Hipertekstowy system) informacyjnego ENQUIRE. System ten wykorzystywano do organizowania i udostępniania dokumentów związanych z badaniami naukowymi. Rewolucyjność pomysłu polegała na tym, że użytkownik posługując się odnośnikami mógł z jednej lokalizacji przeglądać dokumenty fizycznie znajdujące się w innych miejscach na świecie. str. 18

19 Hipertekstowy system organizacja danych w postaci niezależnych fragmentów tekstów opisujących pewne zagadnienie, połączonych odnośnikami tzw. hiperłączami W 1989 Berners-Lee i inżynier oprogramowania CERN, Robert Cailliau, przedstawili równolegle dwie propozycje hipertekstowych systemów informacyjnych opartych na sieci Internet. Rok później opracowali wspólną propozycję zaakceptowaną przez CERN projekt WorldWideWeb [2]. Pierwotna wersja języka HTML składała się z dwudziestu dwóch znaczników umożliwiających wyświetlanie tekstu wraz z odsyłaczami do innych tekstów. Ze względu na stosowanie owych znaczników język ten nazwano HTML Tags. HTML został napisany w oparciu o język SGML (ang. Standard Generalized Markup Language), który był i jest popularnym systemem tworzenia dokumentów. HTML nie posiadał jednak formalnej definicji w SGML-u, ale posiadał jedną z najistotniejszych jego cech fakt, że jest to język opisu struktury strony, a nie wyglądu konkretnych jej elementów. Na czym to polega? Większość dokumentów tworzonych w edytorach tekstu typu OpenOffice, MS Office itp. posiada pewne cechy wspólne tj. nagłówki, akapity, listy. Przed rozpoczęciem pisania możemy określić ich wygląd i nadać im odpowiednie nazwy, z góry definiując styl, jaki przybiorą poszczególne elementy dokumentu. Podobnie jest w HTML-u, tyle że za definiowanie różnych elementów strony odpowiadają odpowiednie znaczniki np. <b></b> - pogrubienie <i></i> - kursywa <table></table> - tabela Itp. Choć HTML nie mówi wiele o wyglądzie strony po jej wyświetleniu, to jednak kaskadowe arkusze stylów (w skrócie CSS) dają zaawansowane możliwości formatowania znaczników HTML. Więcej o CSS dowiemy się w Rozdziale 3.2. W połowie 1993 organizacja IETF (ang. Internet Engineering Task Force), będąca stowarzyszeniem ustanawiającym standardy techniczne i organizacyjne w Internecie, opublikowała pierwszą propozycję specyfikacji języka HTML autorstwa Bernersa-Lee i Dana Connolly Hypertext Markup Language (HTML) Internet-Draft (pol. szkic). Zawierała ona opis gramatyki w postaci SGML Document Type Definition (pol. definicja typu dokumentu). Od tego momentu twórcy przeglądarek eksperymentowali z HTML-em modyfikując atrybuty istniejących już znaczników oraz dodając całkowicie nowe. str. 19

20 Ogłoszenie przez IETF pierwszej oficjalnej specyfikacji nastąpiło w listopadzie 1995 roku. Opisywała ona język HTML 2.0, w którym były skodyfikowane najpopularniejsze polecenia i była podstawą przyszłych implementacji kolejnych wersji HTML-a. "HTML 1.0" nigdy nie istniał, ponieważ oznaczenie 2.0 zostało nadane w celu odróżnienia nowej specyfikacji od wcześniejszych szkiców. Kolejny standard języka HTML HTML 3.2 został sformułowany w 1997 roku dzięki wysiłkom grupy World Wide Web Consortium (W3C). W 2000 HTML stał się międzynarodowym standardem (ISO/IEC 15445:2000). Ostatnia specyfikacja języka HTML tj. wersja HTML5, na dzień dzisiejszy jest cały czas rozwijana, dlatego większość programistów nadal korzysta z HTML w wersji 4. Rozdział 3.1.c XHTML XHTML nie jest następcą HTML, a jedynie przedstawieniem HTML 4.01 w postaci XML. W odróżnieniu od HTML-a (który jest zastosowaniem SGML), dokumenty pisane w XHTML są zgodne z oficjalną specyfikacją XML (to znaczy, że dokumenty w XHTML są poprawnymi dokumentami XML) i dzięki temu można je łatwo generować z innych dokumentów XML. Podstawowe różnice między HTML a XHTML: Nazwy elementów i atrybutów muszą być pisane małymi literami. Znaczniki należy zamykać obowiązkowo w kolejności odwrotnej do ich otwierania. Dla elementów niepustych znaczniki zamykające są obowiązkowe. XHTML wymaga zawsze atrybutów z wartością, np. <input checked="checked"/> Wartości atrybutów muszą być zawsze ujęte w cudzysłowy. Puste elementy muszą mieć znacznik zamykający albo ich znacznik otwierający musi się kończyć na /> np. <br/>. Objęcie wewnętrznych skryptów i stylów sekcją CDATA może powodować ich błędne działanie; należy w związku z tym zakomentować znaczniki początku i końca sekcji CDATA, np.: <style type="text/css">/* <![CDATA[ */ arkusz stylów /*]] > */</style> str. 20

21 XHTML bezwzględnie wymaga poprawności składni. Nasz projekt zostanie wykonany z pomocą języka XHTML 1.0 Traditional. Rozdział 3.1.d Walidacja HTML Walidacja, jest to sprawdzenie czy coś jest wolne od błędów. W tym przypadku walidator HTML sprawdza kod HTML strony oraz jego zgodność ze standardami wyznaczonymi przez Konsorcjum W3. Istnieją różne typy walidatorów niektóre szukają tylko błędów, inne proponują konkretne sposoby ich naprawy, objaśniając jak konkretne instrukcje mogą prowadzić do nieoczekiwanych rezultatów. Konsorcjum W3 udostępnia własny walidator online, całkowicie bezpłatny. Można go znaleźć pod adresem: Istnieje wiele innych walidatorów, zarówno płatnych jak i darmowych. W ramach tworzenia naszego projektu wykorzystamy darmowe walidatory wbudowane w nasze przeglądarki, w których będziemy tworzyć stronę. Więcej w Części III. Rozdział 3.1.e Zastosowania Podczas wykonywania tego projektu wielokrotnie będziemy używać HTML-a, dlatego nie będziemy w tym momencie pokazywać przykładów zastosowania tego języka. Jeśli użyjemy jakiegoś znacznika pierwszy raz, zostanie on opisany z przykładem. Ciekawą lekturą, z pomocą której można nauczyć się programowania w HTML, jest książka HTML 4. Vademecum profesjonalisty [3]. Podczas tworzenia jakiegokolwiek projektu za pomocą HTML warto korzystać ze strony: na której możemy zobaczyć obowiązujące standardy w tym języku tworzenia aplikacji internetowych. str. 21

22 Rozdział 3.2 CSS Rozdział 3.2.a Czym jest CSS? Kaskadowe arkusze stylów (ang. CSS Cascading Style Sheets) służą do definiowania tzw. stylów opisujących, w jaki sposób ma zostać wyświetlona nasza strona oraz jej elementy składowe przez przeglądarkę internetową. Pozwalają one m.in. określać rozmiar i kolor czcionki, definiować odstępy i rozmieszczenie tekstu oraz obrazów na stronie. Rozdział 3.2.b Zalety CSS CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji. Dzięki temu projektant strony WWW ma możliwość oddzielenia zawartości strony od sposobu jej prezentowania. Arkusze stylów ułatwiają projektowanie wyglądu i wpływają na zwiększenie funkcjonalności projektowanych witryn WWW. Jednego pliku ze stylami CSS można użyć w odniesieniu do całej witryny, do konkretnej strony WWW lub do konkretnego znacznika. Ma to szczególne znaczenie, jeżeli projektujemy witrynę składającą się z bardzo dużej ilości podstron. Stosowanie kaskadowych arkuszy stylów pozwala znacząco zmniejszyć rozmiary plików HTML, a co za tym idzie, czas konieczny do załadowania strony. Tym samym zmniejszamy rozmiary przestrzeni potrzebnej dokumentom HTML zarówno po stronie serwera jak i klienta oraz zmniejszamy obciążanie serwera i sieci, co w konsekwencji umożliwi większej ilości użytkowników jednoczesne korzystanie z naszej witryny. CSS ułatwia także zmiany w renderowaniu strony w zależności od obsługiwanego medium (ekran, palmtop, dokument w druku, czytnik ekranowy). Rozdział 3.2.c Wady CSS Jedną z wad CSS jest niezmiernie rozległa i złożona specyfikacja. Ponadto jeśli w arkuszu stylu pojawi się jakiś błąd, przeglądarka nie wyświetli nam żadnego komunikatu informującego o błędzie. Kolejną niedogodnością jest fakt, iż nie wszystkie przeglądarki obsługują kaskadowe arkusze stylów, a te, które obsługują, nie zawsze stosują się do str. 22

23 oficjalnej specyfikacji. Dotyczy to szczególnie bardziej skomplikowanych deklaracji. Dlatego zalecane jest sprawdzanie na bieżąco efektów w praktyce. Rozdział 3.2.d Historia CSS Powstanie CSS było naturalnym etapem rozwoju języka HTML. Chociaż HTML umożliwiał formatowanie wyglądu strony i jej elementów, zawarcie poleceń formatujących w samym pliku powodowało jednak, że modyfikacja elementów strony stała się bardzo żmudna. Znaczniki i atrybuty były porozrzucane po różnych miejscach kodu i mieszały się ze strukturą dokumentu. Dzięki temu, że w samym HTML-u zawierały się polecenia formatujące, wiodące na rynku firmy przeglądarek internetowych (Netscape i Microsoft), zaczęły wprowadzać ulepszenia w swoich produktach. Rozmaite rozszerzenia były interpretowane tylko przez ich przeglądarki, gdyż nie zostały oficjalnie zawarte w specyfikacji HTML. Projektanci zostali zmuszeni do wysyłania do klienta różnych wersji tej samej witryny w zależności od użytej przeglądarki, gdyż uzyskanie identycznego wyglądu w różnych przeglądarkach było praktycznie niemożliwe. Było to np. migotanie tekstu (Netscape) czy animacja Miraquee (Internet Explorer). Håkon Wium Lie jako pierwszy zaproponował CHSS (Cascading HTML Style Sheets) w październiku 1994 roku. Później Lie i Bert Bos pracowali wspólnie nad standardem CSS (literka H została usunięta ze względu na możliwość stosowania stylów do innych podobnych do HTML języków). Organizacja World Wide Web Consortium przejęła prace nad CSS i pod koniec 1996 roku wydała oficjalną dokumentację CSS 1. W3C zatwierdziło oficjalne standardy CSS: CSS 1 i CSS 2, a także w czerwcu 2011 roku standard CSS 2.1. Aktualnie trwają również prace nad CSS3. Wersja ta w stosunku do poprzedników wzbogaci się o wiele selektorów oraz właściwości, nowością jest także modułowy charakter języka. Nasz projekt zostanie wykonany zgodnie ze standardem CSS 3. str. 23

24 Rozdział 3.2.e Walidacja CSS Podobnie jak dla HTML, tak i dla CSS powstało wiele walidatorów, w tym opracowany przez W3C: Rozdział 3.2.f Zastosowania Arkusz stylów składa się z reguł określających styl dla wybranych elementów dokumentu. Reguła stylu składa się z dwóch głównych części: selektora i deklaracji stylu. Selektor określa grupę elementów (czasem pojedynczy element), którego ma dotyczyć deklaracja. Deklaracja określa formatowanie i składa się z nazwy jednej z właściwości i jej wartości napisanej po dwukropku. Deklaracja musi być otoczona nawiasami klamrowymi. Ogólne polecenie reguły stylu ma następującą postać: selektor { właściwość: wartość } Spis właściwości można znaleźć na stronie Dodatkowo możliwe jest grupowanie zarówno selektorów jak i deklaracji. Zgrupowane selektory rozdziela się przecinkami, a deklaracje średnikami: selektor1, selektor2 { właściwość1: wartość1; właściwość2: wartość2; } Poniżej podana jest przykładowa reguła dla języka (X)HTML, w której przypisujemy naszej stronie czerwony kolor tła: body { background-color: red; } Selektorem jest tutaj body, właściwością background-color, a wartością red. Selektorami według standardu CSS mogą być znaczniki (np. h1 ), klasy znaczników (np..nazwa_klasy ), także w połączeniu z nazwą znacznika (np. p.nazwa_klasy ), str. 24

25 identyfikator znacznika (np. #identyfikator ), przodek danego znacznika (np. div #menu a zostanie zastosowane do linków zawartych w elemencie div o identyfikatorze menu ), pseudoklasy (np. stany linków tj.:visited, :link, :active). Dokument HTML można powiązać z arkuszem odwołując się do zewnętrznego dokumentu CSS za pomocą znacznika link: <link rel="stylesheet" href="nazwa_pliku.css" /> Reguły CSS można też umieszczać wewnątrz nagłówka dokumentu (X)HTML dzięki znacznikowi style: <style type="text/css"><![cdata[p {color: red;}]]></style> Można również dodawać deklaracje bezpośrednio do danego elementu dokumentu za pomocą atrybutu style: <p style="color: red">lorem ipsum</p> str. 25

26 Rozdział 3.3 MySQL Rozdział 3.3.a Czym jest MySQL? Nim powiemy, czym jest MySQL, musimy powiedzieć, czym są bazy danych. Baza danych ogólnie rozumiany zbiór informacji o przedmiotach, zjawiskach, osobach, firmach, wszystkim co istnieje w życiu realnym, z możliwością łatwego dostępu do nich i ich modyfikacji. Pierwsze modele (rodzaje) baz danych pojawiły w latach sześćdziesiątych i siedemdziesiątych XIX w. Pionierem w tej dziedzinie był wówczas Charles Bachman. Jego badania miały na celu stworzenie systemu efektywniej wykorzystującego ówczesne urządzenia (m. in. karty dziurkowane, taśmy magnetyczne) przechowujące i przetwarzające dane na nich zapisane. Powstały wtedy dwa kluczowe modele danych: sieciowy i hierarchiczny. W 1970 E. F. Codd zaproponował relacyjny model danych, jednak przez dłuższy czas pozostawał on tylko w sferze rozważań akademickich ze względu na ograniczenia sprzętowe. Pierwsze komercyjne rozwiązania, Oracle i DB2 nie były dostępne aż do lat osiemdziesiątych. Obecnie najbardziej rozpowszechnionym modelem baz danych jest model relacyjny. Dane grupowane są w nim w relacje, które reprezentowane są przez tablice. Relacje posiadają unikalną nazwę, nagłówek oraz zawartość będącą zbiorem rekordów o identycznej strukturze. Nagłówek relacji to zbiór atrybutów o unikalnej nazwie i określonym typie danych, które są kolumnami tabeli. Zawartość natomiast jest zbiorem krotek w tabeli (rysunek poniżej). Nazwa relacji Atrybuty (kolumny) Relacja (tabela) A 1 A n Rekord Nagłówek Krotki (wiersze) Każda relacja (tabela) posiada tzw. klucz główny, który jednoznacznie identyfikuje wiersze w tabeli. Innym rodzajem klucza jest tzw. klucz obcy. Jest to zbiór atrybutów jednej tabeli (relacji) wskazujący wartości klucza innej tabeli. Służy do wskazywania zależności pomiędzy danymi składowanymi w różnych tabelach. str. 26

27 W tym modelu istnieje każdy rodzaj wcześniej wymienionych związków: jeden-do-jednego (oznaczamy go 1:1), jeden-do-wielu (1:n), wiele-do-jednego (n-1), wiele-do-wielu (n:m). Czym są owe związki? Po podzieleniu danych na tabele i zdefiniowaniu pól kluczy podstawowych trzeba wprowadzić do systemu bazy danych informacje na temat sposobu poprawnego łączenia powiązanych danych w logiczną całość. W tym celu definiuje się relacje między tabelami. Relacja jeden-do-jednego: W relacji jeden-do-jednego każdy rekord w tabeli A może mieć tylko jeden dopasowany rekord z tabeli B i tak samo każdy rekord w tabeli B może mieć tylko jeden dopasowany rekord z tabeli A. Ten typ relacji spotyka się rzadko, ponieważ większość informacji powiązanych w ten sposób byłoby zawartych w jednej tabeli. Relacji jeden-do-jednego można używać do podziału tabeli z wieloma polami, do odizolowania części tabeli ze względów bezpieczeństwa albo do przechowania informacji odnoszącej się tylko do podzbioru tabeli głównej. Na przykład, w jednej tabeli przechowujemy dane o loginach i hasłach użytkowników, a w drugiej ich dane kontaktowe, zaś obie tabele łączymy ze sobą po kluczach głównych. Relacja jeden-do-wielu, wiele-do-jednego: Relacja jeden-do-wielu jest najbardziej powszechnym typem relacji. W relacji jeden-do-wielu rekord w tabeli A może mieć wiele dopasowanych do niego rekordów z tabeli B, ale rekord w tabeli B ma tylko jeden dopasowany rekord w tabeli A. Na przykład, jedna osoba może złożyć wiele zamówień, ale jedno zamówienie może być złożone tylko przez jedną osobę. Relacja wiele-do-wielu: W relacji wiele-do-wielu rekord w tabeli A może mieć wiele dopasowanych do niego rekordów z tabeli B i tak samo rekord w tabeli B może mieć wiele dopasowanych do niego rekordów z tabeli A. W relacji tej definiujemy dodatkową trzecią tabelę (nazywaną tabelą łącza), której klucz podstawowy składa się z dwóch pól kluczy obcych z tabel A i B. Relacja wiele-do-wielu jest w istocie dwiema relacjami jeden-do-wielu z trzecią tabelą. Na przykład, tabele "Zamówienia" i "Produkty" są powiązane relacją wiele-do-wielu zdefiniowaną przez utworzenie dwóch relacji jeden-do-wielu z tabelą "Opisy zamówień". str. 27

28 Relacyjny model umożliwia przeszukiwanie i zmianę danych za pomocą języka programowania, w którym została stworzona baza danych. Najbardziej popularnym językiem zapytań dla modelu relacyjnego jest język SQL. SQL jest to strukturalny język zapytań z ang. Structured Query Language, używany do tworzenia, modyfikowania baz danych oraz do umieszczania i pobierania danych z baz danych. Język SQL jest językiem deklaratywnym. Oznacza to, że w takim języku opisujemy co ma być zrobione oraz jakie warunki ma spełniać rozwiązanie problemu, a nie w jak polecenie ma zostać zrealizowane. Decyzję o sposobie jego rozwiązania pozostawia się odpowiedniemu systemowi, w tym przypadku systemowi zarządzania bazą danych (DBMS). SQL został stworzony w firmie IBM w latach 70. zeszłego wieku w ramach prac nad systemem zarządzania relacyjnymi bazami danych. Pierwsza wersja systemu RDBMS została wdrożono w 1974 roku pod nazwą SEQUEL (ang. Structured English Query Language), jednak ze względów prawnych i rozwinięcia projektu zmieniono nazwę na SQL (ang. Structured Query Language). Pierwszy komercyjny system stosujący SQL powstał już w 1979 roku w firmie ORACLE, która do dziś przoduje w dziedzinie rozwoju systemów RDBMS. W 1986 roku organizacje zajmujące się ustalaniem standardów, ANSI oraz ISO, doprowadziły do stworzenia pierwszego standardu SQL, nazywanego SQL1 lub SQL-86. Do dnia dzisiejszego napisano kolejne wersje standardu SQL (m.in. SQL-89, 92, 1999, 2003), jednak ze względu na małą presję powyższych organizacji wywieranej na producentach oprogramowania stosującego SQL, duża ich część nadal stosuje starsze standardy języka, co nie przeszkadza jednak w ich użytkowaniu, gdyż ogólna idea języka SQL została zachowana do dziś, a kolejne standardy tylko ją rozwijały. By dowiedzieć się więcej o bazach SQL warto przeczytać książkę SQL. Księga eksperta [5]. Mając tą wiedzę powiedzmy więc, czym jest MySQL jest to darmowy system zarządzania relacyjnymi bazami danych stosującym język SQL[6]. str. 28

29 Rozdział 3.3.b Zalety MySQL Głównymi zaletami MySQL są: wydajność MySQL jest niewątpliwie szybki. W 2002 roku magazyn eweek opisał test, w którym porównano pięć baz danych stanowiących podstawy aplikacji WWW. Najlepsze wyniki osiągnęły MySQL oraz Oracle. niski koszt MySQL jest dostępny bezpłatnie, na licencji Open Source, lub za niską cenę, w ramach licencji komercyjnej. przenaszalność system MySQL umożliwia współpracę z wieloma systemami operacyjnymi w tym Linux i MS Windows, dzięki czemu nie musimy przejmować się tym jaki OS używamy. możliwość współpracy z wieloma językami programowania m.in. C, C++, Java, Perl, PHP, Python, Ruby itd. popularność MySQL jest bardzo popularnym systemem RDBMS, istnieje wiele forów dotyczących tego systemu, dzięki czemu w razie problemu istnieje duża szansa na odnalezienie odpowiedzi w razie jakiegokolwiek problemu, łatwa konfiguracja i dobra dokumentacja. Rozdział 3.3.c Wady MySQL MySQL posiada również bardziej i mniej poważne wady: zaimplementowany SQL nie zawsze jest zgodny ze standardami, brak wielu funkcji i cech wspieranych przez inne, zazwyczaj komercyjne systemy zarządzania bazami danych, np. zintegrowane narzędzia do tworzenia i przywracania kopii bazy danych, prosty i podstawowy system importowania i eksportowania danych, brak możliwości dzielenia tabel na struktury przyspieszające odczyt/zapis danych, niezbyt wydajny system transakcji, wydajność ze wzrostem pojemności bazy danych znacznie spada, brak zintegrowanego systemu harmonogramu zadań w bazie danych. str. 29

30 Rozdział 3.3.d Historia MySQL Historia MySQL rozpoczęła się w 1995 roku w firmie MySQL AB założonej przez Michaela Widenius, Davida Axmark i Allana Larsson. Początkowo próbowali oni zmodyfikować ówcześnie istniejący system RDBMS o nazwie msql, jednak ze względu na wolne działanie i ograniczoną możliwość dokonywania zmian w tym systemie porzucono projekt i rozpoczęli prace nad własnym systemem, który okazał się niebywałym sukcesem. W 2008 roku firma MySQL AB została kupiona przez Sun Microsystems za kwotę miliarda dolarów, ta zaś w 2010 roku przez potentata na rynku baz danych, firmę Oracle. Rozdział 3.3.e Zastosowania Podczas tworzenia tego projektu wiele razy będziemy używać języka SQL do komunikowania się z bazą danych. Z tego powodu nie będziemy w tym momencie pokazywać przykładów zastosowania tego języka. Więcej o tworzeniu zapytań SQL dowiemy się w Części III. str. 30

31 Rozdział 3.4 PHP Rozdział 3.4.a Czym jest PHP? PHP to skryptowy język programowania stosowanym przy tworzeniu stron internetowych. Jego skrót pochodzi od angielskich słów Personal Home Page, czyli osobista strona domowa. Sam PHP nie służy do tworzenia stron, jednak posiadając funkcjonalność języka programowania znacząco ułatwia tworzenie zaawansowanych serwisów, gdzie często występuje dynamiczne tworzenie zawartości strony w zależności od ingerencji użytkownika. Skrypty napisane w PHP są z reguły umieszczane w plikach tekstowych (czasami razem z kodem HTML lub XHTML). PHP pozwala także na wykonywanie skryptów z linii poleceń podobnie jak Perl, Python oraz Ruby. Jego modułowa budowa daje również możliwość programowania samodzielnych aplikacji z interfejsem graficznym. PHP umożliwia współpracę z wieloma rodzajami źródeł danych, takich jak systemy zarządzania bazami danych (np. wcześniej opisany system MySQL), pliki tekstowe, dokumenty XML oraz serwisy WWW. Rozdział 3.4.b Jak działa PHP? PHP jest językiem działającym po stronie serwera WWW. Przeciwieństwem są języki pracujące po stronie przeglądarki użytkownika (np. JavaScript, który omówimy z następnym podrozdziale). Aby wykorzystywać go na własnej stronie, musisz upewnić się, że twój serwer obsługuje PHP. W Rozdziale 4 wybierzemy jeden z serwerów, z pomocą którego będziemy tworzyć nasz projekt. Wpisując adres w przeglądarce internetowej, do serwera HTTP wysyłane jest żądanie wyświetlenia strony WWW. Jeśli serwer stwierdzi na podstawie rozszerzenia pliku (wszystkie pliki PHP mają na końcu rozszerzenie php), że dany dokument zawiera kod PHP, serwer kieruje do jego interpretera kodu PHP żądanie przetworzenia podanego pliku. Interpreter wyszukuje w jego treści kod PHP zastępuje go wynikiem jego wykonywania. Utworzony w ten sposób końcowy kod HTML jest zwracany serwerowi, a ten wysyła go z powrotem do internauty. PHP używany jest do dynamicznego (zależnego od różnych warunków) generowania kodu HTML zawartości strony. Do przeglądarki dociera kod HTML a nie PHP. Jeśli mamy plik PHP o następującej treści: str. 31

32 <html> <body> <?php echo Witaj świecie ; </html> </body>?> To internauta zobaczy w źródle otrzymanego pliku HTML jedynie dokument o takiej treści: <html> <body> Witaj świecie </body> </html> Dzięki pracy po stronie serwera, PHP idealnie nadaje się do tworzenia złożonych aplikacji zarządzających dużymi ilościami danych: forów dyskusyjnych, systemów zarządzania treścią (ang. CMS), sklepów internetowych itd.. Generują one odpowiedni kod HTML dla przeglądarek internautów, a w momencie kiedy oni go przeglądają, PHP już zakończył nad nim swą pracę. Jest to bardzo istotne, ponieważ wszelkie dalsze reakcje na poczynania użytkownika należy albo pozostawić przeglądarce, albo obsłużyć je za pomocą języka JavaScript. By dowiedzieć się więcej o działaniu PHP, warto odwiedzić oficjalną stronę z dokumentacją lub przeczytać książki, z której sam uczyłem się PHP PHP i MySQL. Tworzenie stron WWW. Vademecum profesjonalisty oraz PHP5, Apache i MySQL. Od podstaw [8][9]. str. 32

33 Rozdział 3.4.c Historia PHP Pierwsza wersja PHP, rozpowszechniana pod nazwą PHP/FI (Personal Home Page/Forms Interpreter), została stworzona przez Rasmusa Lerdorfa w roku 1994 jako zestaw skryptów Perla służący do monitorowania internautów odwiedzających jego witrynę. Gdy ruch stał się zbyt duży, przepisał je w języku C, dodając przy tym nowe opcje. Niedługo później ludzie zaczęli prosić go o możliwość użycia tych narzędzi na swoich stronach. 8 czerwca 1995 roku autor udostępnił publicznie kod źródłowy (PHP Tools 1.0). Już kilka miesięcy później projekt przekształcił się w zalążek znanego obecnie języka programowania, gdy został połączony z innym narzędziem Rasmusa Lerdorfa Form Interpreter, które dało drugi człon nazwy. W 1997 roku pojawiło się PHP/FI 2.0, posiadające wtedy kilka tysięcy aktywnych użytkowników na całym świecie oraz obsługujące 50 tys. domen. Co ciekawe, wersja ta spędziła większość "życia" na beta testach. Oficjalne wydanie było tylko jedno i ukazało się w listopadzie 1997 roku. W 1997 roku projektem zainteresowali się dwaj izraelscy programiści: Zeev Suraski i Andi Gutmans. Odkryli oni, że PHP/FI ma zbyt małe możliwości na potrzeby aplikacji ecommerce, którą tworzyli na uniwersytecie. Zdecydowali wtedy, że przepiszą kod PHP całkowicie od nowa, korzystając z pomocy już istniejącej społeczności PHP. W czerwcu 1998 roku ogłosili PHP 3.0 jako następcę PHP/FI, którego dalszy rozwój został wtedy zatrzymany. Był to wielki krok naprzód. PHP 3.0 posiadało całkowicie nową architekturę, która znacznie zwiększała wydajność. Pojawiły się w niej zalążki programowania obiektowego, ale najważniejszą cechą aplikacji była jej modułowość. Użytkownicy mogli rozszerzać teraz funkcjonalność języka poprzez dodawanie nowych modułów. Krótko po wydaniu PHP 3, w zimie 1998 Zeev Suraski oraz Andi Gutmans jeszcze raz zabrali się za przepisywanie kodu źródłowego PHP, korzystając z doświadczeń nabytych przy pracach nad poprzednią wersją. Za główne cele obrali poprawienie modułowości oraz wydajności złożonych aplikacji. Choć dotychczasowa wersja potrafiła sobie z nimi poradzić, nie była jednak stworzona do tego celu i przegrywała przez to z innymi rozwiązaniami. W połowie roku 1999 ukazał się oficjalnie Zend Engine, nowy silnik języka skryptowego, wokół którego niedługo później zaczęto budować PHP 4. Jego nazwa to kompromisowe połączenie imion twórców projektu. Nowa, oparta o niego wersja PHP, ukazała się w maju 2000 roku. Tak jak poprzednio, był to potężny krok naprzód. Programiści mieli do dyspozycji teraz wiele nowych narzędzi, konstrukcji językowych oraz bezpieczniejszy system wejścia/wyjścia. Od strony administracyjnej pojawiło się oficjalne wsparcie dla wielu nowych str. 33

34 serwerów. Przez cztery lata od chwili wydania ukazały się trzy kolejne edycje tej wersji oznaczone numerami: 4.1, 4.2 oraz 4.3. W każdej z nich odczuwalne było zwiększenie bezpieczeństwa, szybkości działania oraz możliwości. W 2004 roku obsługiwały one łącznie 20% wszystkich domen sieciowych. W 2002 roku Zeev Suraski oraz Andi Gutmans ponownie rozpoczęli znaczącą modernizację silnika PHP mającą na celu dodanie do tego języka modelu obiektowego z prawdziwego zdarzenia. W lutym 2003 ukazała się pierwsza wersja alpha nowej wersji PHP oznaczonej numerem Stabilna wersja ukazała się prawie półtora roku później, w lipcu 2004 roku. Nowości sprawiły, że PHP może konkurować teraz z innymi rozwiązaniami server-side, jak równy z równym. Pojawił się całkowicie nowy model programowania obiektowego, przez co niestety została utracona część kompatybilności z poprzednimi wersjami PHP w niektórych skryptach. Jest to spowodowane zmianą sposobu reprezentacji obiektów. Przebudowano także wiele modułów, w tym do obsługi XML-a i komunikacji z bazą danych, czyniąc je bardziej przyjaznymi dla programistów. W połowie roku 2005 zaczęły pojawiać się oficjalne sygnały, że rozpoczęto wstępne prace nad PHP 6. Obecnie publicznie dostępne są codzienne snapshoty rozwojowego repozytorium kodu źródłowego, które można ściągnąć i przetestować. Głównym celem jest dalsze dążenie do ujednolicenia projektu, wprowadzenia dalszych możliwości wymaganych przez złożone projekty (m.in. pełne wsparcie unicode czy system cache'owania kodu). Usuwane są też kolejne archaiczne rozwiązania pochodzące jeszcze z czasów PHP/FI oraz PHP3, co w przypadku najstarszych skryptów ponownie spowoduje problemy z kompatybilnością[10]. Rozdział 3.4.d Programowanie obiektowe, a programowanie strukturalne Na samym początku tworzenia jakiegokolwiek projektu musimy zastanowić się, jaki typ programowania chcemy wybrać: programowanie obiektowe czy programowanie strukturalne. Czym różnią się te dwa sposoby programowania? Jakie są ich zalety i wady? str. 34

35 Programowanie obiektowe (ang. object-oriented programming) to metodyka tworzenia programów komputerowych, która definiuje programy za pomocą obiektów elementów łączących stan (dane) i zachowanie (czyli procedury, funkcje tj. metody). Obiektowy program komputerowy wyrażony jest jako zbiór obiektów komunikujących się pomiędzy sobą w celu wykonywania zadań. Umożliwia to szybsze pisanie większych programów przez składanie ich ze wzajemnie powiązanych obiektów, które odpowiadają za daną funkcję programu (np. przygotowanie danych, wykonanie obliczeń, zaprezentowanie wyników). Podejście to różni się od tradycyjnego programowania proceduralnego, gdzie dane i procedury nie są ze sobą bezpośrednio związane. Programowanie obiektowe ma ułatwić pisanie, konserwację i wielokrotne użycie programów lub ich fragmentów. Programowanie strukturalne to wzorzec każdego rodzaju programowania zalecający hierarchiczne dzielenie kodu na moduły, które komunikują się jedynie poprzez dobrze określone interfejsy. Jest to rozszerzenie koncepcji programowania proceduralnego (gdzie dane i procedury nie są ze sobą bezpośrednio związane), a instrukcje wykonują się sekwencyjnie. Jest to programowanie zalecające stosowanie konstrukcji języka takich jak pętle i instrukcje warunkowe oraz unikanie instrukcji skoku do innych fragmentów kodu (np. za pomocą instrukcji goto) i wielokrotnych punktów wejścia i wyjścia z kodu danego podbloku programu. Jak to wygląda w praktyce? Załóżmy, że chcemy rozwiązać banalny problem jakim jest obliczenie usunięcie białych znaków z napisu. Kod dla tego problemu dla obu przypadków będzie wyglądał mniej więcej tak: str. 35

36 Class klasa_trim{ public $wynik; public function trim_($napis){ Programowanie obiektowe: } $this->wynik = trim($napis); $obiekt= new klasa_trim(); $obiekt->trim_ ( napis ); $wynik = $obiekt->wynik; Programowanie strukturalne: $wynik = trim( napis ) Rozwiązaniem problemu jest pogrubiony fragment kodu. Aby do niego dojść w przypadku programowanie obiektowego musieliśmy napisać dużo więcej kodu, który dla osób nieobeznanych z tego typu programowaniem może być niezrozumiały. Jak widać nie zawsze programowanie obiektowe jest najlepszym rozwiązaniem, a na pewno nie przy najprostszych problemach. Jednak gdy mamy do rozwiązania poważniejszy problem, np. stworzenie programu do wykonywania operacji na wielomianach, programowanie obiektowe okazuje się nieocenione. str. 36

37 Tak więc zalety i wady obu typów programowanie przedstawiają się następująco: Tabela 1 Zalety i wady programowania obiektowego i strukturalnego Programowanie Obiektowe Strukturalne Zalety wygoda późniejszego użytkowania kodu łatwa modyfikacja kodu porządek w kodzie łatwa przenaszalność do innych projektów prostota wykonania prostota nauczenia się tego typu programowania brak narzutu wydajnościowego szybsze wykonywanie skryptów Wady dłuższa początkowa nauka tego typu programowania wolniej się wykonuje w porównaniu z kodem strukturalnym narzut wydajnościowy większy rozmiar kodu tendencje do budowania przesadnych struktur łatwo można (ale nie trzeba) zrobić bałagan w wielu "nowoczesnych" językach nie ma możliwości pisania strukturalnego trudniejsza przenaszalność kodu brak kontaktu z kodem może powodować późniejsze trudności z jego zrozumieniem Ze względu na to, że pierwszy raz wykonywałem tak duży projekt, a nie posiadałem obycia i intuicji w programowaniu obiektowym w ramach tworzenia tego projektu będziemy stosować programowanie strukturalne, które nie musi być trudne do zrozumienia, jeśli projekt ma logiczną strukturę, dobrą dokumentację oraz komentarze do wykonywanego kodu. str. 37

38 Rozdział 3.5 JavaScript Rozdział 3.5.a Czym jest JavaScript? Java Script to skryptowy język programowania, opracowany specjalnie dla potrzeb pracy w środowisku WWW przez firmę Sun Microsystem (firmę, która zakupiła firmę MySQL AB) i Netscape (niegdyś przodującą firmę w dziedzinie przeglądarek internetowych i nie tylko). Jest narzędziem pozwalającym na tworzenie interaktywnych stron WWW coś czego nie można było osiągnąć za pomocą samego HTML-a. Daje możliwość kontrolowania zachowań internauty oglądającego stronę WWW i reagowania na nie. Pozwala nadać stronom pewne dynamiczne elementy, przy czym dynamika ta jest realizowana po stronie klienta. Oznacza to, że po ściągnięciu skryptu z serwera, jest on interpretowany i wykonywany przez przeglądarkę. Podczas wzbogacania funkcjonalności strony internetowej istotne jest, aby żaden element serwisu nie stał się niedostępny po wyłączeniu obsługi JavaScriptu w przeglądarce po stronie użytkownika. Skrypt JavaScriptu ma znacznie ograniczony dostęp do komputera użytkownika (o ile nie zostanie podpisany cyfrowo). Niektóre strony WWW zbudowane są z wykorzystaniem JavaScriptu po stronie serwera, jednakże znacznie częściej korzysta się w tym przypadku z innych języków jak np. PHP. I ta cecha jest główną i bardzo istotną różnicą między tymi językami, o której należy pamiętać! Rozdział 3.5.b Historia JavaScript JavaScript, jak wcześniej wspomnieliśmy, został wymyślona przez Netscape i po raz pierwszy został użyta w przeglądarce o tej samej nazwie. Firma ta pracowała z ECMA (ang. European Computer Manufacturers Association), międzynarodową organizacją standardów dla informacji i komunikacji systemowej, aby wprowadzić ustandaryzowany, międzynarodowy język programowania bazujący na czystej JavaScript. Język opisany w standardzie ECMA- 262 został nazwany ECMAScript. Standard ECMA-262 jest także zaaprobowany przez ISO jako ISO Od tego momentu nazwa JavaScript oznacza jedynie jeden z nadzbiorów języka ECMAScript. Pierwsza wersja standardu była bliska JavaScriptowi w wersji 1.1. str. 38

39 Trzecia jako pierwsza rozszerzyła istniejące implementacje. Aktualnie trwają prace nad wersją czwartą. Rozdział 3.5.c Javascript i Java JavaScript i Java są podobne pod pewnymi względami, ale fundamentalnie różnią się w innych. Java jest językiem programowania, natomiast JavaScript jest językiem skryptowym, jak zresztą sugeruje sama nazwa. W przeciwieństwie do kompilowanego systemu Javy, używającego deklaracji klas, JavaScript obsługuje system interpretowany podczas wykonania przez przeglądarkę internetową. JavaScript ma o wiele swobodniejszą formę w porównaniu z Javą. Nie musisz deklarować wszystkich zmiennych, klas i metod. Nie musisz się zastanawiać, które metody są publiczne, prywatne lub chronione i nie musisz implementować interfejsów. Zmienne, parametry i funkcje zwracają typy, które nie są jawnie określane. Java jest językiem bazującym na klasach, zaprojektowanym z myślą o szybkości wykonania i bezpieczeństwie typów. Rozdział 3.5.d Biblioteka Biblioteka jest to zbiór funkcji, które zostały wydzielone po to, aby dało się z nich korzystać w wielu programach. Ułatwia to programowanie i przenaszalność kodu między projektami. W każdym języku programowania, tak i w skryptowej JavaScript, znajdziemy wiele bibliotek, które pomagają przy tworzeniu projektów. Podczas wykonywania naszego projektu będziemy korzystać z biblioteki jquery. str. 39

40 Rozdział 3.5.e Zastosowanie W języku HTML za umieszczanie skryptów JS odpowiedzialny jest element <script> z argumentem type o wartości text/javascript. Np. <script type="text/javascript" language="javascript 1.5"> </script> alert( To jest JavaScript ); Jeżeli kod znajduje się w dokumencie XHTML, w celu uniknięcia zinterpretowania niektórych operatorów jako elementów składni języka należy otoczyć skrypt sekcją CDATA. <script type="text/javascript"> /* <![CDATA[ */ alert( To jest JavaScript ); /*]]> */ </script> Zewnętrzne skrypty dodajemy także przy użyciu powyższego znacznika, uwzględniając jedynie parametr src z nazwą pliku zawierającego kod skryptu. <script type="text/javascript" src="code.js"></script> Za pomocą JavaScript możemy tworzyć funkcje wykonujące określone w nich operacje. Szkielet funkcji wygląda następująco: str. 40

41 function NazwaFunkcji ( parametry ){ instrukcja1; instrukcja2;... } Jeżeli nasza funkcja ma zwracać jakąś wartość przed zamknięciem klamry musimy dodać klauzulę: return CoMaZostaćZwrócone; Przykładowa funkcja dodająca do siebie dwie liczby wygląda następująco: function Suma(a, b){ return a + b;} Zaś jej wywołanie wygląda następująco: <script type="text/javascript"> /* <![CDATA[ */ wynik = Suma(4,5); alert( 4+5= +wynik); /*]]> */ </script> Więcej funkcji napisanych w języku JavaScript znajdziesz w zaprezentowanym projekcie. str. 41

42 Rozdział 4. Narzędzia Wiemy już co nieco o technologiach, które będziemy wykorzystywać podczas tworzenia naszego panelu administracyjnego. Musimy teraz wybrać spośród ogromnej ilości aplikacji wykorzystujących powyższe technologie odpowiednie narzędzia do pracy z nimi. Każda osoba może używać takich programów, w których dobrze się sama czuje, i nie musi sugerować się wyborem, którego osobiście dokonałem. Wszystkie technologie omówione w Rozdziale 3 są bezpłatne i istnieje wiele również darmowych i za razem bardzo dobrych narzędzi do pracy z nimi. Projekt, który chcemy stworzyć, ma dać nam możliwość bezpłatnej pracy w nim, bez potrzeby płacenia komukolwiek jakichkolwiek licencji, które w przypadku programów komercyjnych mogą nas bardzo dużo kosztować. Stworzenie autorskiej aplikacji w bezpłatnej, próbnej wersji edytora nie daje nam możliwości czerpania korzyści majątkowych z jej sprzedaży, gdyż nie zapłaciliśmy za licencję producentowi programu, z pomocą którego ją stworzyliśmy! Poniżej zostały przedstawione i omówione programy, z których będziemy korzystać przy tworzeniu naszego panelu administracyjnego. str. 42

43 Rozdział 4.1 Notepad++ Notepad++ Wiele osób programując używa rozbudowanych edytorów programistycznych. Wśród nich znajdują się bardzo dobre, a w dodatku bezpłatne programy tego typu, jak chociażby Netbeans oraz Eclipse. Jednak ktoś kiedyś powiedział mi stronę internetową możesz stworzyć w Notatniku i miał rację. Do tworzenia stron internetowych nie potrzeba skomplikowanych i dużych aplikacji, gdyż wystarczy dowolny edytor tekstu. Ważne jest by edytor posiadał parę przydatnych funkcji ułatwiających pracę: przejrzysty interfejs, kolorowanie składni, podpowiadanie, autouzupełnianie nazw i argumentów funkcji oraz składni, możliwość robienia wcięć w kodzie, dużą ilość i łatwe do zapamiętania skróty klawiszowe przyspieszające pracę. Wszystkie powyższe cechy posiada darmowy, open source owy program, który jest zwykłym notatnikiem z rozbudowanymi możliwościami. W nim będziemy tworzyć cały kod naszego projektu. Program jest do ściągnięcia z oficjalnej strony aplikacji: Open Source: Open Source (otwarte oprogramowanie), to odłam ruchu wolnego oprogramowania, który dąży do tego, aby istniał swobodny i wolny dostęp do oprogramowania dla wszystkich użytkowników. Open Source jest oprogramowaniem, którego licencja pozwala na legalne i darmowe kopiowane kodu wynikowego, źródłowego oraz na dowolne jego modyfikacje. str. 43

44 Rozdział 4.2 WAMP WampServer Wamp jest darmowym pakietem typu WAMP (akronim od słów Windows-Apache-MySQL- PHP) umożliwiający instalację, uruchamianie oraz obsługę w systemie serwera WWW opartego na serwerze Apache, interpretera skryptów PHP oraz serwera baz danych MySQL. Istnieje wiele konkurencyjnych pakietów o identycznych możliwościach, wśród których można wymienić XAMPP, Krasnal serv, LAMP itd. Jak sama nazwa mówi, serwer Wamp jest przeznaczonych przede wszystkim dla systemu operacyjnego Windows. Dla systemów Linux polecane jest zainstalowanie serwera XAMPP, LAMP lub instalację każdej aplikacji wchodzącej w skład pakietu WAMP z osobna. Aktualną wersję serwera WAMP można pobrać ze strony str. 44

45 Rozdział 4.3 MySQL Workbench MySQL Workbench MySQL Workbench to darmowe narzędzie do modelowania baz danych MySQL. Za jego pomocą można zaprojektować i stworzyć schematy (wizualne reprezentacje tabel, widoków itp.) nowych baz danych, wykonać dokumentację istniejących oraz zapewnić wsparcie przy procesach migracji danych do MySQL. Działa ono tak w systemie Windows jak również w systemie Linux. Podczas pracy pojawiają się okazyjnie błędy i program nie zawsze stabilnie pracuje, jednak jest jednym z najlepszych narzędzi tego typu dostępnym w Internecie. Program można pobrać z oficjalnej strony: str. 45

46 Rozdział 4.4 Przeglądarka internetowa Przeglądarka internetowa Każdy posiada własną ulubioną przeglądarkę internetową, z której korzysta i nie będziemy tutaj narzucać z której masz korzystać ty. Przy tworzeniu stron internetowych trzeba jednak pamiętać, że nie każdy korzysta z tej samej przeglądarki co my. Z tego powodu zalecałbym zainstalowanie paru aplikacji tego typu na swoim komputerze. Osobiście u siebie mam zainstalowane najpopularniejsze przeglądarki dla systemu Windows i Linux tj. (nazwa i wersja): Firefox (7.0) Google Chrome ( m) Internet Explorer ( ) Opera (11.51) Czemu jest to takie istotne? Jak powiedzieliśmy we wcześniejszych rozdziałach, strony internetowe nie zawsze wyglądają tak samo w różnych przeglądarkach. Istotne jest to, by zapewnić współpracę z każdą możliwą przeglądarką, by nie okazało się, że część użytkowników nie może w ogóle uruchomić strony. Jako przykład bardzo złego sprawdzenia kompatybilności z przeglądarkami dostępnymi w sieci przytoczę jedną z państwowych (polską) stron dla osób niepełnosprawnych, za pośrednictwem której osoby te dostają pomoc pieniężną. Rejestracja do tego serwisu wymaga poruszania myszką w celu wygenerowania unikalnego numeru identyfikacyjnego użytkownika. Okazuje się jednak, że formularz rejestracyjny nie działa dla przeglądarki Opera, o czym użytkownik nie jest w żadnym miejscu informowany. Tak więc tworząc stronę internetową pamiętajmy, aby w razie problemów z obsługą jakiejś przeglądarki, choćby poinformować użytkownika strony o zaistniałych problemach, a najlepiej tworzyć strony tak, by działały wszędzie! str. 46

47 Poza tym producenci przeglądarek wielokrotnie aktualizują swoje produkty, co działa na korzyść użytkownika, który przegląda strony internetowe, ale nie zawsze jest dobre dla osób je tworzących. Po wyjściu nowej wersji przeglądarki, może się okazać że strona wyświetla się inaczej niż wcześniej, albo (w najgorszym przypadku) część jej zawartości nie wyświetli się w ogóle! Dlatego jako programista stron internetowych powinnaś/powinieneś zapewnić kompatybilność tak ze starymi jak i z nowymi przeglądarkami. Jak tego dokonać? Wystarczy trzymać się standardów tworzenia stron internetowych, gdyż producenci oprogramowania coraz bardziej starają się tworzyć je tak by było ono z nimi zgodne. Podczas wykonywania projektu powyższe aplikacje były wielokrotnie aktualizowane, jednak dzięki tworzeniu strony zgodnie ze standardami, projekt działał i działa nadal. Mam więc nadzieję, że gdy Ty czytelniku przystępując do tworzenia tego projektu według tego, co zostało napisane w dalszych częściach i rozdziałach, również nie będziesz miał problemów. Inną ważną i użyteczną kwestią jest to, by Twoja przeglądarka internetowa posiadała narzędzia deweloperskie pomagające tworzyć i przeglądać wyniki twojej pracy. Coraz częściej przeglądarki mają już wbudowane narzędzia tego typu, jednak nie wszystkie np. Firefox. Dla tej przeglądarki trzeba samemu wybrać i je ściągnąć. Osobiście polecam pobrać i zainstalować następujące dodatki dla tej przeglądarki: Web Developer HTML Validator Pierwszy z nich jest narzędziem ułatwiającym pracę administratorom strony, a drugie automatycznie poddaje walidacji kod HTML strony i wskazuje nam miejsce z błędami i sugeruje sposób jego rozwiązania. Podczas wykonywania tego projektu ze względu na ww. walidator korzystałem właśnie z przeglądarki Firefox, chociaż na co dzień korzystam z innej. str. 47

48 Rozdział 5. Główne cele projektu stworzenia własnego panelu administracyjnego sklepu internetowego Gdy wiemy już jakie są istotne idee, o których należy pamiętać przy realizacji dużych projektów, wybraliśmy technologie i narzędzia pracy, możemy przystąpić do podjęcia decyzji, jakie cele postawimy przed sobą przy tworzenia naszego projektu, jakim jest panel administracyjny dla sklepu internetowego. Jakie funkcjonalności powinien posiadać taki panel? Każdy odpowie na to pytanie inaczej według tego, jak duży sklep internetowy chce zbudować i o jak szerokiej funkcjonalności, ale wszyscy wymienią pewne cechy, które panel powinien mieć, czyli umożliwiać dodawanie i edycję produktów, przechowywać dane o producentach i klientach, umożliwiać składanie zamówień do producentów oraz od klientów, dawać możliwość przypisywania cech do produktów, a tych do pewnych grup. My poszerzymy te funkcjonalności o wyświetlanie takich kolumn w poszczególnych widokach stron, jakich chęć zadeklaruje użytkownik panelu, możliwość zatrudniania pracowników, przechowywanie ich danych i przydzielanie im zadań, stworzenie modułu do zarządzania przywilejami pracowników w ramach pracy z panelem administracyjnym, tworzenie i przywracanie kopii bazy danych, przeglądanie operacji w bazie danych wykonywanych przez użytkowników panelu, generowanie plików PDF z zamówieniami do producentów. Są to główne cele, które zrealizujemy przy tworzeniu naszego projektu. Ale od czego zaczniemy? Poniżej został przedstawiony plan naszych działań (Rys. 1): str. 48

49 Rysunek 1 Plan wykonania projektu Omówmy po krótce powyższe działania: 1. Powiemy, jakie zagadnienia poruszymy przy okazji tworzenia naszego projektu i w których rozdziałach zostaną one omówione. 2. Na początek zainstalujemy i odpowiednio skonfigurujemy wszystkie aplikacje, aby działały one poprawnie oraz by praca z nimi była wygodna. 3. Za pomocą programu MySQL Workbench (omówionego w Rozdziale 4.3) stworzymy projekt bazy danych, w której będziemy przechowywać dane dotyczące naszego sklepu. Poznamy wtedy składnię języka SQL oraz podstawy tworzenia baz danych. 4. Zgodnie z tym, co powiedzieliśmy w Rozdziale 2.1, nie musimy sami tworzyć wszystkich narzędzi od podstaw. W sieci istnieje ogromna ilość skryptów, z których możemy skorzystać oszczędzając czas na tworzeniu własnych, trzeba jednak poświęcić czas na ich znalezienie. W następnej części przedstawimy i omówimy narzędzia, które znalazłem i z których będziemy korzystać przy tworzeniu panelu. 5. Wreszcie zaczniemy tworzyć nasz serwis. Ustalimy strukturę katalogów dla naszego projektu, nazewnictwo i funkcjonalność plików, sposób dzielenia skryptów w plikach według ich zastosowań. Dalej stworzymy pierwszą, prostą stronę WWW w celu zapoznania się z podstawami HTML, a która będzie nam potrzebna do poprawnego działania naszego serwisu. 6. Nie każdy, kto będzie wchodzić na stronę panelu, będzie mógł z niego korzystać. W tym celu musimy zbudować stronę logowania do niego. Na tym etapie omówimy, czym są sesje, oraz pierwszy raz połączymy się z naszą bazą danych. str. 49

50 7. Każdy serwis składający się z podstron powinien posiadać menu, dzięki któremu w szybki sposób można przemieszczać się po nim. Będziemy musieli przemyśleć, jak logicznie rozdzielić funkcjonalność naszego serwisu, by była ona czytelna dla potencjalnego użytkownika. Ponadto przedstawimy zasadę działania panelu administracyjnego. 8. Posiadając dane w bazie chcielibyśmy je przeglądać i przeszukiwać. W tym celu stworzymy formularze do wyszukiwania produktów, zamówień, klientów i wielu więcej. Ponadto utworzymy moduł do wyświetlania tylko tych kolumn, które będziemy chcieli i w takiej kolejności, w jakiej ustalimy. Dodatkowo napiszemy skrypt, który umożliwi nam zaznaczanie wierszy wyszukania, a co wykorzystamy podczas edycji paru danych w jednym momencie. 9. Wreszcie przejdziemy do utworzenia formularzy, z pomocą których będziemy dodawać i edytować dane w bazie danych. Jak zostało powiedziane wcześniej, stworzymy moduł do edycji paru rekordów na raz w sposób rzadko spotykany i oryginalny. 10. Na końcu tworzenia tego projektu napiszemy skrypty, które umożliwią nam m.in. tworzenia i odtwarzanie kopii bazy danych, podgląd operacji wykonanych w bazie danych, generowanie plików PDF dla zamówień do dostawców. Każdy z powyższych kroków zostanie szeroko opisany w następnej części. Numery poszczególnych kroków będą odpowiadać numeracji rozdziałów, by w prosty sposób móc przemieszczać się po tej części pracy. Czeka nas dużo pracy. str. 50

51 Część III Rozdział 1. Wstęp W Części III przejdziemy do praktycznego wykorzystania wiedzy, którą pozyskaliśmy w poprzedniej części i stworzymy własny panel administracyjny dla sklepu internetowego. Podczas wykonywania tego projektu poruszymy takie kwestie jak: Podstawowa konfiguracja serwera WWW (rozdział 2) Podstawy SQL (rozdział 3) Projektowanie i tworzenie internetowej bazy danych (rozdział 3) Normalizacja bazy danych (rozdział 3) Podstawy HTML (rozdział 5) Podstawy PHP (rozdział 6) Stosowanie kontroli sesji (rozdział 6) Bezpieczeństwo stron WWW (rozdział 6) Łączenie się z bazą MySQL za pomocą PHP (rozdział 6) Wykonywanie zapytań SQL (rozdział 6) Uwierzytelnianie przy użyciu PHP i MySQL (rozdział 6) Wysyłanie listów elektronicznych z pomocą PHP (rozdział 6) Opracowanie działania serwisu WWW (rozdział 7) Tworzenie formularzy WWW (rozdział 8) Walidacja danych użytkownika (rozdział 8) Tworzenie zapytań do wyszukiwania danych w bazie MySQL (rozdział 8) Instrukcje SQL umożliwiające modyfikację danych w bazie (rozdział 9) Transakcje SQL (rozdział 9) Tworzenie formularzy do modyfikacji danych (rozdział 9) Bezpieczeństwo bazy danych (rozdział 10) Wyzwalacze w baziach danych SQL (rozdział 10) Tworzenie dokumentów PDF z pomocą PHP i HTML (rozdział 10) Każda z nich zostanie omówiona na przykładzie naszego panelu administracyjnego. str. 51

52 Rozdział 2. Instalacja i konfiguracja narzędzi Przed przystąpieniem do jakiejkolwiek pracy musimy zainstalować narzędzia, z którymi będziemy pracować, a które omówiliśmy w poprzedniej części w Rozdziale 4. Instalacja Notepad++, MySQLWorkbencha oraz przeglądarek internetowych wydaje się nie wymagać komentarza, jednak instalację i konfigurację serwera WAMP oraz ustawienie Notepad++ po krótce omówimy. str. 52

53 Rozdział 2.1 Serwer WAMP Gdy posiadamy już plik instalacyjny serwera WAMP, uruchamiamy go. Pojawia się nam okno instalatora: Wciskamy Next, a następnie zatwierdzamy licencję zgodnie, z którą możemy użytkować program, i ponownie wciskamy Next. str. 53

54 Określamy miejsce na dysku, gdzie ma zostać zainstalowany serwer WAMP. Pozostawiamy domyślną ścieżkę zapisu i klikamy Next. Jeśli chcemy utworzyć skróty na pasku zadań lub/i pulpicie, wybieramy stosowne opcje i wciskamy Next, a dalej Install. W tym momencie nastąpi zainstalowanie serwera WAMP. Podczas instalacji koniecznym może się okazać wskazanie położenia pliku explorer.exe. Znajduje się on w folderze C:\Windows, jak na obrazku: Odnajdujemy plik i wciskamy Otwórz. Następnym krokiem instalacji jest określenie adresu SMTP naszego serwera pocztowego oraz adresu na serwerze, na którym instalujemy str. 54

55 WAMP-a. Jeżeli instalujemy go na komputerze lokalnym, pozostawiamy te opcje bez zmiany. Na koniec wybieramy, czy chcemy uruchomić serwer WAMP po instalacji (domyślnie tak, pozostawiamy), i wciskamy Finish. Gdy serwer WAMP jest uruchomiony w obszarze powiadomień przy zegarze systemowym, pojawia nam się ikona Może mieć ona jeden z trzech kolorów, które oznaczają odpowiednio: Zielony serwer jest uruchomiony i działa poprawnie Pomarańczowy serwer jest uruchamiany Czerwony serwer jest wyłączony lub nie działa poprawnie Wciskając prawym przyciskiem myszy (PPM) na ikonie, możemy wybrać język, w którym będzie komunikować się z nami serwer, przy czym nie wszystkie komunikaty zobaczymy w naszym ojczystym języku, a w angielskim. Tak czy inaczej wybierzmy język polski dla ułatwienia pracy. Jeśli naciśniemy na ikonie pojedynczym kliknięciem lewym przyciskiem myszy (LPM), pojawi się nam menu, w którym będziemy mogli przejść do ustawień serwera. W tym momencie interesuje nas przejście do ustawień serwera MySQL. Moglibyśmy wszystko ustawić z poziomu linii komend, jednak dostępne jest inne, bardzo przystępne, przejrzyste i łatwe w obsłudze narzędzie, phpmyadmin (LPM->phpMyAdmin). PhpMyAdmin jest narzędziem służącym do łatwego zarządzania bazą danych MySQL, napisane w języku PHP. Posiada ono wersję polską, dlatego nawet osoby nie znające języka angielskiego i nie znające się na bazach danych w łatwy sposób mogą zacząć z nimi przygodę. Przy pierwszym uruchomieniu phpmyadmin na dole ekranu zobaczymy komunikat: Twój plik konfiguracyjny zawiera ustawienia (konto roota bez hasła), które odpowiadają domyślnemu uprzywilejowanemu kontu MySQL. Twój serwer MySQL działa z takim str. 55

56 ustawieniem, jest otwarty dla włamywaczy. Ta luka w bezpieczeństwie naprawdę powinna zostać naprawiona. Musimy ustawić hasło dla konta administratora. Jak to zrobić? W górnej części ekranu przejdźmy do zakładki Uprawnienia. Możemy w niej dodawać użytkowników oraz ustalać ich prawa do obsługi poszczególnych baz danych, ich elementów (tabel, procedur, widoków itd.) oraz zakresu dokonywanych na nich operacji (tworzenia, przeglądania, edycji itd.). Chcąc ustawić hasło administratora (ang. root) wciskajmy. Wczytana zostanie strona, na której zostaną wyświetlone wszystkie informacje o użytkowniku. Nas interesuje sekcja Zmień hasło. Ustawmy jakieś hasło i zapamiętajmy je. Wykonajmy tą operację dla obu kont root. Po zmianie hasła i próbie przejścia do strony głównej (link localhost u góry ekranu lub po lewej stronie), może (nie musi) pokazać się nam komunikat: MySQL zwrócił komunikat: # Access denied for user 'root'@'localhost' (using password: NO) phpmyadmin próbował połączyć się z serwerem MySQL, a serwer odrzucił połączenie. Powinieneś sprawdzić nazwę hosta, nazwę użytkownika i hasło w pliku config.inc.php i upewnić się, że odpowiadają one informacjom podanym przez administratora serwera MySQL. Oznacza on, że nie możemy zalogować się jako użytkownik root, gdyż podaliśmy niepoprawne hasło. Jednak opis poniżej błędu daje nam rozwiązanie problemu. W folderze, w którym zainstalowaliśmy serwer WAMP, szukamy pliku config.inc.php i uruchamiamy go. W linijce $cfg['servers'][$i]['password'] zamiast wpisujemy hasło administratora i restartujemy serwer tj. wciskamy LPM na ikonie i Restartuj wszystkie usługi. Po odświeżeniu strony z phpmyadmin zobaczymy, że serwer ponownie działa, a my podstawową konfigurację mamy za sobą. Ostatnim co musimy zrobić jest przekopiowanie folderu panel_administracyjny, lub jego zawartość, do folderu www znajdującego się w lokalizacji, gdzie zainstalowaliśmy serwer WAMP (domyślnie C:\wamp\www). W tym miejscu należy umieszczać wszystkie pliki, które str. 56

57 chcemy uruchomić przy pomocy tego serwera. Aby wywołać je w przeglądarce internetowej, piszemy: localhost/scieżka_do_pliku, gdzie ścieżką do pliku jest lokalizacja pliku względem ww. folderu www np. jeżeli umieścimy w nim folder panel_administracyjny, a wewnątrz niego znajduje się skrypt o nazwie index.php, aby go uruchomić w przeglądarce należy wpisać localhost/panel_administracyjny/index.php str. 57

58 Rozdział 2.2 Notepad++ Ważną sprawą jest odpowiednie ustawienie programu Notepad++. Uruchommy go. Wykonując ten projekt, będziemy starać się, by był on jak najbardziej uniwersalny, niezależnie od tego kto, gdzie, kiedy go użyje, aby zawsze działał. Z tego powodu musimy wybrać uniwersalny sposób kodowania znaków tak, aby strona uruchomiła się bez tzw. krzaków Polakowi i Anglikowi. Wybór padł na UTF-8. UTF-8: system kodowania Unicode, komputerowego zestawu znaków mającemu w zamierzeniu obejmować wszystkie pisma używane na świecie. Przechodząc do Ustawienia -> Preferencje -> Nowy dokument, możemy ustalić, jaki system kodowania będą posiadać nowe pliku. Wybierzmy opcję UTF-8 bez BOM i zaznaczmy Apply to opened ANSI files, która spowoduje uaktualnienie strony kodowania w wcześniej utworzonych plikach typu ANSI do UTF-8. BOM: znacznik kolejności bajtów w wielobajtowym kodowaniu znaków pojawia się problem interpretacji kolejności bajtów w znaku. Każdy znak jest zespołem zer i jedynek o ustalonej kolejności. Źle odczytana kolejność bajtów może spowodować wyświetlenie innego znaku niż zamierzaliśmy. Rozwiązaniem tego problemu jest właśnie BOM. Na początku strumienia bajtów (np. początek pliku) zapisuje się znacznik kolejności bajtów (BOM) informujący, w jakiej kolejności należy ustawić bajty, aby uzyskać kod znaku. W wypadku kodowania UTF-8 BOM nie jest niezbędny, ponieważ kolejność bajtów jest jednoznaczna. Przykładowo Notatnik w niektórych wersjach systemu Windows stara się wykryć kodowanie wielobajtowe. Jednak przy zapisie takiego pliku dodaje znacznik wykrytego kodowania. To z kolei może powodować, że niektóre skrypty (np. PHP) zostaną nieprawidłowo zinterpretowane i przestaną działać poprawnie. W zakładce Kopia/Auto-uzupełnianie w sekcji Auto-uzupełnianie zaznaczmy Włącz autouzupełnianie i opcję Uzupełnianie funkcji oraz Podpowiadanie parametrów funkcji, które w przypadku języków programowania okażą się bardzo przydatne. W Inne warto zaznaczyć Automatyczne wcięcia, jeśli opcja nie jest zaznaczona. str. 58

59 Rozdział 3. Stworzenie projektu bazy danych dla panelu administracyjnego W niniejszym rozdziale skupimy się na zaprojektowaniu i utworzeniu własnej bazy danych dla naszego serwisu. Skupimy się na podstawach tworzenia bazy danych i poruszymy następujące zagadnienia: Planowanie bazy danych Normalizacja bazy danych Wybieranie typów kolumn Zaprojektowanie bazy danych Tworzenie bazy danych Definiowanie użytkowników i przywilejów Tworzenie procedur składowanych Wykonywanie zapytań SQL za pomocą narzędzie phpmyadmin str. 59

60 Rozdział 3.1 Planowanie bazy danych Główną cechą dobrze zaprojektowanej bazy danych jest to, że dobrze odzwierciedla ona świat rzeczywisty pojawiające się w niej problemy, zagadnienia, idee i zależności między nimi. Przystępując do tworzenia jakiejkolwiek bazy danych musimy określić, co takiego chcemy w niej przedstawić, musimy zdefiniować cel w jej kreowaniu. Odpowiedzi na to pytanie udzieliliśmy sobie w Części I mówiąc, komu i czemu ten projekt ma służyć, oraz w Części II określając główne cele i funkcjonalność projektu, które chcemy zrealizować. Jednak ogólne cele i założenia są niewystarczające do stworzenia bazy danych. By stworzyć dobrą bazę danych, potrzebne jest ich szczegółowe określenie. Jest to proces podobny do nauczanego w szkołach określenia danych, funkcji i szukanych, aby rozwiązać zadanie. Poniżej przedstawiono pobieżny zestaw danych, które pojawiają się w naszym projekcie: Encje Państwa Producenci Klienci Pracownicy Produkty Grupy do których należą produkty Cechy które posiadają produkty Jednostki miary ilości produktów Zamówienia do producentów Zamówienia klientów Dane naszej firmy Dane do zarządzania panelem Dane reprezentowane są w bazie danych za pomocą tabel i znajdujących się w nich wierszy. Każda tabela (zgodnie z tym, co powiedzieliśmy w Części II Rozdział 3.3) posiada atrybuty (kolumny). Można powiedzieć, że kolumny charakteryzują nam nasze dane, na przykład każdy produkt posiada swoją nazwę, cenę, producenta itd. Każda z tych cech powinna być reprezentowana przez pojedynczy atrybut tabeli. Istnieją zasady mówiące jak powinno str. 60

61 tworzyć się tabele w relacyjnych bazach danych proces ten nazywamy normalizacją i za chwilę o nim powiemy. Funkcjami są zależności pojawiające się między danymi, na przykład produkt jest wytworzony przez producent X, produkt P należy do grupy G i posiada cechy C, klient K złożył zamówienie Z, a w nim zamówił produkty P itd. Funkcje reprezentowane są w bazie danych przez związki i mogą się pojawiać w typach: Jeden-do-jednego Jeden-do-wielu, wiele-do-jednego Wiele-do-wielu Wszystkie te rodzaje omówiliśmy w Części II Rozdział 3.3. Poniżej przedstawiono przykładowe związki, które pojawią się w naszej bazie danych: Związki Producentowi, klientowi i pracownikowi przypisane jest jakieś jedno państwo Produkt posiada dokładnie jednego producenta Produkt może należeć do paru grup i posiadać kilka cech Na zamówieniu może znaleźć się wiele produktów Pracownik ma jednoznacznie określone prawa do modyfikowania danych we wszystkich widokach Itd. str. 61

62 Rozdział 3.2 Normalizacja bazy danych Normalizacja jest procesem modyfikacji tabel bazy danych polegającym na takim ich przekształceniu, by wszystkie zależności pojawiające się w bazie danych miały sens i nie dochodziło do redundancji danych, pojawiania się nadmiernej i niepotrzebnej ilości. Zaraz dokładnie przestawimy ten proces, wykorzystując odpowiedni przykład. Zanim jednak zaczniemy tworzyć tabelę, dobrze byłoby przypomnieć sobie zasadę z Części II Rozdziału 2.3.d, tj. o dzieleniu kodu. Obowiązuje ona również dla tabel w bazach danych. Ale na razie dla przykładu stwórzmy uproszczoną tabelę ze wszystkimi istotnymi danymi dla produktów. Warto wykonać szkic na papierze albo w aplikacji ułatwiającej tworzenie tabel np. arkusza kalkulacyjnego. Skopiuj informacje przedstawione w poniższej tabeli. nazwaproduktu cenaproduktu vatproduktu nazwagrupy nazwacechy1 nazwacechy2 Komputer Komputery Procesor Karta graficzna Dysk twardy Akcesoria Pojemność Producent Notebook Notebooki Procesor Nadaj tej tabeli nazwę zero, ponieważ nie jest to nawet pierwszy krok, a dane są nieuporządkowane z relacyjnego punktu widzenia. Zauważmy, że istnieje kilka kolumn cechy. Co moglibyśmy zrobić, gdyby produkty miały mieć przypisane trzy i więcej cech? Musielibyśmy utworzyć dodatkową kolumnę, a to na pewno nic dobrego. Zamiast tego powinniśmy zebrać wszystkie kolumny cech w jedną i poszczególne wartości umieścić w kolejnych wierszach, a zawartość pozostałych kolumn zostałaby powielona (komputer i dysk twardy pojawią się więc po dwa razy, a notebook jeden raz), a dane pozostałyby identyczne. Ponadto każda komórka będzie posiadała w sobie niepodzielną wartość, czyli taką, której bardziej nie da się rozdzielić. Podajmy inny przykład obrazujący ten problem. Jeśli wiemy, że w czasie operowania na bazie zawsze będziemy potrzebowali całego adresu, to pole adres możemy uznać za atomowe. Jeśli jednak str. 62

63 dopuszczamy możliwość, że będziemy potrzebowali tylko samej miejscowości, to wtedy pole adres należy rozbić na np. pola: ulica, miejscowość, kod pocztowy. Przedstawiona zasada nosi nazwę atomowości. Każda warstwa (komórka) jest atomowa, czyli zawiera tylko jedną, konkretną, niepodzielną informację. Do każdego wiersza w tabeli powinniśmy przypisać unikatowy klucz tzw. klucz podstawowy (główny), taki który jednoznacznie by go określał w tabeli. Moglibyśmy użyć nazwy produktu, ale powinniśmy pamiętać o tym, że klucz główny nie powinien być czymś, co może się zmienić lub powtórzyć, i musi być unikatowy. Z tego powodu dodamy do tabeli nową kolumnę idproduktu.klucz główny oznaczymy gwiazdką (*). Na dany moment tabela powinna wyglądać następująco : Id(*) nazwaproduktu cenaproduktu vatproduktu nazwagrupy nazwacechy 1 Komputer Komputery Procesor 1 Komputer Komputery Karta graficzna 2 Dysk twardy Akcesoria Pojemność 2 Dysk twardy Akcesoria Producent 3 Notebook Notebooki Procesor Nadajmy jej nazwę jeden, gdyż stanowi ona pierwszy krok normalizacji. Wygląda ona nieco lepiej, ale pojawiła nam się redundancja danych. To kolumny grupy i cechy powodują powielenie danych. Oddzielmy więc obie te kolumny od tabeli i stwórzmy nowe tabele dla cech i grup oraz powiążmy je z oryginalną tabelą kluczami obcymi (Część II Rozdział 3.3.a). Dodatkowo normalizujemy tabele grup i cech, aby pozbyć się z nich duplikatów. Jest to podejście numer dwa. Przyjrzyjmy się dokładniej przedstawionym poniżej tabelom: str. 63

64 Id(*) nazwaproduktu cenaproduktu vatproduktu 1 Komputer Dysk twardy Notebook Id(*) nazwagrupy 1 Komputery 2 Akcesoria 3 Notebooki Id(*) nazwacechy 1 Procesor 2 Karta graficzna 3 Pojemność 4 Producent Id(*) idproduktu idgrupy str. 64

65 Id(*) idproduktu idcechy Nietrudno zauważyć, że dane powtarzają się teraz w znacznie mniejszym stopniu niż wcześniej. Grupy i cechy zostały odseparowane i powstały dodatkowe tabele łączące je z poszczególnymi produktami. Dodajmy teraz do tabeli produktów nowe kolumny nazwę i adres producenta. Okazuje się, że jeśli dotychczasowa budowa tabeli była zgodna z drugą zasadą normalizacji i stwierdzimy, że potrzebne są nam dodatkowe dane, ich dodanie nie sprawia większych problemów. Tak naprawdę moglibyśmy dodać całkiem nową tabelę, jeśli to konieczne, ale na potrzeby tego przykładu musimy utworzyć nową kolumnę. Pole adres zależy jedynie od producenta, ponieważ trudno sobie wyobrazić sytuacje, w której adres producenta zmieniałby się w zależności od zmian produktu. Natomiast pole cena zależy od wybranego producenta i produktu. Powyżej omówiona tabela powinna być podzielona na dwie tabele wprowadzając klucz obcy do pierwszej tabeli. Tym samym ostatecznie uzyskamy następujące tabele produktów i producentów: Id(*) idproducenta nazwaproduktu cenaproduktu vatproduktu 1 1 Komputer Dysk twardy Notebook str. 65

66 Id(*) nazwaproducenta adresproducenta 1 Producent 1 Adres 1 2 Producent 2 Adres 2 Jest to krok trzeci i mówi on, że tabela jest w trzeciej postaci normalnej tylko wtedy gdy jest w drugiej postaci normalnej i każdy atrybut jest tylko bezpośrednio zależny od klucza głównego. Istnieją dalsze kroki normalizacji tabel, jednak w większości baz danych wystarcza trzecia postać normalna, dlatego pozostaniemy przy omówieniu tylko ich. str. 66

67 Rozdział 3.3 Wybieranie typów kolumn Tworząc tabele, należy każdej jej kolumnie przypisać odpowiedni typ danych. Popularnymi typami danych w MySQL są (Tabela 2): Tabela 2 Tabela z popularnymi typami danych[11] Typ Rozmiar Opis CHAR[Długość] [Długość] bajtów Pole o stałej długości, przechowuje od 0 do 255 znaków VARCHAR[Długość] TEXT Długość łańcucha + 1 bajt Długość łańcucha + 2 bajty Pole tekstowe o zmiennej długości Łańcuch o maksymalnej długości znaków TINYINT[Długość] 1 bajt Liczby z zakresu od -128 do 127 lub liczby dodatnie od 0 do 255 INT[Długość] 4 bajty Liczby z zakresu od do lub liczby dodatnie od 0 do FLOAT 4 bajty Mała liczba rzeczywista, zmiennoprzecinkowa DOUBLE[Długość, dokładność] 8 bajtów Duża liczba rzeczywista, zmiennoprzecinkowa DECIMAL[Długość, dokładność] Długość + 1 lub Długość + 2 bajtów Liczba typu DOUBLE przechowywana w postaci łańcucha co pozwala na zastosowanie stałej liczby miejsc po przecinku DATE 3 bajty Data w formacie YYYY-MM-DD DATETIME 8 bajtów Data w formacie YYYY-MM-DD HH:MM:SS TIMESTAMP 4 bajty Data w formacie YYYYMMDDHHMMSS; dopuszczalny zakres kończy się na rok 2037 TIME 3 bajty Data w formacie HH:MM:SS str. 67

68 Dodatkowo w definicji typu kolumn w MySQL mogą pojawić się następujące atrybuty (Tabela 3): Tabela 3Atrybuty kolumn w MySQL Atrybut PRIMARY KEY CONSTRAINT UNIQUE INDEX NULL NOT NULL DEFAULT COMMENT AUTO_INCREMENT UNSIGNED CHARSET Opis Dana kolumna będzie kolumną, na której tworzony jest klucz główny Kolumna zawiera klucz obcy do innej tabeli, kolumna musi być tego samego typu jak typ klucza obcego Dla kolumny utworzony będzie indeks, który zapobiegnie pojawieniu się dwóch tych samych wartości dla danej kolumny/danych kolumn Dla kolumny zostanie utworzony indeks, który przyspieszy odczytywanie wartości z tej kolumny Istnieje możliwość wstawienia pustej wartości do tej kolumnu Nie ma możliwości pozostawienia tej kolumny bez żadnej wartości Po tym atrybucie należy podać domyślną wartość, która będzie wpisywana do kolumny jeżeli nie zostanie wpisana żadna wartość podczas aktualizacji lub dodawania danych Komentarz do kolumny Kolumna będzie automatycznie numerowana, tylko dla kolumn o typie liczbowym Wartości w tej kolumnie muszą być większe od zera, tylko dla kolumn liczbowych Po tym atrybucie należy podać typ kodowania, zgodnie z którym ciągi znaków będą porównywane, tylko dla typów znakowych str. 68

69 Rozważmy poniższy przykład: Nazwa tabeli Klienci KOLUMNY Nazwa idklienta nazwisko adres miejscowość wiek sredniapensja Typ danych UNSIGNED INT NOT NULL AUTO_INCRENEMT PRIMARY KEY VARCHAR(50) NOT NULL CHAR(100) NULL DEFAULT bd CHAR(30) NOT NULL INT DECIMAL (6,2) NULL Według schematu tabela Klienci składa się z czterech kolumn. Pierwsza z nich, idklienta, jest kluczem podstawowym o wartościach typu liczb całkowitych. Co więcej przechowuje ono liczby nieujemne i jest automatycznie numerowany. Atrybut NOT NULL nie jest konieczny w deklaracji kolumny, gdyż PRIMARY KEY przydziela go automatycznie. Pozostałe kolumny przechowują wartości typu tekstowego. Nazwisko może przechować maksymalnie 50 znaków, ale zajmuje w pamięci tyle bajtów z ilu liter składać będzie się nazwisko. Ponownie jest to pole wymagane. Podanie adresu w polu adres nie jest obowiązkowe, ale w przypadku nie podania jej w kolumnie zostanie wpisana wartość bd. Dodatkowo pole to może składać się maksymalnie ze 100 znaków i dokładnie tyle bajtów pamięci zawsze ono zajmuje, niezależnie ile znaków użytkownik w nim zapisze. Pole miejscowość jest polem o długości 30 znaków, które jest wymagane do wpisania. Następna kolumna przechowuje informacje o wieku klienta i jest nieobowiązkowa, ponieważ nie zadeklarowano dla niej atrybutu NOT NULL. Ostatnie pole jest polem typu zmiennoprzecinkowego o długości sześciu cyfr plus dwóch po przecinku. Wybierając typy dla naszych danych powinniśmy wziąć pod uwagę kilka kwestii: str. 69

70 czy określona przeze mnie maksymalna długość tekstu nie jest za krótka (char, varchar); czy z góry chcę wiedzieć, ile znaków znajduje się w kolumnie (char/varchar); czy liczba lat jest wystarczającą mi daną (int czy może jednak date, w celu określenia dokładnej daty urodzenia); czy dane z danej kolumny są mi naprawdę potrzebne (null/not null); z jaką dokładnością potrzebuję znać wartości (decimal, double); czy jeśli użytkownik nie podał danych, mogę przyjąć jakąś wartość domyślną (default) itd. W przypadku ciągów znakowych warto zwiększyć maksymalną długości napisu. Dla ciągów bardzo długich, np. notatek i opisów, dobrym pomysłem będzie zastosowanie pola typu TEXT. Należy zastanowić się, czy potrzebujemy dokładnego określenia czasu wraz z sekundami, minutami, czy wystarczy nam tylko data (dzień, miesiąc, rok). Wybór odpowiednich typów dla kolumn nie zawsze jest sprawą prostą. Czasami początkowa decyzja może okazać się nietrafiona i niestety nie ma innej możliwości jak utworzyć bazę od początku ze względu na niespójności danych w bazie, ale są to ekstremalne sytuacje i pojawiają się przede wszystkim w momentach, gdy jako klucz główny określiliśmy ciąg znaków, dlatego tak ważnym jest raczej unikanie tego. str. 70

71 Rozdział 3.4 Zaprojektowanie bazy danych Posiadając podstawową wiedzę o tworzeniu baz danych możemy przystąpić do tworzenia własnej. W Internecie znajdziemy wiele programów wspomagających nas przy tej operacji poprzez użycie trybu graficznego i automatycznej walidacji naszego projektu. My w tym celu użyjemy, omówionego w Części II Rozdział 4.3, narzędzia MySQL Workbench. Uruchommy program. Pokaże nam się mniej więcej taki obraz (Rysunek 2): Rysunek 2 Zrzut ekranu z programu MySQL Workbench Z poziomu Workbench a możemy wykonywać zapytania w bazie danych, administrować bazami jak również tworzyć ich modele. W celu wykonania tej ostatniej operacji i utworzenia nowego modelu bazy danych kliknijmy na zaznaczony na obrazku napis Create New EER Model. str. 71

72 Rysunek 3 Interfejs MySQL Workbench cz. 1 Opiszmy krótko interfejs tego programu (Rysunek 3). 1. Tu znajdują się opisy elementów, które zaznaczymy w obszarze Możliwe do wykorzystania typu kolumn, które omówiliśmy również w poprzednim rozdziale 3. Ten obszar interesuje nas najbardziej. Tutaj zapisane będą nasze projekty baz danych, które utworzymy w tym narzędziu. 4. W obszarze 4. znajdą się wszystkie elementy (tabele, widoki, procedury, użytkownicy, itd.), które utworzymy za pomocą MySQL Workbench w danym projekcie. Przed przystąpieniem do tworzenia nowego projektu warto zrobić coś, czego sam dowiedziałem się dopiero po jego wykonaniu. Wejdźmy do opcji Model, a następnie Model Options. Pojawi nam się okno, w którym po odznaczeniu opcji Use Global Settings, będziemy mogli ustawić podstawowe parametry, zgodnie z którymi nazywane będą klucze główne, kolumny, klucze obce oraz jaki typ danych będzie domyślnym dla kolumn. W tym miejscu zdefiniujemy konwencję nazewnictwa, zgodnie z którymi wykonamy nasz projekt bazy danych. Jakie niesie ona za sobą korzyści, omówiliśmy w Części II Rozdział 2.3.a. str. 72

73 Jako główny język, z pomocą którego będziemy tworzyć nazwy w naszej bazie danych, wybierzemy język angielski (jeśli ktoś nie zna angielskiego, niech się nie martwi, w dalszej części tekstu nazwy kolumn zostaną przetłumaczone oraz zostanie powiedziane, jakie dane będą w nich przechowywane). Tabele podzielimy na regiony funkcjonalne tj. tabele związane z produktami będą się znajdowały koło siebie, podobnie jak tabele z zamówieniami. Nazwy tabel powiązanych funkcjonalnie będą zaczynały się od tych samych liter, np. tabele związane z produktami zaczną się od litery P (od angielskiego słowa products produkty), klientami C (clients klienci), producentami S (suppliers dostawcy) itd. Dalsza część nazwy tabeli będzie sugerować jej przeznaczenie, np. PD product data (podstawowe) dane produktu, CD client data (podstawowe) dane klienta, SC suppliercontact dane kontaktowe itd. Wreszcie nazwy kolumn w tabelach będą pochodziły od nazwy tabeli, plus nazwy sugerującej rodzaj danych w niej zawartych, na przykład WDName imię pracownika, PayDName nazwa rodzaju dostawy, SOSumNetto wartość sumy netto zamówienia do producenta itd. Nazwy kolumn przechowujących klucze obce wyglądają następująco: nazwa_tabeli_w_ktorej_tworzymy_klucz + nazwa_kolumny_do_ktorej_odnosi_sie_klucz_obcy, np. tworząc klucz obcy w tabeli SC, a odnoszący się do kolumylcid w tabeli LC, kolumnę nazwiemy SCLCId. Takie nadawanie nazw ma parę znaczących zalet poza omówionymi zaletami wynikającymi z przyjęcia jakiegokolwiek standardu nazewnictwa: Pierwsze litery tabel od razu sugerują, z jakiego typu danymi mamy do czynienia. Pozostałe litery nazwy tabeli również łatwo skojarzyć po ich funkcjonalności. Długość nazw tabel jest krótka, czyli stosunkowo łatwa do zapamiętania i utrzymana w sposób logiczny. Nazwy kolumn również sugerują ich funkcjonalność. Nazywanie kolumn z kluczami obcymi w podanym sposobie sugeruje z jaką tabelą występuje związek danych. Wciśnijmy teraz przycisk Add Diagram i omówmy, jak tworzy się diagramy w tym narzędziu (Rysunek 4): str. 73

74 Rysunek 4 Interfejs MySQL Workbench cz Podgląd naszego projektu. 2. Wszystkie elementy umieszczone na diagramie. 3. Opis nadany przez nas do aktualnie aktywnego elementu zaznaczonego w Usuwanie zaznaczonego elementu z diagramu. 5. Dodawanie elementów takich jak warstwy, komentarze, rysunki ułatwiające czytelność diagramu. 6. Tworzenie nowych elementów na diagramie (nas będzie interesować tylko tworzenie tabel). 7. Tworzenie związków między tabelami w oparciu o nieistniejące jeszcze kolumny. Wybierając którąkolwiek z opcji wpierw klikamy na tabelę, w której ma być utworzona nowa kolumna, a następnie na tabelę, do której będzie odnosić się nowy klucz obcy. 8. Tworzenie związków w oparciu o istniejące kolumny. Pierwszego kliknięcia musimy dokonać w kolumnie, w której ma być utworzony klucz obcy, drugie zaś na kolumnie do której będzie się on odwoływał. Po utworzeniu nowej tabeli u dołu ekranu pojawi nam się okno, w którym możemy zmieniać ustawienia tabeli. Pierwsza zakładka Table służy do zmiany nazwy tabeli i dodawania komentarza (niepotrzebnych nam opcji nie będziemy omawiać), Columns tutaj tworzymy i str. 74

75 modyfikujemy nazwy kolumn w tabeli, Indexes określamy indeksy dla tabeli (przykłady indeksów zostały podane przy omawianiu atrybutów kolumn w Rozdziale 3.3). Nie będziemy omawiać tutaj całego procesu tworzenia projektu bazy danych. Zamiast tego przedstawimy ostateczny wynik tego działania. Przeznaczenie tabel i ich kolumn zostało wytłumaczone w Załączniku numer 1. Rysunek 5 Model bazy danych Powiększony obraz Rysunku 5 znajduje się w pliku model_bazy_danych.png na dołączonej płycie i został on wygenerowany na podstawie pliku baza_danych.mwb również znajdującego się na płycie. str. 75

76 Rozdział 3.5 Tworzenie bazy danych Utworzyliśmy już projekt bazy danych. Jak go teraz wykorzystać i stworzyć bazę danych? By wygenerować plik z kodem to umożliwiającym, wejdźmy w menu MySQL Workbench: File -> Export ->ForwardEngineer SQL CREATE Script W tym miejscu możemy wybrać, co i w jaki sposób ma zostać wygenerowane w skrypcie tworzącym bazę danych. Pozostawmy zaznaczone opcje: Generate DROP StatementsBeforeEach CREATE Statement Generate DROP SCHEMA GenerateSeparate CREATE INDEX Statements oraz na następnej stronie Export MySQLTable Objects Zapiszmy tak wygenerowany skrypt na dysk. Musimy go jednak nieznacznie zmodyfikować, by poprawnie wyświetlał on polskie litery. Pomiędzy linijki DROP SCHEMA IF EXISTS baza_danych_firmy; CREATE SCHEMA IF NOT EXISTS baza_danych_firmy; Musimy dopisać instrukcję: SET NAMES 'utf8'; A za instrukcją CREATE SCHEMA dodać: ALTER DATABASE baza_danych_firmy DEFAULT CHARACTER SET utf8 COLLATE utf8_polish_ci; Obie instrukcje służą do zmiany strony kodowania bazy danych i sposobu porównywania znaków (aktualna wersja tego skryptu znajduje się w pliku 1. Utworzenie bazy\ createdb.sqlna płycie). Gdybyśmy jednak chcieli dodawać dane z poziomu kodu SQL, przejrzyjmy wybrane fragmenty tego skryptu i powiedzmy, do czego służą: str. 76

77 DROP SCHEMA nazwa_bazy_danych np. DROP SCHEMA IF EXISTS `baza_danych_firmy` - instrukcja ta służy do usuwania bazy danych, klauzula IF EXISTS usuwa bazę danych o podanej nazwie, jeżeli istnieje ona w bazie danych CREATE SCHEMA nazwa_bazy_danych np. CREATE SCHEMA IF NOT EXISTS `baza_danych_firmy` - instrukcja ta służy do utworzenia bazy danych, klauzula IF NOT EXISTS sprawia, że wykona się ona tylko, jeżeli baza danych o podanej nazwie nie istnieje CREATE TABLE nazwa_tabeli(nazwa_kolumny typ_kolumny dodatkowe_atrybuty ) np. CREATE TABLE IF NOT EXISTS `baza_danych_firmy`.`lc` ( `LCId` INT UNSIGNED NOT NULL AUTO_INCREMENT, `LCName` VARCHAR(45) NOT NULL, `LCOn` TINYINT(1) NOT NULL DEFAULT 1, PRIMARY KEY (`LCId`) ) instrukcja ta służy do utworzenia tabeli o podanej nazwie i kolumnach CREATE UNIQUE INDEX nazwa_indeksu ON nazwa_tabeli (nazwa_kolumny_z_tej_tabeli rodzaj_sortowania) np. CREATE UNIQUE INDEX `LCName_UNIQUE` ON `baza_danych_firmy`.`lc` (`LCName` ASC) instrukcja ta tworzy unikalny indeks w tabeli o podanej nazwie dla kolumny w podanej tabeli w porządku rosnącym (ASC) lub malejącym (DESC) Baza danych nie miałaby sensu bytu, gdyby nie zawierała w sobie żadnych danych. Przykładowe dane do naszej bazy znajdują się w pliku 2. Przykładowe dane\example.sql na płycie wraz z plikami XLS, z pomocą których sami możemy w szybki i łatwy sposób dodać własne przykładowe dane. Wystarczy tylko dodać nowe dane, skopiować zawartość ostatniej str. 77

78 wygenerowanej kolumny i w następnej kolumnie wkleić ją jako wartość. Tak otrzymany tekst trzeba skopiować do pliku example.sql. Jaka jest składnia zapytania SQL, by dodawać dane do bazy? Najbardziej ogólna instrukcja wygląda następująco: INSERT INTO nazwa_tabeli VALUES(wartość_kolumny1, wartość_kolumy2, ) np. INSERT INTO LC VALUES (null, Uganda ) Dodając dane do tabeli należy pamiętać o kilku kwestiach, tj.: liczba kolumn w instrukcji musi zgadzać się z ilością kolumn w tabeli; typy danych w poszczególnych kolumnach muszą zgadzać się z kolumnami kolejnych kolumn w tabeli; dane typu tekstowego i czasu/daty należy umieszczać w cudzysłowach; w przeciwieństwie do systemu stosowanemu w Polsce, liczby dziesiętne w bazie MySQL zapisujemy z kropką, nie z przecinkiem!; jeżeli chcemy wstawić wartość pustą do kolumny piszemy null, bez cudzysłowów; jeżeli wpiszemy wartość null w polu autonumerowanym, zostanie ona automatycznie zastąpiona następną możliwą do wpisania liczbą, np. jeśli w tabeli znajdowały się 4 wiersze, dodając następny nie musimy wpisywać 5 a null, gdyż system automatycznie wpisze 5 w tej kolumnie. str. 78

79 Rozdział 3.6 Definiowanie użytkowników i przywilejów Na razie w naszej bazie mamy zdefiniowanych dwóch użytkowników root, ale chcielibyśmy mieć więcej użytkowników w naszej bazie. Po co ich tworzyć? Nie wszyscy użytkownicy powinni mieć dostęp do wszystkich uprawnień do modyfikowania bazy danych, a którą to możliwość posiada użytkownik root, będący administratorem bazy danych. Jednak przy dużej ilości potencjalnych użytkowników bazy danych pojawia się problem, związany z jej rozrostem, gdyż każdy zalogowany użytkownik zajmuje zasoby bazy danych i miejsce w pamięci w celu przechowywania informacji o nim. Istnieje sposób na poradzenie sobie z tym problem, a który wykorzystamy w naszej bazie. Zamiast tworzyć fizycznie nowych użytkowników w bazie danych, utworzymy jednego, a na podstawie stworzonej przez nas tabeli WD określimy jakie osoby mają prawo korzystać z naszego panelu administracyjnego. Aby stworzyć dodatkowych użytkowników musimy użyć następującej instrukcji: CREATE USER nazwa_uzytkownika@domena_serwera IDENTIFIED BY haslo_uzytkownika np. CREATE USER 'test'@'localhost' IDENTIFIED BY 'qcykdvmvnz8vxkre'; Niestety tak utworzony użytkownik jest goły gdyż nie posiada żadnych praw w naszej bazie. Musimy przydzielić mu pewne przywileje do przeglądania bazy danych, w tym do przeglądania tabeli WD w celu określenia czy ma prawo korzystać z tego panelu. Na czym polega ten proces i dlaczego go stosujemy, napiszemy w rozdziale Bezpieczeństwo stron WWW w Rozdziale 6. Aby przydzielić możliwość odczytywania zawartości tabeli WD, użytkownikowi musimy użyć instrukcji: GRANT SELECT (`WDPass`) ON `baza_danych_firmy`.`wd` TO 'test'@'localhost' instrukcja GRANT przydziela przywileje użytkownikowi, więcej o instrukcji GRANT na stronie: str. 79

80 Użytkownikowi test musimy przydzielić jeszcze dodatkowe przywileje oraz musimy utworzyć dodatkowego użytkownika root_test, który będzie miał możliwość edycji danych w całej bazie baza_danych_firmy, a do którego zostaną podłączone wszystkie osoby zalogowane do naszego panelu (aktualna wersja tego skryptu znajduje się w pliku 1. Utworzenie bazy\ createdb.sql na płycie). str. 80

81 Rozdział 3.7 Tworzenie procedur składowanych Procedura składowana jest rodzajem funkcji, która jest umiejscowiony bezpośrednio w systemie bazy danych, a nie po stronie klienta. Pozwala to na zmniejszenie liczby kroków wymiany danych pomiędzy klientem a systemem zarządzania bazą danych, co może przyczynić się do wzrostu wydajności systemu. Zastosowanie procedur składowanych pozwala również wprowadzić bardziej przejrzysty interfejs pomiędzy bazą danych a aplikacjami z niej korzystającymi. Za ich pomocą można wykonywać wszystkie możliwe operacje w bazie danych, jak na przykład wyszukiwanie rekordów, modyfikacji, obliczeń itd. Na potrzeby tego projektu utworzymy dwie takie procedury. W systemie MySQL przed deklaracją nowej procedury musimy zmienić znak zakończenia instrukcji. Domyślnie jest nim średnik (;). Zmiany tej dokonujemy za pomocą instrukcji DELIMITER znak_konca_instrukcji np. DELIMITER ; ; Następnie by utworzyć procedurę składowaną, piszemy: CREATE PROCEDURE nazwa_procedury (parametry_wejścia_i_wyjścia) BEGIN (deklaracja co ma wykonać procedura) END ; ; np. CREATE PROCEDURE baza_danych_firmy.userprivs ( IN UserID INT ) BEGIN SELECT AV.AVId as ID, AV.AVPage as Page, AV.AVName as Name, AV.AVNote as Note, AP.APSelect as Select, AP.APInsert as Insert, AP.APAlter as Alter FROM AP INNER JOIN AV ON AP.APAVId = AV.AVIdWHERE AP.APWDId = UserID; END ; ; Na końcu ponownie musimy zmienić wcześniej zadeklarowany znak końca instrukcji na domyślny instrukcją: str. 81

82 DELIMITER ; Powyższa procedura pobiera z bazy danych przywileje przypisane użytkownikowi o podanym numerze UserId, który jest parametrem wejściowym. Więcej o wyszukiwaniu danych w bazie danych dowiemy się w rozdziale Łączenie się z bazą MySQL za pomocą PHP w Rozdziale 6. Ponadto w pliku znajduje się jeszcze jedna procedura odpowiedzialna za pobranie parametrów widoków zalogowanego użytkownika (aktualna wersja tego skryptu znajduje się w pliku 1. Utworzenie bazy\ createdb.sqlna płycie). Więcej o procedurach składowanych dowiecie się na stronie: str. 82

83 Rozdział 3.8 Wykonywanie zapytań SQL za pomocą narzędzia phpmyadmin Posiadamy już skrypty odpowiedzialne za tworzenie naszej bazy danych oraz przykładowe dane dla niej. Jak je wykorzystać? Uruchommy narzędzie phpmyadmin. U góry ekranu znajduje się zakładka SQL, kliknijmy na nią. W polu tekstowym, które się pojawiło, możemy wpisywać zapytania SQL. Włączmy pliki createdb.sql oraz example.sql, skopiujmy ich zawartość w tej kolejności, wklejmy skrypty w pole Uruchom zapytanie/zapytania SQL na serwerze i wciśnijmy Wykonaj. Po chwili, jeśli zapytanie wykona się poprawnie, zobaczymy komunikat o jego pozytywnym wykonaniu. W innym wypadku pojawi się informacja o błędzie z wyjaśnieniem, na czym on polega. W razie wystąpienia błędów warto skorzystać z dokumentacji MySQL, która w jasny sposób informuje na czym polega błąd o zadanym numerze, albo poszukiwać rozwiązania problemu w sieci na forach internetowych. Po wykonaniu obu powyższych skryptów oraz czynności omówionych w Rozdziale 2, możemy zalogować się do naszego panelu administracyjnego, używając jednego z dwóch loginów: Login: root, hasło: root Login: chrismal, hasło: chrismal i rozpocząć testowanie gotowego narzędzia. str. 83

84 Rozdział 4. Wybór narzędzi pomocnych przy tworzeniu panelu administracyjnego Jeżeli istnieje kod, który niezależnie od tego, czy pochodzi on z sieci i jest dostępny na licencji open source, czy sami go kiedyś stworzyliśmy, dobrze byłoby spróbować wykorzystać go w aktualnie wykonywanym projekcie, w razie potrzeby dokonując odpowiednich zmian. Jako że panel administracyjny był moim pierwszym projektem, nie posiadałem własnej biblioteki ani kodów źródłowych. Z tego powodu byłem zmuszony albo stworzyć je od podstaw, albo przeszukać sieć internetową. Jeśli nie znamy się na jakimś zagadnieniu koniecznym do realizacji strony internetowej, a nie posiadamy w zespole osoby, która może nam pomóc albo zrobić to sama, i jesteśmy zdani na siebie, warto poszperać w Internecie i poszukać przykładowych implementacji tego problemu. Dla mnie były to tworzenie szablonów CSS i szaty graficznej. Ponadto w sieci istnieje wiele dobrze działających walidatorów danych, sprawdzających czy podane przez użytkownika dane są poprawne np. adres , czy podany ciąg znaków jest liczbą, czy data początkowa jest wcześniejsza niż końcowa itd. Kolejnym dręczącym mnie problemem było stworzenie/znalezienie narzędzia, za pomocą którego użytkownik mógłby zaznaczać opcje w drzewie na wzór drzewa folderów. Potrzebna była mi również klasa umożliwiająca wysyłanie listów elektronicznych, która byłaby prosta w konfiguracji i łatwa w użyciu. Ostatnim narzędziem, które pragnąłem zaimplementować, był system wyświetlania podpowiedzi dla użytkownika w postaci małych okienek, pojawiających się po najechaniu na tekst bądź obrazek kursorem. Niestety tego ostatniego problemu nie udało mi się zrealizować ze względu na ograniczenia czasowe, jednak zachowałem kod tzw. tooltip ów na przyszłość. Wszystkie skrypty i narzędzia wraz z przykładami i dokumentacją znajdują się w folderze 3. Dodatkowe narzędzia na płycie. Omówmy je po krótce: str. 84

85 INADMIN Panel Adres WWW: Opis: W sieci istnieje wiele darmowych szablonów paneli administracyjnych. W momencie gdy zaczynałem tworzyć własny projekt, INADMIN panel był jednym z najlepszych z nich pozostając darmowym i nie narzucając żadnych ograniczeń do wykorzystania komercyjnego, co było często spotykane w konkurencyjnych produktach. INADMIN Panel posiada następujące cechy: posiada już zbudowany panel logowania, listy menu z możliwością zdefiniowania do trzech poziomów zagłębień, używa biblioteki jquery (jednej z najlepszych bibliotek dla JavaScript), ładne czcionki jak i cały wygląd panelu, funkcjonalne i intuicyjne w działaniu menu boczne, estetyczny system okien powiadomień, wbudowany zegar. Dokonane zmiany: Za pomocą programu MS Paint oraz IrfanView zmieniono kolor szaty graficznej. Dodano nowy typ przycisków o kolorze żółtym. Utworzono nowe przyciski prezentujące strzałkę w górę i w dół na potrzeby sortowania danych. Dodano nowe selektory w pliku style.css np..center_content_f, który określa wygląd zawartości formularzy modyfikacji danych. str. 85

86 Brak zdjęcia CSS Step Menu Adres WWW: Opis: CSS Step Menu jest narzędziem ułatwiającym tworzenie menu, które *trzeba wykonać krok po kroku. Będzie nam ono potrzebne przy modyfikacji danych produktów, dla których formularz edycji jest bardzo rozbudowany i nie znaleziono innego sposobu niż zastosowane. CSS Step Menu posiada następujące cechy: umożliwia nadanie jednego z czterech stanów dla kroków: o nie odwiedzony o aktualny o poprzedni o wykonany daje możliwość stworzenia menu o ilości kroków od dwóch do pięciu, istnieje prosta możliwość edycji szaty graficznej. Dokonane zmiany: Za pomocą programu MS Paint oraz IrfanView zmieniono kolor szaty graficznej. Zmieniono rozszerzenia plików z gif na jpg, powiększając w ten sposób rozmiar plików, ale również ich jakość. Zmodyfikowano szerokość kolumn dla menu o krokach w ilości pięciu (nasz przypadek), tak by menu mieściło się na stronie formularza. str. 86

87 Brak zdjęcia JQTransform Adres WWW: Opis: Jest to narzędzie zmieniające nudne formularze WWW w dużo ładniejsze i ciekawsze. Wykorzystuje ono JavaScript i bibliotekę JQuery do zmiany wyglądu elementów formularza. Oznacza to jednak, że jeżeli użytkownik wyłączy JavaScript w swojej przeglądarce, to pojawi się u niego zwyczajny formularz. Należy tym samym zadbać, aby szata graficzna w takim przypadku nadal pozostawała spójna, ładna i czytelna czego starałem się dokonać. Dokonane zmiany: Zmieniono całą szatę graficzną na używaną domyślnie w INADMIN, pozostawiając kod w nienaruszonym stanie był to zabieg czysto kosmetyczny, gdyż szata graficzna JQTransform nie do końca pasowała do tej zastosowanej w INADMIN Czemu więc użyto JQT? Ze względu na problemy z formularzami w INADMIN, a przede wszystkim przyciskami wielokrotnego wyboru (tzw. checkbox), które nachodziły na siebie wzajemnie. str. 87

88 Dynatree Adres WWW: Opis: Jak powiedzieliśmy wcześniej, potrzebowałem narzędzia, które będzie umożliwiało tworzenie struktury drzewiastej na kształt drzewa folderów. Ponadto musiało ono posiadać możliwość zaznaczania jej węzłów czasem jednego, innym razem wielu. Znalezienie takiego narzędzie nie jest stosunkowo trudne, jednak ogrom z nich jest płatny i kosztuje niemałe pieniądze. Jednak okazało się, że istnieje również darmowa implementacja Dynatree. Jak ono działa i jak łatwo można tworzyć własne struktury drzewiaste z pomocą tego skryptu, możecie przekonać się na oficjalnej stronie projektu. Dokonane zmiany: Utworzono nową funkcję getlistofselectednode w pliku jquery.dynatree.js w katalogu src. Zwraca ona listę zaznaczonych węzłów wymienionych po przecinku str. 88

89 Brak zdjęcia JavaScript Form Validation Adres WWW: Opis: Walidacja danych jest istotną kwestią podczas tworzenia formularzy. Internet pełen jest przykładowych skryptów oraz zaawansowanych narzędzi ułatwiających ten proces. Zdecydowałem się na to narzędzie ze względu na prostotę jego implementacji, szeroką ilość funkcji, z pomocą których dokonuje się sprawdzenia danych, możliwość dodawania własnych funkcji. Dokonane zmiany: Utworzono nową metodę walidacji danych o nazwie dgtelmnt porównywanie dat w polach tekstowych. Służy ona do porównania dwóch dat zwartych w polach tekstowych, ich porównanie, sprawdzenie czy data początkowa (pierwsze pole tekstowe) jest starsza niż data końcowa (drugie pole tekstowe). Spolszczono interfejs wprowadzając zmienną lang. Zmieniając jej wartość na inną niż pol, domyślne komunikaty o błędach zostaną wyświetlone w języku angielskim. str. 89

90 Brak zdjęcia PHPMailer Adres WWW: Opis: PHPMailer jest klasą napisaną w języku PHP, która umożliwia wysyłanie listów elektronicznych. Aktualnie istnieje ono w wersji 5.2.0, ale w związku z pewnymi problemami z wysyłaniem maili, zmuszony byłem użyć bardzo starej, ale doskonale działającej wersji Dokonane zmiany: Brak str. 90

91 jquery UI Adres WWW: oraz Opis: JQuery UI jest biblioteką umożliwiającą tworzyć ładnie wyglądający interfejs użytkownika. Dzięki dostępnym na stronie narzędziom można w szybki sposób dostosować interfejs do naszych potrzeb. Dodatkowo na sieci istnieje wiele dodatków poszerzających możliwości tych narzędzi, jak na przykład przytoczona tutaj kontrolka do wyboru czasu. Prostota, ładny wygląd, mnogość dodatków, dobra dokumentacja i łatwość inplementacji to główne zalety tej biblioteki. Dokonane zmiany: Dodano przycisk usunięcia zawartości pola tekstowego zgodnie ze stroną str. 91

92 TCPDF Adres WWW: Opis: Jest to kolejna klasa napisana w języku PHP. Służy ona do generowania plików PDF. Wybór padł na nią, gdyż jako jedna z niewielu umożliwia tworzenie ich za pomocą języka HTML i jako jedyna wspiera używany przez nas system kodowania znaków UTF-8 bez uciekania się do sztuczek! Posiada bardzo dobrą dokumentację, dzięki czemu w szybki sposób można nauczyć się obsługi tego narzędzia. Dokonane zmiany: Brak str. 92

93 Brak zdjęcia Tooltips Adres WWW: Opis: Powyższe narzędzie służy do wyświetlania podpowiedzi w postaci komentarza lub ramki zawierającej dodatkowe informacje o wskazanym kursorem elemencie. Jednak ze względu na ograniczenia czasowe w wykonaniu projektu, nie zostało ono zaimplementowane w jego ostatecznej wersji. Warto jednak mu się przyjrzeć. Zdobyło ono moje uznanie ze względu na kilka kwestii, tj.: Działa w niemal każdej przeglądarce internetowej. Łatwo się je implementuje w dokumentach HTML. Posiada dobrą i zrozumiałą dokumentację. Umożliwia wyświetlanie podpowiedzi z wykorzystaniem języka HTML, co daje możliwość umieszczania w nich tabel, obrazków, list itd. Dokonane zmiany: Brak str. 93

94 Rozdział 5. Utworzenie pierwszej strony HTML W tym rozdziale stworzymy naszą pierwszą stronę z wykorzystaniem języka HTML. Dowiemy się jak: Tworzyć listy Tworzyć tabele Osadzać obrazki na stronie Modyfikować wygląd tekstu Tworzyć odnośniki Nim jednak do tego przejdziemy, ponownie musimy przyjąć pewną konwencję nazewnictwa i struktury projektu (zgodnie z zaleceniami z Części II Rozdział 2.3.a i Rozdział 2.3.e). Aby utrzymać porządek, strukturę katalogową podzielimy następująco: Funkcjonalność poszczególnych folderów została omówiona w Załączniku numer 1. Konstrukcję strony ze względu na funkcjonalność podzielimy na (Rysunek 6): str. 94

95 Rysunek 6 Opis budowy strony panelu 1. Nagłówek strony zawiera zegar, logo panelu, powitanie użytkownika, link do edycji widoków oraz przycisk wylogowania z panelu. 2. Menu górne umożliwia szybkie przemieszczanie się po serwisie, dodatkowo dając możliwość przejścia do dodawania danych. 3. Menu boczne drugi sposób przemieszczania się po panelu, obrazujący za razem, w której sekcji aktualnie się znajdujemy. 4. Menu dodatkowe zawiera informacje o możliwych akcjach, które możemy wykonać w danym momencie na danej podstronie, aktualne zadania do wykonania przez pracownika oraz informacje o tym, jakie przywileje na danej stronie ma zalogowany użytkownik. Jego zawartość zmienia się w zależności od wybranej podstrony, jak również ilości zaznaczonych wierszy w danym widoku. 5. Zawartość strony tutaj wyświetlana jest główna treść poszczególnych podstron. str. 95

96 6. Stopka strony zawiera dodatkowe informacje o stronie, np. o standardach, z którymi zgodna jest ta strona. Dodatkowo musimy ustalić nazewnictwo plików dla podstron naszego serwisu: Nazwy plików podstron będą pochodziły od ich numeru w menu naszego serwisu. Pliki te będą zawierać jedynie zawartość, która będzie wyświetlana w sekcji 5. konstrukcji panelu. Pozostałe nazwy stron, będą pochodzić od funkcji, które będą one spełniać, lub zawartości, którą będą przechowywać. Skoro wiemy już, według jakich zasad będą tworzone i nazywane pliki, utwórzmy naszą pierwszą stronę internetową przy pomocy języka HTML. Uruchommy program Notepad++. Strona ta posłuży nam do poinstruowania potencjalnego użytkownika serwisu, jak włączyć usługę JavaScript w jego przeglądarce, w przypadku gdy ma on ją wyłączoną, tak więc nazwijmy ją javascript_on.html. Nadajemy rozszerzenie html tej stronie, ponieważ nie będziemy pisać w niej żadnego kodu PHP. W innym przypadku musielibyśmy stworzyć plik php. Każdy dokument HTML powinniśmy zacząć od określenia jego typu. Operacja ta nie jest obowiązkowa, jednak ułatwia ona przeglądarkom internetowym interpretację kodu, gdyż wie ona, z jakiego typu dokumentem ma do czynienia. W zależności od tego, jakiego standardu HTML używamy, deklaracja typu będzie wyglądać tak, jak podano na poniższej stronie: W naszym przypadku musimy napisać: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Jak powiedzieliśmy w Części II Rozdział 3.1, język HTML jest językiem znaczników. Ich definicja wygląda następująco: str. 96

97 <nazwa_znacznika dodatkowe_atrybuty_znacznika> np. <i> - znacznik pisania tekstów kursywą Zgodnie ze standardem XHTML każdy znacznik musi być na koniec jego wywołania zamykany. Niektóre kończymy pisząc: </nazwa_znacznika> np. </b> - znacznik pisania pogrubionego tekstu Inne zaś wymagają od nas zakończenia ich na końcu ich definiowania tj. <nazwa_znacznika dodatkowe_atrybuty_znacznika /> np. <img src= obrazek.jpg /> - znacznik osadzenia obrazka w dokumencie HTML o nazwie obrazek.jpg Znacznikiem rozpoczynającym i kończącym wszystkie pliki HTML są znaczniki <html> i </html> Napiszmy je pod sobą w naszym pliku. Następnym istotnym znacznikiem jest znacznik <head> i </head> Tak jak człowiek ma głowę, która określa, kim jest, tak wewnątrz html owej głowy (słowo head oznacza w języku angielskim głowa ) piszemy informacje, które mówią nam podstawowe informacje o dokumencie z pomocą znaczników np. str. 97

98 <title> - tytuł strony <meta http-eqiov= Content-Type contant= nazwa_kodowania /> - ustawienie rodzaju kodowania znaków <link rel= stylesheet type= text/css href= sciezka_do_pliku_css /> - określenie ścieżki do arkusza stylów, z których będzie korzystać plik HTML <script type= text/javascript src= sciezka_do_skryptu_javascript ></script> - określenie ścieżki do plików JavaScript, z których będzie korzystać strona Więcej informacji nt. tego znacznika znajdziesz na stronie Do tworzonej przez nas strony będziemy potrzebować wczytania arkusza stylów zgodnego z INADMIN, ustalenia jakiegoś tytułu i ustawienia takiego standardu kodowania znaków, by wyświetlały się polskie litery np. UTF-8. Potrzebny nam kod wygląda następująco: <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>jak uruchomić JavaScript w Twojej przeglądarce?</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> Nasza strona nie zawiera na razie żadnej treści. Zawartość strony HTML wpisuje się w znaczniku: <body> i </body> str. 98

99 Trzeba pamiętać, że potencjalni użytkownicy naszego panelu mogą korzystać z różnych przeglądarek. Musimy wykonać więc stronę, na której umówimy sposób włączania JavaScript w paru przeglądarkach. W czytelnym wyświetlaniu danych pomocne są listy. Znacznik list prezentuje się następująco: <ul> </ul> <li>punkt pierwszy</li> <li>punkt drugi</li> Stworzymy prosty poradnik dla następujących przeglądarek: Firefox Google Chrome Internet Explorer Opera Kod HTML dla nich będzie wyglądać następująco: <ul> </ul> <li>firefox</li> <li>google Chrome</li> <li>internet Explorer</li> <li>opera</li> Aby nasza strona wyglądała estetycznie i czytelnie, każdą przeglądarkę omówimy osobno oddzielając ją widocznym tekstem z jej nazwą. Do tego celu służą znaczniki h1,h2,h3 zmieniające wielkość tekstu, jak również strong i b pogrubiające tekst. Ponadto umieśćmy po lewej stronie obrazek pochodzący z przeglądarki, a zaraz obok niego po prawej stronie opis, jak włączyć usługę JavaScript. Istnieje kilka metod takiego rozmieszczenia zawartości strony, ale najłatwiejszą z nich jest użycie tabeli. Struktura tabel wygląda następująco: str. 99

100 <table> <tr> </tr> </table> <td> </td><td> </td> Znacznik <tr> tworzy nowy wiersz w tabeli, a <td> nową kolumnę. W folderze images został umieszczony plik javascript_on_firefox.jpg. Aby umieścić go na stronie, piszemy: <img src= images/javascript_on_firefox /> w pierwszej kolumnie, w drugiej zaś sposób uruchomienia. Powyższe czynności wykonujemy również dla pozostałych aplikacji. Aby szybko przemieszczać się po stronie, czasami warto jest użyć odsyłaczy, które będą przerzucać nas do wybranych jej fragmentów noszą one nazwę etykiet. Aby tego dokonać, musimy wybrany fragment tekstu wpierw umieścić go w specjalnym znaczniku i nazwać: <a name= nazwa > </a> Nad wypunktowanymi nazwami przeglądarek umieśćmy kod <a name= menu >Menu</a> Podobnie postępujemy z ich nazwami nad tabelami. Jednak to nie wszystko. Potrzebujemy teraz zdefiniować odsyłacze. Adresy do innych stron definiujemy jako położenie i nazwę pliku, do którego chcemy się odnieść, zaś aby przenieść się do wskazanej etykiety, jej nazwę musimy poprzedzić znakiem #. Znacznik tworzenia odnośników ma następującą składnię: <a href= adres_odsyłacza >Tekst, który będzie nas przenosić pod wskazany adres</a> np. <a href= #firefox >Firefox</a> str. 100

101 Utwórzmy odsyłacze do każdej przeglądarki oraz dodajmy poniżej definicji tabel odsyłacz do menu, na przykład o treści W górę. Tak oto poznaliśmy podstawowe znaczniki oraz stworzyliśmy naszą pierwszą stronę internetową za pomocą języka HTML. Ostateczna wersja strony, na której poprawiono szablon graficzny, znajduje się w katalogu głównym panelu administracyjnego. str. 101

102 Rozdział 6. Stworzenie panelu logowania do strony Niniejszy rozdział przedstawia kwestie logowania, profili, bezpieczeństwa i personalizacji na witrynach internetowych z wykorzystaniem PHP i MySQL. W ramach tych zagadnień powiemy o: Bezpieczeństwie stron WWW i uwierzytelnianiu. Stosowaniu kontroli sesji. Łączeniu się z bazą MySQL za pomocą PHP i wykonywanie zapytań. Wysyłaniu listów elektronicznych z pomocą PHP. Utworzeniu własnego panelu logowania. Na końcu przestawimy schemat blokowy zbudowanego systemu logowania, z którego korzystamy w stworzonym panelu administracyjnym, i omówimy poszczególne kroki jego działania. Przy okazji zaznajomimy się z podstawami PHP, poznając składnię i przykładowe funkcje. str. 102

103 Rozdział 6.1 Bezpieczeństwo stron WWW Internet jest medium zapewniającym pewną anonimowość. Często jednak bardzo przydatna jest wiedza na temat osób odwiedzających naszą stronę WWW. Na szczęście użytkownika, bez jego wiedzy i udziału niewiele można się o nim dowiedzieć. Jednak serwer internetowy może bez trudu zebrać informacje o komputerze i sieci, z którą zostało nawiązane połączenie. Przeglądarka internetowa zazwyczaj sama się identyfikuje, wysyłając dane na temat swego typu, wersji i systemu operacyjnego, na którym pracuje. Z pomocą JavaScript istnieje możliwość uzyskania dodatkowych danych o użytkowniku. Z tego i innych powodu niektóre osoby wyłączają ową usługę. Każdy komputer podłączony do sieci posiada własny adres IP. Na jego podstawie można uzyskać część danych o odwiedzających tj. kto jest jego właścicielem, w której części świata się znajduje. Wiele witryn zachęca odwiedzających do podawania swoich danych udostępniając w zamian poszerzone możliwości korzystania z danego serwisu. Większość witryn komercyjnych zapisuje te dane ze względów marketingowych, ale również po to, by użytkownik nie musiał podawać ponownie danych przy, na przykład, składaniu kolejnego zamówienia. Po otrzymaniu określonych danych od odwiedzającego należy znaleźć sposób, by w razie następnej wizyty skojarzyć zapisane dane z konkretnym użytkownikiem. Weryfikacja tożsamości użytkownika nosi nazwę uwierzytelniania. Metodą najczęściej stosowaną na stronach WWW jest podanie przez odwiedzającego jego identyfikatora oraz hasła dostępu. Uwierzytelnianie zazwyczaj sprowadza się do udzielenia bądź odmowy dostępu do określonej strony lub zasobów, jednak może być też opcjonalne lub służyć, np. do personalizacji wyglądu strony. Uwierzytelniania można dokonać na wiele sposobów, w tym stosując kontrolę sesji w PHP, którą omówimy w Rozdziale 6.2. Każdy zalogowany użytkownik nie powinien móc dokonywać wszystkiego, co mu się żywnie podoba na stronie WWW. Należy określić dla niego jego prawa, obowiązki i przywileje w serwisie. Z tego powodu wiele stron określa regulamin korzystania z nich. Pod słowem przywileje kryją się nie tylko korzyści z korzystania z witryny, ale również określenie mechanizmów mających zapewnić odpowiedni poziom bezpieczeństwa dla danych w nich str. 103

104 zawartych. Przykładowo, normalny użytkownik nie powinien móc dokonywać zmian w wyglądzie strony, ani zmieniać jej podstawowych parametrów. Proces określania uprawnień dla użytkownika nosi nazwę autoryzacji albo inaczej kontroli dostępu. Autoryzacja może przybierać bardzo różne formy, w zależności od konkretnego zastosowania. System operacyjny sprawdza uprawnienia zalogowanego (uwierzytelnionego) użytkownika do pliku na podstawie jego atrybutów w systemie plików. Użytkownik bankowości internetowej, który zalogował się (uwierzytelnił) za pomocą loginu i hasła autoryzuje przelew za pomocą podpisu cyfrowego składanego za pomocą hasła jednorazowego. ZUS uwierzytelnia deklaracje płatników za pomocą podpisu elektronicznego (planowano także autoryzację prawa osób do reprezentowania poszczególnych podmiotów za pomocą certyfikatów atrybutów). Zapora sieciowa równocześnie uwierzytelnia i autoryzuje dostęp do portu serwera na podstawie adresu IP klienta. Autoryzacji użytkownika można również dokonywać różnymi metodami przy wykorzystaniu narzędzi PHP i MySQL. Jedną z nich jest tworzenie użytkowników w bazie danych o określonych przywilejach, co przedstawiliśmy w Rozdziale 3.6. Inną metodą, którą wykorzystamy w naszym projekcie, jest określenie praw dostępu do poszczególnych witryn na poziomie wierszy w tabelach. System ten działa w następujący sposób (Rysunek 7): str. 104

105 Rysunek 7 Określanie przywilejów użytkownika do przeglądania serwisu Aby przyspieszyć uruchamianie stron po stronie serwera, operację wczytywania przywilejów do pamięci wykonujemy tylko jeden raz podczas logowania się użytkownika do systemu. Pobieramy wtedy dane o prawach dostępu do wszystkich istniejących w panelu podstron. Jak przebiega cały proces logowania zostanie umówione w dalszej części tego rozdziału. str. 105

106 Rozdział 6.2 Stosowanie kontroli sesji HTML jest protokołem bezstanowym oznacza to, że nie posiada on sposobu utrzymywania stanu pomiędzy dwoma transakcjami. Kiedy użytkownik łączy się z pewną stroną, a później z następną, HTML nie jest w stanie określić, czy oba połączenia pochodziły od tej samej osoby. Ideą kontroli sesji jest zapewnienie możliwości śledzenia użytkownika podczas pojedynczej sesji w witrynie WWW. Umożliwia ona dokonania wielu operacji: łatwą obsługę logowania (uwierzytelnianie), wyświetlanie zawartości w zależności od praw użytkownika (autoryzację), śledzenie zachowań użytkownika Itd. Mechanizm sesji bazuje na identyfikatorze sesji i związanych z nim zmiennych. Identyfikator sesji, który jest kryptograficznie wyznaczoną liczbą, jest przechowywany w cookie tzw. ciasteczkach w komputerze z przeglądarką lub jest wbudowany w argumenty trzymane w adresie strony, lub formularzach, przekazywanych razem z żądaniem pobrania strony. Nie jest nigdzie zapamiętywany jest przekazywany jako część żądania i zwracany do kodu HTML, do łączy i formularzy, które mogą wygenerować kolejne żądanie. Przeglądarka i serwer wymieniają się tą krytyczną dla nas informacją. Jeżeli któraś ze stron zgubi identyfikator, nasza sesja się kończy. Domyślnie wartości zmiennych sesji są przechowywane w specjalnych plikach na serwerze, po jednym dla każdej sesji. Zapamiętanie danych w ten sposób wymaga kodu sesji, realizującego serializację danych. Termin ten oznacza zamianę danych w liniową sekwencję bajtów, którą można zapisywać na dysku i odczytywać z niego w celu odtworzenia danych. Możliwe jest takie skonfigurowanie PHP, aby program przechowywał zmienne sesji w bazie danych, zamiast w plikach. Tabela poniżej zawiera wszystkie, najbardziej istotne funkcje PHP związane z obsługą sesji (Tabela 7): str. 106

107 Tabela 4Funkcje PHP do obsługi sesji Funkcja session_start() Opis działania Powoduje, że PHP odczytuje identyfikator sesji przekazany do strony. Jeżeli nie może go odszukać, tworzy nowy identyfikator sesji. Jeżeli odnaleziony został stary identyfikator sesji, PHP odtwarza przypisania do wszystkich zarejestrowanych zmiennych i udostępnia te wartości jako zwykłe zmienne globalne. Funkcję tą należy wykonać na samym początku strony, dla której chcemy utworzyć sesję. session_register( naz wa_zmiennej1, nazwa_zmiennej2, ) session_unregister( n azwa_zmiennej ) session_is_registered( nazwa_zmiennej ) session_destroy() Wymaga ciągu jako argumentu i rejestruje zmienną o nazwie określonej przez ciąg. Nazwa zmiennej nie powinna zawierać początkowego znaku '$', który piszemy przy nazwach zmiennych w PHP. Efektem rejestracji jest zapamiętanie przypisań do obiektów (po zakończeniu skryptu zarejestrowane zmienne podlegają serializacji i są przenoszone w sposób, który zapewnia ich odtworzenie w wywołaniu session_start()). Jeżeli nie wywołano wcześniej funkcji session_start(), session_register() niejawnie ją wywołuje. Wymaga ciągu jako argumentu i usuwa z listy zarejestrowanych zmiennych zmienną o nazwie przekazanej jako argument. W wyniku tego zmienna ta nie będzie podlegała serializacji i nie będzie przenoszona pomiędzy stronami (nazwa zmiennej nie powinna zawierać początkowego znaku '$'). Sprawdza, czy zmienna o podanej nazwie jest zarejestrowana w bieżącej sesji, zwracając TRUE, jeżeli zmienna jest zarejestrowana, FALSE, jeżeli nie jest. Wywołanie tej funkcji usuwa wszystkie zapamiętane dane o sesji (identyfikator sesji nie musi się zmieniać po wywołaniu tej funkcji). Wywołanie tej funkcji nie zmienia wartości żadnych zmiennych w bieżącym skrypcie. str. 107

108 Funkcja Opis działania Funkcja wywołana bez parametrów zwraca nazwę bieżącej sesji. Wywołana z jednym argumentem, ustawia nazwę bieżącej sesji na podany ciąg. session_name([ nazw a_sesji ]) session_id() UWAGA! Nazwa sesji nie może składać się tylko z cyfr - musi zawierać przynajmniej jedną literę. W przeciwnym przypadku za każdym odwołaniem generowana będzie nowa sesja. Nazwa ta jest używana jako klucz do odszukania identyfikatora sesji w cookie lub argumentach GET, POST. Aby odnalezienie sesji się udało, nazwa sesji musi być identyczna jak nazwa sesji, w trakcie której poddano zmienne serializacji. Zauważmy, że nie ma powodu do zmiany nazwy sesji, chyba że chcemy rozróżniać różne typy sesji obsługiwanych jednocześnie przez serwer WWW (np. w przypadku wielu witryn korzystających z sesji). Nie ma argumentów. Zwraca ciąg, który jest kluczem, określającym sesje. Jeżeli zostanie przekazany argument, funkcja ta ustawi identyfikator sesji na tę wartość. Aby przypisać zmiennym sesji określoną wartość, należy odwołać się do tzw. tablicy superglobalnej $_SESSION i nadać zmiennej o określonej nazwie, w następujący sposób: $_SESSION[ nazwa_zmiennej ] = wartość Nie musimy tworzyć nowych zmiennych za pomocą funkcji session_register! Wystarczy, że wywołamy powyższy kod dla pewnej zmiennej. Jeżeli podana zmienna nie istnieje w tablicy $_SESSION, zostanie w tym momencie utworzona i zostanie przypisana jej wartość. Jeżeli użytkownik postanowi opuścić naszą stronę i wylogować się, wystarczy zniszczyć zmienne sesji i usunąć je z pamięci za pomocą funkcji session_destroy() albo funkcji unset( nazwa_zmiennej ) np. unset($_session[ userdata ]) Jeżeli chcemy usunąć wszystkie zmienne sesji należy wpisać unset($_session). str. 108

109 Rozdział 6.3 Łączenie się z bazą danych MySQL za pomocą PHP i wykonywanie zapytań SQL Nim przystąpimy do połączenia się z bazą danych przy pomocy języka PHP, warto zastanowić się, jak działa internetowa baza danych. Odwiedzając stronę internetową, przeglądarka wysyła żądanie przesłania witryny do serwera, ten zaś wysyła odpowiedź. W przypadku statycznych stron internetowych sytuacja odbywa się w prosty sposób, jednak strony WWW oparte na bazie danych mają bardziej złożoną konstrukcję. Internetowa aplikacja bazodanowa, którą stworzymy, będzie opierać się na podanej poniżej zasadzie działania (Rysunek 8). Rysunek 8 Zasada działania bazodanowych aplikacji 1. Przeglądarka internetowa użytkownika wysyła żądanie udostępnienia określonej strony WWW. 2. Serwer przyjmuje żądanie wyświetlenia strony, odnajduje plik i przekazuje go do interpretera PHP. 3. Interpreter zaczyna przetwarzanie skryptu. Jeżeli wewnątrz skryptu znajdują się polecenia połączenia z bazą danych i wykonania zapytania, następuje nawiązanie połączenia z serwerem MySQL, wysłanie zapytania i przejście do punktu 4. Operacja ta wykonuje się do momentu aż kończy pracę i przechodzimy do punktu Serwer bazodanowy przyjmuje zapytanie i wykonuje je, a rezultaty odsyła do interpretera PHP do punktu Interpreter kończy wykonywanie skryptu, po czym wysyła wynikowy kod HTML do serwera WWW. 6. Serwer WWW przesyła kod HTML do przeglądarki, która wyświetla stronę. Zanim będzie można wykonać jakiekolwiek zapytanie SQL, trzeba połączyć się z serwerem MySQL, używając odpowiednich zmiennych połączenia. Zmienne te zawierają następujące parametry: str. 109

110 Nazwę komputera w przedstawionych przykładach będzie to komputer lokalny (localhost), ponieważ wszystko jest zainstalowane lokalnie. Jeżeli serwer MySQL znajduje się na innym komputerze, trzeba zmienić ten parametr i ustawić adres serwera. Nazwę użytkownika należy podać nazwę użytkownika fizycznie znajdującego się w bazie danych Hasło użytkownika oraz jego hasło Do wykonania połączenia z serwerem służy funkcja mysql_connect( nazwa_serwera, nazwa_uzytkownika, haslo_uzytkownika ) np. mysql_connect( localhost, root, root ) Zwraca ona łącze do serwera, które należy zapamiętać, jeżeli ustanawiamy kilka połączeń z bazą danych w jednym momencie. Jeżeli tego nie zrobimy i nie podamy nazwy połączenia przy wykonywaniu zapytań SQL, mogą pojawić się błędy przy ich wykonywaniu. Aby zakończyć połączenie z bazą danych, należy użyć funkcji mysql_close([łącze_do_serwera]) np. jeżeli utworzyliśmy zmienną $link, która przechowuje łącze do serwera MySQL, to aby zamknąć połączenie piszemy mysql_close($link) Samo ustanowienie połączenia nie zawsze umożliwi nam dokonanie zapytania. Należy wybrać bazę danych, w której chcemy je wykonywać. Wywołanie funkcji odpowiedzialnej za wybór bazy danych wygląda następująco: mysql_select_db( nazwa_bazy_danych, [łącze_do_serwera]) np. by połączyć się z naszą bazą danych piszemy mysql_select_db( baza_danych_firmy ), podanie łącza nie jest obowiązkowe Kolejną istotną sprawą jest ustawienie kodowania, zgodnie z którym będziemy wykonywać zapytania i/lub otrzymywać ich wyniki. Istnieje kilka sposobów wykonania tej operacji. Tworząc funkcję set_charset() na potrzeby tego projektu (patrz Załącznik numer 1), użyliśmy następującego: str. 110

111 mysql_set_charset( nazwa_kodowania, [łącze_do_serwera]) oraz wykonaliśmy zapytania o treści SET character_set_results nazwa_kodowania i SET character_set_connection nazwa_kodowania, na przykład w miejsce nazwa_kodowania wstawiając napis UTF8 Tak utworzone połączenie da nam możliwość wykonywania zapytań do naszej bazy danych baza_danych_firmy i poprawnego wykonywania zapytań SQL z polskimi literami. Do ich wykonywania służy funkcja: mysql_query( zapytanie, [łącze_do_serwera]) funkcja ta zwraca w zależności od rodzaju zapytania następujące wartości: SELECT, SHOW, DESCRIBE, EXPLAIN i innych tego typu wynik zapytania, jeżeli istnieje, lub wartość FAŁSZ w przypadku błędu INSERT, UPDATE, DELETE, DROP itp. wartość PRAWDA, jeśli wykonano poprawnie, lub FAŁSZ w przypadku błędu Wartość FAŁSZ, jeśli użytkownik nie posiada praw do wykonywania operacji na tabeli(ach) Przykładowe użycie funkcji: mysql_query( SELECT * FROM WD, $link) w przypadku poprawnego wywołania zapytania, zwróci ono wszystkie wiersze z tabeli WD. str. 111

112 Rozdział 6.4 Wysyłaniu listów elektronicznych z pomocą PHP Może się zdarzyć, że użytkownik, który posiada konto w naszym serwisie, zapomniał hasła. Często spotykanym mechanizmem umożliwiającym jego zmianę jest wysłanie nowego, automatycznie utworzonego hasła na podany wcześniej przez niego adres . W naszej aplikacji internetowej również zastosowano ten schemat działania. Do wysyłania listów elektronicznych użyjemy narzędzia PHPMailer omówionego w Rozdziale 4. Nim przystąpimy do wysyłania i, musimy dokonać zmian danych o naszym systemie pocztowym na jeden z podanych sposobów: edytować zawartość tabeli AE z poziomu narzędzia phpmyadmin, edytować zawartość tych samych danych z poziomu panelu administracyjnego w zakładce Ustawienia -> Podstawowe parametry -> Edytuj dane, zmienić zawartość pliku phpmailer_consts.php w folderze functions (UWAGA! Ta zmiana spowoduje ustawienie tych parametrów na stałe, nie będzie możliwa późniejsza edycja tych danych dwoma powyższymi sposobami). str. 112

113 Aby wysłać list za pomocą tej klasy musimy wykonać następujące kroki (Tabela 5): Tabela 5 Wysyłanie listów elektronicznych za pomocą PHPMailer Krok Opis działania Kod PHP 1 2 Zaimportować zawartość pliku functions/phpmailer_class.php Zaimportować zawartość pliku functions/phpmailer_consts.php require_once "functions/phpmailer_class.php"; require_once "functions/phpmailer_consts.php"; 3 Utworzyć element klasy PHPMailer $mail = newphpmailer(); $mail->plugindir = MAIL_PLUGINDIR; $mail->charset = MAIL_CHARSET; $mail->host = MAIL_HOST; $mail->mailer = MAIL_SEND_METHOD; 4 Określić podstawowe parametry $mail->smtpauth = MAIL_SMTP_AUTH; $mail->smtpdebug = MAIL_SMTP_DEBUG; $mail->port = MAIL_PORT; $mail->username = MAIL_USERNAME; $mail->password = MAIL_PASSWORD; 5 Określić, do kogo i przez kogo ma być wysłany $mail->from = MAIL_FROM; $mail->fromname = MAIL_FROMNAME; $mail->addaddress($user ,$username); 6 Określić tytuł listu $mail->subject = Tytuł ; 7 Określić treść maila $mail->body = Treść maila ; 8 Wysłać $mail->send(); str. 113

114 Rozdział 6.5 Utworzeniu własnego panelu logowania Posiadając podstawową wiedzę o tworzeniu sesji, łączeniu się z bazą danych i wysyłaniu listów elektronicznych możemy przystąpić teraz do tworzenia panelu logowania do naszego systemu administracyjnego. Poniżej został przedstawiony i omówiony schemat blokowy, w jaki sposób działa utworzona przeze mnie strona logowania. Kod wraz z komentarzami do niej znajduje się w plikach: login.php login_head.php login_header_warnings.php login_header.php login_content.php login_forget_password.php login_forget_password_content.php logout.php W wersji podstawowej strony można zalogować się do panelu za pomocą następujących danych: Login: root Hasło: root str. 114

115 Legenda schematu blokowego (Tabela 6): Tabela 6 Legenda schematu blokowego Kształt Opis 1 Numer zawarty w kółku odpowiada numerowi opisu kroku znajdującego się pod schematem blokowym Start Symbol początku wykonywania operacji w schemacie blokowym. Jeżeli istnieje kilka takich symboli, oznacza to, że dany proces może zacząć się z paru różnych miejsc Koniec Symbol końca wykonywania się procesu. Podobnie jak symbol Start, procedura może zakończyć się na różnych etapach, w różny sposób Użytkownik próbuje się zalogować Operacja wykonywana bez udziału bazy danych. Element zawiera jej opis. Wykonanie dodatkowych operacji w formularzu Jeżeli symbol otoczony jest przerywaną linią, oznacza to że operacja istnieje tylko w niektórych podstron, a w innych nie Łączenie z bazą danych w trybie podstawowym Operacja wykonywana w bazie danych. Element zawiera jej opis. Czy użytkownik jest zalogowany do panelu? Pole decyzji w zależności czy odpowiedź na pytania w niej zawarte jest twierdząca czy przecząca, zostaną wykonane inne operacje, a część nie zostanie wykonana w ogóle Strzałka reprezentuje przebieg schematu blokowego, przenosi nas z jednej operacji do drugiej str. 115

116 Schemat blokowy procesu logowania użytkownika (Rysunek 9): Rysunek 9 Zasada działania panelu logowania str. 116

117 1. Użytkownik może próbować wejść do naszego panelu administracyjnego z paru miejsc: a) stronę index.php lub login.php, b) uruchomiając podstronę. W przypadku wywołania opcji b) użytkownik zostanie przeniesiony na stronę główną tj. index.php, gdyż nie można wywoływać podstron jako samodzielny twór. Mogłoby to spowodować pojawienie się błędów i być niebezpieczne dla bazy danych. 2. Musimy dokonać sprawdzenia, czy zmienne sesji nadal istnieją w systemie. Jeżeli istnieją, użytkownik jest przenoszony na stronę główną panelu administracyjnego index.php?str=0&action=select (składnia adresów zostanie wytłumaczona w Rozdziale 7). W innym razie osoba używająca naszej aplikacji będzie musiała potwierdzić swoją tożsamość. 3. Zostaje wyświetlony panel logowania. W tym miejscu internauta ma dwie możliwości: a) próbować się zalogować podając swój login i hasło (patrz krok 4), b) w przypadku jeśli zapomniał swojego loginu i hasła, może wybrać opcję Zapomniałeś hasła? (patrz krok 16). 4. Wybierając opcję a) w poprzednim podpunkcie użytkownik przechodzi przez proces próby zalogowania się do systemu. 5. Następuje sprawdzenie, czy podano wszystkie potrzebne dane, gdyż użytkownik mógł przesłać pusty formularz, jeżeli usługa JavaScript została wyłączona. Jeżeli tak się stało, zostanie wyświetlony komunikat o błędzie i wrócimy do kroku 3. W tym przypadku będziemy próbować ustalić, czy podane dane są poprawne. 6. Próbujemy połączyć się z bazą danych. 7. W razie niepowodzenia spowodowanego np. awarią systemu zostanie wyświetlony komunikat błędu. 8. Jeśli jednak operacja połączenia z serwerem MySQL powiodła się, próbujemy odszukać użytkownika o podanym loginie i haśle. 9. Jeśli nie znaleźliśmy jednego wiersza pasującego do podanych danych, wyświetlamy komunikat o niepowodzeniu tej operacji, albo 10. w przypadku znalezienia go, odczytujemy prawa użytkownika do przeglądania podstron serwisu. 11. Operacja ta w przypadku nieznalezienia przywilejów, ponownie wyświetli stosowny błąd. str. 117

118 12. Gdy ustaliliśmy przywileje użytkownika, zapisujemy je w zmiennej sesyjnej $_SESSION[ userprivs ]. 13. Zapisujemy do bazy danych informacje o czasie, miejscu logowania i osobie, która się zalogowała. 14. Zapamiętujemy również podstawowe dane o użytkowniku numer id, login, imię, nazwisko, adres oraz numer użytkownika będącego jego przełożonym, które są potrzebne w różnych miejscach podczas działania panelu administracyjnego, a przez to nie musimy sięgać po nie ponownie do bazy danych. 15. Operacja logowania zakończyła się sukcesem i użytkownik przenoszony jest na stronę główną panelu index.php?str=0&action=select (patrz Rozdział 7). 16. Gdyby użytkownik postanowił zmienić hasło 17. zostanie wyświetlony panel, w którym trzeba wpisać swój adres . Użytkownik może w tym momencie wrócić do poprzedniej podstrony. 18. Internauta postanawia zmienić swoje hasło. 19. Jeżeli nie wpisał adresu , zostanie cofnięty na stronę zmiany hasła i powiadomiony o tym błędzie. 20. Próbujemy połączyć się z bazą danych. 21. W razie niepowodzenia spowodowanego np. awarią systemu zostanie wyświetlony komunikat błędu. 22. Jeśli jednak operacja połączenia z serwerem MySQL powiodła się, próbujemy odszukać użytkownika o podanym loginie. 23. Jeśli nie znaleźliśmy jednego wiersza pasującego do podanych danych, wyświetlamy komunikat o niepowodzeniu tej operacji albo 24. w przypadku znalezienia go, tworzymy nowe hasło za pomocą funkcji rand([minimalna_wartość_liczby], [maksymalna_wartość_liczby]) funkcja generująca losową liczbę, jeżeli funkcja zostanie wywołana z parametrami, to wylosowana liczba będzie liczbą w podanym zakresie, np. rand(5,15) wygeneruje liczbę z przedziału 5 do 15 oraz str. 118

119 uniqid([liczba], [użyj_dodatkowych_narzędzi_do_wygenerowania_liczby]) funkcja generująca przypadkowy ciąg o długości 13 znaków na podstawie czasu jej wywołania podanego w milisekundach albo podanej liczby. Jeżeli drugi parametr ma wartość 1, funkcja wygeneruje ciąg znaków o długości 23 np. uniqid(rand(),1) następnie szyfrujemy je za pomocą przy użyciu funkcji md5( napis, [wygeneruj_napis_w_postaci_binarnej]) funkcja generująca ciąg znaków zgodnie z algorytmem szyfrowania MD5. Zwraca ciąg o długości 32 znaków. Przykładowe wywołanie: md5(uniqid(rand(),1)) Ostatnią operacją jest wybranie podciągu znaków tak uzyskanego wyniku od trzeciego do dziesiątego, stosując funkcję: substr( napis, pobierz_od_znaku, [długość_podciągu]) np. substr ( md5(uniqid(rand(),1)), 3, 10) Tak uzyskane hasło próbujemy zapisać w bazie danych. 25. Jeżeli operacja uaktualnienia hasła się nie powiedzie, informujemy o tym użytkownika i każemy mu skontaktować się z administratorem. 26. W innym przypadku wysyłamy powiadomienie na adres o zmianie hasła wraz z nim. 27. Gdyby operacja wysłania hasła nie powiodła się, użytkownik jest informowany o tym i ponownie proszony o kontakt z administratorem w celu zmiany hasła. 28. Gdy wszystkie operacje zakończyły się powodzeniem, internauta jest o tym fakcie informowany. Teraz musi tylko sprawdzić adres w celu zapisania nowego hasła. str. 119

120 Rozdział 7. Opracowanie menu serwisu i zasady jego działania Ostatnią kwestią, której nie zdążyliśmy jeszcze ustalić jest ustalenie mapy strony i formatu adresów stron internetowych, z których będzie korzystać nasz panel. Tworząc menu należy pomyśleć jak potencjalny użytkownik tj. z czego będę korzystać najczęściej?. Ze względu na to menu panelu administracyjnego zostało podzielone następująco (nazwa grupy -> nazwa podgrupy) 1. Produkty 1) Produkty zawiera dane o produktach 2) Grupy zawiera dane o grupach, do których mogą należeć produkty 3) Cechy zawiera dane o cechach, które można przypisać produktom 4) Jednostki zawiera dane o jednostkach, które można przypisać produktom 2. Dostawcy 1) Dostawcy zawiera spis dostawców 2) Zamówienia zawiera zamówienia, które zostały złożone u dostawców 3. Klienci 1) Klienci zawiera spis o klientach w naszej bazie 2) Zamówienia zawiera zamówienia klientów 4. Ustawienia zamówień 1) Rodzaje rozliczeń zawiera sposoby rozliczeń, między nami a klientami bądź dostawcami 2) Rodzaje płatności zawiera sposoby płatności 3) Rodzaje dostaw zawiera możliwe rodzaje dostaw zamówień 4) Ceny dostaw zawiera ceny poszczególnych rodzajów dostaw w zależności od kraju 5) Ankiety (w budowie) docelowo ma przechowywać treści ankiet, które będą wysyłane klientom po złożeniu zamówienia, które mają służyć poprawie jakości usług sklepu str. 120

121 5. Pracownicy 1) Pracownicy zawiera spis użytkowników i dane o nich, którzy mogą zalogować się do panelu. Wyświetlani są w nim tylko pracownicy nam podwładni oraz ich podwładni 2) Zadania pracowników zawiera spis pracowników pracujących dla nas, możemy dowiedzieć się z niego, czy i kiedy wykonali powierzone im zadanie 3) Stanowiska zawiera spis stanowisk, na których mogą znajdować się pracownicy 6. Lokalizacje 1) Państwa zawiera spis państw, na terenie których firma prowadzi sprzedaż oraz skąd mogą pochodzić jej pracownicy, dostawcy i klienci 7. Raporty (dział w budowie) 1) Sprzedaży docelowo ma dawać możliwość generowania raportów (PDF) o sprzedaży w podanym okresie czasu 2) Kupna docelowo ma dawać możliwość generowania raportów (PDF) kupna towarów od dostawców w podanym okresie czasu 3) Stanów docelowo ma dawać możliwość generowania raportów (PDF) aktualnych stanów w magazynie, przy czym użytkownik może już na chwilę obecną w dziale 1.1 zobaczyć takie dane 4) Odwiedzin strony docelowo ma pokazywać informacje o ruchu na naszej stronie. Pytaniem jest, czy nie użyć do tego celu zewnętrznego narzędzia typu Przy czym nie dałoby nam ono informacji o odwiedzinach na poszczególnych podstronach naszego serwisu. str. 121

122 8. Ustawienia strony 1) Podstawowe parametry wyświetla podstawowe dane o naszej firmie 2) Baza danych wyświetla dane o ostatnio dokonanych operacjach w bazie danych oraz przenosi nas do strony, gdzie możemy utworzyć kopię bazy danych 3) Główny słownik strony (w budowie) docelowo ma pokazywać słownik, zgodnie z którym będzie następowało tłumaczenie strony na inne języki. Takie użycie będzie wymagało przebudowania budowy stron, tak by w odpowiednich miejscach wyświetlały się odpowiednie słowa, w zależności od wybranego języka trzeba będzie stworzyć tzw. szablon. 9. Mój profil 1) Moje zadania wyświetla zadania pracownika, użytkownik może dodawać tam także swoje własne zadania 2) Moje dane wyświetla informacje o zalogowanym użytkowniku 3) Moje przywileje wyświetla przywileje, które posiada użytkownik w panelu administracyjnym 4) Moje widoki umożliwia dokonywania zmian w widokach, tzn. zmianę kolejności kolumn w wynikach zapytań oraz czy dana kolumna ma być w ogóle wyświetlona 5) Zmiana hasła umożliwia zmianę hasła przez użytkownika na przez niego podane Niektóre działy nie zostały wykonane do końca ze względu na ograniczenia czasowe. Nieprzypadkowo wybrano powyższy sposób wypunktowania elementów menu. Oddaje on sposób, w jaki będą nazywane pliki podstron, które będą wyświetlane w obszarze 5 Rysunku 6 (Rozdział 5). Jeżeli będziemy chcieli wejść na stronę o cechach, wczytamy zawartość pliku 1.3.php, zaś wchodząc na stronę o podstawowych parametrach, uruchomimy plik 8.1.php. Pozostałe strony będą wyświetlane w nowych oknach. Skąd będziemy wiedzieć, którego pliku użyć w celu wyświetlenia zawartości? Na podstawie adresu strony, którego składnia wygląda następująco: Dla podstron, które pojawiają się w nowych oknach adres będzie odpowiadać nazwie i położeniu pliku. str. 122

123 Wszystkie pozostałe podstrony panelu, na których wyszukujemy, dane będą zaczynać się od nazwy index.php, zaś strony, na których dokonujemy ich modyfikacji, od index_f.php Po niej nastąpi znak zapytania (?), który w języku PHP użyty w adresie strony sprawia, że możemy przesyłać zmienne Każda podstrona posiada obowiązkowo dwa parametry: o numer odpowiadający numerowi zgodnemu z menu całego panelu, o nazwę akcji nazwa operacji, którą chce wykonać użytkownik na tej stronie. Odpowiadają im następujące zmienne, kolejno: str i action W adresie mogą pojawić się inne zmienne, w zależności od rodzaju wykonanej przez użytkownika czynności na stronie panelu, np. ok, error, add_feature itd. Każda z nich oddaje charakter wykonanej akcji. Sposób odczytania zmiennych z adresu zostanie omówiony w następnym rozdziale. Co kryje się pod nazwą akcji? Nazwa akcji będzie adekwatna do nazwy wykonywanej na stronie operacji tj. Select zgodnie z nazwą instrukcji SQL służącej do wyświetlania danych, jeśli użytkownik chce przeglądać dane Insert zgodnie z nazwą instrukcji SQL służącej do dodawania nowych danych do bazy, jeśli użytkownik chce tworzyć nowe dane lub ich kopię Update zgodnie z nazwą instrukcji SQL służącej do modyfikowania danych str. 123

124 Poniższy schemat blokowy przedstawia, w jaki sposób działa stworzona aplikacja (Rysunek 10): Rysunek 10 Zasada działania wyświetlania podstron str. 124

125 1. Wczytując jakąkolwiek podstronę z poziomu panelu i strony index.php, sprawdzamy, czy użytkownik, który ją otwiera, jest zalogowany do systemu. Czynności tej dokonujemy wywołując funkcję user_is_loged(). W przypadku jeśli nie jest zalogowany, zostanie przeniesiony na stronę access_denied.php, na której zobaczy stosowny komunikat. W innym przypadku 2. do pamięci zostaną wczytane zmiennej $_GET[ str ] oraz $_GET[ action ] informujące o numerze podstrony, która ma zostać wczytana, oraz rodzaju akcji do wykonania (w przypadku wszystkich stron, które służą do wyszukiwania danych, akcja będzie miała wartość Select). 3. Następnie w pliku header_warnings.php następuje sprawdzenie, czy pojawiły się jakieś błędy podczas wykonywania akcji przez użytkownika i w razie pojawienia się ich, wyświetlenie komunikatu o nich. 4. Etap ten zostanie dokładniej omówiony na Rysunku 11. Ma on na celu sprawdzenie danych przesłanych przez użytkownika o zaznaczeniu wierszy wyników wyszukania i w przypadku jego powodzenia, ich zaznaczenie (plik result_selection.php). 5. Do zmiennej $_SESSION[ usercurrentview ] zapisujemy numer widoku na podstawie numeru podstrony, który odpowiada ID tegoż widoku w bazie danych. Zmienna ta jest nam potrzebna w celu określenia kolumn zapytania dla danej podstrony i wyglądu tabeli, w której wyświetlane są wyniki zapytań. 6. Akcja ta zostanie opisana podczas omawiania Rysunku 11. W zależności od przywilejów użytkownika i ilości zaznaczonych wierszy menu boczne ma nieco inną postać (plik menu_additional.php). 7. Siódmy etap jest najistotniejszym z punktu widzenia bezpieczeństwa strony. Kod odpowiedzialny za tę część znajduje się w pliku content_authorization.php. Sprawdza on, czy internauta podał poprawne dane numer podstrony w zmiennej $_GET, czy istnieje plik o tej nazwie oraz czy podano poprawną nazwę akcji. Na ich podstawie określane jest to, czy użytkownik ma prawa do przeglądania danej podstrony. Jeśli którekolwiek sprawdzenie nie powiedzie się lub osoba nie posiada praw do wyświetlania strony, komunikat o błędzie zostanie zapisany do zmiennej $_SESSION[ info ] i zostanie podniesiona flaga błędu. 8. Jeśli zaś użytkownik ma prawo odwiedzić stronę, następuje sprawdzenie, czy wczytano już filtry widoków tzn. kolumny dla zapytań i tabeli wynikowej na danej podstronie. Jeśli nie zostaną ona wczytane. Operacja ta jest omówiona na Rysunku 11 i wymaga połączenia się z bazą danych. str. 125

126 9. Ostatnim krokiem jest sprawdzenie, czy podczas wykonywania kroku 7. pojawiły się jakiekolwiek błędy. Jeśli tak, zamiast zawartości podstrony i umożliwienia dokonywania operacji na niej pojawi się komunikat błędu zapisany w kroku 7. Znając już mapę i zasadę działania strony, możemy przejść do tworzenia zawartości panelu administracyjnego. str. 126

127 Rozdział 8. Wykonanie formularzy do wyszukiwania danych Formularze są nieodłączną częścią w dzisiejszych stronach internetowych. Zapewniają one, że witryna jest interaktywna przyjmują dane od użytkownika i przekazują je do miejsca, w którym mogą zostać przetworzone i być może zapamiętane, a następnie wynik jest przekazywany z powrotem do użytkownika. Rozdział ten zostanie poświęcony następującym kwestiom: Tworzenie formularzy WWW Walidacja danych użytkownika Tworzenie zapytań do wyszukiwania danych w bazie MySQL Prezentacji działania formularzy stworzonych w panelu administracyjnym str. 127

128 Rozdział 8.1 Tworzenie formularzy WWW Formularze stanowią część języka HTML i składają się z czterech części: 1. Początkowego znacznika <form> Wewnątrz niego muszą zostać ustawione argumenty action i method. Pierwszy z nich określa adres URL lub ścieżkę do innego programu, który otrzyma dane wprowadzone w formularzu. Drugi określa metodę wysłania danych: a) GET stosując tą metodę, zmienne przesyłane są w adresie strony WWW. Aby wysłać samemu zmienną w adresie strony, należy wpisać znak zapytania, a następnie nazwę i opcjonalnie jej wartość, np. index.php?str=wartosc oznacza, że do strony index.php została przesłana zmienna str o wartości wartosc. Należy pamiętać, że nie można wysyłać polskich liter w adresie strony! Jeżeli chcemy przesłać kilka zmiennych, musimy oddzielić je znakiem &, np. index.php?str=0&action=select. Aby odczytać wartość takiej zmiennej za pomocą PHP, piszemy $_GET[ nazwa_zmiennej ]. Dobrym zwyczajem jest tworzenie zmiennych lokalnych o takiej nazwie jak nazwa zmiennej pobranej z adresu, na przykład $str = $_GET[ str ]. b) POST gdy wysyłasz dane metodą POST do skryptu PHP, zostaną one umieszczone w tablicy $_POST, która jest tablicą superglobalną, czyli można się do niej odwołać w każdym miejscu kodu bez dodatkowych zabiegów. Metoda POST nie narzuca ograniczenia ilości przesyłanych danych, dlatego jest z powodzeniem stosowana w ogromnej większości formularzy na stronach WWW. Dodatkowym jej atutem jest fakt, że podczas wysyłania danych użytkownik nie może podejrzeć ich treści, jak to ma miejsce przy stosowaniu metody GET. Ta właściwość POST czyni ją najlepszym rozwiązaniem także przy przesyłaniu danych autoryzacyjnych. Metoda ta służy także do wysyłania plików. 2. Zawartości formularza, czyli pól wejściowych. W polach tych użytkownik wpisuje dane lub wybiera opcje w przypadku przycisków opcji. Pole wejścia musi zawierać argumenty type, id i name oraz może posiadać dodatkowe argumenty. Listę argumentów można znaleźć na stronie str. 128

129 Istnieje kilka typów pól wejściowych. Poniżej znajduje się lista najbardziej popularnych: a) Tekst (text) używane do pobrania ciągu znakowego. Posiada atrybut maxlength określający maksymalną liczbę znaków, jaką można wpisać w polu. Domyślną zawartość pola należy wpisać przy argumencie wartości value. Definicja tego pola wygląda następująco <input type= text id= nazwa_pola name= nazwa_pola argumenty /> b) Tekst (wieloliniowy) (textarea) pole to w przeciwieństwie do pola typu text, umożliwia wprowadzenie tekstu w wielu liniach. Jest zalecane przy wpisywaniu dużych tekstów. <textarea id= nazwa_pola name= nazwa_pola dodatkowe_argumenty>tekst</textarea> c) Opcja (checkbox) umożliwia użytkownikowi wyłączenie lub wyłączenie opcji. Może on zaznaczyć więcej niż jedną opcję, a każda z nich powinna posiadać przypisany argument wartość (value) <input type= checkbox id= nazwa_pola name= nazwa_pola value= wartość_pola dodatkowe_argumenty />Nazwa opcji d) Przełącznik (radio) przypomina wybór opcji, ale w danej grupie włączona może być tylko jedna z nich. Poszczególne opcje mają przypisaną wartość (value) <label><input type="radio" id= nazwa_pola1 name="nazwa_pola" value="wartość_pola1" dodatkowe_argumenty/>nazwa opcji1</label> <label><input type="radio" id= nazwa_pola2 name="nazwa_pola" value="wartość_pola2" dodatkowe_argumenty/>nazwa opcji2</label> str. 129

130 e) Lista rozwijana (select) umożliwia użytkownikowi wybór jednego (lub wielu) elementów listy. Ponownie jej elementy mają przypisany argument value. <select id= nazwa_pola name="nazwa_pola"> <option value="wartość_opcji1" dodatkowe_argumenty>opis opcji1</option> <option value="wartość_opcji2" dodatkowe_argumenty >Opis opcji2</option> </select> f) Hasło (password) ukrywa ono, to co wpisze użytkownik, wstawiając gwiazdki. W ten sposób inne osoby nie widzą, co zostało wpisane. INFO <input type= password id= nazwa_pola name= nazwa_pola dodatkowe_argumenty /> g) Ukryte pole (hidden) jest to niewidzialne, niemożliwe do zmiany przez użytkownika pole. Zazwyczaj służą one do przesyłania określonych danych, o których istnieniu nie chcemy, aby użytkownik wiedział, a które są nam w jakimś celu potrzebne <input type= hidden id= nazwa_pola name= nazwa_pola argumenty/> Nazwa pola wejściowego będzie widziana przez PHP jako jedna ze zmiennych $_GET lub $_POST. 3. Przyciski lub obrazki akcji służą one do wykonywania zdefiniowanych przez programistę operacji na formularzu np. wysyłanie, czyszczenie lub wykonywanie innych akcji (np. wyłączenia strony z formularzem). Są z nimi związane typy submit, reset, image, file itd. <input type= submit id= nazwa_pola name= nazwa_pola argumenty /> lub str. 130

131 <button type="submit"> Skrypt do wykonania po wciśnięciu przycisku </button> 4. Znacznik zamykający formularz </form> Teraz nie powinno być już żadnych problemów ze zrozumieniem treści kodu formularzy. str. 131

132 Rozdział 8.2 Walidacja danych użytkownika Planując pobierać na swojej stronie pobieranie danych od użytkownika, trzeba przygotować się na pomyłki odwiedzających. Może być to równie dobrze przypadkowa literówka, jak również działanie mające na celu uszkodzenie systemu. Najczęściej ludzie popełniają błędy typograficzne (przestawienie znaków) lub w formacie tekstu. Do błędów celowych można zaliczyć podawanie tekstu zamiast liczby, niepodawanie wymaganych danych, lub próby zdestabilizowania bazy danych przez przekazanie specjalnych znaków. Niezależnie od powodów skrypty powinny być przygotowane na obsługę niepoprawnych danych. Jeśli zostanie wykryty błąd, należy ponownie wyświetlić stronę formularza wraz z wyjaśnieniem popełnionego błędu. Jeśli przyjrzymy się mechanizmowi przekazywania danych z formularza do aplikacji, to zauważymy dwa newralgiczne punkty: 5. moment wysłania formularza przez przeglądarkę oraz 6. moment odebrania danych przez skrypt uruchomiony na serwerze. Pierwszym punktem walidacji zmiennych jest moment wysyłania wypełnionego formularza przez przeglądarkę (tj. od użytkownika do serwera). Przeglądarka może w pewnym ograniczonym stopniu stwierdzić czy dane wysyłane do skryptu są poprawne czy nie. W przypadku błędnego wypełnienia formularz w ogóle nie jest wysyłany. Przeglądarka wyświetla komunikat diagnostyczny i oczekuje na ponowne wypełnienie. Ponieważ kod sprawdzający poprawność danych jest w tym przypadku wykonywany przez przeglądarkę (czyli na komputerze użytkownika), metodę taką nazywamy walidacją po stronie klienta. Walidacja danych przez przeglądarkę jest realizowana zazwyczaj w języku JavaScript. Zaletą stosowania tej metody jest wygoda użytkownika: informacje o ewentualnych błędach są wyświetlane natychmiast. Przeglądarka nie komunikuje się z serwerem, dzięki czemu unikniemy sytuacji, w której użytkownik wypełnia formularz, przesyła go na serwer i czeka pewien odcinek czasu tylko po to, by zobaczyć komunikat informujący o błędach. Wadą natomiast jest możliwość obejścia zabezpieczeń. Wystarczy w tym celu utworzyć własną stronę z formularzem pozbawionym kodu JavaScript, wyłączyć wykonywanie kodu str. 132

133 JavaScript w przeglądarce lub wysłać odpowiednio spreparowane zapytanie HTTP. Metody tej nie wolno traktować jako zasadniczego zabezpieczenia aplikacji! Drugim momentem, w którym powinniśmy się przyjrzeć danym pochodzącym z formularza, jest początek wykonania skryptu przetwarzającego dane. Zanim rozpoczniemy proces przetwarzania (np. wykonywanie transakcji bazodanowych), należy zweryfikować poprawność otrzymanych wartości. Tym razem kod analizujący poprawność danych jest wykonywany przez serwer, zatem mówimy o walidacji po stronie serwera. Należy podkreślić wagę walidacji zmiennych po stronie serwera. Jest to kluczowe zabezpieczenie aplikacji. Od walidacji zmiennych na początku skryptu zależy bezpieczeństwo całej aplikacji. Wszelkie dane pochodzące od użytkownika, a zatem także dane przekazane za pomocą formularzy, należy w skrypcie PHP traktować jako potencjalnie niebezpieczne. Pierwszym etapem działania skryptu powinna być walidacja wszystkich zmiennych. Zwróćmy uwagę, że weryfikacja po stronie klienta odbywa się bez dostępu do bazy danych czy systemu plików. Zatem sprawdzenie takie nie może być pełne. Nie możemy sprawdzić, czy podana wartość jest poprawnym identyfikatorem zawartym w bazie danych bądź poprawną nazwą pliku z wybranego folderu. Jedyne, co możemy sprawdzić, to czy ma ona odpowiednią długość, czy zawiera wyłącznie dozwolone znaki oraz czy ma odpowiednią strukturę. Do walidacji danych po stronie użytkownika użyjemy przedstawionego w Rozdziale 4 JavaScript Form Validation. By skorzystać z tego narzędzia, należy wpierw zaimportować plik JavaScript, w którym zostało zaimplementowane: <script type="text/javascript" src="js/gen_validatorv4.js"></script> Kolejnym krokiem jest tworzenie formularza i nadanie przypisanie mu jakiegoś identyfikatora za pomocą atrybutu id. Ostatnią operacją, którą musimy wykonać, jest utworzenie po zamknięciu znacznika formularza zasad, zgodnie z którymi zostanie sprawdzony formularz, zgodnie z przykładem: str. 133

134 <script language="javascript" type="text/javascript" xml:space="preserve"> //<![CDATA[ var frmvalidator = new Validator("identyfikator_formularza"); //Określenie rodzajów wyświetlenia błędów np. frmvalidator.enableonpageerrordisplay(); frmvalidator.enablemsgstogether(); //Określenie zasad walidacji danychnp. frmvalidator.addvalidation("nazwa_pola_z_formularza","typ_walidacji"," Opis błędu, w razie niepowodzenia walidacji", [dodatkowe opcje]); frmvalidator.addvalidation("pricefrom","num","cena musi być liczbą."); //]]> </script> Dokładna dokumentacja do tego narzędzia znajduje się na stronie Do walidacji danych po stronie serwera będziemy używać języka PHP. Oto przykładowe funkcje, za pomocą których można dokonać sprawdzenia poprawności danego typu danych: liczby sprawdzenia, czy podany tekst jest liczbą, można dokonać za pomocą funkcji: is_numeric(wartość_zmiennej, is_int(wartość zmiennej), is_float(wartość_zmiennej) itp. funkcje te sprawdzają, czy podana wartość zmiennej jest liczbą w zadanym formacie, zwracają wartość PRAWDA, jeśli jest, lub wartość FAŁSZ, jeśli nie Aby sprawdzić, czy jedna liczba jest większa od drugiej, wystarczy użyć znaków porównania tj. >, <, >=, <= lub/i ==. str. 134

135 daty aby sprawdzić, czy podany ciąg znaków jest datą, można użyć funkcji checkdate(miesiąc, dzień, rok) ale wymaga to od nas upewnienia się, że użytkownik podał datę w poprawnym formacie, a następnie odczytania jej i przesłania do funkcji. Zwraca ona wartość PRAWDA, jeśli podana data istnieje, lub FAŁSZ, jeśli nie. Do sprawdzenia poprawności daty można użyć również wyrażeń regularnych lub zaproponowanych na stronie innych funkcji, stworzonych przez internautów. Wyrażenia regularne to w informatyce teoretycznej ciągi znaków pozwalające opisywać języki regularne. W praktyce znalazły bardzo szerokie zastosowanie, pozwalają bowiem w łatwy sposób opisywać wzorce tekstu, natomiast istniejące algorytmy w efektywny sposób określają, czy podany ciąg znaków pasuje do wzorca lub wyszukują w tekście wystąpienia wzorca. Wyrażenia regularne w praktycznych zastosowaniach są zapisywane za pomocą bogatszej i łatwiejszej w użyciu składni niż ta stosowana w rozważaniach teoretycznych. Użyteczne linki: - umożliwia tworzenie wyrażenia regularnego na podstawie wpisanej przykładowej wartości pasującej do wzorca w wybranym przez użytkownika języku programowania - pozwala na sprawdzenie, czy wpisane wyrażenie regularne działa poprawnie, poprzez wpisanie wartości, która na pewno pasuje do tego wyrażenia. Jeśli pojawi się błąd, oznacza to, że wpisane wyrażenie jest niepoprawne. Aby sprawdzić czy podana wartość pasuje do wyrażenia regularnego w języku PHP, należy wywołać funkcję: str. 135

136 preg_match( wyrażenie_regularne, tekst_do_sprawdzenia, [tablica_do_której_zostaną_zapisane_wyniki_porównania], [flagi], [od_którego_znaku_tekstu_zacząć_sprawdzenie] ) np. preg_match("^[_a-z0-9- ]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$^", testing_mail@o2.pl ) sprawdza, czy użytkownik wpisał poprawnie adres . Gdy wiemy że użytkownik poprawnie wpisał daty i chcemy je porównać, można użyć funkcji strtotime( data_w_postaci_tekstu ) która zwraca liczbę całkowitą odpowiadającą wpisanej dacie, a następnie użyć operatorów porównania. czas walidacji czasu również można dokonać za pomocą wyrażeń regularnych do sprawdzenia poprawności podanego adresu należy użyć wyrażeń regularnych, zgodnie z przykładem w Wyrażenia regularne. str. 136

137 Rozdział 8.3 Tworzenie zapytań do wyszukiwania danych w bazie MySQL Najważniejszym chyba poleceniem SQL jest SELECT. Służy ono do wyszukiwania w bazie tych wierszy z tabel, które spełniają zadane kryteria. Polecenie to może być wykonywane z całym szeregiem opcji i na różnorodne sposoby. Składnia polecenie SELECT jest następująca: SELECT [opcje] pozycje FROM nazwy_tabel [WHERE warunek] [GROUP BY rodzaj_grupowania] [HAVING wartość_funkcji] [ORDER BY porządek sortowania] [LIMIT limit] ; Pozycjami są zazwyczaj kolumny wchodzące w skład podanych tabel, ale mogą być nimi również rezultaty wykonania jakiegoś wyrażenia np. funkcji. Po słowie SELECT można wypisać dowolną liczbę kolumn. Aby wyświetlić wszystkie kolumnę znajdujące się w podanych tabelach, zamiast wypisywać je kolejno, można użyć znaku *. W celu ograniczenia liczby wyświetlanych wierszy należy określić kryteria wyszukiwania. Dokonuje się tego za pomocą klauzuli WHERE. Można w niej stosować operatory porównań, operator LIKE porównujące podciągi znaków, wyrażenia regularne z pomocą REGEXP/ALIKE. W poniższej tabeli przedstawiono podstawowe operatory, których można użyć wraz z klauzulą WHERE (Tabela 7). str. 137

138 Tabela 7 Podstawowe operatory klauzuli WHERE Operator Nazwa (jeśli jest stosowana) Przykład Opis = równy Wartość=3 > większy od Wartość>10 < mniejszy od Wartość<10 >= większy lub równy Wartość>=10 Sprawdza, czy obie wartości są sobie równe Sprawdza, czy pierwsza wartość jest większa od drugiej Sprawdza, czy pierwsza wartość jest mniejsza od drugiej Sprawdza, czy pierwsza wartość jest większa lub równa od drugiej <= mniejszy lub równy Wartość<=10 Sprawdza, czy pierwsza wartość jest mniejsza lub równa od drugiej <> różny Wartość<>0 Sprawdza, czy dwie wartości różnią się od siebie IS NOT NULL Wartość IS NOT NULL Sprawdza, czy pole ma nadaną wartość IS NULL Wartość IS NULL Sprawdza, czy pole jest puste BETWEEN IN NOT IN Ilość BETWEEN 0 AND 10 Wartość IN ( 0, 10 ) Wartość NOT IN ( 0, 10 ) Sprawdza, czy wartość jest większa lub równa minimalnej wartości i jednocześnie mniejsza lub równa wartości maksymalnej Sprawdza, czy wartość należy do określonego zbioru wartości Sprawdza, czy wartość nie należy do określonego zbioru wartości str. 138

139 LIKE wyszukiwanie wzorca Wartość LIKE %wzorzec% Sprawdza, czy wartość pasuje do podanego wzorca NOT LIKE wyszukiwanie wzorca Wartość NOT LIKE %wzorzec% Sprawdza, czy wartość nie pasuje do podanego wzorca REGEXP/ALIKE wyrażenie regularne Wartość REGEXP wyrażenie Sprawdza, czy wartość pasuje do określonego wyrażenia regularnego Wyszukiwanie danych w wielu tabelach polega na tzw. łączeniu tabel (ang. join). Prowadzi ono do połączenia dwóch lub więcej tabel w celu odnalezienia związków między zapisanymi w nich danymi. Choć zrozumienie zasady operacji łączenia nie sprawia trudności, należy ona do bardzo wyrafinowanej i złożonej operacji języka SQL. Występuje tylko kilka rodzajów złączeń. Poniżej omówiono dwa najważniejsze, stosowane przy konstrukcji panelu. Złączenie wewnętrzne łączenie wewnętrzne tabel (INNER JOIN) kojarzy ze sobą rekordy występujące w dwóch lub więcej tabelach i zwraca w wyniku tylko pasujące rekordy tzn. o równych wartościach. Złączenie wewnętrzne może być zdefiniowane w sposób jasno określony (wyraźny) lub domniemany. Złączenie domniemane jest bardziej intuicyjne i najczęściej spotykane. Przykładowe zapytanie: SELECT * FROM tab1, tab2 WHERE tab1.id = tab2.id lub SELECT * FROM tab1 INNER JOIN tab2 ON tab1.id = tab2.id Złączenie zewnętrzne łączenie zewnętrzne tabel (OUTER JOIN) jest rozszerzeniem złączenia INNER JOIN. OUTER JOIN pozwala na włączenie do tabeli wynikowej rekordów, które kwalifikują się do tabeli wynikowej na podstawie polecenia INNER JOIN i dodatkowo włączyć wybrane rekordy nie spełniające warunków zapytania. Złączenie zewnętrzne może przybrać następujące postacie: str. 139

140 o Złączenie lewe LEFT OUTER JOIN w złączeniu zewnętrznym lewym zwracane są wszystkie wiersze występujące w tabeli z lewej strony, a wiersze z prawej tabeli, które nie zostały znalezione, wypełnione są pustymi wartościami (null). SELECT * FROM Tab1 LEFT OUTER JOIN Tab2 ON Tab1.ID = Tab2.ID; o Złączenie prawe RIGHT OUTER JOIN w złączeniu zewnętrznym prawym zwracane są wszystkie wiersze występujące w tabeli z prawej strony, a wiersze z lewej tabeli, które nie zostały znalezione, wypełnione są pustymi wartościami (null).. SELECT * FROM Tab1 RIGHT OUTER JOIN Tab2 ON Tab1.ID = Tab2.ID; o Złączenie pełne FULL OUTER JOIN w rezultatach zapytania SQL obecne są wiersze złączone wewnętrznie, rozszerzone o rekordy nie zwrócone z obydwu tabel, wypełnione pustymi wartościami. Nie występuje ono w bezpośredni sposób w MySQL. Aby je uzyskać, należy wykonać sumę zbiorów zapytań złączenia prawego oraz lewego, jak na zaprezentowanym na następnej stronie przykładzie. W celu uszeregowania wyszukanych wierszy w określonym porządku należy użyć klauzuli ORDER BY. Po niej należy podać nazwę kolumny, zgodnie z którą nastąpi sortowanie. Domyślnym porządkiem sortowania jest porządek rosnący (ASC). Można również zastosować porządek malejący dodając po nazwie kolumny słowo kluczowe DESC. Często istnieje konieczność określenia, ile wierszy spełnia dane kryteria, jaka jest średnia pola lub zastosować inną tzw. funkcję agregującą. Jest to możliwe dzięki klauzuli GROUP BY. Klauzula HAVING umożliwia wybór wierszy spełaniających podane kryteria po grupowaniu. Ostatnia klauzula (LIMIT) ogranicza ilość wierszy wyniku zapytania. Przykładowe zapytanie, które stosujemy przy pobieraniu danych o produktach wygląda następująco: str. 140

141 (SELECT [lista_kolumn] FROM PD LEFT OUTER JOIN SD ON PD.PDSDId = SD.SDId LEFT OUTER JOIN PDF ON PDF.PDFPDId = PD.PDId LEFT OUTER JOIN PF ON PDF.PDFPFId = PF.PFId LEFT OUTER JOIN PDG ON PDG.PDGPDId = PD.PDId LEFT OUTER JOIN PG ON PDG.PDGPGId = PG.PGId LEFT OUTER JOIN PDU ON PDU.PDUPDId = PD.PDId LEFT OUTER JOIN PU ON PDU.PDUPUId = PU.PUId) UNION (SELECT [lista_kolumn] FROM PD RIGHT OUTER JOIN SD ON PD.PDSDId = SD.SDId RIGHT OUTER JOIN PDF ON PDF.PDFPDId = PD.PDId RIGHT OUTER JOIN PF ON PDF.PDFPFId = PF.PFId RIGHT OUTER JOIN PDG ON PDG.PDGPDId = PD.PDId RIGHT OUTER JOIN PG ON PDG.PDGPGId = PG.PGId RIGHT OUTER JOIN PDU ON PDU.PDUPDId = PD.PDId RIGHT OUTER JOIN PU ON PDU.PDUPUId = PU.PUId) ZAPYTANIE1 UNION ZAPYTANIE2 tworzy sumę zbiorów wyników Zapytanie1 i Zapytanie2, jeżeli oba zapytania mają takie same kolejne kolumny, w innym przypadku zapytanie nie wykona się str. 141

142 Rozdział 8.4 Działanie formularzy stworzonych w panelu administracyjnym Poniżej omówimy kolejne etapy działania formularzy, które zostały stworzone w naszej aplikacji (Rysunek 11): Rysunek 11 Zasada działania formularzy wyszukiwania danych str. 142

143 1. Użytkownik wywołuje jedną z podstron panelu administracyjnego z poziomu strony index.php. 2. W przypadku każdej strony następuje sprawdzenie, czy użytkownik nie wywołał modułu zaznaczania danych (plik result_selection.php). Jeżeli wywołano wyszukiwanie danych, tablica zaznaczeń dla danej podstrony zostaje wymazana (tablice $_SESSION[ userviews ][$str][ result_selection ]), gdyż za chwilę zostaną wczytane nowe dane, które nie muszą pokrywać się z istniejącymi numerami wierszy. Następnie sprawdzane jest, czy użytkownik postanowił zaznaczyć jakieś wiersze. Dowiadujemy się o tym patrząc, czy została ustawiona zmienna $_GET[ id ]. Jeśli została ustawiona i jest ona liczbą, która istnieje w tabeli $_SESSION[ userviews ][$str][ result_ids ] (zmienna ta przechowuje numer ID wierszy, uzyskanych w wyniku wykonania zapytani SQL), następuje dodanie tej wartości do tablicy zaznaczeń. W innym razie użytkownik zostanie ostrzeżony o błędzie. 3. Kolejnym etapem tworzenia podstrony jest zbudowanie menu dodatkowego (plik menu_additional.php). Zawiera ono informacje o możliwych do wykonania operacjach na stronie w danym momencie, zadaniach zalogowanego użytkownika do wykonania i jego przywilejach na tej podstronie. Pierwsza część ustalana jest przede wszystkim na podstawie ilości zaznaczonych wierszy w wynikowej tabeli. Jeśli nie został zaznaczony żaden wiersz, użytkownik zobaczy opcję umożliwiającą dodawanie danych. Jeśli zaznaczony jest jeden wiersz, użytkownik ujrzy możliwość edytowania tego wiersza, a dla niektórych podstron dodatkowo opcję utworzenia kopii tego wiersza. Jeśli zaznaczone są dwa lub więcej wierszy, jedyną możliwą do wyboru opcją będzie edycja wierszy. Druga część (zadania) określana jest na podstawie danych pobranych z bazy danych z tabeli WT za pomocą funkcji workertasks(), do której przesyłamy jako argument numer ID zalogowanego użytkownika (więcej informacji o tej funkcji w Załączniku numer 1). Ostatnia informacja (przywileje) wyświetlane są na podstawie tabeli $_SESSION[ userprivs ], którą tworzymy w momencie logowania się użytkownika do panelu (patrz Rysunek 9 krok 12). Daje ona szybki wgląd do tego, co dana osoba może a czego nie może na tej podstronie. str. 143

144 4. Na tym etapie (plik content_authorization.php) następuje sprawdzenie poprawności danych przesłanych przez użytkownika i przywilejów (ta część została omówiona w Rozdziale 7 na Rysunku 10 w kroku 7) oraz wczytanie kolumn do utworzenia zapytań SQL dla danej podstrony i tabeli wynikowej, jeżeli nie zostały one jeszcze wczytane. Dane o kolumnach przechowywane są w tabeli $_SESSION[ userviews ][$str][ filters ]. Pobierane są one z bazy za pomocą procedury składowanej UserView(), która jako argumenty przyjmuje ID użytkownika i numer widoku. Jeśli nie uda się znaleźć tych danych, pojawia się komunikat błędu i skrypt kończy pracę. 5. Jeżeli pojawiły się jakiekolwiek błędy w kroku 4., wyświetlane są komunikaty o błędach i skrypt również tutaj kończy pracę. 6. W przypadku gdy wszystkie sprawdzenia wykonały się poprawnie, pobierana jest zawartość podstrony o nazwie numer_podstrony.php. 7. Po deklaracji wyglądu formularza następuje wywołanie pliku search.php. Jeżeli użytkownik postanowił zmienić sortowanie danych lub wyszukuje nowe dane, wszystkie operacje wykonywane są w tym skrypcie. Zmiana sortowania wykrywana jest na podstawie zmiennej $_GET[ changesort ], która, jeśli posiada przypisaną do niej wartość, oznacza to, że została zmieniona kolumna sortowania. W innym razie zmianie ulega jedynie kolejność z rosnącej na malejącą i vice versa. 8. W dalszej części kodu następuje przygotowanie danych do wykonania zapytania do bazy danych, jeżeli przeglądający stronę wyszukuje danych. Tworzone są zmienne: $select tablica przechowująca nazwy kolumn dla zapytania; tworzona jest na podstawie zmiennej $_SESSION[ userviews ][$str][ filters ] $from zmienna odpowiedzialna za wywołanie poprawnej funkcji, która sprawdzi formularz, a następnie wykona zapytanie do bazy $where jest tablica zawierającej ograniczenia dla zapytania, tworzona jest na podstawie przesłanych w formularzu danych w zmiennej $_POST i sprawdzana przez funkcję select_where_check() (więcej o tej funkcji w Załączniku numer 1) $orderby jest tablica zawierającej informacje, według których kolumn ma nastąpić sortowanie i w jakiej kolejności $limit zawiera informacje o ograniczeniu ilości wierszy w wyniku zapytania str. 144

145 Jeżeli podczas walidacji danych przez funkcję select_where_check(), nie pojawią się żadne błędy, wykonywane jest zapytanie do bazy danych przez funkcję select_result() (więcej o niej w Załączniku numer 1), a jego wyniki zapisywane są do zmiennych: $_SESSION[ userviews ][$str][ result ] przechowuje tablicę z wynikami zapytania, $_SESSION[ userviews ][$str][ result_ids ] przechowuje listę numerów ID znalezionych wierszy, $_SESSION[ userviews ][$str][ result_count ] przechowuje ilość znalezionych wierszy spełniających warunki zapytania. Jeżeli w dotychczasowych krokach wystąpią jakieś błędy, proces wykonywania dalszych operacji jest zatrzymywany, a użytkownik uzyskuje o nich informacje. Na końcu wyświetlana jest aktualna zawartość tabeli $_SESSION[ userviews ][$str][ result ]. str. 145

146 Rozdział 9. Wykonanie formularzy do modyfikacji danych W tym rozdziale omówimy następujące zagadnienia: Instrukcje SQL umożliwiające modyfikację danych w bazie Czym są transakcje i jak się je stosuje Zasadę działania stworzonego systemu formularzy str. 146

147 Rozdział 9.1 Instrukcje SQL umożliwiające modyfikację danych w bazie Zasada tworzenie formularzy do modyfikowania danych jest podobna do omówionej w poprzednim rozdziale dla wyszukiwania danych. Jedyną różnicą są instrukcje SQL, których należy użyć przy ich wykorzystaniu: Dodawanie danych: Aby umieścić nowy wiersz w tabeli bazy danych, należy użyć instrukcji (omówiono ją również w Rozdziale 3.5) INSERT INTO nazwa_tabeli VALUES(wartość_kolumny1, wartość_kolumy2, ) np. INSERT INTO LC VALUES (null, Uganda ) Dodając dane do tabeli należy pamiętać o następujących kwestiach: o liczba kolumn w instrukcji musi zgadzać się z ilością kolumn w tabeli, o typy danych wartości umieszczonych w zapytaniu muszą być zgodne z typami kolumn w tabeli, o dane typu tekstowego i czasu/daty należy umieszczać w cudzysłowach, o w przeciwieństwie do systemu stosowanego w Polsce, liczby dziesiętne w bazie MySQL zapisujemy z kropką, nie z przecinkiem!, o jeżeli chcemy wstawić wartość pustą do kolumny piszemy null, bez cudzysłowów, o jeżeli wpiszemy wartość null w polu autonumerowanym, zostanie ona automatycznie zastąpiona następną możliwą do wpisania liczbą, np. jeśli w tabeli znajdowały się 4 wiersze, dodając następny nie musimy wpisywać 5 a null, gdyż system automatycznie wpisze 5 w tej kolumnie Edycja danych: Jeżeli chcemy uaktualnić dane, musimy użyć instrukcji UPDATE nazwa_tabeli SET nazwa_kolumny1=wartosc1, nazwa_kolumny2=wartosc2 [WHERE warunek] np. UPDATE PD SET PDName= Nowa nazwa produktu, PDVAT=23 WHERE PDId=5, uaktualni nazwę i stawkę podatku VAT produktu o ID równym 5 str. 147

148 Należy pamiętać, aby pisać warunek WHERE, jeżeli chcemy uaktualnić tylko część wierszy. Nienapisanie go spowoduje uaktualnienie wartości dla wszystkich wierszy w tabeli! Usuwanie danych: Aby usunąć dane, należy zastosować komendę DELETE FROM nazwa_tabeli [WHERE warunek] np. DELETE FROM PDU WHERE PDUPDId=5, spowoduje usunięcie przypisanie jednostki do produktu o ID równym 5 Ponownie należy zachować ostrożność, gdyż niepodanie warunku WHERE spowoduje usunięcie wszystkich danych z tabeli! str. 148

149 Rozdział 9.2 Transakcje Transakcje są mechanizmem pomagającym w utrzymaniu spójności bazy danych, szczególnie w przypadku wystąpienia błędu, awarii systemu lub niespodziewanego zerwania połączenia. Są one zapytaniem lub serią zapytań, dla których zagwarantowane jest, że zostaną wykonane w całości lub też w całości niewykonane. Istotą transakcji jest to, że przekształca ona jeden spójny (bezbłędny) stan bazy w drugi spójny. Aby pokazać, dlaczego transakcje są tak ważne, przeanalizujmy przykład aplikacji bankowej. Wyobraźmy sobie sytuację, gdy chcemy przesłać pieniądze z jednego konta bankowego na drugie. Wymaga to zmniejszenia stanu jednego konta i zwiększenie o tą samą kwotę stanu drugiego, co można zrealizować co najmniej dwoma zapytaniami. Niezwykle ważne jest to, aby wszystkie instrukcje wykonały się w całości lub nie zostały wykonane w ogóle! Jeżeli po zmniejszeniu stanu konta pierwszego, a przed zwiększeniem stanu drugiego, zostanie wyłączone zasilanie, to jaki wynik otrzymamy? Transakcje powinny spełniać cztery wymagania (tzw. wymagania ACID): Atomowość (ang. Atomicity) transakcja powinna być atomowa, czyli powinna wykonać się w całości lub wcale; Spójność (ang. Consistency) transakcja powinna pozostawić spójną bazę danych; Izolacja (ang. Isolation) oznacza, iż jeżeli dwie transakcje wykonują się współbieżnie, to zazwyczaj (zależnie od poziomu izolacji) nie widzą zmian przez siebie wprowadzanych. Poziom izolacji w bazach danych jest zazwyczaj konfigurowalny i określa jakich anomalii możemy się spodziewać przy wykonywaniu transakcji, przykładowe typy izolacji to: o readuncommitted najniższy poziom izolacji, jedna transakcja może odczytywać wiersze, na których działają inne transakcje, o readcommitted transakcja może odczytywać tylko wiersze zapisane, o repeatableread transakcja nie może czytać, ani zapisywać, na wierszach odczytywanych, bądź zapisywanych w innej transakcji, o serializable pełna izolacja; Trwałość (ang. Durability) oznacza, że system potrafi uruchomić się i udostępnić spójne, nienaruszone i aktualne dane zapisane w ramach zatwierdzonych transakcji, na przykład po nagłej awarii zasilania. str. 149

150 Transakcja, która została trwale zapisana w bazie danych, jest nazywana transakcją zatwierdzoną, zaś transakcja, której rezultat nie został zapisany, a baza danych została przywrócona do stanu sprzed rozpoczęcia transakcji, nosi nazwę transakcji wycofanej. Aby rozpocząć transakcję, należy użyć instrukcji START TRANSACTION Po niej można wykonywać dowolną liczbę zapytań SQL. Po zakończeniu wykonywania instrukcji składających się na transakcję wyniki można zapisać w bazie danych, wpisując COMMIT lub wycofać, pisząc ROLLBACK W naszym projekcie transakcje są stosowane podczas usuwania danych, ich aktualizacji oraz dodawaniu, gdy następuje to w wielu tabelach równocześnie, w celu zachowania spójności danych. str. 150

151 Rozdział 9.3 Zasada działania stworzonego systemu formularzy do modyfikacji danych Formularze zaprezentowane w naszym panelu administracyjnym różnią się od na co dzień spotykanych. Zwykłe posiadają możliwość edytowania jedynie pojedynczego zbioru informacji lub wyświetlają oddzielne formularze do poszczególnych wierszy (przykładem może być edycja kilku rekordów w phpmyadmin). Tworząc ten panel postanowiłem wyjść naprzeciw pewnemu problemowi i umożliwić modyfikację wielu danych w jednym momencie, przy wykorzystaniu pojedynczego formularza. O jakim problemie mówię? Przedstawmy go na przykładzie. Na początku tego roku (2011), dokonano zmiany stawki podatku VAT z 22% na 23%. Zmiana ta wymusiła na sprzedawcach aktualizację tego pola w swoich bazach danych. Nie ma większego problemu, jeżeli ktoś ma bezpośredni dostęp do narzędzi typu phpmyadmin i potrafi używać instrukcji SQL. Gorzej gdy albo nie ma się takiej możliwości albo się tego nie potrafi. Mogło się wtedy okazać, że sprzedawcy pozostawiali starą stawkę VAT i obliczali ceny na piechotę, lub zmieniali stawki VAT dla każdego produktu oddzielnie, jeśli nie posiadali dobrego systemu do ich edycji. Problem jest tym większy, im większą ilością produktów sklep handluje. Podczas pracy w znanej firmie produkującej płatki śniadaniowe miałem możliwość przyjrzeć się stosowanej przez nich bazie danych i aplikacji internetowej ją obsługującej, napisaną przy wykorzystaniu technologii ASP.NET. Pozwalała ona dokonywanie zmian w wielu rekordach bazy danych jednocześnie, pozostając prostym i czytelnym narzędziem. Przy tworzeniu swojego panelu administracyjnego starałem się jak najlepiej oddać funkcjonalność i prostotę działania tego systemu przy wykorzystaniu technologii PHP. Jak to działa? Jeżeli użytkownik próbuje dodać nowe dane lub dokonuje edycji jednego wiersza, formularz modyfikacji danych niczym się nie wyróżnia (rysunek poniżej). str. 151

152 Jeżeli jednak zaznaczymy kilka wierszy do edycji, w formularzu mogą pojawić się dodatkowe kontrolki wyboru (typu checkbox), a znajdujące się obok nazwy pól przybiorą czerwony kolor: Jest to dla nas informacja, że dane w tych polach dla zaznaczonych wierszy różnią się! Dla pól, w których wartość została wyświetlona, oznacza to że są one takie same. Jeżeli zmienimy zawartość pola, dla którego dane były takie same, zostaną one zmienione dla wszystkich zaznaczonych wierszy. Jeżeli chcemy zaś ustalić wartość dla pól, które różnią się zawartością, musimy zaznaczyć pole wyboru i wpisać nową wartość, która zostanie im przypisana. str. 152