Blogujcie a ...

Tagi HTML, których początkujący nie używają (a powinni!)

halibucik — Tue, 10 Aug 2010 11:50:23 +0000

Wróćmy na chwilę do podstaw HTML. Wieżę, że każdy kto to czyta, wie czym jest HTML. Dużo mówi się o HTML 5 i dobrze byłoby przypomnieć sobie tagi, których niektórzy nigdy, niektórzy rzadko, a niektórzy często używają. Wszystkie wymienione są obsługiwane zarówno przez HTML 4.01 jak i HTML 5. Do dzieła więc!

1.

Jeśli mieliście w ręku kiedykolwiek jakąkolwiek książkę o programowaniu, przeczytacie tam sto tysięcy razy jak ważne jest dokumentowanie i opisywanie własnego kodu. Nie są to czcze słowa! Z całą pewnością pozwala to na szybkie zorientowanie się co dzieje się w tym a nie innym miejscu.

Komentowanie HTML może wydawać się nieco na wyrost, jednakże i tu można znaleźć dobre zastosowanie – wydzielane bloków, części kodu, które są w jakiś sposób powiązane. Oznaczanie początku i końca sekcji istotnie ułatwia późniejszą pracę. Śpieszę z przykładem:

menu opcja1
menu opcja2

Zawartość blablabla...

2. Style tabeli: , oraz

W zamierzchłych czasach (całkiem zresztą niedawno) tworzenie layoutu strony polegało na zagnieżdżaniu milionów tabel w sobie. Na szczęście ten trend minął i teraz tag

służy do prezentowania danych tabelarycznych, do czego bądź co bądź jest stworzony. Nie każdy wie, że tabele mają możność być ostylowane – dotyczy to kolumn, wierszy, nagłówków, stopki i zawartości.

Zobaczmy jak możemy to wykorzystać:

Przedmiot	Ilość
Suma	19
Flaczki	13
Ziemniaczki	6

Na uwagę zasługuje fakt, że element powinien znajdować się powyżej elementu

Oto użyty w powyższym przykładzie kod:




  
	Przedmiot
	Ilość
  


  
	Suma
	19
  


  
	Flaczki
	13
  
  
	Ziemniaczki
	6

Przedmiot	Ilość
Suma	19
Flaczki	13
Ziemniaczki	6

3.

Menu rozwijalne jest doskonałym sposobem na przedstawianie danych ‘do wyboru’ użytkownikowi.
Przedstawienie danych za pomocą sprawia, że są one czytelnie pogrupowane nawet, jeśli opcji jest mnóstwo.

4. Nagłówki –

,

, oraz

Wszyscy używamy nagłówków, ale szczerze mówiąc w niewielu miejscach można spotkać

a tym bardziej niższe. Apelujemy: używajmy nagłówków zamiast niesemantycznych np. tagów

dla nagłówków!

5.
and

Miło jest wypełniać formularz, który jest dobrze opisany, podzielony na logiczne sekcje. Aż chce się taki wysłać :)
Za pomocą

wyrysujesz prostokąt wokół sekcji, a doda podpis do danej sekcji. Zobacz jakie to proste!



	
		Informacje główne: 
		Imie: 
		Email: 
		Data urodzenia:

6.

Jest to niezwykle funkcjonalny tag – nie wpływa na wygląd, natomiast ułatwia wypełnianie formularzy – kliknięcie na etykietę (np. tekst) powoduje wybranie pola typu input – radio, text czy checkbox.



	Imie:

		

		Mężczyzna:

		

	Kobieta:

7.

Jeśli pragniesz wyróżnić fragment tekstu w specjalny sposób, użyj tagu

.
Domyślnie zostanie dodana przestrzeń przed i po wyróżnionej zawartości oraz margines lewy i prawy.

Jest to doskonały sposób, na wstawienie bloku cytatu. Jeśli pobierasz zawartość z innej strony, blackquote nadaje się do tego znakomicie!

