Tworzymy plik .psqlrc:

piotroo:~# touch $HOME/.psqlrc

Teraz wystarczy otworzyć nasz plik dowolnym edytorem i dodajemy do niego odpowiedni wpis, w naszym wypadku \timing.

To tyle.

1. Struktura tabeli

Myślę, że podstawową rzeczą jest przedstawienie tabeli w której będziemy trzymać nasze dane:

CREATE TABLE dzialy (id_dzial serial PRIMARY KEY, nazwa text, id_parent integer REFERENCES dzialy);

piotro=# \d dzialy
                              TABLE "public.dzialy"
  COLUMN   |  Type   |                         Modifiers                         
-----------+---------+-----------------------------------------------------------
 id_dzial  | integer | NOT NULL DEFAULT NEXTVAL('dzialy_id_dzial_seq'::regclass)
 nazwa     | text    | 
 id_parent | integer | 
Indexes:
    "dzialy_pkey" PRIMARY KEY, btree (id_dzial)
Foreign-KEY constraints:
    "dzialy_id_parent_fkey" FOREIGN KEY (id_parent) REFERENCES dzialy(id_dzial)

Może kilka słów wyjaśnienia. Tworzymy tabelę w której będziemy gromadzić nazwy naszych działów, jak wiadomo każdy dział może mieć kilka poddziałów, a z kolei te poddziały swoje poddziały, więc widzimy jednoznacznie że musimy w jakiś sposób rozróżnić gdzie dokładnie się znajdujemy, lub „narysować” użytkownikowi ścieżkę w jakiej się znajduje. Ważnym elementem konstrukcji naszej tabeli jest KLUCZ OBCY (FOREIGN KEY), który ma za zadanie stworzenie relacji między działem a jego rodzicem. Dlaczego? Wyobraźmy sobie sytuacje, w której mając do danego rodzica przypisane dzieci, usuwamy rodzica i nasze dzieci stają sie osierocone, zupełnie niepożądana akcja, trzeba się w jakiś sposób zabezpieczyć i właśnie do tego jest potrzebny klucz obcy, który będzie niejako wymuszał więzy integralności. Klucz obcy zabezpieczy nas również przed dodawaniem dziecka do nieistniejącego działu.

Tak będą wyglądały nasze dane na których będziemy pracować.

piotro=# SELECT * from dzialy;
 id_dzial |    nazwa    | id_parent 
----------+-------------+-----------
        1 | dzial_1     |          
        2 | dzial_1_1   |         1
        3 | dzial_1_2   |         1
        4 | dzial_1_3   |         1
        5 | dzial_1_3_1 |         4
        6 | dzial_2     |          
        7 | dzial_2_1   |         6
        8 | dzial_2_2   |         6
        9 | dzial_2_2_1 |         8
       10 | dzial_2_3   |         6
       11 | dzial_3     |          
(11 rows)

2. Funkcja drukująca ścieżkę

Skoro mamy już zdefiniowane dane trzeba się po nich w jakiś sposób poruszać. Pierwszą rzeczą, którą będziemy chcieli zobaczyć to ścieżka w jakiej się znajdujemy. Odpowiedzialna za tą funkcjonalność będzie funkcja path_dzialy, której argumentem będzie id_dzial i na podstawie tego ID będziemy drukować stopień zagłębienia.

Nasza funkcja wygląda następująco:

CREATE OR REPLACE FUNCTION path_dzialy (integer) RETURNS text AS
$BODY$
    DECLARE
        u_id_dzial alias FOR $1;
 
        path_dzial text;
        v_deep integer;
        v_id_dzial integer;
        v_id_parent integer;
        v_nazwa text;
    BEGIN
        v_id_dzial = u_id_dzial;
        path_dzial := '';
        LOOP
            SELECT id_parent, nazwa INTO v_id_parent, v_nazwa FROM dzialy WHERE id_dzial=v_id_dzial;
 
            IF v_id_parent IS NULL then
                IF path_dzial = '' then
                    path_dzial := v_nazwa;
                else
                    path_dzial := v_nazwa ||' -> '|| path_dzial;
                end IF;
                RETURN path_dzial;
            else
                IF path_dzial = '' then
                    path_dzial := v_nazwa;
                else
                    path_dzial := v_nazwa ||' -> '|| path_dzial;
                end IF;
                v_id_dzial = v_id_parent;
            end IF;
        END LOOP;
    END;
$BODY$ LANGUAGE 'plpgsql';

Myślę, że nie ma za bardzo co do tłumaczenia, jest to zwyczajna funkcja iteracyjna która wypisze nam daną ścieżkę, wspomnę jest jeszcze oczywiście możliwość zrealizowania tego rekurencyjnie, co dla wielu programistów jest sposobem bardziej profesjonalnym, jednak moim zdaniem obie metody są równorzędne.

Po wywołaniu funkcji, zwracane są następujące dane:

piotro=# SELECT path_dzialy(5);
             path_dzialy             
