UI Prototüüp (lõppversioon)

Allikas: Lambda
Leht kuulub aine Kasutajaliidesed juurde.
Kasutajaliidese teine töö seisneb esimese prototüübi töölepanekus serveris ning selle viimistlemises.
  • Viimistlege prototüüp kasutatavaks programmiks
  • Back-end osas võite kasutada mistahes lahendust. Php, Django, Node.js, CGI-skriptid...
  • Kasutada on dijkstra.cs.ttu.ee
  • Kasutajakogemus olgu täielik -- kõiksugu placeholder tekste, javascript alert() ja mittetöötavaid linke näha ei soovi. Kasin funktsionaalsus kahandab punkte, aga ei ole takistuseks töö kaitsmisel.
  • E-posti saatmine jätke ära (neid asd.ee pihta spämmida pole otstarbekas)

Jälgige ekstra:

  • Veateated
  • Navigatsioon
  • Info edastamine
  • Nõutud/Soovitatav funktsionaalsus
    • Kas teie programmi saab reaalselt kasutada?
  • Sisselogimine / Registreerimine
  • Hinnete panek (alamkomponentidest koosnevad hinded, punktide summeerimine, keskmised, õpilaste otsing-lisamine jne)
  • Hinnete nimekiri (esitus/leheküljestamine)


Dijkstra server

Kodutööde tarbeks on kasutusel server nimega dijkstra (see keeruline nimi on ühe tuntud arvutiteaduse teerajaja nimi ja keeruline seepärast, et see nimi teile paremini meelde jääks).

Ligipääs

Dijkstrasse sisselogimiseks on vaja end registreerida. Registreerimiseks piisas, kui esitasite oma esimese kodutöö õigeaegselt. Juhul kui te seda ei teinud, saatke kiri praktikumitunni juhendajale ja saate samuti ligi.

Ühtlasi on tarvilik ligipääs Linuxi arvutitesse. See tähendab tudengikoodile ette kirjutatud t-tähega kasutajanimi eesnimi.perenimi kujul. Kel seda ei ole, saab selle vormistada administraatori juures.

Sisselogimine

Sisselogimiseks kasutatakse SSL ühendust ehk siis maakeeli programmi putty (Windows) või ssh (Linux). Tegemist on siis käsurealigipääsuga Linuxipõhisele serverile.

  • Teie kasutajanimi ja parool: TTÜ arvutiklasside kasutaja + parool
  • Dijkstra aadress: dijkstra.cs.ttu.ee

Failide laadimine

Failide laadimiseks sinna kasutage SFTP protokolli. Üks võimalikest programmidest, mis seda toetab on näiteks Filezilla.


Keskkonna ettevalmistamine

Kõik asjad, mis paigutate oma dijkstra kodukataloogi alamkataloogi "public_html", on veebis nähtavad. See kataloog tuleb kõigepealt luua:

$mkdir public_html

("$" rea alguses tähistab nüüd ja edaspidi Linuxi käsurealt antavaid käske (enamus praeguse näite failioperatsioonidest peaks olema tehtavad ka SFTP graafilise liidese alt). Linuxi käsurea kasutamist tuleb uurida omal käel. Käsurea saamiseks tuleks üle SSH ühenduse dijkstra käsureale logida (ssh või putty vms) )

Kui kataloog on olemas, suunake oma brauser dijkstra aadressile, mille saate kui serveri lisate tudengikoodi serveri nimele (jälgige suurtähti. need on kahjuks olulised): http://dijkstra.cs.ttu.ee/~Eestnimi.Perenimi/

Kui kõik töötab õigesti, peaksite nägema kataloogi nimistut, mis on tühi, sest te pole sinna faile pannud. Tekitage index.html nimeline fail ja kontrollige, et see hakkab endist tühja kataloogilistingut asendama. Rakenduse html-failid võite panna sinnasamasse public_html alla.

Failiõiguste probleemid