Tak właśnie wstawiamy cytaty!

8.

Jest to odwołanie do innego źródła. Najczęściej używany w
"Kłapouchy zbliżył się do Puchatka i rzekł głośnym szeptem: – Czy nie mógłbyś poprosić twego przyjaciela, żeby gimnastykował się gdzie indziej ? Za chwile będę jadł śniadanie i nie chce, żeby mi ktokolwiek skakał po nim. To taki drobiazg, po prostu mój kaprys, ale każdy z nas ma swoje małe przyzwyczajenia. " - poema.art.pl
	Kłapouchy zbliżył się do Puchatka...
9.

Korzystanie z list to doskonały sposób organizowania informacji. Każdy zna
, ale jak często są używane
i
? Być może odniesienie do „listy definicji” myli niektórych, że mogą być używane tylko przy pojęciach i definicjach – jednak nie jest to przypadek.

Jakie istnieją typy list?
Nieuporządkowana ul – wypunktowana

Uporządkowana ol – numerowana

Definicje dl – terminy i definicje
	Opis1
		definicja1
	Opis2
		definicja2
W tym artykule to wszystko, miały być jeszcze znaki ASCII, ale być może to będzie następny artykuł :)

Chytre: Multi ramka za pomocą CSS

halibucik — Fri, 25 Jun 2010 18:43:48 +0000

Czy wiesz, że za pomocą stylów CSS można dodać do elementu wiele ramek? Jeśli do tej pory używałeś grafik, najwyższy czas z tym skończyć :)
Użycie pseudoklasy :after oraz :before może dodać więcej głębi do strony w kilka minut!





Multi ramka

Chytre: GMail – jeden adres by wszystkimi rządzić…

halibucik — Thu, 17 Jun 2010 19:16:00 +0000

Poczta od Google jest znana i lubiana za dużą pojemność (obecnie już nie powala na kolana), prawie doskonały filtr antyspamowy, wątki (tu można polemizować) i sto tysięcy dodatków bardziej lub mniej potrzebnych i funkcjonalnych.

Nie każdy zdaje sobie sprawę, że do jednego adresu prowadzi…
nieskończona ilość adresów, które za pomocą kilku sprytnych kroków mogą wprowadzić małą rewolucję w korzystaniu z tej zacnej poczty.

Ta kropka sprawia, że domyślny adres konto@gmail.com jest tym samym adresem co kon.to@gmail.com. Nie zdziwi nikogo, że to również ten sam co kont.o@gmail.com, ale też konto.@gmail.com, ko..nto@gmail.com. Dochodzimy do wniosku, że kropka rozdzielająca adres email jest przez GMail ignorowana. Sztuczka nie działa w przypadku podpięcia zewnętrznego adresu email pod skrzynkę Google’a.

Ten plus postawiony tuż przed małpą (za pełną nazwą użytkownika – tu nie jest tak jak z kropką!) rozszerza ilość unikalnych, ale prowadzących na tą samą skrzynkę adresów. I tak mamy konto+prywatny@gmail.com, konto+nieprywatny@gmail.com, konto+jakikolwiekinny@gmail.com, które nadal są jednym i tym samym adresem!

Kooperacja ./+

Eureka! Metodę kropki i plusa możemy połączyć! A to heca:) k.ont.o+dobresobie@gmail.com to cały czas ten konto@gmail.com adres pocztowy.

Ciekawostka

Niejedna osoba posiada konto imie.nazwisko@gmail.com. Czy to oznacza, że ktoś inny zakładając imienazwisko@gmail.com będzie metodą kropki mógł się podawać za kogoś innego?
Odpowiedź przychodzi natychmiastowo – NIE, bowiem zakładając konto z kropką rezerwujesz wszystkie adresy z kropką. Uff, no to jesteśmy bezpieczni.
Drugą ciekawostką jest to, że adresu z + nie da się zarejestrować.

Sens tych wynurzeń?

