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

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

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

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ć

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ę

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

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 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ść).