-------------------------------------
 dzial_1 -> dzial_1_3 -> dzial_1_3_1
(1 row)

Otrzymaliśmy dokładną ścieżkę dla działu o ID 5.

3. Generowanie struktury drzewiastej

Po tym jak już otrzymaliśmy ścieżkę ładnie będzie wyświetlić naszą strukturę jako drzewko. Potrzebne nam będą dwie dodatkowe funkcje, które wykonają całą robotę za nas.

Pierwsza funkcja deep_dzialy:

CREATE OR REPLACE FUNCTION deep_dzialy(integer) RETURNS integer AS
$BODY$
    DECLARE
        u_id_dzial alias FOR $1;
 
        v_deep integer;
        v_id_dzial integer;
        v_id_parent integer;
    BEGIN
        v_id_dzial = u_id_dzial;
        v_deep := 0; 
        LOOP
            SELECT id_parent, nazwa INTO v_id_parent, v_nazwa FROM dzialy WHERE id_dzial=v_id_dzial;
 
            IF v_id_parent IS NULL then
                RETURN v_deep;
            else
                v_deep := v_deep + 1;
                v_id_dzial = v_id_parent;
            end IF;
        END LOOP;
    END;
$BODY$ LANGUAGE 'plpgsql';

Funkcja praktycznie siostrzana jak wcześniejsza (drukująca ścieżkę) z tym wyjątkiem że zwraca nam na jakim poziomie zagłębienia się znajdujemy.

Mamy już funkcje która dla danego ID pokaże nam poziom zagłębienia, możemy spróbować wyświetlić nasze drzewko.

CREATE OR REPLACE FUNCTION tree_dzialy () RETURNS SETOF dzialy AS
$BODY$
    DECLARE
        r dzialy%rowtype;
 
        v_deep integer;
        v_tmp text;
        i integer;
    BEGIN
        FOR r IN SELECT * FROM dzialy
        LOOP
            IF r.id_parent IS NULL then
                r.nazwa := '|' || r.nazwa;
            end IF;
 
            IF r.id_parent IS NOT NULL then
                v_deep := deep_dzialy(r.id_dzial);
                v_tmp := '|';
                FOR i IN 1..v_deep
                LOOP
                    v_tmp := v_tmp || '-';
                END LOOP;
 
                r.nazwa := v_tmp || ' '|| r.nazwa;
 
            end IF;
            RETURN NEXT r;
        END LOOP;
        RETURN;
    END;
$BODY$ LANGUAGE 'plpgsql';

Kolejna iteracyjna funkcja rysująca nam zagłębienie dla danych poddziałów. Co warte zauważenia to typ zwracany prze tę funkcję mianowicie: RETURNS SETOF dzialy i RETURN NEXT

RETURNS SETOF dzialy – zwraca nam niejako całą kolekcję rekordów, czyli wszystkie rekordy z ostatniego polecenia.
RETURN NEXT – nie zwraca aktualnej wartości funkcji można powiedzieć, że zwraca ono aktualne wykonywane wyrażenie. Dopiero napisane samego RETURN pozwoli nam zakończyć i wyświetlić dane.

Zobaczmy co otrzymaliśmy z naszych funkcji:

 piotro=# SELECT nazwa FROM tree_dzialy();
      nazwa      
-----------------
 |dzial_1
 |- dzial_1_1
 |- dzial_1_2
 |- dzial_1_3
 |-- dzial_1_3_1
 |dzial_2
 |- dzial_2_1
 |- dzial_2_2
 |-- dzial_2_2_1
 |- dzial_2_3
 |dzial_3
(11 rows)

Do naszej struktury możemy również dodać kolumny w których będziemy trzymać kolejność i grupę danego działu, jednak ja nie chciałem zaciemniać całego przesłania.

To chyba na tyle, teraz wasze opinie, czy taka funkcjonalność jest dobra a może totalnie zła?

1. Wprowadzenie
Pozwólcie, że posłużę się przykładem tabel stworzonych we wcześniej wspomnianym artykule. W ramach przypomnienia:

Posiadamy tabelę list1 i list2:

CREATE TABLE IF NOT EXISTS `list1` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nazwa` varchar(100) CHARACTER SET utf8 COLLATE utf8_polish_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8_polish_ci AUTO_INCREMENT=1;

CREATE TABLE IF NOT EXISTS `list2` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nazwa_list2` varchar(100) CHARACTER SET utf8 COLLATE utf8_polish_ci NOT NULL,
  `id_list1` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8_polish_ci AUTO_INCREMENT=1 ;

Wylistowanie ich wygląda następująco:

mysql> SELECT * FROM list1;
+----+---------+
| id | nazwa   |
+----+---------+
|  1 | wybór_1 |
|  2 | wybór_2 |
|  3 | wybór_3 |
|  4 | wybór_4 |
+----+---------+

