Wbrew pozorom dzisiejszy wpis nie będzie uczył technik samoobrony, nie będzie też kursem lutowania online. Pokażę Ci jak od środka działają popularne funkcje dostępne w programach graficznych, jak negatyw, rozjaśnianie czy posteryzacja. Opierają się na jednopunktowych operacjach graficznych. Jednopunktowych, bo wpływ na wartość wynikowego punktu obrazu, ma wartość tylko jednego punktu obrazu źródłowego.
Operację taką można opisać równaniem: w(x,y)=F(z(x,y)), gdzie x, y, to współrzędne obrazu, z obraz źródłowy, a w obraz wynikowy. F to operacja jednopunktowa.

Wstęp.

Dziś to co tygrysy lubią najbardziej. Czysta praktyka i (w miarę) konkretne przykłady. Będziesz mieć niebywałą okazję dostrzec, że XPath może służyć do rozwiązania kwestii, które nie śniły się filozofom. Od czego świat ma Ciebie!

Bawiłeś się kiedyś w chowanego? Może masz ochotę zrobić to dziś? Pokażę Ci jak coś ukryć. Tak porządnie i w określonym czasie. Na tym blogu było trochę magii, ale powtarzam: ukryjemy "coś", a nie Ciebie, więc bez obaw. Będziemy pokazywać i ukrywać element HTML. Właściwie takie cuda zdziałamy, że sam będzie się pokazywał i znikał w określonym momencie.

Cel i jego osiągnięcie brzmi banalnie, ale wyjawię Ci więcej szczegółów. Efekt ten został praktycznie wykorzystany, prawie przy takim założeniu, na stronie gier dla dzieci Buliba.pl. Ponieważ projekt strony jest niekomfortowy/niegrywalny/nieprzeznaczony do układu portrait, to wtedy pokazuje się plansza z odpowiednią informacją. Dodatkowo (co tam dzieje się po bardzo długim czasie) plansza ma zniknąć po kilku sekundach.

Zacznijmy od planszy.

Zapytanie przestawne pozwala nam na obrócenie wyniku zapytania o 90 stopni i zamianę niektórych wierszy w kolumny (trochę jak rozkładanie parasola). Na skrzyżowaniu nowopowstałych kolumn oraz pozostałych wierszy otrzymujemy wartości z kolumn, których nie wykorzystaliśmy ani do wierszy ani do kolumn. Prostym przykładem niech będzie tabela mecz gdzie przechowujemy nazwiska graczy, numery meczów oraz ilość strzelonych goli, czyli mamy kolumny: gracz, mecz, polowa, gole. Za pomocą tabeli przestawnej chcemy uzyskać czytelniejszy widok: będziemy mieć wiersze z nazwiskami, kolumny odpowiadające poszczególnym meczom, a komórki będą zawierać sumę strzelonych goli.

Czyli z tabeli:

chcemy otrzymać:

W systemach bazodanowych Oracle czy też MSSQL mamy dostępne operatory PIVOT, ale my najczęściej zajmujemy się na tym blogu MySQL, więc fajnie by było przyjrzeć się temu operatorowi w tymże systemie.

Przyjrzałeś się? Bo ja się przyglądałem i nie znalazłem. Niestety póki co ten operator jest niedostępny.

Zrobimy pivot?! Namówiłeś!

Pewnie miałeś już w życiu styczność z dymkiem. Czy to podpalając dywan w pokoju rodziców w wieku pięciu lat, czy też paląc z kolegami swoją pierwszą fajkę (pokoju, oczywiście!). W HTML dymki są bardziej pozytywnymi wydarzeniami. Stosuje się je do przekazania dodatkowych informacji użytkownikowi, których przed daną akcją nie chcemy pokazywać. Możemy się spotkać z dymkami walidacji formularzy, gdzie informujemy o błędniem wypełnionym polu, czy też szczegółach jakiejś opcji po najechaniu myszą.

Dymek najczęściej ma kształt prostokąta z zaokrąglonymi narożnikami i mały trójkącik na dole pozycjonujący cały dymek. Czyli mamy tu dwa elementy. Pokażmy kod HTML i stylowanie CSS takiego dymka.

<div class="dymek">To jest informacja<span></span></div>

+

div.dymek{
  padding:20px;
  background:#f00;
  border-radius:10px;
  position:relative;
  display:inline-block;
}
div.dymek span{
  position:absolute;
  left:20px;
  bottom:-5px;
  width:10px;
  height:10px;
  display:block;
  transform:rotate(45deg);
  background:inherit;
}

Możemy nieco uprościć kod HTML i zamiast elementu SPAN, użyć pseudoelementu :after.

<div class="dymek">To jest informacja</div>

+

div.dymek{
  padding:20px;
  background:#f00;
  border-radius:10px;
  position:relative;
  display:inline-block;
}
div.dymek:after{
  content:'';
  position:absolute;
  left:20px;
  bottom:-5px;
  width:10px;
  height:10px;
  display:block;
  transform:rotate(45deg);
  background:inherit;
}

W obydwu przypadkach efekt będzie identyczny (poszczególne elementy możesz dostrzeć najeżdżając na dymek myszą):

Użyliśmy jednak dwóch elementów.

Czas zrobić prawdziwą rewolucję w produkcji dymków i wykonać go wykorzystując tylko jeden element HTML!

Łączyliśmy już w lewo, prawo i w obydwie strony. Nie łączyliśmy jeszcze w górę i w dół, czyli pionowo. Dziś właśnie o łączeniu pionowym wyników, czyli o UNION, UNION ALL, INTERSECT oraz EXCEPT (MINUS). Inaczej nazywamy je złączeniami na zbiorach.
A dlaczego w ogóle określenie "pionowe"? Bo operujemy na dwóch lub więcej zbiorach uzyskanych z kolejnych, występujących jeden pod drugim, zapytaniach. Czyli łączymy w dół.

UNION i UNION ALL zapewne już znasz z MySQL i być może nawet je stosowałeś. Operator UNION pozwala na połączenie wyników uzyskanych z X (X>1, bo głupio robić UNION na jednym zapytaniu) zapytań. W przypadku UNION będzie to suma wyników bez powtórzeń, a w przypadku UNION ALL duplikaty mogą spać spokojnie.

Przykładowe tabele:

klient1:

klient2:

i zapytanie:

SELECT * FROM klient1 AS k1
UNION /* lub UNION ALL */
SELECT * FROM klient2 AS k2

Wynik z UNION:

Wynik z UNION ALL:

O ile UNION i UNION ALL występują w MySQL natywnie, to co z INTERSECT oraz EXCEPT?