Budowa aplikacji ASP.NET współpracującej z bazą dany do przeprowadzania ankiet internetowych

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

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

następnie sprawdzamy poprawność diagramu

model powinien być pozbawiony błędów oraz ostrzeżeń, jeżeli tak nie jest proszę to zgłosić

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ę

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. 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

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 dodatkowe 1. Proszę utworzyć stronę na której możliwe będzie modyfikowanie oraz usuwanie ankiet. 2. Proszę utworzyć stronę na której możliwe będzie przeglądanie ankiet wg. wieku. 3. 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ść).