38
EGILEA: Jon Vicente

Agenda digitala

Embed Size (px)

DESCRIPTION

Informatika tolosaldea Agenda digital bat kudeatzeko Web-aplikazioa Web-aplikazioen ezarpena

Citation preview

EGILEA: Jon Vicente

Web Aplikazioak (Proiektua)

2

0. ATALA – Sarrera ........................................................................................................................ 3

1. ATALA – Planifikazioa ............................................................................................................... 4

1.1.- Aurreikusten diren pausoak .............................................................................................. 5

2. ATALA – Egindakoaren azalpena .............................................................................................. 6

2.1.- Datu basea sortu ............................................................................................................... 6

2.2.- Sarrera orria sortu ............................................................................................................. 7

2.3.- Orri nagusia sortu .............................................................................................................. 8

2.4.- Datuak aldatu edo ezabatzeko atala sortu ...................................................................... 9

2.5.- Datuak aldatu edo ezabatzeko (exekuzioa) .................................................................... 10

2.6.- Datu berriak sartzeko atala sortu.................................................................................... 11

2.7.- Kontsultak egiteko atala sortu ........................................................................................ 12

2.8.- Orriei estiloa eman CSS erabiliz ...................................................................................... 13

3. ATALA – Aurkitutako arazoak ................................................................................................ 14

3.1.- Ezagutza falta .................................................................................................................. 14

3.2.- Taulan hutsunea .............................................................................................................. 14

3.3.- Aldatu/Ezabatu atalean arazoa ....................................................................................... 15

4. ATALA – Funtzionamendu gida .............................................................................................. 16

4.1.- Hasiera orria .................................................................................................................... 16

4.2.- Agendaren orria .............................................................................................................. 16

4.3.- Ekitaldiak aldatu .............................................................................................................. 17

4.4.- Ekitaldiak ezabatu ........................................................................................................... 18

4.5.- Ekitaldiak sortu ................................................................................................................ 19

4.6.- Kontsultak egin................................................................................................................ 20

5.- ERANSKINA – Kodeak ............................................................................................................ 21

6.- ATALA – Ondorioak ............................................................................................................... 38

7.- ATALA – Bibiliografia ............................................................................................................. 38

AURKIBIDEA

Web Aplikazioak (Proiektua)

3

Web Aplikazioak ikasgaian, HTML, PHP eta MySQL lengoaiak erabiliz, nahi izan den proiektu bat egin behar izan dugu. Dokumentazio honek, proiektua nola gauzatu denaren informazioa biltzen du.

Dokumentazioak biltzen dituen atalak, honako hauek dira: 1.- Planifikazioa: proiektuarekin hasi baino lehen egindako zirriborroa.

Proiektua zeri buruz egin nahi nuen, zein ezaugarri edukiko zituen, zein pauso eman behar ziren aurreikusiz, etab. biltzen zituen “papera”.

2.- Egindakoaren azalpena: planifikazioan finkatutako helburua lortzeko

jarraitutako pausoak edo prozedura. 3.- Aurkitutako arazoak: proiektua gauzatzen ari nintzelarik aurkitu nituen

arazorik nagusienak eta zein konponbide eman nien. 4.- Funtzionamendu gida: sortutako aplikazioak, nola funtzionatzen duen; zein

erabilera duen eta honen ezaugarri aipagarriak... 5.- Kodeak: sortutako HTML, PHP eta CSS fitxategien kode guztiak. 7.- Ondorioak: proiektua egin ondoren, iritzi pertsonala.

6.- Bibliografiak: proiektua gauzatu ahal izateko informazioa nondik lortu

dudan.

0. ATALA – Sarrera

Web Aplikazioak (Proiektua)

4

Edukitako lehen ideia, agenda bat egitea izan da. Bertan, datuak agertuko dira, eta horiek aldatu edo ezabatu nahiko balitz, hori egiteko aukera emango duena.

Bestetik, agendan datu berriak sartzeko eta datu horiekin kontsultak egiteko atalak ideiatu dira.

Hori dena ideia bezala edukita, lehenengo pausua koadernoko orri bat hartu, eta ondorengo irudian agertzen den eskema egitea izan da; proiektua nola aurreikusten denaren eskema bat.

OHARRA: Esan beharra dago, egin nahi den gauza eta azkenean lortuko dena, ezberdinak izango direla segur aski. Beraz, dokumentazioaren ‘emaniko pausoak’ atalean egin ditudan aldaketak azalduko ditut.

1. ATALA – Planifikazioa

Web Aplikazioak (Proiektua)

5

Proiektua gauzatzeko, pauso batzuk jarraitu beharko dira. Hortaz, lana egiteko garaian

galduta ez ibiltzearren, jarraitu beharko diren pausoen planifikazio bat egin da.

Pausoak honako hauek izango lirateke:

1.- Datu basea sortzea: Lehenbiziko pausoa, datu guztiak jasoko dituen datu basea sortzea izango da. Bertan,

ekintzei buruzko informazioa bilduko da. Datu baseak taula bakarrekoa izango da, eta WorkBench programarekin egingo da.

2.- Orri nagusia sortzea: Agenda web guneko orri nagusia (index.html) sortzea izango da hurrengo pausoa.

Honek, web gunea zertaz dioanaren informazioa bilduko du, eta ‘agenda.php’ programarako esteka bat edukiko du.

3.- Agenda programa egitea: PHP eta MySQL erabiliz, datu baseko datuak taula batean pantailaratzen dituen

programa/orria sortzea. Hau lortzeko, SELECT * FROM taula erabiliko dudala badakit, baino PHP-n nola inplementatu ez dakit; beraz informazioa bilatu beharko dut.

4.- Ekintzak sortu, aldatu eta ezabatzeko atalak sortzea: Datu baseko datuak pantailaratzea lortzen denean, ekintza berriak sortu, ekintzak

aldatzeko edota hauek ezabatzeko aukera emango dituen programak sortzea izango da egingo dena. Horiek, MySQL-ko INSERT INTO, UPDATE eta DELETE aginduak edukiko direla aurreikusi daiteke.

5.- Kontsultak egiteko atala sortzea: Aurreko guztia egin eta ondo funtzionatzen duela frogatu eta gero, kontsultak egiteko

