NTW - Bezp. sieci Lista nr 1 mgr inż. Adam Dudek

Wielkość: px

Rozpocząć pokaz od strony:

Download "NTW - Bezp. sieci Lista nr 1 mgr inż. Adam Dudek"

Andrzej Mazur
7 lat temu
Przeglądów:

1 HTML 5 i podstawy PHP NTW - Bezp. sieci Lista nr 1 mgr inż. Adam Dudek 1. HTML 5 <input type="color"> - wybór koloru <input type="date"> - wybór daty <input type="datetime"> wybór daty i czasu <input type="datetime-local"> - podobnie jak wyżej <input type=" "> - pole na <input type=" " placeholder="poczta@poczta.pl"> - jak wyżej + wartość domyślna <input type=" " placeholder="poczta@poczta.pl" required> - jak wyżej + opcja wymagania <input type="month" > - wybór miesiąca <input type="number" min="1" max="5"> - wartość liczbowa <input type="range" min="1" max="100" step="3" value="11"> - suwak <input type="search" > - pole szukania <input type="tel" pattern="[0-9]"> - telefon z opcją maski <input type="time" > - wybór czasu <input type="url" placeholder=" > - url + wartość domyślna <form action="index.html" method="get" autocomplete="on"><input type="text" id="listaopcji" list="zawartosclisty"> <datalist id="zawarrtosclisty"> - pole tekstowe z listą opcji + formularz z opcją autouzupełniania. semantyczny blok nagłówkowy <header> <h1>w bloku header</h1> <h2>można zawrzeć wiele </h2> <h3>rożnych nagłówków</h3> </header> semantyczna sekcja ogólny pojemnik na elementy, może zawierać dowolne elementy, wiele akapitów itp. Sekcja powinna stanowić jakiś spójny blok pełniący jakąś rolę w prezentowanym dokumencie. <h2>usługa płatna</h2> <p>wersja usługi dla tych co mają czym płacić.</p>

