Tech College Aalborg

ASP .NET Hjemmeside Projekt Smart Zenior Home - Guide til ASP .NET hjemmeside med Visual Studio

Isabella Sihm Ziersen

1

Indhold ASP.Net hjemmeside ......................................................................................................................... 2

Visual Studio .................................................................................................................................. 2

Brug af templates til oprettelse af hjemmesiden.......................................................................... 2

Start et nyt web projekt ............................................................................................................ 2

Solution Explorer ....................................................................................................................... 3

Tilpasning af hjemmesiden ............................................................................................................ 3

Bannerbilleder ........................................................................................................................... 3

Ændring af tekster og links ........................................................................................................ 4

Tilføj nye menupunkter ............................................................................................................. 5

Opret nye sider .......................................................................................................................... 5

Ændring af indholdet på en side ................................................................................................ 6

Upload til webhotel ....................................................................................................................... 6

Konfiguration af Web Deploy .................................................................................................... 7

Isabella Sihm Ziersen

2

ASP.Net hjemmeside Jeg har valgt at lave en ASP.NET hjemmeside. ASP.NET er et gratis web-framework (udviklingsplatform), der kan anvendes til at lave dynamiske hjemmesider og webapplikationer. Denne brugervejledning beskriver de programmer og metoder jeg har brugt til udvikling af hjemmesiden

Visual Studio Til udvikling af hjemmesiden har jeg brugt Microsoft Visual Studio Community. Visual Studio er et integreret udviklingsmiljø fra Microsoft. Visual Studio understøtter en række web-programmeringssprog fx. C#, Visual Basic og JAVA. Installationsfiler og vejledning kan findes på docs.microsoft.com Jeg har valgt en minimum installation. Men der kan til enhver tid tilføjes flere komponenter via Visual Studio Installer programmet.

Ved installationen af Visual Studio installeres også IIS og SQLserver, som er nødvendige, hvis hjemmesiden skal testes lokalt før den uploades.

Brug af templates til oprettelse af hjemmesiden Til Design af hjemmesiden har jeg valgt at tage udgangspunkt i en ASP.Net Core template

Start et nyt web projekt File → New →Project Vælg Visual C# → Web → ASP.NET Core web Application Name: Navnet på webapplikationen ændres Husk at ændres fra WebApplication1 til fx. Isabella Ziersen

Trykkes OK genereres en komplet hjemmeside. Den autogenererede hjemmeside kan ses lokalt på computeren via IIS (Microsofts Information Server): File → View in Browser (Ctrl+Shift+W) Den består af 3 synlige sider

Home (Index.cshtml)

About (About.cshtml)

Contact (Contact.cshtml) + en ikke synlig side Error.cshtml

Isabella Sihm Ziersen

3

Solution Explorer De 4 sider der er oprettet automatisk ligger i mappen ”pages” i Visual Studios ”Solution Explorer” Mappen wwwroot har 4 undermapper

CSS

Images

Js

Lib

Mappen CSS CSS står for "Cascading Style Sheets". CSS bruges til at definere layoutet på dine HTML-sider. Man kan nærmest sige, at CSS farvelægger og visualiserer dine HTML-sider. CSS består nemlig af flere hundrede forskellige egenskaber, som giver dig mulighed for at bestemme skrifttyper, tekststørrelser, farver, marginer, kanter, højder, bredder, baggrundsbilleder, baggrundsfarver osv. på din hjemmeside. Mappen Images I mappen Images ligger alle billeder der bruges på hjemmesiden. Der er default autogeneret 4 billeder

banner1

banner2

banner3

banner4

Disse 4 billeder vises på startsiden/Home (Index.cshtml) Man kan også se billederne i en Windows stifinder Mappen Js I mappen Js er der en fil (site.js) JavaScript er nok det mest brugte scripting-sprog på nettet. Alle og enhver kan bruge JavaScript, da det hverken skal downloades eller købes. JavaScript er nemlig et scripting-sprog, som skrives direkte i dine HTML filer. Dine scripts lavet med JavaScript bliver derfra læst og udført af browseren. Mappen Lib I mappen Lib ligger et sæt af klassebiblioteker fx. . ASP.Net.

Tilpasning af hjemmesiden

Bannerbilleder Der er 4 banner billeder på startside/Home (Index.cshtml). Nye banner billeder lægges i folderen ”images”. Dette kan gøres via Windows stifinder:

..source\repos\Isabella Ziersen\Isabella Ziersen\wwwroot\images. ! Billederne skal have en passende størrelse fx. 1200x400 pixel Jeg har valgt at lægge 4 nye banner billeder ind

smarthome1

smarthome2

smarthome3

smarthome4

Isabella Sihm Ziersen

4

Søg derefter ”banner” i Visual Studio Edit→Find and replace→Find in Files (Ctrl+Shift+F)

Dobbelt klik på første ”Find Result” I filen Index.cshtml slettes banner1. Derefter skrives 1 bogstav i dine egne bannerbilleder. I dette tilfælde ”s” vælg en af dine egne bannerbilleder fx. Smarthome1

De 3 andre bannerbilleder ændres på samme måde: Dobbelt klip på 2. søgeresultat – slet banner 2, skriv smarthome2 etc. Gem filen: File→Save (Ctrl+S) Se resultatet ved at opdatere din browser (F5)