mysql> SELECT * FROM list2;
+----+-------------+----------+
| id | nazwa_list2 | id_list1 |
+----+-------------+----------+
|  1 | wybór_1_1   |        1 |
|  2 | wybór_1_2   |        1 |
|  3 | wybór_1_3   |        1 |
|  4 | wybór_2_1   |        2 |
|  5 | wybór_2_2   |        2 |
|  6 | wybór_3_1   |        3 |
|  7 | wybór_3_2   |        3 |
|  8 | wybór_3_3   |        3 |
|  9 | wybór_4_1   |        4 |
+----+-------------+----------+

Relacje są tworzone na podstawie list1.id=list2.id_list1. Chyba wszystko jasne. Przejdźmy dalej.

2. AJAX w jQuery
Do realizacji zapytań ajax’owych jQuery używa odpowiedniej metody: $.ajax({}). W dokumentacji wszystkie parametry jakie można wykorzystywać, nie będę się na ten temat rozpisywał. Pożądaną własnością jest używanie metody .live(), która będzie nam „przypinać” zdarzenia do nowo stworzonego selektora (kiedyś jak byłem młody i piękny nie znałem tej wspaniałej opcji do czasu aż zostałem oświecony przez nospor‘a – pozdrowienia – i od tego czasu używam jej wszędzie gdzie tylko widzę słowa AJAX i jQuery ). Dość teorii, czas na kod.

3. „Serce” naszego algorytmu
Zacznijmy od wyświetlenia naszych list:

include ('mysql.php');
 
$list1_query = mysql_query('SELECT * FROM list1');
 
echo '<select name="list1" id="list1">';
while($row_list1 = mysql_fetch_array($list1_query))
{
	echo '<option value="'.$row_list1['id'].'">'.$row_list1['nazwa'].'</option>';
}
echo '</select>';
<div id="pokaz">
$list2_query = mysql_query('SELECT * FROM list2');
 
echo '<select name="list2" id="list2">';
while($row_list2 = mysql_fetch_array($list2_query))
{
	echo '<option value="'.$row_list2['id'].'">'.$row_list2['nazwa'].'</option>';
}
echo '</select>';
</div>

W ten sposób mamy wyświetlone wszystkie opcje z naszych list. Kolejnym krokiem jest stworzenie pliku, w którym będziemy sobie tworzyć naszą listę już z odpowiednim warunkiem wyświetlania.

Nasz plik nazwiemy ajax_funkcje.php. W nim znajdować będzie się znajdować include do pliku z połączeniem bazy i dane które będziemy wyświetlać użytkownikowi po wybraniu odpowiednich opcji.

Przejdźmy już do request’ów (zapytań) generowanych przez AJAX. Jak już wspomniałem jQuery korzysta z funkcji $.ajax(). Jak to może wyglądać, zobaczmy:

$('#list1').live('change', function(){ //1
	var value = $(this).val();//2
	$.ajax({//3
		type: 'GET',//4
		url: 'ajax_funkcje.php',//5
		data: 'show_list2=1&id='+value+'',//6
		success: function(data){//7a
			$('#pokaz').html(data);//7b
		}
	});
});

Zakładam, że czytający ma podstawową znajomość używania selektorów w jQuery. Jeśli nie zapraszam do dokumentacjo API jQuery

Omówmy po kolei co znaczy każda linia.

1. Odwołanie się do pierwszej select listy na podstawie, której będziemy wyświetlać dane w drugiej, używamy tu event’u change (Ci co nie wiedzą zapraszam do dokumentacji)
2. Do zmiennej value dodajemy wartość na podstawie której chcemy wyświetlić dane w drugiej select liście, w naszym przypadku – ID
3. Odwołujemy się do metody $.ajax()
4. Typ przesyłania request’ów via AJAX (GET/POST)
5. Plik w którym następuje „obróbka” danych wysłanych przez AJAX
6. Dane przesyłane do naszego pliku z obróbką zapytań
7. Funkcja zwracająca nam – w chwili poprawnego otrzymania odpowiedzi od AJAX’a – danych i wyświetlenie ich w odpowiednim miejscu, w naszym przypadku w div’ie o id pokaz

Tak to wygląda po stronie JS, zobaczmy jak należy sformatować dane w pliku ajax_funkcje.php:

if ($_GET['show_list2'])
{
	$id_list1 = mysql_real_escape_string($_GET['id']);
	$list2_query = mysql_query('SELECT * FROM list2 WHERE id_list1=$id_list1');
 
	echo '<select name="list2" id="list2">';
	while($row_list2 = mysql_fetch_array($list2_query))
	{
		echo '<option value="'.$row_list2['id'].'">'.$row_list2['nazwa'].'</option>';
	}
	echo '</select>';
}

W tym momencie dane (select lista) zostaje wysłana do AJAX’a jako odpowiedź, którą za pomocą funkcji success, wyświetlamy w odpowiednim linku.

