Jussigram

Jussi Parkkinen INTINU13A6

Jussigram on pääasiassa mobiililaitteille tarkoitettu kuvasivusto, jossa käyttäjät voivat julkaista omia kuviaan muiden nähtäville. Palvelussa käyttäjät voivat tilata toistensa kanavia, tykätä kuvista ja kommentoida niitä. Sivusto käyttää jQuerya ja jQueryMobilea.

Palvelu on toteutettu Java-pohjaisesti ja sisältää lyhyesti seuraavanlaiset tiedostot:

index.jsp Palvelun pääsivu, jossa kaikki toiminnot on koottu yhdelle sivulle.
login.jsp Sivu, jossa kirjaudutaan sisään tai siirrytään rekisteröintiin. Sisäänkirjautuminen kutsuu login-servlettiä.
rekisteroidy.jsp Sivu, jossa voi rekisteröityä palveluun. Rekisteröityminen kutsuu rekisteroidy-servlettiä.
asetukset.java Luokka, johon tallennettu tietokantayhteyden tiedot.
md5.java Luokka, joka muodostaa salasanoista MD5-salatun version.
login.java Servletti, joka hoitaa kirjautumisen palveluun tarkistamalla, löytyykö käyttäjää tietokannasta. Kirjautuminen tallennetaan selaimen istuntoon.
rekisteroidy.java Servletti, joka hoitaa rekisteröimisen lisäämällä käyttäjän tiedot tietokantaan ja tallentaa käyttäjän kuvan kayttajat-kansioon.
tietokanta.java Servletti, jota kutsutaan erilaisilla get-pyynnöillä pääohjelmasta AJAX-pyynnöillä. Servletti palauttaa tietoa sen mukaan, mikä mode-tyyppi on määritetty get-pyynnössä (esim. tietokanta?mode=koti + tarvittavat parametrit):
  • koti - tilausten kuvat
  • haku - haku asiasanoista tai käyttäjistä
  • kuva - kuvan tiedot
  • onkokayttaja - onko käyttäjänimeä olemassa
  • kayttajatiedot - käyttäjän profiilin tiedot (profiilin yläosa)
  • kayttäjakuvaruudukko - käyttäjän kuvat ruudukkomuodossa
  • kayttäjäkuvalista - käyttäjän kuvat listamuodossa
  • tykkays - lisää tai poistaa tykkäys kuvasta
  • kommentti - lisää kommentti kuvaan
  • muokkaakuvaa - muokkaa kuvan tietoja (jos se on oma)
  • poistakuva - poistaa kuvan (jos se on oma)
  • tilaa - lisää tai peruuta tilaus
  • tapahtumat - tulostaa aikajärjestyksesä uudemmasta vanhempaan käyttäjän kuvien saamat tykkäkset, kommentit ja saadut tilaukset
  • lisaakuva - lisää kuva
  • muokkaaomiatietoja - muokkaa omia käyttäjätietoja

Tiedot on tallennettu MySQL-kantaan alla olevan kuvan mukaisesti:

Toiminta

Kirjautumissivu login.jsp, jolla voi kirjautua tai siirtyä rekisteröintiin.
Rekisteröinti-sivu: käyttäjä valitsee itselleen profiilikuvan (kuvaa voi suurentaa ja sijoitella haluamallaan tavalla) ja täyttää lomakkeen tiedot. Lomakkeen lähettäminen kutsuu rekisterointi-servlettiä, joka tallentaa käyttäjän tiedot tietokantaan (salasana MD5 salattuna) ja kuvan kayttajat-kansioon käyttäjän ID:llä (kuva pienennetty kokoon 100x100 rekisteröintilomakkeella).
Kirjautuminen kutsuu login-servlettiä, joka tarkistaa tietokannasta, ovatko tiedot oikein ja luo sitten sessionin, johon tallennetaan käyttäjän ID ja käyttäjänimi
index.jsp sivu, jossa on kaikki ohjelman toiminnallisuudet yhdellä sivulla viidellä eri "alisivulla": koti, haku, lisää kuva, viimeaikainen toiminta ja oma profiili. Kun sivu avataan, näytetään koti-näkymä johon ladataan tietokanta-servletistä Ajax-pyynnöllä (Ajax-pyyntöä käytetään myös muissakin alisivuissa) käyttäjän omat ja käyttäjän seuraamien käyttäjien kuvat ja niiden kommentit ja tykkäykset.
Haku-näkymä, jossa voi hakea kuvia asiasanoilla ja käyttäjiä. Tässä kuvahaku; kuvaa klikkaamalla pääsee katsomaan kuvan tietoja (käyttäjä, kommentit, tykkäykset).
Ja tässä käyttäjähaku. Klikkaamalla käyttäjää, pääsee käyttäjän profiiliin.
Kuvan lisäys-näkymä, jossa voi lähettää palveluun uuden kuvan. Kuvan voi valita tiedostojärjestelmästä tai pudottaa kuva-alueelle. Mobiililaitteilla useimmat laitteet laitteet antavat lisätä kuvan myös suoraan kamerasta. Kuvaa voi suurentaa ja asetella haluamallaan tavalla laatikossa. Kuva pienennetään kahdella canvasilla kokoon 1080x1080 (isokuva) ja 360x360 (pikkukuva) ja lähetetään sitten post-komennolla tietokanta-servletille, joka tallentaa kuvan tiedot tietokantaan ja tallentaa molemmat kuvat omiin kansioihinsa.
Kaikki valmista kuvan latausta varten.
Kuvaa ladataan.
Kuvan lataaminen onnistui.
Kuvan kommentointi.
Kommentti lisätty. Tykkäminen tapahtuu klikkaamalla sydäntä tai tuplaklikkaamalla kuvaa.
Oma profiili. Ylhäällä tiedot kuvien määrästä, omista seurauksista ja omista seuraajista. Klikkaamalla näkee tiedot, keitä seuraajat/seurattavat ovat. Kuvat näkyvät profiilin avatessa ruudukko muodossa. Kuvaa klikkaamalla avautuu kuvan kuvasivu.
Kuvat lista muodossa. Kuvista näkyvät tiedot (kommentit, tykkäykset jne.).
Omien tietojen muokkaus.
Klikkaamalla kuvaa ruudukossa avautuu kuvan kuvasivu.
Oman kuvan kuvasivu. Kuvan tietoja (ensimmäistä kommenttia) voi muokata tai kuvan voi poistaa.
Kuvan tietojen muokkaus.
Kuvan poiston varmistus.
Toisen käyttäjän profiili. Samanlaiset toiminnot kuin omassa profiilissa. Muokkaa linkin tilalla Tilaa-nappi.