Jakie zastosowania można znaleźć dla tych błyskotliwych sztuczek?
Można znaleźć kilka. Ponieważ przesyłka na adres k.ont.o+dobresobie@gmail.com ma zapisanego adresata właśnie takiego k.ont.o+dobresobie@gmail.com, mamy możliwość filtrowania tychże przesyłek – tu z pomocą przychodzą nam rozbudowane filtry GMaila.

Jak to zrobić? Wyobraźmy sobie modne teraz konto na Facebook’u. Domyślnie otrzymujemy około jednego stosu wiadomości dziennie. Może to irytować, dlatego posłużymy się sprytną radą wujka dobra rada:)
Podajemy adres konto+facebook@gmail.com przy rejestracji/edycji profilu. W GMailu tworzymy etykietę Facebook oraz w Ustawieniach w zakładce Filtry tworzymy nowy, wpisując w pole Do spreparowany adres email oraz przypisujemy etykietę, gdy coś na ten adres przyjdzie. Ha! teraz wszystkie ciekawe wiadomości mamy w jednym miejscu!

A już wkrótce następne powalające na kolana sztuczki dla Google Mail!

Jak dodać formularz płatności PayPal na stronę www?

halibucik — Sun, 23 May 2010 10:06:09 +0000

Choć może to wydawać się skomplikowane, utworzenie formularza dla płatności PayPal nie jest wcale bardziej skomplikowane od stworzenia zwykłego formularza na stronę www. Przy nieco większym zaangażowaniu można dodać coś w stylu „Kup teraz” gdzie można zdefiniować za co i ile użytkownik płaci.

Jak to działa?

W najprostszym przypadku w formularzu jest tylko widoczny przycisk „Kup teraz”, a wszystkie inne pola z wartością zapłaty i tytułem są ukryte i na sztywno zdefiniowane. My chcemy czegoś bardziej zaawansawnego :)

Nasz przykład – chcemy dać użytkownikom możliwość wpłacenia dobrowolnie dowolnej kwoty za jego zdaniem ciekawy artykuł/tutorial – użytkownik wpisuje kwotę i wybiera tytuł artykułu. Można to łatwo zrobić przez zmianę ukrytych pól hidden na pola typu text i/lub select. Więc zaczynajmy.

Krok #1

Pierwszą rzeczą jest stworzenie strony, na którą zostanie przeniesiony użytkownik po zapłaceniu, gdzie przyjmie gratulacje z powodu udanej zapłaty.

Krok #2

Następnie zaloguj się na swoje konto PayPal i kliknij kartę Merchant Services – Usługi dla handlowców. Na dole z prawej zobaczysz łącze Przyciski Kup teraz – utworzymy własny guzik.

Wypełnij formularz wpisując w pozycji ID liczbę 1 oraz podobnie abstrakcyjne dane dla nazwy przedmiotu i ceny. Dane te ustawimy później. Upewnij się, że połączenie NIE JEST szyfrowane – wybierz ‘Użyj mojego podstawowego adresu e-mail . Pozostałe pola (waga itp.) mogą być puste. Na następnej stronie jest kod – jest on domyślnie zaszyfrowany, ale przyciskiem ponad polem można go odkodować – zróbmy to!

Krok #3

Oto kod, który otrzymałem od PayPal. Zauważ, że zachowując odpowiednie nazwy pól, możemy zmienić ich typ z hidden na text!

Oznacza to, że na przykład zamiast określania wartości kwoty na sztywne 9 PLN, możemy pozwolić użytkownikowi na wpisanie kwoty, które chcą zapłacić. Podobnie tytuł wpłaty item_name może być wprowadzony przez użytkownika.

Oto pola, które chcemy/możemy zmienić:

Item number – Jest to wartość, którą można zobaczyć na stronie PayPal po kliknięciu przycisku i rozwinięciu ‘strzałki’ – zobacz przykładowy formularz poniżej
Business – Jest to konto, na które zostanie przekazana wpłata. Upewnij się, że to Twój adres e-mail!
Currency code – Waluta, w której wpłacane są pieniądze. Możesz zbudować listę rozwijalną, jeżeli spodziewasz się wpłat z całego świata
Item name – tytuł wpłaty. Może być to lista rozwijalna lub pole typu text.
Amount – kwota. Musimy uważać, aby znalazła się ty tylko liczba, w innym przypadku PayPal zwróci błąd i nici z transakcji… Można użyć zaawansowanej walidacji JS (osobny artykuł) w naszym przykładzie dodamy za polem walutę PLN, co ma sugerować aby wpisać tylko liczbę.

Krok #4

Można zauważyć, że w kodzie nie ma tu adresu URL strony zwrotnej. Wystarczy dodać linię do formularza (zwrotny adres URL)

Jak widzisz, przycisk ma domyślny paypalowski nudny oklepany wygląd. Nie chcemy nudnego – chcemy jeszcze nudniejszy klasyczny przycisk – dokonamy tego zmieniając input type=”image” na input type=”submit”.

Krok #5

Najwyższa pora aby zbudować formularz:

Wesprzyj portal Dobre Wieści
Wypełnij formularz wybierając Twój ulubiony tutorial:

Możesz kliknąć teraz button i zobaczyć jak to w rzeczywistości wygląda. Nie obawiaj się, nie musisz nic wpłacać :)

Oto kompletny kod dla naszego przykładu:


Wesprzyj portal Dobre Wieści
Wypełnij formularz wybierając Twój ulubiony tutorial:





    Który tutorial chcesz docenić?


    Jak wiele chcesz wpłacić?
PLN

Google Chart Tools – jak tworzyć ciekawe wykresy

halibucik — Sat, 22 May 2010 15:28:34 +0000

W tym tutorialu zapoznamy się z ciekawym sposobem na generowanie efektywnych wykresów słupkowych, kołowych, liniowych w locie za pomocą Google Chart Tools.
Wykresy mogą być statyczne i interaktywne i zapoznamy się z tworzeniem obu w tym tutorialu.

Statyczne kontra Interaktywne

Mamy do dyspozycji dwa rodzaje wykresów:

Statyczne Image Charts- używamy adresu URL do pobrania obrazka z wykresem
Interaktywne Interactive Charts – używamy JavaScript nadając im dynamizmu

Image Charts są łatwe w użyciu, jednak interaktywne są znacznie bardziej elastyczne, ponieważ są ‘wrażliwe’ na zdarzenia, które możemy wykorzystać do interakcji z innymi elementami na stronie.

Jedna z pięciu najłatwiejszych rzeczy na świecie

W istocie dodanie własnego statycznego wykresu na własną stronę sprowadza się do dodania adresu URL.
Jeśli wpiszesz w swojej przeglądarce następujący link:


http://chart.apis.google.com/chart?cht=p3&chs=450x200&chd=t:2,4,3&chl=Tak|Nie|Nie%20wiem&chtt=

Czy%20wiesz,%20ze%2050%%20Polakow%20to%20polowa%20spoleczenstwa?&chco=ff0000

Zobaczysz taki oto wykres:

Możesz teraz dodać ten link jako adres obrazka w kodzie strony:

Czyż nie jest to bajecznie prostą igraszką?

A teraz kilka słów o budowie adresu URL

Parametry wymagane

http://chart.apis.google.com/chart? – główny adres dla wywoływanych wykresów
cht=p3& – typ wykresu – tu kołowy 3D
chs=450×200& – rozmiar wykresu w pikselach dłogość x wysokość
chd=t:2,4,3& – wartości procentowe dla odpowiednich danych

Parametry opcjonalne

chl=Tak|Nie|Nie%20wiem& – etykiety dla odpowiednich danych
chtt=Czy%20wiesz,%20ze%2050%%20Polakow%20to%20polowa%20spoleczenstwa?& – tytuł wykresu
chco=ff0000 – schemat kolorystyczny

