WebMatrix – budujemy serwis oparty na bazie danych z funkcjonalnością CRUD  

Autor: Tomasz Kowalczyk

Opublikowano: 2011-07-08

Wprowadzenie

Poniższy artykuł jest ostatnim z serii artykułów przedstawiających Microsoft WebMatrix, narzędzie umożliwiające stworzenie w prosty sposób pierwszego serwisu Web. Po zapoznaniu się z informacjami zawartymi w tym artykule będziesz:

• wiedział, jak zbudować serwis korzystający z bazy danych za pomocą WebMatrix;
• umiał zdefiniować wzorzec CRUD (Create, Retrieve, Update, Delete);
• wiedział, jak zaimplementować w prosty sposób funkcjonalność CRUD w swoim serwisie.

Rozpoczynając pracę opartą na poniższym artykule, będziesz potrzebował projektu, który wykonaliśmy wcześniej  (patrz  trzeci artykuł z tego cyklu pt. „WebMatrix: Korzystamy z Facebook Helpers”).

Efektem wykonania instrukcji zawartych w tym artykule będzie wersja naszego serwisu w pełni korzystająca z bazy danych. Zarówno odnośniki do poszczególnych stron, jak i ich zawartość będą pobierane bezpośrednio z utworzonej przez nas bazy. Zarządzanie zawartością stron będzie możliwe poprzez utworzony przez nas plik Admin.cshtml, gdzie będziemy mogli edytować treść poszczególnych stron oraz je dodawać i usuwać.

Kod źródłowy zawarty w tym artykule znajdziesz tutaj.

Implementacja

Po otworzeniu projektu wykonanego zgodnie z treścią zawartą we wcześniejszym artykule, najpierw dodamy bazę danych do naszego serwisu. Aby to uczynić, wykonaj poniższe kroki:

Tworzenie bazy danych

1. W lewym dolnym rogu ekranu kliknij Databases – na środku ekranu pojawi się napis Add a databse to your site, który również klikamy.

2. Pozostawiamy domyślną nazwę bazy danych, która odpowiada nazwie naszego serwisu (Pierwsza strona).

3. Nasza baza danych będzie składać się z jednej tabeli, którą również dodajemy, klikając ikonę New Table znajdującą się w lewym górnym rogu ekranu. Tabeli tej nadaj nazwę Strona. Tabela będzie zawierać cztery kolumny – będą to kolejno (id, plik, tytul, tresc), które dodajemy za pomocą ikony New Column. Poprawny układ tabeli przedstawiony został na rysunku 1:

Rys.1. Układ tabeli Strona.

Zawartość oraz budowa tej tabeli nie jest zupełnie przypadkowa (poniżej znajduje się wyjaśnienie, dzięki któremu zrozumiesz, dlaczego została ona zaprojektowana właśnie w ten sposób). Przede wszystkim musisz zdać sobie sprawę z tego, że pojedynczy rekord (pod pojęciem „rekord” rozumiemy pojedynczy wiersz zawartości tabeli z rysunku 2) tabeli będzie zawierał dane dla pojedynczej strony naszego serwisu:

• id – unikalny identyfikator dla każdego rekordu znajdującego się w tabeli. Pozwoli on nam na jednoznaczne rozróżnienie pojedynczej strony;
• plik – to ciąg znaków definiujących plik, który będzie przechowywał zawartość danej strony pisany bez rozszerzenia (w naszym przypadku bez .cshtml);
• tytul – tytuł strony, który będzie widoczny w horyzontalnym menu na każdej stronie oraz na początku treści każdej z nich;
• tresc – w tym polu będziemy przechowywać treść każdej ze stron naszego serwisu.

4. Tak utworzoną tabelę zapisujemy, klikając ikonę dyskietki z lewego górnego rogu lub naciskając kombinację klawiszy Ctrl + S.

5. Utworzoną tabelę wypełnimy jeszcze przykładowymi danymi – aby to zrobić, kliknij ikonę Data
z lewego górnego rogu narzędzia WebMatrix. Tabelę z przykładowymi danymi przedstawia rysunek 2:

Rys.2. Tabela Strona wypełniona przykładowymi danymi.

6. Następnie klikamy dwukrotnie nagłówek Files z lewego dolnego ekranu, by przejść do edycji plików wchodzących w skład serwisu.

Połączenie z bazą danych

Omówię tutaj najważniejsze fragmentu kodu, które mają kluczowe znaczenie dla działania serwisu, natomiast pełny kod źródłowy projektu można pobrać za pomocą odnośnika znajdującego się na końcu tego artykułu.

Otwórz plik _SiteLayout.cshtml i na początku wklej niżej przedstawiony kod, który posłuży nam do połączenia z bazą danych:

@{
                    var db = Database.Open("PierwszaStrona");
                    var sql = "Select * from Strona";
                    var data = db.Query(sql);
         }

W pierwszej linijce zmiennejdb przypisujemy otwarcie połączenia z bazą danych PierwszaStrona, w drugiej linijce pobieramy zapytaniem SQL wszystkie dane z tabeli Strona i zapisujemy je do zmiennej sql. Następnie wykonujemy zapytanie SQL na bazie danych, z którą mamy połączenie.

Aby wyświetlić dane pobrane z bazy danych w postaci odnośników do poszczególnych stron naszego serwisu, posłużymy się poniższym kodem, zastępującym obecny kod zaraz po znaczniku <body>:

