VS Code → Server (upload & testen)

In deze les maak je verbinding met de server (hostname: server.local) vanuit Visual Studio Code en kopieer je je volledige projectmap naar je eigen map op de server. Daarna test je de pagina in de browser. Als de server tijdelijk niet beschikbaar is, kan je steeds lokaal testen met Live Server.

1. Hoe een webproject opzetten in VS Code

Volg dit vaste stappenplan bij elk project. We werken altijd binnen een projectmap, gebruiken een vaste mappenstructuur, en testen met Live Server.

projectnaam/
 ├── index.html                ← startpagina
 ├── assets/                   ← ondersteunende bestanden
 │    ├── styles/              ← CSS
 │    │     └── style.css
 │    ├── images/              ← afbeeldingen/iconen
 │    │     └── logo.png
 │    ├── scripts/             ← JavaScript (later)
 │    │     └── app.js
 │    └── fonts/               ← webfonts (optioneel)
 │          └── roboto.woff2
 └── paginas/                  ← extra HTML-pagina’s
       ├── over-ons.html
       └── contact.html

Visuele mappenstructuur

Zo hoort je project eruit te zien in de Explorer van VS Code:

📁 projectnaam
 ├── 📄 index.html
 ├── 📁 assets
 │    ├── 📁 styles
 │    │     └── 📄 style.css
 │    ├── 📁 images
 │    │     └── 📄 logo.png
 │    ├── 📁 scripts
 │    │     └── 📄 app.js
 │    └── 📁 fonts
 │          └── 📄 roboto.woff2
 └── 📁 paginas
      ├── 📄 over-ons.html
      └── 📄 contact.html

2. Verbinden met de server (SSH)

Log in op de server vanuit de VS Code-terminal. Je werkt dan op de server:

ssh student@server.local

Ga naar jouw klasmap en controleer dat je persoonlijke map (voornaam) bestaat. Zo niet: maak ze aan.

cd /var/www/html/oefeningen/5de
ls                 # zie je jouw voornaam erbij staan?
mkdir voornaam     # alleen indien nodig
exit               # ga terug naar je Mac-terminal voor de volgende stap

3. Volledige projectmap kopiëren

Kopieer je hele oefenmap in één keer naar je eigen map op de server. Vervang voornaam door je eigen naam.

scp -r ~/Documents/Webdevelopment/oef3 \
  student@server.local:/var/www/html/oefeningen/5de/voornaam/

4. Testen in de browser

Open je site via de server-URL. Voorbeelden (vervang de naam):

http://server.local/oefeningen/5de/jan/oef3/
http://server.local/oefeningen/5de/sofie/oef3/

De startpagina moet index.html heten. Werkt het niet? Controleer je paden en of je map correct staat op de server.

5. Browserkeuze

Gebruik eender welke moderne browser (Firefox, Chrome, Safari). Voor webontwikkeling is Firefox Developer Edition handig door de uitgebreide devtools. Installeren is niet verplicht, maar aanbevolen voor wie wil verdiepen.

6. Snelle checklijst

• VS Code open met je project en vaste mappenstructuur.
• SSH naar de server → check/maak je voornaam/-map → exit.
• scp -r om je projectmap naar /var/www/html/oefeningen/5de/voornaam/ te kopiëren.
• Test via de juiste URL in de browser.

7. Veelgemaakte fouten

• No such file or directory: pad op je Mac of doelpad op de server klopt niet. Let op hoofdletters.
• Permission denied: je kopieert naar een map zonder rechten. Meld dit aan de leerkracht.
• command not found: scp: je zit nog in SSH. Typ exit en probeer opnieuw.

8. Optioneel: Remote Explorer in VS Code

Met de extensie Remote – SSH kan je de server rechtstreeks in VS Code openen:

• Klik links op het icoon Remote Explorer.
• Voeg server.local toe en log in met student + wachtwoord.
• Je ziet nu de servermappen in de VS Code-sidebar, alsof het lokale bestanden zijn.
• Je kan bestanden openen, bewerken en opslaan. Ze worden meteen aangepast op de server.

Dit is handig voor kleine aanpassingen of snel testen. Voor grotere projecten gebruik je best de workflow met scp -r, zodat je alles lokaal kan ontwikkelen en pas daarna uploaden.

9. Plan B: lokaal testen met Live Server

Als de server tijdelijk niet bereikbaar is, test je gewoon lokaal in VS Code:

1. Installeer de extensie Live Server (Ritwick Dey).
2. Rechtsklik op index.html en kies Open with Live Server.
3. Je pagina opent in je browser op een lokaal adres, bv. http://127.0.0.1:5500/.

Op die manier kan je altijd blijven werken en testen, ook zonder de server.

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>Mijn favoriete film of game</title>
  <link rel="stylesheet" href="assets/styles/style.css">
</head>
<body>
  <h1>Mijn favoriete titel</h1>
  <p>Hier schrijf je een korte beschrijving van je favoriete film of game.</p>
  <img src="assets/images/voorbeeld.jpg" alt="Cover afbeelding">
</body>
</html>

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0; /* lichtgrijs */
  margin: 20px;
}

h1 {
  color: darkblue; /* opvallende kleur */
}

img {
  max-width: 300px;
  display: block;
  margin-top: 10px;
}

Terug naar boven