Deel 1 - HeinPauwelyn/IoTShop GitHub Wiki

Uitwerking

Stap 1: project opzetten

Maak een nieuw ASP.NET MVC Project aan. Vink zeker volgende zaken AAN:

  • MVC
  • Web API (bruikbaar in volgende labo’s)
  • Unit Test (bruikbaar in volgende labo’s)

Stap 2: models aanmaken

Genereer op basis van de bovenstaande tekst en de meegeleverde voorbeeld files alle nodige modellen met hun juiste eigenschappen.

Stap 3: context aanmaken

Aangezien we gebruik maken van ASP.NET Identity is hiervoor reeds een context aanwezig in het project. U mag deze hergebruiken. Zoek de context van ASP.NET Identity in het project. U kan deze vinden in de file IdentityModels.cs. De klasse erft van IdentityDbContext. U mag hier de tabellen toevoegen via DbSet(). Zorg ook voor een goede connectionstring met de juiste naam.

Stap 4: database genereren

Activeer nu de entity framework migrations. Voeg een eerste migratie toe en voer deze uit zodat de database aangemaakt worden. Controleer de tabellen in de database. Komen deze overeen met de models? Zijn de ASP.NET Identity tabellen aanwezig?

Stap 5: Seed testdata

In deze stap gaan we de Seed() methode gebruiken om test data toe te voegen aan de database. U hebt een 3 tal bestanden met test data gekregen in de opgave. Lees deze bestanden binnen in de Seed methode en voeg de data toe aan de database. Controleer in de database of de test data verschijnt in de tabellen.

Stap 6: Seed users en roles

Naast de test data wensen we ook nog 2 gebruikers en 2 rollen aan te maken via de Seed(). Deze 2 gebruikers krijgen een aantal extra velden. Wijzig de klasse ApplicationUser als volgt:

public class ApplicationUser : IdentityUser
{
    public string Name { get; set; }
    public string FirstName { get; set; }
    public string Address { get; set; }
    public string ZipCode { get; set; }
    public string City { get; set; }
    public string Country { get; set; }

    // andere code
}

Het toevoegen van users en roles via de Seed() hebben we reeds vorig semester gezien. Toch kan u hieronder nog eens de code vinden. Voeg deze toe in de Seed(). Om te testen moet u terug “update-database” uitvoeren. U moet eventueel ook de database eerst verwijderen uit de SQL Server.

IdentityResult roleResult;

var roleManager = new RoleManager<IdentityRole>(new RoleStore<IdentityRole>(context));

if (!roleManager.RoleExirsts(ApplicationRoles.Administrator))
{
    roleResult = roleManager.Create(new IdentityRole(ApplicationRoles.Administrator));
}

if (!context.Users.Any(u => u.Email.Equals("[email protected])))
{
    var store = new UserStore<ApplicationUser>(context);
    var manager = new UserManager<ApplicationUser>(store);
    var user = new ApplicationUser() {
        Name = "De Preester",
        FirstName = "Dieter",
        Email = "[email protected]",
        UserName = "[email protected]",
        Address = "Graaf Karel De Goeldelaan 1",
        City = "Kortrijk",
        Zipcode = "8500"
    };
    manager.Create(user, "-Password1");
    manager.AddToRole(user.Id, ApplicationRoles.Administrator);
}

Stap 7: Cataloog controller en views

Nu kunnen we starten met het echte werk. Voeg een cataloog controller toe en zorg dat deze automatisch opstart. De default pagina is een lijst van alle toestellen die in de database zitten. Voeg de nodig repositories toe en schrijf de juiste query’s om de data op te halen. Kijk nog NIET naar de opmaak. Gebruik de default ASP.NET MVC template. U zal later de kans krijgen om de opmaak aan te passen.

image

Stap 8: weergave product details

Na het klikken op details moeten er meer info verschijnen over een toestel.

image

Stap 9: product toevoegen

Het toevoegen van toestellen mag enkel gebeuren door mensen met de rol van administrator. Mijn scherm zit er als volgt uit: Probeer enkel naar de functionaliteit te kijken, niet naar de opmaak. Belangrijk is hier dat je meer operating systems en frameworks kan kiezen per toestel. Dit is een complex scherm, denk goed na hoe je dit zal doen. Hoe zal je de state bijhouden bij het toevoegen van Operating Systems en Frameworks ???

image

Stap 10 (Thuis opdracht): bootstrap opmaak

Wijzig de opmaak met behulp van een bootstrap template naar keuze. Ik maak gebruik van http://aozora.github.io/bootplus/ maar u mag zelf een andere kiezen. Zolang de default ASP.NET MVC template maar weg is.