[JS/jQuery] Klonowanie kodu i powielanie wierszy dla warstw i tabel

[JS/jQuery] Klonowanie kodu i powielanie wierszy dla warstw i tabel

Czasem problemy bardzo proste urastają do rangi kosmicznie trudnych, powyższa metoda właśnie ostatnim tygodniu taka się stała, coś co prozaicznie było proste i funkcjonalne, w efekcie końcowym spędzało sen z powiek.

Jednakże może zaczniemy od początku, bo trafią się prawdopodobnie osoby które nie znają tej techniki przy wykorzystaniu jQuery, ale można także taki efekt osiągnąć także przez sam JavaScript. Mowa tutaj o powielaniu kodu,treści i duplikowaniu go wielokrotnie na stronie. Ja przedstawię dwa przykłady… które PRAWIE niczym się nie różnią.


DIV-HTML

Prezentując pierwszy kod mamy podział na trzy sekcje:

Sekcja z selektorem #listaPozycji to nasz kontener do którego będziemy dodawać klonowane treści. Guzik #dodajPozycje oczywiście będzie inicjował nam powielanie treści. A sekcja z selektorem #elementPozycji która jak zauważymy ma dwa dodatkowe atrybuty: style, gdzie ukrywamy dany element, można również przesyłać taki element poprzez AJAX, wtedy ale nam zależy aby mieć dostęp do całej sekcji do powielenia na poziomie kodu. Oraz atrybut DATA, gdzie zawieramy wartość ostatniego/pierwszego ID jeżeli dany kod chcemy użyć dla formularza. Czyli nic skomplikowanego.

Przejdźmy do JS:

DIV-JS

Kod też nie jest jakiś trudny w zrozumieniu:
W 1 linijce deklarujemy nazwę selektora, ale można to pominąć. Druga pozycja jest już ważna. Pobieramy z selektora który jest ukryty przez stylowanie całą jego zawartość. A następnie gdy klikamy na button#dodajPozycje wyświetlamy kod zamieniając zmienne %s na wartości liczbowe, ja powiększam każdą kolejną liczbę o 1 i używając funkcji .replace() i prostym wyrażeniem regularnym. Tak zmieniony kod może już trafić na część widzialną widoku strony dzięki funkcji .append(), dodatkowo jeszcze dodajemy guzik do usuwania, należy pamiętać że jeżeli guzik ma być jako osobny DIV lub jako BUTTON to należy przed funkcją .remove() dodać kolejną funkcję .parent(). Inaczej guzik nie będzie poprawnie działał.

Jeżeli chodzi o dodawanie kodu oparte o warstwy to jest to proste.

//jsfiddle.net/Tomplus/jbu8z8wn/embedded/js,html,css,result/dark/

Ale co jeżeli chcemy dodać wiersz do tabeli? Tutaj to samo nie działa, jQuery ma to do siebie że usuwa wszystkie znaczniki TR, TD (oraz TH). Ale tylko wtedy gdy widzi że kopiowany kod nie jest zadeklarowaną tablicą <table>. Więc gdy wcześniej w ukrytym DIV dodamy od razu wiersze tablicy to nic nie zyskamy, nasza warstwa musi stać się ukrytą tablicą  oraz co jest bardzo ważne także musi zawierać tag TBODY znacznik który w starych szkołach uczących obsługi tablic, jest często powielany HTML.

TABLE-HTML
TABLE-JS

Dla tych co chcą zobaczyć kod live, zapraszam do kliknięcia na obrazy lub poniżej.
//jsfiddle.net/Tomplus/5duz485x/embedded/js,html,css,result/dark/

Dla wielu to może być żadne odkrycie, ale dla innych nowe zastosowanie przy powielaniu kodu HTML, dodatkowo nie trzeba bawić się w AJAX chyba że wymaga to specyfika serwisu.

 

Reklamy
Pobranie danych ze strony za systemowym logowaniem

Pobranie danych ze strony za systemowym logowaniem

Moje wpisy nie są zbyt regularne, ale nigdy nie oczekiwałem że będę często coś tworzył. Blog tworzę aby zachować pewną wiedzę, która jest prosta, ale stosowana rzadko powoduje że zanika w pamięci.

Jednym z takich rzeczy jest logowanie systemowe na serwerze Basic Auth. Jest to podstawowa forma zabezpieczenia i wystarczająco dobra aby boty internetowe nie zaglądały tam gdzie nie powinny. Login i hasło często są zapisane już w powitalnym komunikacie, co jest ułatwieniem dla człowieka (chociaż mówiąc z własnego doświadczenia, czym coś bardziej na widoku, to tym mniej to widzimy), chociaż czasem jest mylące jeżeli systemowe okienko traktowane jest już jako panel logowania do serwisu.

