Advanced Kittenry - Tietokantasovellusohjeet

Käyttöliittymädemon toteuttaminen

Jokaisen tietokantasovelluksen käyttöliittymän pohjana on HTML-kieli, jolla määritetään se, mitä sivuilla näkyy. HTML-kielen kaverina toimii CSS-tyylitiedostokieli, jolla on mahdollista määritellä minkä näköisenä HTML-kielellä ilmaistut elementit sivuilla esiintyvät.

Minne laitan sivuni?

Se minne sivut kannattaa sijoittaa riippuu hieman ohjelmointikielestä. Javan servlet-tekniikalla ainoastaan web-hakemistoon laitetut tiedostot näkyvät selaimella. PHP:llä tätä rajoitusta ei ole, joskin myöhemmin keskitämme HTML-koodin MVC-mallin mukaisesti omaan hakemistoonsa.

Jos teet vasta staattista HTML-versiota käyttöliittymää, luo hakemisto html-demo ja lähde rakentamaan sinne HTML-versiota työstäsi. Javalla tämä hakemisto sijoitetaan web-hakemistoon, PHP:llä se voi olla projektin juuressa. Sijoita kaikki puhtaasti testausmielessä (lähinnä viikolla 2) tekemäsi HTML-tiedostot tuohon kansioon.

HTML-sivun luonti NetBeansillä

NetBeansin käyttäjät voivat luoda HTML-tiedostoja projektiinsa seuraavasti:

  • Javalla koodatessa:
    • Valitse uuden tiedoston ikkunasta Web->HTML
    • Halutessasi tehdä dynaamisia sivuja valitse Web->JSP
  • PHP:llä koodatessa:
    • Valitse uuden tiedoston ikkunasta Other->HTML
    • Halutessasi tehdä dynaamisia sivuja valitse PHP->PHP Web Page

Poista kummassakin tapauksessa NetBeansin alkuun lisäämä Template-kommentti. Ota kommentin luominen pois päältä valitsemalla valikosta Tools->Templates. Avaa listassa kohdan Licenses alla oleva tiedosto Default License ja tyhjennä sen sisältö.

HTML-koodin rakenne

Mikäli loit tiedostosi NetBeansillä näyttää se suurinpiirtein tältä:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>TODO write content</div>
    </body>
</html>

Mikäli tämännäköinen koodi ei ole tuttua, kannattaa lukea taustatietoja esim. w3schoolsin sivuilta. Myös tietokone työvälineenä -kurssin materiaaleista voi olla apua.

Tiedostojen välinen linkitys

HTML:ssä muodostetaan linkki toiselle HTML-sivulle käyttämällä a-tagia seuraavasti:

<a href="toisen_sivun_osoite.html">Tekstiä, joka linkittää toiselle sivulle.</a>

Mahdollisia tapoja viitata toisiin sivuihin on kolme:

  • Absoluuttinen osoite
  • Osoite suhteessa palvelimeen
  • relatiivinen osoite

Esimerkki: Jos linkittävä sivu sijaitsee osoitteessa http://advancedkittenry.github.io/aikataulu/koodikatselmointi.html voi se linkittää sivulle http://advancedkittenry.github.io/aikataulu/index.html näillä kolmella tapaa seuraavasti:

<a href="http://advancedkittenry.github.io/aikataulu/index.html">Absoluuttinen osoite</a>
<a href="/aikataulu/index.html">Osoite palvelimen suhteen</a>
<a href="index.html">Relatiivinen osoite</a>

Absoluuttisella osoitteella toteutettu linkki osoittaa aina samaan paikkaan riippumatta siitä missä linkittävä sivu sijaitsee. Tämä ei kuitenkaan aina ole hyvä ajatus, jos haluaa tehdä sivustostaan helposti siirrettävän. Tämän vuoksi osoitteita voi antaa myös relatiivisina, suhteessa joko palvelimen juureen tai linkittävän sivun sijaintiin palvelimella. Selain osaa täydentää aina osoitteen alusta puuttuvat osan vastaavalla osalla linkittävän sivun osoitetta.

