Podstawy technologii WWW

Transkrypt

1 Podstawy technologii WWW Ćwiczenie 8 PHP, czyli poczatki nowej, dynamicznej znajomosci Na dzisiejszych zajęciach rozpoczniemy programowanie po stronie serwera w języku PHP. Po otrzymaniu żądania serwer nie będzie już tylko zwracał statyczne pliki, ale będzie je generował w odpowiedzi na informacje otrzymane od użytkownika. I. Utwórz swoją pierwsza stronkę PHP. Plików z kodem napisanym w języku PHP nie możemy już tak po prostu otworzyć w przeglądarce. Aby móc z nich korzystać, musimy zainstalować na naszym komputerze: serwer aplikacji, prekompilator PHP i, co nam się wkrótce przyda, system zarzadzania bazą danych, np. MySQL. Wszystkie te elementy możemy zainstalować za jednym zamachem, instalując pakiet XAMPP. XAMPP jest kompletnie darmową, łatwą w instalacji dystrybucją Apache'a, zawierającą MariaDB, PHP i Perl. Paczka XAMPP została tak zbudowana, aby była łatwa w instalacji i w użyciu. Można ją pobrać ze strony Panel kontrolny pakietu po zainstalowaniu i uruchomieniu wygląda tak: Częstym przpadkiem przy pierwszym uruchomieniu, może być to, że standardowy dla WWW port 80 może być już zarezerwowany przez inną aplikację. Możemy sobie z tym problemem łatwo poradzić zmieniając w konfiguracji Apache a numer portu, na którym nasłuchuje na żądania HTTP. Aby to zrobić, klikamy na przycisku Config w lini przycisków dla Apache a, wybieramy 1

2 pierwsza opcję, i w pliku tekstowym, który nam się wyświetli zmienamy numer portu (po słowie Listen) z 80 na, na przykład, 81. Teraz możemy wystartować serwer Apache klikając na przycisku Start. Pomyślne uruchomienie serwera możemy poznać, między innymi, po tym, że zamiast przycisku Start, mamy teraz przycisk Stop, oraz po zielonym kolorze tła pod nazwą modułu Apache. Aby ułatwić sobie życie, możemy dodatkowo ustawić ten sam port w konfiguracji XAMPP-a, tak aby po kliknięciu na przycisku Admin, otwierała się nam domyślna strona pakietu. W tym celu klikamy na przycisk Config w prawym górnym rogu. W oknie dialogowym, które się pojawi, klikamy kolejny przycisk pokazany poniżej. 2

3 W odpowiednim polu podmieniamy numer portu i zapisujemy zmiany. Teraz po kliknięciu na przycisk Admin pojawi nam się strona znajdująca się pod adresem localhost:81/dashboard/. Nie widzimy tu nazwy pliku, ponieważ domyślnie brany jest plik o nazwie index (a taki plik w katalogu dashboard się znajduje). 3

4 Aby skorzystać z tego pakietu, musimy umieścić katalog ze swoją aplikacją (plikami PHT i innymi zasobami) w odpowiednim katalogu na dysku. Najprostszym sposobem jest kliknięcie na przycisk Explorer, który od razu przeniesie nas do katalogu pakietu XAMPP. Następnie wybieramy katalog htdocs. 4

5 Widzimy tu naszą znajomą nazwę dashboard, czyli katalog z plikami wyświetlanymi po kliknięciu na przycisk Admin. Tutaj też możemy dodać katalog dla naszej witryny (w przykładzie ma on, jakże wdzięczną, nazwę lab8). Katalog ten możemy otworzyć w środowisku Atom, w którym będziemy już dodawać poszczególne pliki. Na początek dodajemy standardowy plik index.php z nagłówkiem i prostym testem wstawianym do dokumentu HTML już za pomocą skryptowego języka PHP (składnia PHP). 5

6 Po zapisaniu tego pliku, możemy się do niego odwołać z przeglądarki podając znany nam już adres, ale z nazwą naszego katalogu, czyli localhost:81/lab8/. Dopisując kolejne funkcjonalności, wystarczy zapisać akutalną wersję pliku i odświeżyć stronę w przeglądarce. Po podejrzeniu źródła strony, nie widzimy tu żadnego kodu PHP (w odróżnieniu od stosowania JavaScript). Cały nasz kod wykonał się po stronie serwera, a przeglądarka otrzymała wygenerowany dokument HTML. 6

7 II. Dodaj strony w PHP realizujące następujące funkcjonalności: 1) Strona z formularzem składającym się z dwóch pól tekstowych na imię i nazwisko. Po kliknięciu na przycisk ma się pojawić stronka z przywitaniem (Witaj imię nazwisko!) i link powrotny do strony z formularzem (obsługa formularzy, metoda echo). 2) Dodaj do powyższego formularza listę rozwijaną z kolorami (czerwony, zielony, niebieski). Wartościami opcji w liście rozwijanej powinny być angielskie nazwy tych kolorów. Na stronie z przywitaniem, zamknij tekst przywitania w akapit. W definicji stylów na nagłówku strony, zdefiniuj styl dla akapitu określający kolor tekstu. Wartość dla tej właściwości pobierz z otrzymanego formularza. 3) Dodaj drugą parę stron. W pierwszej z nich zdefiniuj formularz z następującymi kontrolkami: dwa pola typu liczbowego, za pomocą których użytkownik będzie definiował ilość wierszy i kolumn, dwa pola typu liczbowego, za pomocą których użytkownik będzie definiował szerokość i wysokość komórki, dwa pola typu radio, do wskazania, czy wokół komórek tabeli ma być wyświetlane obramowanie, alby czy tabela ma nie posiadać obramowania. lista rozwijana z kolorami obramowania, pole tekstowe na tekst, który ma się pojawić w każdej z komórek tabeli. Na drugiej stronie, po kliknięciu na przycisk formularza, ma się wyświetlić tabela o podanej ilości wierszy i kolumn, z komórkami o podanym kolorze obramowania (jeżeli wybrano tą wersję), o podanej szerokości i wysokości, i o wskazanej zawartości. Ramkę i rozmiar komórek definiujemy oczywiście w stylach w nagłówku dokumentu. 7