Markup / HTML

For å begynne den prosessen, kan du først fjerne argumentet i res.send()-metoden, inkludert anførselstegnene. Så kan du legge inn to back-ticks ` der isteden. Legg inn et linjeskift i mellom dem, slik at vi kan skrive HTML der. Siden dette ikke er en guide i HTML, så har jeg lagt med en klump med ferdig HTML som vi kan kopiere inn i prosjektet. Her er hele server.js, inkluder html’en som du kan kopiere inn i ditt eget prosjekt:

let express = require('express')
let app = express()

app.get('/', function(req, res) {
  res.send(`
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple To-Do App</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <h1 class="display-4 text-center py-1">To-Do App</h1>
   
    <div class="jumbotron p-3 shadow-sm">
      <form>
        <div class="d-flex align-items-center">
          <input autofocus autocomplete="off" class="form-control mr-3" type="text" style="flex: 1;">
          <button class="btn btn-primary">Add New Item</button>
        </div>
      </form>
    </div>
   
    <ul class="list-group pb-5">
      <li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
        <span class="item-text">Fake example item #1</span>
        <div>
          <button class="edit-me btn btn-secondary btn-sm mr-1">Edit</button>
          <button class="delete-me btn btn-danger btn-sm">Delete</button>
        </div>
      </li>
      <li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
        <span class="item-text">Fake example item #2</span>
        <div>
          <button class="edit-me btn btn-secondary btn-sm mr-1">Edit</button>
          <button class="delete-me btn btn-danger btn-sm">Delete</button>
        </div>
      </li>
      <li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
        <span class="item-text">Fake example item #3</span>
        <div>
          <button class="edit-me btn btn-secondary btn-sm mr-1">Edit</button>
          <button class="delete-me btn btn-danger btn-sm">Delete</button>
        </div>
      </li>
    </ul>
   
  </div>
 
</body>
</html>

`)
})

app.listen(3000)

Det er viktig å presisere at dette er IKKE måten vi vanligvis gjør ting på. Vi blander vanligvis ikke HTML med server-kode på denne måten – det er rotete, og skiller ikke koden på en hensiktsmessig måte. Vanligvis ville vi hatt HTML’en i egne filer. Men for vår del akkurat nå, for å ha full oversikt, så gjør vi det på denne måten.

La oss stoppe serveren med ctrl+c i terminalen, og starte den opp igjen med

$ node server

Hvis du nå går i nettleseren, og går til localhost:3000, så vil vi se den flotte to-do app’en vår.

Elementene som ligger i lista er statisk HTML – de blir ikke hentet dynamisk fra databasen, for det er jo det vi skal fikse! Derfor heter de Fake example item, bare så vi kan se hvordan det skal se ut til slutt. Ingen av knappene fungerer heller, og det er også noe vi skal fikse.

La oss begynne med å lage en POST-rute for når vi legger til et nytt element i lista. Gå til linja rett over den siste linja i server.js, og legg til:

app.post('/create-item', function(req, res) {
  // bare så vi ikke glemmer å gjøre dette dynamisk senere
  console.log("Make this dynamic in a minute from now")
  // Viser tekst i nettleseren
  res.send("Thanks for submitting the form")
})

Finn form-tag’en (<form>) i HTML-koden som vi kopierte inn isted. Legg til attributtet action med verdien ”/create-item”, og attributtet method med verdien ”POST”

<form action="/create-item" method="POST">

Finn deretter input-tag’en som ligger et par linjer under, og legg til et name-attributt, med verdien “item”. Verdien “item” er ikke nøye, den kunne vært akkurat hva du ville, men vi går med “item”.

<input name="item" autofocus autocomplete="off">

Nå som det er på plass, så kan vi scrolle helt til bunn av fila igjen. La oss fjerne argumentet til console.log(). Som vi gjorde tidligere, ønsker vi å få teksten som brukeren har tastet inn i input-feltet. Da skriver vi

console.log(req.body.item)

På samme måte som sist må vi tillate express å legge til form-verdier i body-elementet, med denne magiske linja, som du kan legge til rett under “let app = express()”:

app.use(express.urlencoded({extended: false}))

Dette gjør det bare lett for oss å få tak i input-dataene.

Lagre fila med ctrl+s, gå til terminalen og stopp serveren med ctrl+c, og start den opp igjen

$ node server

Gå så til localhost:3000, og fyll inn noe i skjemaet og trykk Add New Item. Vi vil da bli sendt til localhost:3000/create-item, og det står “Thanks for submitting the form” på skjermen. Men viktigere, er at vi kan gå tilbake til loggen, og se at det står hva-enn du skreiv inn i input-feltet. Det vil si at vi får tak i verdien som vi vil ha, og kan fortsette!