I to tyle jeśli chodzi o statyczne wykresy. Manipulując powyższymi parametrami można osiągnąć niesamowite efekty! Do dyspozycji otrzymujemy sporo różnych rodzajów wykresów, które możemy dowolnie kolorować używając schematów od Google lub własnych, a dodając opcjonalne parametry, masz w ręku silne narzędzie!.
Ale zajmijmy się teraz czymś jeszcze bardziej interesującym :)

Wykresy interaktywne

Aby używać interaktywnych wykresów zmienimy nieco podejście. W tym przypadku nie tworzymy adresu URL, tylko korzystamy z skryptu JavaScript. Nie jest to tak proste jak wcześniejsze zadanie, ale trudne też nie.

Wykresy mają różne poziomy interaktywności. Zazwyczaj wykres będzie reagować w określony sposób, na wywołaną akcję. Kliknięciem pokazane podpowiedzi lub animacje to jeden z przykładów, ale naprawdę potężnym narzędziem jest to, że mogą one wywoływać zdarzenia, dla których można zarejestrować wywołania zwrotne. Do takich zdarzeń może być wybranie słupka lub kawałka wykresu kołowego po najechaniu myszką itp.

Formatowanie danych

Aby zobaczyć wykres wszystkie dane muszą wywodzić się z obiektu DataTable.
W zasadzie jest to tabela zbudowana z wierszy i kolumn, gdzie każda kolumna ma zdefiniowane typy danych (ID i etykiety).
Aby odnieść się do konkretnej komórki tabeli należy użyć pary wiersz-kolumna. Wiersz jest zawsze liczbą (numerowanie od zera), kolumna może być liczbą lub identyfikatorem.

Załóżmy, że chcemy wyświetlić wyniki naszej firmy osiągnięte w 2010 roku – na wykresie słupkowym:

Kwartał 2010r.	Zarobki
Kwartał I	308
Kwartał II	257
Kwartał III	375
Kwartał IV	123

Mamy dwie kolumny: pierwsza typu ‘string’ – etykieta każdego słupka, druga typu ‘number’ jest wartością słupka. Mamy cztery rzędy co oznacza, że będą cztery słupki. Eureka!

W jaki sposób umieścić teraz dane w obiekcie DataTable? Oto odpowiedni kod – każda linia jest wyjaśniona później:


//utwórz obiekt DataTable
var dataTable = new google.visualization.DataTable();

//zdefiniuj kolumny
dataTable.addColumn('string','Kwartał 2010');
dataTable.addColumn('number', 'Zarobki');

//zdefiniuj wiersze
dataTable.addRows([['K1',308], ['K2',257],['K3',375],['K4', 123]]);

Jest to jeden ze sposobów tworzenia obiektu DataTable. Pamiętaj, że różne wykresy wymagają różnych danych i różnego ich formatu, więc przed utworzeniem takowego, zapoznaj się ze specyfikacją danego wykresu z Google Chart Tools.

Wizualizacja danych na wykresie słupkowym

W tym pierwszym przykładzie użyjemy wykresu kolumnowego do przedstawienia naszych danych. W galerii Google Visualization, możemy wybrać dowolny typ wykresu, aby zobaczyć dokumentację i przykłady.

Teraz możemy załadować Visualization API za pomocą konstrukcji google.load () funkcja (AJAX API):

    google.load('visualization', '1', {'packages': ['columnchart']});

Drugi parametr ’1′ odnosi się do wersji API do załadowania – 1 to aktualna wersja. ‘Packages’ to tablica z wszystkimi wizualizacjami, z których będziemy korzystać. W tym przypadku, będzie to tylko wykres kolumnowy.

W tym momencie mamy wszystkie potrzebne biblioteki, aby stworzyć obiekt DataTable i wyświetlać nasze wykresy, jednak musimy mieć pewność, że wizualizacja jest w pełni załadowana, w przeciwnym razie dostaniemy kod błędu i nasze wykresy nie będą wyświetlane.

