Stawiamy cele

Najpierw postaram się omówić co będę chciał zbudować w tym tutorialu. Moim celem jest napisanie uploadera który będzie w przeglądarkach Chrome i Firefox zastępować tradycyjny HTMLowy formularz. Nasz skrypt bedzie przyjmował pliki metodą drag & drop i wyświetlał ich listę w postaci kontenerów. Po wykryciu, że internauta trzyma pliki nad przeglądarką nastąpi zachęcenie go do upuszczenia ich w odpowiednim miejscu poprzez podmianę napisu. Każdy kontener zaś będzie wyświetlał nazwę wybranego pliku, miniaturkę jeśli wybrany plik jest grafiką lub ewentualnie ikonkę zastępczą, pole tekstowe gdzie można dodać opis oraz przycisk wysyłania. Kontener będzie zawierał także przycisk usuwający dany plik z listy do wysłania oraz pole na wyświetlanie komunikatów. W momencie kliknięcia przycisku wysłania sam przycisk zniknie (aby użytkownik nie wysłał kilka razy tego samego pliku) i pojawi się w razie nie udanego uploadu. Każdorazowa próba wysłania spowoduje wyświetlenie odpowiedniego napisu w polu komunikatów. Jeśli chodzi o przesłane pliki to będą one zapisywane pod ustawionym adresem a opisy do nich będą lądować w pliku tekstowym o nazwie <nazwa pliku>.txt.

Wersja demonstracyjna skryptu (nie zapisuje plików na serwerze)

Gotowiec do pobrania na dole strony.

Kod HTML

Zacznijmy od napisania kodu tradycyjnego formularza:

<div id="uploadHTML">
    <form enctype="multipart/form-data" action="uploadHtml.php" method="POST">
        <input name="upload" type="file" />
        <input value="Wyślij" type="submit" />
    </form>
</div>

Ważne jest by objąć tą część kodu w blok z nadaną klasą uploadHTML gdyż później będziemy usuwać stary typ formularz poprzez odwołanie się do tej klasy. Podobny blok tworzymy dla naszego nowoczesnego uploadera:

<div id="uploadJS" style="display: none">
    //tu dalsza część kodu
</div>

Teraz wrzucamy do niego dwa elementy. Pole gdzie użytkownik ma upuścić plik:

<div class="uploader" id="uploader">
    Przenieś tu pliki które chcesz<br />wysłać na serwer
</div>

oraz miejsce na listę plików do wysłania na serwer:

<div class="uploadList">
    //tu dalsza część kodu
</div>

Do tego diva wstawimy teraz przykładowy element a następnie go schowamy. Będzie to szablon dla skryptu jak mają wyglądać nowe elementy na liście.

<div id="uploadFileTemplate" class="uploadFile">
    <div class="header">
        <div class="name">Nazwa pliku.jpg</div>
        <div class="delete">×</div>
    </div>
    <div class="thumb">
        <img src="file.png" alt="Miniaturka" class="image" />
    </div>
    <div class="info">
        <textarea name="description"></textarea>
        <p class="alert"></p>
        <input type="hidden" name="file" value="">
        <div id="startUpload" class="submit">Wyślij plik</div>
    </div>
</div>

W powyższym nie trzeba raczej niczego tłumaczyć po za tym, że div z id startUpload będzie przyciskiem który rozpocznie upload a zaś plik file.png jest naszą domyślną ikonką. Aby szablon był niewidoczny dla użytkownika w arkuszu CSS piszemy:

#uploadFileTemplate{
        display: none;
}

A teraz Javascript

Po pierwsze dołączymy do naszego kodu bibliotekę jQuery ponieważ dla łatwości pisania najlepiej będzie oprzeć nasz skrypt na tym frameworku.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

Teraz zdefiniujemy parę zmiennym których użycie będę wyjaśniał później oraz napiszemy instrukcję która zapewni nam, że nasz kod nie wykona się za nim wszystkie elementy strony nie będą załadowane.

var ePage;
var eDropPlace;
var eStartUpload;
var filesToUpload;
var newId;
var idi = 0;

$(document).ready(function(){
    //tu dalsza część kodu
});

Wewnątrz tego kodu umieszczamy teraz instrukcję warunkową która wyświetli nasz uploader w przeglądarkah obsługujących wykorzystywane przez nas technologie:

if (window.File && window.FileReader && window.FileList) {
    $("#uploadHTML").remove();
    $("#uploadJS").show();
    ePage               = document.getElementsByTagName('body').item(0);
    eDropPlace          = document.getElementById("uploader");
    //tu dalsza część kodu
}

Powyższy kod działa w ten sposób, że sprawdzane jest czy przeglądarka obsługuje używane przez nas obiekty File, FileReader oraz FileList. Jeśli tak to usuwamy tradycyjny formularz a wyświetlamy ten nasz. Po tej operacji możemy już pobrać referencje do dwóch ważnych obiektów w naszym kodzie. ePage to cała nasza strona dla której będziemy wykrywali czy użytkownik przeniósł pliki nad okno przeglądarki. eDropPlace natomiast to miejsce gdzie użytkownik ma upuścić pliki. Mogłoby być to to samo miejsce ale w tym tutorialu zrobimy rozróżnienie aby lepiej wytłumaczyć czym to się różni.

Zdarzenia ondragover i ondragleave

Teraz poniżej tego (ale przed nawiasem klamrowym) dodamy obsługę zdarzeń. Po pierwsze obsłużmy przeniesienie plików nad przeglądarkę:

ePage.ondragover=function(f){
    eDropPlace.innerHTML="Upuśc plik na to pole";
    f.dataTransfer.dropEffect="copy";
    f.preventDefault();
    return false
};

ondragover to właśnie zdarzenie polegające na tym, że użytkownik zaznaczył w folderze pliki i za pomocą myszki przeniósł je nad okno przeglądarki. Jeśli takie coś wykryjemy to zmieniamy treść napisu oraz zmieniamy kursor na informujący, że będziemy kopiować pliki (w Chrome np. przy kursorze pojawia się napis Kopiuj). MetodapreventDefault() natomiast zapewni nam, że przeglądarka nie zacznie się dziwnie zachowywać np. nie będzie zaznaczany tekst podczas przesuwania kursora nad oknem.

