databaser

Databaser

Vi skal arbejde med databaser og implementere dem i en simpel version på en hjemmeside.

Indhold

Projektbeskrivelse

Eksamenstiden nærmer sig, og en måde at øve sig på er med flashcards eller quizzer. I skal udvikle en prototype på en quiz- eller flashcard-hjemmeside. Når I udvikler jeres projekt, skal I kombinere databaser med hjemmesideprogrammering.

IT-løsningen skal indeholde:

I portfolien skal I redegøre for:

Tre-lags-arkitektur (kilde: iftek)

I en tre-lags-arkitektur inddeles et program i tre lag. Dette er nyttigt i implementeringen af programmer, da de tre lag så vidt muligt holdes adskilte, hvilket gør hele programmet lettere at overskue.

Præsentationslag: Det øverste lag, der håndterer modtagelse og præsentation af data. Dette lag er kendetegnet ved at være tæt på brugeren af programmet, ofte i form af en brugergrænseflade.

Logiklag: Det midterste lag, der håndterer udvekslingen af data mellem præsentationslaget og datalaget. Dette lag står for beregninger og forretningslogik.

Datalag: Det nederste lag, der opbevarer og håndterer data. Dette lag er kendetegnet ved at være tæt på computeren og kan være struktureret som en database.

Vi vil arbejde med, hvordan man organiserer data i databaser.

Introduktion til databaser - Vestfynedu

I skal bruge den glimrende introduktion til databaser, som findes her: LINK.

Øvelse

Normalisering

Normalisering af en database er en teknik, der sikrer, at rettelser i databasen kan foretages med mindst mulig indflydelse på det oprindelige system. Målet er at minimere redundant data, dvs. at samme oplysning ikke gemmes flere steder. Med normalisering bliver det lettere at foretage rettelser i databasen (så skal man kun rette det ét sted). Læs mere her: balslev.

Normaliseringsregler:

Øvelse

E/R diagram

Se denne video om E/R diagrammer: E/R diagrammer.

Øvelse

DB Browser

Vi skal arbejde med et databaseprogram. Det vi bruger er DB Browser for SQLite.

SQL kommandoer

Hvis man arbejder med rigtigt store databaser, er det ikke praktisk at bruge regnearks-repræsentationen til at hente data ud. Det mest udbredte sprog til at arbejde med databaser er SQL (Structured Query Language). Vi bruger SQL-fanen i DB Browser.

SQL

Øvelse

INNER JOIN er en måde at sætte tabeller sammen på.

Øvelse

Pas på med hvad I beder om! DROP TABLE

Øvelse

Øvelse - egen database

I skal lave jeres egen database. I må selv vælge, hvad databasen skal indeholde, men her er et par forslag:

Som altid er det smart at starte simpelt, så:

Databaser og hjemmesider

Vi skal bruge vores viden om databaser til at strukturere indholdet i en hjemmeside. Vi skal bruge JavaScript til at loade data og for at kunne bruge det. JavaScript er godt, hvis man vil lave interaktive hjemmesider.

Her er en hjemmeside, hvor informationen om de forskellige FN verdensmål er gemt som en kommasepareret fil (CSV): https://mpsteenstrup.github.io/databaser/filer/FN_goals_loaddata.html

Øvelse

Introduktion til JavaScript

Eksempel

Første eksempel er en knap, som kan vise tid og dato: https://mpsteenstrup.github.io/databaser/filer/ex1.html.

Koden ser sådan ud:

<!DOCTYPE html>
<html>
<body>

<h2>Ex 1</h2>

<button type="button" onclick="getDate()"> Tid og dato</button>
<p id="demo"></p>

</body>
</html> 

<script>
    function getDate(){
        document.getElementById('demo').innerHTML = Date();
    }
</script>

De første 3 linjer er HTML-setup og så en overskrift “Ex 1”. Det nye er, at vi laver en knap:

<button type="button" onclick="getDate()"> Tid og dato</button>

Typen er sat med type="button", og den kalder funktionen getDate() ved kommandoen onclick="getDate()".

JavaScript-delen er i <script>-tags og kan placeres nederst på siden. Funktionen bliver defineret med function getDate() { } og har kun én linje kode.

document.getElementById('demo').innerHTML = Date(); finder det element på siden med id="demo" og sætter det lig Date(), som er en indbygget funktion i JavaScript til at give tid og dato.

Øvelse

Data og hjemmesiden

Vi skal nu bruge vores nyvundne JS-skills til at loade data. Data skal være gemt som CSV-fil og have overskrift på alle kolonner.

Eksempel 2: Load biler-databasen

Eksemplet kan hentes her: https://mpsteenstrup.github.io/databaser/filer/ex2.zip.

Vi vil loade databasen filer/biler.csv, som indeholder:

bilID,type,mærke
1,Octavia,Skoda
2,Fabia,Skoda
3,Ceed,Kia

Hjemmesiden kan ses her: https://mpsteenstrup.github.io/databaser/filer/ex2.html. Hvis man bruger Google Chrome, kan man se JavaScript-konsollen ved at gå ind under Vis->Udvikler->JavaScript-konsol. Så kan I se, at data ligger i et format kaldet en “dictionary”:

0: {bilID: '1', type: 'Octavia', mærke: 'Skoda'}
1: {bilID: '2', type: 'Fabia', mærke: 'Skoda'}
2: {bilID: '3', type: 'Ceed', mærke: 'Kia'}

For at få fat i informationen om mærket i første linje skal man skrive data[0]["mærke"]. Som før indsætter vi informationen i dokumentet med koden document.getElementById('biler').innerHTML = data[0]["mærke"] + " " + data[0]["type"];

For at kunne holde styr på data bruger vi biblioteket Papa, som kan loades med denne kommando: <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>

Data bliver loadet i denne del af koden, når hjemmesiden loades:

window.onload = function() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "biler.csv", true);
  xhr.responseType = "text";
  xhr.onload = function() {
    data = Papa.parse(xhr.responseText, { header: true }).data;
  };
  xhr.send();
}

Det er ok at tage denne del som lidt af en “black box”, men den sender en HTML-request om at åbne filen “biler.csv” og gemmer det i variablen data.

Øvelse

FN og verdensmålene

Vi vender nu tilbage til hjemmesiden med FNs verdensmål: FN_goals_loaddata.html. Filen kan ses her: FN_goals_loaddata.html koden.

Koden indeholder fire JavaScript-funktioner: ny(), valgte(), genererTekst() og den, som loader data. Ideen er, at koden vælger en overskrift og en beskrivelse, der passer til de forskellige verdensmål.

Øvelse

For at udvælge teksten bruges funktionen genererTekst(x), som tager det tilfældige heltal mellem 0 og 3 som argument. Her er koden:

function genererTekst(x){
  for (var i = 0; i < data.length; i++) {
      if (data[i]["ID"] == x) {
        overskrift = data[i]['overskrift']; 
        beskrivelse = data[i]['beskrivelse'];
        break; // exit efter loop
      }
  }
}

Anden linje for (var i = 0; i < data.length; i++) giver en løkke, hvor i=0 til at starte med, og i vokser med 1 (i++) for hver omgang. Løkken kører, så længe i < data.length, altså så længe i er mindre end antallet af rækker i data.

Betingelsen if (data[i]["ID"] == x) bruger primærnøglen ID og spørger, om den er lig med x. Hvis den er det, så skal overskrift og beskrivelse opdateres, og løkken stoppes.

Øvelse