Archiwa kategorii: JavaScript

symfony_black_02

[Ubuntu] Instalacja LESS oraz Integracja z Symfony2 Assetic

1 odpowiedź
Twitt

Ostatnio staje siÄ? bardziej popularny LESS. By go zintegrowaÄ? z Symfony2 za pomocÄ? Assetic’a i zachowaÄ? prÄ?dko??Ä? ??adowania strony bez przeskoku spowodowanego kompilacjÄ? LESS’a przez JavaScript less.js.

DziÄ?ki temu pliki less bÄ?dÄ? skompilowane do normalnego css. Dodatkowo mo??na je wrzuciÄ? bezpo??rednio na serwer do static contentu np. Amazon S3.

Schemat dzia??ania Less Node.js i Assetica

Schemat dzia??ania Less Node.js i Assetica

  1. Instalacja Less

    1. Instalacja Node.js 
       sudo apt-get update
 sudo apt-get install git-core curl build-essential openssl libssl-dev
 git clone https://github.com/joyent/node.git
 cd node
 chmod +x ./configure
 ./configure
 make
 sudo make install
 node -v
    2. Instalacja NPM 
      wget http://npmjs.org/install.sh --no-check-certificate
sudo ./install.sh
    3. Instalacja Less 
      sudo npm install less  --global

      Parametr global jest niezwykle istotny, gdy?? nie bÄ?dziesz m??g?? potem uzyskaÄ? dostÄ?pu do lessa

    4. Dodanie PATH Less’a do ~/.bashrc
      Edytuj plik: ~/.bashrc

      gedit ~/.bashrc

      Dodaj nowÄ? liniÄ? na ko??cu pliku:

       PATH=$PATH:$HOME/node_modules/less/bin
    5. Teraz trzeba prze??adowaÄ? profil Basha 
       source ~/.bashrc
    6. Testujemy Less! 
       lessc wejscie_less.less > wyjscie_css.css
  2. Integracja z Symfony2 i Assetic
    1. Konfiguracja Assetic
      Edytujemy config.yml i dodajemy 3 liniÄ? zwiÄ?zane z lessem tak jak to widaÄ? na przyk??adzie poni??ej:

      # app/config/config.yml
assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~
        less:
            node: /usr/local/bin/node
            node_paths: [/usr/local/lib/node]
        yui_css:
            jar: %kernel.root_dir%/../java/yuicompressor-2.4.6.jar
        yui_js:
            jar: %kernel.root_dir%/../java/yuicompressor-2.4.6.jar
    2. Edytujemy nasz g????wny plik layoutu(base.html.twig)
      DodajÄ?c warto??Ä? less, do argumentu filter:

      #base.html.twig
...
<head>
{% stylesheets filter='less,?yui_css' '@AcmeBundle/Resources/less/main.less' %}
    <link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %}
</head>
...
    3. Budujemy assety za pomocÄ? Assetic’a 
      php app/console assetic:dump --env=prod
    4. Cieszymy siÄ? ??migajÄ?cym arkuszem styli kompilowanym z less’a!
Twitt

Javascript: Walidator Numeru Rachunku Bankowego (NRB)

Napisz odpowiedź
Twitt

Opis Formatu NRB

Format NRB jest to 26 cyfr zapisanych w formacie:

CC AAAA AAAA BBBB BBBB BBBB BBBB

Gdzie:

  • CC to suma kontrolna (2 cyfry),
  • AAAAAAAA to numer rozliczeniowy jednostki organizacyjnej banku (8 cyfr),
  • BBBBBBBBBBBBBBBB to numer rachunku klienta w banku (16 cyfr).

WiÄ?cej na ten temat powie nam wikipedia.

Algorytm Walidacji:

  1. Wytnij znaki nie numeryczne z ciÄ?gu wej??ciowego i przejd?? do kroku 2.
  2. Je??eli d??ugo??Ä? ciÄ?gu znak??w wynosi 26 to przejd?? do kroku 3 w przeciwnym wypadku zwr??Ä? false.
  3. Do ciÄ?gu znak??w dopisz kod kraju 2521, kt??ry odpowiada kodowi literowemu PL (P – 25, L – 21).
  4. Dwa pierwsze elementy ciÄ?gu zawierajÄ?cego numeru konta przenie?? na koniec tego ciÄ?gu(kt??re zawierajÄ? sumÄ? kontrolnÄ?).
  5. PrzeglÄ?daj numer konta od ko??ca mno??Ä?c kolejno: ostaniÄ? cyfrÄ? numeru konta z pierwszÄ? wagÄ?  zawartÄ? w tablicy wag. SumujÄ?c wynik powy??szego mno??enia.
  6. Je??eli wynik  reszty z dzielenia przez 97  jest r??wny jeden to zwr??Ä? true w przeciwnym wypadku zwr??Ä? false

Implementacja funkcji sprawdzajÄ?cej poprawno??Ä? NRB

function NRBvalidatior(nrb)
  {
    nrb = nrb.replace(/[^0-9]+/g,'');
    var Wagi = new Array(1,10,3,30,9,90,27,76,81,34,49,5,50,15,53,45,62,38,89,17,
            73,51,25,56,75,71,31,19,93,57);
 
    if(nrb.length == 26) {
      nrb = nrb + "2521";
      nrb = nrb.substr(2) + nrb.substr(0,2);
      var Z =0;
      for (var i=0;i&lt;30;i++) {
        Z += nrb[29-i] * Wagi[i];
      }
      if (Z % 97 == 1) {
        return true;
      }else{
        return false;
      }
 
    }else{
      return false;
    }
  }

Wywo??ywanie sprawdzania przy edycji pola lub wys??aniu formularza

$('form').submit(function(){
  if(NRBvalidatior($('input#nrb').val()))
  {
    return true;
  }
  else
  {
    return false;
  }
});

Live demo:

Twitt

GoogleMaps + WordPress Szybki Kurs

5 odpowiedzi
Twitt

  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 :)

Twitt