Archiwum dla kategorii Programming

jQuery 1.3 wydane

Jest nowe jQuery 1.3.

Co nowego:

  • nowy silnik selektorów CSS o nazwie Sizzle (49% szybszy!)
  • nowa przeglądarka API
  • Live Events
  • .offset() ma 6 razy większa wydajność
  • nowa wersja nie korzysta z wykrywania przeglądarki użytkownika
  • pełna notka prasowa

Brak komentarzy

position: fixed w Internet Explorer

Jak powszechnie wiadomo IE6 ma w nosie position:fixed. Jak sobie z tym radzić można przeczytać tutaj.

, ,

Brak komentarzy

Jak zaznaczyć wiele checkboxów w jQuery?

Dziś będzie pierwsza szybka mini lekcja jQuery.

Krótka specyfikacja zadania:

  • mamy pewny kontener
  • w nim kilka pól typu checkbox
  • chcemy zaznaczyć/odznaczyć wszystkie checkboxy przy użyciu jednej akcji

Mniej więcej taki kod HTML:

<!-- nasz przycisk -->
<input id="przycisk" type="button" value="Zaznacz/Odznacz" />
<!-- nasze checkboxy -->
<input name="pole[]" type="checkbox" />
<input name="pole[]" type="checkbox" />

Oto rozwiązanie problemu:

$(document).ready(
	function() {
		$("#przycisk").click(function() {
			status = null;
			$("input[name^=pole]").each(function() {
				if( status == null ) {
					status = !this.checked;
				}
				this.checked = status;
			});
			return false;
		});
	}
);

Co się dzieje w kodzie JavaScript:

  • definiujemy zdarzenie onClick na polu id=przycisk
  • dzięki jQuery w prosty sposób filtrujemy wszystkie pola input, które posiadają wartość atrybutu name rozpoczynającą się od ciągu „pole”
  • każdemu takiemu elementowi zmieniamy atrybut checked na przeciwny (a dokładniej na przeciwny względem pierwszego checkboxa w tym przypadku)

Proste, szybkie, łatwe i wygodne, prawda? No to koniec pierwszej mini lekcji jQuery :-)

, , , ,

2 komentarzy

jQuery – interfejs użytkownika

Jak jQuery to po to by zbudować ładny interfejs użytkownika. Jak interfejs użytkownika z jQuery to tylko z ThemeRoller‘em … W przyszłości może rzucę kilka porad jak tego dobrodziejstwa używać.

, , ,

Brak komentarzy

Jak dodać swoją funkcję w MySQL?

Dziś nauczymy się jak dodać swoją funkcję w MySQL. Temat będzie jedynie liźnięty i zobrazowany ładnym przykładem, który dziś miałem okazję popełnić przy okazji tego dziwnego tygodnia jakim jest ostatni tydzień roku. O tym później.

Po co może nam się coś takiego przydać?

Dla przykładu mamy kolumnę w tabeli, która jest datą (typ date), chcemy mieć funkcję, która dla tej daty zwróci nam poprawny numer tygodnia w roku oraz rok, zapiszmy to tak: Y/v (Y – rok, v -numer tygodnia).

Zwyczajowe podejście polegałoby na napisaniu takiego modyfikatora:

date_format(DATE,"%Y/%v")

Co będzie działało popranie przez wszystkie dni tygodnia oprócz właśnie tego „magicznego” ostatniego tygodnia roku.

Do rozwiązania problemu przydadzą nam się właśnie nasze definiowane funkcje w MySQL. Napiszmy własną funkcję, która w przypadku gdy data jest grudniowa oraz tydzień wskazuje na pierwszy, odpowiednio zwiększa rok. Rzućmy okiem na kod zapisany w pliku gpw.sql ( GPW to nie Giełda Papierów Wartościowych ;-) ):

SET GLOBAL log_bin_trust_function_creators = 1;
DROP FUNCTION IF EXISTS GPW;
 
DELIMITER //
 
CREATE FUNCTION GPW (thedate DATE) RETURNS VARCHAR(20)
BEGIN
    DECLARE r VARCHAR(7);
    DECLARE y INT(4);
    DECLARE v VARCHAR(2);
 
    IF DATE_FORMAT(thedate,"%v") = '01' THEN
        IF DATE_FORMAT(thedate,"%m") = '12' THEN
            SET y = DATE_FORMAT(thedate,"%Y") + 1;
            SET v = '01';
            SET r = CONCAT(y,'/', v);
        ELSE
            SET r = DATE_FORMAT(thedate,"%Y/%v");
        END IF;
    ELSE
        SET r = DATE_FORMAT(thedate,"%Y/%v");
    END IF;
 
    RETURN r;
END
 
//
 
DELIMITER ;

Szybko o tym co widzimy w kodzie:

  • w pierwszym wierszu mówimy, aby MySQL nie burzył nam się gdy będziemy chcieli dodać swoją nową funkcję
  • drugi wiersz, usuwa nam funkcję GPW() jeśli taka już istnieje
  • potem mówimy aby separatorem wierszy od teraz były dwa znaki //
  • następnie ciało naszej funkcji, chyba proste?
  • potem, dwa ukośniki są istotne, kończą nam nasz długi „wiersz”
  • na końcu mówimy aby separatorem był znów średnik

Mamy funkcję w pliku, celowo mówię o pliku, gdyż tak po prostu pisze się sprawniej nasze funkcję, otwieramy nasz MySQL klient:

mysql -u root -h host -p

