STRONY WWW

WORDPRESS

Paweł Klockiewicz

Prawa do korzystania z materiałów posiada Software Development Academy

W OPARCIU O

Kim jestem?

• Inżynier informatyk o specjalności "aplikacje webowe"
   
• Magister o specjalności "UX Design"
   
• 6-letnie doświadczenie komercyjnie
   
• Wszechświat, człowiek, filozofia, kino, seriale, memy

Niezbędnik

Co jest potrzebne do zajęć?

Edytor programistyczny

Visual Studio Code

Przeglądarka oparta o Chromium

Hosting

1

Czym jest hosting WWW?

Hosting to przestrzeń na stronę internetową, skrzynki e-mail oraz inne zasoby potrzebne do prowadzenia działalności w Internecie. Usługa polega na udostępnianiu przez dostawcę zasobów serwerowni. Użytkownik w ramach hostingu stron ma do dyspozycji m.in. powierzchnię dyskową serwera.

INTERNET

SERWER

KLIENTY

Polecani dostawcy

Ćwiczenie 1.1

1. Załóż darmowe konto na CT8.PL.
 

2. W ciągu 2 minut otrzymasz dane dostępowe do serwera na swoją skrzynkę e-mail.

Pytanie weryfikujące: Jak nazywa się hosting, którego darmową wersją jest CT8.PL? MyDevil

Najważniejsze dane

Połączenie FTP:

Adres serwera, login, hasło.

Poczta e-mail:

SMTP – poczta wychodząca

POP3 – poczta przychodząca
IMAP – następca POP3

Baza danych:

Adres serwera, nazwa bazy danych, login, hasło.

Serwery DNS:

Adres serwera #1, adres serwera #2.

Pozostałe:

Panel administracyjny kontem oraz bazą danych.

Protokół FTP

FTP (File Transfer Protocol) służy do komunikacji i przesyłania plików między komputerami w sieci, czyli w Internecie. Użytkownicy, którym przyznano dostęp do tego protokołu, mogą odbierać i przesyłać pliki na serwerze.
 

Twórcom stron internetowych, FTP służy do wprowadzania zmian w witrynie. FTP umożliwia zalogowanie się do serwera WWW, aby można było przesyłać pliki swojej strony internetowej.
 

Zanim zalogujesz się na swoje konto FTP, musisz znać nazwę użytkownika, hasło i adres hosta. Potrzebujesz również specjalny program – klienta FTP.

Ćwiczenie 1.2

1. Zaloguj się do Panelu CT8.PL.

2. Dodaj nowe konto FTP (FTP -> Dodaj konto)

3. Pobierz i zainstaluj darmowego klienta FTP – FileZillę.

4. Uruchom klienta FTP.

5. Wybierz Plik -> Menadżer Stron...

6. W oknie Menadżera Stron naciśnij przycisk Nowy adres, a następnie wpisz nazwę swojej strony.

7. Jako protokół wybierz SFTP oraz uzupełnij pozostałe wymagane pola, tj. adres serwera, nazwę użytkownika oraz hasło.

8. Teraz naciśnij Połącz, aby połączyć się z serwerem (S)FTP.

Struktura katalogów

/
├── backups/
├── domains/
│   └── sda.ct8.pl/
│       ├── logs/
│       └── public_html/
├── mail/
└── repo/

– lista kopii zapasowych

– lista domen

– lista domen (stron)

– katalog domeny

– lista logów

– pliki strony

– pliki związane z pocztą

– repozytoria

Najczęściej w katalogu public_html zaraz po utworzeniu konta znajduje się plik index.html. Jest to plik, który domyślnie jest serwowany przeglądarce po wejściu na adres strony. Można go usunąć.

Co to DNS?

DNS (Domain Name System) to system, który umożliwia łatwiejszą komunikację między ludźmi i komputerami. Ludzie używają imion, komputery używają numerów, a DNS pojawia się pomiędzy, aby dopasować nazwy do numerów na określonej liście.

Zasadniczo DNS to system rozproszonych baz danych w sieci, którego podstawową funkcją jest tłumaczenie żądań określonych nazw hostów na określone numery IP zrozumiałe dla komputerów.

Jak działa DNS?

Załóżmy, że chcemy wejść na moja-domena.pl, która znajduje się na serwerze o adresie IP 203.0.113.10, a Twój komputer korzysta z serwera DNS 8.8.8.8 (Google Public DNS).

1. Komputer wysyła zapytanie do swojego ustawionego serwera DNS, czyli do 8.8.8.8.

2. 8.8.8.8 nie wie, jaki adres IP kryje się za wprowadzoną domeną, ale zna serwery DNS odpowiedzialne za domeny najwyższego poziomu, takie jak .com, .org, .pl itd.

3. 8.8.8.8 przekazuje żądanie do serwera domeny najwyższego poziomu (.pl).

4. Serwer domeny najwyższego poziomu również nie zna adresu IP, ale wie, że moja-domena.pl znajduje się na serwerze DNS nazwa.pl, więc 8.8 8.8 otrzymuje informację, by przejść do serwera DNS Nazwa.pl.

5. Serwer DNS Nazwa.pl szuka adresu IP dla moja-domena.pl i znajduje rekord, który został wskazany w panelu zarządzania domeną – 203.0.113.10.

6. Adres ten jest wysyłany do serwera 8.8.8.8, a ten wysyła odpowiedź do użytkownika.

Ćwiczenie 1.3

1. Znajdź wolną domenę najwyższego poziomu w serwisie Freenom.

2. Wybierz odpowiadające Tobie rozszerzenie i kliknij w "Get it now".

