Omawiane języki programowania/skryptowe: html4strict (4), php (12), javascript (5), wszystkie (21)
#21 JAVASCRIPT - Dodaj do ulubionych - na Twojej stronie./* MOJE UWAGI! Funkcja nie sprawdza się pod Operą, testowałem w IE oraz FF - działa. Autorem funkcji nie jestem ja, znalazłem ją w Internecie i uznałem, że warto to pokazać - długo szukałem czegoś takiego, poniższe rozwiązanie jest najlepsze spośród tych, które testowałem */ // nasza funkcja JavaScript function addBookmark(title,url) { if (window.sidebar) { window.sidebar.addPanel(title, url,""); } else if( document.all ) { window.external.AddFavorite( url, title); } else if( window.opera && window.print ) { return true; } } // HTML <a href="#" onclick="addBookmark('NAZWA SERWISU','http://'); return false">dodaj do ulubionych</a>
#20 PHP - Porcjowanie danych pochodzących z zapytania SQL/* do zmiennej $ile zapisuje liczbę rekordów, która ma być wyświetlana na jednej podstronie */ $ile = 20; /* teraz tworzymy "punkt zaczepienia", numer aktualnej podstrony przekazujemy w adresie, metodą GET */ if($_GET['strona']) $strona = $_GET['strona']; else $strona = 0; $start = $strona*$ile; /* przykładowe zapytanie SQL odczytujące dane z bazy danych */ $q = mysql_query("SELECT * FROM aktualnosci ORDER BY id DESC LIMIT ".$start.",".$ile); /* jak widać, korzystamy z wcześniej zadeklarowanych zmiennych, jest to bardzo proste rozwiązanie, ale b. skuteczne. Należy także do jakiejś zmiennej zapisać liczbę WSZYSTKICH rekordów w danej tabeli */ $x = mysql_query("SELECT count(*) AS licznik FROM aktualnosci"); $z = mysql_fetch_assoc($x); $wszystkieRekordy = $z['licznik']; /* czas wygenerować możliwość przejścia na kolejne podstrony: [1] [2] następna ... do tego celu stworzyłem w miarę uniwersalną funkcję */ function porcjowanie_nav($strona, $ile, $counter, $uri){ if( $counter > $ile ) { $back_uri = str_replace('{strona}',($strona-1),$uri); if($strona!=0) echo '<a href="' .$back_uri. '">« poprzednia strona</a> ' ; for($i=0; $i<ceil($counter/$ile); $i++) { $n_uri = str_replace('{strona}',$i,$uri); if($strona==$i) echo "[".($i+1)."] "; else echo '<a href="' .$n_uri. '">[' .($i+1). ']</a> '; } $next_uri = str_replace('{strona}',($strona+1), $uri); if($strona<ceil($counter/$ile)-1) echo '<a href="' .$next_uri. '">następna strona »</a> '; } } /* Aby skorzystać z tej funkcji podajemy następujące argumenty, na bazie powyższego przykładu */ porcjowanie_nav($strona,$ile, $wszystkieRekordy,'/aktualnosci.php?strona={strona}'); /* meta-tag {strona} zostanie zamieniony przez stworzoną funkcję na odpowiedni numer strony, należy pamiętać o odpowiedniej strukturze plików - ja korzystam z aktualnosci.php, ale nie jest to przymus, można dowolnie modyfikować */
#19 JAVASCRIPT - Jak sprawdzić czy obsługa JavaScript jest włączona?/* MOJE UWAGI! Najprostszą metodą jest wstawienia do jakiegoś formularza ukrytego (hidden) pola za pomocą JavaScript ... */ <script type="text/javascript"> document.write("<input type='hidden' name='check_js' value='1'>"); </script> /* Po wciśnięciu SUBMIT-a możemy np. za pomocą PHP sprawdzić czy wartość pola 'check_js' = 1. Jeśli tak, obsługa JavaScript jest włączona. Jak to zrobić? Poniżej prosty przykład. */ <?php if( $_POST['check_js'] == '1' ) echo 'Obsługa JavaScript jest włączona.'; else echo 'Obsługa JavaScript jest wyłączona.'; ?> /* Inny sposób, to skorzystanie z taga <noscript> za sprawą którego możemy "wystartować" jakąś akcję, gdy przeglądarka odwiedzającego posiada wyłączoną obsługę JavaScript np. możemy wypisać tekst dla użytkownika, możemy zrealizować przekierowanie - meta refresh. Być może nie do końca jest to zgodne ze standardami, ale zawsze to sposób ;-) ) Poniżej dwa przykłady: */ <noscript>ten tekst widzi ktoś bez obsługi JavaScript</noscript> <noscript> <meta http-equiv="refresh" content="0;url=http://piecyk.org/check_js.php?set=1"> </noscript> /* W pliku check_js.php sprawdzamy wartość zmiennej 'set' ... */ <? if( $_GET['set'] == '1') echo 'Obsługa JavaScript jest włączona.'; else echo 'Obsługa JavaScript jest wyłączona'; ?> /* Dodatkowo prócz samego komunikatu można informację na temat obsługi zapisać w zmiennej sesyjnej, bądź cookie. */
#18 PHP - safe_glob/* Czasami zdarza się tak, że konfiguracja serwera nie pozwala na użycie funkcji glob() (ze względów bezpieczeństwa). Poniżej funkcja (z php.net - komentarze), która problem rozwiązuje, używamy jej zamiennie z glob(); */ function safe_glob($pattern, $flags=0) { $split=explode('/',$pattern); $match=array_pop($split); $path=implode('/',$split); if (($dir=opendir($path))!==false) { $glob=array(); while(($file=readdir($dir))!==false) { if (fnmatch($match,$file)) { if ((is_dir("$path/$file"))||(!($flags&GLOB_ONLYDIR))) { if ($flags&GLOB_MARK) $file.='/'; $glob[]=$file; } } } closedir($dir); if (!($flags&GLOB_NOSORT)) sort($glob); return $glob; } else { return false; } }
#17 PHP - Rodzaje ContentType/* Wiele razy stajemy przed koniecznością wysłania do przeglądarki odpowiedniego nagłówka, który oznacza typ zawartości którą chcemy wyświetlić. Przykładowe operacje: - chcemy wyświetlić wygenerowany plik PDF, - chcemy wyświetlić wygenerowany obraz (jpg, png itp.), - chcemy, aby plik ZIP był pobierany (okienko pobierania) Za pomocą poniższej pętli switch-case można w prosty sposób identyfikować typy zawartości i odpowiednio nimi manipulować */ function set_type($what){ switch($what) { case "pdf": $ctype="application/pdf"; break; case "exe": $ctype="application/octet-stream"; break; case "zip": $ctype="application/zip"; break; case "doc": $ctype="application/msword"; break; case "xls": $ctype="application/vnd.ms-excel"; break; case "ppt": $ctype="application/vnd.ms-powerpoint"; break; case "gif": $ctype="image/gif"; break; case "png": $ctype="image/png"; break; case "jpg": $ctype="image/jpg"; break; default: $ctype="application/force-download"; break; } return $ctype; } /* Zamiast deklaracji zmiennej $ctype w każdym 'case' można od razu zrobić return, tudzież odpowiednie przekierowanie, czy wyświetlenie danych. Jak kto woli i jak komu wygodnie */
#16 HTML4STRICT - Priorytety w HTML/CSS<style type="text/css"> // standardowe określenie kolorów dla wszystkich linków na naszej stronie internetowej a{ color: black; } </style> <a href="http://piecyk.org" title="moja strona domowa">Łukasz Piec</a> W powyższym przypadku kolor linka będzie CZARNY - tak jak narzuca to CSS. Jeśli dopiszemy: <a href="http://piecyk.org" title="moja strona domowa" style="color:red">Łukasz Piec</a> Link zmieni kolor na? CZERWONY! Dlaczego? Chodzi o priorytety, domyślnie najwyższy jest ten, który jest określony "najbliżej", czyli w tym wypadku przy samym tagu <a>. Jednak sprawa nie jest przesądzona, bowiem możemy nakazać, aby zawartość CSS była traktowana jako najważniejsza. <style type="text/css"> a{ color: black !important; } </style> Dodając '!important' możemy manipulować "rangą" każdej właściwości.
#15 HTML4STRICT - Poprawna interpretacja PADDING w przeglądarkachZałożmy, że mamy kontener, w którym chcemy ustawić odległości od krawędzi po 5px z każdej strony. Aby to zrobić można - najprościej - skorzystać z właściwości padding dla naszego selektora. Poniżej znajduje się praktyczny przykład. <style type="text/css"> div#kontener{ width: 390px; padding: 5px; } </style> <!--[if IE]> <style type="text/css"> div#kontener{ width: 400px; } </style> <![endif]--> Firefoks wartość ustawioną dla padding wlicza do szerokości, dlatego też jeżeli nasz kontener ma mieć szerokość 400px musimy odjąć od niej łączną wartość padding (2*5 - dla prawej i lewej strony) i ustawić wartość WIDTH na 390px (400-2*5). Natomiast IE nie wlicza wartości PADDING od szerokości, zatem tam szerokość powinna być ustawiona na taką, jaką ma posiadać nasz kontener, czyli 400px.
#14 HTML4STRICT - Rollover za pomocą CSS<style type="text/css"> a.m1{ display: block; width: 100px; height: 30px; background: url(http://skarbnicawiedzy.piecyk.org/images/rollover.gif) 0 0; } a.m1:hover{ background-position: 0 -30px; } /* w miejsce '30px' należy wpisać wysokość naszego obrazka, w moim przykładzie jest to właśnie 30px; */ </style> <a href="http://piecyk.org" class="m1"></a> <!-- MOJE UWAGI! Najważniejsze jest, aby odpowiednio przygotować plik graficzny, który pełni funkcję tła. Jego szerokość - w naszym przykładzie - to 100px; ale wysokość musi być równa 2* [wartość z CSS], czyli u nas 30*2=60px; Dlaczego tak? Chodzi o to, że PRZED najechaniem myszki na ten przycisk widzimy jego górną część, po najechaniu zmienia się pozycja tła o 30px w dół ("-30px") -->
#13 JAVASCRIPT - ALERT przy kliknięciu (jquery)<!-- jquery :: plik .js można pobrać z jquery.pl na swój serwer --> <script type="text/javascript" src="http://jquery.pl/files/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready( function() { $("a.alert1").click( /* tutaj komunikat jest ustawiony na sztywno, wygodniej jest przekazać do skryptu treść alertu wpisując go w np. TITLE elementu <a ... > */ alert('To jest moja strona!'); ); } ); </script> <!-- w tym miejscu znajdzie się definicja nagłówków, meta tagów itd. w "ciele" (body) wpisujemy przykład ... --> <a href="http://piecyk.org" class="alert1">moja strona domowa</a>
#12 JAVASCRIPT - Rozwijana warstwa z dynamicznym przyciskiem<!-- jquery :: plik .js można pobrać z jquery.pl na swój serwer --> <script type="text/javascript" src="http://jquery.pl/files/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready( function() { $("a.buttonBslidedown").click( function() { $("div.hidden:hidden").slideDown("normal"); }).toggle(function() { $("a.buttonBslidedown").addClass("image-zamknij"); }, function() { $("div.hidden:visible").slideUp("normal"); $("a.buttonBslidedown").removeClass("image-zamknij"); }); } ); </script> <!-- w tym miejscu znajdzie się definicja nagłówków, meta tagów itd. --> <style type="text/css"> /* aby graficznie ładniej wyglądała zmiana przycisku zalecam przygotować dwa obrazki - ROZWIŃ oraz ZWIŃ. W poniższym CSS są zastosowane oba obrazki */ div.hidden{ display: none; } a.buttonBslidedown{ float: left; margin-right: 10px; background: url(http://skarbnicawiedzy.piecyk.org/images/rozwin.gif); } a.buttonBslidedown, a.buttonBslideup{ cursor: pointer; display: block; width: 47px; height: 13px; text-decoration: none;} a.image-zamknij{ background: url(http://skarbnicawiedzy.piecyk.org/images/zwin.gif) !important; } </style> <script type="text/javascript"> /* dlaczego wyświetlam dane za sprawą JavaScript? Gdy odwiedzający ma obsługę JS wyłączoną - nie widzi w ogóle tej linijki, bo po co ją wyświetlać? Nie ma sensu. */ document.write("<a class='buttonBslidedown'></a>"); </script> <div class="hidden"> </div>
#11 PHP - Jak poprawnie usuwać rekordy?/* Każdy, kto projektował mniejszy lub większy system CMS musiał przygotować możliwość usuwania rekordów. Można to robić na dwa sposoby, a raczej za pomocą jednej z dwóch metod: GET lub POST. */ // usuwanie metodą GET echo '<a href="/cms?m=delete&id=' .$pobierz_id. '">usuń</a>'; // w miejscu, do którego prowadzi kliknięcie ... if( $_GET['m'] == 'delete' ) mysql_query("DELETE FROM [nazwa_tabeli] WHERE id = '".$_GET['id']."' "); // to bardzo prosty, wręcz prehistoryczny przykład ;-) /* metoda POST zwiększa bezpieczeństwa takiej operacji - użytkownik nie widzi identyfikatora usuwanego rekordu - chyba, że zerknie do kodu, bowiem ten jest wartością pola input[hidden] */ echo '<form action="cms?m=delete" method="POST"> <input type="hidden" name="id" value="' .$pobierz_id. '"> <input type="submit" value="usuń"> </form>'; // w miejscu, do którego prowadzi formularz ... if( $_GET['m'] == 'delete' AND isset($_POST) ) mysql_query("DELETE FROM [nazwa_tabeli] WHERE id = '".$_POST['id']."' "); /* Dodatkowo można wprowadzić weryfikację identyfikatora oraz zawartości zmiennej $_GET['m'] - najlepiej przeparsować jej zawartość osobną funkcją. */
#10 PHP - Wildcard w pigułce (z użyciem PHP)/* MOJE UWAGI! Wildcard daje możliwość przypisania odpowiedniej akcji do wirtualnie stworzonej subdomeny. Na początku (przed zaczytaniem jakichkolwiek danych) umieszczamy skrypt: */ $subdomena=$_SERVER['HTTP_HOST']; $subdomena=explode('.', $subdomena); $subdomena=$subdomena['0']; /* Tym oto sposobem w zmiennej $subdomena mamy zapisaną nazwę naszej subdomeny. Jeśli jesteśmy na stronie to-jest-test.piecyk.org, to w zmiennej znajdzie się wartość: 'to-jest-test'. Co dalej? Najprościej przepuścić tę wartość przez pętlę switch-case ... */ function set_location($subdomena){ switch($subdomena) { // do każdej z subdomen możemy przypisać określoną operację case 'to-jest-test' : echo 'To jest testowa strona'; break; case 'moje-projekty' : header("Location: http://piecyk.org/index?mojeprojekty"); break; case 'testuj-mail' : mail('piecyk@piecyk.org','to jest test','to jest test e-maila'); break; default : header("http://piecyk.org"); break; } }
#9 JAVASCRIPT - Dynamiczna zmiana wielkości liter (jquery)<!-- jquery :: plik .js można pobrać z jquery.pl na swój serwer --> <script type="text/javascript" src="http://jquery.pl/files/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready( function() { $("div#set-size").find("a.size1").click(function(){ // opcjonalne usuwanie postronnych klas $("div.content-box").removeClass("size2"); $("div.content-box").removeClass("size3"); $("div.content-box").addClass("size1"); }); $("div#set-size").find("a.size2").click(function(){ // opcjonalne usuwanie postronnych klas $("div.content-box").removeClass("size1"); $("div.content-box").removeClass("size3"); $("div.content-box").addClass("size2"); }); $("div#set-size").find("a.size3").click(function(){ // opcjonalne usuwanie postronnych klas $("div.content-box").removeClass("size2"); $("div.content-box").removeClass("size1"); $("div.content-box").addClass("size3"); }); } ); </script> <!-- w tym miejscu znajdzie się definicja nagłówków, meta tagów itd. --> <style type="text/css"> div#set-size{ text-align: right; width: 510px; margin: 0 auto; color: #f1e2b8; } div#set-size a{ cursor: pointer; } .size1{ font-size: 11px !important; } .size2{ font-size: 13px !important; } .size3{ font-size: 17px !important; } </style> <script type="text/javascript"> // jeśli user ma wyłączoną obsługę JavaScript, to tej linijki w ogóle nie widać document.write("<div id='set-size'><a class='size1'>A</a> <a class='size2'>A</a> <a class='size3'>A</a></div>"); </script> <div class="content-box"> tutaj tekst, którego wielkością można "zarządzać" </div>
#8 PHP - Obsługa koszyka na bazie sesji/* MOJE UWAGI! Poniższe funkcje pokazują jak w parę minut stworzyć mechanizm obsługi koszyka w Twoim sklepie internetowym. Całość jest oparta o sesję przeglądarki. Bezpieczniejsza metoda, to koszyk oparty o bazę danych - i to wszystkim polecam. */ // potrzebne funkcje function dodajDoKoszyka($produkt_id, $ile){ if($_SESSION["koszyk"][$produkt_id] == true) $_SESSION["koszyk"][$produkt_id] = $_SESSION["koszyk"][$produkt_id] + $ile; else $_SESSION["koszyk"][$produkt_id] = $ile; } function usunZKoszyka($produkt_id){ $_SESSION["koszyk"][$produkt_id] = false; unset($_SESSION["koszyk"][$produkt_id]); } function aktualizujKoszyk($produkt_id, $ile){ $_SESSION["koszyk"][$produkt_id] = $ile; } function iloscWKoszyku(){ if(isset($_SESSION["koszyk"])) return array_sum($_SESSION["koszyk"]); else return "0"; } /* Moja rada - funkcje zadeklarować w jakimś oddzielnym pliku, a sam plik includować (albo lepiej: require_once() ). Generalnie najważniejsze są dwa argumenty - produkt_id (identyfikator produktu w Twoim systemie/bazie danych) oraz 'ile' - oznacza ilość danego produktu dopisywana do koszyka. */ // jak się za to zabrać? session_start(); // konieczne, aby sesja działała poprawnie require_once("plik_z_funkcjami.php"); // dodajemy produkt ID=23 w ilości=2 dodajDoKoszyka(23,2); // usuwamy produkt z koszyka usunZKoszyka(23); // aktualizacja stanu koszyka aktualizujKoszyk(23,4); // informacja o stanie koszyka echo 'W koszyku znajduje się ' .iloscWKoszyku(). ' produktów.';
#7 PHP - Sprawdzanie poprawności ciągów liczbowych (NIP, kod pocztowy itp.)/* MOJE UWAGI! Funkcje są oparte o wyrażenia regularne, zatem aby odpowiednio rozbudować zaprezentowane rozwiązanie zalecam poczytać na ten temat chociażby w manualu PHP. */ function sprawdzKodPocztowy($value){ if( preg_match('/^d{2}-d{3}$/', $value) ) return true; else return false; } // wywołanie funkcji if( sprawdzKodPocztowy('49-949') == true ) echo 'Kod pocztowy jest poprawny'; else echo 'Kod pocztowy jest niepoprawny';
/* MOJE UWAGI! Do poprawnego działania skryptu potrzebna jest współpraca z bazą danych. Należy zaimportować plik wskazany w nagłówku! */ // funkcja, która odmienia imię użytkownika function odmianaImie($imie){ $q = mysql_query("SELECT Odmiana FROM imiona WHERE Imie = '".$imie."'"); if(mysql_num_rows($q)){ $w = mysql_fetch_assoc($q); return $w['Odmiana']; } else return $imie; } // wykorzystanie funkcji echo 'Witaj ' .odmianaImie("czarek"). ', co słychać?';
#5 PHP - Dzielenie długiego tekstu na kilka podstron/* aktualnie czytaną część (jej ID) pobieramy metodą GET, zatem programista musi przewidzieć to, aby znalazły się tam to ID */ $part = $_GET['part']; /* Programista z Klientem ustala znacznik, który pełni rolę separatora. W tym przykładzie jest to {dziel}. Klient może w treści swojej podstrony wpisać go XX razy. */ $pokaz = explode("{dziel}", $w['tresc']); // przełączniki - poprzednia/następna podstrona $next_part = $part+1; $back_part = $part-1; // od razu jest zapobieganie temu, ze na koncu linii zostaje pojedyncza literka (i, w, o) $pokaz[$part] = preg_replace("/s(S)s+/"," $1 ",$pokaz[$part]); // wyświetlamy tekst echo $pokaz[$part]; // nawigacja - przełączniki do kolejnych podstron if( $part > 0 ) echo '<a href="/czytam-artykul.php?part=' .$back_part. '">poprzednia podstrona</a> '; for( $i=0; $i<count($pokaz); $i++ ) { if($part==$i AND count($pokaz) > 1 ) echo "".($i+1)." "; elseif( $part != $i AND count($pokaz) > 1 ) echo '<a href="/czytam-artykul.php?part=' .$i. '">' .($i+1). '</a> '; } if( count($pokaz) > 0 AND strlen($pokaz[$next_part]) > 5 ) echo ' <a href="/czytam-artykul.php?part=' .$next_part. '">następna podstrona</a> ';
#4 PHP - Prawidłowy format ceny w Twoim sklepiefunction format($value,$char){ return number_format($value, "2", $char, " "); } /* MOJE UWAGI! Funkcja przyjmuje dwa argumeny: $value - cena towaru, nieformatowana w żaden sposób $char - znak, który będzie oddzielał złotówki od groszy (np. 12.00 ; 12,55) */
#3 PHP - Generowanie unikalnego kluczafunction generateKey($char){ // funkcja przyjmuje argument oznaczający liczbę znaków klucza return substr(md5(date("d.m.Y.H.i.s").rand(1,1000000)) , 0 , $char); // DRUGA METODA return rand(1,date("dmHis")); // zwraca ciąg liczbowy }
#2 PHP - Tworzenie zajawki długiego tekstufunction short($text, $ile){ // funkcja przyjmuje dwa argumenty - długi tekst oraz liczbę znaków streszczenia if( strlen($text) > $ile ) { // zamiast "..." możemy wstawić coś innego return substr($text, 0, strrpos(substr($text, 0, $ile), " "))."..."; } else return $text; } /* MOJE UWAGI! Skrypt działa tak, że nie przecina wyrazów w połowie np. po równo 250 znakach. Odpowiedni mechanizm wstawia znak "..." (według powyższego przykładu) na końcu wyrazu, który jest najbliżej ustalonej liczbie znaków streszczenia. */