#04 Tworzenie aplikacji internetowej | Kurs ASP.NET MVC 5

Po krótkim wstępie teoretycznym przyszedł czas na utworzenie pierwszego projektu. Będę używał Microsoft Visual Studio 2013 Professional, ale możecie skorzystać także z darmowej wersji Express.

Nowa aplikacja ASP.NET MVC 5

Otwieramy naturalnie Visual Studio. Z menu wybieramy File > New > Project. Pojawi się okienko z drzewa wybieramy Installed > Templates > Visual C# i wreszcie Web, bo chcemy tworzyć aplikację webową. Następnie wskazujemy konkretny typ projektu ASP.NET Web Application. Nazywamy nasz projekt oraz wskazujemy miejsce zapisu.

Nowy projekt ASP.NET

Nowy projekt ASP.NET

Następnym krokiem jest wybranie szablonu, w którym zostanie zainicjowany projekt. Dzięki temu już na starcie projekt będzie zawierał odpowiednią strukturę folderów/plików.

Dostępne szablony:

Szablony projektu ASP.NET MVC 5

Szablony projektu ASP.NET MVC 5

  • Empty – ta templatka tworzy jedynie odpowiednie referencje oraz minimalną konfigurację, brak w niej struktury katalogów dla kontrolerów, widoków itp.,
  • Web Forms – tak jak wcześniej pisałem templatka przeznaczona dla dynamicznych projektów opartych min. na buttonach wywołujących zdarzenia. Zawiera pełną strukturę katalogów/plików ze zdefiniowaną treścią,
  • MVC – szablon zawiera potrzebne katalogi, aby pisać aplikację zgodnie ze wzorcem Model-Widok-Kontroler, projekt inicjowany jest z treścią,
  • Web API – templatka zaprojektowana do tworzenia serwisów HTTP przystosowanych do obsłużenia wszelakich rodzajów klientów ( przeglądarki, telefony itp. ),
  • Single Page Application – pomaga tworzyć aplikację, która będzie zawierać wiele dynamicznych elementów z HTML5CSS 3JavaScript,
  • Facebook – templatka wspomagająca tworzenie aplikacji dla Facebook’a. Usprawnia to integrację z funkcjami Facebook’a np. newsy, powiadomienia.

Wybieramy szablon MVC i przechodzimy dalej. Naszym oczom wreszcie ukazała się solucja zawierająca odpowiednią strukturę folderów, mamy także startowy content, który pozwala uruchomić projekt.

Struktura projektu ASP.NET MVC 5

Struktura projektu

