Storybook

Sorakuilu

Harjoituksen osat

Tunti 1. Toimeksianto ja storybook-sovelluksen esitutkimus
Tunti 2. Suunnittele storybook
Tunti 3. Toteuta tietokanta
Tunti 4. Toteuta käyttöliittymä
Tunti 5. Laadi runko ja reititys järjestelmään
Tunti 6. Toteuta lukijan etusivu (tietojen haku lukijan näkymässä)
Tunti 7. Toteuta rekisteröityminen(tietojen lisäys lukijan näkymässä)
Tunti 8. Toteuta autentikointi (kirjaudu ja kirjaudu ulos)
Tunti 9. Toteuta ylläpidon etusivu (tietojen haku)
Tunti 10.Toteuta jutun lisäys ylläpitonäkymässä, tietojen tarkistus mukaan
Tunti 11.Toteuta jutun muokkaus ylläpitonäkymässä, tietojen tarkistus mukaan
Tunti 12.Toteuta jutun poistaminen ylläpitonäkymässä
Omat tehtävät: suunnittele ja toteuta admin-näkymän yhden jutun näyttäminen (linkki on jo olemassa), omien tietojen muokkaaminen sekä salasanan vaihtaminen (piirrä lisäksi kaaviot)


Tunti 4. Toteuta käyttöliittymä

Tämän tunnin tehtävät

Toteuta ensin html ja css (sivu.css) lukijan sivulle. Validoi peruskoodit.

Erota head.php ja end.php sekä admin_head.php ja admin_end.php ja tallenna ne ./views/partials-kansioon.

Tallenna style.css kansioon ./public/css/.

Toteuta sivun ulkoasu HTML5-tiedostona

Aluksi luodaan pelkkkä validi html-sivu css-tiedostoineen.

Kun sivu on valmis, validoitu ja testattu, jaetaan se sopiviin osiin. Tässä esimerkissä se on jaettu varsinaiseen sisältöön ja siihen sisällytettäviin html-alkuosaan sekä html-loppuosaan:

./views/partials/head.php

Yläosa, johon tulee head-elementti tietoineen sekä body-elementin aloittava tag.

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vieraskirja</title>

<meta name="keywords" content="sivukoe, CSS3, HTML5">
<meta name="author" content="Leena Järvenkylä-Niemi">
<meta name="description" content="Vieraskirja">
<link rel="stylesheet" type="text/css" href="<?= "/public/css/style.css" ?>">
</head>
<body>
<header>

<div id="kotisivulinkki">
<a class="kotilinkki" href="/">Vieraskirja</a>
</div>

<nav>
<a class="navilinkki" href="/register/">rekisteröidy</a>
<a class="navilinkki" href="/login/">kirjaudu</a>
</nav>

</header><!--ylaosa loppuu-->

<div id="keskiosa">
<div id="teksti">

./views/partials/admin_head.php

Autentikoituneen käyttäjän yläosa, johon tulee head-elementti tietoineen sekä body-elementin aloittava tag.

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vieraskirja</title>

<meta name="keywords" content="sivukoe, CSS3, HTML5">
<meta name="author" content="Leena Järvenkylä-Niemi">
<meta name="description" content="Vieraskirja">
<link rel="stylesheet" type="text/css" href="<?= "/public/css/style.css" ?>">
</head>
<body>
<header>

<div id="kotisivulinkki">
<a class="kotilinkki" href="/admin/">vieraskirja - ylläpito</a>
</div>

<nav>
<a class="navilinkki" href="/addstory/">lisää juttu</a>
<a class="navilinkki" href="/edituser/<?= $user->getId();?>">muokkaa omia tietoja</a>
<a class="navilinkki" href="/editpassword/<?= $user->getId() ?>">vaihda salasana</a>
<a class="navilinkki" href="/logout/">kirjaudu ulos</a>
</nav>

</header><!--ylaosa loppuu-->

<div id="keskiosa">
<div id="teksti">

./views/partials/end.php

Lukijan alaosa, johon tulee html:_n lopettavat tagit.

<!-- Sisältö loppuu-->
</div>
</div><!--keskiosa loppuu-->

<footer>

</footer><!--alaosa loppuu-->
</body>
</html>

./views/partials/admin_end.php

Autentikoituneen käyttäjän alaosa, johon tulee html:_n lopettavat tagit.

<!-- Sisältö loppuu-->
</div>
</div><!--keskiosa loppuu-->

<footer>

</footer><!--alaosa loppuu-->
</body>
</html>

css-kansio ja style.css

Käyttöliittymän kuva ./public/css/images/kuva01.jpg

Tallenna seuraava kuva ./public/css-kansion sisään alikansioon images nimellä kuva01.jpg.
kuva ylä- ja alaosaan

css:n ja html:n rakennetta esittää seuraava kuva:
ulkoasun rakenne

./public/css/style.css

body
{
background-image:url('./images/kuva01.jpg');
background-repeat:repeat-x;
background-color:#ffffff;
border:0;
padding:0;
margin:0;
text-align:center;
}

/* tekstialueet*/
header{
height:110px;
width:80%;
}

#keskiosa {
min-height:600px;
width:80%;
margin: 15px auto;
text-align:left;
}

footer{
background-image:url('./images/kuva01.jpg');
background-repeat:repeat-x;
height:80px;
width:100%;
}

#kotisivulinkki {
font-family:"Times New Roman",Times;
color:#ffffff;
position:absolute;
top:20px;
left:10%;
}

nav {
font-family:"Times New Roman",Times;
color:#ffffff;
width:500px;
position:absolute;
top:70px;
right:10%;
}

#teksti {
font-family:tahoma,arial,verdana;
color:#000000;
}

article {
margin-top:15px;
margin-bottom:15px;
}
/* tekstit ****************************/
h1 {
font-family:"Times New Roman",Times;
letter-spacing:-1px;
font-size:1.3em;
margin-bottom:3px;
}

h2 {
font-size:0.8em;
font-style:italic;
font-weight:lighter;
margin-top:3px;
}

p {
margin-left:15px; 
font-size:0.9em;
}

/* kaikki linkit (linkki kotisivulle, navigointilinkit ja tekstissä olevat linkit*/

a.kotilinkki{
font-size:3.0em;
letter-spacing:-1px;
text-decoration:none;
color:#ffffff;
}

a:active.kotilinkki {
color:#000066;
}

a:hover.kotilinkki {
color:#000066;
}

a.navilinkki {
font-size:1.1em;
letter-spacing:-1px;
text-decoration:none;
border-bottom:4px solid #000066;
margin-left:10px;
margin-right:10px;
color:#ffffff;
}

a:active.navilinkki {
color:#000066;
}

a:hover.navilinkki {
color:#000066;
}


>> Tunti 5. Laadi runko järjestelmään >>