{
"path": "/home/krm/dev/mimer-privatum/Courses/webbserverprogram-1/Lab/websajt.sv.json",
"s": "Ignor",
"invert": true,
"level": 1,
"title": [
"Gör en häftig webbsajt"
],
"author": [
"krm"
],
"created": {
"year": 2026,
"month": 4,
"day": 22
},
"image": "/image/courses/house.png",
"status": "alpha",
"description": [
"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 \nannta så kan du göra det, men du ansvarar för att dui följer \nbeskrivningen nedan."
],
"statments": [],
"comment": [],
"cards": [
{
"level": 1,
"title": [
"Beskrivning"
],
"description": [
"Du ska göra en webbserver som du kan logga in på."
],
"statments": [],
"comment": []
},
{
"level": 1,
"title": [
"Resurser"
],
"description": [],
"statments": [
{
"description": [
"⚙️ ",
[
{
"link": "https://htsit.se/f/my-info.zip"
},
"Start mappen"
]
]
},
{
"description": [
"⚙️ ",
[
{
"link": "https://htsit.se/f/index.ts"
},
"Kod filen för ramverket: index.ts"
]
]
},
{
"description": [
"⚙️ ",
[
{
"link": "https://gitlab.com/krmit/mimer-info"
},
"Ett fullständigt demo"
]
]
}
],
"comment": []
},
{
"level": 1,
"title": [
"Genomförande"
],
"description": [
"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 \nungefär. För mer information läs de olika demon som fins ovan. Det kan \nvara nödvändigt för att förstå visa steg nedan."
],
"statments": [],
"comment": []
},
{
"level": 1,
"index": 1,
"title": [
"Ladda ned mappen"
],
"description": [
"Observera att denna mapp är mesta dels tom. All kod utifrån finns i ",
[
{
"form": "important"
},
"lib/index.ts"
],
" och kan updateras genom att köra filen ",
[
{
"form": "important"
},
"tools/index.ts"
]
],
"statments": [
{
"link": "https://htsit.se/f/my-info.zip",
"description": [
"Zip-filen"
]
}
],
"comment": []
},
{
"level": 1,
"index": 2,
"title": [
"Updatera sajten"
],
"description": [
"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 \nnedan. Eller ladda ned filen själv och ersätta den."
],
"lang": "sh",
"code": "./tools/upload.sh",
"statments": [
{
"link": "https://htsit.se/f/index.ts",
"description": [
"index.ts"
]
}
],
"comment": [
"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 \nvarje packet för sig."
]
},
{
"level": 1,
"index": 3,
"title": [
"Lägg till resurser i public"
],
"description": [
"Du kan kopiera in filer i mappen som hetter puiblic. Starta sedan servern med följande kommando:"
],
"lang": "",
"code": "./server.ts",
"statments": [],
"comment": [
"Alternativt kör kommandot som står längst upp i \"server.ts\" filen i terminalen."
]
},
{
"level": 1,
"index": 4,
"title": [
"Lägg till en template"
],
"description": [
"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 \npå ett anrop:"
],
"lang": "",
"code": "app.get(\"/\", (c) => template(c, { title: \"Välkommen\" }, \"index.tp.html\"));",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 5,
"title": [
"Spara och läs data"
],
"description": [
"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 \nett default värde om sökvägen inte finns, du får då ett data objekt du \nkan manipulera som ett vanligt objet. Data kommer spara under mappen \n\"data\" och din sökväg. När du är klar med objektet och behöver spara \ndet, så anropar du \"save\" med objetet som parameter. Se detta exempel:"
],
"lang": "ts",
"code": "interface Msg {\ntitle: string;\n}\nconst default_data: Msg = {\ntitle: \"Data is Data\",\n};\n// Massa med annan kod.\n// Sedan i ett anrop\nconst data = await load(\"msg/common\", default_data);\n// Gör massa med objektet data.\nawait save(data);",
"statments": [],
"comment": [
"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 \nimplmenterat så som den kunde vara."
]
},
{
"level": 1,
"index": 6,
"title": [
"Spara data från ett formulär"
],
"description": [
"Gör ett formulär och spara data från det i ett anrop enligt ovan."
],
"lang": "html",
"code": "",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 7,
"title": [
"Visa data i en lista"
],
"description": [
"Skapa en array med objet som har title som egenskap. Du kan sedan visa upp dem med hjälp av koden nedan."
],
"lang": "html",
"code": "{{#list}}\n\n
{{title}}
\n\n{{/list}}",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 8,
"title": [
"Se till att man kan logga in på"
],
"description": [
"Du behöver göra en login html sida och sedan kopla den till din server genom att använda en funktion:"
],
"lang": "ts",
"code": "app.get(\"/login\", (c) => login(c));",
"statments": [
{
"link": "/f/login.html",
"description": [
"Exempel på loggin funktion"
]
}
],
"comment": []
},
{
"level": 1,
"index": 9,
"title": [
"Gör så att visa saker kan man bara logga in på om man har rätt roll"
],
"description": [
"Du ska helt enkelt använda en midelware med \"lock\"."
],
"lang": "ts",
"code": "app.use(\"/hemligt\", lock(\"admin\"));\napp.get(\"/hemligt\", (c) => c.text(\"Hemligt!\"));",
"statments": [],
"comment": [
"Ovan kommer låsa url \"/hemligt\" så bara en anvädnare osm har rolen \"admin\" kan läsa den."
]
},
{
"level": 1,
"title": [
"10.🕺 Visa data som är specifika för en användare"
],
"description": [],
"statments": [],
"comment": []
},
{
"level": 1,
"title": [
"Inlämning"
],
"description": [
"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."
],
"statments": [
{
"description": [
"🔗 ",
[
{
"link": "/kaos/Courses/webbutveckling-1/Tutorial/make-a-submission.sv.html"
},
"Inlämning"
]
]
},
{
"description": [
"🔗 ",
[
{
"link": "https://forms.gle/fht9Fw9xu9Wa5u3Z7"
},
"Formuläret för inlämning"
]
]
},
{
"description": [
"Lämna in med namnet på övningen."
]
}
],
"comment": [
"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."
]
},
{
"level": 1,
"title": [
"Bedömning"
],
"description": [],
"statments": [],
"comment": [],
"cards": [
{
"level": 2,
"index": 1,
"title": [
"+ 🥉 Följ beskrivningen ovan"
],
"description": [
"Du har gjort alla stegen ovan, med en egen tolkining. Denna tolkning måste inte vara intressatn eller användbar."
],
"statments": [],
"comment": []
},
{
"level": 2,
"index": 2,
"title": [
"+ 🥉 Bli klar innan deadline"
],
"description": [
"Du har blivit klar innan deadline. Håll dig uppdaterat om när det är."
],
"statments": [],
"comment": []
},
{
"level": 2,
"index": 3,
"title": [
"+ 🥉 Bra sida"
],
"description": [
"Din sida använda alla steg ovan så vi får en användbar sida."
],
"statments": [],
"comment": []
},
{
"level": 2,
"index": 4,
"title": [
"+ 🥉 Bra lagring"
],
"description": [
"Du lagrar data på ett effektivt sätt."
],
"statments": [],
"comment": []
}
]
},
{
"level": 1,
"index": 5,
"title": [
"+ 🥈 Sajten fungera utifrån sitt syfte"
],
"description": [
"Du har skrivit en README fil och sajten fyller syftet utifrån den."
],
"statments": [],
"comment": []
},
{
"level": 1,
"index": 6,
"title": [
"+ 🥈 Flera användare"
],
"description": [
"Du får till en bra funktion som bygger på att det finns flera användare på sajten."
],
"statments": [],
"comment": []
},
{
"level": 1,
"index": 7,
"title": [
"+ 🥇 En krativ ide"
],
"description": [
"Du skapar något som skiljer sig väsntlige från de demona som finns."
],
"statments": [],
"comment": []
},
{
"level": 1,
"index": 8,
"title": [
"+ 🥇 En riktigt bra sajt"
],
"description": [
"Din sajter fylller en funktion för sina användare."
],
"statments": [],
"comment": []
},
{
"level": 1,
"title": [
"Lycka till! 🍀"
],
"description": [],
"statments": [],
"comment": []
}
],
"kind": "lab"
}