Jednak co wtedy gdy znamy login i hasło serwera, ale chcemy pobrać jakąś informację ze strony za taką bramką? Odpowiedź jest prosta, trzeba wysłać najpierw nagłówek do serwera. Przykład:

$login = ‚mojlogin’;
$pass = ‚mojehaslo’;
$context = stream_context_create(
array(
‚http’ => [ ‚header’  => „Authorization: Basic ” . base64_encode(„{$login}:{$pass}”) ]
) );
$string = file_get_contents(‚http://serwer.secure/file.txt’, false, $context);

Dzięki takiemu rozwiązaniu szybko łączymy się z drugim serwerem, lub z naszą stroną z nadanym hasłem i mamy bezproblemowy dostęp do treści.

BasicAuth - Authenication
Logowanie systemowe
Wielopoziomowe przyjazne linki – .htaccess

Wielopoziomowe przyjazne linki – .htaccess

Zadanie może i proste, ale na polskich stronach rozwiązanie nie jest zbyt proste do znalezienia. Zawsze kombinują z rozbudowanymi plikami .htaccess, a co z tymi którzy mają rozbudowaną stronę, lub tworzą stronę z rozbudowaną strukturą? Przedstawiane są złe praktyki.

Jedno z moich problemów było skrócenie właśnie rozbudowanego pliku .htaccess i podstawowy kod wygląda tak:

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^.*$ /index.php

Kod prosty i po kolei:

  1. FollowSymLinks to wskazanie na dowiązanie symboliczne, jeżeli nie mamy, to opcję można pominąć.
  2. RewriteEngine – włącza moduł przekierowań
  3. RewriteCond z parametrem -d daje informację że pierwszeństwo działania mają katalogi istniejące. (brak przekierowania)
  4. j.w. tylko z parametrem -f, dla plików istniejących.
  5. Ostatnia zasada, oparta na wyrażeniu regularnym mówi że wszystkie pozostałe znaki ma przepisać na index.php

Zwykle w poradnikach jest to zasada następująca:

RewriteRule ^section/(\d+)*$ ./section.php?id=$1

Gdzie przykład działania jest taki

/section/namesection

Nasz przykład daje to samo, ale sprawdzenie jakie dane przenosimy w URL będziemy przetwarzać z poziomu PHP.

A to nie jest już takie trudne, gdy stworzymy sobie bibliotekę która będzie przetwarzać nasz URL na takie informacje które my chcemy wykorzystując zmienną globalną:

$_SERVER[‚REQUEST_URI’]

a poleceniem explode możemy odseparować nasz URL:

$url = explode('/', $_SERVER['REQUEST_URI']);
$page = $url[0];
$subpage = $url[1];
$param = $url[2];
//etc.

 

Czysty kod – czyli podstawa programowania

Czysty kod – czyli podstawa programowania

Jeszcze do dość niedawna  pojęcie czysty kod było mi obce, ale po przeczytaniu książki o tym samym tytule autorstwa Roberta C. Martina (która jest adresowana przede wszystkim do programistów Javy), zrozumiałem że czas zmienić swoje podejście do pisania. Po zmianie podejścia, promień światła padł na moją twarz, tak jakbym wyszedł z jaskini na zewnątrz. Zrozumiałem jaki byłem zacofany i należy dokształcić się bardziej, aby osiągnąć jako taki poziom.

Nie będę prezentował żadnego kodu, ale zacytuje szereg wypowiedzi które należy pamiętać podczas tworzenia kodu, bo inaczej można wejść znowu w kupę.

Zasady Becka dot. prostego kodu

  • przechodzi testy,
  • nie zawiera powtórzeń,
  • wyraża wszystkie idee projektowe zastosowane w systemie
  • minimalizuje liczbę encji, takich jak klasy, metody, funkcje itp.

Już w pierwszym punkcie widać, że wciąż mam opory to zmiany starego podejścia, acz nie jest tak źle, staram się testować kod, jeżeli jest nowy, bo stary niestety nie jest przygotowany do  testów jednostkowych, bo niestety został źle zaprojektowany na samym początku.

Wielki dąb rośnie z małego żołędzia.

Zasada 5S

Pięć japońskich słówek które odpowiadają porządkują własną pracę, ale także zespołu:

SEIRI  Organizacja
SEITON  Porządek
SEISO  Czystość
SEIKETSU  Standaryzacja
SHUTSUKE  Dyscyplina

Dotyczy to nie tylko kodu, ale także otoczenia wokół nas, a tutaj także mamy wiele do ponarzekania na siebie, ale także innych, bo nie znam żadnego programisty który spełniałby te 5 zasad.

Niezależnie od tego jak czysty jest dom,
bałagan na biurku psuje dobre wrażenie.

Porządkowanie starego kodu

Jednym z zasad jakie sobie postanowiłem, to zmarnowanie czasu na poprawienie kodu aplikacji które są najczęściej używane przeze mnie i przez innych. Bo sam zauważyłem że jeżeli rozumiałem chaotyczny kod wcześniej, to teraz gubię się po zmianie podejścia. Głównie gdy kod jest stary i wychodzący jeszcze z pod ręki innego programisty.

Czy zrobiliśmy wszystko,
aby zostawić obozowisko czystsze,
niż je zostawiliśmy.

Kilka prawd o czystym kodzie

Zdolność do odróżnienia czystego kodu od niedbałego
nie oznacza, że  wiemy, jak pisać czysty kod!

To prawda, pisanie czystego kodu nie nauczymy się po przeczytaniu jednej książki, należy obserwować innych programistów np. dzięki takim miejscom jak GitHub czy stosowaniu standaryzacji pisania kodu jakim jest PSR.

Ale lepiej starać się pisać czysty kod, niż nie pisać go w ogóle.

Czytanie kodu powinno wywoływać uśmiech na twarzy,
podobnie jak dobrze skomponowana muzyka czy
dobrze zaprojektowany samochód.

W moim zespole raczej innym nie przynosi to uśmiechu, może dlatego że nie rozumieją obiektowego programowania. Bo nagle coś co zrobiło się proste w kodzie, zrobiło się także tajemnicze, bo doczesny kod znikł, a nadal daje ten sam wynik jak wcześniej. Wtedy to daje uśmiech ale mi z dobrze wykonanego zadania 🙂

Zły kod kusi do powiększania bałaganu!

To prawda i nie kusi, ale jest jak rak, który napada na kolejne komórki, którego później trudno wyleczyć bez chemicznej terapii. Właśnie jestem na etapie takiej terapii w swoim projekcie, gdzie mając za zadanie dodanie nowych usług, okazało się że zarażony kod nie pozwolił sprawne dodanie usług. A naprawa  kodu, pokazała tylko jak daleko sięga zarażony kod i konieczna jest terapia szokowa.

Zmiany przeprowadzone w złym kodzie zwykle prowadzą do tego,
że staje się on jeszcze gorszy.

Nie do końca zgadzam się z tym cytatem, ale rozumiem o co chodzi. Chodzi o to że każda kolejna rzecz, prowadzi do tego że prawdopodobieństwo wywołania nieoczekiwanego błędu jest większe niż wcześniej.

Czytanie kodu na głos, jest dobrym sposobem na lepsze zrozumienie kodu lub poznanie kontekstu kodu.

Jest to jeden z moich ulubionych narzędzi pracy w zespole. Wystarczy komuś przeczytać kod, nawet jeżeli nie specjalizuje się w twojej dziedzinie, a szybciej znajdziemy rozwiązanie na nurtujące nas pytanie, lub nawet znajdziemy błędy w kodzie lub źle nazwane zmienne, metody i własności.

Programowanie lingwistyczne

Na koniec coś co wyciągnąłem z Confitury chyba z 2015 roku. A mianowicie chodzi o przestrzeń nazw. Że należy nazywać klasy, metody zgodnie z zasadami gramatyki języka natywnego.

[słowo -> znaczenie  -> reguły]
[                   kontekst                     ]

Przykład, rezerwacja biletu:

Rezerwacja. dodajProdukt (ilość,  rabat)
Podmiot.Orzeczenie (dopełnienie, przydawka)
Obiekt.Metoda (parametr, extParametr)
rezerwacjaBiletu.kupBilet (1, [10,5613]) [rabat: 10%, userId: 5613]

Czyli naszą klasą jest rzecz ogólna, która jest rzeczownikiem, ale unikając tzw. worków, uniwersalnych klas gdzie można wrzucić wiele metod.

Metody są czynnościami jakie wykonuje się, więc metoda o nazwie bilet, czy kasaBiletowa nie nadaje się jako nazwa takiej funkcji. Dlatego warto przeczytać, taki kod aby bez problemu i błędów językowych mogli użyć takiej klasy w innym miejscu kodu.

 

Blog programistyczny

Z zawodu jestem programistą skupiającym się na języku PHP, może nie wybitnym, ale ciągle się rozwijam, mają swoje podejście do tworzenia aplikacji i to podejście będę prezentował na blogu.

Jednak przede wszystkim będę przedstawiał powtarzające się błędy, które marnują czas, a są banalne w rozwiązaniu. Być może Ty czytelniku pomożesz w lepszym rozwiązywaniu różnych zagadek programistycznych.