Odpicuj mi forum - cz. 2 - jQuery

jQuery, jQuery, jQuery – magiczne słowo-klucz, o które opiera się cały ten poradnik, a w zasadzie sam pomysł. Z racji, że tym razem część praktyczna poradnika jest trywialna pozwolę się skupić na aspektach związanych z teorią oraz wykorzystaniem ogółem, a nie stricte pod nasze ukochane PBF-y.

Na sam początek umieszczę może dwa kluczowe linki, które lepiej i bardziej konkretniej wprowadzą temat języków skryptowych oraz tego jak się nimi posługiwać:


Głęboko wierzę, że nauka poprzez konkretne zadania i przykłady przynosi o wiele lepsze rezultaty niż po prostu czytanie regułek i definicji (chociaż bez nich obyć się nie można! – po prostu wstęp do języka powinien być obrazowy). Po dokładnym przestudiowaniu dwóch powyższych poradników powinniście sobie poradzić z większością zastosowań gotowców, o których za moment (a jak nie to od czego jest google?).

A więc po kolei i w dużym skrócie. Javascript to język programowania, dzięki któremu możemy pisać skrypty uruchamiane na stronach HTML. Sam w sobie jednak oferuje tylko "podstawy", dzięki którym co prawda można napisać niemalże dowolny skrypt realizujący dowolną funkcję, ale jest to uciążliwe. Z pomocą przychodzi jQuery, które jest biblioteką do javascript. Mówiąc krótko jest to takie coś, gdzie mądrzy ludzie napisali już dużo fajnych funkcjonalności za nas.
Przykład: W samym javascript ukrycie konkretnego elementu o określonej klasie np. <div/> nie jest aż tak proste, jak przy użyciu jQuery, które oferuje od razu gotowe funkcje do tego przeznaczone. Różnica jest więc w czasie i jakości pisanych skryptów, gdzie jQuery oferuje duży zysk.

Prześledźmy ten konkretny przykład z ukrywaniem elementów. Interaktywna wersja znajduje się tutaj: https://jsfiddle.net/Luxter/fdn7wvLv/2/

Spójrzmy po kolei na kluczowe fragmenty:
Gdzieś na naszej stronce w HTML-u mamy takie oto elementy:

<div class="javascriptClass">
     Javascript is good.
</div>

<div class="jQueryClass">
     But jQuery is better!
</div>

Następnie gdzieś (może być w stronce obok HTML-a, a może w dedykowanych plikach skryptowych) mamy nasze rozwiązanie w javascripcie:

javascriptDiv = document.getElementsByClassName("javascriptClass")[0];
javascriptDiv.onclick = function() {
      javascriptDiv.style.display = "none";
};

No i co tu widzimy? Po pierwsze, wbudowane metody javascript pozwalają jedynie pobrać wszystkie elementy danej klasy. Nam zależy tylko na jednym więc mówimy, że chcemy element 0 (my informatycy lubimy numerować rzeczy od 0, stąd pierwszy element ma indeks 0). Dalej mówimy, że .onclick, czyli po kliknięciu ma się wywołać funkcja, która zmienia styl danego elementu, a konkretniej atrybut display i ustawia go na "none". Już w takim prostym przykładzie widać ile tu niuansów. Trzeba odpowiednio z tablicy wyciągnąć element o żądanym indeksie, później trzeba wiedzieć że to poprzez styl się definiuje widoczność elementu, a następnie trzeba wiedzieć którą dokładnie wartość należy zmienić i jaką ją ustawić, żeby faktycznie ukryć element.

Teraz kontrprzykład, to samo rozwiązanie tylko, że w jQuery:

$(".jQueryClass").click(function() {
      $(this).hide();
});

