Kurs tworzenia aplikacji internetowych 2025

W tym rozdziale napiszemy aplikację "kalendarz". Będzie to aplikacja pokazująca kartkę z kalendarza z możliwością przechodzenia do kolejnego lub poprzedniego dnia. Na początek jak zwkle zaczniemy od stworzenia "suchego" kodu HTML. Aby to wszystko jakoś wyglądało to dołaczymy trochę stylów CSS. Do dzieła. Utwórz w swoim edytorze kodu plik php. U mnie będzie to.
c:\xampp\htdocs\kalendarz.php


<style>
.kartka {
width:200px;
text-align:center;
border: 1px solid silver;
}
</style>


<div class="kartka">
<h3>2022</h3>
<h1>21</h1>
<h2>Styczeń</h2>
<h3>Piątek</h3>

<button>Poprzedni</button>
<button>Następny</button>
<br />
<br />
</div>

Nowością jest tutaj nowy parametr class. Ten parametr wskazuje na klasę w stylach CSS, którą zdefiniowana samym początku pliku. Przy definiowaniu klasy w stylach CSS nazwa klasy musi mieć na początku dodatkową kropkę. Dla uproszczenia umieściłem tutaj style CSS i kod HTML w jednym pliku. W prawdziwych projektach style CSS są zazwyczaj w osobnych plikach. Teraz zmodyfikujemy nasz suchy kod HTML. Wykorzystamy często używaną funkcję Date. Oto zmodyfikowany kod.


<style>
.kartka {
width:200px;
text-align:center;
border: 1px solid silver;
}
</style>

<div class="kartka">
<h3><?=Date("Y")?></h3>
<h1><?=Date("d")?></h1>
<h2><?=Date("m")?></h2>
<h3><?=Date("w")?></h3>
<button>Poprzedni</button>
<button>Następny</button>
<br />
<br />
</div>

Jak widać funkcja Date może przyjmować różne parametry. W tym przykładzie są to tylko pojedyńcze literki, ale równie dobrze można stosować równe kombinacje. Na przykład, aby wyświelić datę w taki sposób: 2025-04-24 trzeba wywołać funkcję datę z trzeba parametrami oddzielonymi dodatkowymi myślnikami.


echo Date("Y-m-d");

Znaczenie innych parametrów funkcji "Date" możesz znaleźć na przykład tutaj https://www.w3schools.com/php/func_date_date.asp

Wróćmy do naszej kartki z kalendarza. Dwa elementy wymagają poprawy. Po pierwsze zamiast nazwy miesiąca mamy tutaj wartość 01 do 12. Po drugie zamiast nazwy dnia mamy tuaj też jakąś liczbę. Funkcja "Date" z parametrem "w" zwraca numer wartość od 0 do 6, gdzie 0 oznacza Niedzielę. Aby zamienić te wartości liczbowe na konkretne nazwy dni i miesięcy użyjemy tzw tablic asocjacjnych lub prościej ujmując - słowników. Działają one w ten sposób, żę tworzymy słownik, w którym dla każdej wartości - niekoniecznie liczbowej - przypisujemy inną wartość. Na przykład dla wartości 0 będzie przypisana "Niedziela", dla wartości 1 będzie przypisany "Poniedziałek" itd. Wtedy jeśli zdefiniujemy słownik o nazwie "$aDni" to poniższa instrukcja wyświeli nam słowo "Wtorek".


echo $aDni[2];

OK to zmodyfikujmy teraz cały kod, tak aby zamiast mało intuicyjnych wartości liczbowych wyświetlał nazwę dnia i miesiąca.


<style>
.kartka {
width:200px;
text-align:center;
border: 1px solid silver;
}
</style>

<?php
$aDzien['0']    = 'Niedziela';
$aDzien['1']    = 'Poniedziałek';
$aDzien['2']    = 'Wtorek';
$aDzien['3']    = 'Środa';
$aDzien['4']    = 'Czwartek';
$aDzien['5']    = 'Piątek';
$aDzien['6']    = 'Sobota';

$aMiesiac['01'] = 'Styczeń';
$aMiesiac['02'] = 'Luty';
$aMiesiac['03'] = 'Marzec';
$aMiesiac['04'] = 'Kwieceń';
$aMiesiac['05'] = 'Maj';
$aMiesiac['06'] = 'Czerwiec';
$aMiesiac['07'] = 'Lipiec';
$aMiesiac['08'] = 'Sierpień';
$aMiesiac['09'] = 'Wrzesien';
$aMiesiac['10'] = 'Październik';
$aMiesiac['11'] = 'Listopad';
$aMiesiac['12'] = 'Grudzien';
?> 

