Budowa aplikacji ASP.NET współpracującej z bazą danych do obsługi przesyłania wiadomości

Transkrypt

1 Budowa aplikacji ASP.NET współpracującej z bazą danych do obsługi przesyłania wiadomości

2 Rozpoczniemy od zaprojektowania bazy danych w programie SYBASE/PowerDesigner

3

4

5 umieszczamy dwie Encje (tabele)

6

7 prawym przyciskiem rezygnujemy z polecenia wstawiania kolejnych Encji i klikając dwukrotnie na jedną z nich definiujemy parametry wprowadzamy jej nazwę

8 definiujemy kolumny tabeli, pierwsza to klucz główny tabeli

9 definiujemy typ danych dla tej kolumny

10 w przypadku klucza głównego jest to liczba czyli Intiger

11 definiujemy że dla tej kolumny nie zezwalamy na wartość pustą dodając nowy rekord

12 definiujemy tę kolumnę jako klucz główny tabeli

13 następnie kopiujemy nazwę tej kolumny (Ctrl+C)

14 przechodzimy do zakładki Identifires

15 oraz wklejamy nazwę wprowadzonego klucza (Ctrl+V)

16 powracamy do zakładki Attributes oraz definiujemy kolejną kolumnę tabeli jak poniżej

17

18 projektujemy teraz kolejną tabelę

19

20

21

22 teraz połączymy tabele relacją jeden do wiele rysujemy trzymając lewy klawisz linię pomiędzy tabelami

23 następnie doprecyzujemy relację

24

25 następnie sprawdzamy poprawność diagramu

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

27 następnie generujemy model fizyczny

28 proszę wybrać jako DBMS Microsoft SQL Serwer 2008

29 model powinien wyglądać jak poniżej (pojawił się klucz obcy Id_dzial w tabeli wiadomosc)

30 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 (u Państwa będzie ona oczywiście inna niż poniżej) oraz jego nazwę

31 po wygenerowaniu wybieramy opcję Edit

32

33 przystąpimy teraz do utworzenia pliku bazy danych przy pomocy wygenerowanego skryptu uruchamiamy jak poniżej

34 łączymy się z lokalnym serwerem (nazwa serwera jest przypisana do komputera przy którym Państwo pracujecie będzie zatem inna niż poniżej)

35 klikając prawym przyciskiem jak poniżej utworzymy pojemnik bazy danych

36 wprowadzamy nazwę bazy (proszę zastosować wiadomosc_nazwisko) oraz potwierdzamy przyciskiem OK unikatową nazwę np.

37 Następnie rozwijamy listę baz w drzewie i nasza baza powinna się tam znajdować

38 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

39 następnie w naszym skrypcie Ctrl+A (zaznacz wszystko) oraz Ctrl+C (kopiuj)

40 wklejamy nasz skrypt Ctrl+V

41 wykonujemy zapytanie przyciskiem Execute

42 powinniśmy otrzymać komunikat że wykonanie zapytania zakończyło się sukcesem

43 po rozwinięciu listy w drzewie bazy widzimy, że pojawiły się dwie tabele

44 zatem mamy utworzoną kompletną bazę, aby możliwe było jej skopiowanie musimy zatrzymać serwer

45 nasza baza znajduje się w lokalizacji jak poniżej

46 proponuję utworzyć sobie na potrzeby tego ćwiczenia na dysku folder do którego proszę skopiować dwa pliki

47 uruchamiamy serwer

48 uruchamiamy VisualStudio i przystąpimy teraz do zaprojektowania aplikacji

49 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#

50 dodajemy Stronę wzorcową

51 ustawimy tło strony wzorcowej, powinno to być zdefiniowane w kaskadowym arkuszu stylów ale nie jest to celem tego ćwiczenia zastosujemy zatem pewne uproszczenie

52 w nagłówku wprowadzamy tekst jak poniżej, możecie Państwo umieścić w nim dowolną grafikę albo kalendarz

53 proszę pamiętać, że umieszczone elementy muszą się znajdować poza kontenerem w którym wyświetlane są wszystkie strony aplikacji

54 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 Wyślij wiadomość zatem tworząc pozostałe strony umieścimy je w folderze a następnie zabronimy użytkownikom anonimowym dostępu do tego folderu

55 dodajemy zatem stronę główną, proszę pamiętać o zaznaczeniu opcji Wybierz stronę wzorcową

56 wprowadzamy jej tytuł

57 wprowadzamy tekst jak poniżej

58 nasza strona w przeglądarce powinna wyglądać jak poniżej

59 dodajemy kolejną stronę, proszę pamiętać aby w nazwach stron nie używać polskich liter oraz spacji

60 wprowadzamy tytuł strony, tutaj dozwolone są polskie litery

61 kolejne strony umieścimy w folderze, zatem tworzymy go

