Intro Terminal

De terminal is een programma waarmee je de computer opdrachten geeft via tekst. In plaats van te klikken in Finder, typ je commando’s. Dat is sneller en krachtiger, zeker voor webservers en programmeerwerk. In Visual Studio Code kan je de ingebouwde terminal gebruiken (menu Beeld → Terminal of ⌃ + `).

1. Wat is de terminal?

De terminal is een venster waarin je een shell gebruikt. macOS en Linux gebruiken bijna dezelfde commando’s. Je kan er mappen en bestanden mee beheren, net zoals in Finder, maar dan met tekst.

2. Basiscommando’s

Open de terminal (los programma of ingebouwd in VS Code) en probeer deze commando’s:

pwd           # toon de huidige map (print working directory)
ls            # toon bestanden en mappen in de huidige map
cd Documents  # ga naar de map Documents
ls            # toon de inhoud
mkdir test    # maak een nieuwe map 'test'

3. Oefening 1 — Lokale map maken

Navigeer naar je map Documents:
```
cd ~/Documents
```
Maak daarin een map Webdevelopment/:
```
mkdir Webdevelopment
cd Webdevelopment
```
Maak een nieuwe map oef2_terminal/:
```
mkdir oef2_terminal
```
Maak daarin twee lege mappen images/ en styles/:
```
cd oef2_terminal
mkdir images
mkdir styles
```
Controleer met ls dat de mappen bestaan.

4. Klassenstructuur op de server (door de leerkracht)

Op de server voorziet de leerkracht vooraf aparte klasmappen in de webroot:

/var/www/html/oefeningen/5de/
/var/www/html/oefeningen/6de/

Leerlingen werken altijd binnen hun eigen map met hun voornaam in de juiste klas. Maak die map dus eerst zelf aan, bijvoorbeeld:

cd /var/www/html/oefeningen/5de
mkdir voornaam

5. Verbinden met de server

# Login op de server (je werkt nu OP de Pi)
ssh student@server.local

# Ga naar jouw klasmap (voorbeeld 5e jaar) en maak je eigen map
cd /var/www/html/oefeningen/5de
mkdir voornaam
cd voornaam

Belangrijk: waar voer je welk commando uit?

Server-shell (na SSH): prompt ziet er zo uit: student@server:~ $. Alles wat je hier typt, gebeurt op de server.
Mac-terminal of VS Code terminal (geen SSH): prompt ziet er zo uit: eddyvanacoleyen@MacBook-Air-van-Eddy ~ %. Hier voer je scp uit om bestanden van je Mac naar de server te kopiëren.

Twijfel je? Typ exit om SSH af te sluiten. Je zit dan zeker terug in de Mac-terminal.

6. Hele map kopiëren met `scp -r` (op de Mac of VS Code terminal!)

scp voer je op je Mac uit, niet in de server-shell. Je kan hiervoor perfect de ingebouwde terminal van VS Code gebruiken. Plak dit commando (pad aanpassen indien nodig):

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

Bekijk in de browser, bijvoorbeeld:

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

Vervang jan of sofie door je eigen voornaam.

Tilde (`~`) typen op de Mac

BE/AZERTY: ⌥ + n en dan spatie.
US/UK QWERTY: ⇧ + toets ` (links naast 1).
Als alternatief kan je ~ vervangen door $HOME, bv. $HOME/Documents/Webdevelopment/...

Heb je spaties in je pad? Zet het pad dan tussen aanhalingstekens: scp "$HOME/Documents/Webdevelopment/Mijn Site" student@server.local:...

Veelgemaakte fouten & oplossingen

No such file or directory → Controleer het pad links van de spatie (bronbestand op je Mac) en rechts van de dubbele punt (doelmap op de server).
Permission denied → Je kopieert naar een map zonder schrijfrechten. Vraag de leerkracht om rechten na te kijken voor de klasmap.
command not found: scp → Je zit waarschijnlijk in de server-shell. Typ exit en voer scp uit in je Mac- of VS Code-terminal.
Are you sure you want to continue connecting? → Typ yes (eerste keer verbinding). Daarna werkt het zonder vraag.

7. Samenvatting

pwd, ls, cd, mkdir om te navigeren en mappen te maken.
Leerkracht voorziet /5de/ en /6de/ klasmappen op de server.
Leerlingen maken /voornaam/ zelf aan in de juiste klasmap.
Gebruik ssh om op de server te werken en scp -r (op de Mac of in VS Code terminal) om volledige mappen over te zetten.
~ = thuismap. Alternatief: $HOME.

Oefeningen

Maak lokaal in oef2_terminal/ een bestand index.html met een <h1> en <p>.
Voeg een bestand style.css toe in de map styles/ en zet daarin een eenvoudige CSS-regel, bv. h1 { color: darkblue; }.
Maak op de server in jouw klasmap een map met je voornaam.
Kopieer nu de volledige map oef2_terminal/ in één keer naar de server met scp -r.
Bekijk de pagina in de browser en controleer dat je CSS ook werkt.

Terug naar boven