<div class="kartka">
<h3><?=Date("Y")?></h3>
<h1><?=Date("d")?></h1>
<h2><?=$aMiesiac[Date("m")]?></h2>
<h3><?=$aDzien[Date("w")]?></h3>
<button>Poprzedni</button>
<button>Następny</button>
<br />
<br />
</div>

A teraz czas na najciekawszą modyfikację. Zrobimy tak, że naciśnięcie przycisku "Poprzedni" lub "Następny" Przeniesie nas do sąsiedniego dnia. Będziemy musieli użyć tak zwanej sesji. Jest to specjalna tablica przechowująca wartości zmiennych. Jest ona potrzebna do tego, aby te wartości były zapamiętane nawet w momencie przeładowania strony.
Poza tym użyjemy fukcji "time()". Funkcja "time()" aktualny zwraca czas w postaci sekund, więc jeśli do tej wartości dodamy 3600*24 to otrzymamy wartośc sekund, która będzie za 24 godziny - czyli jutro. Dodatkowo zmodyfikujemy wywołanie funkcji Date. W poprzedniej wersji kalendarza wywoływaliśmy funkcję Date tylko z jednym parametrem - była to literka. Teraz użyjemy dodatkowo drugiego parametru będzie to właśnie wartość time - czyli te sekundy, które mogą oznaczać dzień disiejszy, ale rownież jutrzejszy oraz każdy inny - w zależności od tego ile sekund dodamy lub odejmiemy.
Jeśli nie używamy tego drugiego parametru to funkcja "Date" uznaje, że chodzi nam dokładnie o czas teraźniejszy. Jak dodamy ten parametr "time" to możemy przenieść się na lini czasu o dowolną ilość sekund do przodu lub do tyłu. Poniżej zmodyfikowany kod:


<style>
.kartka {
width:200px;
text-align:center;
border: 1px solid silver;
}
</style>

<?php
session_start();

if (@$_GET['dzien']=='poprzedni')  $_SESSION['time'] -= 3600*24; else
if (@$_GET['dzien']=='nastepny')   $_SESSION['time'] += 3600*24; else
                                   $_SESSION['time']  = time();

$aDzien['0']    = 'Niedziela';
$aDzien['1']    = 'Poniedziałek';
$aDzien['2']    = 'Wtorek';
$aDzien['3']    = 'Środa';
$aDzien['4']    = 'Czwartek';
$aDzien['5']    = 'Piątek';
$aDzien['6']    = 'Sobota';

$aMiesiac['01'] = 'Styczeń';
$aMiesiac['02'] = 'Luty';
$aMiesiac['03'] = 'Marzec';
$aMiesiac['04'] = 'Kwieceń';
$aMiesiac['05'] = 'Maj';
$aMiesiac['06'] = 'Czerwiec';
$aMiesiac['07'] = 'Lipiec';
$aMiesiac['08'] = 'Sierpień';
$aMiesiac['09'] = 'Wrzesien';
$aMiesiac['10'] = 'Październik';
$aMiesiac['11'] = 'Listopad';
$aMiesiac['12'] = 'Grudzien';
?>

<div class="kartka">
<h3><?=Date("Y",$_SESSION['time'])?></h3>
<h1><?=Date("d",$_SESSION['time'])?></h1>
<h2><?=$aMiesiac[Date("m",$_SESSION['time'])]?></h2>
<h3><?=$aDzien[Date("w",$_SESSION['time'])]?></h3>

<a href="?dzien=poprzedni"><button>Poprzedni</button></a>
<a href="?dzien=nastepny"><button>Następny</button></a>

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

Właściwie to zapomniałem tu wspomnieć o tablicy $_GET. Można z niej pobrać wartości przekazywane za pomocą adresu url. Jeśli nasza strona będzie miała taki adres:
http://mojastrona.pl?pierwszy=adam&drugi=monika&trzeci=witek
To w tablica $_GET będzie zawierała te trzy zmienne, a taka instrukcja

echo $_GET['trzeci'];

wyświetli: "witek".

'; echo ''; echo Date("Y-m-d H:i",$aKomentarz[0]); echo ''; echo ' '.$aKomentarz[1].'
'; $aKomentarz[2] = str_replace('
','[BR]',$aKomentarz[2]); $aKomentarz[2] = htmlspecialchars( $aKomentarz[2], ENT_QUOTES, 'UTF-8'); $aKomentarz[2] = str_replace('[BR]','
',$aKomentarz[2]); echo $aKomentarz[2]; echo '

'; } ?>