Archiwa tagu: tutorial

GoogleMaps + WordPress Szybki Kurs

  1. Wst?p

    Dawno nic o google maps nie pisa??em zatem przedstawie wam kurs jak do statycznej strony np z kontaktem doda? map? googla z kilkoma efektami. Kto?? pewnie zapyta: „po co? Przecie?? jest dokumentacja na googlemaps.com” Ja poka??? krok po kroku co i jak. Nie obra??cie si? je??li ten tutorial b?dzie wygl?da?? jak artyku?? z „Komputer ??wiata”.

  2. Pobieramy GoogleMaps API key

    1. Rozpoczynamy prac? od wej??cia na stron?: http://code.google.com/apis/maps/
    2. Zgadzamy si? z warunkami umowy licencyjnej i podajemy adres naszej strony:
    3. Gdy strona jest ju?? zarejestrowana mamy dost?p do API key’a oraz do przyk??adowego skryptu.
  3. Piszemy Skrypt

    1. Tworzymy dwie rzeczy najpierw katalog js/ w katalogu wp-content/themes/nasztheme/ plik gmaps.js
    2. Kodujemy zdarzenie document.ready by za??adowa? map?.
      window.onload = function() {
      if (GBrowserIsCompatible()) {
      //Inicjalizacja mapy poprzez tworzenie obiektu
      var map = new GMap2(document.getElementById("map"));
      }else{
      alert("sorry but your browser sux hard. update it and come again!");
      }
      });
    3. Ustawiamy ??rodek mapy i zoom
      map.setCenter(new GLatLng(35.083956, 103.710938), 4);
    4. Dodajemy kontrolki do mapy:
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
    5. Dodajemy punkt na mapie
      var lat = 0;
      var lng = 0;
      var point = new GLatLng(lat, lng);
      var marker = new GMarker(point);
      map.addOverlay(marker);
    6. Mo??emy jeszcze doda? dymek z opisem punktu lub adresem
      map.openInfoWindow(point, 'To jest nasz punkt!');
    7. Czyszczenie mapy z wszystkich marker??w i InfoWindow odbywa si? za pomoc? polecenia:
      map.clearOverlays();
  4. Modyfikujemy Template

    Modyfikacja template polega na edycji pliku header.php plus ewentualnie mo??na doda? kilka linii css w style.css
    Najpierw zostawmy wszystkie style i temu podobne
    Musimy w sekcji head dwie linie:

    <head>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=TUTAJ_WSTAWIAMY_API_KEY" type="text/javascript"></script>
     <script src="<?php bloginfo('template_directory'); ?>/js/gmaps.js.php" type="text/javascript">
    </script>
    </head>
    
  5. Umieszczamy Mapk? w kontakcie

    Sprawa prosta. Publikujemy now? stron?. Nazywamy j? kontakt.

    I dodajemy do niej nasz? mapk?:
    <div id="map"></div>
    Mo??na przy okazji j? r??wnie?? ostylowa?.
    <div id="map" style="width: 100%; height: 400px;"></div>

  6. First Run

    Nim odpalimy po raz pierwszy nasz? mapk?. To najpierw pami?tajmy o wrzuceniu na serwer wszystkich plik??w. Nie wiem czy zbyt wiele wymagam ale bior? za pewnik to ??e potraficie obs??ugiwa? jakiegokolwiek klienta FTP.
    Zatem wrzucamy pliki:
    wp-content/themes/nasztheme/js/gmaps.js
    wp-content/themes/nasztheme/header.php

  7. Efekty

    Wszyscy doskonale zdaj? sobie z tego spraw? ??e strona musi by? efektowna. Mo??na te?? u??y? cytatu:

    – Aplikacja?
    – Ma by? droga i robi? biiip

    No to sprawa prosta ??eby zadba? o tzw. „Wow Effect” (nie myli? z Word Of Warcraft) mo??emy zastosowa? ma??? animacj?. Dla du??ego odsetka klient??w ten cytat jest

    Np. Je??eli Firma ma trzy oddzia??y w mie??cie to mo??emy zrobi? takie co??:

    1. Na starcie ??adujemy logo firmy
    2. Pokazujemy siedzib? g????wn?, wy??wietlamy dymek
    3. Pokazujemy pozosta??e siedziby w odst?pach czasowych i wy??wietlamy dymek z adresem i telefonem

    By zaimplementowa? taki skrypt nie potrzebujemy du??o dodatkowej wiedzy z dziedziny javascript’u. Po pierwsze musimy wiedzie? jak u??ywa? funkcji:

    Za animacj? naszej mapy b?dzie odpowiada?:

    Gdzie point to element z tablicy gdzie zdefiniowali??my oddzia??y firmy.

    Po wy??wietleniu trzeba wyczy??ci? map? za pomoc?:

    map.clearOverlays();

  8. Podsumowanie

    W sumie zastanawiam si? czemu pisz? taki tutorial, poniewa?? jest gotowy plugin do wordpress’a kt??ry rozwi?zuje problemy z googlemaps. Konfigurowalny z wp-admin z ??adnego formularza.

    Mo??e tylko po to by nauczy? si? korzysta? z narz?dzi, kt??re u??atwi? nam prac? i naucz? pisa? dobre javascripty. Zach?cam do pr??b z kodowaniem map by Googlemaps. I zapewniam ??e GoogleMaps API nie gryzie :)