4. Epilog
Czym różni się sposób opisany w tym artykule od sposobu z poprzedniego? Na pewno wizualnie krótszy, przejrzysty, czytelny. Jest to sposób elegancki, bo właśnie w ten sposób trzeba napisać mówiąc o programowaniu za pomocą frameworków. Kod ten jest skalowalny na wszelkie przeglądarki więc nie musimy się zamartwiać o to czy tu będzie działać, a tam już nie.

gconftool -s --type bool /apps/update-notifier/auto_launch false

Od teraz nasz ukochany system będzie nas powiadamiał o aktualizacjach wyświetlając ikonkę w tray’u po kliknięciu której wyświetli się Menedżer aktualizacji .

1. Jeśli zmienna $wgPasswordSalt jest ustawiona na true (domyślnie).
Wywołujemy jedno zapytanie do bazy danych:

UPDATE user SET user_password = MD5(CONCAT(user_id, '-', MD5('nowe_haslo'))) WHERE user_name = 'nazwa_usera';

2. Jeśli zmienna $wgPasswordSalt jest ustawiona na false.

UPDATE user SET user_password = MD5('nowe_haslo') WHERE user_name = 'nazwa_usera';

3. Wywołanie odpowiedniego skryptu PHP.

Ostatnią, IMHO, najlepszą metodą jest wywołanie skryptu odpowiedzialnego za zmianę hasła i podanie jej odpowiednich parametrów.

UWAGA! Opcja ta będzie działać tylko po „odpaleniu” skryptu przez konsolę (Unix’ową).

Plik o którym mowa znajduję się w lokalizacji: maintenance/changePassword.php, a wywołujemy go z parametrami: --user i --password.

 php maintenance/changePassword.php --user=nazwa_usera --password=nowe_haslo

To tyle jeśli chodzi o zmianę haseł w Wiki.

1. Otwieramy gconf-editor (Alt + F2, wpisujemy nazwę programu)
2. Przechodzimy do gałęzi: /apps/update_notifier
3. Odnajdujemy wpis: regular_auto_launch_interval i jego wartość ustawiamy na 0

Po tym zmianach będziemy informowani na bieżąco o nowych aktualizacjach.

1. Zmiana godzin zlecenia – czyli rozszerzamy i przenosimy zdarzenia

To zmian rozmiarów (czasów, aczkolwiek dla uproszczenia będę używał słów zmian rozmiarów) zdarzenia odpowiedzialna jest metoda eventResize. A do zmiany całych dni za pomocą Drag ‘n Drop odpowiedzialna jest funkcja eventDrop. Oczywiście do zmiany będą nam potrzebne dane które przechwycimy w pliku kalnedarz_do.php. Obsłużenie tych metod po strobie jQuery wygląda następująco:

eventDrop : function(calEvent, $event) {
	$.ajax({
		type : "GET",
		url: "kalendarz_do.php?co=resize&id="+calEvent.id+"",
		data: ({start: new Date(calEvent.start)/1000, end: new Date(calEvent.end)/1000})
	});
},
eventResize : function(calEvent, $event) {
	$.ajax({
		type : "GET",
		url: "kalendarz_do.php?co=resize&id="+calEvent.id+"",
		data: ({start: new Date(calEvent.start)/1000, end: new Date(calEvent.end)/1000})
});

I teraz obsługa tych zdarzeń po stronie serwera aby w naszej bazie coś się zmieniło. Jak pewnie zauważyliście przekazuje również ID tego zdarzenia aby można było jednoznacznie określić co ma być edytowane, plik kalendarz_do.php:

if ($_GET['co']=='resize')
{
	$baza->quick_sel("UPDATE kalendarz SET start=('1970-01-01 00:00'::timestamp + interval '{$_GET['start']}')::timestamp at time zone 'GMT',
			koniec=('1970-01-01 00:00'::timestamp + interval '{$_GET['end']}')::timestamp at time zone 'GMT'
			WHERE id={$_GET['id']}");
}

I teraz po zmianie rozmiaru (czasu), przeciągnięciu i upuszczeniu na inny dzień możemy zaobserwować zmiany.

2. Edytowanie i usuwanie zdarzeń

Umiemy już dodać, wyświetlić, zmienić dane to teraz czas na edycję i usuwanie. Można powiedzieć że jest to najbardziej skomplikowana część naszego kalendarza. Aby zrealizować tą funkcjonalność należy obsłużyć metodę eventClick. Obsługa tej metody wygląda następująco:

eventClick : function(calEvent, $event) {
	if (calEvent.readOnly) {
		return;
	}
 
	var $dialogContent = $("#event_edit_container");
	resetForm($dialogContent);
	var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
	var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
	var titleField = $dialogContent.find("input[name='title']").val(calEvent.title);
	var bodyField = $dialogContent.find("textarea[name='body']");
	bodyField.val(calEvent.body);
 
	$dialogContent.dialog({
		modal: true,
		height: 260,
		width: 400,
		title: "Edytuj zlecenie - " + calEvent.title,
		close: function() {
			$dialogContent.dialog("destroy");
			$dialogContent.hide();
			$('#calendar').weekCalendar("removeUnsavedEvents");
		},
		buttons: {
			Zamknij : function() {
				$dialogContent.dialog("close");
			},
			Usuń : function() {
				$calendar.weekCalendar("removeEvent", calEvent.id);
				$.ajax({
				type : "GET",
				url: "kalendarz_do.php?co=del&id="+calEvent.id+""
				});
				$dialogContent.dialog("close");
			},
			Zapisz : function() {
				calEvent.start = new Date(startField.val());
				calEvent.end = new Date(endField.val());
				calEvent.title = titleField.val();
				calEvent.body = bodyField.val();
 
				$calendar.weekCalendar("updateEvent", calEvent);
				var $this=$(this); 
				$.ajax({
					type : "GET",
					url: "kalendarz_do.php?co=edit&id="+ calEvent.id +"",
					data: ({start: new Date(startField.val())/1000, end: new Date(endField.val())/1000, title: titleField.val(), body: bodyField.val()})
				});
				$dialogContent.dialog("close");
			}
		}
	}).show();
 
	var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
	var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
	$dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
	setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
	$(window).resize().resize();
}

Najważniejszymi elementami tej metody jest stworzenie okienka dialogowego w którym umieścimy dwie select listy z możliwością wyboru godzin i zaznaczoną godziną zdarzenia i polami tekstowymi z danymi. Po raz kolejny widzimy wywołanie funkcji setupStartAndEndTimeFields, wyglądającą:

function setupStartAndEndTimeFields($startTimeField, $endTimeField, calEvent, timeslotTimes) {
 
      for (var i = 0; i < timeslotTimes.length; i++) {
         var startTime = timeslotTimes[i].start;
         var endTime = timeslotTimes[i].end;
         var startSelected = "";
         if (startTime.getTime() === calEvent.start.getTime()) {
            startSelected = "selected=\"selected\"";
         }
         var endSelected = "";
         if (endTime.getTime() === calEvent.end.getTime()) {
            endSelected = "selected=\"selected\"";
         }
         $startTimeField.append("<option value=\"" + startTime + "\" " + startSelected + ">" + timeslotTimes[i].startFormatted + "</option>");
         $endTimeField.append("<option value=\"" + endTime + "\" " + endSelected + ">" + timeslotTimes[i].endFormatted + "</option>");
 
      }
      $endTimeOptions = $endTimeField.find("option");
      $startTimeField.trigger("change");
   }
 
   var $endTimeField = $("select[name='end']");
   var $endTimeOptions = $endTimeField.find("option");

To ona odpowiada za poprawne wyświetlenie czasów zdarzeń. Przyjrzyjmy się teraz przyciskom Usuń i Zapisz.

Przycisk Usuń

Usuń : function() {
	$calendar.weekCalendar("removeEvent", calEvent.id);
	$.ajax({
		type : "GET",
		url: "kalendarz_do.php?co=del&id="+calEvent.id+""
	});
	$dialogContent.dialog("close");
}

Ten przycisk przekazuje nam do pliku kalendarz_do.php akcje jaka ma być wykonana na tym zdarzeniu, czyli w tym wypadku del (usunięcie) i ID rekordu (zdarzenia) które ma być usunięte. I teraz kod który wykonany zostanie po stronie serwera, czyli samo usunięcie z bazy:

if ($_GET['co']=='del')
{
   "DELETE FROM kalnedarz WHERE id={$_GET['id']}"
}

Przycisk Zapisz

Zapisz : function() {
	calEvent.start = new Date(startField.val());
	calEvent.end = new Date(endField.val());
	calEvent.title = titleField.val();
	calEvent.body = bodyField.val();
 
	$calendar.weekCalendar("updateEvent", calEvent);
	var $this=$(this); 
	$.ajax({
		type : "GET",
		url: "kalendarz_do.php?co=edit&id="+ calEvent.id +"",
		data: ({start: new Date(startField.val())/1000, end: new Date(endField.val())/1000, title: titleField.val(), body: bodyField.val()})
	});
	$dialogContent.dialog("close");
}

Po naćiśnięciu tego przycisku do pliku kalendarz_do.php przekazane zostają dwie zmienne jaka akcja ma być wykonywana – edit (edycja) i ID rekordu do zmiany. Teraz czas na obsługę tego zdarzenia po stronie serwera.

if ($_GET['action']=='edit')
{
	"UPDATE kalendarz SET start=('1970-01-01 00:00'::timestamp + interval '{$_GET['start']}')::timestamp at time zone 'GMT',
		koniec=('1970-01-01 00:00'::timestamp + interval '{$_GET['end']}')::timestamp at time zone 'GMT',
		title='{$_GET['title']}', body='{$_GET['body']}' WHERE id={$_GET['id']}");
}

4. Epilog

Teraz już mamy w pełni obsłużone dodawanie, edycję, usuwanie i pokazywanie zdarzeń za pomocą kalendarza jQuery i dynamicznych danych pobieranych z bazy SQL.

Na stronie: http://www.redredred.com.au/projects/jquery-week-calendar/, mamy w pełni opisane API, więc w razie wątpliwości odsyłam właśnie do tej strony, są tam opisane wszystkie metody jakimi dysponuje ta biblioteka. Do prawidłowego posługiwania się ta biblioteką jest potrzeba podstawowa znajomość frameworka jQuery, jeśli jej nie posiadasz odsyłam do dokumentacji jQuery.

1. Wprowadzenie
Na samym początku musimy wyświetlić nasz kalendarz. Do poprawnego generowania kalendarza będa nam potrzebne m. in.:

• jQuery w wersji większej niż 1.3.2
• jQuery UI
• oczywiście plik z samą biblioteką kalendarza czyli jQuery Week Calendar
• dodatkowo możemy potrzebować plików ze stylami zarówno do UI jak i kalendarza UI CSS

Teraz w sekcji <head> dodajemy wszytstkie biblioteki:

<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css' />
<link rel='stylesheet' type='text/css' href='jquery.weekcalendar.css' />
 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>
<script type='text/javascript' src='jquery.weekcalendar.js'></script>

W ciele naszego strony umieszczamy kontener:

<div id='calendar'></div>

to właśnie w nim będzie wyświetlany nasz kalendarz.

2. Generujemy kalendarz
„Serce” naszego kalendarza to ta jedna linijka $('#calendar').weekCalendar. To właśnie do tej funkcji będziemy dopisywać kolejne metody i personalizować nasz kalendarz. Standardowe uruchomienie:

<script type='text/javascript'>
	var year = new Date().getFullYear();
	var month = new Date().getMonth();
	var day = new Date().getDate();
	var eventData = {
	events : [
			{"id":1, "start": new Date(year, month, day, 12), "end": new Date(year, month, day, 13, 35),"title":"Zdarzenie jeden"},
			{"id":2, "start": new Date(year, month, day, 14), "end": new Date(year, month, day, 14, 45),"title":"Kolokwium z algebry"},
			{"id":3, "start": new Date(year, month, day + 1, 18), "end": new Date(year, month, day + 1, 18, 45),"title":"Impreza u Kuby"},
			{"id":4, "start": new Date(year, month, day - 1, 8), "end": new Date(year, month, day - 1, 9, 30),"title":"Narty z kolegami"},
			{"id":5, "start": new Date(year, month, day + 1, 14), "end": new Date(year, month, day + 1, 15),"title":"Gramy w chinczyka"}
		]
		};
 
$(document).ready(function() {
		$('#calendar').weekCalendar({
			timeslotsPerHour : 2,
			allowCalEventOverlap : true,
			overlapEventsSeparate: true,
			firstDayOfWeek : 1,
			businessHours :{start: 8, end: 18, limitDisplay: true },
			daysToShow : 7,
			longDays : ['Niedziela', 'Poniedziałek', 'Wtorek', 'Śoda', 'Czwartek', 'Piatek', 'Sobota'],
			shortMonths : ['Sty', 'Luty', 'Marz', 'Kwie', 'Czerw', 'Lip', 'Sierp', 'Wrze', 'Paźdz', 'List', 'Gru'],
			timeFormat : 'G:i',
			timeSeparator: ' - ',
			use24Hour: true,
			height: function($calendar){
				return $(window).height() - $("h1").outerHeight();
			},
			eventRender : function(calEvent, $event) {
				if(calEvent.end.getTime() < new Date().getTime()) {
					$event.css("backgroundColor", "#aaa");
					$event.find(".time").css({"backgroundColor": "#999", "border":"1px solid #888"});
				}
			},
			data:eventData
		});
	});
 
</script>

Oto wygenerowany kalendarz: kalendarz-1.

Teraz opiszmy co robimy dokładnie. W pierwszych 13 liniach definiujemy sobie jakieś przykładowe zdarzenia. To co dzieje się w funkcji weekCalendar, to już sprawa API, no i tego jak użyjemy odpowiednich funkcji.

Można się zgodzić że takie dodawanie nowych zdarzeń, poprzez wpisywanie ich w formacie JSON jest bardzo niewygodne i bardzo uciążliwe. Dobrym pomysłem będzie zintegrować cały kalendarz z bazą danych, podniesie to jego funkcjonalność i przydatność podczas implementacji różnego rodzaju aplikacjach.

3. Dodawanie nowych zdarzeń

Tworzymy sobie tabelkę w której będziemy trzymać nasze zdarzenia:

CREATE TABLE kalendarz (
    id serial NOT NULL,
    start timestamp without time zone,
    koniec timestamp without time zone,
    title text,
    body text
);

W poszczególnych kolumnach będziemy trzymać kolejno ID danego zdarzenia, datę rozpoczęcia, datę zakończenia, nagłówek i treść danego zdarzenia.

Funkcja która odpowiedzialna jest za dodawanie nowego zdarzenia to eventNew:

eventNew : function(calEvent, $event) {
         var $dialogContent = $("#event_edit_container");
         resetForm($dialogContent);
         var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
         var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
         var titleField = $dialogContent.find("input[name='title']");
         var bodyField = $dialogContent.find("textarea[name='body']");
 
 
         $dialogContent.dialog({
			modal: true,
			height: 260,
			width: 400,
            title: "Nowe zdarzenie",
            close: function() {
               $dialogContent.dialog("destroy");
               $dialogContent.hide();
               $('#calendar').weekCalendar("removeUnsavedEvents");
            },
            buttons: {
               Zamknij : function() {
                  $dialogContent.dialog("close");
               },
               Dodaj : function() {
                  calEvent.id = id;
                  id++;
                  calEvent.start = new Date(startField.val());
                  calEvent.end = new Date(endField.val());
                  calEvent.title = titleField.val();
                  calEvent.body = bodyField.val();
 
                  $calendar.weekCalendar("removeUnsavedEvents");
                  $calendar.weekCalendar("updateEvent", calEvent);
					$.ajax({
					type : "GET",
				 	url: "kalendarz_do.php?co=save",
   					data: ({start: new Date(startField.val())/1000, end: new Date(endField.val())/1000, title: titleField.val()})
 					});
                  $dialogContent.dialog("close");
               }
            }
         }).show();
 
         $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
         setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
 
      }

Wywołujemy w niej kolejną bardzo przyjemną funkcjonalność jaką oferuje nam jQurey a mianowicie okienka. To właśnie w nim będziemy dodawać kolejne zdarzenia. Wszystkie dane wysyłane są za pomocą funkcji do obsługi AJAX’a dostarczonej przez twórców jQuery.
Teraz w naszym okienku powinny pojawić się select listy z możliwością wyboru godziny, ta sprawę załatwi za nasz funkcja setupStartAndEndTimeFields:

function setupStartAndEndTimeFields($startTimeField, $endTimeField, calEvent, timeslotTimes) {
 
      for (var i = 0; i < timeslotTimes.length; i++) {
         var startTime = timeslotTimes[i].start;
         var endTime = timeslotTimes[i].end;
         var startSelected = "";
         if (startTime.toGMTString() === calEvent.start.toGMTString()) {
            startSelected = "selected=\"selected\"";
         }
         var endSelected = "";
         if (endTime.toGMTString() === calEvent.end.toGMTString()) {
            endSelected = "selected=\"selected\"";
         }
         $startTimeField.append("<option value=\"" + startTime + "\" " + startSelected + ">" + timeslotTimes[i].startFormatted + "</option>");
         $endTimeField.append("<option value=\"" + endTime + "\" " + endSelected + ">" + timeslotTimes[i].endFormatted + "</option>");
 
      }
      $endTimeOptions = $endTimeField.find("option");
      $startTimeField.trigger("change");
   }
 
   var $endTimeField = $("select[name='end']");
   var $endTimeOptions = $endTimeField.find("option");

Teraz trzeba stworzyć kontener w którym będziemy trzymać nasz pola formularza:

<div id="event_edit_container" style="display: none;">
	<form action="" method="post" autocomplete="off" class="tabled">
	<input type="hidden" />
	<table>
		<tr><td><span>Data: </span><span class="date_holder"></span></td></tr>
		<tr><td>Start:</td><td><select name="start"><option value="">Wybierz godzine</option></select></td></tr>
 
		<tr><td>Koniec: </td><td><select name="end"><option value="">Wybierz godzine</option></select></td></tr>
		<tr><td>Nagłówek:</td><td><input type="text" name="title" id="nr_rejestracyjny" /></td></tr>
		<tr><td>Opis:</td><td><textarea name="body"></textarea></td></tr>
	</table>
	</form>
</div>

Po ustawieniu wszystkich opcji kolejnym krokiem jest obsłużenie tych wszystkich danych po stronie serwera i zapisanie ich w bazie danych. U mnie za wszelkie operacje na tym kalendarzu odpowiada plik kalendarz_do.php jako pierwszy atrybut przekazuje akcje jaka ma być wykonana. W tym wypadku kalendarz_do.php?co=save

if ($_GET['co']=='save')
{
    "INSERT INTO kalendarz (start, koniec, title, body) values (
        ('1970-01-01 00:00'::timestamp + interval '{$_GET['start']}')::timestamp at time zone 'GMT',
        ('1970-01-01 00:00'::timestamp + interval '{$_GET['end']}')::timestamp at time zone 'GMT',
        '{$_GET['title']}', '{$_GET['body']}')");
}

Jako że dane ze skryptu otrzymujemy w postaci integer jako liczba sekund, do bazy zapiszemy sobie w normalnej formie, aby można było cokolwiek z tego wiedzieć i móc używać w innych miejscach naszej aplikacji.

4. Odczytywanie zdarzeń z bazy danych

Mamy już obsłużone dodawanie nowych zdarzeń, czas aby jakoś pokazać użytkownikowi dane jakie dodał. Za wczytwanie odpowiada metoda:

data: 'kalendarz_do.php?co=get'

Teraz podczas uruchamiania naszego kalendarza do pliku kalendarz_do.php zostaje przesłane rządanie aby „odpalić” pobieranie danych z bazy. Po stronie serwera wygląda to tak:

if ($_GET['action']=='get')
{
    //łaczymy sie z baza
    zapytanie("SELECT id, extract (epoch from start::timestamp) as start, extract (epoch from koniec::timestamp) as end, title, body FROM kalendarz");
 
    for($i=0 ; $i<ilosc_rekordów_w_bazie ; $i++)
    {
        $id; //id naszego zdarzenia
        $start; //start - data rozpoczęcia
        $end; //koniec - data zakończenia
        $title; //title - nagłówek zdarzenia
        $body; //treść - treść zdarzenia
        $tab[$i]['id'] = $id;
        $tab[$i]['start'] = date('c', $start);
        $tab[$i]['end'] = date('c', $end);
        $tab[$i]['title'] = $title;
        $tab[$i]['body'] = $body;
    }
 
    echo json_encode($tab);
}

Jako że wszystkie dane do JS podawane są w formacie JSON, musimy użyć funkcji PHP:json_encode, aby zakodować tablice właśnie na ten standard.

5. Epilog
Właśnie w ten sposób stworzyliśmy prosty sposób dodawania i wyświetlania dodanych zdarzeń w kalendarzu jQuery. W kolejnej części zajmiemy się edycją i usuwaniem zdarzeń.

Kolejna część: http://piotrooo.com/2010/01/kalendarz-google-w-jquery-cz-2/

To może teraz jaki miałem problem. Podczas wypełniania jednego z pół formularza chciałem aby po użyciu Autocomplete został wysyłany ten właśnie input na podstawie którego maja być wypełniane inne.

jQuery("#id_input").autocomplete("search.php", {
    minChars: 2,
    formatItem: function(data, i, n, value) {
    return value.split(";")[0];
    },
    formatResult: function(data, value) {
    return value.split(";")[0];
    }
});

W takiej postaci dostawałem wyniki i po jakiejś pół godziny wertowania docs’ów jQuery znalazłem w tym miejscu: jQuery:Autocomplete rozwiązanie mego problemu mianowicie funkcję .result(function(event, item) czyli to co zostaje zwracane podczas pokazywania rezultatu, kod wynikowy wygląda tak:

jQuery("#id_input").autocomplete("search.php", {
    minChars: 2,
    formatItem: function(data, i, n, value) {
    return value.split(";")[0];
    },
    formatResult: function(data, value) {
    return value.split(";")[0];
    }
}).result(function(event, item) {
      document.formularz.submit();
});

Proste, łatwe i przyjemne.

Jak pobiera się pliki
Pierwszym pytaniem na jakie musimy sobie odpowiedzieć brzmi: ‘Jak PHP realizuje pobierania plików?’. Odpowiedź jest prosta – PHP wysyła nagłówki zgodne z protokołem HTTP za pomocą funkcji PHP:header.

Pobierania plików z ograniczeniem
Aby pobrać jakiś plik musimy kolejno:

1. wysłać nagłówki
2. opróżnić bufory
3. przeczytać dany plik

Do poprawnego ściągnięcia pliku musimy wysłać odpowiednie nagłówki, myślę że te są wystarczające:

header("Cache-control: private");
header("Content-Type: application/octet-stream");
header("Content-Length: ".filesize($file_down));
header("Content-Disposition: filename=\"$download_file\"");

pokazujemy w ten sposób co ma być ściągane, jaki rozmiar i jak ma się nazywać plik u nas na komputerze.

To teraz zobaczmy jak powinien wyglądać kod odpowiedzialny za ograniczenie prędkości ściągania pliku:

$download_rate = 20.5;
if(file_exists('plik.txt') && is_file('plik.txt'))
{
	header("Cache-control: private");
	header("Content-Type: application/octet-stream");
	header("Content-Length: ".filesize('plik.txt'));
	header("Content-Disposition: filename=\"plik_pobrany.txt\"");
	flush();
	$file = fopen('plik.txt', "r");
	while(!feof($file))
	{
		print fread($file, round($download_rate * 1024));
		flush();
		sleep(1);
	}
	fclose($file);
}

Teraz może wyjaśnię jak to działa. Wysyłamy nagłówki odpowiedzialne za pobieranie pliku. Czyścimy bufor za pomocą PHP:flush, czytam nasz plik.txt, za pomocą funkcji PHP:fread, i ustawiamy opóźnienie funkcją PHP:sleep. Po tych wszystkich zabiegach w zmiennej $download_rate ustawiamy wielkość z jaką ma być pobierany plik. Wielkość ta jest podawana w kilobajtach (KB).