Tematy zadań

1. Praca z systemem kontroli wersji. Podstawy WWW.

  • cel - stworzyć prostą stronę WWW, nie wymagającą użycia serwera webowego;
  • należy użyć HTML, CSS i JS do ww. zadania;
  • książka online o systemie Git: tutaj,
  • pomoc dla osób, które zaczynają przygodę z systemem kontroli wersji Git: tutaj,
  • należy utworzyć konto na hostingu GitHub lub innym (np. Bitbucket), aby “przechowywać” tam zrealizowane laboratoria.
  • pomoc do dalszej części zadań związanych z WWW: tutaj,
  • dla początkujących w dziedzinie WWW wskazane jest przejrzenie materiałów z ww. linka, żadnych ćwiczeń z tamtej strony nie wykonujemy,
  • należy stworzyć prosty szablon strony HTML i zapisać go pod nazwą index.html,
  • zastosować na stronie znaczniki odpowiadające za układ strony - section, article, aside, header, footer, nav, np. tutaj,
  • stworzyć plik drugi.html, który będzie wykorzystywany do adresowania względnego. Plik powinien zawierać podstawowy układ strony HTML (podobnie jak dla pliku index.html),
  • stworzyć link (adres względny - p. 3d) na stronie index.html do strony drugi.html i tam należy umieszczać kolejne części zadania,
  • użyć elementów blokowych (p. 3a), elementów wstawionych (p. 3b) i elementów osadzonych (p. 3c),
  • stworzyć przykładową tabelę (p. 3e) o dowolnej tematyce,
  • CSS - użyć jednostki miar względne i bezwzględne (p. 4a),
  • przejrzeć p. 4b i zastosować wybrane przez siebie właściwości CSS,
  • zastosować pseudoklasy do linków (p.4a),
  • zastosować formy i układy selektorów (p.4a),
  • zapoznać się z podstawami Java Script, np.:
  • zapoznać się z przykładowym modelem DOM (p. 2c)
  • Stworzyć nowe elementy (np. za pomocą metod createElement i appendChild) oraz dodać do nich style (metoda ‘style’) i klasy (metoda ‘add’).

2. Wybrany framework front-endowy + JavaScript

  • zadanie polega na wykorzystaniu “czystego” Java Script do wyświeltlania, modyfikowania, tworzenia (itp. itd.) elementów strony związanych z HTML i CSS,
  • należy użyć wybrany (dowolny) framework front-endowy do tego zadania,
  • najpopularniejszy jest Bootstrap - tutaj (jest tutaj dobry, prosty startowy szablon),
  • UI Kit też jest ciekawy - tutaj,
  • przydatne strony o JS:
  • na przykład korzystając z ww. szablonu Bootstrap, można dodać przycisk z klasą badge-light do strony (np. pod nagłówkiem ‘Hello world’): 
    <button type="button" class="btn btn-primary">
        Notifications <span class="badge badge-light"></span>
	</button>

    Poniżej, np. przed końcem sekcji body wrzucamy skrypt, który szuka elementu z klasą badge-light i ustawia jego wartość (innerHTML) na liczbę 6:

    <script>
      var x = document.getElementsByClassName("badge-light");
      x[0].innerHTML = 6; // x[0] to pierwszy znaleziony element
    </script>
  • w podobny sposób należy wykorzystać inne elementy Java Script do modyfikacji elementów strony,
  • wskazane użycie około 20 różnych elementów Java Script do ww. modyfikacji.

3. Projektowanie aplikacji bazodanowej. Architektura klient-serwer. Model MVC (lub MTV w innych frameworkach)

  • zaprojektować bazę danych do aplikacji typu ‘blog’,
  • język (framework) programowania dowolny,
  • dobra okazja do “wdrożenia się” w ulubioną technologię,
  • utworzyć ww. bazę danych, np. poprzez ORM (mapowanie obiektowo - relacyjne) lub “ręcznie”,
  • wykonać proste zapytania do bazy danych w konsoli lub w panelu zarządzania (zapisać dwa wybrane zrzuty ekranu),
  • dodać do aplikacji funkcje CRUD (ang. create, read, update, delete), tak aby były dostępne na stronie (przyciski, formularze itp.),
  • uruchomić i przetestować serwer deweloperski, “sprawdzić” kody statusowe HTTP,
  • przykład tworzenia projektu ww. typu w języku Python dostępny jest tutaj, będę go omawiał szczegółowo na zajęciach.

4. SQL.

  • zrealizować proste i średnio zaawansowane zapytania SQL,
  • zapytania powinny dotyczyć rekordów z bazy danych, utworzonych w ramach lab. nr 3,
  • rodzaje zapytań realizujemy z tutaj (od SQL SELECT do SQL INSERT INTO SELECT z menu po lewej),
  • należy tak zaprojektować (dopasować) strukturę bazy danych, aby można było wykonać jak najwięcej ww. zapytań.

5. Wdrażanie wybranego frameworka front-endowego.

  • należy wybrać dowolny framework (inny niż ten użyty w lab. nr 2) i użyć go na swojej stronie;
  • do wyboru do koloru, np. tutaj,
  • to dobry czas na sprawdzenie technologii, na którą nigdy nie było czasu, ale zawsze kusiła ♥,
  • back-end można zostawić z poprzednich zadań albo zrobić coś nowego.

6. Autentykacja i autoryzacja.

  • przeanalizować sesje i ciasteczka,
  • wdrożyć prosty system logowania do swojego serwisu.

7. “Upiększanie” serwisu.

8. Praca z usługą typu PaaS (ang. Platform as a Service)

  • Stworzyć konto np. na heroku.com
  • Zainstalować CLI dla Heroku (lub innej platformy);
  • Przesłać swój projekt na Heroku zgodnie z dokumentacją.

Zasady zaliczenia przedmiotu

  1. Dowolny język do realizacji zadania.
  2. Zadanie należy zrealizować do następnych zajęć - max. 5 punktów,
  • Tydzień opóźnienia w realizacji zadania - max. 3 punkty,
  • Przekroczenie obu terminów - max. 1 punkt.
  1. Zrealizowane zadanie należy umieścić na portalu GitHub (lub BitBucket) i wysłać link do prowadzącego (Slack).
  2. Zadanie należy zaprezentować osobiście prowadzącemu.

Punkty i oceny przedstawione są w arkuszu Google Docs.