Paypal – wst?p

Do napisania tego oto tutorialu zmotywowa??y mnie wiele rzeczy po pierwsze w polskim internecie nie ma zbyt wiele na temat p??atno??ci paypal’em. Znalaz??em na kilku forach zapytania na ten temat. Z czego sam jedno napisa??em na forum.php.pl. Drug? przes??ank? kt??ra u??wiadomi??a, ??e paypal zaczyna zdobywa? polski rynek p??atno??ci online jest fakt umowy jak? paypal.com podpisa?? z p??atno??ci.pl i ju?? nied??ugo b?dziemy mogli si? cieszy? p??aceniem za us??ugi i produkty w ten wygodny spos??b. Kolejn? spraw?, kt??ra pokaza??a mi jak bardzo szkodliw? rzecz? mo??e by? nieumiej?tne korzystanie z „Buy Now” (tych nie kodowanych) gdzie wystarczy ze ??r??d??a strony wyci??:

<input type="hidden" name="return" value="url_po_udanej_transakcji" />

by uzyska? dost?p do zasobu kt??ry chcemy kupi?. Nast?pny fakt wyp??yn??? na ??wiat??o dzienne gdy sam pisa??em obs??ug? IPN na Paypal’u i zobaczy??em, ??e nawet tutorial’e i przyk??ady na stronie developer center @ paypal maj? b???dy(mnie szczeg??lnie ineteresowa?? ten do php4). A Koniec ko??c??w w poszukiwaniu gotowych rozwi?za?? tj. klas, funkcji kt??re mog??y by zaspokoi? moje potrzeby. Znalaz??em dwa takie rozwi?zania. Pierwsze z nich na phpclasses.org by??o mocno rozbudowane i zabezpieczone szyfrowaniem. Jednak mia??o jedn? podstawow? wad? wymaga??o „doklejenia” kolejnych 3 du??ych bibliotek. Natomiast drugie z nich po wst?pnych testach okaza??o si? nie dzia??a? tak jak bym chcia??, wi?c postanowi??em napisa? co?? w??asnego.
Tyle s??owem wst?pu teraz przedstawie czego b?dziemy potrzebowa? do wdro??enia p??atno??ci paypal’em na naszej stronie.

Po pierwsze do test??w paypal udost?pnia nam sandbox. ??eby do owej „piaskownicy” uzyska? dost?p trzeba za??o??y? sobie konto na: developer.paypal.com . Po za??o??eniu konta i potwierdzeniu prawdziwo??ci skrzynki e-mail. Mamy mo??liwo??? za??o??enia kont testowych. B?d? nam potrzebne takie dwa: pierwsze buissnes account do testowania p??atno??ci i wygenerowania kodu button??w na, kt??rych b?dziemy testowali nasze rozwi?zania, drugie natomiast kupuj?cego po to by zbada? sam proces dokonywania p??atno??ci.