atala sortuko da. Honek, ekintzak dauden egunak listatuko ditu, eta horietako bat aukeratzean, egun horretako ekintzak soilik pantailaratuko dira. SELECT * FROM taula WHERE data=auketatutako_data erabiliz.

6.- Estiloa ematea: Agendaren web gunea guztiz bukatuta dudanean, web orriei estilo ikusgarriagoa

ematen saiatuko naiz, CSS edo CSS3 lengoaiak erabiliz. Hauek dira proiektua hasi baino lehen aurreikusten diren pausoak. Segur aski, pauso

batzuk diferenteak izango direla, baino lehen esan bezala, galduta ez ibiltzearren, pausoak ideiatzea ondo egoten da.

1.1.- Aurreikusten diren pausoak

Web Aplikazioak (Proiektua)

6

Atal honetan, proiektua nola gauzatu den azalduko da pausoz pausu. Horiek,

zenbakituta joango dira, egin diren ordenaren arabera:

Lehenik eta behin egindako pausoa, zerbitzarian datu base bat sortzea izan da MySQL

Workbench programa erabiliz. Honen helburua, datu base honetako datuak sortuko den web orrian azaltzea izango da; eta ondoren, PHP erabiliz datu base honetan datuak ezabatu, aldatu, berriak sortu edota kontsultatzeko aukera emateko.

Datu basea, taula batekoa izango da; ekitaldien informazioa (datuak) jasoko dituena.

Ezkerreko irudian ikusten diren datuak egongo dira datu basean, taulari ‘datuak’ izena ipini zaio, eta ekitaldi bakoitzak zein datu edukiko dituen:

Id, eguna, ordua, herria, tokia eta deskribapena.

Datu guztiek, datu mota bat edukiko dute; testua, zenbakia, data… izan daitezke. Kasu honetan, datu baseko datuen motak, ondorengo irudian ikusi daitezke:

ID (zenbakia): ekitaldi bakoitzaren zenbakia, ezin du hutsa egon, gako nagusia da (ezin da errepikatu) eta ekitaldi berri bat sortzean, zenbaki bat emango zaio automatikoki (AutoIncrement aukera).

Eguna (data): ekitaldia zein egunetan izango den.

Ordua (time): zein ordutan izango den ekitaldi bakoitza.

Herria (testua): ekitaldia zein herritan izango den (gehienez 30 karaktere).

Tokia (testua): zein gunetan izango den (gehienez 70 karaktere).

Deskribapena (testua): ekitaldiaren deskribapena (150 karaktere gehienez).

Eta hau izango da web orriak erabiliko duen datu basea. Hau sortu ondoren, MySQL Workbench erabiliz ere, datu base honetan datu gutxi batzuk sartu dira horiekin lan egiten ahal izateko.

2. ATALA – Egindakoaren azalpena

2.1.- Datu basea sortu

Web Aplikazioak (Proiektua)

7

Datu baseko datuak, taula batean pantailaratu nahi dira; baino ustez, web gunearen orri nagusian taula bat aurkitzea oso “itxusia” izango litzatekeelako, sarrera moduko orri bat sortzea erabaki da.

Orri honek, ‘HASIERA’ titulua edukiko du, orriaren deskribapen labur bat, eta

agendara (agenda.php) dioan esteka bat irudi moduan. Horretarako, HTML kodea erabili da soilik. Ondorengo irudian ikusten da sortutako hasierako orria:

OHARRA: Ikusten den bezala, orri sinple bat da estilorik ez duena eta oraindik

eraldatzeko dagoena; baino hasieran web gunea ondo funtzionatzea nahi da, eta ondoren jarriko zaizkio koloreak eta abar.

Irudian ikusi daitekeen bezala, titulua, deskribapen labur bat, irudi bat ipini

dira; azken hau agenda.php-rako esteka delarik. Idatzitako kodea, ez da hemen ipiniko, atal honetan jarraitutako prozedura

soilik azalduko delako. Kodeak ikusteko, ‘KODEAK’ atalera jo behar da; bertan daudelako kode guztiak komentarioekin eta guzti.

Hortaz, hau izango da sarrera web orria (index.html). Ondorengo pausoa,

logikoa den bezala, datuak pantailaratuko dituen programa sortzea izango da: agenda.php.

2.2.- Sarrera orria sortu

Web Aplikazioak (Proiektua)

8

Sortuko den programa honek, lehen sortutako datu baseko datuak pantailaratuko ditu taula batean. Hori lortzeko, PHP programak HTML formatuko web orri bat sortu beharko duela adierazi beharko zaio; SQL bidez lortutako datuak erabiltzen dituelarik.

Hori egiteko ezagutza faltagatik, interneten tutorial bat bilatu behar izan zen, eta hori

irakurri eta ulertu ondoren, lanean jarri. Bestetik, atal honetan ere kodea ez da ipiniko; kode guztiak dokumentazioaren amaieran ipiniko direlako.

Goiko irudian ikusi daiteke, agenda.php zer ikustarazten duen nabigatzailean. Datu baseko datuak taula batean agertzeko diseinatu da; pasa diren ekitaldiak gorriz jarriz, egun berekoak berdez, eta gainontzekoak zuriz jarriz.

Ekitaldi bakoitzari, radio button bat ipini zaie alboan, bakoitzaren ‘value’ atributuan

ekitaldiaren id-a dutelarik. Hauetako bat aukeratzean eta ‘Aldatu/Ezabatu’ botoiari ematean, erregistro horretako balioak aldatzeko edo ezabatzeko aukera emateko.

Bestetik, ekitaldi berri bat sortzeko botoia ipini da; taulan erregistro berriak sartu ahal

izateko aukera ematen duen atala. Eta ikusten den bezala, ‘Aldatu/Ezabatu’ botoia ere ipini da. Bi botoi hauek, aldatuezabatu.php edo berria.php-ra bideratzen dira.

Esatekoa da ere, taula osoa inprimaki bat dela, eta aukeratutako ekintzaren id-aren

(botoia) balioa aldatuezabatu.php programari bidaliko zaiola. * OHARRA: Hasiera batean, aldatzeko botoi bat eta ezabatzeko beste botoi bat jarri

