Tak jak zaplanowałem na końcu wpisu The Small Calendar – jQuery + PHP w praktyce, postanowiłem stworzyć systemowy (windowsowy) gadżet z The Small Calendar. W tym wpisie postaram się przybliżyć tajniki tworzenia takowych gadżetów. Gadżety pojawiły się wraz z Vistą – jako element sidebar’a, w Windows 7 są już autonomicznymi programikami, które mogą być porozrzucane wszędzie na pulpicie.

Pierwsze kroki

Platforma gadżetów Windows jest frameworkiem dla tworzenia i hostowania mini-aplikacji. Tworzenie aplikacji odbywa się niemalże tak samo, jak zwykłych stron internetowych. Do wykorzystania są technologie (x)HTML, CSS, JavaScript, JScript, VBscript. Oczywiście dołączanie gotowych bibliotek jest możliwe, w tym przykładzie pokażę jak łatwo można skorzystać z biblioteki jQuery.

Katalog przechowywania

Gadżety są przechowywane w konkretnym katalogu. Rozpoczynając tworzenie nowego gadżetu katalog najlepiej utworzyć smodzielnie (później, po zakończeniu prac utworzony gadżet będzie się sam instalował). Folder przechowywania gadżetów w Windows 7: %localappdata%\Microsoft\Windows Sidebar\Gadgets\. Czyli dla użytkownika Vokiel będzie to np: C:\Users\Vokiel\AppData\Local\Microsoft\Windows Sidebar\Gadgets\. W tym katalogu należy utworzyć folder dla danego gadżetu, nazwę kończąc na .gadget. W naszym przypadku będzie to TheSmallCalendar.gadget.

The Small Calendar Gadżet - Folder lokalizacji

Manifest

Plik gadget.xml opisuje zawartość paczki, czyli gadżetu. Zawiera podstawowe informacje na temat dodatku, które później widoczne są na ekranie gadżetów.

Tworzony przeze mnie kalendarz zawiera następujący opis:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
  <name>The Small Calendar</name>
  <namespace>vokiel.widgets</namespace>
  <version>1.0.2</version>
  <author name="Vokiel">
    <info url="http://blog.vokiel.com/the-small-calendar-jquery-php-w-praktyce" />
    <logo src="img/icon.png" />
  </author>
  <copyright>&#169; Vokiel | vokiel.com</copyright>
  <description>To jest mały kalendarz, który pozwala sprawdzić dzień tygodnia dla wybranej daty. Ten kalendarz jest inny niż wszystkie, posiada tylko jeden blok dni!</description>
  <icons>
    <icon height="48" width="48" src="img/TheSmallCalendar_48x48.png" />
  </icons>
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="TheSmallCalendar.html" />
      <permissions>Full</permissions>
      <platform minPlatformVersion="1.0" />
      <defaultImage src="img/TheSmallCalendar_48x48.png" />
    </host>
  </hosts>
</gadget>

Opisywanie szczegółów zawartości tego pliku nie jest konieczne, znaczniki XML są tak dobrane, iż same w sobie są dostatecznym opisem. Najważniejszą rzeczą w tym pliku jest wskazanie pliku głównego gadżetu, w tym przypadku jest to TheSmallCalendar.html, ten plik zostanie otwarty przy starcie aplikacji.

Wynik opisu zawartego w powyższym listingu kodu przedstawia się następująco:

The Small Calendar Gadżet - Ekran gadżetów

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...

Na Grafish Design’s Blog natknąłem się na The Small Callendar. Czyli mały kalendarz, który umożliwia sprawdzenie wybranej daty pod kątem dnia tygodnia. Przedstawiony tam kalendarz jest wersją do druku (dostępny do pobrania w ponad 30 językach). Kalendarz ten różni się od standardowych tym, że ma tylko jeden blok z dniami miesiąca. Postanowiłem stworzyć taki kalendarzyk on-line przy wykorzystaniu PHP oraz odrobiny jQuery, plus oczywiście CSS.

Cel

Kalendarz w wersji oryginalnej wygląda następująco:

The Small Callendar - Grafish Design's Blog

Planowana przeze mnie wersja będzie miała:

1. Wygląd przypominający oryginał
2. Wybór roku innego niż aktualny
3. Wielojęzyczność
4. Możliwość podświetlania kolumny dat
5. Możliwość podświetlania wierszy miesięcy
6. Możliwość podświetlania dni tygodnia dla wybranych dat
7. Możliwość przenoszenia bloku dat po kliknięciu na wiersz miesiąca