Podobne operacje wykonujemy dla zdarzenia przeciwnego czyli ondragleave:

ePage.ondragleave=function(f){
    eDropPlace.innerHTML="Przenieś tu pliki które chcesz<br />wysłać na serwer";
    f.dataTransfer.dropEffect="copy";
    f.preventDefault();
    return false
};

Teraz czas na najważniejszą część kodu która obsłuży upuszczenie plików na okno przeglądarki (zdarzenie ondrop) i doda je do listy.

Zdarzenie ondrop

ePage.ondrop=function(g){
    g.preventDefault();
    files = g.dataTransfer.files;
    eDropPlace.innerHTML ="Przenieś tu pliki które chcesz<br />wysłać na serwer";

    //tu dalsza część kodu
}

Ponownie skorzystaliśmy z metody preventDefault() gdyż przeglądarki domyślnie po upuszczeniu na nie pliku próbują je wyświetlać lub „ściągnąć”. Musimy temu zapobiec aby mógł się wykonać dalszy kod. Gdy to już mamy zapewnione to możemy skorzystać z instrukcji g.dataTransfer.files która zwróci nam tablicę obiektów poszczególnych plików. G zostało nam podane jako argument funkcji która wykona się w momencie zajścia zdarzenia ondrop. A jako, że internauta nie trzyma już plików to nie zajdzie zdarzenie ondragleave więc w powyższym kodzie obsługujemy przywrócenie napisu.

Teraz możemy już sobie iterować po tej tablicy i wyciągać kolejne obiekty plików do uploadu:

for(var i = 0, f; f = files[i]; i++){
    var reader=new FileReader();

    //tu dalsza część kodu

    reader.readAsDataURL(f);
}

Powyższa pętla przypisuje kolejne obiekty plików do zmiennej f, tworzy nowy obiekt klasy FileReader i wczytuje plik do stworzonego obiektu. I teraz naszym zadaniem jest napisanie funkcji która zostanie wykonana gdy cały plik zostanie wczytany (jest on wczytywany asynchronicznie z powodu opóźnienia jakie może wywołać obciążony dysk twardy). Wykonuje się to za pomocą nietypowej konstrukcji która należy umieścić przed użyciem metody readAsDataURL:

reader.onload = (function(theFile) {
    return function(e) {
        //tu dalsza część kodu
    };
})(f);

Jakkolwiek dziwnie powyższy kod wygląda to nadszedł czas na napisanie funkcji tworzącego nowe elementy na liście. Na początek musimy przyjąć, że każdemu nowemu kontenerowi będziemy nadawać ID wg schematu: file1, file2, file3 itd. Realizuje to poniższy kod:

var newId = "file"+idi; idi++;
$(".uploadList").prepend("<div id=\""+newId+"\" class=\"uploadFile\">"+$("#uploadFileTemplate").html()+"</div>");

Jak widać stworzyliśmy nowy kontener, nadaliśmy mu id i skopiowaliśmy do niego nasz szablon z diva uploadFileTemplate. Nowy element pojawi się na liście plików na samej górze dzięki metodzie prepend z biblioteki jQuery.

Teraz czas na wypełnienie naszego szablonu i nadaniu zdarzeń dla przycisków:

$("#"+newId+" .header .name").text(theFile.name);

//wrzuca miniatirku zdjęć
if(theFile.type.match(/image.*/))
    $("#"+newId+" .thumb .image").attr("src",e.target.result);

Obiekt theFile w tym momencie przechowuje informacje i naszym pliku. Pobieramy z niego nazwę pliku (theFile.name) i wpisujemy w odpowiednim miejscu. Dalej sprawdzamy czy nasz plik jest obrazkiem za pomocą theFile.type.match(/image.*/). Jeśli tak to odczytujemy nasz plik z zmiennej e.target.result i wpisujemy jako atrybutsrc miniaturki. Plik jest przechowywany w wspomnianej zmiennej w formacie base64. Polecam kliknąć na tak wyświetloną grafikę PPM i wybrać opcję Pokaż obrazek. Zobaczymy wtedy w pasku adresu jak wygląda grafika w takim kodowaniu.

//zapisuje plik do pola tekstowego
$("#"+newId+" input[name=\"file\"]").val(e.target.result.split(",")[1]);

//obsługa usuwania pliku
$("#"+newId+" .delete").click(function(z){
    $("#"+newId).remove();
});

//obsługa wysyłania
$("#"+newId+" #startUpload").click(function(z){
    trySendFile(newId);
});

Wracając do naszego szablonu to teraz znowu musimy odczytać nasz plik i zapisać go do pola tekstowego o nazwie file. Teraz jednak przypiszemy tylko sam kod bez informacji o typie kodowania. Przy użyciu javascriptowej metody split wytniemy zbędny w tym przypadku napis data:image/png;base64,. W dalszej części kodu oskryptowujemy przycisk anulowania wysyłania pliku którego kliknięcie spowoduje usunięcie całego kontenera oraz przycisk wysyłania pliku którego kliknięcie wywoła większą funkcję trySendFile.

I to wszystko jeśli chodzi o obsługę zdarzenia ondrop. Czy czegoś nam brakuje? Tak, definicji funkcji…

trySendFile