<div id="header">
            <ul id="menu">
                @foreach(var row in data){
                <li><a href="@(row.plik).cshtml">@row.tytul</a></li>
                }
            </ul>
        </div>

W pętli foreach rozdzielamy dane pobrane z bazy znajdujące się w zmiennej data w taki sposób, aby każdy rekord z tabeli Strona znajdował się w zmiennej row w ramach kolejnych przebiegów pętli. W naszym przypadku będą to trzy pętle, gdyż w tabeli Strona znajdują się dokładnie trzy rekordy. Taka operacja pozwoli nam mieć dostęp do atrybutów poszczególnych rekordów, stosując składnię zgodną z wzorem @row.ATRYBUT, gdzie ATRYBUT to nazwa kolumny z tabeli Strona.

Wyświetlanie rekordów

Aby mieć możliwość dodawania nowych stron, utwórz plik Admin.cshtml, który będzie nam na to pozwalał. W jego treści na początku umieść ten sam fragment kodu, który znalazł się w pliku _SiteLayout.cshtml, oraz dodatkowo poniższy kod:

@foreach(var row in data){
                    <p>@row.tytul</p>
                    <p>@row.plik</p>
                    <p>@row.tresc</p>
                    <p>
                        <a href="EditPage.cshtml?id=@row.id">Edytuj stronę</a><br>
                        <a href="DeletePage.cshtml?id=@row.id">Usuń stronę</a>
                    </p>
                <hr/>
                }
                <a href="AddPage.cshtml">Dodaj stronę</a>

Zadaniem tego kodu jest wyświetlenie wszystkich rekordów znajdujących się w tabeli Strona. Kod ten zawiera również dwa odnośniki do stron EditPage.cshtml i DeletePage.cshtml, które będą służyły kolejno do edycji i usuwania stron. Aby w kodzie stron służących do edycji i usuwania zawartości tabeli rozróżnić, który rekord chcemy edytować, zmiennej id przypisujemy wartość każdego rekordu pobranego z bazy za pomocą @row.id.

Dodawanie rekordów

Aby dodać nowy rekord, utwórz plik AddPage.cshtml, który będzie zawierał formularz z polami odpowiadającymi polom poszczególnego rekordu w tabeli, czyli będą to pola Plik, Tytuł i Treść oraz przycisk Dodaj, po którego wciśnięciu wpisane przez nas dane zostaną dodane do bazy.

Sam kod odpowiedzialny za dodanie nowych danych do bazy znajduje się poniżej:

@{
            var PagePlik="";
            var PageTytul="";
            var PageTresc="";
            if(IsPost)
            {
                PagePlik=Request["formPlik"];
                PageTytul=Request["formTytul"];
                PageTresc=Request["formTresc"];
                
                var sqlInsert = "Insert into Strona (plik, tytul, tresc) values (@0, @1, @2)";
                var db = Database.Open("PierwszaStrona");
                db.Execute(sqlInsert, PagePlik, PageTytul, PageTresc);
                
                Response.Redirect("Admin.cshtml");
            }
        }

Kod ten za pomocą polecenia SQL – insert dodaje do bazy danych dane pobrane z odpowiednich pól formularza. Po wykonaniu operacji dodawania zostajemy przeniesieni do strony Admin.cshtml, gdzie zobaczymy nową dodaną stronę wraz z pozostałymi wcześniejszymi.

Edycja danych

W celu edytowania istniejących rekordów utwórz najpierw plik EditPage.cshtml zawierający formularz, do którego zostaną wczytane dane dotyczące edytowanej strony z bazy danych poprzez rozróżnienie ich za pomocą pola id, przekazanego przez pasek adresu. Strona EditPage.cshtml jest wywoływana ze strony Admin.cshtml, gdzie w odnośniku przekazywany jest identyfikator id edytowanej strony. Rysunek 3prezentuje ekran umożliwiający edycję strony:

Rys.3. Strona umożliwiająca edycję zawartości serwisu.

Usuwanie danych

W celu usunięcia rekordu znajdującego się w bazie utwórz najpierw plik DeletePage.cshtml. Zasada działania kodu znajdującego się w tym pliku będzie analogiczna do kodu z EditPage.cshtml, z tą jednak różnicą, że zamiast polecenia SQL – update zostanie wywołane polecenie SQL – delete. Kod rozpozna rekord, który ma usunąć zgodnie z metodą zastosowaną w pliku EditPage.cshtml. Strona DeletePage.cshtml jest wywoływana ze strony Admin.cshtml, gdzie w odnośniku przekazywany jest identyfikator id usuwanej strony. Przed usunięciem strony wyświetlony zostanie ekran z poleceniem potwierdzenia tej operacji – przedstawiony na rysunku 4:

Rys.4. Strona dająca możliwość usunięcia zawartości serwisu.

Podsumowanie

W tym artykule poznaliśmy, jak za pomocą narzędzia WebMatrix możemy korzystać z relacyjnej bazy danych i na jej podstawie zbudować serwis Web. Proces tworzenia bazy danych oraz modelowania jej zawartości, czyli tworzenie tabel oraz wypełnianie jej danymi realizowany przy użyciu WebMatrix, jest prosty i intuicyjny, czego przykładem będzie zbudowany przez nas serwis.

Wiemy również, co to jest CRUD oraz jak w najprostszy sposób zaimplementować funkcjonalność dostarczaną nam przez ten wzorzec. Rozbudowując powstały projekt i zwracając uwagę na bezpieczeństwo, będziesz w stanie stworzyć w pełni funkcjonalny i nowoczesny serwis WWW.