---
title: Web-ohjelmointi
---

## Web-ohjelmointi, syksy 2020
### Tekijä: Annina Ikonen 171312

## Viikko 1 (1.9.- 6.9.2020)

### Mitä opin tällä viikolla
Kurssi käynnistyi ja aloitin käymään läpi kurssiin liittyviä työvälineitä. Minulla olikin suurin osa asennettuna jo valmiiksi, joten sen suhteen ei tullut mitään ongelmia.

Ensimmäisellä viikolla en vielä tehnyt yhtään harjoituksia. Katsoin aloitusluennon ja varmistin, että kaikki tarvittavat ohjelmat löytyvät ja toimivat.

***

## Viikko 2 (7.9. - 13.9.2020)

### Mitä opin tällä viikolla
Katsoin luennot läpi ja suurin osa aiheista oli jo etukäteen tuttuja. Olen käyttänyt esim. Node.js:ää ja Expressiä aikaisemminkin. Viikon aikana lähinnä kertasin ja muistuttelin mieleeni jo aiemmin opittuja asioita.

### Mitä harjoituksia tein

#### Tehtävä 1
Tehtävä ei tuottanut suurempia ongelmia minulle. Perusidea oli minulle heti selvä, jouduin vain vähän kertaamaan Javascriptin syntaksia.

#### Tehtävä 2
Tämäkään tehtävä ei ollut vaikea. Käyttöliittymän sai suunnitella millaiseksi halusi, joten tein yksinkertaisen peruskäyttöliittymän while-silmukalla. Tehtävää tehdessä kertasin jälleen vähän syntaksia, kun oli päässyt unohtumaan.

#### Tehtävä 3
Kertasin vähän Gitin ja Githubin käyttöä ennen tehtävän teon aloitusta ja tein Githubiin repon tehtäviä varten. Olen käyttänyt molempia aiemmin, joten asennukset ja asetukset olivat jo kunnossa.

Tehtävän tekoa varten kertasin myös Javascriptin luokkien toimintoja. Tekeminen onnistui hyvin, vähän piti tutkailla getterien ja setterien ominaisuuksia (ikuisuusluuppiin joutuminen). Sen jälkeen kaikki toimi hyvin.

***

## Viikko 3 (14.9. - 20.9.2020)

### Mitä opin tällä viikolla
Katsoin luennot läpi ja tein luentovideon mukaisesti tehtävän 4 alkuvalmistelut samalla. En ole aiemmin käyttänyt SQL-tietokantaa internetsivujen kanssa, joten ne osiot olivat minulle uusia. Olen käyttänyt Postmania aiemmin, mutta kertasin sen käyttöä ja opettelin, miten sillä lähetetään json-dataa.

### Mitä harjoituksia tein

#### Tehtävä 4
Katsoin tehtävänannossa mainitut linkit läpi ja tein tehtävää niiden avulla. Testasin vähän joka välissä, toimiiko koodi. En ihan heti saanut kaikkia SQL-lauseita toimimaan koodin seassa, joten jouduin vähän miettimään, mikä siellä mättää. Löysin virheet kuitenkin nopeasti ja sain koodin korjattua toimivaksi. Testasin lopuksi Postmanilla kaikki operaatiot ja ne vaikuttivat toimivan oikein.

***

## Viikko 4 (21.9. - 27.9.2020)

### Mitä opin tällä viikolla
Katsoin luennot läpi. Olen aikaisemminkin tutustunut jQueryyn, joten sitä tarvitsi taas vain kerrata. Kertasin myös CSS:än ja html:än käyttöä ja syntaksia. CSS ja html ovat myös tuttuja. Olen käyttänyt niitä aiemmin, mutta siitä on jo vähän aikaa, joten kertaus oli ihan paikallaan.

### Mitä harjoituksia tein

#### Tehtävä 5
Katsoin ennen tehtävän tekoa läpi tehtävänannossa olleet linkit. Tehtävästä minulla oli aika selkeä kuva heti, miten se pitäisi toteuttaa. Vähän jouduin viilaamaan koodia ja lukemaan ohjesivuja, että sain kaiken toimimaan oikein. Uusien rivien teko oikein taulukkoon oli vähän haastavaa, mutta löysin koodista ongelmakohdat ja sain korjattua sen siten, että rivejä tulee oikea määrä. Tarkistin vielä lopuksi Postmanilla, että nimi ja puhelinnumero täsmäävät molemmissa paikoissa.

***

## Viikko 5 (28.9. - 4.10.2020)

### Mitä opin tällä viikolla
Tutustuin Reactiin ja katsoin moodlesta löytyvän React-videon. En ole aiemmin käyttänyt Reactia, joten siinä tuli paljon uusia asioita ja opeteltavaa.

### Mitä harjoituksia tein
En vielä aloittanut tehtävän 6 tekoa.

***

## Viikko 6 (5.10. - 11.10.2020)

### Mitä opin tällä viikolla
Katsoin luennot ja jatkoin Reactiin perehtymistä.

### Mitä harjoituksia tein
Aloitin tehtävän 6 teon. Otin mallia luennoilla käsitellyistä materiaaleista ja sovelsin niitä tehtävän teossa. Tehtävä ei tullut vielä valmiiksi. Frontend toimii ainakin tässä vaiheessa.

