Gör en häftig webbsajt

Vi lär oss göra enkla webbsajt. Vi utgår från vårt eget ramverk vars enda syfte är att det ska gå lätt att använda. Vill du använda något annta så kan du göra det, men du ansvarar för att dui följer beskrivningen nedan.

Beskrivning

Du ska göra en webbserver som du kan logga in på.

Resurser

Genomförande

Genom att följa alla steg nedan kommer du kunna gör allt med ramverket sedan. Stegen beskriver inte exakt vad som ska göra utan är på ett ungefär. För mer information läs de olika demon som fins ovan. Det kan vara nödvändigt för att förstå visa steg nedan.

1 Ladda ned mappen

Observera att denna mapp är mesta dels tom. All kod utifrån finns i lib/index.ts och kan updateras genom att köra filen tools/index.ts

Zip-filen

2 Updatera sajten

Genom att uppdatera index.ts filen så kan du updtara till senaste versionen av filen. Det kan du antingen göra genom att köra progeammet nedan. Eller ladda ned filen själv och ersätta den.


./tools/upload.sh

index.ts

Gör detta steg ibland eller när du hör att något blivit uppdaterat. Du behöv er också ge komandot "deno install" och eventuellt installera varje packet för sig.

3 Lägg till resurser i public

Du kan kopiera in filer i mappen som hetter puiblic. Starta sedan servern med följande kommando:


./server.ts

Alternativt kör kommandot som står längst upp i "server.ts" filen i terminalen.

4 Lägg till en template

Lägg till html filer som du vill ha som template i "template" mappen. Du kan nu använda funktionern "template" i din "server.ts" genom att svara på ett anrop:


app.get("/", (c) => template(c, { title: "Välkommen" }, "index.tp.html"));

5 Spara och läs data

Först gör ett interface och med hjälp av detta interface ett objet som kan vara ett default värde. Sedan ge funktionen "laod" en sökväg och ett default värde om sökvägen inte finns, du får då ett data objekt du kan manipulera som ett vanligt objet. Data kommer spara under mappen "data" och din sökväg. När du är klar med objektet och behöver spara det, så anropar du "save" med objetet som parameter. Se detta exempel:


interface Msg {
title: string;
}
const default_data: Msg = {
title: "Data is Data",
};
// Massa med annan kod.
// Sedan i ett anrop
const data = await load("msg/common", default_data);
// Gör massa med objektet data.
await save(data);

Denna lösninge är båda enkelt och löser många av våra problem. Men det kan vara lite svårt att förstå varför och den är inte så bra implmenterat så som den kunde vara.

6 Spara data från ett formulär

Gör ett formulär och spara data från det i ett anrop enligt ovan.


<form action="/input" method="get">
<label for="titel">Title: </label>
<input type="text" name="title" id="title" required />
</form>

7 Visa data i en lista

Skapa en array med objet som har title som egenskap. Du kan sedan visa upp dem med hjälp av koden nedan.


{{#list}}
<div class="message">
<h1>{{title}}</h1>
</div>
{{/list}}

8 Se till att man kan logga in på

Du behöver göra en login html sida och sedan kopla den till din server genom att använda en funktion:


app.get("/login", (c) => login(c));

Exempel på loggin funktion

9 Gör så att visa saker kan man bara logga in på om man har rätt roll

Du ska helt enkelt använda en midelware med "lock".


app.use("/hemligt", lock("admin"));
app.get("/hemligt", (c) => c.text("Hemligt!"));

Ovan kommer låsa url "/hemligt" så bara en anvädnare osm har rolen "admin" kan läsa den.

10.🕺 Visa data som är specifika för en användare

Inlämning

Du lämnar in samma lektion som du har fått övningarna ovan. Om du blir sen så lämna in så snart som möjligt.

🔗 Inlämning
🔗 Formuläret för inlämning
Lämna in med namnet på övningen.

Observera att du kan lämna in flera gånger om du inte blir nöjd, men du får bara ett 🥉 om du lämnar i tid.

Bedömning

1 + 🥉 Följ beskrivningen ovan

Du har gjort alla stegen ovan, med en egen tolkining. Denna tolkning måste inte vara intressatn eller användbar.

2 + 🥉 Bli klar innan deadline

Du har blivit klar innan deadline. Håll dig uppdaterat om när det är.

3 + 🥉 Bra sida

Din sida använda alla steg ovan så vi får en användbar sida.

4 + 🥉 Bra lagring

Du lagrar data på ett effektivt sätt.

5 + 🥈 Sajten fungera utifrån sitt syfte

Du har skrivit en README fil och sajten fyller syftet utifrån den.

6 + 🥈 Flera användare

Du får till en bra funktion som bygger på att det finns flera användare på sajten.

Information

Sajt