zen; baino formulario batek bi PHP-tara deitzea ez zenez posible, aldatu eta ezabatzeko aukerak atal bakarrean egitea erabaki zen.

Hau egina dagoelarik, ondorengo pausoak, aldatuezabatu.php eta berria.php

programak sortzea izango da. Bakoitzak bere funtzioa betetzen duelarik.

2.3.- Orri nagusia sortu

Web Aplikazioak (Proiektua)

9

Sortuko den atal honetan, checkbox bat agertuko da, eta ondoren, aukeratutako ekitaldiaren datuak aldatzeko inprimaki bat. Checkbox-a aukeratuta badago, ekitaldi hori ezabatuko da; eta aukeratu gabe badago, inprimakian sartutako balioekin eguneratuko dira ekitaldi horretako datuak.

Hau hobeto ulertzeko, irudi bat ipini da:

Ezkerreko irudian aldatu eta ezabatze-ko aukerak ematen dituen web orria agertzen da. Programa honek, agenda.php atalean aukeratutako ekital-diaren id-a jakingo du; agenda.php-ko taula inprimaki bat delako. Beraz, checkbox-a aukeratzen badugu, ‘Bidali’ botoiari ematean, id hori duen ekitaldia eza-batuko du.

Eta checkbox-a aukeratuta ez badago, honen ondoren ikusi daitekeen inprimakian sartutako balioekin eguneratuko du ekitaldi horren datuak.

Bestetik, aukeratutako ekitaldiaren datuak, aurredefinituta ikusi daitezke; horiek

jartzeko arrazoia, datuak aldatzeko garaian erraztasuna ematea da. Hau egiteko, id horretako datuak kontsulta bat eginez lortu dira, eta ondoren balioak ‘input’ ataletan ipini dira.

* Honen kodea ere dokumentazioaren amaieran dago, komentarioak eta guzti

dituelarik. Azkenik, programa hau exekutatzeko beste programa sortu behar izan da

exekutatu.php izenekoa. Hau ‘bidali’ botoiari ematean exekutatuko da Aldatu/Ezabatu atalean sartutako balioen arabera.

2.4.- Datuak aldatu edo ezabatzeko atala sortu

Web Aplikazioak (Proiektua)

10

Ekitaldi bat ezabatzean edo aldatzean, ezabatu edo aldatu duen mezua eta

agendarako esteka bat duen orria agertzea ondo egongo legokeela aurreikusi da, eta hala egin da:

Ekitaldia aldatu denaren mezua. Irudia, agenda.php-ra itzultzeko esteka bat da.

Ekitaldia ezabatu denaren mezua. Irudia, agenda.php-ra itzultzeko esteka bat da.

Bi orri horiek, aldatuezabatu.php programako checkbox-aren araberakoa izango da; aukeratuta baldin badago, ‘Ezabatu’ orria agertuko da; eta aukeratu gabe badago, ‘Aldatu’ orria agertuko da. Hori lortzeko, if bat ipini behar izan zaio exekutatu.php-ri.

2.4.- Exekutatu.php sortu 2.5.- Datuak aldatu edo ezabatzeko (exekuzioa)

Web Aplikazioak (Proiektua)

11

Agenda.php sortu denean, ekitaldi berri bat sortzeko botoia ipini zaio; botoi hori,

berria.php-rako esteka bat dela adierazi zaio. Beraz, berria.php programa sortzea izan da gauzatu den hurrengo pausoa.

Programa honek, inprimaki sinple bat pantailaratuko du orri batean. Eta ondoren,

‘Bidali’ botoiari ematean, datu basean erregistro berri bat sartuko du sartutako balioekin (beste programa bat exekutatuz).

Ikusten den bezala, Aldatu/Ezabatu atalaren antza asko dauka, baino ezberdintasuna da, honek ez duela ekitaldia ezabatzeko aukerarik, eta bidali ematean, ez dela exekutatu.php ejekutatzen. Bidali botoiari ematean, sortu.php programa exekutatuko da. Programa honek, inprimakian sartutako balioak gure datu basean sartuko ditu. Datuak sartzen dituenean, mezu bat agertzeko konfiguratu da.

Ondoko irudian agertzen da bidali ematerakoan exekutatzen den sortu.php programak pantailaratzen duena. Agendara itzultzeko, esteka bat ipini da irudi moduan. Irudian ikusi daitekeen bezala.

2.6.- Datu berriak sartzeko atala sortu

Web Aplikazioak (Proiektua)

12

Proiektua egiteko garaian, kontsultak egiteko atal bat ideiatu da; honek, egun desberdin guztiak listatuko ditu aukeraketa lauki batean. Eta ondoren, aukeratutakoaren arabera, egun horretako ekitaldiak soilik pantailaratuko dira.

Goiko irudian ikus daiteke egin dena; aukeraketa laukian, ekitaldien datak azaltzen dira. Horietako bat errepikatuta badago, behin agertuko da soilik; txukunago egoteko.

Data horietako bat aukeratzean, eta ‘Bidali’ botoiari ematerakoan, konsulta.php

programa exekutatuko da. Honek, dataren arabera kontsulta bat egingo du datu basean, eta data hori duten ekitaldien datuak pantailaratuko ditu soilik.

Adibidea (2014-03-01 aukeratu dudalarik):

Erakusten duen orria, agenda.php-ren berdina izango da; baino kasu honetan, ezingo

dira kontsultak egin, eta ekitaldi berriak egiteko aukera eman beharrean, agendara itzultzeko botoi bat ipini zaio.

* Berriro argitu behar da, kodeak ez direla hemen ipiniko, eta kodeen atalean ipiniko

direla sortutako fitxategien kode guztiak. Bestela, hemen jarriko balira, dokumentazioa oso luzea izango litzatekeelako.

2.7.- Kontsultak egiteko atala sortu

Web Aplikazioak (Proiektua)

13

Dena bukatu denean eta ondo funtzionatzen duenean, orriei estiloa ematea izan da

azkeneko pausoa. Hala web gunea ikusgarriagoa egongo da eta gune eratuagoa izango da. Hori egiteko CSS erabili da, eta estiloak HTML eta PHP kodeetan jarri beharrean, estilo

guztiak fitxategi bakarrean ipini dira. Estiloekin eta koloreekin jokatu ondoren, web gunea ondorengo irudietan bezala

