spletne-aplikacije/naloga-1
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Gašper Dobrovoljc 2023-01-06 21:40:41 +01:00
commit 6c1a85bcf1
No known key found for this signature in database
GPG Key ID: 0E7E037018CFA5A5
8 changed files with 332 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.prettierrc Normal file
View File

@ -0,0 +1,4 @@
{
"singleQuote": true,
"trailingComma": "all"
}

257
README.md Normal file
View File

@ -0,0 +1,257 @@
# 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.
![Slika spletne strani](screenshots/final.png)
## 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`).
```html
<!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
```html
<link rel="stylesheet" href="style.css" />
```
- Nato na enak način povežemo še `script.js`:
```html
<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:
![Slika HTML](screenshots/html.png)
### 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()`:
```js
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`:
```js
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**
```json
[
{
"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`:
```js
const users = await response.json();
```
- `users` sedaj izgleda tako:
```js
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
```js
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`
```js
for (const user of users) {
// Vso nadalnjo kodo pišite sem notri
}
```
- Da ustvarimo novo vrstico v tabeli uporabimo funkcijo
```js
const row = document.createElement('tr');
```
- Enaka stvar v html-ju:
```html
<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}`.
```js
row.innerHTML = `
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.username}</td>
<td>${user.email}</td>
`;
```
- Enaka stvar v html-ju:
```html
<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`):
```js
const table = document.querySelector('table#users > tbody');
```
- Na koncu dodamo vrstico v `tbody`:
```js
table.appendChild(row);
```
- Spletna stran bi sedaj morala izgledati tako:
![Spletna stran JavaScipt](screenshots/javascript.png)
### CSS
- Pojdite na spletno stran [fonts.google.com](https://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`
```css
@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)
```css
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
```css
#users td,
th {
border: 1px solid black;
padding: 6px;
}
```
- Nazadnje še centriramo id-je uporabnikov v prvem stolpcu in jih naredimo krepke
```css
#users td:first-child {
text-align: center;
font-weight: bold;
}
```
- Če spletna stran izgleda podobna tej na sliki, potem vam je uspelo
![Slika spletne strani](screenshots/final.png)

23
index.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Naloga 1</title>
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
</head>
<body>
<h1>Users</h1>
<table id="users">
<thead>
<th>ID</th>
<th>Name</th>
<th>Username</th>
<th>Email</th>
</thead>
<tbody></tbody>
</table>
</body>
</html>

BIN
screenshots/final.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
screenshots/html.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
screenshots/javascript.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

20
script.js Normal file
View File

@ -0,0 +1,20 @@
const table = document.querySelector('table#users > tbody');
async function getUsers() {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
for (const user of users) {
const row = document.createElement('tr');
row.innerHTML = `
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.username}</td>
<td>${user.email}</td>
`;
table.appendChild(row);
}
}
getUsers();

28
style.css Normal file
View File

@ -0,0 +1,28 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
body {
margin: 0;
height: 100vh;
font-family: 'Nunito', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#users {
border-collapse: collapse;
}
#users td,
th {
border: 1px solid black;
padding: 6px;
}
#users td:first-child {
font-weight: bold;
text-align: center;
}