Juhul, kui te kataloogi või oma index.html sisu ei näe, kontrollige, et teie kodukataloog oleks kasutajaklassile "others" listitav (st x loabitt üleval) ja public_html oleksid grupile "others" loetavad ja listitav (r ja x bitid). Samuti peab klass "others" olema võimalus lugeda kõiki veebi ülesminevaid faile.

Kodukataloogi failinimistu lugemise õiguse andmine:

$chmod o+x ~

Kataloogile lugemis-ja nimekirjanäitamise õiguse andmine:

$chmod  o+rx public_html

Failile lugemisõiguse andmine:

$chmod o+r index.html

Nüüd, kus on kontrollitud, et veebis on staatilised HTML leheküljed üleval, saame põnevasse dünaamilisuse maailma sukelduda.

Põnev dünaamiline maailm

Praktikumi jaoks kasutate CGI skripti, mida saate enda rakenduse jaoks kohandada (aga ei pea tingimata). CGI skript on kirjutatud keeles Python ning kasutab SQLite nimelist SQL rakendust.

CGI rakendused elavad public_html alamkataloogis cgi-bin. (CGI rakendusi hoitakse traditsioonilselt staatilistest lehtedest eraldi, sest tegemist on ikkagi päris serveris käivituvate programmidega ja neil on sellest tulenevalt ka kõrgem turvarisk.)

$mkdir cgi-bin

Esmatutvus Pythoniga CGI kontekstis

Looge cgi-kataloogi järgmise sisuga fail "test.py":

#!/usr/bin/python
print "Content-type: text/html"
print
print "<html><head><title>test.py</title></head><body><h1>Hello, World!</h1></body>"

Esimene, trelliga rida ütleb, et käivitate pythoni interpretaatori ja ülejäänud read trükivad välja HTMLi vastuse. Content-type ja reavahetus on sealjuures väga kriitilised saata.

Proovige brauseris selle faili aadress avada ja jälgige mis juhtub.
http://dijkstra.cs.ttu.ee/~tXXX/cgi-bin/test.py Saate räige veateate, sest CGI skript ei ole käivitatav grupi õigustes (ega niisama).

Parandage failiõigused:

$chmod +x test.py 

Proovige CGI skripti uuesti käivitada ja veenduge, et kõik töötab. Ka siin on oluline jälgida, et tudengite gruppi kuulujatel saaks antud faili nii lugeda kui kirjutada (st arvestage ka kataloogide pääsuõigustega).

NB! Kui saate veateate "Internal Server Error" või midagi sarnast, siis võib juhtuda, et probleem on realõpumärkides: kui käsurea käsk

$cat test.py

annab esimeseks reaks #!/usr/bin/python^M , siis kasutate windowsi faililõppe ja dijkstra proovib käivitada programmi nimega python^M . Selle parandamiseks salvestage fail UNIX faililõpuga.


Python + CGI

Selleks, et asju dünaamilisemaks teha, saate pythoni abil vastu võtta ka vormide infot. Selleks on tore imporditav moodul nimega cgi, mille funktsioonid aitavad vormiinfot söödavamal kujul sisse võtta.

Looge fail test2.py:

#!/usr/bin/python
import cgi

print "Content-type: text/html"
print

print "<html><head><title>test2.py</title></head><body><h1>Hello, World!</h1><p>Lisaparameeter oli "

formdata = cgi.FieldStorage()
if formdata.has_key("lisaparameeter"):
  print formdata['lisaparameeter'].value
else:
  print "puudu"

print ".</p></body>"

Vaadake faili brauseris:
http://dijkstra.cs.ttu.ee/~t0XXX/cgi-bin/test2.py

Parandage faili õigused omaette kirudes, et seda unustati teile teisel korral öelda ja vaadake uuesti.

http://dijkstra.cs.ttu.ee/~t0XXX/cgi-bin/test2.py http://dijkstra.cs.ttu.ee/~t0XXX/cgi-bin/test2.py?lisaparameeter=olemas

See on siis selleks, et saaksite aru, et mis toimub.