2 <h2>usługa bezpłatna</h2> <p>wersja dla tych co nie mają czym płacić</p> semantyczny artykuł reprezentuje samodzielną cześć dokumentu, która potencjalnie mogłaby by być opublikowane niezależnie od pozostałej treści. <article> <h1>taki sobie przykład artykułu</h1> <p>czas pokazać studentom jak działają artykuły</p> <h2>zagadnienie 1</h2> <p>co tu opowiadać...?</p> <h2>zagadnienie 2</h2> <p>jeszcze bardziej nic nie wiadomo...?</p> </article> <nav> sekcja linków lub jakiegoś menu nawigacyjnego <mark> tekst zaznaczony <progress>proszę czekać...</progress> pasek postępu bez położenia + tekst alternatywny <progress value="0.5">ukończono: 50%</progress> pasek postępu 50 %+ tekst alternatywny <progress value="75" max="100">ukończono: 75%</progress> pasek postępu + max + tekst alternatywny <meter> - pasek wyniku np. do prezentacji jakiejś wartości. Min i max to granice przedziału, niski, wysoki, optymalny to wartości pozwalające określić jaki kolor powinna mieć kontrolka w zależności od wartości (podawane w wartościach całkowitych lub procentowych w zależności od value <meter value="0.5">0.5</meter> <meter value="50" min="0" max="100">50 ( )</meter> <meter value="0.5" low="0.2" high="0.8">0.5</meter> <meter value="50" min="0" max="100" low="20" high="80" optimum="60">50 ( )</meter> <meter value="10" min="0" max="100" low="20" high="80">50 ( )</meter> <meter value="90" min="0" max="100" low="20" high="80">90 ( )</meter> <details> pozwala zaprezentować treść rozwijaną jeśli ma domyślnie open to zaczyna od wersji rozwiniętej <summary>szczgóły</summary> <p>szczegóły, które nie były od razu widoczne</p> </details> <footer> semantyczna stopka dokumentu Autor: <address>jan Kowalski (jan.kowalski@example.com)</address> <p>wszelkie prawa zastrzeżone</p> </footer>

3 <video width="192" height="240" controls> pozwala wyświetlić video bezpośrednio na stronie. Kolejne source pozwalają wskazać różne formaty video jako alternatywne (tabela z obsługiwanymi kodekami - <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'> <a href="plik.ogv">pobierz plik</a> </video> <audio controls> pozwala odtworzyć audio, pozostałe jak wyżej. <source src="muzyka.mp3" type='audio/mpeg'> <a href="muzyka.mp3">pobierz plik</a> </audio> <video poster="grafika.jpg" width="550" height="413" controls> znacznik video użyty do odtwarzania mp3 i wyświetlenia jednocześnie grafiki jako tła <source src="muzyka.mp3" type='audio/mpeg'> Pobierz plik w formacie: <a href="muzyka.mp3">mp3</a> </video> 2. Podstawy PHP PHP jest językiem skryptowym wykonywanym po stronie serwera, co w praktyce oznacza, że efektem działania skryptu jest kod html (oczywiście, może być jakikolwiek inny zrozumiały dla przeglądarki) odesłany przez serwer www na żądanie klienta. Plik zawierający kod php powinien posiadać stosowne rozszerzenie (aczkolwiek istnieję sposoby na obejście tego ograniczenia) i zawiera zazwyczaj zarówno kod html jak i skrypt. Najprostsza poprawna strona php: <html> <head> <title>tytul strony</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h1>moja pierwsza strona PHP</h1> <?php echo "<p>witam serdecznie </p>";?> </body> </html> 2.1 Dane z formularzy <?php echo 'Nazwisko - '.$nazwisko.'<br>'; echo 'Nazwisko - '.$_POST['nazwisko'].'<br>'; echo 'Nazwisko - '.$HTTP_POST_VARS['nazwisko'].'<br>';?> 2.2 Typy zmiennych Typy zmiennych typ nie wymaga jawnej deklaracji jest ustalany przez nadanie wartości danej zmiennej: Integer, Float, String, Boolean, Array, Object (typ ogólny dla obiektów wszystkich klas) np. $ilosc=0; $zmienna = 0.00; $zmienna = 'tekst'; $wartosc = (float)$ilosc; //klasyczne rzutowanie jak ktoś sobie życzy

4 2.3 Stałe define("vat", 0.22); 2.4 Operatory PHP implementuje i interpretuje takie same operatory jak C wprowadzając kilka nowości: === - operator identyczności oba operandy identyczne co do typu i wartości? operator trójkowy echo($liczba>0? 'Dodatnia':'Ujemna'); Operatory tablicowe: unia = (tablica zawierająca wszystkie elementy tablic sumowanych) równość == (zwraca true jeśli obie tablice mają te same elementy) identyczność === (te same elementy w tej samej kolejności) nierówność!= nieidentyczność!== 2.5 Instrukcja warunkowa funkcjonuje dokładnie tak samo jak w języku C 2.6 Instrukcja wyboru SWITCH j.w. 2.7 Pętle for, while, do while j.w. 2.8 Aby dołączyć zawartość innego skryptu php można skorzstać z funkcji include(nazwa), gdzie nazwa oznacza nazwę pliku z kodem, który chcemy dołączyć. Zadanie 1 (12 pkt.) Utworzyć stronę zawierającą formularz osobowy. Informacje o formacie w jakim powinny być wypełniane poszczególne pola powinny być umieszczone po prawej stronie elementów formularza. formularz powinien mieć włączoną opcję autouzupełaniania. W formularzu pobieramy: imię nazwisko datę urodzin adres telefon W przypadku adresu walidacja poprawności odbywać się powinna po stronie klienta. Pole telefon powinno korzystać z wzorca (pattern). Po załadowaniu formularza "focus" powinien zostać ustawiony na pole imię. Pola nazwisko ora powinny być obowiązkowe Formularz ten powinien wywoływać stronę zawierającą formularz będący rozbudowaną wersję powyższego formularza (te same pola + kilka nowych (według uznania - byle ciekawie pokazać możliwości formularzy w HTML 5, w tym month, range, url). Wcześniej wypełnione pola powinny po załadowaniu osiadać podpowiedzi (placeholder) o wartościach takich jakie wypełniono w kroku pierwszym). Zadanie 1 (18 pkt.) Przygotuj witrynę, która będzie odpowiadać uproszczonej książce kucharskiej. Strona startowa powinna zawierać mały formularz, który pozwala wybrać np. typ dania, czas przygotowania, stopień trudności (można zdecydować samemu). Dane z formularza zostają przekazane do skryptu php który bazując na szablonie zbudowanym w oparciu o semantyczne elementy html 5 wyświetla przepis na

5 stronie (do odpowiednich bloków np. tytuł, składniki, przygotowanie,...,stopka ładuje [include()] odpowiednie fragmenty z plików zewnętrznych). Nie zapomnij o zamieszczeniu materiału video do każdego z przepisów (nie musi być koniecznie idealnie pasujący merytorycznie). Do budowy strony należy wykorzystać wszystkie elementy przedstawione we wprowadzeniu do ćwiczenia, a także jakiś jeden dodatkowy (do wyboru), którego nie przedstawiono.

Podobne dokumenty

HTML5 Nowe znaczniki header nav article section aside footer

HTML5 Nowe znaczniki header nav article section aside footer Specyfikacja HTML5 wprowadza nowe znaczniki pozwalające w łatwy i intuicyjny sposób budować szkielet strony, który przez zmniejszenie ilości kodu jest czytelniejszy i łatwiejszy w utrzymaniu, pozwala poza