geratu da: Goiko irudian sarrerako orria ikusi daiteke. Lehenagoko irudiekin alderatuz, txukunago

eta ikusgarriagoa dagoela antzeman daiteke. Irudi honetan, agenda ikusten da. Orriko estilo guztiak (taularen ertzak, koloreak,

etab.) CSS bidez eginda daude.

2.8.- Orriei estiloa eman CSS erabiliz

Web Aplikazioak (Proiektua)

14

Praktika gauzatzean, hainbat arazo sortu dira. Atal honetan, arazo horiek eta eman

zaien soluzioa azalduko dira.

Proiektuarekin hastean, HTML, PHP eta MySQL lengoaiak ezagunak ziren, baino ez nola inplementatu MySQL PHP-ri. Horregatik, proiektua gauzatu ahal izateko hori egiten jakin behar zenez, arazoa sortu zen.

Beraz, interneten informazioa bilatzea izan zen emaniko konponbidea. Hainbat

tutorial irakurri eta aztertu ondoren, eta irakurritakoa ondo ulertu ondoren, praktika egiteari ekin zitzaion.

Agenda.php-ko taulan, datu baseko erregistro bakoitzeko errenkada bat sortzen da. Lehenenik egin zen bertsioan, taulan datu baseko datuak pantailaratzen ziren, baino honen amaieran lerro huts bat agertzen zen; irudian ikusten den bezala:

Hori gertatzen zen, datu basean beti dagoelako azken lerro bat, balio guztiak “null”

direnak, eta horregatik, lerro kopurua kalkulatzean, hori ere kontatu egiten zuen. Arazo honi emandako konponbidea, agenda.php-n datu baseko lerro kopuruari -1

egitea izan zen; eta hala, lerro kopurua bat gutxiago izango da eta lerro huts hori ez da gehiagotan agertuko.

3. ATALA – Aurkitutako arazoak

3.1.- Ezagutza falta

3.2.- Taulan hutsunea

Web Aplikazioak (Proiektua)

15

Ekitaldi bat aukeratzean, eta Aldatu/Ezabatu botoiari ematean, aukeratutako id-aren

araberako inprimaki bat sortuko da; baino ez bada ekitaldirik aukeratzen, ondorengo irudian bezala agertzen zen aldatu/ezabatu atala:

Irudian ikusten den bezala, pantailaratzen duena ez da ekitaldi bat aldatzeko atal “txukun” bat. Horregatik, aldatueza-batu.php-n baldintza bat ipini zitzaion. Aukeratutako id-a nuloa bada, hau da, agendan ekitaldirik ez bada aukeratu (id=””), mezu bat agertuko da ekitaldi bat aukera-tzeko esanez.

Konponbide hori eman

ondoren, eta ekitaldi bat aukeratu gabe Aldatu-Ezabatu botoiari ematean, ondoko irudian agertzen den mezua pantailaratuko da:

Ikusten den bezala, lehen

baino txukunagoa geratzen da.

3.3.- Aldatu/Ezabatu atalean arazoa

Web Aplikazioak (Proiektua)

16

Atal honetan, HTML, PHP eta MySLQ lengoaiak erabiliz sortu den agendaren

funtzionamendu gida azalduko da. Ekitaldiak nola sortu, ezabatu, aldatu eta kontsultatu egiten diren esplikatuko da.

Hasiera orriak, ez du inongo ezaugarri berezirik; orriaren informazioa ematen du, eta

agenda ikusteko, orrian agertzen den irudiari click egin behar zaio:

Hasiera orrian irudian click egitean, datu baseko datuak pantailaratzen dituen taula bat

agertuko da, eta hiru atal desberdin ikusi daitezke:

1.- Kontsultak egiteko atala. 2.- Datuak ikusten di-ren taula. 3.- Akzio botoiak, datu-ak aldatu…

4. ATALA – Funtzionamendu gida

4.1.- Hasiera orria

4.2.- Agendaren orria

Web Aplikazioak (Proiektua)

17

Taulan agertzen diren ekitaldiak aldatu nahiko balira, ondorengo pausoak jarraitu beharko lirateke:

Lehenik eta behin, aldatu nahi den ekitaldia aukeratuko da; goiko irudian agertzen den

bezala. Eta ondoren, ‘Aldatu/Ezabatu’ botoiari eman behar zaio.

Azkenik, datuak aldatu ondoren, ‘Bidali’ botoiari click egin eta aukeratutako ekitaldiaren datuak aldatu egingo dira inprimakian sartutakoekin.

4.3.- Ekitaldiak aldatu

Web Aplikazioak (Proiektua)

18

Taulan agertzen den ekitaldi bat ezabatzeko, ondorengo pausoak jarraitu behar dira:

Aldatzeko kasuan bezala, ekitaldia aukeratu, eta ondoren ‘Aldatu/Ezabatu’ botoiari

eman behar zaio.

Kasu honetan, datuak aldatu beharrean, irudian ikusten den aukera gaitu behar da, eta

ondoren ‘Bidali’ botoiari eman.

4.4.- Ekitaldiak ezabatu

Web Aplikazioak (Proiektua)

19

Agendan ekitaldi berri bat sartu nahi bada, ondorengo pausoak jarraitu behar dira:

Kasu honetan, agendaren beheko atalean agertzen den botoietatik, ‘Berria’ botoiari

egin behar zaio click. Azkenik, agertuko den inprimakian nahi diren datuak sartu eta ondoren ‘Bidali’

botoiari eman behar zaio. Hala, ekitaldi berria taulan agertuko da.

4.5.- Ekitaldiak sortu

Web Aplikazioak (Proiektua)

20

Taulan datu asko egongo baliza, zaila izango litzateke egun jakin bateko ekitaldiak aurkitzea; horregatik, egunaren arabera kontsultak egiteko aukera ematen da. Horretarako:

Aukeraketa laukian nahi den eguna aukeratu, eta ‘Bidali’ botoiean click egin behar da. Ondoren, agenda berbera agertuko da, baino aukeratutako eguneko ekitaldiak

agertuko dira soilik.

4.6.- Kontsultak egin

Web Aplikazioak (Proiektua)

21

