Budowa aplikacji ASP.NET współpracującej z bazą danych do

Budowa aplikacji ASP.NET
współpracującej z bazą danych
do obsługi przesyłania
wiadomości
Rozpoczniemy od zaprojektowania bazy danych w programie SYBASE/PowerDesigner
umieszczamy dwie Encje (tabele)
prawym przyciskiem rezygnujemy z polecenia wstawiania kolejnych Encji i klikając
dwukrotnie na jedną z nich definiujemy parametry
wprowadzamy jej nazwę
UWAGA: w programie tym nie należy używać polskich liter oraz znaku spacja
proszę wprowadzać nazwy zarówno tabel jak i kolumn (atrybutów)
identyczne jak w prezentowanym scenariuszu
definiujemy kolumny tabeli, pierwsza to klucz główny tabeli (nazwa jak poniżej, program
wprowadza nazwy domyślne Państwo zamieniacie je na wskazane)
definiujemy typ danych dla tej kolumny (proszę używać przycisku z trzema kropkami)
w przypadku klucza głównego jest to liczba czyli Intiger
definiujemy że dla tej kolumny nie zezwalamy na wartość pustą dodając nowy rekord
definiujemy tę kolumnę jako klucz główny tabeli (zaznaczamy pole wyboru jak poniżej)
następnie zaznaczamy i kopiujemy nazwę tej kolumny (Ctrl+C)
przechodzimy do zakładki Identifires
oraz wklejamy nazwę wprowadzonego klucza (Ctrl+V)
powracamy do zakładki Attributes oraz definiujemy kolejną kolumnę tabeli jak poniżej
następnie zatwierdzamy przyciskiem OK
tabela dzial powinna wyglądać jak poniżej
projektujemy teraz kolejną tabelę
teraz połączymy tabele relacją jeden do wiele
rysujemy trzymając lewy klawisz linię pomiędzy tabelami (z obszaru jednej tabeli do
drugiej)
następnie doprecyzujemy relację
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 (pojawił się klucz obcy Id_dzial w tabeli wiadomosc)
jeżeli jest inaczej to proszę to zgłosić prowadzącemu
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ę
po wygenerowaniu wybieramy opcję Edit (klikamy na napis Edit, nie na przycisk listy
rozwijalnej)
przystąpimy teraz do utworzenia pliku bazy danych przy pomocy wygenerowanego skryptu
uruchamiamy jak poniżej (skryptu bazy nie zamykamy)
łączymy się z lokalnym serwerem (nazwa serwera jest przypisana do komputera przy
którym Państwo pracujecie będzie zatem inna niż poniżej)
klikając prawym przyciskiem jak poniżej utworzymy „pojemnik bazy danych”
wprowadzamy nazwę bazy (proszę zastosować unikatową nazwę wiadomosc_(Państwa
nazwisko) oraz potwierdzamy przyciskiem OK
Następnie rozwijamy listę baz w drzewie i nasza baza powinna się tam znajdować (jej
nazwa będzie oczywiście taka jak Państwo wprowadziliście)
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ę dwie tabele
zatem mamy utworzoną kompletną bazę, aby możliwe było jej skopiowanie musimy
zatrzymać serwer
nasza baza znajduje się w lokalizacji jak poniżej
(lokalizacja pliku na dysku jak poniżej)
proponuję utworzyć sobie na potrzeby tego ćwiczenia na dysku folder do którego proszę
skopiować dwa pliki (ich nazwa będzie inna tzn. wiadomość (Państwa nazwisko)
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, powinno to być zdefiniowane w kaskadowym arkuszu
stylów ale nie jest to celem tego ćwiczenia zastosujemy zatem pewne uproszczenie
w nagłówku wprowadzamy tekst jak poniżej, możecie Państwo umieścić w nim dowolną
grafikę albo kalendarz
proszę pamiętać, że umieszczone elementy muszą się znajdować poza kontenerem w
którym wyświetlane są wszystkie strony aplikacji
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
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
wprowadzamy tytuł strony, tutaj dozwolone są polskie litery
kolejne strony umieścimy w folderze administracja, zatem tworzymy go
kolejne strony umieścimy w tym folderze zatem
wprowadzamy tytuł
kolejna strona w folderze administracja
tytuł
kolejna strona w folderze administracja
tytuł
ostatnia strona
tytuł
w celu wykorzystania kontrolki Menu konieczne jest utworzenie mamy witryny z głównego
poziomu dodajemy zatem plik jak poniżej
dodany plik będzie miał strukturę jak poniżej
na bazie pustych znaczników definiujemy strukturę aplikacji jak poniżej
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
na stronie wzorcowej umieszczamy źródło danych kontrolki Menu (grupa kontrolek Data
kontrolka SiteMapDataSource
następnie umieszczamy kontrolkę Menu (grupa kontrolek Nawigacja) 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ę (plik oczywiście ma nazwę wiadomość_Nazwisko
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 w przypadku tabeli wiadomość
rozpoczniemy od zaprojektowania strony dodaj dział z poziomu której użytkownik może
dodawać działy naszej firmy
wewnątrz kontenera wprowadzamy tekst oraz umieszczamy kontrolkę TextBox
poniżej umieszczamy kontrolkę Button oraz zmieniamy tekst na przycisku
w przeglądarce strona powinna wyglądać jak poniżej
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
oraz konfigurujemy ją
wskazujemy z którą bazą danych chcemy nawiązać połączenie
następnie możemy zapisać to połączenie, wprowadzamy zatem nazwę
interesuje nas połączenie z tabelą dzial
za pomocą przycisku Advanced wymuszamy utworzenie zapytań umożliwiających
wstawianie, modyfikowanie oraz usuwanie danych
następnie klikamy Next oraz Finish
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
źródłem parametru Nazwa_dzial w naszym przypadku jest kontrolka
TextBox1
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
program przeniesie nas do pliku dodaj_dzial.aspx.cs
zostało stworzone zdarzenie Button1_Click
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)
następnie wprowadzamy kropkę oraz
otwarcie oraz zamknięcie nawiasu i średnik na końcu wiersza
następnie w celu wyczyszczenia zawartości TextBox'a przeładujemy stronę za pomocą
polecenia
następnie kropka oraz
następnie adres strony w nawiasie oraz cudzysłowie i średnik na końcu
proszę zapisać wszystkie zmiany
proszę wyświetlić stronę w przeglądarce oraz dodać kilka działów np.: reklama, marketing,
kadry, księgowość, prezes, produkcja, płace itp.
Sprawdzimy teraz czy wprowadzone dane znajdują się w bazie
jeżeli wszystko zostało wykonane poprawnie nasze działy zostały zapisane w bazie
(proszę nie sugerować się wartościami klucza Id_dzial)