Generowanie kalendarza: PHP

Do wygenerowania kalendarza posłużymy się prostą klasą, która wygeneruje nam kilka rzeczy. Po pierwsze stworzymy listę miesięcy, dla każdego z nich sprawdzimy liczbę dni, sprawdzimy dzień tygodnia dla pierwszego dnia miesiąca. Następnie stworzymy na tej podstawie tablicę, która będzie zawierała skróty nazw miesięcy (w wybranym języku), dla wybranego roku, do każdego z miesięcy przypiszemy ilość dni oraz odpowiednio posortowane skróty nazw dni tygodnia.

Klasa ta jest bardzo prosta, zatem możemy ją nazwać imitacją klasy, zbiorem funkcji opakowanych w klasę. Lista metod:

1. public __construct – 2 parametry opcjonalne: rok, tablica z danymi języka | konstruktor
2. public setLanguage – 1 parametr: tablica z tłumaczeniami | ustawienie języka
3. public getdatesTable – 0 parametrów | tworzy tablicę dni
4. public getCalendar – 0 parametrów | pobiera tablicę z kalendarzem
5. private generateMonths – 0 parametrów | generuje miesiące
6. private generateDayNames – 0 parametrów | tworzy dni tygodnia w odpowiedniej kolejności

Kod klasy

Część po stronie serwera jest na tyle prosta, że nie wymaga większego opisu. Konstruktor może przyjmować 2 parametry: rok oraz tablicę z tłumaczeniem na inny język. Oba parametry są opcjonalne, domyślnym rokiem jest aktualny, język – polski.

Metoda setLanguage ustawia język. Kolejna, getDatesTable generuje tablicę z dniami miesięcy (1-31), oznaczając odpowiednio ilości dni wg miesięcy. getCalendar wywołuje dwie inne: generateMonths – generuję tablicę miesięcy, wraz z ważnymi danymi, oraz generateDayNames – generującą skrótowe nazwy dni tygodnia.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

<?php
/**
 * VokielSmallCallendar class
 * @author Vokiel | http://blog.vokiel.com
 */
class VokielSmallCallendar {
	/**
	 * Selected year
	 * @var int	$year
	 */
	private $year;
	/**
	 * Shortcuts names for months
	 * @var	array $monthsShort
	 */
	private $monthsShort = array();
	/**
	 * Shortcuts names for week days
	 * @var	array	$daysShort 
	 */
	private $daysShort = array(); 
	/**
	 * Generated months table for the callendar
	 * @var array $months
	 */
	private $months = array();
 
	/**
	 * Construct, 
	 * @param	int	$year
	 * @param	array	$lang
	 */
	public function __construct($year=0,$lang=null){
		$this->year = ($year)? (int)$year : date('Y');
 
		if (!is_array($lang) || !is_array($lang['months']) || !is_array($lang['days'])){
			$lang = null;
		}
		$this->setLanguage($lang);
	}//end of __construct
 
	/**
	 * Setting the monts shortcuts names and days shorcuts names.
	 * Polish is default language.
	 * @param	array	$lang	Monts and days array starting from 1 = January and 1 = Monday
	 */
	public function setLanguage($lang=null){
		$this->monthsShort = (is_array($$lang['months']))? $$lang['months'] : array(1=>'Sty',2=>'Lut',3=>'Mar',4=>'Kwi',5=>'Maj',6=>'Cze',7=>'Lip',8=>'Sie',9=>'Wrz',10=>'Paź',11=>'Lis',12=>'Gru');	
		$this->daysShort = (is_array($$lang['days']))? $$lang['days'] : array(1=>'Pon',2=>'Wt',3=>'Śr',4=>'Czw',5=>'Pt',6=>'Sob',7=>'Nie');
	}//end of setLanguage method
 
	/**
	 * Generating the dates table (numbers from 1 to 31)
	 * @return	string	$datesTable	Generated HTML table
	 */
	public function getDatesTable(){
		$datesTable = '<table><tbody><tr>';
		for ($i=1;$i<32;$i++){
			$class = '';
			if ($i>=28){
				if ($i == $this->months[2]['daysCount'] || $i>29){
					$class = 'class="days_'.$i.'"';
				}
			}
			$datesTable .= '<td '.$class.'>'.$i.'</td>';
			if ($i%7==0){
				$datesTable .= '</tr><tr>';
			}
		}
		$datesTable .= '</tr></tbody></table>';
		return $datesTable;
	}//end of getdatesTable method
 