62 kolejne strony umieścimy w tym folderze zatem

63 wprowadzamy tytuł

64 kolejna strona w folderze administracja

65 tytuł

66 kolejna strona w folderze administracja

67 tytuł

68 ostatnia strona

69 tytuł

70 w celu wykorzystania kontrolki Menu konieczne jest utworzenie mamy witryny

71 aby struktura aplikacji była zgodna z założeniami plik powinien wyglądać jak poniżej tworząc nowy plik otrzymacie Państwo jedynie zestaw pustych znaczników kopiując je oraz przeciągając adresy stron proszę doprowadzić plik do postaci jak poniżej

72 na stronie wzorcowej umieszczamy źródło danych kontrolki Menu

73 następnie umieszczamy kontrolkę Menu oraz definiujemy co ma być jej źródłem danych

74 modyfikujemy jej wygląd

75 menu naszej aplikacji w przeglądarce powinno wyglądać jak poniżej

76 we właściwościach kontrolki menu ustawimy zatem aby statycznie były wyświetlane dwa poziomy menu

77 oraz zmienimy orientację na poziomą

78 uzyskamy efekt jak poniżej

79 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ć

80 oraz dodajemy do niego naszą bazę

81 jeżeli w programie nie jest wyświetlona zakładka Eksplorator serwerów proszę ją wyświetlić

82 następnie podłączamy się do bazy oraz rozwijamy listę tabel

83 następnie proszę sprawdzić czy

84 ODZNACZONA jest opcja wskazana poniżej

85 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)

86

87 zamykamy definicję tabeli oraz potwierdzamy zapisanie zmian

88 analogicznie w przypadku tabeli wiadomość

89 rozpoczniemy od zaprojektowania strony dodaj dział z poziomu której użytkownik może dodawać działy naszej firmy

90 wewnątrz kontenera wprowadzamy tekst oraz umieszczamy kontrolkę TextBox

91 poniżej umieszczamy kontrolkę Button oraz zmieniamy tekst na przycisku

92 w przeglądarce strona powinna wyglądać jak poniżej

93 strona ma zatem działać w taki sposób, że w momencie kliknięcia przycisku dodaj dział pobierana jest zawartość kontrolki TextBox i wysyłana do bazy danych na stronie potrzebujemy zatem źródła danych, umieszczamy kontrolkę SqlData Source

94 oraz konfigurujemy ją

95 wskazujemy z którą bazą danych chcemy nawiązać połączenie

96 następnie możemy zapisać to połączenie, wprowadzamy zatem nazwę

97 interesuje nas połączenie z tabelą dzial

98 za pomocą przycisku Advanced wymuszamy utworzenie zapytań umożliwiających wstawianie, modyfikowanie oraz usuwanie danych

99 następnie klikamy Next oraz Finish

100 nasze źródło danych umożliwia wstawianie danych do tabeli dział musimy jeszcze zdefiniować skąd mają być pobierane nazwy działów, we właściwościach kontrolki SqlDataSource1 edytujemy zapytanie Insert

101 źródłem parametru Nazwa_dzial w naszym przypadku jest kontrolka

102 TextBox1

103 zatem nasze źródło SqlDataSource1, jest już skonfigurowane musimy tylko obsłużyć zdarzenie kliknięcia przycisku w taki sposób aby jego kliknięcie wywołało zapytanie Insert źródła SqlDataSource1 utworzymy zatem zdarzenie kliknięcia przycisku dodaj dział klikając na niego dwukrotnie

104 program przeniesie nas do pliku dodaj_dzial.aspx.cs zostało stworzone zdarzenie Button1_Click

105 w nawiasie klamrowym musimy zatem określić co ma być wykonane w ramach tego zdarzenia, w naszym przypadku chcemy wywołać zapytanie Insert żródła SqlDataSource1 UWAGA!!! wszelkie wprowadzane polecenia należy wybrać z listy (z wyjątkiem nawiasów i znaków pomocniczych)

106 następnie wprowadzamy kropkę oraz

107 otwarcie oraz zamknięcie nawiasu i średnik na końcu wiersza

108 następnie w celu wyczyszczenia zawartości TextBox'a przeładujemy stronę za pomocą polecenia

109 następnie kropka oraz

110 następnie adres strony w nawiasie oraz cudzysłowie i średnik na końcu

111 proszę zapisać wszystkie zmiany

112 proszę wyświetlić stronę w przeglądarce oraz dodać kilka działów np.: reklama, marketing, kadry, księgowość, prezes, produkcja, płace itp.

113 Sprawdzimy teraz czy wprowadzone dane znajdują się w bazie

114 jeżeli wszystko zostało wykonane poprawnie nasze działy zostały zapisane w bazie (proszę nie sugerować się wartościami klucza Id_dzial)