Architektura klient-serwer w praktyce

Przegladarka i serwer - taniec w rytm HTTP

Architektura klient-serwer to podstawowy model działania aplikacji webowych. Klient (przegladarka) wysyła zadania (requesty), serwer (np. PHP) je przetwarza i zwraca odpowiedzi (response). W tej prezentacji wyjasni, jak wyglada ten przepływ danych, jakie sa role klienta i serwera, gdzie wykonuje się walidacja, gdzie zapis danych oraz jak warstwy aplikacji współpracują że soba. Zrozumienie tej architektury jest fundamentem dla każdego programisty webowego.

1. Co to jest klient? - Przegladarka, aplikacja mobilna, curl
2. Co to jest serwer? - PHP, baza danych, pliki
3. Jak komunikuja się klient i serwer? - HTTP, request/response
4. Co dzieje się po stronie serwera? - Przetwarzanie, logika, dane
5. Gdzie jest co? - UI na kliencie, logika i dane na serwerze

1. Klient - przegladarka użytkownika

   • Wyświetla interfejs (HTML, CSS)
   • Wykonuje JavaScript
   • Wysyła zadania HTTP (GET, POST)
   • Odbiera i renderuje odpowiedzi
   • Przykład: formularz, klikniecie linku

2. Serwer - PHP i dane

   • Odbiera zadania HTTP
   • Wykonuje logike biznesowa (PHP)
   • Łączy się z baza danych lub plikami
   • Generuje odpowiedz (HTML lub JSON)
   • Przykład: walidacja, zapis do bazy

3. Request/Response - komunikacja

   • Request: klient → serwer (metoda, URL, nagłówki, body)
   • Response: serwer → klient (status, nagłówki, body)
   • Protokół HTTP: bezstanowy, tekst/binarny

4. Gdzie jest walidacja, gdzie zapis?

   • Walidacja: OBIE strony (klient dla UX, serwer dla bezpieczeństwa)
   • Logika biznesowa: serwer
   • Dane: serwer (baza, pliki)
   • UI: klient

5. Warstwy aplikacji

   • Warstwa prezentacji (UI): HTML/CSS/JS
   • Warstwa logiki (backend): PHP
   • Warstwa danych: MySQL, JSON, pliki

• Wariant A (3.0)
• Wariant B (4.0-5.0)
• Wariant C (5.0-6.0)

Zawartosc:

• Pokaz podstawowy schemat klient-serwer
• Wyjasnij role klienta i serwera
• Pokaz 1 przykład request/response (np. GET strony)

Forma: 10 slajdow, 10 minut prezentacji

Ocena: 3.0

1. Slajd tytułowy - Tytuł, autorzy, data
2. Agenda - Co omowicie w prezentacji
3. Problem - “Dlaczego strona się odswieza?” - pytanie poczatkujacego
4. Klient - przegladarka - Co robi, co wyświetla
5. Serwer - PHP - Co robi, co zwraca
6. HTTP - protokół komunikacji - Request i Response
7. Schemat przepływu - Diagram że strzałkami
8. Przykład: formularz - Od klikniecia do wyniku
9. Warstwy aplikacji - UI, logika, dane
10. Gdzie walidacja? - Klient vs serwer
11. Podsumowanie - Kluczowe wnioski
12. Źródła i pytania

Użytkownik klika “Dodaj do koszyka”. Przegladarka wysyła POST do /cart/add. Serwer PHP sprawdza czy produkt istnieje, dodaje do sesji koszyka, zwraca potwierdzenie. Przegladarka aktualizuje licznik koszyka.

Poczatkujacy pyta: “Dlaczego po wysłaniu formularza strona się odswieza?” Odpowiedz: bo przegladarka wysyła nowe zadanie do serwera, serwer generuje nowa strone i ja zwraca. To jest model request/response.

Przypadek: Refaktoryzacja na API + SPA

Aplikacja e-commerce działała tradycyjnie: PHP generował całe strony HTML. Przy dużym ruchu strony ładowały się wolno. Refaktoryzacja: serwer zwraca tylko JSON (API), frontend (React) renderuje UI. Rezultat: szybsze ladowanie, lepsze UX, ale bardziej skomplikowana architektura. Lekcja: architektura klient-serwer ewoluuje - od prostego HTML do API + SPA.

Architektura klient-serwer to fundament webu!

Zrozumienie jak przegladarka rozmawia z serwerem to podstawa dla każdego web developera. Każda aplikacja - od prostego bloga po Netflix - działa na tej zasadzie.

Wykorzystajcie lekcje - przeanalizujcie swoj projekt: co dzieje się gdy klikniecie przycisk? Jaki request idzie do serwera?

Współpraca to klucz - podzielcie się: jedna osoba może zając się strona klienta (przegladarka, UI), druga strona serwera (PHP, baza).

Pamietajcie: dobra prezentacja to taka, po której słuchacze rozumieja przepływ danych miedzy klientem a serwerem.