Ćwiczenie 1 Usłyszałeś, że w najbliższym czasie szykuje Ci się zlecenie, więc postanowiłeś zapoznać się z podstawami tworzenia stron internetowych. W tym celu postawisz serwer IIS na swojej maszynie domowej i wrzucisz na niego testową stronę internetową. 1. Zaczniemy od postawienia lokalnego serwera IIS na systemie Windows. 2. Wybierz Panel Sterownia i przejdź do Programy. 3. Kliknij Włącz funckcje systemu Windows (wymaga uprawnień administratora) 4. Powinno pokazać się okienko: 5. Zaznacz Internet Information Services i naciśnij OK. 6. Otwieramy Visual Studio Community 2015 7. Wybieramy File -> New -> File 8. Wybieramy HTML Page i naciskamy Open 9. W fragmencie <Body></Body> dodajemy stwierdzenie: To jest testowa strona postawiona na domowym serwerze IIS 10. Zapisujemy plik w lokacji: C:\inetpub\wwwroot jako Index.html 11. Aby sprawdzić czy serwer działa wejdź na stronę: http://localhost
Ćwiczenie 2 Dostałeś zadanie stworzenia strony wykorzystując najnowsze standardy internetowe. Strona internetowa powinna być stroną wizytówką poważnej firmy rolniczej z Radomia i prezentować firmę w jak najlepszym świetle. Postanowiłeś wybrać technologie Microsoftu, jako że są one rozpoznawane i wspierane na całym świecie. 1. Uruchom środowisko Visual Studio 2015. Po chwili powita Cię ekran startowy. 2. Zamykamy ekran powitalny i wybieramy File / New Project 3. Powinno wyświetlić się nam poniższe okienko: 4. Przechodzimy do zakładki Web i wybieramy ASP.NET Web Application. 5. Podajemy nazwę naszego projektu, a także wybraną przez nas lokalizację i klikamy OK.
6. Powinno wyświetlić się nam poniższe okienko: 7. W okienku zaznaczamy MVC Template oraz odznaczamy Host in the cloud. 8. Następnie klikamy na przycisku Change Authentication. 9. Powinno wyświetlić się nam poniższe okienko: 10. Zaznaczamy No Authentication i klikamy OK. 11. Akceptujemy nasze ustawienia i klikamy OK.
12. Otworzy nam się plik readme, który zamykamy. 13. Możemy odpalić naszą stronę, by zobaczyć jak wygląda. Aby tego dokonać wciskamy klawisze CTRL + F5 lub klikamy na Debug / Start without debugging. 14. Powracając do projektu Visual Studio ujrzymy w okienku Solution Explorer to o czym było wspomniane we wstępie do MVC foldery Model, View i Controller. 15. Na początku zaczniemy od zmiany tytułu strony. W pliku _Layout.cshtml znajdującym się w folderze Views/Shared znajdźmy linijkę: @Html.ActionLink("Application name", "Index", "Home", new area = "", new @class = "navbar-brand" ) I zamieńmy ją na: @Html.ActionLink("Rolnik Sp.z.o.o.", "Index", "Home", new area = "", new @class = "navbar-brand" ) 16. Po odpaleniu strony zauważymy, że tytuł w lewym górnym rogu się zmienił. Tytuł ten będzie dostępny na każdej podstronie, ponieważ ustawiliśmy go w naszym głównym wzorcu widoku. 17. Korzystając z powyższej wiedzy zmienimy teraz podstrony menu, by wyświetlały nazwy po polsku:
<div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@html.actionlink("strona główna", "Index", "Home")</li> <li>@html.actionlink("o nas", "About", "Home")</li> <li>@html.actionlink("kontakt", "Contact", "Home")</li> </ul> 18. Dodamy teraz jeszcze stronę opisującą produkty, które sprzedaje nasza firma. By tego dokonać klikamy w Solution Explorer na Model prawym przyciskiem myszy i zaznaczamy Add class. 19. Podmieniamy zawartość klasy na: public class Product public string Title get; set; public string Description get; set; public float Price get; set; public bool Availability get; set; 20. Następnie klikamy prawym przyciskiem myszy na folderze Views/Home i wybieramy Add/View. Powinno ukazać się nam następujące okienko:
21. Nazywamy nasz widok Products, ustawiamy nasz Template jako List i wybieramy jako Model class Product. Zaznaczamy Create as a partial view. 22. Aby wyświetlić nasz nowo utworzony widok przejdźmy do pliku _Layout.cshtml. 23. Do wcześniej dodawanych linków menu dodajmy: <li>@html.actionlink("produkty", "Products", "Home")</li> 24. Teraz musimy tylko dodać kolejny parametr w pliku HomeController.cs znajdującym się w folderze Controllers: public ActionResult Products() ViewBag.Message = "Najlepsze produkty tylko u nas:"; List<Product> products = new List<Product>(); products.add(new Product Title = "Owsianka", Description = "Najlepsza owsianka we wsi!", Price = 35.99f, Availability = true ); products.add(new Product Title = "Owies", Description = "Owies najlepszy dla konia!", Price = 62.70f, Availability = false ); products.add(new Product Title = "Schab", Description = "Prosto od świni!", Price = 32.00f, Availability = true ); return View(products); 25. Wróćmy na chwile do stworzonego przez nas pliku Products.cshtml.
26. Fragment <p> @Html.ActionLink("Create New", "Create") </p> Zamienimy na następujący: @ ViewBag.Title = "Produkty"; <h2>@viewbag.title.</h2> <h3>@viewbag.message</h3> 27. Dodatkowo usuniemy następujący fragment: <td> @Html.ActionLink("Edit", "Edit", new /* id=item.primarykey */ ) @Html.ActionLink("Details", "Details", new /* id=item.primarykey */ ) @Html.ActionLink("Delete", "Delete", new /* id=item.primarykey */ ) </td> 28. Odpalimy teraz stronę by zobaczyć jak to wygląda. 29. Jak widzimy, wszystko jest dobrze wyświetlone oprócz nagłówków w tabeli produktów. Zamienimy je na bliższe klientowi nadpisując naszą klasę w ten sposób: public class Product [Display(Name = "Nazwa produktu")] public string Title get; set; [Display(Name = "Opis produktu")] public string Description get; set; [Display(Name = "Cena")] public float Price get; set; [Display(Name = "Dostępność")] public bool Availability get; set; Aby to działało, musimy dodać dodatkową przestrzeń nazw na początku pliku: using System.ComponentModel.DataAnnotations; 30. Odpal stronę by zobaczyć efekt.
Ćwiczenie 2 Po sukcesie poprzedniej strony, zlecenia zaczęły płynąć gęstym strumieniem. Jednym z ciekawszych projektów to projekt, w którym klient chce stworzyć stronę internetową bijącą rekord Guinessa w liczbie osób przedstawiających swoje marzenia online TwojeMarzeniaOnline. Strona wymaga prostego interface pozwalającego na tworzenie nowych użytkowników zapisywanych do bazy lokalnej. 12. Oodpalamy Visual Studio 2015 Community 13. Na stronie startowej klikamy New Project lub File / New Project 14. Pojawi się nam okienko: 15. Wybieramy ASP.NET Web Application 16. Wybierz nazwę projektu np. MarzeniaOnline 17. Wybierz ścieżkę docelową i naciśnij OK
18. Pojawi się okienko: 19. W razie potrzeby odznaczamy Host in cloud. 20. Authentication pozostaje jako Individual User Accounts 21. Wybieramy MVC i naciskamy OK. 22. Po stworzeniu projektu odpalamy by zobaczyć, jak wygląda strona. 23. Klikamy Register by zobaczyć jak wygląda panel rejestracji 24. Dodamy pole z marzeniami, aby zwiększyć funkcjonalność rejestracji. 25. Otwieramy plik AccountViewModels.cs znajdujący się w folderze Models. 26. Dodajemy następujący fragment kodu w klasie RegisterViewModel: [Required] [Display(Name = "Podaj swoje marzenie")] public string Wish get; set; [Required] [Display(Name = "Jak masz na imię?")] public string Name get; set; 27. Przechodzimy do folderu Views / Account i otwieramy plik Register.cshtml
28. Dodajemy następujący fragment zaraz pod wierszem tabeli odpowiadającym za Email: <div class="form-group"> @Html.LabelFor(m => m.name, new @class = "col-md-2 control-label" ) <div class="col-md-10"> @Html.TextBoxFor(m => m.name, new @class = "form-control" ) <div class="form-group"> @Html.LabelFor(m => m.wish, new @class = "col-md-2 control-label" ) <div class="col-md-10"> @Html.TextBoxFor(m => m.wish, new @class = "form-control" ) 29. Odpalamy stronę by zobaczyć jak to teraz wygląda. 30. Wprowadzamy swoje dane i naciskamy Register 31. Jeżeli zostaliśmy zarejestrowany wracamy do Visual Studio. 32. Naciskamy View / Server Explorer 33. Następnie wybieramy Data Connections i rozwijamy DefaultConnection: 34. Rozwijamy tabelę AspNetUsers by podejrzeć wszystkie kolumny, które mamy w naszej tabeli 35. Naciskamy prawym przyciskiem myszy na AspNetUsers i wybieramy Show Table Data. 36. Jak widzimy nasz użytkownik się dodał, ale z błędnymi danymi (UserName) oraz brakuje kolumny z marzeniem. 37. Usuwamy użytkownika klikając na niego prawym i naciskając Delete. Potwierdzamy usunięcie. 38. Klikamy ponownie prawym przyciskiem na tabeli AspNetUsers i wybieramy Open Table Definition.
39. Powinien otworzyć się nam następujący widok: 40. W designerze klikamy na nowy wiersz i wpisujemy następujące dane: Id: Wish Data Type: nvarchar(max) Allow Nulls: odznaczone Default: zostawiamy puste 41. Jak możemy zaobserwować poniżej nasze zapytanie CREATE TABLE uległo zmianie 42. Naciskamy przycisk Update.
43. Wyskoczy nam okienko: 44. Nie mamy żadnych danych w tabeli, więc nie będziemy mieli żadnych problemów więc klikamy Update Database. 45. Jeżeli wynik operacji jest pozytywny ( Update completed successfully ) możemy kontynuować. 46. Idziemy do pliku IdentityModels.cs znajdującego się w folderze Models 47. Dodajemy następujący fragment w klasie ApplicationUser: public string Wish get; set; 48. W tym samym pliku dodajemy następujący fragment w konstruktorze ApplicationDbContext: Database.SetInitializer<ApplicationDbContext>(null); 49. Przechodzimy do pliku AccountController.cs znajdującego się w folderze Controllers 50. Szukamy metody Register(RegisterViewModel model)
51. Podmieniamy kreację usera z : var user = new ApplicationUser UserName = model.email, Email = model.email ; Na następującą: var user = new ApplicationUser UserName = model.name, Email = model.email, Wish = model.wish ; 52. Odpalamy naszą strone i ponownie się rejestrujemy. 53. Po rejestracji wracamy ponownie do Server Explorer i wykonujemy przegląd danych tabeli AspNetUsers klikając prawym i wybierając Show Table Data. 54. Jeżeli zrobiliśmy wszystko dobrze, dane powinny zostać dodane. 55. Zastąp zawartość pliku _Layout.cshtml na następującą:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>twoje Marzenia Online - Podziel się swoimi marzeniami.</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("Twoje Marzenia Online", "Index", "Home", new area = "", new @class = "navbar-brand" ) <div class="navbar-collapse collapse"> @Html.Partial("_LoginPartial") <div class="container body-content"> @RenderBody() <hr /> <footer> <p> @DateTime.Now.Year - Twoje Marzenia Online</p> </footer> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) </body> </html> 56. Dodamy teraz zewnętrzną paczkę z biblioteką, która poprawi nam sposób w jaki będziemy wyświetlać użytkowników i ich marzenia. 57. Wybieramy Tools / Nuget Package Manager / Manage for solution 58. Wyszukujemy paczkę o nazwie Grid.Mvc
59. Zaznaczamy i klikamy po prawej stronie Install 60. W wyskakującym okienku naciskamy OK.
61. Zastąp wartości w pliku Index.cshtml w folderze Views/Home następującymi: @model IEnumerable<WebApplication1.Models.ApplicationUser> @using GridMvc.Html @ ViewBag.Title = "Ludzie i ich marzenia"; <div class="col-lg-12"> <h1>@viewbag.title</h1> <hr /> @if (Model!= null) WebApplication1.Models.ApplicationDbContext context = new WebApplication1.Models.ApplicationDbContext(); @helper ActionColumn(WebApplication1.Models.ApplicationUser user) <text>napisz do mnie: </text><a href="mailto:@user.email">kliknij!</a> @Html.Grid(Model).Columns(columns => columns.add(foo => foo.username).titled("nazwa użytkownika").sortable(true); columns.add(foo => foo.wish).titled("marzenie").sortable(true); columns.add().encoded(false).sanitized(false).titled("kontakt").rendervalueas(o => @ActionColumn(o)); ) 62. Przejdź do pliku HomeController.cs znajdującego się w folderze Controllers 63. Na początku klasy HomeController dodaj linijkę: ApplicationDbContext db = new ApplicationDbContext(); 64. Zmień return Index() na następujący: return View(db.Users.ToList()); 65. Odpal stronę by zobaczyć wynik naszej pracy. 66. Wyloguj się i stwórz drugiego użytkownika, by zobaczyć czy sortowanie działa. 67. Wszystko pięknie ale co gdy nasze marzenie się zmieni? Trzeba dać użytkownikowi szansę zmiany tej wartości!
68. Przechodzimy do pliku ManageViewModels.cs i dodajemy następujący fragment: public class ChangeWishViewModel [Required] [Display(Name = "Podaj swoje marzenie")] public string Wish get; set; 69. Klikamy prawym na Views/Manage i wybieramy AddView 70. Wyskoczy nam okienko: 71. Wpisujemy następujące wartości: View name: EditWish Template: Empty (without model) Create as a partial view: zaznaczamy 72. Naciskamy Add
73. Dodajemy następujący fragment do kodu utworzonej strony: @model WebApplication1.Models.ChangeWishViewModel @ ViewBag.Title = "Change Wish"; <h2>@viewbag.title.</h2> @using (Html.BeginForm("ChangeWish", "Manage", FormMethod.Post, new @class = "form-horizontal", role = "form" )) <h4>change Wish Form</h4> <hr /> <div class="form-group"> @Html.LabelFor(m => m.wish, new @class = "col-md-2 control-label" ) <div class="col-md-10"> @Html.TextBoxFor(m => m.wish, new @class = "form-control" ) <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="zmień marzenie" class="btn btn-default" /> @section Scripts @Scripts.Render("~/bundles/jqueryval") 74. Przechodzimy do pliku ManageController.cs i dodajemy fragment: public ActionResult EditWish() return View(); [HttpPost] public async Task<ActionResult> EditWish(ChangeWishViewModel model) if (ModelState.IsValid) ApplicationUser user = UserManager.FindById(User.Identity.GetUserId()); user.wish = model.wish; UserManager.Update(user); return RedirectToAction("Index", new Message = "Zmieniłeś swoje marzenie!" ); return View(model); 75. Zostało nam tylko przejść do pliku Index.cshtml znajdującego się w folderze Views/Manage i dodać następujący fragment:
<dt>marzenie:</dt> <dd> @Html.ActionLink("Zmień marzenie", "EditWish") </dd> 76. Odpalamy stronę i zmieniamy wartość życzenia w profilu. Zmiany na stronie głównej.