Struktura projektu ASP.NET MVC 5

  • Properties/AssemblyInfo.cs – definiujemy tu podstawowe informacje ( metadata ) o projekcie, które będą identyfikować plik .dll/.exe,
  • References – tutaj linkujemy odwołania do bibliotek, innych projektów,
  • App_Data – tutaj przechowywana lokalna jest baza danych, możemy tutaj umieścić także pliki, które będziemy czytać/zapisywać,
  • App_Start – zawiera pliki konfiguracyjne dla technologii użytych w projekcie,
    • BundleConfig.cs – reguły zawarte w tym pliku pozwalają pobrać wiele plików za jednym żądaniem HTTP Request, jest to związane z tym, że większość przeglądarek ma ograniczenie równoczesnych połączeń do sześciu na hosta. Jeśli musimy pobrać kilkanaście plików przeglądarka tworzy kolejki, przez co strona ładowana jest wolniej, ma to szczególnie ważne znaczenie przy pierwszym załadowaniu strony, kiedy to nie jest jeszcze  „sCACHEowana”,
    • FilterConfig.cs – zwykle po kliknięciu na link wywoływana jest jakaś akcja kontrolera, gdybyśmy chcieli, aby jakaś logika wykonywała się dodatkowo przed lub po wywołaniu akcji to ten plik właśnie jest takim miejscem do definicji owej logiki,
    • RouteConfig.cs – konfiguracja routingu. Adres URL w aplikacji webowej niesie ze sobą informacje zapisane według zdefiniowanego szablonu, szablon ten definiujemy w tym pliku, aby nie mieć problemów z odpowiednim odczytaniem danych. Zwykle w adresie URL przesyłane są nazwa kontrolera i nazwa akcji do wywołania, możemy np. wysłać jeszcze id użytkownika do wyświetlenia, dane te zapiszemy oddzielone za pomocą „/” w odpowiedniej kolejności, kolejność tą właśnie zdefiniujemy w RouteConfig.cs,
    • Startup.Auth.cs – w tym pliku możemy umożliwić logowanie do naszego serwisu za pomocą kont twitter, facebook itp.,
  • Content – tutaj umieszcza się pliki .css używane w projekcie,
  • Controllers – w tym katalogu umieszczamy klasy kontrolerów, których nazwy są składową żądania HTTP. Nazwy plików oraz główna klasa w pliku powinna mieć końcówkę ‚Controllers‚, a sama klasa musi dziedziczyć po ‚Controller‚. Kontrolery zawierają metody, których nazwy także są częścią żądania HTTP, metody kontrolerów zwane są akcjami i mogą zwracać HTML, dane, zapisane np. w JSON, a nawet rzucać wyjątkiem 🙂
  • fonts – czcionki wykorzystywane w aplikacji,
  • Models – folder, w który zawiera logikę (strukturę) naszej bazy danych. Podobnie jak i w przypadku kontrolerów pliki zawierające klasy mają końcówkę Models,
  • Scripts – tutaj umieszczamy pliki .js, nie jest konieczne, aby każdy plik z rozszerzeniem .js znajdował się w tym katalogu, ale wygodnie jest tu umieszczać pliki z bibliotekami lub skryptami wykorzystywanymi w całej aplikacji,
  • Views – tutaj umieszczane są pliki, które organizują widok wyświetlany użytkownikowi. Każdy kontroler ma swój folder o takiej samej nazwie, a każda akcja plik .cshtml definiujący wygląd, rozmieszczenie danych,
  • Global.asax – w tym pliku możemy umieścić kod, który wykona się w odpowiedzi na zdarzenia systemowe ( errory, start aplikacji, koniec aplikacji itp. ),
  • packages.config – informacja w XML o zainstalowanych pakietach,
  • Project_Readme.html – plik wprowadzony w VS 2013, programiści z MS’u chyba chcieli nawiązać miłą interakcję z programistą, który wygenerował właśnie projekt i obdarowali go linkami do stron „pierwszego kontaktu”, informacjami o zawartością wygenerowanego szablonu,
  • Startup.cs – tutaj definiujemy reguły OWIN,
  • Web.config – zawiera opcje konfiguracyjne projektu ASP.NET, definiujemy w nim połączenia z bazą danych, globalne zmienne, ustawienia bezpieczeństwa, kompilacji, język projektu itp.,

Uruchamianie aplikacji ASP.NET MVC 5

Z paska narzędziowego wybieramy w jakiej przeglądarce chcemy uruchomić naszą aplikację, po czym klikamy zieloną strzałkę.

Uruchamianie aplikacji ASP.NET MVC 5

Uruchamianie aplikacji ASP.NET MVC 5

Naszym oczom powinien się ukazać widok. Z racji tego, że jest to strona responsywna może wyglądać trochę inaczej jeśli zwężycie okno przeglądarki.

Uruchomiona aplikacja ASP.NET MVC 5

Uruchomiona aplikacja ASP.NET MVC 5

Podsumowanie

Mam nadzieję, że po przeczytaniu tego artykułu łatwiej będzie Ci nawigować po projekcie i nie będziesz miał wątpliwości, w którym miejscu przelać abstrakcję w kod 🙂 W następnym artykule poruszę kwestię Life Cycle aplikacji ASP.NET MVC 5.

Wpis jest częścią kursu ASP.NET MVC 5.

Dodaj komentarz