No i proszę, krótko i przejrzyście. Pomijając tajemnicze znaczki $ które są zarezerwowane przez jQuery to pobieramy wszystkie elementy o danej klasie (fakt, że jest to klasa, a nie np. nazwa czy id określa się przez zastosowaną na początku, przed nazwą klasy, kropkę). Następnie definiujemy funkcję click(), a w środku na obiekcie this (czyli aktualnie przetwarzanym, bo to się samo magicznie dzieje dla każdego z pobranych elementów o danej klasie) wywołujemy gotową funkcję hide(). I tyle, nie musimy sami precyzować, o który element nam chodzi, nie musimy ręcznie zmieniać konkretnych wartości w stylu danego bloczku. Dzięki wykorzystaniu biblioteki jQuery jesteśmy jeden poziom abstrakcji wyżej skupiając się na funkcjonalnościach, a nie na szczególikach.

I to tyle w kwestii samego javascript i jQuery. Jeszcze raz odsyłam do poradników ze strony w3schools, które naprawdę w przystępny sposób prezentują główne możliwości danych języków czy bibliotek.

Przejdźmy teraz do kwestii technicznych związanych z naszym PBF-em. Może nadmienię jeszcze tylko, że javascript (a tym samym jQuery) uruchamiane są po stronie klienckiej, czyli de facto w przeglądarce. Co to dla nas oznacza? Ni mniej ni więcej, że nie musimy robić nic aby osobom przeglądającym forum wszystko działało, bo ich przeglądarka to obsługuje. Nie ważny jest więc hosting, domena, oferowane opcje etc. javascript jest poza nami i po prostu musi działać. Minusy? Kod javascript jest "ot tak" po prostu dostępny dla każdego, kto odwiedza naszą stronę. Może dowolnie edytować nasze skrypty javascript i zmieniać ich zachowanie (to znaczy na swojej lokalnej kopii, 100 użytkowników korzysta z naszego skryptu, ale to nie znaczy że sto pierwszy nie zmienia u siebie lokalnie skryptu i wykorzystuje go inaczej – niezależnie od reszty. To znaczy, że jego zmiany są tylko u niego i "nie psują" tego co jest u innych). Potencjalnie może więc zrobić coś czego byśmy sobie nie życzyli, dlatego korzystanie z wszelkich danych chronionych etc. w javascript wymaga wyjątkowej ostrożności. My jednak skupimy się na prostych sytuacjach, gdzie nie będzie to problemem.

Okej, najpierw zaznaczę, że nasz piękny, świeżutko wgrany phpBB ma już w sobie jQuery. Ktoś by pomyślał "ale super, czyli jest już dołączone i od razu mogę korzystać" i oczywiście miałby rację. Jednakże, korzystając z wbudowanego w phpBB jQuery nie mamy nad nim kontroli (w tym sensie, że jest tam wgrane na sztywno jQuery w jakiejś wersji). W moim przypadku wbudowane mam jQuery v1.11.0, a to, którego chciałbym używać to jQuery v3.0.0 (nie muszę chyba mówić, że nowsza wersja to więcej gotowych rzeczy?). Poza tym więcej gotowców może wymagać nowszej wersji jQuery do prawidłowego działania. A jeszcze poza tym to przecież chcemy mieć pełną kontrolę nad naszym forum dzięki FTP więc korzystajmy z tego.

Zaczynamy więc od usunięcia na serwerze wbudowanego jQuery, który w przypadku phpBB znajduje się w katalogu assets/javascript. Usuwamy cały plik jquery.min.js:

Obrazek

TO BARDZO WAŻNY KROK: NIE CHCEMY ŻEBY JEDNOCZEŚNIE ŁADOWAŁO SIĘ WBUDOWANE JQUERY I NASZE JQUERY.

Jeśli udało nam się już usunąć wbudowane jQuery to teraz musimy dodać nasze. CHYBA dobrą praktyką jest umieścić go w jednym miejscu i żeby się zawsze ładował. Takim miejscem w moim przypadku, wybranym arbitralnie przeze mnie jest plik overall_header.html znajdujący się w katalogu styles/prosilver/template (a przynajmniej tak jest w domyślnym stylu – jeśli styl został edytowany należy samemu zlokalizować plik).
No więc w overall_header.html gdzieś między znacznikami <head></head> (to CHYBA dobra praktyka) doklejamy taką oto linijkę kodu:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

W moim przypadku dokleiłem to w linijce 70 i po zmianach wygląda to tak:

