Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

Izdelava koledarja s PHP

  V lekciji bomo s pomočjo PHP-ja ustvarili koledar.
 
 
1
 
 
Odprimo naš najljubši urejevalnik kode (v mojem primeru je to Notepad++).

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

 
 
3
 
 
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.
 
 
4
 
 
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>
 
 
 
 
 
5
 
 
Dodajmo še preostanek kode, da bo naše HTML ogrodje končano.

<h1>Koledar</h1>
<div id="koledar">
</div>
</body>
</html>
 
 
6
 
 
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!

 
 
7
 
 
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.
 
 
8
 
 
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;">&lt;</a> ';
print $meseci[$mesec-1];
print ' <a href="" onclick="mesec(1);return false;">&gt;</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>';
 
 
9
 
 
Funkcija, ki smo jo napisali do sedaj, bi nam izpisala takšno stran.
 
 
10
 
 
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.
 
 
11
 
 
Pogled na trenutni rezultat funkcije.

Pozor! Če želite že zdaj preveriti delovanje, morate funkcijo poklicati. Na koncu kode dodajte izpisiKoledar();
 
 
12
 
 
Našo kodo bomo sedaj prilagodili tako, da bo za mesec in leto uporabila vhodne GET podatke.
 
 
13
 
 
Na vrh datoteke dodamo preprost if stavek, ki preveri, ali so bili poslani GET podatki.

<?php
if (empty($_GET)) { 
?>
 
 
14
 
 
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.
 
 
15
 
 
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. 
 
 
16
 
 
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>
 
 
17
 
 
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č.
 
 
18
 
 
Poigramo se lahko z oblikovanjem ...
 
 
19
 
 
... 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);
});
}
 
 
Komentiraj
 
 
 
 
 
19.7.2015, 19:20
Ko pogledam v 9. koraku mi napiše

 
 
 
 
19.7.2015, 19:25
Še koda, ki sem jo napisal do 9. koraka:




Koledar




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");
}
}
// 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");
// izpis naslova - meseca
print '< ';
print $meseci[$mesec-1];
print ' >';
/ izpis tabele in glave tabele (imena dnevov)
print '';
foreach ($dnevi as $dan){
print "$dan";
}
print '';
Koledar



 
 
 
 
23.7.2015, 13:48
Ugotovil sem kaj je narobe. Nisem postavil značk.
 
 
 
 
23.7.2015, 13:59
Zdaj imam težavo pri premikanju med meseci in pri vnašanju GET podatkov. Ko hočem premakniti mesec s pomočjo puščic, se nič ne zgodi, če pa vnesem GET podatke pa vse postane prazno. Tabela se pa ne prikaže.

 
 
 
 
28.9.2015, 14:54
Na napiše mi tabele:

 
 
 
 
1.10.2015, 14:45
A kdo ve kaj je narobe?
 
 
 
 
1.10.2015, 18:55
Na pamet težko reči.

Načelno pa mi zgleda, kot da je vse pravilno, samo da tabela nima oblikovanja.

Oblikovanje najlažje narediš s CSS. Takole nekaj na pamet:

table {
background-color: #DDD;
border: 2px solid gray;
}

td {
border: 1px solid gray;
}
 
Prijava in registracija
 
 
 
Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
 
Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!