***

## Viikko 7 (12.10. - 18.10.2020)

### Mitä opin tällä viikolla
Tein tehtävää eteenpäin ja samalla etsin lisäohjeita Reactin käytöstä.

### Mitä harjoituksia tein
Jatkoin tehtävää 6. Törmäsin muutamaan ongelmaan backendin suhteen. Ensimmäinen ongelma oli se, että en saanut urheilijoiden listaa näkyviin. Ilmeisesti yleinen "map is not a function virhe". Sain sen kuitenkin selvitettyä ja toimimaan.

Toinen ongelma, jota en enää saanut selvitettyä oli se, että sivu ei ladannut urheilijoiden tietoja automaattisesti uudestaan, kun sinne lisäsi uuden urheilijan tai muokkasi urheilijaa. En löytänyt, mistä virhe aiheutui.

Kolmas ongelma ilmeni uutta urheilijaa lisätessä. Lisäys sinällään kyllä toimi, mutta developer toolsin consolissa näkyi virhe "Each child in a list should have a unique "key" prop". Tätäkään en osannut korjata.

Kuitenkin sovellus tuntuu toimivan lisäyksen, poiston ja muokkauksen osalta tietokantaan. Poistettaessa poistettu tieto poistuu sivulta heti.

Tehtävän tekemiseen meni todella paljon aikaa, ja olen tyytyväinen, että sain sen kuitenkin näin hyväksi.

***

## Viikko 8 (19.10. - 25.10.2020)

### Mitä opin tällä viikolla
Aloitin tutustumaan Bootstrapin templateihin ja suunnittelemaan omaa ePortfoliota. En ole aiemmin käyttänyt valmiita pohjia, mutta Freelancer näytti käyttökelpoiselta. Minulla oli heti mielessä, miten lähtisin toteuttamaan portfoliota tähän pohjaan.

### Mitä harjoituksia tein
Aloitin tehtävää 7. Latasin Bootstrapin Freelancer-pohjan ja aloin suunnitella ulkoasua sekä koostaa tekstiä portfolioon. Sain koostettua tekstit valmiiksi. Käytin hyödyksi tämän blogin tekstejä ja muistelin tehtyjä tehtäviä.

***

## Viikko 9 (26.10. - 1.1.2020)

### Mitä opin tällä viikolla
Minulla oli jo idea edelliseltä viikolta, miten haluan muokata pohjan värimaailmaa ja muuta ulkoasua. Tutustuin pohjan valmiiseen koodiin ja tutkin, mitä kohtia pitäisi muuttaa.

### Mitä harjoituksia tein
Tein tehtävän 7 loppuun. Pohjan kuvat olivat mielestäni kiva idea, mutta halusin jotain paremmin teemaan sopivaa. Olen aiemmin jo tutustunut www.unsplash.com sivustoon, jolta löytyy paljon erilaisia kuvia vapaasti käytettäväksi. Etsin sieltä paremmin sopivat kuvat, joiden kokoa muutin sopivaksi ja lisäsin pikkukuvakkeisiin tehtävänumerot.

Värimaailman suhteen päädyin tiettyyn mustan sävyyn sen takia, että avatar-kuvassa oli käytetty sitä mustaa taustana. Mielestäni näytti mukavalta, että se sulautui taustaan. Etsin mustalle sopivan vaalean vastaparin www.colormind.io sivuston avulla. Muut värit näyttivät mielestäni sellaisenaan hyvältä, joten annoin niiden olla. Muokkailin myös hover-värejä ja muuta pientä.

Tykkäsin Fontawesomen sivulta otetusta tähti-ikonin ideasta, mutta halusin jotain vähän muuta. Etsin sieltä paremmin itseä miellyttävän ikonin. Se päätyi myös Faviconiksi sivun värimaailmaan sopivalla värisävyllä. Löysin sivuston, jonka kautta sai tehtyä Fontawesomen ikonista suoraan Faviconin, joten se ei tuottanut ongelmia.

Varsinaisesti tekniseen toteutukseen en tehnyt paljonkaan muutoksia. Kaikki menun toiminnallisuudet ja sivun vieritykset pysyivät samana. Vaihdoin kontaktointilomakkeen kurssipalautteeksi, koska mielestäni se sopi siihen kohtaan hyvin.

Portfolioon en kirjoittanut kovin laajasti tämän tehtävän teosta, koska kuitenkin siitä piti kirjoittaa tänne blogiinkin. Tuntui luontevammalta kommentoida sinne vain vähän ja kirjoittaa tänne pidempi teksti sen jälkeen, kun palautin tehtävän. Mielestäni se pieni teksti sopi hyvin tietoa-kohtaan ja toimi saman mallisena tekstiosiona kuin pohjassa jo oli valmiiksi.

Käytin tehtävässä siis paljon samoja elementtejä, jotka pohjassa olivat jo valmiina, mutta muokkasin vain omaan makuun paremmin sopivaksi. Mielestäni lopputulos on onnistunut ja miellyttävän näköinen. Tehtävä oli opettavainen ja oli myös hauskaa miettiä ulkoasullisia seikkoja. Niihin pystyi keskittymään paremmin, kun sivun toiminnallisuus oli jo pieniä muokkauksia vaille valmis.

***