Obrazek

Pewne wątpliwości może wzbudzać fakt, że przecież fizycznie usunęliśmy jakiś plik, a później dopisaliśmy w zamian jedną linijkę i wszystko ma być niby w porządku. Otóż wyjaśnienie jest bardzo proste: moglibyśmy ściągnąć ten plik jquery.min.js i wgrać go przez FTP na nasz serwer w miejsce starego i wszystko też by było dobrze. My jednak nie chcemy tylko dobrze, chcemy super, chcemy najlepiej jak się da. A najlepiej jak się da, to nie zapychać swojego serwera czymś, czym nie musimy go zapychać. Gdzieś tam w silniku phpBB (i innych pewnie też) jest taka sama linijka <script src="..."></script> dołączająca ten lokalny plik jQuery. My po prostu dochodzimy do wniosku, że skorzystamy z jQuery, które wystawia google i nie musimy się martwić wrzucaniem konkretnych plików w konkretne miejsca.

phpBB PRO TIP:
Zapewne w większości silników forumowych zmiany w plikach stylu nie są widoczne, ze względu na cache (czyli trzymanie plików stylu w pamięci podręcznej w celu ich szybszego dostarczenia użytkownikowi). Oznacza to, że nawet jeśli przez FTP wgraliśmy nową wersję overall_header.html to fizycznie użytkownikom serwowana jest stara wersja z cache. Można by po każdej takiej zmianie z poziomu Panelu Administratora czyścić cache odpowiednim przyciskiem, jednakże jest lepszy sposób.
W Panelu Administratora wchodzimy w "Load settings" i zaznaczamy "Recompile stale style components" na "Yes". Dzięki temu za każdą zmianą w FTP style powinny się odświeżać. Z doświadczenia jednak wiem, że nie zawsze jest tak kolorowo i czasem trzeba ręcznie kliknąć "Purge the cache" z zakładki "General".

Obrazek

I to koniec. Reasumując: usunęliśmy wbudowane jQuery i dodaliśmy nasze własne, takie jakie nam się podoba, a do tego zaznaczyliśmy, żeby style się odświeżały przy naszych zmianach w FTP. Jeszcze raz zwracam uwagę na poradniki ze strony w3schools, które stanowią doskonały punkt wyjścia do rozpoczęcia zabawy z javascript i jQuery. Naprawdę, przerobienie ich ze zrozumieniem pozwoli bez trudu wykorzystywać później gotowce i je dostosowywać, a także robić całą masę innych rzeczy.

Kolejna część poradnika obejmować będzie gotowce jQuery – jak je znaleźć oraz dodać na nasze forum.

Luxter

Additional Info

  • Data publikacji: Środa, 03 Sierpień 2016

Biorą udział w konwersacji

Komentarze (2)

  • Pojawiam się ponownie, by pogratulować poradnika. Nie mam innego wyjścia, bo po protu napisany według mnie świetnie, oraz ponownie wszystko dobrze wytłumaczone wraz z obrazkami (oraz rozwiałeś trochę wątpliwości). Cóż, wychodzi na to że wkrótce sam będę ogarniać kody oraz inne rzeczy od strony technicznej, bez wołania o wsparcie z zewnątrz. Oby tak dalej i powodzenia!

  • Dokładnie taki jest cel tej serii poradników - żeby każdy mógł sam "ogarniać kody". Właściwie, to cel jest troszkę szerszy, bo kody o których mowa są już w Internecie i czekają na użycie i właśnie to powinno udać się każdemu po zapoznaniu się z przedstawionymi treściami.
    Oczywiście w gestii czytelnika leży, czy będzie chciał robić coś z tym wszystkim dalej i pobawić się we własnym zakresie. Ale przy tysiącach gotowców ciężko wymyślić coś czego nie ma (lub nie da się zrobić szybciej, lepiej i łatwiej wykorzystując to co jest).
    A fakt, że przy okazji poruszone są inne kwestie typu FTP, instalacja forum, edycja stronek etc. to dodatkowe bonusy, które mam nadzieję pomagają w zrozumieniu tematu.

Dodaj komentarz