# Web-ohjelmointi, syksy 2020
`Tekijä: 1905308 Isto Päivinen`

## Viikko 1 (1.9.- 6.9.2020)
### Mitä opin tällä viikolla
Kurssi lähti käyntiin itselle jo aikalailla tutuista asioista, koska minulla on jo jonkun verran web-ohjelmointitaustaa Helsingin yliopiston avoimelta fullstack 2020 - kurssilta, josta suoritin muutamia osia. Lisäksi kokemusta on ajan myötä kertynyt DiscordJS:llä kehitetyn Discord -botin kehittämisestä, jonka toiminnallisuudet käyttävät erittäin montaa eri API:a. Kertaus ei kuitenkaan haittaa minua ollenkaan, päinvastoin. Mitä paremmin perusasiat osaa sen parempi, ja odotan innolla kurssin etenemistä monimutkaisempiin vaiheisiin, joita en varmastikaan käynyt vielä läpi. Web -kehittäjäksi tuleminen on ollut jo pidemmän aikaa tavoitteeni, ja olen erittäin motivoitunut saavuttamaan sen. Jonkun verran tuli tietoakin jo kurssin rakenteesta, ja se vaikuttaa hyvältä ja monipuoliselta.

### Mitä harjoituksia tein

Rekisteröidyin opetusjakson Slackiin. NodeJS, npm, git sekä Visual Studio Code löytyvät jo valmiiksi koneeltani aiemmin mainitsemieni ohjelmointiprojektien ansiosta joten niitä ei tarvinnut asentaa uudelleen. Aloitin e-portfolion kirjoituksen. Ensimmäiseltä viikolta ei jäänyt mitään oppimatta ja asiat jäivät hyvin mieleen.

## Viikko 2 (7.9.- 12.9.2020)

### Mitä opin tällä viikolla
Asiat olivat suurilta osin itselle tuttujen asioiden kertausta (javascript perusteita) sekä html -kertausta, ja mitä tulemme opettelemaan käyttämään opintojakson aikana.

### Mitä Harjoituksia tein
Tein harjoitukset 1-3, jotka olivat melko yksinkertaisia javascript -aiheisia tehtäviä. Ohjelmien teko meni melko nopeasti aiemman kokemuksen ansiosta.

#### Harjoitus 1
Harjoituksessa 1 tein palindromi-tarkistus funktion, joka tarkistaa onko sana sama kummastakin suunnasta luettuna. Tein ohjelman yksinkertaiseen html- käyttöliittymään, kuten seuraavankin harjoituksen.

#### Harjoitus 2
Tein puhelinluettelo - käyttöliittymän perus HTML:llä, lisäys ja hakutoiminnoilla. Ongelmia ei kumpiakaan tehtäviä tehtäviä tehdessä oikeastaan tullut.

#### Harjoitus 3
Harjoituksessa 3 piti työskennellä javascript -olioiden kanssa, joita en ollut itse kyseisellä kielellä ennen käyttänyt. Olio-ohjelmoinnista saadun kokemuksen ansiosta tämänkään kanssa ei kuitenkaan ollut vaikeuksia ja sain tehtävän tehdyksi melko ongelmattomasti. Käytin olioiden testaukseen perus html-käyttöliittymää ja totesin toimivaksi.

## Viikko 3 (14.9 - 19.9.2020)
### Mitä opin tällä viikolla
Kävimme läpi Node.js ja MariaDB käyttöä, tietokantalauseita, expressin käyttöä ja postmanin käyttöä. Opin testaamaan tietokantalauseita, sekä tietojen haku/päivitys/poisto/luonti -metodeja javascriptillä ja postmania käyttäen.

### Mitä Harjoituksia tein
Tein harjoituksen 4, jonka myötä opin käyttämään postmania sovelluksen sekä eri operaatioiden testaukseen. Ajoin koko opintojaksoni kansion githubiin, ja lisäsin sinne myöskin sql - lauseet, joita käytin tehtävän teossa.

