Tutustutaan web-ohjelmointiin

Serveri, tietokanta, selain, http-pyyntö, ääääh! Miten niinku saan sivut nettiin?

Serveri on tietokone, joka sijaitsee jossain päin maailmaa. Serverillä voi pyöriä ohjelmia ja sillä on IP-osoite. Kaikki Internet-verkon tietoliikenne kulkee IP-paketteina. IP-osoite on niinkuin kotiosoite, sen perusteella paketit löytävät perille. IP-osoite voi olla muuttuva, mutta servereillä on yleensä kiinteä IP-osoite joka on sidottu domainiin. IP-osoitteiden ja domainien keskinäiseen muuntamiseen on olemassa oma järjestelmä, DNS eli Domain Name System.


HTTP-pyynnöt


HTTP on protokolla, jota selaimet ja WWW-palvelimet käyttävät tiedonsiirtoon. HTTP perustuu siihen, että asiakas (yleensä selain) lähettää HTTP-pyynnön, johon palvelin vastaa. HTTP-pyyntöjä on useita erilaisia. Yleisimmät HTTP-pyynnöt ovat GET ja POST. GET-pyyntö on tarkoitettu sivun hakemiseen serveriltä, POST taas tiedon lähetykseen serverille. HTTP-pyyntöjen erilaisuuden selittämiseen voi käyttää vertausta postin toiminnasta. POST-pyyntö on kuin postipaketti, joka sisältää tietoa tai asioita ja joka toimitetaan vastaanottajalle niin että hän voi sitä käyttää. GET-pyyntö on taas kuin kuriiri, joka käy pyytämässä esimerkiksi http://google.com -sivua, ja saa vastaukseksi HTML-sivun.


Tehtävä: Lataa Postman-sovellus. Postman on vähän kuin tekstiselain, eli sillä pystyy havainnollistamaan HTTP-pyyntöjen toimintaa. Tee Postmanilla GET-pyyntö johonkin osoitteeseen ja katso millainen vastaus on. Sen jälkeen tee POST-pyyntö osoitteeseen http://httpbin.org/post. Httpbin on testiserveri, joka palauttaa POSTilla lähettämäsi datan sinulle. Serveri saa itse kuitenkin aina määritellä, mitä se palauttaa POST-pyyntöön. Lisää Postmanin Body-kohdasta jokin Key ja Value, lähetä ja katso mitä palautetaan vastauksena. Huomaa myös Postmanin valikosta, kuinka paljon erilaisia HTTP-pyyntöjä onkaan olemassa.


Web-ohjelmoinnin työkalut

Keskustelukysymys: Mitä web-ohjelmoinnin työkaluja tiedät tai olet käyttänyt?

HTML


Tee Postmanilla GET-pyyntö osoitteeseen http://google.com. Se palauttaa HTML-tiedoston. Huomaat, että HTML-tiedostoilla on tietty rakenne. Ne koostuvat tageista ja niiden sisällä olevista tageista ja teksteistä.

JavaScript


Etsi sivulta script -tagi ja katso millaista koodia sen jälkeen tulee. Se on JavaScriptiä, ja se suoritetaan käyttäjän selaimessa. JavaScript on eri asia kuin Java, ja sitä käytetään selaimen toiminnallisuuksiin sovelluksissa. Tutustu nyt JQuery-UI:n demoihin, niin saat jonkinlaista kuvaa siitä, mihin JavaScriptiä käytetään ohjelmoinnissa. JQuery on JavaScript-kirjasto. Pääset itse käyttämään JQueryä myöhemmin tällä kurssilla.


CSS


CSS eli Cascading Style Sheets on taas tarkoitettu sivujen tyylittämiseen. Tutustumme lisää CSS:ään kurssin osassa 6. Esimerkiksi tämän kurssisivuston tekstit ja värit on saatu aikaan CSS:llä. Sivuston CSS on usein määritelty omassa .css -tiedostossaan. CSS-koodilla voidaan määritellä jokaiselle HTML-tagille oma tyyli, esimerkiksi tekstin ja taustan väri sekä fontti. Esimerkiksi seuraava koodi tyylittää h1-tagin (iso otsikko) niin että sen tekstin väri on oranssi ja teksti on keskitetty sivun keskelle.

h1 { color: orange; text-align: center; }


Palvelinohjelmointi


Nyt olemme tutustuneet HTML:ään, CSS:ään ja JavaScriptiin. Ne kaikki liittyvät serverin palauttaman koodin näyttämiseen käyttäjälle. Esimerkiksi Postmanilla huomasimme että erilaisissa selaimissa serverin palauttama koodi näkyy erilaisena, Postman ei esimerkiski suorita http://google.com -GET-pyynnön palauttamaa script-tagin sisällä olevaa JavaScript-koodia.

Mutta kuka päättää, mitä serveri palauttaa? Esimerkiksi google-hakuahan tehdessä palautus riippuu siitä, millä hakusanoilla käyttäjä on hakenut. Tähän tarvitaan palvelinohjelmointia. Siihen käytetään monia ohjelmointikieliä, esimerkiksi Pythonia, Javaa ja Ruby On Railsia. Ruby on olio-ohjelmointikieli kuten Javakin, ja Rails on Rubyyn tehty web-ohjelmointikirjasto. Palvelinohjelma huolehtii niin tietokannan käytöstä kuin HTTP-pyyntöjen vastaanottamisesta ja niihin vastaamisesta. Tällä kurssilla koodaamme Ruby On Railsia ja seuraavassa osassa teemmekin oman Rails-projektin.


Tehtävä ennen railsiin siirtymistä: Tee omat nettisivut users.paivola.fi -tunnuksellesi jos niitä ei ole. Tähän on tarkoitus käyttää sen verran aikaa, että ymmärrät HTML:n, CSS:n ja JavaScriptin erot ja osaat luoda yksinkertaisen sivun jossa on käytetty kaikkia näitä kolmea tekniikkaa. Apua sivujen tekoon saat W3Schools -sivustolta.