function trySendFile(eId){
    $("#"+eId+" #startUpload").hide();

    var fileData = $("#"+eId+" input[name=\"file\"]").val();
    fileData = fileData.replace(/\+/gi, '-');
    fileData = fileData.replace(/\//gi, '_');

    //dalsza część kodu
}

Po kliknięciu przycisku wysyłania pierwsze co musi się stać to schowanie owego guzika. Następnie z pola tekstowego file odczytujemy zakodowany plik i podmieniamy w nim pewne znaki. Ktoś może zapytać po co? Po odpowiedź odprowadzam do artykułu o base64 na Wikipedii a dokładniej to do akapitu pod tabelką. My będziemy transportować plik w ciągu zmienna1=wartosc1&zmienna1=wartosc2… więc musimy zadbać by żadne znaki nam nie uszkodziły danych. Dwie linijki z powyższego kodu realizują właśnie podmianę omówioną na Wikipedii.

Teraz możemy w końcu znapisać kod które wyśle wszystkie dane na serwer (np do pliku php/getFile.php):

$.ajax({
    type: "POST",
    url: "php/getFile.php",
    data:   "file="+fileData+
            "&name="+encodeURIComponent($("#"+eId+" .header .name").html())+
            "&description="+encodeURIComponent($("#"+eId+" textarea[name=\"description\"]").val()),
    //tu za chwilę dalszy ciąg kodu
});

Jak widać używamy tu funkcji ajax z biblioteki jQuery. Jako parametr data podajemy ciąg gdzie kolejno składamy zmienne file zawierającą kod base64, name zawierającą nazwę pliku oraz description zawierającą treść z pola tekstowego. Wartości pól name i description zabezpieczyliśmy funkcją encodeURIComponent aby dało się je bezpiecznie przesłać w tej formie. I tu znowu ktoś może zapytać dlaczego nie użyliśmy tej metody wcześniej przy zabezpieczaniu base64. Powód jest prosty. Wspomniana metoda podmienia wszystkie znaki specjalne. Jeśli plik waży kilka megabajtów (np. plik .mp3) to użycie omawianej metody powoduje chwilowe zawieszenie przeglądarki. A, że na szczęście w base64 występują tylko dwa psujaki to o wiele optymalnej jest użyć podmiany metodą replace.

Dane zostały wysłane więc teraz trzeba by było obsłużyć odpowiedź. Za nim to jednak zrobimy napiszmy:

Kod po stronie serwera

Tu nie będziemy się rozpisywać. Nie podam tu jakiegoś bardzo użytecznego kodu a tylko skrypt który pozwoli przetestować nam uploader i zrozumieć jak należy odbierać kod base64.

<?php
    $name = str_replace('..',' ',$_POST['name']);
    $name = str_replace('/',' ',$_POST['name']);
    $name = str_replace('.exe',' ',$name);

    if(!file_exists("files/".$name)){
        //dalszy kod
    } else echo "error!Taki plik już istnieje";
?>

Jak widać w pliku getFile.php najpierw usuwamy z nazwy pliku podwójne kropki i ukośniki aby zapobiec, że jakiś spryciarz zapisze nam plik po za naszym folderem. Usuwamy także rozszerzenia z plików wykonywalnych dla bezpieczeństwa serwera i osoby która będzie te pliki przeglądać. Gdy to już zrobimy sprawdzamy czy nie ma takiego pliku w folderze do uploadu. Jeśli nie to wykonujemy dalszy kod, w przeciwnym wypadku zwracamy przeglądarce komunikat o błędzie. Komunikaty będziemy zwracać w formacie <typ komunikatu>!<treść komunikatu>. Wspomniany dalszy kod wygląda następująco:

$file = str_replace('-','+',$_POST['file']);
$file = str_replace('_','/',$file);
$f = fopen("files/".$name, "wb");
fwrite($f, base64_decode($file));
fclose($f);
$f = fopen("files/".$name.".txt", "wb");
fwrite($f, $_POST['description']);
fclose($f);
echo "ok!Plik zapisano";

Po pierwsze przywracamy podmienione wcześniej znaki. Po drugie otwieramy plik o odpowiedniej nazwie i zapisujemy do niego odkodowaną za pomocą base64_decodetreść pliku. Po trzecie zaś otwieramy plik o nazwie <nazwa pliku uploadowanego>.txt i wrzucamy do niego opis napisany przez internautę. Po czwarte zwracamy komunikat, że wszystko poczło dobrze i po piąte…

Piszemy ostatni fragment kodu JS

Teraz wracamy do naszej niedokończonej funkcji ajaxowej i dopisujemy odbiór komunikatów:

    error: function(xhr, ajaxOptions, thrownError){
            $("#"+eId+" p.alert").text("Błąd połęczenia");
            $("#"+eId+" #startUpload").show();
        },
    success: function(msg){
            $("#"+eId+" #startUpload").show();
            var data = msg.split("!");
            switch(data[0]){
                case "error":    $("#"+eId+" p.alert").text(data[1]);
                                 break
                case "ok":       $("#"+eId+" p.alert").text(data[1]);
                                 $("#"+eId+" #startUpload").remove();
                                 break;
                default:         alert(msg);
                                 break;        
            }
        }

Funkcja napisana po parametrze error jest wykonywana gdy przeglądarka nie może połączyć się z serwerem lub znaleźć pliku. W takim przypadku wyświetlamy internaucie napis, że Brak połączenia i przywracamy przycisk by mógł spróbować raz jeszcze. Zaś success odnosi się do przypadku gdy serwer zwrócił nam jakąś sensowną odpowiedź. Wtedy także przywracamy przycisk a odpowiedź z serwera (zmienna msg) rozwalamy na dwie części znaną już metodą split. Potem sprawdzamy czy komunikat jest typu error czy ok i wykonujemy odpowiednie operacje: wyświetlamy treść komunikatu i ewentualnie kasujemy przycisk wysyłania jak wszystko poszło ok. Gdyby zaś nie udało nam się rozpoznać typu komunikatu (np. zwrócono nam błąd php) to wyświetlamy całość za pomocć alertu

Gotowiec

Wszystkie pliki potrzebne do uruchomienia stworzone uploadera można pobrać stąd.

Nie, dziękuję. Chodzi to, że niedawno przerzuciłem się z tabelek na divy bo wszyscy mówią, że to jest lepsze. Ale ostatnio zaglądałem do kodu phpBB3 i tam wszystko stoi na tabelkach. Wydawało mi się, że twórcy tego skryptu znają się na swojej pracy a jednak korzystają z starych rozwiązań. To jak to w końcu jest? Co jest lepsze? Tabelki czy divy?

Obydwa rozwiązania są dobre w zależności do czego je używasz. Mówiąc krótko divy powinny być używane do budowy kontrukcji wyglądu strony. Na przykład umieszczenia loga na górze, sidebara z boku i stopki na dole. Tabelki zaś należy stosować tylko gdy chcemy wyświetlić jakieś dane tabelaryczne. Podchodzą pod to między innymi dane statystyczne oraz wielokolumnowe listy jak na np. interfejsy na forach. Tabelek nie powinno zaś się używać gdy chcemy dla przykładu stworzyć trzy kolumnową stronę i w tym celu tworzyć tabeli z trzema kolumnami. Takie rozwiązanie to nieporozumienie gdyż zwiększa czas jaki przeglądarki potrzebują do wyświetlenia witryny. Da się zauważyć to opóźnienie gdy np. środkowa kolumna zawiera dużo grafik. Wtedy na wyświetlenie komórki po prawej możemy musieć trochę poczekać.

Ok. A jak wygląda sprawa z ramkami?

Zwykłe ramki wyszły już całkiem z użycia. Chodzi mi tu o elementy frame i frameset. Nie powinno się ich używać gdyż obecnie istnieją o wiele lepsze rozwiązania jak na przykład php lub ajax. Co zaś się tyczy ramek pływających, to znaczy elementów iframe to są one wciąż w użyciu ale radzi się ich już wystrzegać. Inaczej mówiąc skorzystanie z nich to nic złego ale jeśli tylko jest możliwość to powinno skorzystać się z innej techniki.

Ciekawe. A są jeszcze jakieś nowe standardy o których powinien wiedzieć każdy początkujący?

Długo by tu wymieniać ale pokrótce mogę wymienić parę punktów. Po pierwsze aktualnie jedyne kodowanie znaków jakiego powinno się używać to UTF-8. I od tego nie ma odstępstw. Używając tego kodowania pozbędziesz się problemów na stronach wielojęzykowych oraz przy korzystaniu z zewnętrznych interfejsów np. przycisków Facebooka. Ponadto wycofano wszystkie dziwne znaczniki typu <font>, <big> itd dotyczących wyglądu tekstu. Zamiast nich należy stosować znacznika <span> i odpowiednie style CSS. Nawet zamiast <b> radzi się korzystać z <strong> chociaż ten pierwszy wciąż oficjalnie jest w użyciu.

Dobrze, przestańmy już mówić o tym htmlu. Ostatnio chciałem poszerzyć swoje horyzonty i pouczyć się JavaScriptu. Ale mam mały dylemat. Czego radzisz się uczyć? JavaScriptu czy może tej słynnej biblioteki jQuery.

Na początek może wyjaśnię, że jQuery to zestaw funkcji napisanych w języku  JavaScript. Ale jeśli dopiero zaczynasz swoją przygodę z językami skryptowymi to radzę ci zacząć uczyć się samego JS. Dlaczego? Ponieważ umiejąc korzystać z jQ ale nie znając dobrze niektórych możliwości JavaScriptu będziesz mocno ograniczony. Mam tu na myśli wszystkie funkcję odpowiedzialne za przetwarzanie tekstu, dokonywanie obliczeń czy obsługę zdarzeń. Gdy to już opanujesz możesz śmiało ruszać do nauki JQuery. Pisanie skryptów stanie się dla Ciebie o wiele łatwiejsze i ponadto będziesz miał wiedzę potrzebną do pisania zaawansowanych aplikacji internetowych.

A istnieją jakieś alternatywy do jQuery?

Tak, np. Prototype i Moo Tools. Te biblioteki są jednak mniej popularne od jQuery i możesz przy nich liczyć na mniejsze wsparcie społeczności.

Dobrze wiedzieć. Ok, to chyba dziś już na tyle.

W porządku. Wracaj jak tylko nazbierają Ci się znowu jakieś problemy.

Na pewno przyjdę Cię pomęczyć, cześć.

Trzymaj się.

Grafika

Finalnie nasza praca ma wyglądać tak:

Jak widać przy większej ilości tekstu grafika musi się się rozszerzać. Aby tak było trzeba to sprytnie zakodować. Najpierw jednak musimy przygotować dwie grafiki. Jedną która będzie się składała tylko z prawych zaokrągleń i druga która będzie bardzo szeroką wersją buttonu ale bez zaokrągleń po prawej. Dokładniej to potrzebujemy takich obrazków:

Ważne jest to aby obrazki miały jednolite lub prawie jednolite tło. W tym przypadku jest ono białe.

Kod

Przy kodowaniu użyjemy pewnej sztuczki. Krótszy obrazek wstawimy jako tło linku przycisku a sam link wstawimy do diva któremu jako tło nadamy dłuższy obrazek. Dzięki temu krótsza grafika odpowiednio zasłoni tą dłuższą. Oto kod html:

<div class="przycisk"><a href="#">Przejdź do galerii zdjęć</a></div>

A poniżej kod CSS:

 .przycisk{
    height: 30px;
    background: url('left.png') no-repeat;
    display: block;
    float: left;
 }
 .przycisk a{
    height: 30px;
    background: url('right.png') right no-repeat;
    display: block;
    padding: 0 15px 0 15px;
    font: italic normal bolder 14px Georgia;
    text-decoration: none;
    color: #dadada;
    line-height: 30px;
 }

Jak widać obrazek right.png dosunęliśmy do prawej strony aby pojawił się w odpowiednim miejscu. Musieliśmy także użyć float: left aby wszystko przyjmowało możliwie najmniejszą szerokość. Kod w działaniu można zobaczyć pod tym linkiem.

jQuery i wtyczki

Pisanie skryptu zaczynamy od pobrania jQuery i dołączenia do swojego kod, tak samo musimy zrobić z jQuery UI gdyż tam znajduję się plugin Sortable na którym oprzemy nasz skrypt. Gdy już to mamy możemy napisać kod html:

<div class="box">
   <div id="m" class="element">matematyka</div>
   <div id="f" class="element">fizyka</div>
   <div id="c" class="element">chemia</div>
   <div id="i" class="element">informatyka</div>
   <div id="e" class="element">ekonomia</div>
</div>

Box to nasz pojemnik z divami które będziemy sortować. Każdy z tych elementów musi mieć inne ID by skrypt mógł je rozpoznawać. Poniżej zaś kod JavaScript który uruchomi sortowanie:

$(".box").sortable({ items: '.element' });

W tym momencie będzie już działać sortowanie ale po odświeżeniu wszystkie elementy wrócą na swoje miejsce. Aby móc zapisać kolejność będziemy musieli skorzystać z mechanizmu ciastek. Aby ułatwić sobie ich obsługę skorzystamy z dwóch specjalnych funkcji które można skopiować stąd. Przyda się również wtyczka w jQuery do sortowania elementów DOM. Użyjemy qsort którą można pobrać tutaj. Gdy już wszystko podepniemy do naszej strony możemy zacząć pisać nasz skrypt.

Szczypta naszego kodu

Najpierw napiszemy kod do zapisywania kolejności. Aby to zrobić musimy do wcześniej napisanego wywołania funkcji sortable dopisać parę dodatkowych linijek.

$(".box").sortable({
   items: '.element',
   update: function(event, ui){
      var k = $(".box").sortable("toArray");
      var ks = k.toString();
      SetCookie('kolejnosc', ks, 30);
   }
});

Skorzystaliśmy tu z zdarzenia update które jest wywoływane zawsze gdy zmieniona zostanie kolejność elementów. Podpięta funkcja anonimowa najpierw uruchamia metodę toArray by wtyczka sortable zwróciła tablicę id kolejnych elementów, następnie otrzymana tablica jest serializowana by na końcu otrzymany ciąg został zapisany do ciasteczka.

Teraz pozostał nam jeszcze do napisania skrypt który po wczytaniu strony będzie ustawiał elementy w odpowiedniej kolejności. Oto i on:

if(GetCookie('kolejnosc')){
   var kol = GetCookie('kolejnosc').split(',');
   for(var j=0;j<kol.length;j++){
      $('#'+kol[j]).attr('value',j);
   }
   $('.element').qsort({attr: "value"});
   SetCookie('kolejnosc', kol, 30);
}

Powyższą instrukcję należy wywołać gdy cała strona jest już załadowana. Skrypt działa następująco: najpierw sprawdzamy czy istnieje ciasteczko, jeśli tak to wyciągamy z niego informacje i deserializujemy je do tablicy. Następnie w pętli kolejnym sortowalnym elementom nadajemy value o wartości takiej jaką powinno zajmować miejsce. Gdy to już mamy zrobione uruchamiamy funkcję qsort i na końcu przedłużamy żywotność ciasteczka.

Cały skrypt  z dokładnymi komentarzami można skopiować tutaj a strona z gotowym efektem jest do zobaczenia w tym miejscu.

Początek przygody

Aby zacząć pisać skrypt do wysyłania wiadomości na GG musimy wpierw pobrać mały plik z klasą do obsługi protokołu. Jest  on do pobrania tutaj. Wypakowywujemy go, dołączamy do naszego skryptu a także tworzymy obiekt tej klasy:

require_once('rfGG.class.php');
$GG = new rfGG(rfGG::VER_77);

Teraz musimy używając aplikacji GG lub innego zgodnego komunikatora np AQQ utworzyć konto dla naszego bota który będzie rozsyłał wiadomości. Nie możemy używać naszego konta. Gdy już mamy nowy numer i hasło możemy przystąpić do próby nawiązania połączenia z serwerem GG.

if ($GG->connect('123456789','hasłobota')) {
   $GG->disconnect();
}

Zmiana statusu i opisu

Klasa rfGG posiada funkcję changeStatus() która służy do zmiany statusu oraz opisu konta bota.

if ($GG->connect('123456789','hasłobota')) {
   $GG->changeStatus(rfGG::STATUS_BUSY_DESCR,'Code is poetry');
   //tutaj jakiś kod...
   $GG->disconnect('nie ma mnie');
}

W tym przykładzie ustawiliśmy status na STATUS_BUSY_DESCR a opis na Code is poetry. Poniżej zamieszczam listę wszystkich statusów oraz ich znaczeń.

• STATUS_NOT_AVAIL – niedostępny
• STATUS_NOT_AVIAL_DESCR – niedostępny z opisem
• STATUS_AVAILABLE - dostępny
• STATUS_AVAILABLE_DESCR – dostępny z opisem
• STATUS_BUSY - zajęty (zaraz wracam)
• STATUS_BUSY_DESCR – zajęty z opisem
• STATUS_INVISIBLE – niewidoczny
• STATUS_INVISIBLE_DESCR – niewidoczny z opisem

Przy statusach z opisem trzeba jako drugi argument funkcji podać tekst który będzie wyświetlany jako opis. Funkcja disconnect() służąca do rozłączania z serwerem automatycznie zmienia status na niedostępny i ewentualnie ustawia przekazany jej argument jako opis. W powyższym przykładzie skorzystaliśmy z tej możliwości i ustawiliśmy opis na nie ma mnie.

Wysyłanie wiadomości

Proszę zapiąć pasy ponieważ przechodzimy do ważnej części poradnika. Zajmijmy się teraz wysyłaniem wiadomości. Gdy już jesteśmy zalogowani w serwerze GG możemy to zrobić za pomocą odpowiedniej funkcji:

if ($GG->connect('123456789','hasłobota')) {
   $GG->sendMessage('300500800',"Treść <b>wiadomości</b>...");
   $GG->disconnect();
}

Funkcja ta to sendMessage() i przyjmuje dwa argumenty, numer odbiorcy oraz treść wysyłanej wiadomości. Jak widać w przykładzie wiadomość może zawierać tagi HTML. Dopuszczone są pogrubienia <b>, pochylenia <i>, podkreślenia <u> oraz złamanie linii za pomocą <br> lub \r\n. Funkcja po próbie wysłania wiadomość zwraca true lub false w zależności czy wszystko się udało. Można to wykorzystać do sprawdzenia powodzenia wysłania komunikatu i ewentualnie wyświetlić błąd przy użyciu getError().

if (!$GG->sendMessage($numer,$tresc)) {
   die($GG->getError());
}

Odbieranie wiadomości

Używana przez nas klasa zezwala również na odbieranie wiadomości. Robi się to za pomocą dwóch funkcji:  getMessages() i getMessageOne(). Najpierw omówimy tą pierwszą gdyż jest bardziej uniwersalna.

require_once('rfGG.class.php');
$GG = new rfGG(rfGG::VER_77);
if ($GG->connect('222333444','password')) {
   $GG->ping();
   $message = $GG->getMessages();
   for($i=0;$i<count($message);$i++){
      echo $message[$i]['sender'].'>'.$message[$i]['msg_text'].'<br>';
   }
   $GG->disconnect('Code is poetry');
}

Jak widać w powyższym kodzie przez przetworzeniem wiadomości wywołaliśmy funkcję ping() która ma za zadanie nawiązać kontakt z serwerem i pobrać czekające na nas dane. Należy tej funkcji używać zawsze przed funkcjami do wyświetlania wiadomości. Później możemy z otrzymaną tablicą wiadomości zrobić co chcemy. W tym przykładzie wyświetlamy numer z którego otrzymano informację oraz jej treść. Zwracana tablica ma zawsze ten sam schemat. Pierwszy jej wymiar to liczba porządkowa kolejnych wiadomości a drugi to elementy o indeksach sender (numer nadawcy), time (czas w formacie timestamp), msg_text (treść) i 2 inne, nie istotne dla nas.

Funkcja getMessageOne() działa podobnie tylko, że zwraca jedną wiadomość. Trzeba więc ją wykonywać wielokrotnie. Zwraca ona tablicę jednowymiarową z elementami o indeksach takich samych jak drugi wymiar poprzedniej funkcji.

Pewne zasady

Na koniec chciałbym zacytować fragment licencji z pliku używanej przez nas klasy:

• 4. Kategorycznie zabrania sie wykorzystywania kodu do rozsylania SPAMU oraz niechcianych wiadomosci.
• 5. Odbiorca wiadomosci musi wyrazic wczesniej zgode na ich otrzymywanie.
• 6. Zabrania sie wykorzystywania kodu do celow niezgodnych z prawem POLSKIM.
• 7. Na uzasadniona prosbe serwisu Gadu-Gadu nalezy usunac lub wylaczyc działanie kodu.

I ja również podpisuje się pod tym ponieważ nikt z nas przecież nie chce otrzymywać spamu na komunikator, prawda?

Eee… ostatnio przerzuciłem się z tabel na divy i mam kłopot. Nie wiem jak wyśrodkować diva. Wiesz jak to zrobić?

Oczywiście. Wystarczy mu nadać stałą szerokość oraz margin: auto. Nic trudnego.

No dobrze, a w takim razie w jaki sposób ustawić dwa divy obok siebie? Żeby utworzyły się dwie kolumny.

Ponownie musisz obu blokom ustawić stałą szerokość a ponadto każdemu nadać  float: left. Ewentualnie obu float: right lub też jednemu float: left a temu drugiemu float: right. Jeśli tylko suma szerokości tych bloków będzie wystarczająco mała aby zmieściły się obok siebie to wszystko powinno działać tak jak chcesz.

Kiedyś tak próbowałem ale mimo, że rozmiary się zgadzały to jednak te dwa bloki nie mieściły się obok siebie!

Pamiętaj, że szerokość diva to suma jego wartości width, grubości obramowania po obu stronach a także, uwaga: wielkość odstępu wewnętrznego czyli paddingu, także po obu stronach.

A faktycznie, miałem tak ustawione! To pewnie dlatego. A już kiedyś bawiłem się wartościami float ale był przy tym same problemy. W momencie jeśli w divie był inny pływający obiekt to ten blok się zsuwał, miał zły rozmiar. Przez to float wszystkie elementy będące poniżej podnosiły się w górę. Dlaczego?

To typowe. Jeśli w jakimś elemencie jest obiekt z ustawionym float to nie będzie on przyjmował prawidłowej wysokości. Będzie zachowywał się tak jakby tego pływającego elementu wcale tam nie było. Ale naprawienie tego jest proste. Wystarczy temu elementowi który się zsuwa nadać wartość CSS overflow: hidden. Wszystko powinno być od tego momentu dobrze.

Ok, zostawmy już te divy. Mam jeszcze inny kłopot. Niedawno temu próbowałem stworzyć menu i  chciałem aby przestrzeń do kliknięcia była konkretnych rozmiarów. Próbowałem nadać elementowi a wysokość i szerokość ale nic nie działało. To błąd przeglądarki?

Nie, Twój. Element a to obiekt liniowy więc nie można mu nadawać wymiarów. Ale w CSS istnieje atrybut display dzięki czemu można sprawić by każdy element zachowywał się tak jak chcemy. I żeby odnośnik zachowywał się jak blok i miał wymiary najzwyczajniej nadajemy mu wartość display: block.

Dobra cwaniaku. To teraz mi powiedz w jaki sposób zrobić taki pasek na dole strony z na przykład newsami by nie ruszał się podczas przewijania strony.

CCSem. Nadajesz paskowi position: fixed oraz bottom: Ypx gdzie Y to wysokość tego paska i wszystko będzie chodzić jak w szwajcarskim zegarku.

No dobra, a w takim razie jak…

Herbata mi się skończyła.

I?

Na dzisiaj już skończmy. Wrócimy do naszej rozmowy w przyszłości.

Przykład na linkach

Do najczęściej używanych zdarzeń JavaScript należą onClick, onMouseOver i onMouseOut. Najprościej dodać je w ten sposób:

<a href="podstrona.html" onclick="jakas_funkcja(); return false">Kliknij</a>

W takim przypadku mamy wywołanie funkcji, za pomocą return false; blokujemy działanie linka a także w razie braku obsługi JS jesteśmy asekurowani przez odnośnik do pliku podstrona.html. Fajnie, ale IE7 strzeli nam focha. Poza tym nie jest to zbyt eleganckie rozwiązanie. Jak zaczniemy dodawać inne zdarzenia może dojść do niepotrzebnego bałaganu w kodzie.  A przecież mamy jeszcze onBlur, onFocus, onChange itd. Jak zatem zrobić by wszyscy byli zadowoleni? Już śpieszę pokazać:

<a href="podstrona.html" class="odnosnik">kliknij mnie!</a>

Pewnie wielu z was zapyta „Dobra, a gdzie kod?”. Właśnie cała sztuczka polega na tym by rozdzielić kod HTML od JavaScript i wpakować ten drugi do sekcji head. Samo zdarzenie zaś podepniemy na podstawie dodanej klasy odnosnik.

Poniższy kod należy wstawić do sekcji head. Działa on bardzo prosto. Najpierw wszystkie istniejące na stronie odnośniki zapisujemy w tablicy elementya a potem w pętli sprawdzamy w każdym czy ma klasę odnosnik. Jeśli tak to podpinamy pod zdarzenie onClick funkcję  jakas_funkcja pamiętając o pominięciu nawiasów po nazwie a także o umieszczeniu return false; na końcu naszej funkcji.

var elementya = document.getElementsByTagName('a');
for(i=0; i < elementya.length; i++) {
     if (elementya[i].className=='odnosnik') elementya[i].onclick = jakas_funkcja;
 }

Zamiast pisać osobną funkcję możemy także stworzyć tzw. funkcję anonimową którą umieszcza się od razu w powyższym kodzie:

var elementya = document.getElementsByTagName('a');
for(i=0; i < elementya.length; i++) {
if (elementya[i].className=='odnosnik') elementya[i].onclick = function() { alert(';P'); return: false; };
}

Dodaliśmy zaledwie trzy linijki kodu a mamy pewność, że wszystko będzie działało tak jak trzeba na każdej przeglądarce. W razie nie działania JavaScriptu nic także nie będzie przeszkadzać by adres spod linku normalnie się wyświetlił. Taki coś jest potrzebne przy na przykład tworzeniu Ajaxowych komentarzy. Fajnie jak się dodają bez odświeżania strony ale skrypt musi także obowiązkowo działać gdy użytkownik będzie miał zablokowane wykonywanie skryptów w przeglądarce.

A bez href?

Jeśli nasz skrypt nie wymaga href w trybie bez JS to możemy np. upodobnić do odnośników element span:

<script>
    var elementy = document.getElementsByTagName('span');
    for(i=0; i < elementy.length; i++) {
    if (elementya[i].className=='klikacz') elementy[i].onclick = function() { alert(';P'); return: false; };
}
</srcipt>
<style>
   .klikacz{
        cursor: pointer;
   }
</style>
<span class="klikacz">Do złudzenia jak link</span>

W powyższym kodzie zmieniliśmy poszukiwane elementy na span a także za pomocą odpowiedniej klasy spowodowaliśmy, że najeżdzając na niego myszką kursor zamieni się na łapkę, tak jakby był to prawdziwy link.

Na początek HTML

Nasze menu jak nakazuje dobry webdeveloperski obyczaj będzie opierało się na odpowiednio ostylowanej liście.

<ul class="menu">
  <li><a href="#">Homepage</a></li>
  <li><a href="#">Artykuly</a></li>
  <li><a href="#" class="menu-active">Galeria</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">O mnie</a></li>
  <li><a href="#">Kontakt</a></li>
</ul>

Jak widać jednemu z elementów nadaliśmy dodatkową klasę menu-active. Za jej pomocą oznaczamy aktualnie aktywny element, to znaczy link do strony, na której jesteśmy. Całe menu oznaczyliśmy klasą menu, za pomocą której będziemy się odwoływać w arkuszu styli.

Meritum czyli CSS

Teraz zajmijmy się pisaniem opisu CSS. Po pierwsze zerujemy wszystkie odstępy w elemencie UL i usuwamy kropki sprzed elementów listy:

.menu{
  margin: 0px;
  padding: 0px;
  list-style: none;
}

Dalej ustawiamy elementy LI w jednym rzędzie i nadajemy ujemny prawy margines by zakładki na siebie nachodziły:

.menu li{
  float: left;
  display: block;
  height: 30px;
  width: 100px;
  margin-right: -5px;
}

Pora na ustawienie linków. Ważne jest aby wyświetlały się jako bloki (display: block;) i miały ustalone rozmiary i pozycję w wymiarze Z (z-index: 1;). Aby jednak nasze menu przybrało „zakładkowy” wygląd trzeba dodać na przykład zaokrąglone rogi. Ostatnie cztery wartości ustawiają zaokrąglenie dla prawego górnego rogu kolejno w:  Chromie/Safari, Konquerorze, Firefoxie i przeglądarkach zgodnych z CSS3. Dla przejrzystości kod pozbawiony jest opisów czcionek i kolorów

.menu li a{
  display: block;
  height: 30px;
  width: 100px;
  position: relative;
  z-index: 1;
  -webkit-border-top-right-radius: 20px;
  -khtml-border-radius-topright: 20px;
  -moz-border-radius-topright: 20px;
   border-top-right-radius: 20px
}

Teraz pozostaje jeszcze tylko opisać naszą dodatkową klasę menu-active. Jak już pisałem zakładka z taką klasą musi wystawać ponad pozostałe. Inaczej mówiąc musi być na wyższej pozycji w wymiarze Z. Normalnie zakładki mają pozycję 1, więc ta aktywna musi mieć większą:

.menu a.menu-active{
  z-index: 2;
}

I to wszystko. Zero grafiki, a efekt co najmniej ciekawy. Gotowy przykład można zobaczyć pod tym linkiem.

Grupa Automattic to to twórcy systemu WordPress. Wraz z rozrostem ich platformy blogowej pojawiła się potrzeba obsługi avatarów, małych obrazków które pozwalają na wizualną identyfikacje komentujących. WordPress nigdy jednak nie słynął z rozbudowanego systemu użytkowników. Dlatego postanowiono przenieść ten moduł na nowo powstałą platformę Gravatar.com skąd avatary mogą być pobieranie przez wszystkie instalacje WP. Co ważne dostęp do tej bazy obrazków mają nie tylko WordPressy ale każda inna strona internetowa. Co więcej implementacja tej usługi jest bardzo prosta a cały system jest przyjazny użytkownikom.

Tworzenie gravataru

Serwis Gravatar jest intuicyjny w obsłudze. Po rejestracji (lub zalogowaniu się danymi z wordpress.com) możemy załadować na jego serwer swój avatar i przypisać go do swojego adresu konta pocztowego. Na ten adres dostaniemy po chwili e-mail z linkiem. Klikając na niego potwierdzimy, że jesteśmy posiadaczami tego loginu. Od tej chwili nasz avatar będzie chodził po internecie za nami. Wystarczamy, że pisząc komentarz podamy ten sam adres e-mail a nasz avatar pojawi się obok naszej opinii. Oczywiście tylko na serwisach korzystających z bazy gravatarów.

Od strony webdevelopera

Usługa oferowana przez serwis Gravatar niesamowicie upraszcza życie twórcom witryn internetowych. By mieć w komentarzach avatary nie musimy już tworzyć systemu rejestracji i ładowania grafik. Wystarczy pobrać od użytkownika jego e-mail i zapisać go w bazie danych. Odpowiedni, krótki skrypt dodany do kodu wyświetlającego komentarze załatwi resztę sprawy.

Kod czyli zapraszamy avatary do siebie

Gravatary można zaimplementować do kodu w każdym języku skryptowym. Ja pokaże jak zrobić to na przykładzie PHP ale równie dobrze można to zrobić w Pythonie, Ruby, JavaScripcie czy C#.

Cały proces polega na tym by skleić odpowiedni adres do obrazka tak by zawierał e-mail internaty oraz ustawienia. Adres trzeba zakodować za pomocą funkcji md5() aby nie był widoczny w kodzie dla botów spamerów. Najprostzy kod wygląda tak:

<?php
   $email = md5(strtolower("adres@emailowy.usera"));
   $gravatar = "http://www.gravatar.com/avatar/".$email
?>
<img src="<?php echo $gravatar; ?>" alt="Avatar">

W powyższym kodzie dodatkowo przepuściliśmy adres przez funkcję strtolower() by mieć pewność, że wszystkie znaki są z małej litery. Proponuję się przyjrzeć jak wygląd ma adres obrazka. W chwili obecnej nasza grafika nie ma rozszerzenia, kończy się hashem. Ale w usłudze gravatar nie ma problemu z rozszerzeniem, można je spokojnie dodać. Wygląda to wtedy bardziej elegancko a w niektórych skryptach rozszerzenie jest wymagane.

$gravatar = "http://www.gravatar.com/avatar/".$email.".jpg"

Dostosowywanie wyglądu

Powyższy kod zalinkuje do obrazków o rozmiarze 80 na 80 pikseli. Gdybyśmy potrzebowali innych wymiarów to możemy w łatwy sposób to ustawić.

<?php
   $email = md5(strtolower("adres@emailowy.usera"));
   $gravatar = "http://www.gravatar.com/avatar/".$email."?size=120";
?>
<img src="<?php echo $gravatar; ?>" alt="Avatar">

W tym przykładzie ustawliśmy rozmiar grafik na 120x120px. A co jeśli komentujący nie ustawił sobie gravataru? Wtedy możemy ustawić domyślny obrazek:

<?php
   $email = md5(strtolower("adres@emailowy.usera"));
   $domyslne = "http://www.moja-strona.pl/avatar.jpg";
   $gravatar = "http://www.gravatar.com/avatar/".$email."?&default=".$domyslne;
?>
<img src="<?php echo $gravatar; ?>" alt="Avatar">

Od teraz przy każdym użytkowniku który nie ma ustawionego gravatara będzie pojawiał się obrazek spod adresu http://www.moja-strona.pl/avatar.jpg. Może to spowodować jednak małe zamieszanie dlatego Gravatar.com pozwala by domyślnie był wyświetlany obrazek generowany na podstawie literek w adresie e-maila. Brzmi to dziwnie ale naprawdę działa i co więcej jest dostępne w trzech opcjach. Aby uaktywnić tą funkcję zamiast adresu podajemy identicon, monsterid lub wavatar.

$gravatar = "http://www.gravatar.com/avatar/".$email."?&default=wavatar";

Ale to jeszcze nie wszystko. Gravatar obsługuje klasyfikacje obrazków dzięki czemu możemy zapobiec by na naszej stronie nie pojawiały się zbyt frywolne grafiki. Domyślna klasyfikacja to G czyli obrazki dla wszystkich, PG to obrazki mogące zawierać niestosowne gesty lub lekką przemoc, R należy kojarzyć z narkotykami, nagością i profanacją a X to…hulaj dusza, piekła niema. W kodzie konfiguruje się to następująco:

$gravatar = "http://www.gravatar.com/avatar/".$email."?&rating=x";

Oczywiście wszystkie powyższe opcje można dowolnie łączyć, o to przykład takiego połączenia:

<?php
   $email = md5(strtolower("adres@emailowy.usera"));
   $gravatar = "http://www.gravatar.com/avatar/".$email."?&rating=x&default=monsterid&size=50";
?>
<img src="<?php echo $gravatar; ?>" alt="Avatar">