Aby to zrobić rejestrujemy funkcję zwrotną – będzie wywołana gdy wszystkie dane są załadowane.

//ustaw wywoływaną funkcję zwrotną
google.setOnLoadCallback (createChart);

Tak wygląda funkcja createChart() oraz cała struktura strony:

Obiekt chart, tworzony jest w ten sposób

var chart = new google.visualization.ColumnChart (document.getElementById('Chart'));

Argumentem funkcji jest referencja do elementu drzewa DOM, gdzie wyświetlony zostanie wykres tu – div z identyfikatorem Chart.
Następnie definiujemy opcje wykresu – wymiary i nagłówek:

 var options = {width: 400, height: 240, is3D: true, title: 'Zarobki Firmy'};

W efekcie otrzymujemy taki wykres:

Uwaga: Wszystkie zdjęcia są tu statyczne, aby poradnik był dostępny niezależnie od przeglądarki i ustawień JavaScript. Zobacz załączone demo wersji interaktywnej.

Chytre: Google Fonts API – miłość od pierwszego wejrzenia

halibucik — Thu, 20 May 2010 18:08:19 +0000

Google powitało nas dzisiaj dwiema wiadomościami.
Pierwsza z nich to usługa Google Font API. Linkując do określonej czcionki przechowywanej na serwerze Google (oszczędzamy transfer!), mamy dostęp do szerokiej gamy niestandardowych czcionek. Zintegrowanie naszego serwisu z nową usługą to – mówiąc krótko – betka!

Ponieważ wszystko odbywa się za przysłowiowymi kulisami, Google Font API można bez przeszkód wykorzystywać NAWET w Internet Explorer 6.
Możliwości najnowszego dziecka Google są już teraz imponujące, aż strach pomyśleć co czeka nas w przyszłości :)

Najtrudniejszy pierwszy krok

Aby skorzystać z Google Font API wystarczy dodać link do wybranej czcionki w meta, oraz w stylu css dodać font-family z nazwą tej czcionki. Przykład:


 
  


=Yanone+Kaffeesatz
 

 
  Wybawco!

Tak może wyglądać nasze cudeńko :)

Logowanie w Zend Framework

halibucik — Sun, 16 May 2010 15:33:00 +0000

Wielu zadaje sobie pytanie, jak w zend frameworku poradzić sobie z uwierzytelnianiem użytkowników.
Największe wyzwanie to połączenie w jedno składników takich jak:

Adapter uwierzytelniania
Logowanie
Kontroler dla akcji logowanie / wylogowanie
Sprawdzanie, czy użytkownik jest zalogowany

Sztuką jest poprawne zaprojektowanie odpowiednich działań w strukturze MVC za pomocą Zend_Auth.

Adapter uwierzytelniania

Nasza aplikacja z założenia wymaga podania loginu i hasła, dane są sprawdzane i porównywane. W odpowiedzi otrzymujemy obiekt uwierzetelniania.

Formularz logowania

Formularz logowania jest w istocie bardzo prosty. W zend frameworku można ustalić wiele reguł walidacji danych, my ustawimy następujące:

username zawiera tylko litery alfabetu oraz jego długość jest między 3-20 znaków
password musi składać się ze znaków alfanumerycznych i ma długość 6-20 znaków.

Formularz może wyglądać następująco:

class LoginForm extends Zend_Form
{
    public function init()
    {
        $username = $this->addElement('text', 'username', array(
            'filters'    =>; array('StringTrim', 'StringToLower'),
            'validators' => array(
                'Alpha',
                array('StringLength', false, array(3, 20)),
            ),
            'required'   => true,
            'label'      => 'Twoj login:',
        ));

        $password = $this->addElement('password', 'password', array(
            'filters'    => array('StringTrim'),
            'validators' => array(
                'Alnum',
                array('StringLength', false, array(6, 20)),
            ),
            'required'   => true,
            'label'      => 'Hasło:',
        ));

        $login = $this->addElement('submit', 'login', array(
            'required' => false,
            'ignore'   => true,
            'label'    => 'Login',
        ));

          //Chcemy pokazać wiadomość o nieudanym logowaniu,
          //jeśli jest takowa potrzebna
          //Musimy dodać odpowiedni dekorator
        $this->setDecorators(array(
            'FormElements',
            array('HtmlTag', array('tag' => 'dl', 'class' => 'zend_form')),
            array('Description', array('placement' => 'prepend')),
            'Form'
        ));
    }
}