Atal honetan, sortu diren fitxategi guztien kodeak ipiniko dira.

5.- ERANSKINA – Kodeak

Web Aplikazioak (Proiektua)

22

INDEX.HTML

<!DOCTYPE html>

<html lang="eu">

<head>

<title>Agenda - Hasiera</title>

<!-- Karaktereak utf-8 kodifikazioa dute -->

<meta charset="utf-8">

<!-- Orriaren estiloa css fitxategian -->

<link rel="stylesheet" href="estiloa.css">

</head>

<body>

<!-- Orriaren edukia div batean egongo da -->

<div id="edukia">

<!-- Titulua div batean egongo da -->

<div id="titulua">

AGENDA DIGITALA

</div>

<!-- Orriaren atal nagusia beste div batean dago -->

<div id="testua">

<h1>ONGI ETORRI!</h1>

<p>Web orri honetan agenda bat aurkituko duzu.

Bertan ekitaldi berriak sartzeko aukera izango

duzu; eta ondoren, horiek aldatzeko eta

ezabatzeko aukera ere izango duzu.</p>

<p>Sakatu irudian agendara joateko!</p>

<!-- Agendarako esteka irudi moduan -->

<a href="agenda.php"><img id="irudia"

src="irudiak/agenda.png" /></a>

</div>

</div>

</body>

</html>

Web Aplikazioak (Proiektua)

23

AGENDA.PHP (1) <!DOCTYPE html>

<html lang="eu">

<head>

<title>Agenda</title>

<!-- Karaktereak utf-8 kodifikazioa dute -->

<meta charset="utf-8">

<!-- Orriaren estiloa css fitxategian -->

<link rel="stylesheet" href="estiloa.css">

</head>

<body>

<!-- Orriaren edukia div batean egongo da -->

<div id="edukia">

<!-- Titulua div batean egongo da -->

<div id="titulua">

<a href="index.html">AGENDA DIGITALA</a>

</div>

<!-- Orriaren atal nagusia beste div batean dago -->

<div id="testua">

<!-- Egunaren araberako kontsulta egiteko -->

<form action="konsulta.php" method="post">

Eguna: <select name="eguna">

<!-- PHP atala -->

<?php

/* MySQL erabiliz konexioa eta kontsultak egiteko */

$konexioa = mysql_connect("localhost", "root", "mysql") or die("Ezin da datu basearekin konektatu");

mysql_select_db("agenda") or die("Ez da datu basea existitzen");

$egunak = mysql_query("SELECT DISTINCT eguna FROM datuak ORDER BY eguna", $konexioa);

$egunkopurua = mysql_num_rows ($egunak) -1;

/* Datu baseko egun bakoitzeko, option bat sortuko da */

for ($i=0; $i <= $egunkopurua; $i++)

{

$eguna = mysql_result($egunak, $i, "eguna");

echo '<option value="'.$eguna.'">'.$eguna.'</option>

';

}

?>

Web Aplikazioak (Proiektua)

24

AGENDA.PHP (2) <!-- PHP atalaren amaiera-->

</select>

<input type="submit" value="Bidali"/>

</form>

<!-- Ekitaldiak ezabatu eta aldatu ahal izateko, taula bat izango den inprimaki bat sortu da -->

<form action="aldatuezabatu.php" method="post">

<table id="taula">

<tr>

<th> B/E </th>

<th> Eguna </th>

<th> Ordua </th>

<th> Herria </th>

<th> Tokia </th>

<th> Deskribapena </th>

</tr>

<!-- PHP atala -->

<?php

/* MySQL erabiliz konexioa eta kontsultak egiteko */

$konexioa = mysql_connect("localhost", "root", "mysql") or die("Ezin da konektatu");

mysql_select_db("agenda") or die("Ez da datu basea existitzen");

$konsulta = mysql_query("SELECT * FROM datuak ORDER BY eguna, ordua", $konexioa);

$zutabekopurua = mysql_num_rows ($konsulta) -1;

/* Gaurko data aldagai batean gordeko da */

$gaurkodata = date("Y-m-d");

/* Datu baseko erregistro bakoitzeko ondorengo kodea exekutatzeko; begizta bat da */

for ($i=0; $i <= $zutabekopurua; $i++)

