Czego nauczysz się po ćwiczeniu 1 - Hello World
-
jak działa Internet oraz komunikacja pomiędzy serwerem a przeglądarką
-
jaka jest różnica między front-end developerem a back-end developerem
-
napiszesz pierwszą linię kodu w PHP i poznasz jej działanie
-
zapoznasz się z internetowym środowiskiem do uruchamiania kodu
Komunikacja w Internecie?
Otwierając stronę internetową uruchamiamy szereg czynności, które nie są widoczne dla zwykłego użytkownika. Pod spodem dzieje się przesył danych za pomocą zbioru reguł zwanych protokołem HTTP. Nasza przeglądarka internetowa prosi o dane (zdjęcia, czcionki, treść strony internetowej), wysyłając komunikat do serwera. Komunikat ten trafia do konkretnego komputera, zwanego serwerem, za pomocą adresu internetowego, czyli domeny np. www.coderslab.pl. W odpowiedzi otrzymuje dane i wyświetla je na ekranie. Z tego wynika, że na wstępie możemy wyróżnić dwa słowa kluczowe: przeglądarka oraz serwer. W praktyce każda z tych części jest obsługiwana przez innego programistę. Osoba, która zajmuje się kodem po stronie przeglądarki nazywana jest front-end developerem, natomiast osoba, która pisze kod wykonywany po stronie serwera nazywana jest back-end developerem.
Czym jest Front-end?
Wiemy już, że front-end developer zajmuje się kodem stron internetowych po stronie przeglądarki. W praktyce oznacza to, że jest on odpowiedzialny za WSZYSTKO co widzimy na ekranie. Z pomocą przychodzi mu szereg technologii umożliwiających tworzenie pięknych i interaktywnych stron internetowych.
Należą do nich m.in:
-
HTML - Język treści na stronie
-
CSS - Język stylu na stronie
-
JavaScript - Język programowania, umożliwiający używanie aplikacji (dodaje dynamiczności)
Czym jest Back-End?
Back-end developer jest to osoba, która odpowiada za to, że strona lub aplikacja internetowa działa i funkcjonuje tak, jak zakładał jej projektant. Jest on odpowiedzialny za tworzenie logiki biznesowej oraz całego zaplecza dla front-end developera. Z konkretnych umiejętności, z których korzysta back-end developer wymienić możemy:
-
języki programowania PHP, Ruby, Python, Java, .NET
-
bazy danych MySQL, MongoDB itp.
-
HTTP, CACHE, SESJE – konkretne mechanizmy, odpowiadające za dostarczanie dobrze działającej aplikacji
Do jego obowiązków należą zadania związane z poprawnym działaniem aplikacji i reagowaniem na błędy użytkownika, zapisywaniem i odczytywaniem danych z baz danych lub nawet łączeniem z innymi serwerami.
Poznaliśmy już trochę teorii i technologii jakie stoją za tym, że strony wyglądają i do tego jeszcze działają. Najfajniejsza część jest jednak jeszcze przed nami. Wykorzystanie w praktyce choćby jednej z wymienionych technologii pozwala poczuć prawdziwą moc komputerów i globalnej sieci Internetu.
Komunikacja z użytkownikiem
Wiemy już kto odpowiada za wygląd aplikacji internetowej, a kto za jej działanie.
My będziemy zajmowali się tym drugim zagadnieniem – co oznacza, że będziemy wykonywali zadania, za które odpowiada programista back-end. Za narzędzie pracy posłuży nam językiem programowania PHP. Od kiedy uczono programowania powstała tradycja, że pierwszą linijką kodu napisaną przez początkującego adepta programowania jest wyświetlenie napisu “Hello World”. Nie inaczej będzie z nami.
Jako narzędzia symulującego środowisko programistyczne PHP użyjemy repl.it. Jest to prosty i intuicyjny internetowy interfejs do uczenia się programowania.
Do wyświetlenia napisu na stronie internetowej z użyciem PHP służy komenda echo, po której należy podać w cudzysłowach lub nawiasach i cudzysłowach napis jaki ma zostać wyświetlony. Jeśli chcemy zakończyć polecenie musimy użyć znaku średnika.
//To jest komentarz w kodzie
echo "To jest napis pierwszy";
//Kolejny napis znajduje się po pierwszym napisie
echo ("Kolejny napis");Jeśli chcemy uruchomić kod, który przed chwilą napisaliśmy, musimy mieć poprawnie skonfigurowane środowisko programistyczne na swoim komputerze. Dla naszych potrzeb posłużymy się jednak takim środowiskiem dostępnym online na specjalnie do tego celu przygotowanej stronie. Pod poniższym adresem znajduje się już przykład kodu prędzej prezentowany. Wystarczy wcisnąć przycisk “run” aby uruchomić kod i tym samym wyświetlić odpowiednie napisy.
Zadanie 1
Zadanie polega na wstawieniu napisu Hello World między znaki cudzysłowu oraz uruchomieniu kodu klikając przycisk “run”. Po prawej stronie w tzw. konsoli powinien ukazać się wstawiony napis.
Zadanie 2
We wstawionym wcześniej kodzie znajdują się linie kodu rozpoczynające się od znaków //. Jest to komentarz do kodu napisany przez programistę w celu informacyjnym. Dodaj komentarz również nad kodem z pierwszego zadania. Niech opisuje pierwszą symboliczną linię kodu oraz datę, w której powstała. Kto wie – może to początek wspaniałej przygody z programowaniem :).
Zadanie 3
Jak można zaobserwować po wcześniejszym wyniku kodu, napisy znajdują się bezpośrednio po sobie. Nie wygląda to najlepiej, więc należy coś z tym zrobić.
W celu wstawienia znaku końca linii, czyli tzw. entera, należy w komendzie echo wstawić specjalny napis:
// Znak końca linii
echo "\n";Zadanie polega na wstawieniu tego znaku w odpowiednim miejscu, aby rozdzielić wszystkie napisy jakie do tej pory zostały wyświetlone w konsoli.