Uwaga! wa??ne do testowania p??atno??ci na sandbox’ie wymaga bycia zalogowanym na developer.paypal.com

Aby zrozumie? temat bardziej sp??jrzmy na poni??szy schemat.

Schemat Dzia??ania IPN w p??atno??ciach paypal.com

Dla klienta zasada jest prosta. Rejestruje si? na naszej stronie. Op??aca us??ug? np. abonament na dost?p do poprzednich wyda?? naszego magazynu w plikach pdf po przez klikni?cie Buy Now. Jest przekierowany na strone paypal’a gdzie loguje si? na swoje konto lub p??aci kart? p??atnicz?. Po pozytywnym zako??czeniu transakcji wraca na nasz? stron? z podzi?kowaniami tzw „return”. Paypal gubi ka??d? sesje wi?c nie ma co liczy? na jej odzyskanie po powrocie. Rozwi?zaniem najprostszym jest odes??anie klienta po podzi?kowaniu do formularza logowania.

Serwer paypala opr??cz tego. ??e przeprowadza ca??? transakcje i odpowiedzialno??? za wpisane tam poufne dane takie jak numer karty kredytowej s? po jego stronie. To jeszcze przekazuje nam dane na temat transakcji za po??rednictwem IPN(instant payment notification). Dzieje si? to w nast?puj?cy spos??b. Po dokonaniu wp??aty na paypalu wysy??a do naszego skryptu na adres podany w:

<input type="hidden" name="notify_url" value="url_do_skryptu_obs??uguj?cego_ipn"  />

przekazuje nam pule zmiennych metod? POST min.

$invoice = $_POST['invoice'];

$receiver_email = $_POST['receiver_email'];

$item_name = $_POST['item_name'];

$item_number = $_POST['item_number'];

$quantity= $_POST['invoice'];

$payment_status = $_POST['payment_status'];

$pending_reason = $_POST['pending_reason'];

$payment_date = $_POST['payment_date'];

$payment_gross = $_POST['payment_gross'];

$payment_fee = $_POST['payment_fee'];

$payment_amount = $_POST['mc_gross'];

$payment_currency = $_POST['mc_currency'];

$txn_id = $_POST['txn_id'];

$txn_type = $_POST['txn_type'];

$first_name = $_POST['first_name'];

$last_name = $_POST['last_name'];

$address_street = $_POST['address_street'];

$address_city = $_POST['address_city'];

$address_state = $_POST['address_state'];

$address_zip = $_POST['address_zip'];

$address_country = $_POST['address_country'];

$payer_email = $_POST['payer_email'];

$address_status = $_POST['address_status'];

$payment_type = $_POST['payment_type'];

$notify_version = $_POST['notify_version'];

$verify_sign =$_POST['verify_sign'];

Dzi?ki tym zmiennym mo??emy po pierwsze rozpozna? czy p??atno??? zosta??a zako??czona powodzeniem:

$_POST['payment_status'] == "succes"

Oraz pozna? bli??ej dane naszego klienta. Jego dane jakie poda?? na naszej stronie mog? si? r????ni? od tych danych jakie widniej? na paypalu. Mo??emy je wykorzysta? jako powi?kszenie naszej bazy do mailing??w z promocjami, b?d?? zachowa? je tylko po to by rejestrowa? sprzeda?? prowadzon? na naszej stronie.

Jednak zanim obs??u??ymy otrzymane ???danie musimy sprawdzi? czy aby na pewno pochodzi z paypal’a. Wystarczy z??o??y? wszystkie zmienne przekazane postem w ci?g znak??w typu zmienna1=5&zmienna2=6&….. itd. Jednak zanim to jednak zrobimy musimy doda? na samym pocz?tku komend?, kt??ra poinformuje paypal, ??e chcemy dokona? potwierdzenia czy takie ???danie zosta??o wys??ane przez paypal czy te?? nie. Zrobimy to nast?puj?cym kodem:

