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

Transkript

1 Tech College Aalborg ASP.NET Hjemmeside Projekt Smart Zenior Home - Guide til ASP.NET hjemmeside med Visual Studio

2 Isabella Sihm Ziersen 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

3 Isabella Sihm Ziersen 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 2

4 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 Isabella Sihm Ziersen 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 3

5 Isabella Sihm Ziersen 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 med dit eget link fx. 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 4

6 Tilføj nye menupunkter Projektet har 3 synlige sider: Home (Index.cshtml) About (About.cshtml) Contact (Contact.cshtml) Isabella Sihm Ziersen 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 asppage="/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 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 5

7 Isabella Sihm Ziersen Å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 csfil. 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 csfilen. Eksempel About.cshtml Razor efterfulgt af et tagget i toppen af.cshtml-filen fortæller Razor at denne.cshtml-fil er en Razor tagget specificerer den model der bruges Single statement } definerer sidens titel, og kaldes 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 Modellen kan udvides med flere funktioner fx. GetDayOfWeek() der returnerer en tekst. Funktionen kaldes i About.cshtm GetDayOfWeek(). Upload til webhotel Min hjemmeside er hosted hos UnoEuro. Fra kontrolpanelet kan man downloade en Publish Settings File. 6

8 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. Isabella Sihm Ziersen Konfiguration af Web Deploy UnoEuro bruger som standard 1.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 7