	/**
	 * Getting the calendar
	 * @return	array	$this->months Array with months shortcuts names and sorted week days shortcuts names	 
	 */
	public function getCalendar(){
		$this->generateMonths();
		$this->generateDayNames();
		return $this->months;
	}//end of getCalendar method
 
	/**
	 * Generating months table
	 */
	private function generateMonths(){
		for ($i=1;$i<13;$i++){
			$time = mktime(0,0,0,$i,1,$this->year);
			$this->months[$i]['weekDay'] = date('N',$time);
			$this->months[$i]['montShort'] = $this->monthsShort[$i];
			$this->months[$i]['daysCount'] = date('t',$time);
		}
	}//end of generateMonths method
 
	/**
	 * Generating week day names shortcuts
	 */
	private function generateDayNames(){
		foreach ($this->months as $month => $dayStart){
			$dayStart = $dayStart['weekDay'];
			for ($i=0;$i<7;$i++){
				$day = ($dayStart+$i>7)? (-(7-$dayStart-$i)) : ($dayStart+$i);
				$this->months[$month]['weekdays'][] = $this->daysShort[$day];
				unset($this->months[$month]['weekDay']);
			}
		}
	}//end of generateDayNames method
 
}// end of VokielSmallCallendar class

Obsługa kalendarza: JavaScript

W tej części zajmiemy się oskrytpowaniem kalendarza w JavaScript (korzystając z jQuery) w celu nadania mu funkcjonalności, dynamiki i użytecznosci. Z naszych założeń wynika, że musimy utworzyć kilka funkcji, które będą reagować na przesuwanie kursora myszki ponad polami kalendarza.

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...

Prawdopodobnie wiele osób zetknęło się z mikroformatami, publikacji na ich temat jest dość dużo. Większość jednak porozrzucana, podzielona na mniejsze elementy. W tym wpisie chcę zebrać całość użytecznych informacji na ten temat w jednym miejscu. Najlepszym miejscem na to jest (jak dla mnie) ten blog

W skrócie mikroformaty są umownym zestawem standardów (klas CSS i elementów języka xHTML) stosowanych w celu umożliwienia maszynom odczytania i zrozumienia większej ilości danych, które bez nich byłyby zrozumiałe tylko dla człowieka.

Charakterystyka mikroformatów

Inicjatywa stworzenia mikroformatów miała miejsce w 2005 roku. W założeniu chciano przyśpieszyć adaptację tzw. idei sematycznej sieci.

Najważniejszą informacją odnośnie mikroformatów jest to, że nie są one odrębnym językiem. Nie są też odmianą, ani częścią jakiegoś języka. Są to umowne sposoby stosowania klas CSS oraz elementów xHTML w taki sposób, aby umieścić dodatkowe informacje w sposób łatwy do odczytania dla maszyn. Wzbogacają tzw. semantykę kodowania, dzięki czemu stają się łatwiejsze do przetworzenia. Umożliwiają przenoszenie treści zawartej na witrynie do innych aplikacji, dzięki czemu rozszerza się zakres wykorzystania informacji.

Mikroformaty tylko opisują dane, same w sobie nie są ich nośnikami. Jest to ogólnie przyjęta konwencja, która pozwala zagnieżdżać dodatkowe informacje w dokumentach HTML.

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

Można je zastosować zarówno w HTML, xHTML, XML, RSS, ATOM. Występują w następujących atrybutach:

1. atrybut class
2. atrybut rel
3. atrybut rev

Budowa mikroformatów

Jak już wspomniałem mikroformaty opierają się na klasach CSS lub na atrybutach xHTML. Najczęściej spotykanym zastosowaniem są wizytówki (hCard), terminarz (hCalendar). W przypadku pierwszego zastosowania, całość wizytówki zawieramy w elemencie z klasą CSS o nazwie vcard. W niej zawartość elementów z odpowiednimi klasami jest interpretowana jako pola wizytówki. W przypadku kalendarza, całość umieszczamy w elemencie z przypisaną klasą vevent. hCard jest bardziej rozbudowany (17 pozycji) od hCalendar (8 pozycji), zatem nim się zajmiemy w celu przedstawienia budowy mikroformatów. Przykładowa wizytówka może wyglądać następująco:

<div class="vcard">
    <span class="fn">Jan Dzban</span> 
    <span class="additional-name">Piotr</span>
    <div class="org">Firma Jana Dzbana SP. Z O. O.</div>
    <a class="email" href="mailto:jan.kowalski@firma_jana_dzbana.pl">jan.kowalski@firma_jana_dzbana.pl</a>
    <a class="url" href="http://firma_jana_dzbana.pl">strona WWW</a>
    <div class="adr">
        <div class="street-address">Dzbanowa 666</div>
        <div class="locality">Janów</div>
        <div class="region">Mazowieckie</div>
        <div class="postal-code">00-123</div>
        <div class="country-name">Polska</div>
    </div>
    <div class="tel">0-700-123-456</div>
</div>

Przyjrzymy się szczegółom. Klasa vcard informuje, że mamy do czynienia z wizytówką (mikrofromatem hCard). Klasa fn zawiera informację o osobie (Imię i nazwisko). Jeśli chcielibyśmy być bardziej dokładni możemy się posłużyć dwoma oddzielnymi elementami given-name i family-name, oznaczającymi odpowiednio imię i nazwisko. Dodatkowe (drugie) imię zawiera element z klasą additional-name. Klasa org symbolizuje organizację (firmę, przedsiebiorstwo). Kolejne klasy email i url – jak nazwa wskazuje, odpowiednio adres poczty elektronicznej, adres strony WWW. Kolejny blok o klasie adr informuje o zawartości dotyczącej adresu. A w nim szczegółowe dane: nazwa ulicy, numer domu, miejscowość, region (województwo), kod pocztowy, kraj. Ostatni blok zawiera informację o numerze telefonu – klasa tel.

Jak widać nazewnictwo klas jest bardzo intuicyjne, dzięki czemu podnosi nawet czytelność kodu HTML.

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...

Czym są “Chochliki (skrzaty) CSS” ? Do czego służą? Jak możemy je wykorzystać? Jakie korzyści płyną z ich zastosowania? Jakie są ograniczenia, trudności w stosowaniu?

CSS Sprites jest techniką łączenia wielu obrazków w jeden, których wyświetlanie następuje poprzez odpowiednie wypozycjonowanie obrazu tła. Wbrew temu co mogłaby wskazywać nazwa, nie są to małe obrazki, lecz jeden duży złożony wielu mniejszych.

Na czym polega CSS Sprites

Jak zostało wspomniane w wypisie, technika ta polega na połączeniu wielu obrazków wykorzystywanych na stronie w jeden. Wyświetlanie tych obrazków polega na ustawieniu w CSS atrybutu background-position na odpowiednią wartość “przesuwającą” cały obraz, tak aby w polu widzenia był ten właściwy. Przeglądarka pobiera cały obrazek i wyświetla jego fragmenty w odpowiednich miejscach, zamiast pobierać każdy mały obrazek oddzielnie.

Nie jest to nowa technika, właściwe można powiedzieć, że jest starsza niż sam CSS. Jej pochodzenie wywodzi się ze starych 8-bitowych gier komputerowych. Komputer wczytywał do pamięci jeden obraz, a wyświetlał tylko akurat potrzebny fragment. Było to o wiele szybsze rozwiązanie niż ciągłe pobieranie nowych obrazków.

Najczęściej wybieranym zastosowaniem CSS Sprites (często nieświadomie) jest efekt CSS Rollover polegający na podmianie obrazka tła po najechaniu kursorem.

Niedogodności i trudności w stosowaniu

Na początku wspomnę o kilku niedogodnościach związanych ze stosowaniem tego rozwiązania. Warto mieć je na uwadze, aby już od początkowych etapów tworzenia nie wpaść w pułapki, aby uniknąć konieczności przerabiania wszystkiego od początku.

Obraz całościowy CSS Sprites tworzony jest z wielu mniejszych obrazków, zwykle w programach graficznych (Adobe® Photoshop®, Gimp), zatem wszelkie zmiany w wyglądzie strony będą wymagały dokonania przeróbek w obrazku całościowym. Ma to istotne znaczenie w przypadku korzystania z usług zewnętrznych grafików.

W przypadku zastosowania elementu tła, które jest powielane po jednej ze współrzędnych element ten powinien być jedynym elementem w rzędzie/kolumnie (w zależności od osi powielania). Dobrze to widać w przypadku YouTube (na niżej załączonym obrazku).

Waga obrazka CSS Sprites może być czasem większa niż sumaryczna waga obrazków składowych (nie jest to regułą, bo przykładowo przy małych ikonkach zajmuje mniej).

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...

