Pred začetkom si seveda moramo zamisliti, kako bo vse skupaj delovalo. Uporabljali bomo HTML 5, koledar bomo prikazovali s pomočjo tabele, uporabili bomo JavaScript in knjižico jQuery za premik med meseci, vse skupaj pa bo zapisano v eni sami datoteki.
|
|||||
Odprimo naš najljubši urejevalnik kode (v mojem primeru je to Notepad++).
|
|||||
|
|||||
Najprej zapišimo glavo HTML dokumenta.
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Koledar</title> </head> <body> Morda ste bili do sedaj navajeni veliko bolj zapletenega začetka dokumenta (npr. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">) Takšen zapis je bil nujen v starejših verzijah HTML (XHTML), v novem HTML 5 pa je veliko stvari poenostavljenih, enobesedni atributi ne potrebujejo narekovajev, nekaterih značk ni treba zaključiti ...
|
|||||
|
|||||
Omenil sem, da bomo uporabili tudi knjižico jQuery. Gre za zelo priljubljeno in uporabno JavaScript knjižico, ki nam z bogato paleto funkcij olajša in pohitri pisanje JavaScript kode; pa še veliko preglednejša je.
Prenesemo jo lahko z njihove spletne strani. Izberite možnost PRODUCTION, saj si kode ne bomo prilagajali ali je preučevali. |
|||||
|
|||||
Najverjetneje se vam bo prikazala zmešnjava kode – kopirajte vso in jo prilepite v novo datoteko jquery.js
To datoteko premaknite v mapo, kjer delamo naš koledar. Knjižico bomo vključili v stran z naslednjo kodo (kot vidite, script značka ne potrebuje več atributa type) <script src="jquery.js"></script>
|
|||||
|
|
|||||
Dodajmo še preostanek kode, da bo naše HTML ogrodje končano.
<h1>Koledar</h1> <div id="koledar"> </div> </body> </html> |
|||||
|
|||||
Sedaj bomo napisali našo glavno funkcijo izpisiKoledar
Funkcija ima dva izbirna argumenta (mesec, leto), ki določata, "kateri" koledar moramo izpisati. Če teh argumentov ne določimo, je njuna vrednost 0 (v tem primeru se določi trenutni mesec in leto). Kodo postavimo za element body. function izpisiKoledar($mesec=0,$leto=0) // funkcija za izpis koledarja { if (empty($mesec) || empty($leto)){ // če mesec in leto nista bila določena, nastavi trenutni mesec in leto $mesec = date("n"); $leto = date("Y"); } } V urejevalniku kode imam zaradi preglednosti vklopljen prelom vrstice, zato se daljša vrstica samodejno prestavi v novo! |
|||||
|
|||||
Na vrsti je določitev potrebnih spremenljivk.
// spremenljivka s prvim dnevom v izbranem mesecu in letu $time=mktime(0,0,0,$mesec,1,$leto); // število dni v mesecu $zadnji=date("t",$time); // dan prvega dne v mesecu (1-pon,2-tor,3-sre...) $zacetekMeseca=date("N",$time); // določitev imen dnevov in mesecev $dnevi=array("ponedeljek", "torek", "sreda", "četrtek", "petek", "sobota", "nedelja"); $meseci=array("januar", "februar", "marec", "april", "maj", "junij", "julij", "avgust", "september", "oktober", "november", "december"); Funkcija mktime nam iz podanih argumentov ustvari zapis datuma in časa. Sprejema argumente: ure, minute, sekunde, mesec, dan, leto). Ker nas čas ne zanima, določimo vrednosti nič, hkrati pa kot argument dan podamo vrednost 1, kar pomeni, da bomo v spremenljivko $time shranili prvi dan tega meseca. Funkcija date nam nek shranjen datum pretvori v poljubno obliko. V prvi argument zapišemo format, ki ga želimo. Če bi želeli datum v obliki dan. mesec. leto, bi kot format napisali "j. n. Y". Več o funkciji in samih formatih najdete tukaj. Ker mi potrebujemo število dni v prej določenem mesecu, smo v format zapisali "t". V naslednji vrstici smo kot format uporabili "N", kar nam bo vrnilo zaporedno številko prvega dne v mesecu. Za konec določimo še slovenska imena dnevov in mesecev, ki jih bomo kasneje potrebovali pri izpisu. |
|||||
|
|||||
Zaenkrat smo samo določili spremenljivke, ničesar pa še nismo izpisali. Začnemo z imenom meseca, ki ga prikazujemo.
// izpis naslova - meseca print '<h2><a href="" onclick="mesec(-1);return false;"><</a> '; print $meseci[$mesec-1]; print ' <a href="" onclick="mesec(1);return false;">></a></h2>'; Ob imenu meseca se izpišeta tudi dve puščici (< >), ki ju bomo uporabili za premikanje nazaj in naprej. Več kasneje. Na vrsti je tabela s koledarjem; najprej izpišemo začetek tabele in naslovno vrstico z dnevi. Zanka foreach se bo sprehodila skozi prej nastavljeno polje imen in vsako ime dneva izpisala. // izpis tabele in glave tabele (imena dnevov) print '<table class="koledar"><tr>'; foreach ($dnevi as $dan){ print "<th>$dan</th>"; } print '</tr>'; |
|||||
|
|||||
Funkcija, ki smo jo napisali do sedaj, bi nam izpisala takšno stran.
|
|||||
|
|||||
Zdaj pride glavni del – izpis dnevov.
// izpis dnevov print '<tr>'; print str_repeat('<td></td>',$zacetekMeseca-1); for ($i=0;$i<$zadnji;$i++){ print '<td>'; print '<p class="dan">' . ($i+1) . '</p>'; print '</td>'; if(($i+$zacetekMeseca)%7==0) print '</tr><tr>';} print str_repeat('<td></td>',7-($zadnji+$zacetekMeseca-1)%7); print '</tr></table>'; S funkcijo str_repeat najprej izpišemo prazne kvadratke na začetku meseca (če je prvi dan meseca sreda, potem potrebujemo dva prazna kvadratka pred tem). Zanka for se izvede tolikokrat, kolikor je dnevov v mesecu, vsakič izpiše zaporedno številko dneva.
|
|||||
|
|||||
Pogled na trenutni rezultat funkcije.
Pozor! Če želite že zdaj preveriti delovanje, morate funkcijo poklicati. Na koncu kode dodajte izpisiKoledar();
|
|||||
|
|||||
Našo kodo bomo sedaj prilagodili tako, da bo za mesec in leto uporabila vhodne GET podatke.
|
|||||
|
|||||
Na vrh datoteke dodamo preprost if stavek, ki preveri, ali so bili poslani GET podatki.
<?php if (empty($_GET)) { ?> |
|||||
|
|||||
Pod body dodamo
} else { // mesec in leto iz GET $mesec = (int) $_GET['mesec']; $leto = (int) $_GET['leto']; // preverjanje veljavnosti if (0>$mesec || $mesec>13 || 2000>$leto || $leto>2050) exit("Napaka v poizvedbi!"); // izpis koledarja in konec izvajanja skripte izpisiKoledar($mesec,$leto); exit; } S tem smo naredili sledeče: če GET zahteva ni bila poslana, izpiši HTML glavo in preostanek HTMLja. Če je GET zahteva bila poslana, uporabi podatke, izpiši koledar in končaj z izvajanjem.
|
|||||
|
|||||
Ko odpremo našo datoteko koledar.php, želimo, da se nam prikaže koledar za trenutni mesec. Dodamo torej:
<?php izpisiKoledar(); ?> Ker nismo nastavili argumentov, se bo izpisal trenutni koledar.
|
|||||
|
|||||
Dodajmo še JavaScript, ki omogoča premik med meseci.
<script> var d=new Date(); var m=d.getMonth()+1; var l=d.getFullYear(); function mesec(premik){ m+=premik; if (m==0){ m=12;l--;} if (m==13){ m=1;l++;} $.get('koledar.php?mesec='+m+'&leto='+l, function(data) { $('#koledar').html(data);}); } </script> |
|||||
|
|||||
Naš koledar je končan!
Še kratka razlaga dodane kode: ko kliknete na puščico za premik koledarja, se pokliče JavaScript funkcija mesec, ki s pomočjo AJAXa pridobi nov koledar. Brez uporabe knjižice jQuery bi za AJAX namesto ene vrstice morali napisati veliko več. |
|||||
|
|||||
Poigramo se lahko z oblikovanjem ...
|
|||||
|
|||||
... ali pa z jQuery dodate efekte.
var d=new Date(); var m=d.getMonth()+1; var l=d.getFullYear(); var novKoledar; function mesec(premik){ m+=premik; if (m==0){ m=12;l--;} if (m==13){ m=1;l++;} $.get('koledar.php?mesec='+m+'&leto='+l, function(data) {novKoledar=data}); $("#koledar").fadeOut(300,function(){ $("#koledar").html(novKoledar); $("#koledar").fadeIn(300); }); } |
|||||