3. Kliknij w zielony przycisk "Checkout".

4. W kolumnie "Use your new domain" wybierz "Use DNS", a następnie zaznacz opcję "Use your own DNS" i wprowadź przesłane w mailu od hostingu CT8 odpowiednie adresy serwerów DNS.

5. W kolumnie "Period" możesz wybrać okres 12 darmowych miesięcy.

6. Zweryfikuj swój adres e-mail i dokończ rejestrację.

7. W panelu CT8 wybierz Strony WWW -> Dodaj nową stronę i wprowadź zarejestrowaną domenę.

Uwaga! Propagacja DNS może potrwać do 24 godzin. Aktualny stan można sprawdzić w narzędziu https://www.whatsmydns.net/ wybierając pozycję "NS".

Co to SSL?

SSL (Secure Socket Layer) to protokół bezpieczeństwa opracowany przez firmę Netscape. SSL jest używany do ustanowienia szyfrowanego połączenia między serwerem WWW a przeglądarką internetową. Wszystkie dane będące przekazywane między serwerem WWW a przeglądarką za pośrednictwem łącza szyfrowanego SSL, pozostają prywatne i bezpieczne. 

Certyfikat SSL to certyfikat cyfrowy, który uwierzytelnia tożsamość witryny internetowej i wysyła zaszyfrowane informacje do serwerów. Gdy certyfikat SSL jest zainstalowany, przeglądarka pokazuje zieloną kłódkę.

Jak działa SSL?

Przeglądarka próbuje połączyć się z serwerem zabezpieczonym SSL

Serwer zwraca zaszyfrowany certyfikat SSL

Przeglądarka weryfikuje certyfikat. Tworzy i wysyła zaszyfrowany klucz do serwera

Serwer odszyfrowuje klucz i dostarcza przeglądarce zaszyfrowaną zawartość z kluczem

Przeglądarka  odszyfrowuje zawartość wykonując tzw. "SSL handshake"

Ćwiczenie 1.4

1. W panelu CT8 wybierz SSL-> Strony WWW.

2. Kliknij w przycisk "Zarządzaj" przy pierwszym adresie IP.

3. Kliknij w zakładkę "Dodaj certyfikat".

4. Jako "Typ" wybierz "Wygeneruj certyfikat Let's Encrypt".

5. Wybierz stronę, dla której chcesz wygenerować certyfikat.

6. Kliknij w przycisk "Dodaj".

WordPress

2

Czym jest CMS?

Nie każdy jest webmasterem, ale czy to wystarczający powód, aby zapomnieć o możliwości prowadzenia swojej strony internetowej całkowicie samodzielnie?

Jeśli chcesz zarządzać swoją stroną internetową, nie musisz posiadać wiedzy programistycznej. Wystarczy Ci link, login i hasło do tak zwanego systemu zarządzania treścią, czyli systemu CMS.

CMS służy do samodzielnego publikowania treści na stronach internetowych oraz ich modyfikowania. Najpopularniejszym z nich jest WordPress.

WordPress w liczbach

Udział WordPressa w Internecie

Udział WordPressa wśród CMS

WordPress

Pozostałe

34%

60%

Zalety WordPressa

• Darmowy z otwartym kodem źródłowym;
• Duża społeczność (łatwo znaleźć pomoc);
• Rozbudowana i szczegółowa dokumentacja;
• Możliwość stworzenia każdego rodzaju strony (od bloga po sklep internetowy);
• Łatwy w użyciu (zarówno w kontekście deweloperów jak i odbiorców końcowych – klientów);
• Bardzo duża liczba wtyczek i motywów;
• Niskie wymagania hostingowe.

Wady WordPressa

• Najczęściej atakowany system CMS;
• Kod oraz architektura posiada stare rozwiązania;
• Niskiej jakości i mało wydajne wtyczki oraz motywy;
• Implementacja własnego motywu jest czasochłonna;
• Dość wysoki próg wejścia przez zbyt złożoną i pomieszaną architekturę.

Ćwiczenie 2.1

1. Pobierz paczkę z WordPressem.
2. Rozpakuj archiwum.
3. Połącz się przy pomocy FileZilli z hostingiem.
4. Przejdź do katalogu public_html i wgraj tam zawartość rozpakowanego archiwum.
5. Otwórz panel CT8 i utwórz nową bazę danych MySQL (MySQL -> Dodaj bazę). Zapisz dane utworzonej bazy.
6. Uruchom w przeglądarce adres swojej strony i przejdź przez proces instalacyjny WordPressa.

Wprowadzenie do WP

Divi

3

Czym jest Divi?

Divi to uniwersalny i bardzo popularny motyw do WordPressa, który zastępuje standardowy edytor postów i stron znacznie lepszym edytorem wizualnym.

Zalety Divi

• Edytor typu "przeciągnij i upuść", czyli budowa z gotowych klocków;
• Pełna kontrola nad wyglądem elementów;
• Zmiana wyglądu elementów dla różnych punktów responsywności;
• Ponad 100 gotowych kompozycji;
• Integracja z WooCommerce (wtyczka sklepu);
• Możliwość zastosowania zaawansowanych zmian poprzez edytor CSS.

Ćwiczenie 3.1

1. Pobierz motyw Divi.
2. Rozpakuj pobrane archiwum.
3. Połącz się z FTP serwera przy użyciu FileZilli.
4. Przejdź do katalogu "/wp-content/themes/" i wgraj folder "/Divi/".
5. Otwórz panel administracyjny systemu WordPress i aktywuj motyw Divi w Wygląd -> Motywy.

Ćwiczenie 3.2

1. Stwórz swoją stronę o dowolnej tematyce.