Webkurs - HackMD

![](https://www.omegav.ntnu.no/style/bilder/header.png) # Webkurs I dette kurset skal du, min kjære medstudent, bli belært i kunsten: **web-design**. Vi har et håp om at du etter ni mer eller mindre effektive timer skal sitte igjen med ferdighetene og selvtilliten til å kapre din egen lille del av det store åpne World Wide Web. Litt mer konkret skal du forhåpentligvis sitte igjen med litt kunnskap innen HTML og CSS, samt en liten forståelse for hvordan din nettside kan ha en samtale med en database. Du vil også forstå at dette virkelig er alt du trenger for å lage en virkelig fin og funksjonell nettside (Så lar vi JavaScript vente til neste gang). I kurset vil dere også få en innføring i python-rammeverket Django. Dette vil bli brukt for å koble sammen *front-end* og *back-end* av nettsiden. Det vil si at Django skal være broen mellom det brukeren av siden ser og alt som skjer på serversiden, som å hente verdier ut av database, eller plassere inn i database. ## def \_\_init__(self): **Denne delen skal helst være fullført før kurset.** (Men dersom du sitter helt fast er det ikke stress, vi passer på at alle er à jour uansett) I initieringen skal dere installere Python og Django, som kommer til å bli brukt i kurset. ### Sette opp python #### Windows 1. Sjekk om du allerede har installert python 1. Åpne søk og skriv "cmd" og trykk enter. Nå er du i terminalen. 3. Prøv å skriv inn `py --version`, `py3 --version`, `python --version` eller `python3 --version`. Dersom en av desse kommandoene returnerer: ```bash Python 3.* ``` har du riktig python installert og du kan fortsette til installasjon av Django. Dersom det var `py` som gjorde at du fikk resultatet er det denne kommandoen du bruker resten av kurset, etc. 2. **Dersom du har gjort steg 1. og ikke har python installert:** 1. [Følg denne guiden](https://www.howtogeek.com/197947/how-to-install-python-on-windows/) for installasjon av Python3. Ikke python2! #### Linux / unix (inkluderer mac) 1. Åpne terminal, følg steg 1 for windows. 2. Dersom du ikke har installert python ### Sette opp pip (Python packet manager) 1. Last ned get_pip.py [her](https://bootstrap.pypa.io/get-pip.py). 2. Åpne terminalen. På windows kan det være nødvendig å gjøre dette som administrator (Trykk på windowsknappen, skriv cmd og velg "kjør som administrator") 3. Naviger til mappen hvor ```get_pip.py``` ligger og kjør ```python get-pip.py```. ### Sette opp Django 1. Åpne terminalen og skriv inn ```pip3 install django``` 2. Etter fullført installasjon, prøv ut kommandoen ```django-admin```. Om denne fungerer kan du bruke den resten av kurset, hvis ikke må du bruke ```python -m django```. 3. Verifiser at du har riktig versjon med ```django-admin --version``` og sjekk at versjonen din er minst ```3.1.*``` ### Vanlige feil - Pass på at du bruker riktig python kommando. Dette kan variere fra datamaskin til datamaskin. Vanligvis er den ```python```, ```python3```, ```py``` eller ```py3```. Dette kurset vil bare fungere med Python 3 og sannsynligvis bare med python 3.8 eller nyere. - Pass på at du bruker riktig pip kommando, ofte er det lettest å bare bruke ```py3 -m pip``` istedenfor ```pip```for å være sikker på at det er rett (bytt ut py3 med din riktige python kommando)for å være sikker på at det er riktig. ## Dag 1 ### Øving 1: "Heihei, internett" 1. Åpne en tekst-editor. Alt fra Notepad til VS code eller Atom er mulig her, men for din egen del er det lurt å bruke noe med code-completion og syntax-highlighting. For windows anbefaler vi Notepad++ eller VSCode. Er du usikker, åpne Notepad på windows og texteditor på mac. Ikke bruk Word pls. 3. Lagre filen i en egen mappe, for eksempel med navn "Aksel-er-kul" (Eller "web-kurs"). Og kall den webkurs.html. Den trenger ikke hete index, men dette er et vanlig navn for sånne "hjemmesider" siden dette er filnavnet nettlesere leter etter først når du går inn på en nettside. Den MÅ derimot ha filetternavnet .html. 4. Lag en ```<head>```-tag og en ```<body>```-tag, begge desse skal wrappest i en ```<html>```-tag. 5. Fyll ```<body>```-tagen til siden med: - En overskrift - En mindre overskrift (underoverskrift) - En liten paragraf - En link - En liste (med eller uten tall) 5. **Bonus: dersom du blir ferdig tidlig kan du prøve å legge inn et fint bilde på siden din.** [Sjekk denne siden for hjelp](https://www.w3schools.com/html/html_images.asp) Forhåpentligvis ser du nå på en veldig stygg og veldig enkel nettside. Dette skal vi fikse litt på. ### Øving 2: Implementer en navigasjonsbar For å virkelig hamre inn det du har lært nå skal du implementere en navigasjonsbar på siden din. ### Øving 3: Pimp my code 1. Lag en ny fil og kall den styles.css, legg den i samme mappe som html-filen ligger. 3. Lag en link mellom styles.css og webkurs.html. 4. Gjør tekten i h1-tagen din større. 6. Putt en klasse-atributt på paragrafen og listen og endre fargen på klassen. 7. Freestyle: prøv å lag noe fint (eller i det minste fargerikt). Legg gjerne til flere html-elementer for å eksperimentere med id-selectors og class-selectors. I tillegg til det basic css-formateringene som står i appendixen kan du, visst du vil, ta en kikk [her](https://www.w3schools.com/css/) for enda flere ting du kan gjøre for å lage en episk side. 8. Prøv å endre størrelsen på vinduet. Spesielt interessant kan det være å gjøre siden veldig smal (som på en mobiltelefon). Dere vil se at basic css ikke er responsiv. Det betyr at den ikke tar hensyn til vindu-størrelse. ### Øving 4: Bootstrap navigasjonsbar Nå skal du ta den egentlig fortsatt litt stygge siden din og gjøre den litt fin. 1. Inkluder bootstrap stylesheeten ved å skrive dette øverst i koden din: ```html  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> ``` 2. I nav-tagen din legger du til atributten: ```class="navbar navbar-dark bg-dark"``` 3. I ul-tagen legger du til ```class="navbar-nav mr-auto"``` 4. I li-lagen legger du til ```class="nav-item"``` 5. I a-tagen legger du til ```class="nav-link"``` 6. Prøv å endre størrelsen på vinduet! Spesielt interessant er å gjøre den veldig smal som på en mobiltelefon. 7. **Bonus:** Dersom du har tid til overs anbefaler vi å ta en kikk på [denne siden](https://getbootstrap.com/docs/4.5/components/navbar/) for å pimpe navigasjonsbaren din med blandt annet dropdown-menyer og knapper. [Her kan du også ta en kikk på alle de ulike klassene bootstrap har å by på](https://getbootstrap.com/docs/4.5/components/alerts/), for å prøve å fikse resten av siden din. ### Øving 5: Start en HTTP-server 1. Åpne terminalen i samme mappe som html- og css-filene dine 2. Skriv: ```bash python -m http.server ``` Du har nå en server som kjører på din maskin. Denne er lokal og dermed 3. I din nettleser: åpne http:localhost:8000 eller http:127.0.0.1:8000 - Hva ser du? 4. Endre filnavnet til `webkurs.html` til `ìndex.html` og last inn siden på nytt. ### Øving 6: Bonusoppgaver #### 6.1 Lag en side til nettsiden din Lag en ny html-fil og fyll den med hva du vil. Lagre den i samme mappe som index.html-filen og prøv å linke filene sammen, for eksempel ved hjelp av navbaren. Senere skal vi se på hvordan vi kan bruke django til å enkelt legge navbaren og `<head>` i en egen fil, slik at vi kan inkludere denne i alle de ulike sidene på nettsiden vår. Da slipper vi å kopiere inn navbaren til alle filene. #### ## Dag 2 ### Øving 1: Sett opp Django Dersom du ikke har installert python må dette gjørest først. #### 1.1: Lag et djangoprosjekt 1. Inne i webkurs-mappen fra i går lager du en en fin mappe med navn "djangoprosjekt". 2. Åpne terminalen i denne mappen ved å: - **På windows:** I mappen trykk CTRL+L, skriv cmd og trykk ENTER. - **På mac:** kopier mappen du nettopp har laget. Åpne en terminal og skriv inn ``` cd filnavn```, der du bytter ut `filnavn` med stien til mappen din. Dette kan gjøres ved å høyreklikke og trykke lim inn. 3. Lag et django-prosjekt ved å skrive: ```bash $ django-admin startproject webkurs ``` *Som nevnt tidligere kan det hende django-admin ikke ligger i PATH, da må du skrive `$ python -m django startproject webkurs`i stede.* 7. Test at oppsettet fungerer ```bash $ cd webkurs $ python manage.py runserver ``` 8. Åpne nettleser og skriv 127.0.0.1:8000 i søkefeltet - For å stoppe serveren trykker du ```ctrl + c``` i terminalen. Gratulerer, du har en kjørende django-server. 9. Åpne terminalen i samme mappe som manage.py-fila. Skriv: ```bash $ python manage.py startapp elsysapp ``` Gratulerer, du har nå laget din første app i django. Se appendix: [forskjellen på en app og et prosjekt](#forskjell) for å skjønne denne forskjellen. ### Øving 2: Lag en view og legg til i urls. 1. Åpne `webkurs/elsysapp/views.py` og skriv følgende: ```python= from django.shortcuts import render def index(request): print("Dette blir printa i terminalen") context = {} # Tom dictionary som blir brukt senere! return render(request, "elsysapp/index.html", context) ``` Dersom du er usikker på hva de ulike linjene betyr i denne koden: ta en kikk i appendix, eller spør studass! 2. Nå skal du legge til denne views-funksjonen i urls.py, slik at django vet hva den skal gjøre når den får en request til denne siden. *Lag en fil i `webkurs/elsysapp/` som heter urls.py og endre den til å se sånn ut:* ```python= from django.contrib import admin from django.urls import path from .views import index #Relativ import av viewsfunksjonen appname = "elsysapp" urlpatterns = [ path('', index, name='index'), ] ``` 3. Nå skal du få root-urls configfilen til å peke på den inne i appen ditt: *Åpne `webkurs/webkurs/urls.py` og endre til dette:* ```python= from django.contrib import admin from django.urls import include, path urlpatterns = [ path('elsysapp/', include('elsysapp.urls')), path('admin/', admin.site.urls), ] ``` **NB! Nå skal du ha laget to ulike urls.py filer i to ulike mapper!** ### Øving 3: Lag en template og vis siden din! Nå skal vi få django til å vise den siden du lagde i går! ps. du må gjøre hele øvingn før du klarer å vise siden. 1. Inne i mappen ```webkurs/elsysapp/ ```lager du en mappe som heter ```templates``` og så lager du en ny mappe inne i ```webkurs/elsysapp/templates/``` som heter ```elsysapp/```. Det er først og fremst i denne templates-mappen django leter etter html-filer. 2. Inne i mappen ```webkurs/elsysapp/templates/elsysapp/``` kopierer du inn html filen du laget i går. 3. Inne i mappen ```webkurs/elsysapp/``` lager du en mappe som heter ```static```, her kopierer du inn css-filen fra i går. 4. Åpne index.html, som du nettopp la i templates-mappen. 3. Øverst i ```<head>``` skriver du ```{% load static %}```. Dette laster inn "symbolet" static. 4. Django leter etter statiske filer(type .css, .js, .jpg) i mappen ```webkurs/elsysapp/static```, **bytt defor ut** css importen du gjorde i går (``` <link rel="stylesheet" href="styles.css"> ```) med dette: ```python <link rel="stylesheet" href="{% static 'styles.css' %}"> ``` Som du ser har du byttet ut href fra en relativ filimport til en django-funksjon som gjør det samme. 5. Nå skal vi bare endre litt instillinger før vi er i mål. *Åpne webkurs/settings.py.* 1. Endre variabel ```TIME_ZONE``` til ```'Europe/Oslo'``` 2. *Øverst* i lista ```INSTALLED_APPS``` skriver du ```'elsysapp.apps.ElsysappConfig'```(husk at det er en liste og du trenger komma etter strengen). 3. Nederst i fila legger du til ```STATIC_URL = '/static/' ``` 5. Gå til 127.0.0.1:8000/elsysapp. Da skal du se siden din. - **NB!** Pass på at django-serveren kjører! Husk tilbake til forrige oppgave for hvordan du starter serveren. ### Øving 4: Lag et databaseobjekt Nå skal vi lage en databasetabell for å representere en sensorhendelse. 1. Åpne filen elsysapp/models.py 2. Lag en model(klasse) som heter SensorData og som inneholder - Ett felt med navn "data" som skal være en streng med maks lengde 128. - Ett felt med navn "sensor-id", dette skal være et heltall. - Ett felt med navn "timestamp", dette skal være et datofelt som automatisk lagrer når sensoren ble lagt til i databasen. for når databaseobjektet ble laget. - En funksjon som skriver ut klassen på en fin måte. 3. Kjør kommandoene: ```bash $ python manage.py makemigrations ``` og ``` $ python manage.py migrate ``` Dette er for å fortelle django at den skal ta endringene dine inn i en database (og evt. opprette en ny database). 3. Åpne djang-python-shell ved å skrive: ```bash $ python manage.py shell ``` 5. Opprett minst tre insanser av denne klassen, med ulike verdier, som beskrevet i appendiks. Du kan sjekke om du har gjort der riktig ved å skrive ```python >>> from elsysapp.models import SensorData >>> s = SensorData.objects.all() >>> print(s) ``` Da skal du få opp alle elementene du har laget. Dersom du har lyst kan du installere [sqlitebrowser](https://sqlitebrowser.org/dl/). Her kan du se på både de databasetabellene som django har laget og SensorData-tabellen. ### Øving 5: Vis dataen din på siden Nå når du har laget elementer i din database, skal vi vise de på nettsiden din. 1. Først må du legge til elementene i context-dictionaren i index-funksjonen din. Åpne views.py og endre den til å se sånn ut: ```python def index(request): print("Dette blir printa i terminalen") context = {} all_sensor_data = SensorData.objects.all() #Henter ut all sensordata fra databasen. context['all_sensor_data'] = all_sensor_data #Legger sensordata til som en variabel som kan brukes i Template. return render(request, "elsysapp/index.html", context) ``` 2. I ```<body>``` på ```index.html``` filen lager du en django for-løkke som skriver ut instansene du har laget. Da kan du velge å gjøre dette inne i en liste (som i eksempelet i appendiks), eller på en annen måte som presenterer dataen fint. ### Øving 6: Bonusoppgaver #### 6.1 Gjør navigasjonsbaren global Prøv å lage en egen fil til bare headeren på siden(denne heter ofte base.html) og inkluder denne i de andre html-filene. [Denne ressursen er nyttig her](https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#extends) ## Dag 3 ### Øving 1: requests 1. Last ned [denne](https://gofile.io/d/dYSV1e) filen. Den kan lagres hvor som helst på datamaskinen din. Dette er en pythonfil som simulerer en sensor. Du trenger ikke å forstå det som skjer inne i denne, men ta gjerne en kikk dersom du ønsker litt mer forståelse. Den er ikke veldig komplisert. Det viktigste å ta med seg er at den sender en dictionary med requesten som inneholder det du skriver som input når du kjører filen. 3. Nå skal du lage en ny funksjon i views.py som sensoren kan sende daten til. Lag denne funksjonen ```python from django.middleware import csrf from django.http import QueryDict def get_sensor_data(request): if request.method == "POST": data = QueryDict(request.body) # Gjør data fra request om til en dictionary sensor_id = data['sensorID'] # Lagrer sensorIDen til requesten sensor_value = data['sensorData'] # Lagrer sensorverdien til requesten #Skriv koden for å lage og lagre et sensorobjekt her. elif request.method == "GET": """Dette MÅ være med! Sikkerhetsgreier.""" csrf.get_token(request) return HttpResponse("") ``` 3. *Skriv koden for å lage og lagre objektet som er hentet ut fra requesten.* **NB!** Husk å legge denne "request-handler"en til i urls-filen til appen din. Urlen må være '127.0.0.1:8000/elsysapp/sensor/'. Hvorfor spør du? Sjekk om du finner ut av det ved å se i sensor-filen (hvis du ønsker da). 4. Kjør filen som du lastet ned og lag om lag 10 ulike inputs for 3 ulike sensorer. ### Øving 2: Lag fine grafer Du skal nå bruke dataen som du har fått fra sensoren din til å lage noen fine grafer på siden din. Verktøyet vi har valgt å bruke her er Charts.js. Det er to hovedpunkter som må gjennomføres før du kan vise fram en graf: Hent ut data fra databasen i et format som charts.js forstår, og å faktisk implementere grafen i HTML og javascript. #### Øving 2.1: Hent data fra databasen v.h.a JSON 1. Lag en ny funksjon i views og kall den noe passende (f.eks ```graph```). 2. Vi trenger to lister, en med ```labels``` og en annen med ```data```. Start med å lage disse som tomme lister. 3. Hent ut alle de relevante databaseobjektene og tell antallet med hver ID. 4. Fyll labels med IDer og data med tellingen fra forrige punkt. 5. Returner ```data``` og ```labels``` som JSON. ```python= from django.http import JsonResponse def chart(request): labels = [] # Holder navnene på stolpene i stolediagrammet. data = [] # Holder høyden til stolpene i diagrammet. objects = SensorData.objects.all() # Queryset som holder alle databaseobjektene. ids = set() # Et set er en liste som ikke kan inneholde duplikater. [ids.add(id[0]) for id in objects.values_list("sensor_id")] # List comprehension. Hent ut alle sensor_id fra databasen og legg dem til i ids. ids = list(ids) # Gjør tilbake til liste for enkelhets skyld. counts = [0] * len(ids) # Liste som skal holde antall objekter pr. sensor_id for i, id in enumerate(ids): counts[i] = counts[i] + objects.filter(sensor_id=id).count() labels = ["Sensor {}".format(id) for id in ids] # Lagre alle sensor_id med 'Sensor ' foran. data = counts return JsonResponse(data={ 'labels': labels, 'data': data, }) ``` 6. Legg til denne funksjonen i ```urls.py```. #### Øving 2.2: Vis frem grafen 1. Lag en ny template (.html-fil i ```templates```). Her skal du inkludere koden til charts.js. For å lage en graf trenger et ```canvas```-element med en kjent id. Det kan også være lurt å putte denne i en ```section``` for organisering. Du trenger også jQuery og charts.js. Her er et eksempel på hvordan denne filen kan se ut: ```htmlembedded= {% load static %} <section id="chart-container"> <canvas id="sensor-chart" data-url="{% url 'chart' %}"></canvas> </section> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script> <script src="{% static 'plotter.js' %}"></script> ``` 3. Inkluder denne html-filen ```ìndex.html```-templaten din (husk ```{% load static %}```). 4. Nå trengs det en javascript fil for å be om JSON-data og generere en graf. Siden vi ikke dekker javascript i dette kurset har vi laget den for dere (Men ta gjerne en kikk om du er interessert). Last ned [denne filen](https://gofile.io/d/tHBybj). Dette er en *static* .js-fil som legger til AJAX-funksjonen for å hente data fra databasen og generere en ny graf. Ettersom dette er en static-fil legger du den i static-mappen. 5. Inkluder den nye skriptfilen i html-templaten din (på tilsvarende måte som med stylesheet: se appendiks). ### Øving 3: Tilbakemelding! https://forms.gle/Y96ELgqAivMKtuYf8 Takk! :) ### Øving 4: Bonusoppgaver 1. **Bonusoppgave** Dersom du ønsker kan du laste ned [sqlite browser](https://sqlitebrowser.org/dl/). Da kan du åpne db.sqlite3 filen som ligger i root-mappen av prosjektet ditt og se på databasen. 2. **Bonusoppgave** Lek med datasettet som du bruker på siden, prøv å les [her](https://docs.djangoproject.com/en/3.1/ref/models/querysets/) og se om du kan hente ut elementene i sortert rekkefølge, eller fra bare en spesifikk sensor. 7. **Bonusoppgave** Lek med chart.js og modellen din. Lag flere måter å representere dataen din på. Se chart.js eksempler under ressurser i appendiks. 8. **Bonusoppgave** Se appendiks om django `extend` og `block` og prøv å lage en ```base.html```-fil der du putter alt som står i headeren din, og inkluderer denne filen i de ulike tmeplate-filene dine. ## Etter kurset Tusen takk for oppmøte på vårt webkurs! Håper dere har lært noe og hatt det kjekt underveis. ### Eksempelkode Vi har laget et eksempel på en fungerende Django-nettside med alt vi har gått gjennom i løpet av kurset. Denne kan lastes ned [her](). ### Trenger du mer hjelp? Vi er tilgjengelige for å svare på spørmål på vår slack. Denne finner du på [slack.omegav.no](https://www.slack.omegav.no). Still spørsmål i kanalen \#webkurs. ### Tilbakemelding Vi setter stor pris på om du kan ta deg tid til å svare på [denne](https://forms.gle/Y96ELgqAivMKtuYf8) lille undersøkelsen og gi ærlig tilbakemelding på hvordan du synes kurset har gått for deg. # Appendiks ## HTML HTML (Hypertext Markup Language) er et strukturspåk (dette er ikke et kodespråk som kan kompileres og kjøres), som består av elementer som heter "tags" i en hierarkisk struktur. Mange tags forteller hva elementet gjør, disse kalles *semantiske* tags. Tags har tilhørende atributter, for videre spesifering. Et eksempel er ``` <a> ``` , som forteller at det kommer en Hyperlink. I ``` <a href="omegav.ntnu.no">``` er ```href``` en atributt som forteller at linken er til en URL. Et html dokument er som regel delt inn i ```<head>``` og ```<body>```. *head* brukes for metadata o.l. som ikke skal vises frem på siden. Altså ting som ikke brukeren ikke ser direkte. *body* [Her er full oversikt over ulike html-tags](https://www.w3schools.com/tags/). Her er noen eksempler som er spesielt relevante for kurset: ### Grunnleggende tags ```htmlmixed <html> <head> </head> <body> </body> </html> ``` #### ```<html>``` Hele siden din skal plasseres inne i denne tagen. Dette er for å presisere til nettleseren at det er en html-fil den leser. #### ```<head>``` Mellom her skal informasjon (metadata) om dokumentet. Metadata plasseres oft i egen ```<meta>``` tag i tillegg. [Eksempel på bruk](https://www.w3schools.com/tags/tag_head.asp). Ofte legges headeren i egen fil, slik at den lett kan legges til i alle html-filer som hører til en nettside. Da slipper man å copy-paste navigasjonsbaren til alle sider. #### ```<body>``` Alt innhold til den spesifikke siden (les: filen) skal her. #### `<header>` Typisk ting som navbar #### ```<footer>``` Alt som skal stå nederst på siden. På samme måte som headeren er det her vanlig å ha denne i egen fil og importere til alle dokumenter på nettsiden. ### Formatteringstags #### Headline ```htmlmixed <h1>Header</h1> <h2>Mindre header</h2> <h3>Enda mindre header</h3> ``` #### Link Linker er default til filsystemet ditt, så dersom du skriver ```htmlembedded <a href="mat"> Linktekst </a> ``` Vil det dukke opp en link til file:///home/.../webkurs-v2/webkurs.html/mat, der mat er en fil i samme mappe som index.html. Dersom du ønsker å linke til en annen nettside må du spesifisere dette med å skrive "http://". ```htmlembedded <a href="http://omegav.no"> Linktekst </a> ``` #### Liste ```htmlmixed <ul> <li>Listeelement 1</li> <li>Omega Verksted er en kul plass å være</li> </ul> ``` ### Semantiske tags Noen HTML-tags har navn som sier noe om hvordan de vanligvis blir brukt. Som regel er det ikke noe faktisk annerledes med tagsene, annet enn at de har et spesielt deskriptivt navn. Det er generelt god praksis å bruke semantiske tags der man kan ettersom det gjør det lettere for f.eks. søkemotorer å indeksere innholdet på siden din. #### Article En ```<article>``` (artikkel) er en selvstendig blokk med innhold. Tenk en artikkel i en avis. En enkel artikkel kan f.eks. innneholde et par paragrafer. En mer avansert artikkel kan f.eks. inneholde flere seksjoner, noen bilder og en liste eller to. ```htmlmixed <article> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in tortor et justo luctus facilisis. Sed justo quam, ultricies sit amet ipsum ornare, egestas tristique sapien. Suspendisse potenti. Sed condimentum lorem magna, eget pulvinar tellus ultrices non. Proin ut tempor lacus. Sed vel libero id justo facilisis maximus. </p> <p> Suspendisse fringilla dolor vitae magna iaculis, a ullamcorper odio bibendum. Vestibulum eu efficitur metus, ut maximus libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sem nulla, finibus vitae eleifend at, iaculis ut neque. Etiam sed quam maximus, suscipit leo sed, maximus massa. Nulla a ligula vitae orci porta mattis. </p> </article> ``` #### Aside ```<aside>``` (tilside) er en blokk med innhold som ligger *ved siden av* hovedinnholdet. Som med de andre semantiske tagsene gjør taggen egentlig ikke noe spesielt, så innholdet vil ikke automatisk ende opp ved siden av noe som helst. Dette må evt. ordnes med CSS og/eller JS. ```htmlmixed= <aside> ``` #### Nav En ```<nav>``` (nav-bar) er en navigasjonsbar. Altså en liste med linker for å bevege seg rundt i et webområde. Denne plasseres inne i ```<header>``` tags. ```htmlmixed= <nav> <ul> <li><a>Link1</a></li> <li><a>Link2</a></li> <li><a>Link3</a></li> <li><a>Link4</a></li> </ul> </nav> ``` ### Andre #### Kommentar. Vises aldri på siden. ```htmlmixed  ``` #### Linjeskift. ```htmlmixed <br> ``` #### Link Kobling til annen fil. F.eks. for å binde stylesheets (css) til siden din. ```htmlmixed <link rel="stylesheet" href="style.css"> ``` #### Skript Taggen kan enten inneholde et skript eller være en kobling til en skriptfil. ```htmlmixed <script> let abc = "123"; // Jackson 5 console.log(variable); </script> <script type="text/javascript" src="script.js"></script> ``` ### Eksempel på inndeling ```htmlmixed <!DOCTYPE html>  <html> <head>  <link> <title> </title>  </head> <body>  <header>  <nav>  </nav> </header> <article>  </article> <footer>  </footer> <script>  </script> </body> </html> ``` ## CSS En css fil er et sett med regler som består av såkalla "Selectors" eller "velgere/pekere". En selector har som mål å peke seg ut et element i en HTML-fil og formattere den. ### Struktur Regelene i CSS-filen er alle "blokker" som har samme format: hva den peker på og hva den skal gjøre. For eksempel vil regelen: ```css p { color : red } ``` farge alle delene av html-koden som har tag ```<p>```) rød. Det som står før klammeparantesene er altså hva du peker til i HTML-filen, og det inne i klammeparantesene er hva du gjør med det. ### Class-selector En klasse er en HTML-attributten ```class="eksempelnavn"```. Klassen kan du kalle hva du vil, og du peker på den i css-fila ved å skrive ```css .eksempelnavn{ } ``` Denne regelen vil altså peke på alle elementer i html-koden som har atributten ```class="eksempelnavn"```. ### ID-selector For å velge individuelle element i html-koden, kan du gi et html-element atributten ```id=""```. Du bruker "#" for å peke på et element med ID: ```css #eksempelnavn{ } ``` Denne regelen vil altså peke på det elementet i html-koden som har atributten ```id="eksempelnavn"```. ### Properties Properties er det som står inne i en blokk. Det er det som forteller hva som skjer med det du skal endre på. Det er veldig mange properties, og vi anbefaler å ta en kikk [på denne siden](https://www.w3schools.com/css/default.asp) for en oversikt over de ulike. Her kommer et par eksempler på egenskaper som er nyttige for dette kurset: **Farge** ```css color : colorname /* Kan også være ##RRGGBB hex */ background-color : colorname /* Kan også være ##RRGGBB hex */ ``` **Tekststrørrelse** ```css font-size : "size" px ``` ### Linke en css-fil til et html-fil: For at html-filen skal vite at den skal formatteres av css-filen, må du, i html-filen skrive: ```htmlmixed <link rel="stylesheet" href="styles.css"> ``` Her er ```rel=""``` ein relasjonsatributt, som forteller at du, i dette tilfelle, skal linke dette html-dokumentet til et "stylesheet", altså et css dokument. ```href=""``` forteller her navnet på dokuentet som linkes sammen. ## Bootstrap Boostrap er et CSS-rammeverk for responsivt design. Rammeverket inneholder en hel haug med forhåndsdefinerte klasser som gjør det mye enklere å lage fine nettsider som fungerer både på PC og mobil. ### Inkludér Bootstrap i html-filen din Bootstrap kan inkluderes v.h.a. CDN (Content Delivery Network), altså trenger du ikke å laste ned noe. Bootstrap trenger JQuery og Popper for å fungere best mulig, heldigvis kan også disse inkluderes via CDN. Foreløpig trenger du ikke å tenke så mye over hvordan JQuery, Popper osv. fungerer, vi skal heller fokusere på å bruke Bootstrap. For å inkludere Bootstrap i prosjektet ditt kan du bare kopiere HTML-koden under i bunnen av <body>-tagen i html-filen din (Over eventuelle egne skripts du har laget/linket til selv). ```HTML  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> ``` ## Databaser ### Generelt En database er egentlig bare en samling av tabeller. Som en hvilken som helst tabell er databasetabeller bygget opp av rader og kolonner. Hver rad i databasen er en ny instans av hva enn det er du lagrer og hver kolonne er de forskjellige attributtene til hver instans. Under er et eksempel på en enkel tabell i en database. | id | Navn | fødselsdato | innmeldingsdato | | --- | ------------- | ----------- |:---------------:| | 1 | Aksel Sundal | 01.04.1920 | 21.05.2019 | | 2 | Chris Vaksdal | 01.04.1921 | 24.05.2019 | | 3 | Jan Database | 03.09.1990 | 01.01.2020 | Det finnes også mer avanserte databaser hvor tabellene refererer til hverandre og endringer i én tabell propagerer til relaterte tabeller. f.eks. kan en bedrift ha en stor tabell over alle kundene sine med id, navn og saldo, og så kan hver kunde ha sin egen tabell over transaksjoner med tidspunkt og sum ### Forskjellige typer databaser (SQL, SQLite, Postgres etc.) Databaser har som regel samme mål: å lagre data. Veien til målet derimot varierer mye. De mest populære databasetypene du ser i dag er basert på SQL (Structured Query Language), som er en måte å spørre databasen om data på. ## Django Django er et pythonbasert rammeverk for nettsideutvikling. Dette vil egentlig bare si at det er et python-bibliotek med mange nyttige funksjoner(metoder) for den som skal lage nettside. Strukturen til Django er enkel, her er ett eksempel på en standard enkel filstruktur for en app: ``` - myapp/ - views.py - models.py - templates/ - myapp/ index.html - admin.py -urls.py ``` ### views.py Alle apper i django har en fil som heter views.py. Denne filen består i hovedsak av funskjoner som tar i mot en forespørsel (request) fra bruker, behandler den og sender brukeren til en html-fil(en template). En vanlig views-funksjon returnerer requesten, html-filen som brukeren skal se samt en dictionary som ofte heter ```context```. Denne inneholder variabler som kan bli brukt av deg når du skriver html-koden for å lage dynamiske sider. Her kommer et veldig enkelt eksempel på en viewfunksjon: ```python= from django.shortcuts import render def index(request): context = {} eksempevariabel = 1001000100100100 context['eksempelvariabel'] = eksempelvariabel return render(request, 'elsysapp/index.html', context) ``` Denne funksjonen tar inn en ```request```. Den lager en liste og fyller context-dictionarien med denne. Da kan men for eksempel iterere gjennom denne lista *inne i html-filen(!)* Funksjonen ```render``` returnerer et http-response ut i fra gitt html-fil og context. I dette tilfellet blir brukeren vist filen "index.html". ### urls.py Django er designet slik at alle requests som gjøres av en bruker (som for eksempel å trykke på en link), blir behandlet av urls.py. Den inneholder en liste som heter ```urlspatterns```. Elementer i denne listen inneholder i hovedsak en relativ url og et funksjonsnavn fra views.py. Når django mottar en request vil den sjekke denne listen og se om urlen som er kyttet opp mot requesten finnest i listen, for så å sende den videre til tilhørende funksjon i views.py.Et eksempel for implementasjon av funksjonen fra views.py vi lagde i sted: ```python= from django.urls import path from .views import index urlpatterns = [ path("elsysapp/", index ), ] ``` Her har brukeren trykket på en link til "www.elsysprosjekt.no/elsysapp", som sender brukeren til index-funksjonen i views.py som da åpner index.html. ### models.py En fin funksjon i django er at den lager databasetabeller for deg. I models.py lager du strukturer, kalt "models", som definerer en databasetabell. Inne i denne har du felt som egentlig bare er variabler som representerer en *kollonne* i databasen din. Her definerer du hvilken type data kollonnen din skal inneholde, som om den skal ha heltall, desimaltall, tekst eller dato(eller mange mange fler). En model er representer som en klasse. Klasser, eller objekt, er noe du kommer til å lære om i C++ til våren. For nå holder det å vite at en klasse er noe i programmering som kan inneholde både funksjoner og variabler, og som du kan lage instanser av. Her er eksempel på et objekt som representerer en person: ```python= from django.db import models # Importerer models class Person(models.Model): #definerer klassen name = models.CharField(max_length=20) #Lager et tekstfelt date_of_birth = models.DateField() # Lager et datofelt height = models.DecimalField(max_digits=4, decimal_places=1) # Lager et desimalfelt timestamp = models.DateField(auto_now_add=True) # Lager et datofelt nr_children = models.IntegerField() # Lager et heltallsfelt def find_age(self): #Funksjon som finner alder til personen return age def has_children(self): #Funksjon som returnerer true dersom personen har barn return bool(self.nr_children) def __str__(self): #Funksjon som skriver ut et person-objekt. return "Name: {}, Birthday: {}, height: {} cm, has {} children.".format(self.name, self.date_of_birth, self.height, self.nr_children) ``` Her har vi laget en klasse ved navn "Person" som tar inn djangometoden models.models. Dette forteller django at dette er en model. Deretter definerer vi det som blir de ulike kollonenne i databasetabellen vår. Vi definerer et navn til personen og gir det en maks lengde på 20 tegn. En fødselsdato som er et datofelt, en høyde som desimalfelt og et tidsstempel når personen ble lagt inn i databasen. I tillegg har vi en hjelpefunksjon som skal gjøre det raskt og enkelt å finne alderen til personen. Til slutt har vi en funksjonen ```__str__``` som skriver ut klassen på en fin måte. Når man har laget en modelen skriver man først dette i terminalen: ```bash python manage.py makemigrations ``` og så dette: ```bash python manage.py migrate ``` Med denne implementert er det mulig å lage et person-objekt, d.v.s. en rad i databasetabellen som heter "person". For å gjøre dette må du åpne et spesielt python shell ved ved å skrive følgende i terminalen. ```bash $ python manage.py shell ``` Dermed kan du lage objekt (også kalt instanser) slik: ```python >>> from elsysapp.models import Person >>> p1 = Person(name="Ole Brumm", date_of_birth="1926-04-04", height=130.5, nr_children=0) >>> p1.save() ``` Her er eksempel på hva du kan gjøre med den nyoppretta personen: ```python >>> p1.find_age() 94 >>> print(p1) Name: Ole Brumm, Birthday: 1926-04-20, height: 130 cm, has 0 children. >>> p1.has_children false >>> p1.nr_children = 2 >>> print(p1) Name: Ole Brumm, Birthday: 1926-04-20, height: 130 cm, has 2 children. >>> pi.timestamp datetime.date(2020, 10, 6) %Dato oppretta >>> pi.id 1 ``` ```timestamp``` blir automatisk lagret som dato og tid når den ble opprettet. **I tillegg får alle felt i en database tildelt en unik ID automatisk.** I django brukes SQLite som standard, men man kan selvsagt endre dette til noe mer avansert. SQLite fungerer likevel helt utmerket til små prosjekter. Databasetabellene blir lagra i db.sqlite3 i root. ### Django templates Templates er django sin måte å lage dynamiske html-filer. Det vil si nettsider som kan vise data som kan endre på seg. I templates kan du bruke django sine egne funkjsoner. Full oversikt er linket til i ressurser. For å skrive ut data på nettsiden din må du sende det inn i "context"-dictionarien fra view.py. Når vi har laget instanser av personobjektet, som vi laget over, kan vi endre views.py filen til å se sånn ut: ```django from django.shortcuts import render from .models import Person def index(request): person_objects = Person.objects.all() context = {} context['person_objects'] = person_objects return render(request, 'elsysapp/index.html', context) ``` Når vi har lagt til desse i context, kan du vise det i html-filen din. Dersom du for eksempel ønsker å skrive ut navet på alle personene i databasen din, skriver du: #### For-løkke: django-style ```html ... <head> <ul> {% for person in person_objects %} <li> {{person.name}} </li> {% endfor %} </ul> </head> ... ``` Dersom du ønsker å si ifra dersom personen har barn kan du legge til: #### If-setning: django-style ```htmlmixed ... <head> <ul> {% for person in person %} <li> {{person.name}}, {% if person.has_children %} har ikke barn. {% else %} har {{p}} barn. {% endif %} </li> {% endfor %} </ul> </head> ... ``` Som du ser putter vi django-funksjonen inn i django med bruk av ```{% %}``` og vi putter variblane som du har sendt inn via context ved ```{{ }}```. #### Django ```extend``` og `block`: Ofte ønsker du å lett kunne inkludere kode fra en fil i en annen. For eksempel er det vanlig å lage en ```base.html``` fil som inneholder elementer som skal med på mange sider, f.eks. navigasjonbar, eller bootstrap-includes. Slik gjør du dette: I ```base.html``` skriver du det du ønsker å legge til i ```<header>```, for så å legge til dette: ```htmlmixed <body> {% block content %} {% endblock %} </body> ``` Dermed kan du i alle andre html-filer, der du ønsker samme header legge til: ```htmlmixed {% extends 'base.html' %} {% block content %}  {% endblock %}  ``` Deretter kan du gjøre det samme for en side-footer og vipps så har du en proff side! #### Django ```include```: Det kan være nyttig å hente inn elementer fra andre templates i nettsiden din. For å gjøre dette kan vi bruke ```include```. La oss for eksempel si at vi har en fil ```aksel.html``` hvor vi har lyst til å inkludere en graf fra ```graf.html```. I ```aksel.html``` skriver du da: ```html= {% block graph %} {% include "graf.html" %} {% endblock %} ``` Django vil da lime inn hele graf.html i blocken med navn 'graph' ### <a name="forskjell"></a> Forskjellen på en app og et prosjekt Django oppfordrer til en modulbasert nettsideutvikling. Du kan tenke på et djangoprosjekt som en... man lager et prosjekt og så fyller man det med apper, som i så stor grad som mulig opererer uavhengig fra hverandre. I enkle prosjekt (som det dere skal lage) holder det med en App. Men i større prosjekter kan man ha mange apper. Det å dele prosjekt opp i apper gjør det lett for utviklere å dele apper med hverandre, slik at man slipper å skrive samme kode flere ganger. ## Django mappestruktur eksempel: ```bash -djangoprosjekt/ -elsysprosjekt/ manage.py db.sqlite3 -elsysapp/ -migrations/ -templates/ #NB! Denne lager du. -elsysapp/ index.html __init__.py admin.py models.py views.py urls.py #NB! Denne lager du selv. -static/ #NB! Denne lager du selv! styles.css -elsysprosjekt/ -__pycache__/ __init__.py asgi.py settings.py urls.py wsgi.py ``` ## Requests 101 https://www.codecademy.com/articles/http-requests ### Requests i Django https://docs.djangoproject.com/en/3.1/ref/request-response/ <h1> Innovasjon: Webserver for elsys Django sider </h1> <p> Etter kurset skal dere ha en ca. storartet Django side. Neste steg er da å få den på nett, noe som dere finner instruksjoner for her:</p> <h2> Steg 1: Bli kjent med Innovasjon </h2> <p> Hver gruppe har en brukerkonto på webserveren. Disse omtales her som <gruppeN>, f.eks. gruppe1, gruppe2, ... gruppe12, ... . Husk å bytte ut hele <gruppeN> med deres gruppenavn kommandoene under!</p> <p>Det viktigste verktøyet til en hver lat systemadministrator er <i>ssh</i>. ssh lar oss logge inn på en maskin langt borte, og kjøre kommandoer på den gjennom internett. Logg inn på deres brukerkonto ved å åpne en terminal, og kjøre kommandoen:</p> <p><i>ssh <gruppeN>@innovasjon.ed.ntnu.no</i></p> <p><b>Passordet er akkurat nå samme passord som gruppenavnet</b>. Det må vi endre. Kjør:</p> <p><i>passwd</i></p> <p>Følg instruksjonene for å bytte passord til noe kun dere i gruppen kjenner til. <b>Ikke glem passordet.</b></p> <h2>Steg 2: Python på flaske</h2> <p> I prosjektet har dere så langt brukt Python installert på deres lokale maskin. Dere kunne solidarisk delt samme Python installasjon på Innovasjon også, men hva om gruppe3 vil ha en annen versjon av en pakke enn deg? Eller om gruppe4 vil ha en pakke som er i konflikt med en dere har lyst å bruke? Det blir rot. Derfor får <b>må</b> dere lage deres helt egen lille python installasjon. Dette gjøres vha. <i>virtualenv</i> kommandoen. Kjør: ```bash $ python3 -m virtualenv -p python3 venv ``` <p>Når kommandoen har kjørt ferdig har dere et helt eget isolert pythonmiljø i mappen <i>venv</i>. Aktiver dette virituelle miljøet ved å kjøre: ```bash $ source venv/bin/activate ``` Visst alt har gått som det skal, burde dere nå se (venv) forems i kommandolinjen deres, slik: ```bash (venv) gruppeX@innovasjon:~$ ``` <p>Nå er et fint tidspunkt til å installere de samme modulene som dere installerte lokalt hos deg selv. Bruk pip til å installere Django, samt andre eventuelle moduler som prosjektet deres bruker (på webkurset brukte vi bare Django):</p> ```bash $ pip install django ``` <p>Det magiske her er at pakken installeres i <i>venv</i> mappen, ikke i Python globalt.</p> <h2>Steg 3: Kopier prosjektet</h2> <p><b>Tilbake på deres egen maskin:</b> Åpne en ny terminal. <i>cd</i> til mappen som inneholder prosjektet fra webkurset, eller et annet prosjekt dere har lyst å laste opp.</p> <p>Linux bruker en kommando som heter <i>scp</i> til å overføre filer. Den fungerer essensielt som <i>ssh</i>. <i>-r</i> flagget gjør at man overfører hele mapper, ikke bare enkeltfiler. Lokasjonen som kommer etter : spesifiserer hvor på serveren filene skal plaseres. Kjør:</p> ```bash= scp -r <deres webkurs mappe>/* <gruppeX>@innovasjon.ed.ntnu.no:/home/<gruppeX> ``` <p> <b>NB!</b> Det er viktig at <deres webkursmappe> erstattes med den mappen <i>som inneholder</i> djangofilene, dvs. den mappen med manage.py filen. </p> <p> <i>scp</i> kommandoen står for "secure copy" og og den kopierer filer fra en mappen til en mappe på en annen datamaskin. </p> <p>Passordet som dere blir bedt om å skrive inn er det samme som passordet dere brukte til å logge inn med ssh kommandoen. Etter dette skal filene deres være på serveren, vi er nesten i mål! (Sjekk gjerne om filene er i mappen ved å skrive <i>ls</i>)</p> <h2>Steg 4: Vi konfigurerer</h2> <p>Vi bruker en <i>webserver</i> som heter Apache. Dere trenger ikke å gjøre stort med den, utenom å peke den til stedet der man finner djangoprosjektet deres. Kommandoen <i>ln</i> brukes i Linux til å lage en fil som peker til en annen, litt som en snarvei. Apache forventer at filene ligger i en mappe som heter 'nettside', så hvorfor ikke gjøre at 'nettside' er en snarvei (også kjent som en symlink) som peker på prosjektet deres? Dere gjør dette <b> i terminalen som er logget inn på gruppeX@innovasjon.ed.ntnu.no</b> ved å kjøre:</p> ```bash $ ln -s <deres prosjektmappe> nettside ``` <p><b>NB!</b> Her er <deres prosjektmappe> den mappen som inneholder <b>settings.py</b>! For de som bruker webkurs-prosjektet vil denne sannsynligvis hete "webkurs"</p> <p>Om dere kjører <i>ls</i> nå skal dere se en ny fil som heter 'nettside', og om dere kjører <i>ls nettside/</i> så ser dere faktisk rett inn i deres prosjektmappe. Det vil si at det er <i> nett det samme</i> om du gjør endringer inne på nettside-mappen eller på webkurs-mappen. Magisk. <p>En siste ting: Django har innebygd beskyttelse for å unngå at deres side kjører på en annen maskin enn den dere vil at den skal kjøre på. Dere må derfor i deres settings.py fil finne linjen 'ALLOWED_HOST', og sette inn '<gruppeN>.innovasjon.ed.ntnu.no', slik: </p> <p> ALLOWED_HOST = [ "gruppeX.innovasjon.ed.ntnu.no" ]</p> <p> <b>NB!</b> Husk hermetegn </p> <h2> Steg 5: Reload Apache </h2> <p> Når alt dette er gjort kan dere reloade Apache. Vi har gjort dette lett for deg ved å lage en magisk kommando, som kun finnes inne på denne serveren (Innovasjon). Kjør:</p> ```bash $ reload ``` <p><b>Tada!</b> Nå skal alt være klart. Gå til <gruppeN>.innovasjon.ed.ntnu.no, der prosjektet deres nå kjører om alt gikk bra. <b> Gratulerer, dere er live!</b></p> ## Spørsmål angående nettsiden? Gjør dette, i denne rekkefølgen: 1. Snakk med studass. 2. Send oss en epost på edb@omegav.no eller send en melding på omegav.slack.com 3. Kom innom ov og spør om hjelp (er ingen garanti at det er folk som kan hjelpe der). ## Viktige merknader Dere ønsker sannsynligvis bare å kopiere over filene når dere er ferdige med prosjektet. For å slippe og slette alle filene på serveren for så å kopiere inn nye, redigerte filer, anbefaler vi å bruke *git*. Dette er ikke et krav, men det er veldig nyttig å kunne (neste) uansett hva dere kommer til å jobbe med i fremtiden. Ressurser for å lære seg git: [Git intro](https://product.hubspot.com/blog/git-and-github-tutorial-for-beginners) [Git cheatsheet](https://omegav.no/files/github-git-cheat-sheet.pdf) [Den offisielle git-boken](https://git-scm.com/book/en/v2) ## Intro til navigasjon i linux-terminal: For å gå **åpne en mappe** skriv ``` cd <mappe> ```, (cd står for change directory) for å gå opp et nivå i mappestrukturen: ```cd ..``` For å **vise** innholdet i en mappe skriv ```ls```, (ls står for list) for å også vise sjulte filer skriv ```ls -a```. For å lage en ny mappe skriv ``` mkdir <mappenavn> ``` (mkdir står for "make directory"). For å slette en fil skriv ```rm <filnavn> ```, (rm står for "remove") eller for å slette en mappe, skriv ```rm -r <mappenavn> ``` ("r" står for "recursive"). Vil anbefale å ta en kikk [her](https://www.linuxtrainingacademy.com/linux-commands-cheat-sheet/#5_8211_FILE_AND_DIRECTORY_COMMANDS) for å få en bedre oversikt over linuxkommandoer. ## Ressurser 1. [W3Schools Learn HTML](https://www.w3schools.com/html/html_intro.asp) Fin side for å lære html. 2. [W3school CSS properties](https://www.w3schools.com/cssref/pr_class_position.asp) Oversikt over ulike CSS properties. 3. https://flukeout.github.io/ Lær deg css-pekere med et spill! 4. [Model field API](https://docs.djangoproject.com/en/3.1/ref/models/fields/#textfield) Her er oversikt over alle API-et som django brukter til å snakke med databasen. 5. https://docs.djangoproject.com/en/3.1/ref/templates/builtins/ 6. [Lær mer om ekstend og includes](https://riptutorial.com/django/example/32472/use-of----extends---------include----and----blocks---) 7. [Chart.js eksempler](https://www.chartjs.org/samples/latest/) 8. [Chart.js django eksempel](https://simpleisbetterthancomplex.com/tutorial/2020/01/19/how-to-use-chart-js-with-django.html) 9. [Tabeller i HTML](https://www.w3schools.com/html/html_tables.asp) 10. [Oversikt over linuxkommandoer](https://www.linuxtrainingacademy.com/linux-commands-cheat-sheet/#5_8211_FILE_AND_DIRECTORY_COMMANDS) 11. [Git intro](https://product.hubspot.com/blog/git-and-github-tutorial-for-beginners) 12. [Git cheatsheet](https://omegav.no/files/github-git-cheat-sheet.pdf) 13. [Den offisielle git-boken](https://git-scm.com/book/en/v2) 14. https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#extends

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.