Agenda digitala

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

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

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

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

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

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

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

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

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 sortu2.5.- Datuak aldatu edo ezabatzeko (exekuzioa)

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

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

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

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

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

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

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

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

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

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

21
Atal honetan, sortu diren fitxategi guztien kodeak ipiniko dira.
5.- ERANSKINA – Kodeak

22
INDEX.HTML
<!DOCTYPE html>
<html lang="eu">
<head>
<title>Agenda - Hasiera</title>

<meta charset="utf-8">

<link rel="stylesheet" href="estiloa.css">
</head>
<body>

<div id="edukia">

<div id="titulua">
AGENDA DIGITALA
</div>

<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>

<a href="agenda.php"><img id="irudia"
src="irudiak/agenda.png" /></a>
</div>
</div>
</body>
</html>

23
AGENDA.PHP (1)
<!DOCTYPE html>
<html lang="eu">
<head>
<title>Agenda</title>
</head>
<body>
<div id="edukia">
<div id="titulua">
<a href="index.html">AGENDA DIGITALA</a>
</div>
<div id="testua">

<form action="konsulta.php" method="post">
Eguna: <select name="eguna">

<?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>
';
}
?>

24
AGENDA.PHP (2)

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

<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
$konexioa = mysql_connect("localhost", "root", "mysql") or die("Ezin da konektatu");
$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 */

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 '
<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>';} ?>
</table>

<input type="submit" value="Aldatu/Ezabatu" />
<a href="berria.php"><button type="button"> Berria sortu </button></a>
</form>
</div>
</div>
</body>
</html>

26
ALDATUEZABATU.PHP (1)
<!DOCTYPE html>
<html lang="eu">
<head>
<title>Aldatu edo ezabatu</title>
</head>
<body>
<div id="edukia">
<div id="titulua">
</div>
<div id="testua">
<h1>Aldatu edo ezabatu</h1>

<?php
/* agenda.php-n aukertutako ekitaldiaren id-a aldagai moduan jartzeko */
$id = $_POST["id"];
$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 */

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 />

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

<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>
';
}
?>

</div>
</div>
</body>
</html>

28
EXEKUTATU.PHP (1)
<!DOCTYPE html>
<html lang="eu">
<head>
<title>Aldatu edo ezabatu</title>
</head>
<body>
<div id="edukia">
<div id="titulua">
</div>

<?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 */

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 />
</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 />
</div>';
}
?>
</div>
</body>
</html>

30
BERRIA.PHP
<!DOCTYPE html>
<html lang="eu">
<head>
<title>Ekitaldi berria</title>
</head>
<body>
<div id="edukia">
<div id="titulua">
</div>
<div id="testua">
<h1>Ekitaldi berria</h1>
Atal honetan, ekitaldi bat sortzeko aukera edukiko duzu.
<br /><br /><br />

<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 />

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

<a href="agenda.php"><button type="button"> Itzuli
agendara </button> </a>
<br /> <br />
</form>
</div>
</div>
</body>
</html>

31
SORTU.PHP
<!DOCTYPE html>
<html lang="eu">
<head>
<title>Sortu</title>
</head>
<body>
<div id="edukia">
<div id="titulua">
</div>
<div id="testua">
<h1>Sortu</h1>

<?php
/* berria.php-ko inprimakian sartutako balioak aldagai
bezala jartzeko */
$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 />

<a href="agenda.php"><button type="button"> Itzuli
agendara </button></a> <br /> <br />';
?>
</div>
</div>
</body>
</html>

32
KONSULTA.PHP (1)
<!DOCTYPE html>
<html lang="eu">
<head>
<title>Agenda</title>
</head>
<body>
<div id="edukia">
<div id="titulua">
</div>
<div id="testua">

<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
/* "eguna" aldagaian agenda.php-en aukeratutako eguna gordeko da */

33
KONSULTA.PHP (2)
$konexioa = mysql_connect("localhost", "root", "mysql") or die("Ezin da datu basearekin
konektatu");
$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 */

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 '
<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>';
}
?>

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

<a href="agenda.php"><button type="button"> Itzuli agendara </button></a>
</form> <br />
</div>
</div>
</body>
</html>

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-color: #585858;
}

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;
}

37
ESTILOA.CSS (3)
/* Orrialdeko taulak edukiko dituen propietateak */
#taula
{
border: 2px;
border-radius: 5px;
width: 640px;
max-width: 640px;
border-color: purple;
border-spacing: 0px;
margin:0 auto;
margin-top: 20px;
}
/* Taulako gelaxkek edukiko dituzten propietateak */
td
{
border: 1px;
}
/* Taulako goiko errenkadeko tituluek dituzten propietateak */
th
{
border: 1px;
background-color: #c6c4c3;
}
/* Taulako errenkada guztiek edukiko dituzten propietateak */
tr
{
height: 40px;
}
/* Orriko testu parrafoek dituzten propietateak */
p
{
}

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

Agenda digitala

Recommended

Recommended

More Related Content

Similar to Agenda digitala

Similar to Agenda digitala (8)

More from Tolosaldea TLHI

More from Tolosaldea TLHI (14)

Agenda digitala