Ændring af tekster og links Marker og kopier den tekst der skal ændres fx. ”Learn how to build ASP.NET apps that can run anywhere”

Søg derefter teksten i Visual Studio Edit→Find and replace→Find in Files (Ctrl+Shift+F) Erstat teksten med din egen tekst fx. ”Denne hjemmeside er lavet til min svendeprøve på Tech College Aalborg.”

Erstat teksten ”learn more” med din egen tekst fx. ”Se mere” Erstat referencen til den hjemmeside der linkes til ”https://...” med dit eget link fx. ”https://techcollege.dk/alle-uddannelser/elektriker/”

Gem filen: File→Save (Ctrl+S) Se resultatet ved at opdatere din browser (F5) Kontroller at linket virker ved at trykke på ”Se mere” Alle tekster og links kan ændres på samme måde

Isabella Sihm Ziersen

5

Tilføj nye menupunkter Projektet har 3 synlige sider:

Home (Index.cshtml)

About (About.cshtml)

Contact (Contact.cshtml)

Navigation på siden foregår via Navigationsmenuen der er defineret i filen ”Layout.cshtml” Tilføjelse af nye menupunkter Åbn filen Layout.cshtml i Solution Explorer eller søg efter ”<li><a asp-page="/Index">Home</a></li>” Der kan tilføjes et nyt menupunkt fx. med teksten ”Projektet” og der linker til siden ”NySide ”. Men det er ikke særligt smart at kalde en side for ”NySide” så kald siden for ”Projektet” i stedet

Gem filen: File→Save (Ctrl+S) Se resultatet ved at opdatere din browser (F5)

Hvis man trykker på menupunktet ”Projektet” sker der ingen ting. Fordi der ikke er en side med navnet Projektet.cshtml

Opret nye sider Nye sider kan oprettes ved at tilføje en side Pages→ Add →Razorpage Eller ved at lave en kopi af en eksisterende side som beskrevet nedenfor: Vælg en eksisterende side fx. About.cshtml I Solution Explorer åbnes de 2 filer

About.cshtml

About.cshtml.cs Gem filen: File→ Save About.cshtml As.. Erstat ”About” med navnet på den nye side fx. Projektet.cshtml Gem filen: File→ Save About.cshtml.cs As.. Erstat ”About” med navnet på den nye side fx. Projektet.cshtml.cs

I filen Projektet.cshtml.cs erstattes class ”AboutModel” med ”ProjektetModel”

I filen Projektet.cshtml erstattes @model ”AboutModel” med ”ProjektetModel” Og titlen ”About” erstattes med den nye titel ”Projektet”

Gem alle filer: File→Save (Ctrl+Shift+S) Luk Projektet: File→Close Solution

Isabella Sihm Ziersen

6

Åbn Projektet: Dobbelt klip Recent File → View in Browser

Ændring af indholdet på en side Templaten bruger Razor view engine som er en del af .Net Core. Razor er et simpelt regelsæt (programmerings syntaks), der kan bruges til at lave dynamiske hjemmesider. En introduktion til .Net, MVC og Razor kan findes på udvikleren.dk Hvis der ikke skal være aktivt indhold (Kode) på en side er det ikke nødvendigt at have en cs-fil. Efter @page tagget i toppen kan man bruge almindelige html tags fx. .:

Headere <h1>, <h2> ...<h6>

Afsnit <p>

Ny linje <br>

Hvis der skal være aktivt indhold, skrives html-koden i .cshtml-filen og den aktive kode i cs-filen. Eksempel About.cshtml Razor bruger @-symbolet efterfulgt af et keyword: @page tagget i toppen af .cshtml-filen fortæller Razor at denne .cshtml-fil er en Razor side. @model tagget specificerer den model der bruges Single statement blokken @{ ... } definerer sidens titel, og kaldes med @ViewData. Blokken kan udvides med flere statements fx. var myMessage = ”Hello World”;

I eksemplet bruges en model der er ligger i About.cshtml.cs. Page modellen har en funktion OnGet() der sætter værdien på den tilhørende tekst variabel (string) Message. I About.cshtm kaldes den via @Model.Message. Modellen kan udvides med flere funktioner fx. GetDayOfWeek() der returnerer en tekst. Funktionen kaldes i About.cshtm via @Model. GetDayOfWeek().

Upload til webhotel Min hjemmeside er hosted hos UnoEuro. Fra kontrolpanelet kan man downloade en Publish Settings File.

Isabella Sihm Ziersen

7

I Visual Studio vælges Build→ Publish IsabellaZ Som publishing target vælges: IIS,FTP,etc → Import Profile åbner en file explorer hvorfra den Publish Settings File der er downloaded kan vælges.

Konfiguration af Web Deploy UnoEuro bruger som standard1 .Net Core Version til 1.1. Da hjemmesiden er lavet med version 2.0 er det nødvendigt at lave en Self Contained Deployment (SCD): Vælg →Configure Vælg →Next Vælg Deploymentmode: Self-Contained Vælg →Save

Til slut oploades hjemmesiden til webhotellet Ved at vælge →Publish

1 https://www.unoeuro.com/support/faq/asp/361/