Mikmak Home Index wireframe naar HTML

Elke website heeft één of meerdere index pagina's. Ze gelijken op de inhoudsopgave van een boek en dienen om snel toegang te krijgen tot een bepaald gedeelte van de website. De home pagina van een website is een index pagina.

Probleem

De homepagina focust op het online shopping. De link naar de admin applicatie zetten we daarom onopvallend in footer. De beheerder weet die wel te vinden. Vermits die link in de footer staat is die terug te vinden op MasterLayout.cshtml pagina.

Design

Home Index pagina

We vertrekken van de wireframe voor de Index pagina om de HTML indeling op te stellen. Deze pagina is zeer eenvoudig omdat we alleen het Admin gedeelte implementeren.

Oplossing

De Home index pagina behoort tot de Home sectie van de website. We maken daarvoor in de Views folder een map met de naam Home. Daarin plaatsen we alle Views die met de Home sectie te maken hebben.

We beginnen met de Index pagina. Een index pagina is zoals de inhoudsgave van een boek waarmee je snel toegang kan krijgen tot een bepaald deel van het boek. We geven er de naam aan Index.cshtml.

Mikmak View Add with Specify name item dialogbox

Vervolgens kies je lay-out pagina voor deze view:

Mikmak View Add Select a Layout Page dialogbox

De code voor de Home Index pagina is voorlopig heel simpel. Hier staat niet veel in vermits we het online shopping gedeelte pas in Programmeren 4 uitwerken.

@{
    Layout = "~/Views/Shared/MasterLayout.cshtml";
}
<div id="home-floor" class="floor">
    <div class="control-panel">
        <h1>Mikmak</h1>
    </div>
    <div id="showroom">
        <p>Hier komt de webwinkel</p>
    </div>
</div>

2017-01-03 13:23:31