{

/* i-ren balio bakoitzeko, erregistroko balioak aldatzen joango dira. */

/* Ondorengo aldagaietan, datu baseko datuak gordeko dira */

$id = mysql_result($konsulta, $i, "id");

$eguna = mysql_result($konsulta, $i, "eguna");

$ordua = mysql_result($konsulta, $i, "ordua");

$herria = mysql_result($konsulta, $i, "herria");

$tokia = mysql_result($konsulta, $i, "tokia");

$deskribapena = mysql_result($konsulta, $i, "deskribapena");

/* Ondoren, baldintza bat sortzen da egunaren araberakoa */

Web Aplikazioak (Proiektua)

25

AGENDA.PHP (3) if ($gaurkodata == $eguna)

/* Gaurko data, ekitaldiaren dataren berdina bada, $data="gaurkoa" izango da */

{

$data = "gaurkoa";

}

elseif ($gaurkodata > $eguna)

/* Gaurko data handiagoa bada, $data="pasatakoa" izango da */

{

$data = "pasatakoa";

}

else

/* Gainontzeko baldintza guztietan, $data aldagaian "pendiente" gordeko da */

{

$data = "pendiente";

}

/* Azkenik, datu basetik ateratako datuekin taulari errenkadak erantsiko dizkio */

/* Dataren araberako baldintzatik ateratako balioa, "class" batean ipintzen da. */

echo '<!-- Datu basetik ateratako datuak dituen errenkada -->

<tr class="'.$data.'">

<td> <input type="radio" name="id" value="'.$id.'"> </td>

<td> '.$eguna.' </td>

<td> '.$ordua.' </td>

<td> '.$herria.' </td>

<td> '.$tokia.' </td>

<td> '.$deskribapena.' </td>

</tr>';} ?>

<!-- PHP atalaren amaiera-->

</table>

<!-- Azkenik, inprimakia amaitzen da eta botoi bat agertuko da ekitaldi berri bat sortzeko -->

<input type="submit" value="Aldatu/Ezabatu" />

<a href="berria.php"><button type="button"> Berria sortu </button></a>

</form>

</div>

</div>

</body>

</html>

Web Aplikazioak (Proiektua)

26

ALDATUEZABATU.PHP (1) <!DOCTYPE html>

<html lang="eu">

<head>

<title>Aldatu edo ezabatu</title>

<!-- Karaktereak utf-8 kodifikazioa dute -->

<meta charset="utf-8">

<!-- Orriaren estiloa css fitxategian -->

<link rel="stylesheet" href="estiloa.css">

</head>

<body>

<!-- Orriaren edukia div batean egongo da -->

<div id="edukia">

<!-- Titulua div batean egongo da -->

<div id="titulua">

<a href="index.html">AGENDA DIGITALA</a>

</div>

<!-- Orriaren atal nagusia beste div batean dago -->

<div id="testua">

<h1>Aldatu edo ezabatu</h1>

<!-- PHP atala -->

<?php

/* agenda.php-n aukertutako ekitaldiaren id-a aldagai moduan jartzeko */

$id = $_POST["id"];

/* MySQL erabiliz konexioa eta kontsultak egiteko */

$konexioa = mysql_connect("localhost", "root", "mysql") or die("Ezin da datu basearekin konektatu");

mysql_select_db("agenda") or die("Ez da datu basea existitzen");

$konsulta = mysql_query("SELECT * FROM datuak WHERE id=$id", $konexioa);

$balioak = mysql_fetch_array($konsulta);

/* Kontsultetatik ateratako balioak aldagaietan sartzeko */

$eguna = $balioak["eguna"];

$ordua = $balioak["ordua"];

$herria = $balioak["herria"];

$tokia = $balioak["tokia"];

$deskribapena = $balioak["deskribapena"];

/* agenda.php-n ekitaldirik ez badugu aukeratu hurrengoa pantailaratuko da */

Web Aplikazioak (Proiektua)

27

ALDATUEZABATU.PHP (2) if ($id == "")

{

echo '<p>Aukeratu ezazu ekitaldiren bat hau aldatu edo ezabatu ahal izateko</p> <br />

<a href="agenda.php"><button type="button"> Itzuli agendara </button></a> <br /> <br />

';

}

/* Eta agenda.php-n ekitaldi bat aukeratu badugu hurrengoa pantailaratuko da */

else

{

echo 'Atal honetan, aukeratutako ekitaldia aldatzeko edo ezabatzeko aukera edukiko duzu. <br />

<!-- Inprimaki bat sortzen da, datu basetik ateratako datuak balio lehenetsi bezala

agertzen direlarik -->

<form action="exekutatu.php" method="post">

<!-- Aukeratutako ekitaldiaren id-a ezkutuan agertuko da -->

<input type="hidden" name="id" value="'.$id.'" />

<input type="checkbox" name="ezabatu" /> Ekitaldi hau ezabatu nahi dut. <br /><br />

Eguna <input type="text" name="eguna" value="'.$eguna.'" /> <br /><br/>

Ordua <input type="text" name="ordua" value="'.$ordua.'" /> <br /><br/>

Herria <input type="text" name="herria" value="'.$herria.'" /> <br /><br/>

Tokia <input type="text" name="tokia" value="'.$tokia.'" /> <br /><br/><br />

Deskribapena: <br /><br />

<textarea rows="10" cols="40" name="deskribapena">'.$deskribapena.'</textarea><br />

<input type="submit" value="Bidali" />

<a href="agenda.php"><button type="button"> Itzuli agendara </button></a>

<br /> <br /> </form>

';

}

?>

<!-- PHP atalaren amaiera -->

</div>

</div>

</body>

</html>

Web Aplikazioak (Proiektua)

28

EXEKUTATU.PHP (1)

<!DOCTYPE html>

<html lang="eu">

<head>

<title>Aldatu edo ezabatu</title>

<!-- Karaktereak utf-8 kodifikazioa dute -->

<meta charset="utf-8">

<!-- Orriaren estiloa css fitxategian -->

<link rel="stylesheet" href="estiloa.css">

</head>

<body>

<!-- Orriaren edukia div batean egongo da -->

<div id="edukia">

<!-- Titulua div batean egongo da -->

<div id="titulua">

<a href="index.html">AGENDA DIGITALA</a>

</div>

<!-- PHP atala -->

<?php

/* aldatuezabatu.php-ko inprimakian sartutako balioak aldagai bezala jartzeko */

$id=$_POST["id"];

$ezabatu=$_POST["ezabatu"];

$eguna=$_POST["eguna"];

$ordua=$_POST["ordua"];

$herria=$_POST["herria"];

$tokia=$_POST["tokia"];

$deskribapena=$_POST["deskribapena"];

/* MySQL erabiliz konexioa eta eragiketako egiteko */

$konexioa = mysql_connect("localhost", "root", "mysql") or die("Ezin da datu basearekin konektatu");

mysql_select_db("agenda") or die("Ez da datu basea existitzen");

Web Aplikazioak (Proiektua)

29

EXEKUTATU.PHP (2)

/* Baldintza bat sortzen da, aldatu/ezabatu orrian checkbox-a aukeratuta dagoen ala ez dagoen arabera */

/* Aukeratuta badago, ondorengoa egingo du */

if ($ezabatu == "on")

{

mysql_query("DELETE FROM datuak WHERE id=$id", $konexioa);

echo '<div id="testua">

<h1>EZABATU</h1>

<p>Ekitaldia ezabatu duzu; bueltatu agendaren orrira</p><br />

<a href="agenda.php"><button type="button"> Itzuli agendara </button></a> <br /> <br />

</div>';

}

/* Aukeratuta ez badago, berriz, ondorengoa egingo du */

else

{

mysql_query("UPDATE datuak SET eguna='$eguna', ordua='$ordua', herria='$herria', tokia='$tokia',

deskribapena='$deskribapena' WHERE id=$id", $konexioa);

echo '<div id="testua">

<h1>ALDATU</h1>

<p>Ekitaldia aldatu duzu; bueltatu agendaren orrira</p><br />

<a href="agenda.php"><button type="button"> Itzuli agendara </button></a> <br /> <br />

</div>';

}

?>

<!-- PHP atalaren amaiera-->

</div>

</body>

</html>

Web Aplikazioak (Proiektua)

30

BERRIA.PHP

<!DOCTYPE html>

<html lang="eu">

<head>

<title>Ekitaldi berria</title>

<!-- Karaktereak utf-8 kodifikazioa dute -->

<meta charset="utf-8">

<!-- Orriaren estiloa css fitxategian -->

<link rel="stylesheet" href="estiloa.css">

</head>

<body>

<!-- Orriaren edukia div batean egongo da -->

<div id="edukia">

<!-- Titulua div batean egongo da -->

<div id="titulua">

<a href="index.html">AGENDA DIGITALA</a>

</div>

<!-- Orriaren atal nagusia beste div batean dago -->

<div id="testua">

<h1>Ekitaldi berria</h1>

Atal honetan, ekitaldi bat sortzeko aukera edukiko duzu.

<br /><br /><br />

<!-- Ekitaldi berri bat sortzeko inprimakia -->

<form action="sortu.php" method="post">

Eguna (uuuu-hh-ee) <input type="text" name="eguna" />

<br /><br/>

Ordua (hh:mm:ss) <input type="text" name="ordua" />

<br /><br/>

Herria <input type="text" name="herria" /> <br />

<br/>

Tokia <input type="text" name="tokia" /> <br />

<br/><br />

Deskribapena: <br /><br />

<textarea rows="10" cols="40" name="deskribapena">

</textarea> <br /><br />

<!-- Inprimakia bidaltzeko botoia -->

<input type="submit" value="Bidali" />

<!-- Agenda.php-ra itzultzeko botoia -->

<a href="agenda.php"><button type="button"> Itzuli

agendara </button> </a>

<br /> <br />

</form>

</div>

</div>

</body>

</html>

Web Aplikazioak (Proiektua)

31

SORTU.PHP

<!DOCTYPE html>

<html lang="eu">

<head>

<title>Sortu</title>

<!-- Karaktereak utf-8 kodifikazioa dute -->

<meta charset="utf-8">

<!-- Orriaren estiloa css fitxategian -->

<link rel="stylesheet" href="estiloa.css">

</head>

<body>

<!-- Orriaren edukia div batean egongo da -->

<div id="edukia">

<!-- Titulua div batean egongo da -->

<div id="titulua">

<a href="index.html">AGENDA DIGITALA</a>

</div>

<!-- Orriaren atal nagusia beste div batean dago -->

<div id="testua">

<h1>Sortu</h1>

<!-- PHP atala -->

<?php

/* berria.php-ko inprimakian sartutako balioak aldagai

bezala jartzeko */

$eguna=$_POST["eguna"];

$ordua=$_POST["ordua"];

$herria=$_POST["herria"];

$tokia=$_POST["tokia"];

$deskribapena=$_POST["deskribapena"];

/* MySQL erabiliz konexioa eta inprimakian sartutako

datuak datu basean sartzeko */

$konexioa = mysql_connect("localhost", "root", "mysql") or

die("Ezin da datu basearekin konektatu");

mysql_select_db("agenda") or die("Ez da datu basea

existitzen");

mysql_query("INSERT INTO datuak (eguna, ordua, herria,

tokia, deskribapena) VALUES ('$eguna', '$ordua',

'$herria', '$tokia', '$deskribapena')", $konexioa);

/* Datu basean datuak sartzean pantailaratuko duena */

echo 'Ekitaldia sortu duzu; bueltatu agendaren orrira

<br /> <br /> <br />

<!-- agenda.php-ra itzultzeko botoia -->

<a href="agenda.php"><button type="button"> Itzuli

agendara </button></a> <br /> <br />';

?>

</div>

</div>

</body>

</html>

Web Aplikazioak (Proiektua)

32

KONSULTA.PHP (1)

<!DOCTYPE html>

<html lang="eu">

<head>

<title>Agenda</title>

<!-- Karaktereak utf-8 kodifikazioa dute -->

<meta charset="utf-8">

<!-- Orriaren estiloa css fitxategian -->

<link rel="stylesheet" href="estiloa.css">

</head>

<body>

<!-- Orriaren edukia div batean egongo da -->

<div id="edukia">

<!-- Titulua div batean egongo da -->

<div id="titulua">

<a href="index.html">AGENDA DIGITALA</a>

</div>

<!-- Orriaren atal nagusia beste div batean dago -->

<div id="testua">

<!-- Ekitaldiak ezabatu eta aldatu ahal izateko, taula bat izango den inprimaki bat sortu da -->

<form action="aldatuezabatu.php" method="post">

<h1>Konsulta</h1>

<table id="taula">

<tr>

<th> B/E </th>

<th> Eguna </th>

<th> Ordua </th>

<th> Herria </th>

<th> Tokia </th>

<th> Deskribapena </th>

</tr>

<!-- PHP atala -->

<?php

/* "eguna" aldagaian agenda.php-en aukeratutako eguna gordeko da */

$eguna=$_POST["eguna"];

Web Aplikazioak (Proiektua)

33

KONSULTA.PHP (2)

/* MySQL erabiliz konexioa eta kontsultak egiteko */

$konexioa = mysql_connect("localhost", "root", "mysql") or die("Ezin da datu basearekin

konektatu");

mysql_select_db("agenda") or die("Ez da datu basea existitzen");

$konsulta = mysql_query("SELECT * FROM datuak WHERE eguna='".$eguna."' ORDER BY ordua",

$konexioa);

$zutabekopurua = mysql_num_rows ($konsulta) -1;

/* Gaurko data aldagai batean gordeko da */

$gaurkodata = date("Y-m-d");

/* Datu baseko erregistro bakoitzeko ondorengo kodea exekutatzeko; begizta bat da */

for ($i=0; $i <= $zutabekopurua; $i++)

{

/* i-ren balio bakoitzeko, erregistroko balioak aldatzen joango dira. Beraz, aldagaiak

aldakorrak izango dira */

/* Ondorengo aldagaietan, datu baseko datuak gordeko dira */

$id = mysql_result($konsulta, $i, "id");

$eguna = mysql_result($konsulta, $i, "eguna");

$ordua = mysql_result($konsulta, $i, "ordua");

$herria = mysql_result($konsulta, $i, "herria");

$tokia = mysql_result($konsulta, $i, "tokia");

$deskribapena = mysql_result($konsulta, $i, "deskribapena");

/* Ondoren, baldintza bat sortzen da egunaren araberakoa */

if ($gaurkodata == $eguna)

/* Gaurko data, ekitaldiaren dataren berdina bada, $data aldagaian "gaurkoa" gordeko

da */

{

$data = "gaurkoa";

}

elseif ($gaurkodata > $eguna)

/* Gaurko data, ekitaldiaren baino handiagoa bada, $data aldagaian "pasatakoa"

gordeko da */

Web Aplikazioak (Proiektua)

34

KONSULTA.PHP (3)

{

$data = "pasatakoa";

}

else

/* Gainontzeko baldintza guztietan, $data aldagaian "pendiente" gordeko da */

{

$data = "pendiente";

}

/* Azkenik, datu basetik ateratako datuen arabera taulari errenkadak erantsiko dizkio */

/* Kontutan eduki, dataren araberako baldintzatik ateratako balioa, "class" batean

ipintzen dela; ondoren kolorea eman ahal izateko */

echo '<!-- Datu basetik ateratako datuak dituen errenkada -->

<tr class="'.$data.'">

<td> <input type="radio" name="id" value="'.$id.'"> </td>

<td> '.$eguna.' </td>

<td> '.$ordua.' </td>

<td> '.$herria.' </td>

<td> '.$tokia.' </td>

<td> '.$deskribapena.' </td>

</tr>';

}

?>

<!-- PHP atalaren amaiera -->

</table> <br />

<input type="submit" value="Aldatu/Ezabatu" />

<!-- Azkenik, inprimakia amaitzen da eta botoi bat agertuko da ekitaldi berri bat sortzeko -->

<a href="agenda.php"><button type="button"> Itzuli agendara </button></a>

</form> <br />

</div>

</div>

</body>

</html>

Web Aplikazioak (Proiektua)

35

ESTILOA.CSS (1)

/* web orri guztiek edukiko dituen propietate berdinak */

body {

background-color: #fff6f1;

font-family: "Helvetica",Arial;

}

/* web orriaren tituluaren propietateak */

#titulua {

background-color: #009933;

border-radius: 20px;

padding: 20px;

box-shadow: 0px 0px 20px rgba(0,0,0,0.5);

color: white;

letter-spacing: 10px;

font-size: 40px;

font-weight: bold;

text-shadow: 2px 2px #000;

border: 3px;

border-style: solid;

border-color: #e44e2d;

font-family: arial;

}

/* web orri orriaren edukiaren propietateak */

#edukia {

width: 960px;

margin:0 auto;

text-align: center;

padding: 50px;

}

/* Edukiaren barruan "testua" id-a duen edukiaren propietateak, testua eta

abarrena */

#testua {

width: 650px;

background-color: white;

color: black;

margin: 0 auto;

border-radius: 20px;

padding: 20px;

box-shadow: 0px 0px 20px rgba(0,0,0,0.5);

margin-top: 50px;

border: 3px;

border-style: solid;

border-color: #585858;

}

Web Aplikazioak (Proiektua)

36

ESTILOA.CSS (2)

/* web orriko esteken propietateak */

a {

color: white;

text-decoration: none;

}

/* web orriko tituluek (h1) duten propietateak */

h1 {

color: #e44e2d;

text-shadow: 2px 2px #585858;

font-size: 30px;

margin-bottom: 30px;

}

/* "irudia" id-a duten irudien propietateak */

#irudia {

text-align: center;

width: 220px;

height: 220px;

margin: 20px;

}