Relatiivisilla linkeillä voi linkittää voi myös toisissa hakemistoissa oleviin sivuihin, esim. näin:

<a href="viikkopalautukset/viikko1.html">Relatiivinen osoite alihakemistoon</a>

Nykysivun hakemiston ylähakemistoon voi linkittää käyttämällä hakemistona kahta pistettä:

<a href="../index.html">Relatiivinen osoite ylähakemistoon</a>
<a href="/index.html">Sama osoite palvelimen juuresta asti ilmaistuna</a>

Yleensäottaen tietokantasovelluksessa kannattaa käyttää relatiivisia osoitteita, sillä silloin sovellus toimii vaikka se siirrettäisiin eri palvelimelle eri nimiseen hakemistoon.

CSS, sivujen tyylittely ja Boostrap

Tehdään sivusta vähän nätimpi CSS:llä. Lataa twitterin mainio Bootstrap-kirjasto ja pura paketin sisältä dist kansion sisältö projektisi juureen tai Javalla web-kansioon. Tarkoituksena on, että bootstrapin css, fonts ja js-kansiot sijoittuvat seuraavasti:

Kansiorakenteesta tulee suurinpiirtein seuraavanlainen

css/
fonts/
index.php
js/
html-demo/

Kansiorakenteesta tulee suurinpiirtein seuraavanlainen

src/
web/
  css/
  fonts/
  html-demo/
  js/
  index.jps

Tämän jälkeen luo css-kansioon vielä oma tyylitiedostosi main.css. (NetBeansillä tyylitiedoston luonti löytyy kategoriasta Other nimellä Cascading Style Sheet). Tähän tiedostoon voit sijoittaa omat projektikohtaiset tyylimääritelmäsi. Tiedostoon ei tarvitse laittaa vielä mitään.

Lisätään CSS-tiedostoihin linkit laittamalla HTML-tiedoston head-tägin sisään ja katso miten CSS muuttaa sivun ulkoasua hieman.

<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/bootstrap-theme.css" rel="stylesheet">
<link href="../css/main.css" rel="stylesheet">

Pidä mielessä!

Yllä oleva määritelmä hakee CSS-tiedostot luomasi html-demo-kansion yläkansiossa olevasta css-kansiosta.

Mikäli sivusi eivät näytä oikein tyylitellyiltä johtuu se todennäköisesti siitä, että CSS-tiedostoja haetaan väärästä paikasta. Tarkista että linkit osoittavat sinne, missä tiedostot oikeasti ovat.

Bootstrap-esimerkkejä

Nyt voimme käyttää Bootstrapin kirjastoja erilaisten käyttöliittymäkomponenttien luomiseen. Alla esimerkkejä. Lisää Bootstrap-esimerkkejä voi katsoa Bootstrapin sivujen CSS- ja Components-osioista.

Käyttämällä luokkia nav ja nav-tabs saadaan tavallinen ul-elementti toimimaan tabinavigaationa.

Esimerkin lähdekoodi:

<body>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Kissalista</a></li>
    <li><a href="#">Kissarodut</a></li>
    <li><a href="#">Palveluskunta</a></li>
  </ul>
  <div class="container">
    <h1>Koe</h1>
    <ul>
      <li>Aivan</li>
      <li>normaali</li>
      <li>lista</li>
    </ul>
  </div>
</body>

Luokilla row ja col-md-<leveys> varustetuilla div-elementeillä on mahdollista laittaa käyttöliittymäelementtejä helposti vierekkäin. Bonuksena elementit limittyvät päällekkäisiksi jos sivulta loppuu tila. Bootstrapin Grid-järjestelmästä lisää täältä.

Huomaam myös kätevä panel-luokka, jolla saa helposti aikaan nättejä laatikoita.