W pewnym stadium zaawansowania wyrażenia regularne stają się potężnym narzędziem każdego programisty PHP (i nie tylko). A to dlatego, że pozwalają na wykonywanie operacji, których często nie sposób dokonać w prosty sposób przy pomocy standardowych funkcji zawartych w tym języku. Walidacja zawartości zmiennych, czy podmienianie specyficznej części ich zawartości - na to pozwalają wyrażenia regularne. 15-ście przykładowych, najbardziej niezbędnych dla każdego web developera, skompletowałem w dalszej części artykułu. Do Waszej dyspozycji oddaję także prosty serwis sprawdzający poprawność wprowadzanych wzorców.

1. Walidacja adresu e-mail opartego na hoście

Wzorzec:

1. /^([a-z0-9]{1})([^\s\t\.@]*)((\.[^\s\t\.@]+)*)@([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)\.([a-z0-9]{2,6})([.]?)$/Diu

Opis:

Wyrażenie ma za zadanie sprawdzać, czy wprowadzony przez użytkownika adres e-mail ma poprawną formę. Aby test zakończył się sukcesem muszą zostać spełnione następujące warunki:

• nazwa użytkownika musi zaczynać się od znaku litery lub cyfry, nie może zawierać spacji, tabulatorów, aty, za to mogą się znajdować w nim kropki, pod warunkiem, że nie występują jedna, po drugiej,
• po nazwie użytkownika musi pojawiać się znak małpy,
• domena, podobnie jak nazwa użytkownika, musi rozpoczynać się od litery, bądź cyfry, po czym do znaków dozwolonych dochodzą - oraz ., pod warunkiem, że pierwszy z wcześniej wymienionych znaków nie znajduje się na początku lub na końcu nazwy subdomeny (wyjątkiem są dwa myślniki na jej końcu odpowiadające często prefiksom xn--), a drugi nie jest poprzedzany swoim odpowiednikiem. TLD może mieć długość od dwóch do sześciu znaków,
• domena może być zakończona kropką,
• rozwiązanie nie sprawdza jak długi jest wprowadzony adres e-mail.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

2.a_a-d@n-do.x-d.pl

Tekst nie spełniający warunków:

2.a_a-d@n-do.x-d.v-.pl (część domeny kończąca się nieprawidłowym znakiem)

Uwagi:

Jeżeli rozwiązanie w jakimkolwiek stopniu zawiedzie można pokusić się o użycie wyrażenia z ostatniej aktualizacji pliku logical_filters.c ze źródeł PHP.

Rozwiązanie oparte o wyrażenie regularne:

1. $email = trim('adres@domena.pl');
2. if ( !preg_match('/^([a-z0-9]{1})([^\s\t\.@]*)((\.[^\s\t\.@]+)*)@([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)\.([a-z0-9]{2,6})([.]?)$/Diu', $email) )
3. {
4.     print 'Nieprawidłowy adres e-mail';
5. }

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...

Przepraszamy, ten wpis dostępny jest wyłącznie w językach: English.

W tym artykule skupimy się na szybkiej i łatwej implementacji funkcjonalności zmniejszania rozmiaru oraz łączenia wielu plików CSS w jeden.

Jeśli ktoś używa wtyczki do FF: YSlow może łatwo sprawdzić ile zewnętrznych plików css jest dołączanych do strony. Im więcej tym gorzej. Analizując dokładniej wskazania YSlow możemy zauważyć na co należy zwrócić uwagę odnośnie CSS. Są to m.in:

• Make fewer HTTP requests – mniej żądań HTTP
• Avoid CSS expressions – unikanie ostylowania wewnątrz kodu
• Make JavaScript and CSS external – stworzenie zewnętrznych plików JavaScript oraz CSS
• Minify JavaScript and CSS – zmniejszenie rozmiaru JavaScript oraz CSS
• Put CSS at top – dołączenie zewnętrznych arkuszy stylów w nagłówku dokumentu
• Compress components with gzip – kompresja elementów strony gzip’em
• Add Expires headers – dodanie nagłówków informujących przeglądarkę o czasie ważności elementów

Co możemy zrobić sami na szybko? Przede wszystkim ograniczyć ilość żądań. Przeglądarki mają to do siebie, że ograniczają ilość jednoczesnych żądań do jednego serwera. Zatem jeśli przeglądarka ma domyślnie ustawione 4 żądania na serwer, a mamy zewnętrznych elementów na stronie 20, to po rozpoczęciu pobierania pierwszych czterech przeglądarka czeka, aż zostaną pobrane, zanim sięgnie po następne. Jeśli połączymy pliki CSS, JavaScript w jeden zmniejszymy tym ilość niezbędnych do wywołania żądań – dzięki temu przeglądarka szybciej pobierze resztę strony.

Zatem do dzieła! Tworzymy plik css_cache.php o takiej postaci:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

< ?php 
/**
 * Tworzenie pliku cache z pobranych plików css
 * @param	string	$cache_file_name	Nazwa pliku cache
 */
function generateCache($cache_file_name){
    $dir = '.';
    if (is_dir($dir)){
        if ($handle = opendir($dir)) {
            $css_content = '/* Utworzono :'.date('Y-m-d H:i:s').' */';
            while (false !== ($file = readdir($handle))) { 
                if (strtolower(substr(strrchr($file,"."),1)) == 'css'){ 
                    $css_content .= "\n\n".'/* CSS z pliku: '.$file.' */'."\n".preg_replace('/\s+/', ' ', file_get_contents($file));
                }
            }
            closedir($handle);
            file_put_contents($cache_file_name,$css_content);
        }
    }
}
/**
 * Funkcja pobierająca plik cache
 * @param   string  $cache_file_name    Nazwa pliku
 * @param   int $cache_time Czas ważności w sekundach
 * @return unknown_type
 */
function getCache($cache_file_name,$cache_time){
    if (file_exists($cache_file_name)){
        if ($cache_time){ // jest podany termin waznosci cache
            if (filemtime($cache_file_name ) < (time() - $cache_time)) { //cache nieaktualny, pobranie od nowa i utworzenie
                generateCache($cache_file_name);
            }
        }
    }else{// brak cache - utworznie
        generateCache($cache_file_name);
    }
    return file_get_contents($cache_file_name);
}
?>

Następnie użycie plik css.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

< ?php
if(array_key_exists("HTTP_IF_MODIFIED_SINCE",$_SERVER)){
    $if_modified_since = strtotime(preg_replace('/;.*$/','',$_SERVER["HTTP_IF_MODIFIED_SINCE"]));
    if($if_modified_since >= strtotime(filemtime($cache_file_name))){
        header("HTTP/1.0 304 Not Modified");
        exit();
    }
}
/**
 * Nazwa pliku cache
 * @var string
 */
$cache_file_name = 'cache_style.css';
/**
 * Czas ważności cache w sekundach
 * 0 - cache bez terminu ważności
 * @var unknown_type
 */
$cache_time = 0;
require_once 'css_cache.php';
header("Content-type: text/css; charset: UTF-8");
header("Pragma: public");
header("Cache-Control: public");
header('Expires: '.gmdate('D, d M Y H:i:s', strtotime('+1 year').' GMT'));
header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($cache_file_name)).' GMT');
ob_start("ob_gzhandler");
echo getCache($cache_file_name,$cache_time);
ob_end_flush();
?>