Kontroler logowania

Dodamy teraz kontroler przechwytujący akcje logowania i wylogowania. Typowy przebieg jest następujący

Użytkownik wypełnia formularz
Użytkownik wysyła formularz
Kontroler reaguje na wysłany formularz

Jeśli walidacja danych się nie powiedzie, wyświetlony jest stosowny komunikat

W przypadku sukcesu, użytkownik przekierowany jest do strony głównej ‘index’

Zalogowany użytkownik przekierowany jest na stronę główną
Wywołanie akcji ‘wyloguj’ wylogowuje użytkownika i przekierowuje na stronę główną

LoginController będzie korzystał z wybranego adaptera uwierzytelniania, jak również z formularza logowania. Będziemy przekazywać do konstruktora formularza logowania akcję oraz metodę. Kiedy mamy poprawne dane, będziemy przekazywać je do naszego adaptera uwierzytelniania.

Przejdźmy do stworzenia kontrolera.

class LoginController extends Zend_Controller_Action
{
    public function getForm()
    {
        return new LoginForm(array(
            'action' => '/login/process',
            'method' => 'post',
        ));
    }

    public function getAuthAdapter(array $params)
    {
        //Miejsce do uzupełnienia przez developera
        //Nasz formularz zwraca parametry 'username' oraz 'password'
        //Prosty przykład poniżej        

    }
}

 public function  getAuthAdapter(array  $params)
    {
       $db = Zend_Db_Table_Abstract::getDefaultAdapter();
      $adapter = new Zend_Auth_Adapter_DbTable($db,'uzytkownicy','login','password', "MD5(CONCAT())");

      $select = $adapter->getDbSelect();
      $select->where('act =?', 1);

      $adapter->setIdentity($params['username']);
      $adapter->setCredential(md5($params['password']));
      $adapter->setTableName('uzytkownicy');
      return $adapter;

    }

Przy założeniu, że domyślny adapter jest skonfigurowany w application.ini np.

resources.db.adapter = PDO_MYSQL
resources.db.params.host = localhost
resources.db.params.username = user
resources.db.params.password = pass
resources.db.params.dbname = table

Następnym krokiem jest sprawdzenie przed wysłaniem formularza czy:

jeśli dane użytkownika zostały potwierdzone, a nie został wywołał akcji ‘wylogowanie’ – przenieś na stronę główną
jeśli użytkownik nie jest uwierzytelniony, a wywołał akcję ‘wylogowanie’ przekieruj na stronę logowania

Poniższy preDispatch() zrobi to za nas:

class LoginController extends Zend_Controller_Action
{
    // ...

    public function preDispatch()
    {
        if (Zend_Auth::getInstance()->hasIdentity()) {
            // Jeśli zalogowany, nie chcemy pokazywać formularz logowania
            // jednak akcja 'wyloguj' powinna być dostępna
            if ('logout' != $this->getRequest()->getActionName()) {
                $this->_helper->redirector('index', 'index');
            }
        } else {
            // Jeśli niezalogowany, akcja 'wyloguj' nie powinna być dosŧępna
            // przekieruj wtedy do strony logowania
            if ('logout' == $this->getRequest()->getActionName()) {
                $this->_helper->redirector('index');
            }
        }
    }
}

Czas teraz na nasz formularz logowania. Najprostszy pod słońcem może wyglądać następująco:

class LoginController extends Zend_Controller_Action
{
    // ...