#### Harjoitus 4
Node.js sovellus jossa käytettiin expressiä ja mariaDB:tä. Ohjelmaa tehdessä ongelmat liittyivät lähinnä kansioiden kanssa painimiseen, kun ohjelma ei meinannut löytää luotuja delimiter -aliohjelmia, mutta lopulta sain kaikki tarvittavat funktiot ja operaatiot toimimaan odotetusti ja testattua ne tehtävänannon mukaisesti.

## Viikko 4 (21.9 - 25.9.2020)
### Mitä opin tällä viikolla
HTML - elementtien täyttämistä JSON - muodossa palautetusta datasta. Reactin kertausta, itselle melko tuttuja asioita. Hieman css -tyylittelyn alkeita html -sivulla.
#### Harjoitus 5
Pienimuotoinen harjoitus jossa käytettiin aiemmin tehtyä back-endiä ja näytettiin puhelinluettelossa sijaitsevat henkilöt, sekä muotoiltiin sitä käyttämällä CSS:ää.

## Viikko 5 (28.9 - 2.10.2020)
### Mitä opin tällä viikolla
Aloitin harjoitus #6 tekemisen, sain back-endin toimimaan ja tietokannan testattua sekä tehtyä Reactilla pienimuotoisen käyttöliittymän jolla testasin urheilijan lisäystä tietokantaan (toimivasti) tietojen haun lisäksi. Myöskin urheilijan poisto toimii.

## Viikko 6 (5.10 - 9.10.2020)
### Mitä opin tällä viikolla
##### 3-6.10
Muokkasin tehtävän 6 react - käyttöliittymää, joka käyttää kyseistä back-endiä reilusti, lisäksi otin bootstrapin käyttöön ja optimoin muokkausmetodeja. Siirsin eri funktioita eri sivuille, ja lähdetiedostoissa eri kansioihin sovelluksen rakenteen ja toimintojen selkeyttämiseksi. Lisäsin poisto -painikkeet bootstrapilla toteutettuun urheilijataulukkoon, sekä tein bootstrapin avulla automaattisesti skaalautuvan navigointi-palkin jolla pääsee eri hallintasivuille. Lisäksi lisäsin urheilijan päivitys -sivun, sekä urheilijoiden saavutukset sivun. Kaikki vaadittavat tietokantametodit urheilijoille (datan haku,lisäys, poisto ja päivitys) toimivat ja ovat testattuja käyttöliittymän kautta, joka alkaa pikkuhiljaa näyttämään jo melko hyvältä (kuva etusivusta alla).
Myöskin pienemmille selain-ikkunoille automaattisesti skaalautuva palkki toimii, ja valikosta tulee alas vedettävä painikkeella:
Tehtävä alkaa olemaan pikkuhiljaa valmis, saatan päivitellä käyttöliittymää hieman ja optimisoida funktioita lisää sekä lisätä kommentteja, mutta olen siihen jo melko tyytyväinen, ja se täyttää kaikki tehtävänannon vaatimukset. Olen projektin edetessä tehnyt useita git committeja, joten sitäkin kautta näen oman edistymiseni ja mikäli jossain on pitänyt palata taaksepäin, sen ansiosta ei ole siinäkään ongelmaa. Sovellukseni käytti porttia 4000 tietokannalle, ja porttia 3000 react -sovellukselle. Tietokannan nimi on urheilijat, ja pöydän josta data löytyy nimi on urheilija.
#### Koko projektin lähdekoodikansio on:
https://github.com/isp96/webohj2020/tree/master/Tehtava%206
Teidät on lisätty collaboratoriksi
##### Lähdekoodit sovelluksen eri toiminnallisuuksille/sivuille ovat seuraavat:

Express -metodit tietokantalauseita varten, index.js, tietokantayhteys jne:
https://github.com/isp96/webohj2020/blob/master/Tehtava%206/index.js

Tietokannan luontiskripti, ja sinne muutaman esimerkin lisäys (.sql):
https://github.com/isp96/webohj2020/blob/master/Tehtava%206/db_create.sql

React - sovelluskansio (jossa npm start käynnistää sovelluksen):
https://github.com/isp96/webohj2020/tree/master/Tehtava%206/urheilijasovellus