/* Gaurko data duten ekitaldien propietateak */

.gaurkoa {

background-color: #21b049;

color: white;

}

/* Pasatako ekitaldiek dituzten propietateak */

.pasatakoa {

background-color: #ec3f1a;

color: white;

text-decoration: line-through;

}

/* Hurrengo egunetarako dauden ekitaldiek dituzten propietateak */

.pendiente {

background-color: white;

}

Web Aplikazioak (Proiektua)

37

ESTILOA.CSS (3)

/* Orrialdeko taulak edukiko dituen propietateak */

#taula {

border: 2px;

border-style: solid;

border-radius: 5px;

width: 640px;

max-width: 640px;

border-color: purple;

border-spacing: 0px;

margin:0 auto;

margin-top: 20px;

margin-bottom: 20px;

}

/* Taulako gelaxkek edukiko dituzten propietateak */

td {

border: 1px;

border-color: #585858;

border-style: solid;

border-spacing: 0px;

}

/* Taulako goiko errenkadeko tituluek dituzten propietateak */

th {

border: 1px;

border-color: #585858;

border-style: solid;

border-spacing: 0px;

background-color: #c6c4c3;

}

/* Taulako errenkada guztiek edukiko dituzten propietateak */

tr {

height: 40px;

}

/* Orriko testu parrafoek dituzten propietateak */

