Aplikacje WWW - lab 5
Jan Wróblewski
30 marca 2016
Zadanie jest na stronie wykładowcy:
http://www.mimuw.edu.pl/~ciebie/drupal/?q=node/3.
Zadanie ma dwie części:
statyczną - zrobić stronę zbliżoną do strony PKW http:
//www.prezydent2005.pkw.gov.pl/PZT/PL/WYN/W/index.htm;
dynamiczną - wrzucić stronę do Django, wprowadzić z tabelek ze strony do bazy danych, generować te tabelki na podstawie danych i po drodze jeszcze zapewnić, że nie można wpisać złych danych.
Część statyczna
PKW zrobiło stronę o stałej szerokości, opartą w 100% na tabelkach, włącznie z graficznym rozmieszczeniem elementów. Będę oczekiwał, że zrobią Państwo podobną stronę opartą na <div>ach (i ich semantycznych odpowiednikach jak np. <header>), <span>ach, <ul>ach i podobnych, by przedstawiało to semantykę zawartości strony. Konkretnie:
Jest wyraźny nagłówek w postaci pokrojonego obrazka i flag do zmiany języka (to trzeba dobrze umiejscowić co do piksela, aby się nie rozchodziło);
Jest pasek nawigacyjny z listą linków do innych stron PKW (nie trzeba dawać dobrych adresów);
Jest mapka Polski prezentująca dane z jakimiś statystykami i legendą, a na uboczu strony koło niej jest treść zawierająca dwie listy linków oraz jakieś podsumowanie wyników;
Są dwie tabelki z danymi oraz paskami proporcji głosów (je da się zrobić np. dwoma divami);
Jako że dane będą później ładowane z bazy danych, mapką nie może być statyczny obrazek. Mogą Państwo użyć do jej wygenerowania jakiegoś skryptu JavaScriptowego. Znalezienie takowego, skonfigurowanie go, aby przedstawiała mapę województw w Polsce i wrzucenie do niego % głosów jest częścią zadania.
Bazowa strona jest stroną o stałej szerokości. Mogą państwo zrobić również stronę o stałej szerokości, albo (do czego zachęcam) zrobić stronę odpowiednio rozszerzającą się na całą szerokość okna przeglądarki.
Nie ma wymagania, aby strona sensownie wyświetlała się na małych ekranach, aczkolwiek zachęcam Państwa do próby zrobienia takiego CSSa.
Na pewno nie będę nie zaliczał za to, że CSS dziwnie się zachowuje przy użyciu media queries dla małych ekranów.
Część statyczna
W szczególności nie będę wymagał między innymi:
Dolnej tabelki - aby miała ona sens być pobieraną z bazy danych trzeba by to jakoś wygenerować na podstawie gmin etc. i sprawdzać spójnośc danych;
Aby tekstowa/obrazkowa zawartość strony była identyczna;
Aby linki prowadziły do sensownych miejsc (# może być);
Aby tabelka się sortowała;
Aby rogi tabelek były zaokrąglone;
Aby wygenerowana mapka aktualizowała swoją wielkość po zmianie szerokości okna przeglądarki.
Jak ktos to zrobi, to oczywiście fajnie.
Część dynamiczna polega na dynamicznym wyświetlaniu strony, tj.
wrzuceniem tego do bazy danych w Django i za pomocą template’ów generowania powtarzalnych części HTMLa, jak np. wiersze tabelek.
Będzie trzeba zrobić model bazy danych pozwalający na dołączeniu informacji do każdego województwa o liczbach
mieszkańców/uprawnionych/... Będzie trzeba też umożliwić wpisanie tego wszystkiego do bazy danych (najłatwiej przez admina Djangowego) i sprawdzać, czy dane w bazie są spójne przed zapisaniem.
Część dynamiczna
Do sprawdzenia będą przynajmniej: nierówności pomiędzy ilościami mieszkańców/uprawnionych/... w województwach, to czy jest dwóch kandydatów, to czy województwa są unikalne, to czy liczby są nieujemne.
Jako że pewnie chcemy przerzucić pracę z obsługą formularzy i edycją danych na admina Djangowego, to pewnie łatwo będzie stworzyć obsługę odpowiedniego sygnału Django nie pozwalającą na zapisanie danych, gdy są niepoprawne. Opis sygnałów jest tu:
https://docs.djangoproject.com/en/1.9/topics/signals/.
Można używać dowolnych sensownych bibliotek, które jestem w stanie pobrać przez pip (Pythonowe) albo serwowanych przez Django, a nie jakiś CDN (JavaScript).
W szczególności można użyć jQuery i Bootstrapa. Uzywając Bootstrapa proszę jednak pamiętać o poprawnym wykorzystaniu grid systemu.
Zachęcam również do spróbowania czystego CSS w przypadku, gdy potrawią wykorzystać Państwo Bootstrapa i jego grid system, ale nie mają Państwo doświadczenia z CSS float, clear, overflow etc.
Zajęcia
Na zajęciach pokażę jeszcze ile zdążę z Django:
Sygnały w Django;
request.POST/request.GET (formularze ręcznie);
Form;
ModelForm;
Formset
Transakcje bazodanowe;
Template’y w Django, tj. podstawowa składnia z {% ... %},
{{...}}, zmiennymi i 0-argumentowymi funkcjami uruchamialnymi z template’ów.