App.js tiedosto, jossa käyttöliittymän sivujen reititykset (käytin react-router-dom:ia)
https://github.com/isp96/webohj2020/blob/master/Tehtava%206/urheilijasovellus/src/App.js

##### Eri hallintaikkunoiden (sivujen) lähdekoodit React -kansiossa:
https://github.com/isp96/webohj2020/tree/master/Tehtava%206/urheilijasovellus/src/screens
Kotisivu / aloitusnäyttö:
https://github.com/isp96/webohj2020/blob/master/Tehtava%206/urheilijasovellus/src/screens/KotiSivu.js
Urheilijoiden saavutukset -sivu:
https://github.com/isp96/webohj2020/blob/master/Tehtava%206/urheilijasovellus/src/screens/SaavutuksetSivu.js
Uuden urheilijan lisäys -sivu:
https://github.com/isp96/webohj2020/blob/master/Tehtava%206/urheilijasovellus/src/screens/HallitseSivu.js
Urheilijan päivitys -sivu:
https://github.com/isp96/webohj2020/blob/master/Tehtava%206/urheilijasovellus/src/screens/EditSivu.js

##### Components -kansio:
https://github.com/isp96/webohj2020/tree/master/Tehtava%206/urheilijasovellus/src/components
Josta löytyy navigointipalkin/yläpalkin lähdekoodi, joka käyttää react-bootstrappia
https://github.com/isp96/webohj2020/blob/master/Tehtava%206/urheilijasovellus/src/components/NavPalkki.js

Olen lisännyt teidät githubissa collaboratoriksi, nimellä isp96,
Githubin mukaan kutsu odottaa vastausta.
Opiskelijanumeroni 1905308 lukee kyseisen repositoryn ulommaisen kansion sivulla.
(https://github.com/isp96/webohj2020)

## Viikko 7 (12.10 - 16.10.2020)
#### Syyslomaviikko, käytin aikaa lähinnä valmistautumiseen ja pohdin käyttäisinkö templaattia vai tekisinkö sivun itse tehtävää 7 varten. Päädyin jälkimmäiseen.

## Viikko 8 (19.10 - 23.10.2020)
### Mitä opin tällä viikolla
Aloitin tehtävän 7 tekemisen tehtävää 6 varten tekemääni sivustoa pohjana käyttäen.
##### 19-20.10
Tehtävä 7 aloitettu. Tein sivuston ja ajoin alustavat lähdekoodit githubiin. Lisäsin muutaman tehtävän jo sivulle, joka on selkeä muotoilultaan ja käyttää react-bootstrappia.

## Tehtävä 7 (19.10 - 25.10)
Muokkasin tehtävää 6 -varten tekemääni sivustoa reilusti ja lisäsin siihen lisää react-bootstrap komponentteja. Sivuston rakenne on ainakin omasta mielestäni melko selkeä ja helppokäyttöinen. Tehtävien sisällä on mahdollista navigoida, ja ne ovat lajiteltu viikoittain omalla sivullaan. Myöskin palautesivu löytyy erikseen, ja etusivulla on tietoa portfoliosta.
Kehitin tämän sivun itse templaatin käytön sijaan, koska minulla oli jo mielestäni tarpeeksi kokemusta, ja templaatit eivät oikein sopineet haluaamani ulkonäköön/suunnitelmaan mikä minulla oli. Tehtävät -sivulla osioista tehtävien kuvaus löytyy mitä tein. Toteutukset -kohdasta löytyy miten tein, miten onnistuin, mitä opin, mitä jäi mahdollisesti oppimatta ja mitä tekisin toisin. Lisäsin tehtävien tarkistamista varten helpottavia painikkeita tekstin sekaan, näistä aukeaa automaattisesti uusi välilehti johon linkki vie. Jotkit viikkotehtävistä saattavat olla eri viikko-osiossa moodlessa, mutta olen jakanut ne siihen järjestykseen, jossa tein tehtävät ja päivitin päiväkirjaa.

### ePortfolion lähdekoodikansio:
https://github.com/isp96/webohj2020/tree/master/Tehtava%207/ePortfolio/src