W konsoli:

  • przechodzimy do bazy w jakiej nasza funkcja będzie widoczna (polecenie use, np. use temp)
  • importujemy nasz plik z kodem funkcji poleceniem source, np. source /home/temp/gpw.sql

Od tej pory nasza funkcja GPW() powinna być widoczna w naszej bazie, tak długo, aż jej nie usuniemy. Możemy ją przetestować wpisując:

SELECT GPW('2008-12-29');

Co odpowie nam poprawnym wynikiem w postaci ciągu:

2009/01

Nasze podejście pierwotne wysypałoby się odpowiadając 2008/01.

To tyle na szybko o definiowanych funkcjach w MySQL.

, , , , , , , ,

Brak komentarzy

Zaawansowana optymalizacja stron WWW

Czy ktoś z Was widział jak Google zapodaje grafikę z serwera? Nie? No to klik, potem sprawdźcie jak wygląda cały plik z logiem Google.

A wygląda tak:

Co można zyskać przysyłając użytkownikom taki plik:

  • zmniejszamy traffic poprzez jeden mały plik
  • zmniejszamy ilość requestów do serwera

Minus?

  • trzeba opracować plik CSS, który będzie nam sterował takim plikiem

Taka ciekawostka na sobotę ;-)

, , ,

Brak komentarzy

Cross-site scripting – bezpieczeństwo formularzy

Cross-site scripting (XSS lub inaczej CSS), to jak wiadomo taki rodzaj ataku na serwisy WWW, najczęściej przez źle walidowane formularze i najczęściej przez wstrzykiwany przez nie kod JavaScript.

Pokażę dziś jak można łatwo zabezpieczyć swoje formularze. Wystarczy kilka prostych wierszy kodu i po problemie. Najważniejsze jest aby całą tablicę $_POST umieć łatwo wyczyścić. Pokaże jak to zrobić rekurencyjnie.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Common() {
        public static function TidyString($str) {
                $str = stripslashes($str);
                $str = htmlspecialchars($str);
                return $str;
        }
 
        public static function TidyArray(&$array) {
                foreach((array)$array as $key => $value) {
                        if( !is_array($value) ) {
                                $array[$key] = Common::TidyString($value);
                        } else {
                                $array[$key] = Common::TidyArray($value);
                        }
                }
                return $array;
        }
}

W naszej klasie Common, widzimy dwie proste metody, TidyArray() oraz TidyString(). TidyArray() działa rekurencyjnie, obiega elementy tablicy i jeśli wartość nie jest tablicą to ją czyści poprzez TidyString(), jeśli element jest tablicą to wywołujemy naszą metodę rekurencyjnie na danym fragmencie tablicy. Wartości tablicy przekazujemy metodzie przez referencje.

Mając taka klasę możemy umieścić takie wywołanie gdzieś np. w pliku konfiguracyjnym naszej aplikacji.

1
$_POST = Common::TidyArray($_POST);

Należy pamiętać, że nasza metoda TidyString() posiada podstawowe funkcje „czyszczące”, można sobie ją dowolnie rozszerzyć np. dodać funkcję strip_tags(). Dodam jeszcze, że należy być ostrożnym przy filtrowaniu danych po serializacji.

, , , , , , , , , , , , ,

Brak komentarzy

Dziury w Internet Explorer

Szału nie ma, każdy zna, wszędzie są nie tylko w IE, podobno w Firefoxie jest jeszcze więcej ;-) Czytałem właśnie jakiś artykulik o tym, że Microsoft będzie dziś łatał jakąś super poważną dziurę i przypomniało mi się jak mnie dziś Explorer pięknie zaskoczył.

Weźmy pod lupę taki prosty kod HTML:

<a href="">link</a>

Czego się spodziewamy? Że atrybut href (Hypertext REFerence) domyślenie przyjmie wartość tego co mamy obecnie w pasku adresu – tak jest w Firefox. W Internet Explorerze 7 nie zawsze. Dla przykładowego adresu:

http://server/folder/plik.xml

Nasz link będzie wskazywał na:

http://server/folder/

A potem klient do Ciebie pisze – „czemu to k*** nie działa w IE„!

Szybki fix takiej sytuacji w PHP, użyj:

$_SERVER['REQUEST_URI']

, , , ,

Brak komentarzy

Popup z półprzeźroczystym tłem

Ostatnio musiałem zrobić takie małe cudo. Popup na warstwie z półprzeźroczystym tłem wokół popup’a. Podejście rzucające się od razu na myśl czyli :

  • div z opacity
  • na tym div z pełnym tłem

Coś takiego nie zda egzaminu, wszystko co będziemy mieli nad naszym divem półprzeźroczystym także będzie półprzeźroczyste.

Innym rozwiązaniem powinno być podzielenie naszego widoku na 9 obszarów. Centralna cześć będzie naszym popupem, reszta będzie spełniała rolę tła.

Najprościej zrealizować to na tabeli, trochę więcej zachodu będzie z divami.

Przykładowa półprzeźroczysta klasa powinna wyglądać tak (krycie 75% oraz czarne tło) :

filter: alpha(opacity=75); /*starsze IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=75); /* IE */
-moz-opacity: .75; /*starsza Mozilla*/
-khtml-opacity: 0.75;   /*starsze Safari*/
opacity: 0.75;   /*wspierane przez Mozilla, Safari oraz Opera*/
background-color:#000000;

Trzeba pamiętać z będzie problem z uzyskaniem przeźroczystości nad elementami Flashowymi.

, , , ,

Brak komentarzy