Budowa aplikacji ASP.NET współpracującej z bazą dany do przeprowadzania ankiet internetowych
widok ankiety w przeglądarce
Rozpoczniemy od zaprojektowania bazy danych w programie SYBASE/PowerDesigner
umieszczamy sześć Encji (tabel)
prawym przyciskiem rezygnujemy z polecenia wstawiania kolejnych Encji i klikając dwukrotnie na jedną z nich definiujemy parametry pierwszej z nich, jest to tabela słownikowa służąca do wyboru płci Proszę stosować nazwy tabel i kolumn dokładnie jak w scenariuszu!!! W programie PowerDesigner nie używamy polskich liter oraz spacji!!!
definiujemy klucz
kopiujemy nazwę klucza do zakładki Identifiers
definiujemy kolejny atrybut tej tabeli
na tym kończymy definiowanie tej tabeli
kolejna tabela to tabela słownikowa określająca przedział wiekowy respondenta
kolejna tabela zostanie zaprojektowana do obsługi pytania 1 czyli listy RadioButtonList (listy w której respondent może wybrać tylko jedną pozycję, ponowne wybranie innej powoduje odznaczenie poprzedniej)
kolejna tabela zostanie zaprojektowana do obsługi pytania 2 czyli listy RadioButtonList
kolejna tabela zostanie zaprojektowana do obsługi pytania 3 czyli listy RadioButtonList
przystąpimy teraz do definicji tabeli nadrzędnej odpowiedz
kolejne atrybuty dotyczą pytania 4 czyli CheckBoxList (w przypadku tej listy użytkownik może zaznaczyć dowolną liczbę wariantów odpowiedzi) w zasadzie na potrzeby tego pytania powinna być utworzona osobna tabela słownikowa i połączona z tabelą odpowiedz relacją wiele-do-wielu zastosujemy jednak pewne uproszczenie, które nie wpłynie jednak na funkcjonalność aplikacji wprowadzamy zatem atrybut jak poniżej, jako typ danych wybieramy Boolean jest to typ logiczny, który przybiera tylko dwie wartości prawda albo fałsz (odpowiada to sytuacji czy użytkownik zaznaczył odpowiedni wariant czy nie)
wprowadzamy kolejne atrybuty odpowiadające pozostałym wariantom pytania 4
oraz pozostałe dwa atrybuty
łączymy tabele relacjami Proszę dokładnie sprawdzić czy relacje w państwa modelu wyglądają identycznie!!!
następnie sprawdzamy poprawność diagramu
model powinien być pozbawiony błędów oraz ostrzeżeń, jeżeli tak nie jest proszę to zgłosić prowadzącemu
następnie generujemy model fizyczny
proszę wybrać jako DBMS Microsoft SQL Serwer 2008
model powinien wyglądać jak poniżej
następnie generujemy skrypt bazy danych czyli instrukcję w języku SQL która utworzy bazę danych na serwerze możemy wskazać lokalizację do której zostanie zapisany skrypt oraz jego nazwę (u Państwa oczywiście lokalizacja będzie inna)
po wygenerowaniu wybieramy opcję Edit
przystąpimy teraz do utworzenia pliku bazy danych przy pomocy wygenerowanego skryptu uruchamiamy jak poniżej
łączymy się z lokalnym serwerem (jego nazwa w Państwa przypadku będzie inna!!!)
klikając prawym przyciskiem jak poniżej utworzymy pojemnik bazy danych
wprowadzamy nazwę bazy oraz potwierdzamy przyciskiem OK proszę użyć unikatowej nazwy tak aby można było jednoznacznie zidentyfikować która baza jest Państwa dodając np. Państwa inicjały
Następnie rozwijamy listę baz w drzewie i nasza baza powinna się tam znajdować
następnie utworzymy strukturę naszej bazy przy pomocy skryptu SQL który uzyskaliśmy z programu PowerDesigner klikamy zatem prawym przyciskiem na nazwę naszej bazy oraz wybieramy nowe zapytanie
następnie w naszym skrypcie Ctrl+A (zaznacz wszystko) oraz Ctrl+C (kopiuj)
wklejamy nasz skrypt Ctrl+V
wykonujemy zapytanie przyciskiem Execute
powinniśmy otrzymać komunikat że wykonanie zapytania zakończyło się sukcesem
po rozwinięciu listy w drzewie bazy widzimy, że pojawiły się tabele naszej bazy
zatem mamy utworzoną kompletną bazę, aby możliwe było jej skopiowanie musimy zatrzymać serwer
nasza baza znajduje się w lokalizacji jak poniżej
proponuję utworzyć sobie na potrzeby tego ćwiczenia na dysku folder do którego proszę skopiować dwa pliki
uruchamiamy serwer
uruchamiamy VisualStudio i przystąpimy teraz do zaprojektowania aplikacji
proponuje również utworzyć na dysku folder w którym zapisana zostanie aplikacja proszę również sprawdzić czy domyślny język jest ustawiony na C#
dodajemy Stronę wzorcową
ustawimy tło strony wzorcowej
w nagłówku umieścimy dowolną grafikę zatem przenosimy kontrolkę Image proszę zwrócić uwagę poniżej w którym miejscu powinna się ona znaleźć w poprzednim przykładzie były z tym spore problemy
dodajmy dowolną grafikę do naszej aplikacji
następnie we właściwościach kontrolki Image definiujemy jaką grafikę ma prezentować
możemy również przeskalować wielkość obrazka
struktura stron w naszej aplikacji będzie następująca założenie jest takie, że użytkownik anonimowy nielogowalny widzi tylko strony Strona główna oraz Wypełnij ankietę zatem tworząc pozostałe strony umieścimy je w folderze a następnie zabronimy użytkownikom anonimowym dostępu do tego folderu
dodajemy zatem stronę główną, proszę pamiętać o zaznaczeniu opcji Wybierz stronę wzorcową
wprowadzamy jej tytuł
wprowadzamy tekst jak poniżej
nasza strona w przeglądarce powinna wyglądać jak poniżej
dodajemy kolejną stronę, proszę pamiętać aby w nazwach stron nie używać polskich liter oraz spacji oraz wprowadzamy jej tytuł
kolejne strony umieścimy w folderze, zatem tworzymy go nazwa folderu administracja
kolejne strony umieścimy w tym folderze zatem
wprowadzamy tytuł
kolejna strona w folderze administracja wprowadzamy jej tytuł
w celu wykorzystania kontrolki Menu konieczne jest utworzenie mamy witryny
struktura aplikacji powinna wyglądać jak poniżej
aby struktura aplikacji była zgodna z założeniami plik powinien wyglądać jak poniżej adresy stron można uzyskać przeciągając je z okna Eksplorator rozwiązań
na stronie wzorcowej umieszczamy źródło danych kontrolki Menu
następnie umieszczamy kontrolkę Menu oraz definiujemy co ma być jej źródłem danych
modyfikujemy jej wygląd
menu naszej aplikacji w przeglądarce powinno wyglądać jak poniżej
we właściwościach kontrolki menu ustawimy zatem aby statycznie były wyświetlane dwa poziomy menu
oraz zmienimy orientację na poziomą
uzyskamy efekt jak poniżej
do naszej aplikacji dodamy teraz plik bazy danych który został utworzony w pierwszej części niniejszego scenariusza, pliki baz są przechowywane w folderze systemowym App_data musimy go zatem utworzyć
oraz dodajemy do niego naszą bazę
jeżeli w programie nie jest wyświetlona zakładka Eksplorator serwerów proszę ją wyświetlić
następnie podłączamy się do bazy oraz rozwijamy listę tabel
następnie proszę sprawdzić czy
odznaczona jest opcja wskazana poniżej
następnie dla kluczy głównych tabeli ustawimy opcję automatycznego zwiększania wartości (w przypadku dodania nowego rekordu kolumna klucza będzie wypełniana automatycznie)
zamykamy definicję tabeli oraz potwierdzamy zapisanie zmian
analogicznie proszę postąpić z kluczami pozostałych tabel
dane do bazy mogą być zapisywane z poziomu stron aplikacji jednak aby uprościć tę czynność wykonamy to z poziomu Eksploratora serwera wprowadzamy zatem dane do tabeli plec
do tabeli wiek
do tabeli pytanie_1
do tabeli pytanie_2
do tabeli pytanie_3
dane do tabel słownikowych zostały wprowadzone przejdziemy teraz do zaprojektowania strony wypełnij_ankiete.aspx wprowadzamy tekst Dane osobowe (można zmodyfikować kolor oraz font czcionki z paska formatowania jak w Wordzie) z grupy kontrolek HTML umieszczamy tabelę usuwamy jedną z kolumn w pierwszej kolumnie wprowadzamy tekst jak poniżej w drugiej kolumnie umieszczamy dwie kontrolki DropDownList oraz jedną TextBox proszę zmodyfikować nazwy tych kontrolek (ID) tak aby można je było łatwo identyfikować np. DDL_plec, DDL_wiek, TB_email UWAGA proszę nie klikać dwukrotnie na kontrolki spowoduje to utworzenie zdarzenia, a co za tym idzie błędy na stronie
z grupy kontrolek Dane umieszczamy źródło danych dla listy płeć
konfigurujemy źródło danych listy płeć
umieszczamy źródło danych dla listy wiek
konfigurujemy źródło listy rozwijalnej wiek
testujemy w przeglądarce
wprowadzamy tekst jak poniżej (proszę skorzystać z już zastosowanego formatowania) umieszczamy kontrolkę RadioButtonList grupa kontrolek Standart
umieszczamy kolejne źródło danych dla listy RadioButton
konfigurujemy źródło danych listy
wówczas w przeglądarce
analogicznie kolejne 2 pytanie
pytanie 3
kolejne 4 pytanie ponieważ zastosowaliśmy pewne uproszczenia (nie utworzyliśmy tabeli słownikowej dla tego pytania) nie możemy skorzystać z CheckBoxList umieścimy zatem 5 kontrolek CheckBox modyfikując tekst dla każdej z nich
dla każdej kontrolki włączamy opcję AutoPostBack
ostatnie pytanie
teraz umieszczamy źródło danych z zapytaniem Insert (czyli zapisującym wynik wypełnionej ankiety)
konfigurujemy parametry zapytania insert
umieszczamy kontrolkę Button klikamy na przycisk dwukrotnie, zostanie utworzone zdarzenie
programujemy wywołanie zdarzenia
proszę z poziomu przeglądarki wysłać kilka ankiet wówczas dane tabeli odpowiedz
przejdziemy zatem do wyświetlenia danych z poziomu strony wyniki_pelne.aspx umieszczamy źródło danych i konfigurujemy
dodajemy wszystkie tabele
zaznaczamy co chcemy wyświetlić i testujemy zapytanie
umieszczamy kontrolkę GridView oraz konfigurujemy jej źródło oraz wygląd
modyfikujemy nagłówki kolumn
na stronie wyniki_wg_plec.aspx wyświetlamy dane z ankiet według kryterium płci kopiujemy źródło danych ze strony wyniki_pelne.aspx
umieszczamy kolejne
umieszczamy kontrolkę GridView wybierając jako źródło danych SqlDataSource1
wówczas w przeglądarce wybieranie płci z listy nie wpływa jednak na dane wyświetlane w tabeli
musimy zatem zmodyfikować zapytanie Select warunek należy wpisać ręcznie dodać parametr oraz wskazać jego źródło
wówczas w przeglądarce
Zadania uzupełniające do realizacji 1. Proszę utworzyć stronę na której możliwe będzie modyfikowanie oraz usuwanie ankiet oraz dodać ją do mapy witryny jako podstronę strony wypelnij_ankiete.aspx. Stronę tworzymy w folderze administracja. 2. Proszę utworzyć stronę na której możliwe będzie przeglądanie ankiet wg. wieku oraz dodać ją do mapy witryny jako podstronę strony wypelnij_ankiete.aspx. Stronę tworzymy w folderze administracja. 3. Proszę utworzyć strony na których możliwe będzie dodawanie/modyfikowanie/usuwanie wariantów odpowiedzi pytania 1, 2 oraz 3 oraz dodać je do mapy witryny jako podstrony strony wypelnij_ankiete.aspx. Strony tworzymy w folderze administracja. 4. Proszę zastosować usługę logowania, tak aby użytkownicy anonimowi mieli dostęp do stron: strona główna, wypełnij ankietę (proszę skorzystać z materiałów aplikacji wiadomość).