spletne-aplikacije/naloga-1

Fork 0

Go to file

Gašper Dobrovoljc 6c1a85bcf1

Initial commit

2023-01-06 21:40:41 +01:00

screenshots

Initial commit

2023-01-06 21:40:41 +01:00

.prettierrc

Initial commit

2023-01-06 21:40:41 +01:00

index.html

Initial commit

2023-01-06 21:40:41 +01:00

README.md

Initial commit

2023-01-06 21:40:41 +01:00

script.js

Initial commit

2023-01-06 21:40:41 +01:00

style.css

Initial commit

2023-01-06 21:40:41 +01:00

README.md

Naloga 1

Izdelali boste spletno stran, ki iz strežnika naloži seznam uporabnikov in jih prikaže v tabeli.

Če se vam vmes kdaj zatakne, je vsa koda na voljo na tem repozitoriju.

Navodila za izdelavo

Osnovna postavitev

Ustvarimo datoteke index.html, style.css in script.js.

Generiramo osnovno postavitev spletne strani (v VS Code pritisnemo ! in Enter).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Naloga 1</title>
  </head>
  <body></body>
</html>

V datoteko index.html povežemo style.css tako, v <head> dodamo vrstico
```
<link rel="stylesheet" href="style.css" />
```

Nato na enak način povežemo še script.js:

<script defer src="script.js"></script>

HTML

V <body> spletne strani dodamo naslov <h1> in tabelo (<table>) z idjem id="users".
Nato v tabelo dodamo še znački za glavo (<thead>) in telo (<tbody>) tabele.
Podatki, ki jih bomo prikazovali o uporabnikih so id, ime, uporabniško ime in email, zato v glavo tabele dodamo <th> za vsakega od njih.
Zaženite Live Server ali pa odprite index.html v brskalniku in spletna stran bi morala izgledati tako:

JavaScript

V script.js bomo napisali kodo, ki bo iz strežnika naložila seznam uporabnikov in jih dodala v html tabelo.

Ustvarimo novo asinhrono funkcijo getUsers():
```
async function getUsers() {}
```

Nalaganje podatkov s strežnika

Za nalaganje podatkov s strežnika uporablajmo vgrajeno funkcijo fetch().
Beseda await počaka na odgovor s strežnika, medtem ko ostala koda na spletni strani še vedno teče.

Naložimo podatke s strežnika in odgovor shranimo v konstanto response:

const response = await fetch('https://jsonplaceholder.typicode.com/users');

Odgovor dobimo v obliki JSONa (JavaScript Object Notation):

Kvadratni oklepaji [ ] predstavljajo seznam
Zaviti oklepaji { } predstavljajo objekt

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz"
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv"
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "Nathan@yesenia.net"
  },
  ...
]

Pretvorimo JSON v JavaScript objekt s klicom funkcije json() in ga shranimo v konstanto users:
```
const users = await response.json();
```

users sedaj izgleda tako:

const users = [
  {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv',
  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net',
  },
  ...
];

Vsebino spremenljivke lahko izpišete v konzolo z funkcijo
```
console.log(users);
```
Do konzole dostopate: Desni klik > inspect > console

Vstavljanje podatkov v tabelo

Sedaj ko imamo želene podatke v spremenljivki users, jih moramo vstaviti v tabelo.

Z zanko for zaženemo kodo za vsakega uporabnika

Spremenljivka user se vsak krog spremeni na naslednjega v seznamu users

for (const user of users) {
  // Vso nadalnjo kodo pišite sem notri
}

Da ustvarimo novo vrstico v tabeli uporabimo funkcijo
```
const row = document.createElement('tr');
```
Enaka stvar v html-ju:
```
<tr></tr>
```
Nato dodamo vsebino z innerHTML
Da lahko besedilo napišemo v več vrstic, namesto navadnih narekovajev uporabimo backticke ` (AltGr + 7).

Poleg tega lahko spremenljivke vstavljamo direktno v besedilo z ${spremenljivka}.

row.innerHTML = `
  <td>${user.id}</td>
  <td>${user.name}</td>
  <td>${user.username}</td>
  <td>${user.email}</td>
`;

Enaka stvar v html-ju:

<tr>
  <td>(vrednost user.id)</td>
  <td>(vrednost user.name)</td>
  <td>(vrednost user.username)</td>
  <td>(vrednost user.email)</td>
</tr>

Poiščemo telo tabele z idjem users (to kodo dodamo čisto na vrhu script.js):
```
const table = document.querySelector('table#users > tbody');
```
Na koncu dodamo vrstico v tbody:
```
table.appendChild(row);
```
Spletna stran bi sedaj morala izgledati tako:

CSS

Pojdite na spletno stran fonts.google.com in si izberite pisavo.
Kliknite nanjo in potem kliknite na Select Regular 400
Kopirajte vrstico, ki se začne z @import url('...'); in jo prilepite na vrh style.css.
Nato dodajte vrstico, ki se začne s font-family: ...; v značko body
```
@import url('...');

body {
  font-family: ...;
}
```
Bodyju nastavite margin na 0 in višino na 100vh (100% višina zaslona)
Sledi najtežja stvar v css-su - centriranje elementov na spletni strani

Eden on načinov, kako lahko to dosežemo je s pomočjo flexboxa (še vedno v znački body)

  body {
    ...

    display: flex; // Nastavimo prikaz na flex
    flex-direction: column; // Elementi naj bojo v stolpcu - en nad drugim
    align-items: center; // Elemente centriramo levo-desno
    justify-content: center; // Elemente centriramo gor-dol
  }

Celicam tabele dodamo obrobe (td - celice v telesu, th - celice v glavi) in 6px prostora v vsebini celic
```
#users td,
th {
  border: 1px solid black;
  padding: 6px;
}
```

Nazadnje še centriramo id-je uporabnikov v prvem stolpcu in jih naredimo krepke

#users td:first-child {
  text-align: center;
  font-weight: bold;
}

Če spletna stran izgleda podobna tej na sliki, potem vam je uspelo