    public function indexAction()
    {
        $this->view->form = $this->getForm();
    }
}

Przetwarzanie formularza wymaga nieco więcej logiki. Musimy sprawdzić czy dane zostały wysłane metodą ‘POST’, czy dane są poprawne i wreszcie czy pasują do użytkownika z bazy danych (czy skądkolwiek inąd:

class LoginController extends Zend_Controller_Action
{
    // ...

    public function processAction()
    {
        $request = $this->getRequest();

        // Sprawdź, czy mamy dane w POST
        if (!$request->isPost()) {
            return $this->_helper->redirector('index');
        }

        // Pobierz dane z formularza i sprawdź ich poprawność
        $form = $this->getForm();
        if (!$form->isValid($request->getPost())) {
            // gdy niepoprawne
            $this->view->form = $form;
            return $this->render('index'); // ponownie wyświetl formularz
        }

        // pobierz adapter uwierzytelniania i porównaj dane
        $adapter = $this->getAuthAdapter($form->getValues());
        $auth    = Zend_Auth::getInstance();
        $result  = $auth->authenticate($adapter);
        if (!$result->isValid()) {
            // Gdy dane niepoprawne
            $form->setDescription('Invalid credentials provided');
            $this->view->form = $form;
            return $this->render('index'); // ponownie wyświetl formularz
        }

        // Jesteśmy uwierzytelnieni! Przekieruj na stronę główną
        $this->_helper->redirector('index', 'index');
    }
}

Teraz możemy zająć się wylogowywaniem użytkowników. To prawie tak proste jak wyświetlanie formularza logowania, po prostu usuń dane z obiektu uwierzytelniania i przekieruj:

class LoginController extends Zend_Controller_Action
{
    // ...

    public function logoutAction()
    {
        Zend_Auth::getInstance()->clearIdentity();
        $this->_helper->redirector('index'); //powrót na stronę logowania
    }
}

Oto i nasze procedury logowania i wylogowania. Rzuć okiem na plik widoku z formularzem:

Please Login

form ?>

I to już wszystko!. Zend_Form sprawia, że pliki widoku – tu logowania – są proste!

Sprawdzenie czy użytkownik jest uwierzytelniony

Ostatnim zagadnieniem, które poruszymy w tym poradniku jest: jak mogę sprawdzić, czy użytkownik jest uwierzytelniony i ograniczyć dostęp, jeśli nie?

Jeśli uważnie przyjrzeć się metodzie preDispatch () powyżej, widać już, jak można to zrobić. Zend_Auth przetrzymuje tożsamość w sesji, pozwalając na odwołania w tej formie:

Zend_Auth::getInstance()->hasIdentity()

Możesz użyć tego do sprawdzenia, czy użytkownik jest zalogowany, a następnie użyć przekierowania do strony logowania, jeśli nie. Obiektu uwierzytelniania można użyć następująco:

$identity = Zend_Auth::getInstance()->getIdentity();

Można użyć tego w do budowy prostego helpera widoku, pokazującego link z loginem:

/**
 * ProfileLink helper
 *
 * Call as $this->profileLink() in your layout script
 */
class My_View_Helper_ProfileLink
{
    public $view;

    public function setView(Zend_View_Interface $view)
    {
        $this->view = $view;
    }

    public function profileLink()
    {
        $auth = Zend_Auth::getInstance();
        if ($auth->hasIdentity()) {
         $username = $auth->getIdentity()->username;
         return 'Witaj, ' . $username .  '';
        }

        return 'Zaloguj';
    }
}

Podsumowanie

W Zend_Auth wiele dzieje się za kulisami, aby dalsze utrzymywanie danych w sesji było proste.

W połączeniu z Zend_Form otrzymujesz bardzo łatwe do wdrożenia rozwiązanie do pobierania i sprawdzenie uprawnień, Zend_Controller dodaje opcję filtrowania danych przed wysyłką, co umożliwia kontrolowanie dostępu do odpowiednich części witryny.