Budowa aplikacji ASP.NET współpracującej z bazą dany do przeprowadzania ankiet internetowych
|
|
- Agnieszka Grzelak
- 8 lat temu
- Przeglądów:
Transkrypt
1 Budowa aplikacji ASP.NET współpracującej z bazą dany do przeprowadzania ankiet internetowych
2 widok ankiety w przeglądarce
3 Rozpoczniemy od zaprojektowania bazy danych w programie SYBASE/PowerDesigner
4
5
6 umieszczamy sześć Encji (tabel)
7 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!!!
8 definiujemy klucz
9 kopiujemy nazwę klucza do zakładki Identifiers
10 definiujemy kolejny atrybut tej tabeli
11 na tym kończymy definiowanie tej tabeli
12 kolejna tabela to tabela słownikowa określająca przedział wiekowy respondenta
13
14
15
16
17 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)
18
19
20
21
22 kolejna tabela zostanie zaprojektowana do obsługi pytania 2 czyli listy RadioButtonList
23
24
25
26
27 kolejna tabela zostanie zaprojektowana do obsługi pytania 3 czyli listy RadioButtonList
28
29
30
31
32 przystąpimy teraz do definicji tabeli nadrzędnej odpowiedz
33
34
35 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)
36 wprowadzamy kolejne atrybuty odpowiadające pozostałym wariantom pytania 4
37 oraz pozostałe dwa atrybuty
38 łączymy tabele relacjami Proszę dokładnie sprawdzić czy relacje w państwa modelu wyglądają identycznie!!!
39 następnie sprawdzamy poprawność diagramu
40 model powinien być pozbawiony błędów oraz ostrzeżeń, jeżeli tak nie jest proszę to zgłosić prowadzącemu
41 następnie generujemy model fizyczny
42 proszę wybrać jako DBMS Microsoft SQL Serwer 2008
43 model powinien wyglądać jak poniżej
44 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)
45 po wygenerowaniu wybieramy opcję Edit
46
47 przystąpimy teraz do utworzenia pliku bazy danych przy pomocy wygenerowanego skryptu uruchamiamy jak poniżej
48 łączymy się z lokalnym serwerem (jego nazwa w Państwa przypadku będzie inna!!!)
49 klikając prawym przyciskiem jak poniżej utworzymy pojemnik bazy danych
50 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
51 Następnie rozwijamy listę baz w drzewie i nasza baza powinna się tam znajdować
52 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
53 następnie w naszym skrypcie Ctrl+A (zaznacz wszystko) oraz Ctrl+C (kopiuj)
54 wklejamy nasz skrypt Ctrl+V
55 wykonujemy zapytanie przyciskiem Execute
56 powinniśmy otrzymać komunikat że wykonanie zapytania zakończyło się sukcesem
57 po rozwinięciu listy w drzewie bazy widzimy, że pojawiły się tabele naszej bazy
58 zatem mamy utworzoną kompletną bazę, aby możliwe było jej skopiowanie musimy zatrzymać serwer
59 nasza baza znajduje się w lokalizacji jak poniżej
60 proponuję utworzyć sobie na potrzeby tego ćwiczenia na dysku folder do którego proszę skopiować dwa pliki
61 uruchamiamy serwer
62 uruchamiamy VisualStudio i przystąpimy teraz do zaprojektowania aplikacji
63 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#
64 dodajemy Stronę wzorcową
65 ustawimy tło strony wzorcowej
66 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
67 dodajmy dowolną grafikę do naszej aplikacji
68 następnie we właściwościach kontrolki Image definiujemy jaką grafikę ma prezentować
69 możemy również przeskalować wielkość obrazka
70 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
71 dodajemy zatem stronę główną, proszę pamiętać o zaznaczeniu opcji Wybierz stronę wzorcową
72 wprowadzamy jej tytuł
73 wprowadzamy tekst jak poniżej
74 nasza strona w przeglądarce powinna wyglądać jak poniżej
75 dodajemy kolejną stronę, proszę pamiętać aby w nazwach stron nie używać polskich liter oraz spacji oraz wprowadzamy jej tytuł
76 kolejne strony umieścimy w folderze, zatem tworzymy go nazwa folderu administracja
77 kolejne strony umieścimy w tym folderze zatem
78 wprowadzamy tytuł
79 kolejna strona w folderze administracja wprowadzamy jej tytuł
80 w celu wykorzystania kontrolki Menu konieczne jest utworzenie mamy witryny
81 struktura aplikacji powinna wyglądać jak poniżej
82 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ń
83 na stronie wzorcowej umieszczamy źródło danych kontrolki Menu
84 następnie umieszczamy kontrolkę Menu oraz definiujemy co ma być jej źródłem danych
85 modyfikujemy jej wygląd
86 menu naszej aplikacji w przeglądarce powinno wyglądać jak poniżej
87 we właściwościach kontrolki menu ustawimy zatem aby statycznie były wyświetlane dwa poziomy menu
88 oraz zmienimy orientację na poziomą
89 uzyskamy efekt jak poniżej
90 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ć
91 oraz dodajemy do niego naszą bazę
92 jeżeli w programie nie jest wyświetlona zakładka Eksplorator serwerów proszę ją wyświetlić
93 następnie podłączamy się do bazy oraz rozwijamy listę tabel
94 następnie proszę sprawdzić czy
95 odznaczona jest opcja wskazana poniżej
96 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)
97
98 zamykamy definicję tabeli oraz potwierdzamy zapisanie zmian
99 analogicznie proszę postąpić z kluczami pozostałych tabel
100 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
101
102 do tabeli wiek
103 do tabeli pytanie_1
104 do tabeli pytanie_2
105 do tabeli pytanie_3
106 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_ UWAGA proszę nie klikać dwukrotnie na kontrolki spowoduje to utworzenie zdarzenia, a co za tym idzie błędy na stronie
107 z grupy kontrolek Dane umieszczamy źródło danych dla listy płeć
108
109 konfigurujemy źródło danych listy płeć
110 umieszczamy źródło danych dla listy wiek
111
112 konfigurujemy źródło listy rozwijalnej wiek
113 testujemy w przeglądarce
114 wprowadzamy tekst jak poniżej (proszę skorzystać z już zastosowanego formatowania) umieszczamy kontrolkę RadioButtonList grupa kontrolek Standart
115 umieszczamy kolejne źródło danych dla listy RadioButton
116
117 konfigurujemy źródło danych listy
118 wówczas w przeglądarce
119 analogicznie kolejne 2 pytanie
120
121
122 pytanie 3
123
124
125 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
126
127 dla każdej kontrolki włączamy opcję AutoPostBack
128 ostatnie pytanie
129 teraz umieszczamy źródło danych z zapytaniem Insert (czyli zapisującym wynik wypełnionej ankiety)
130 konfigurujemy parametry zapytania insert
131 umieszczamy kontrolkę Button klikamy na przycisk dwukrotnie, zostanie utworzone zdarzenie
132 programujemy wywołanie zdarzenia
133 proszę z poziomu przeglądarki wysłać kilka ankiet wówczas dane tabeli odpowiedz
134 przejdziemy zatem do wyświetlenia danych z poziomu strony wyniki_pelne.aspx umieszczamy źródło danych i konfigurujemy
135
136 dodajemy wszystkie tabele
137 zaznaczamy co chcemy wyświetlić i testujemy zapytanie
138 umieszczamy kontrolkę GridView oraz konfigurujemy jej źródło oraz wygląd
139 modyfikujemy nagłówki kolumn
140 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
141 umieszczamy kolejne
142
143 umieszczamy kontrolkę GridView wybierając jako źródło danych SqlDataSource1
144 wówczas w przeglądarce wybieranie płci z listy nie wpływa jednak na dane wyświetlane w tabeli
145 musimy zatem zmodyfikować zapytanie Select warunek należy wpisać ręcznie dodać parametr oraz wskazać jego źródło
146 wówczas w przeglądarce
147 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ść).