Esimerkin lähdekoodi:

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <h2>Navigaatio</h2>
        <div class="panel panel-default">
          <ul class="nav">
            <li class="active"><a href="#">Kissalista</a></li>
            <li><a href="#">Kissarodut</a></li>
            <li><a href="#">Palveluskunta</a></li>
          </ul>
        </div>
      </div>
      <div class="col-md-6">
        <h1>Sisältö</h1>
        <p>
          Lorem ipsum...
        </p>
      </div>
    </div>
  </div>
</body>

Useimmat listaukset kannattaa tehdä HTML-taulukoilla. Bootstrapissa on hyvät oletustyylit tätä varten luokilla table ja table-striped. Muitakin käteviä tyylejä löytyy.

Listauksessa on myös käytetty hyväksi Bootstrapin tukea napeille ja Glyphicon-kuvakkeille.

Esimerkin lähdekoodi:

<body>
  <div class="container">
    <h1>Lista-esimerkki</h1>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>Kissan nimi</th>
          <th>Rotu</th>
          <th>Viimeksi ruokittu</th>
          <th>Ruoki</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Jaana</td>
          <td>Siamilainen</td>
          <td>13:43</td>
          <td><button type="button" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-cutlery"></span> Ruoki kissa</button></td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Persialainen</td>
          <td>10:23</td>
          <td><button type="button" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-cutlery"></span> Ruoki kissa</button></td>
        </tr>
        <tr>
          <td>3</td>
          <td>Liila</td>
          <td>Juustopurilaisennoutaja</td>
          <td>18:01</td>
          <td><button type="button" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-cutlery"></span> Ruoki kissa</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

Bootstrap tukee lomakkeiden tyylittelyyn samankaltaisia rivi- ja sarakeluokkia kuin yleiseen asetteluunkin. Myös monia muita tapoja tyylitellä lomakkeita löytyy.

Esimerkin lähdekoodi:

<body>
  <div class="container">
    <h1>Lomake-esimerkki</h1>
    <form class="form-horizontal" role="form" action="lomake.html" method="POST">
      <div class="form-group">
        <label for="inputEmail1" class="col-md-2 control-label">Sähköposti</label>
        <div class="col-md-10">
          <input type="email" class="form-control" id="inputEmail1" name="email" placeholder="Email">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword1" class="col-md-2 control-label">Salasana</label>
        <div class="col-md-10">
          <input type="password" class="form-control" id="inputPassword1" name="password" placeholder="Password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Muista kirjautuminen
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
          <button type="submit" class="btn btn-default">Kirjaudu sisään</button>
        </div>
      </div>
    </form>
  </div>
</body>

Nämä esimerkit ovat tietenkin vielä melko harmaita. Kannattaa tutustua CSS-kieleen ja laittaa omaan tyylitiedostoon määrittelyjä, jotka tekevät asioista värikkäämpiä. Voit halutessasi tutustua myös näiden ohjeiden lähdekoodiin.

Tee nyt näitä ohjeita ja esimerkkejä mukaillen itsellesi kokonaiset demosivut, joissa jokaisella sivulla on käytetty samaa yleistä ulkoasua. Tekeminen kannattaa aloittaa yleisestä sivunavigaatiosta ja valita joku päätietokohde johon liittyvät sivut tekee valmiiksi ensin. Tästä saadun kokemuksen pohjalta muut sivut on helpompi tehdä valmiiksi.

Vinkkejä

Kannattaa varmistaa, että jokainen aloitettu HTML-tägi myös lopetetaan jossain:

<nav>Navigaatio</nav>
<div>Sisältöä</div>

Jos näin ei tee, joutuvat tägit toistensa sisään ja aikaansaavat mystisiä bugeja. Jotkin tägeistä ovat sellaisia että ne suljetaan samantien, niille ei tarvitse tehdä erillistä sulkutägiä. Näistä käytetään nimitystä tyhjät tägit (engl. void tags). Esimerkiksi <input> toimii näin:

<input type="text" name="username">

Muita vastaavia tägejä ovat mm. <br>, <hr>, <link>, <meta> ja <img>.

Linkkejä

Seuraavaksi:

Kun olet suunnitellut mielestäsi toimivan käyttöliittymän, suunnittele työllesi tietokanta ja dokumentoi se.