$req = 'cmd=_notify-validate'; //dok??adamy komend? z pro??b? o potwierdzenie tego powiadomienia o p??atno??ci
foreach ($_POST as $key => $value) {
$value = urlencode($value);
$req .= "&$key=$value";

}

//zmienna req teraz przechowuje wszystkie zmienne z $_POST w postaci kt??r? opisywa??em wcze??niej

Nast?pnie wystarczy wys??a? takie zapytanie do serwera paypala. S? dwie szko??y wysy??ania, albo fsockopen() albo za pomoc? klasy cURL. Oba s? poprawne. Ja zaprezentuje fragment kodu wykorzystuj?cy pierwsz? z nich.

$header .= "POST /cgi-bin/webscr HTTP/1.0\r\n"; // ustawiamy nag????wki zapytania.

$header .= "Content-Type: application/x-www-form-urlencoded\r\n";

$header .= "Content-Length: " . strlen($req) . "\r\n\r\n"; // w tej linii zamieszczamy d??ugo??? naszego zapytania

$fp = fsockopen (paypal_adr, 80, $errno, $errstr, 30); //sta??a paypal_adr jest adresem na kt??ry wysy??amy nasze zapytanie z pro??b? o validacje

Sta??a paypal_adr mo??e mie? dwie warto??ci: pierwsz? testow? https://www.sandbox.paypal.com lub drug? ju?? w pe??ni funkcjonaln? https://www.paypal.com czasami pojawia si? problem z https:// poniewa?? niekt??re serwery nie maj? skonfigurowanego portu.

Otwarli??my deskryptor portu $fp. Teraz musimy wys??a? nasze dane do validacji.

if (!$fp) { // sprawdzamy czy wszystko ok z naszym po???czeniem je??eli nie jest to deskryptor przyjmuje warto??? false
	// tutaj mo??emy napisa? obs??ug? HTTP ERROR
} else {
	fputs ($fp, $header . $req); // je??eli deskryptor jest ok to wysy??amy mu nasze nag????wki po???czone z zapytaniem o validacje powiadomienia

Je??eli ju?? wys??ali??my nasz? pro??be o potwierdzenie ???dania teraz musimy obs??u??y? odpowied?? serwera paypal, kt??ry zwr??ci nam string z informacj? czy wszystko posz??o tak jak powinno czy te?? to odwo??anie by??o tylko pr??b? wy??udzenia od nas towaru.
Zatem zaczynamy od odczytania odpowiedzi do p??ty do p??ki nie dostaniemy znaku ko??ca pliku. Kod kt??ry si? tym zajmie mo??e wygl?da? tak:

while (!feof($fp)) {
	$res = fgets ($fp, 1024);

Otrzymali??my wi?c ju?? ca??? zawarto??? odpowiedzi i przechowujemy j? w zmiennej $res. Teraz trzeba by by??o sprawdzi? czy ta p??atno??? jest potwierdzona czy te?? nie. Do tego pos??u??y nam funkcja kt??ra por??wnuje binarnie dwa ci?gi znak??w strcmp(). Je??eli oba por??wnywane ci?gi s? identyczne to funkcja zwraca 0. Kod, kt??ry sprawdzi odpowied?? m??g?? by wygl?da? tak:

if (strcmp($res, "VERIFIED")==0) {
	//Sprawdzamy czy transakcja ma status jako zako??czona
	if (strcmp ($payment_status, "Completed") == 0) {
		//je??eli tak to mo??emy spokojnie dalej przetwarza? dane
	}
}else if(strcmp($res, "INVALID")==0){
	// mo??emy zarejstrowa? do pliku wszystkie pr??by atak??w na nasz serwis np. tak:
	$fplog = fopen('ipnlog.txt','a');
	fwrite($fplog, gmstrftime ("%b %d %Y %H:%M:%S", time())." -- ".$res." -- ".$req."\n");
	fclose($fplog);
}

Zatem wiecie ju?? na jakiej zasadzie mo??na obs??ugiwa? IPN otrzymany od paypal’a. Nie taki diabe?? straszny jak si? okazuje. Jednak mi on napsu?? sporo krwi. Ci?g dalszy wkr??tce nast?pi jak tylko znajd? troch? czasu.