Krótkie omówienie: W pliku css_cache.php mamy 2 funkcje: generateCache($cache_file_name) oraz getCache($cache_file_name,$cache_time). Pierwsza z nich tworzy nam jeden zbiorczy plik cache ze wszystkich plików css znalezionych w katalogu (podanym jako parametr $dir – domyślnie obecny). Pliki oznaczane są komentarzem informującym kiedy i z jakiego pliku został utworzony dany fragment, do tego preg_replace załatwia nam sprawę zbędnych pustych znaków. Druga z nich pobiera plik cache. Jeśli został podany parametr $cache_time określający ważność cache, funkcja sprawdza, czy plik cache jest jeszcze aktualny. Jeśli plik nie jest aktualny, lub w ogóle nie istnieje jest tworzony na nowo. Następnie funkcja zwraca zawartość takiego skompresowanego pliku.

W pliku css.php mamy prosty przykład wykorzystania. Na początku sprawdzamy, czy wysłany uprzednio plik jest jeszcze aktualny (nagłówki HTTP_IF_MODIFIED_SINCE), jeśli tak – nie robimy nic – zwracamy informację, że plik nie został zmodyfikowany od czasu ostatniej wizyty. Jeśli jednak plik został zmodyfikowany, bądź jest to pierwsze wejście wysyłane są nagłówki ważności oraz odczytywany jest plik z cache.

Aby wykorzystać system na stronie wystarczy w nagłówku strony podać link do pliku css:

<link rel="stylesheet" type="text/css" href="css.php" />