p {

margin-bottom: 20px;

}

Web Aplikazioak (Proiektua)

38

Proiektu hau egin ondoren, lehen ez nituen ezagutza asko neureganatu ditut. Adibidez, lehen ez nekien datu base bateko datuak nola pantailaratu web orri batean; eta orain badakit pantailaratzen, aldatzen, ezabatzen eta baita berriak sartzen ere.

Bestetik esan beharra dago, hau jakitean, web orri dinamikoak sortzen ikasi dela. Aurreko

urtean estatikoak soilik ikasi genituen. Eta amaitzeko, estiloak eta abar jartzean, div-en erabilera neureganatu dut; eta orriak taula

gabe egiten ikasi dut. Orregatik denagatik, eta hasieran izan nuen ideia egin ahal izan dudalako, proiektu hau

gustukoa izan dut; pixkanaka-pixkanaka, gauza berriak ikasten joan naizelako, eta hori asko gustatzen zaidalako.

http://www.w3schools.com -- HTML5, CSS, PHP, eta abarri buruzko informazioa bilatzeko.

http://ikasgela.tolosaldea.com/ -- Eskolako apunteak.

www.lsi.us.es/cursos/cursophp/apuntes/tema4.pdf -- Hau izan da erabili dudan informazio iturri nagusia.

6.- ATALA – Ondorioak

7.- ATALA – Bibiliografia