Projektowanie stron - Forum dla webmasterów - Wszystkie działy

[Formularze] Domyślna wartość dla pola SELECT

Wed, 17 Feb 2010 21:55:35 +0000

Podczas edycji wpisów zapisanych w bazie danych wykorzystujemy formularze z wartościami wyciągniętymi z bazy. Wykorzystując pole formularza typu SELECT można łatwo zaznaczyć zapisaną w bazie wartość jako domyślny wybór tego pola.
Przykładowo dla np. sklepu z ubraniami mamy w bazie danych tabelę 'kolory' o strukturze:
id_koloru | nazwa_koloru
1 | czarny
2 | biały
3 | czerwony
4 | niebieski
5 | zielony
a także tabelę ubrania z zakupionymi przez Kowalskiego ubraniami o strukturze:
id_ubrania | nazwa_ubrania | nr_koloru
1 | Czapka niewidka | 4
Jak zaznaczyć przypisany kolor dla wybranego ubrania?

Kod PHP:

$tab_ubrania_id_ubrania=1; // ID wybranego ubrania
$tab_ubrania_nazwa_ubrania='Czapka niewidka'; // Nazwa wybranego ubrania
$tab_ubrania_nr_koloru=4; // ID koloru przypisanego dla wybranego ubrania

$form_kolor = '';
foreach($tab_kolory as $kolor)
{
   $kolor['id_koloru']==$ubranie['nr_koloru'] ? $selected=' selected' : $selected='';
   $form_kolor.= '.$kolor['id_koloru'].$selected.'>'.$kolor['nazwa_koloru'].'';
}
$form_kolor .= '';

echo $form_kolor;
?>

Wskaźniki PageRank

Sat, 03 Oct 2009 01:44:38 +0000

W tym tutorialu przedstawię sposób utworzenia własnych wskaźników (np. PageRank) w programie Inkscape.

1.We właściwościach dokumentu (Shift+Ctrl+D) ustawiamy przyciąganie do obiektów.

2.Tworzymy jasnoszary prostokąt klawisz (F4)

3.Następnie wewnątrz niego tworzymy mniejszy o białym wypełnieniu.

4.Teraz należy wycentrować obydwa prostokąty względem siebie. Zaznaczamy więc je i wciskamy (SHIFT+CTRL+A). W oknie dialogowym wybieramy element sterujący: zaznaczenie i wyśrodkowanie w osi poziomej i pionowej.

5.Duplikujemy (CTRL+D) i trzymając klawisz CTRL przesuwamy zaznaczone prostokąty w prawo, aż prawy szary prostokąt „sklei się” z lewym białym (dzięki ustawionej opcji przyciągania do krawędzi obiektów) Jeżeli elementy się nie przyciągają należy wcisnąć klawisz (%), który włącza/wyłącza przyciąganie. Klawisz CTRL podczas przesuwania umożliwia przesunięcie elementów tylko w osi pionowej lub tylko w osi poziomej, dzięki czemu nie wyjedziemy elementem z szeregu.

6.Przesunięty duplikat przekładamy na spód stosu obiektów klawisz (END).

7.Duplikat duplikujemy i przesuwamy aż otrzymamy w sumie 10 białych i 10 szarych prostokątów tworzących zarys naszego wskaźnika.

8.Teraz cały wskaźnik zaznaczamy i duplikujemy. Kursorem przenosimy skokowo duplikat niżej. Duplikatem na razie nie będziemy się zajmować.

9.Z oryginału zaznaczamy wszystkie 10 białych prostokątów (klikamy myszą trzymając klawisz SHIFT).

10.Następnie z menu sumujemy zaznaczone ścieżki (CTRL++). Po tym działaniu nasz obiekt może wyglądać podobnie do przedstawionego screenu, ponieważ niektóre szare prostokąty przesłaniają złączone białe prostokąty. Wciskamy klawisz HOME, dzięki czemu białe prostokąty wędrują na samą górę stosu obiektów. Teraz już białe prostokąty nie są osobnymi elementami, lecz tworzą jeden obiekt.

11.Jako wypełnienie tak utworzonego obiektu ustawiamy pionowy jasny gradient (od bieli do przezroczystości), wychodząc nieco poza obszar samego obiektu. Zaznaczamy cały górny pasek wskaźnika (białe i szare prostokąty) i grupujemy obiekty (CTRL+G). Otrzymaliśmy właśnie tło naszego wskaźnika.

Teraz zajmiemy się naszym duplikatem, który będzie tworzyć kolorowy pasek wskaźnika.

12.Zaznaczamy i grupujemy białe prostokąty, wybieramy gradient jako tło wychodząc poza obszar zgrupowanych obiektów (podobnie jak to już zrobiliśmy wcześniej). Możemy już rozgrupować prostokąty z jasnym gradientem (SHIFT + CTRL + G). Otrzymaliśmy podobnie wyglądające dwa pokratkowane paski: górny który utworzy tło wskaźnika, oraz dolny będący kolorowym paskiem.

13.Pozostało już tylko nadać pożądaną barwę szaremu wskaźnikowi (czyli szarym prostokątom lezącym w stosie pod prostokątami wypełnionymi białym gradientem). Wybrałem odcień czerwieni.

14.Cały dolny, kolorowy pasek ustawiamy kursorem równo z górnym paskiem, tak aby w stosie obiektów znalazł się na samej górze (czyli przesłaniał oryginał). Jeżeli jednak jest zakryty, wciskamy klawisz HOME, aby przesunąć go na wierzch.
15.Otrzymaliśmy właśnie wskaźnik o wartości 10.

16.Duplikujemy wszystkie obiekty i przesuwamy niżej. Usuwamy ostatnią kratkę wskaźnika (czerwony prostokąt i lezący na nim prostokąt z białym gradientem. Otrzymaliśmy wskaźnik o wartości 9.

17.Czynności powtarzamy (duplikat i usunięcie ostatniej czerwonej kratki) jeszcze 9 razy, aż otrzymamy szary wskaźnik (czyli wartość zero).

18.Teraz wystarczy wyeksportować poszczególne wskaźniki do formatu PNG. Zaznaczamy więc pierwszy wskaźnik i wciskamy klawisze (SHIFT + CTRL + E). Możemy tu ustawić m.in. szerokość i wysokość eksportowanego wskaźnika.

Gotowe do pobrania wskaźniki w kilkunastu wersjach kolorystycznych załączone są w tym poście.

wskaznik_pagerank.pdf (Rozmiar: 854882 / Pobrań: 0)
pagerank_paczka_01.zip (Rozmiar: 110198 / Pobrań: 1)

Avatary

Sat, 12 Sep 2009 19:14:08 +0000

Poniżej wykonane przeze mnie avatarki widoczne na screenie. 11 avatarów, każdy w 10 wersjach kolorystycznych. Avatary można używać bez ograniczeń.
Zapraszam do pobierania.

Modyfikacje by Melma

Tue, 16 Jun 2009 17:00:09 +0000

Tutaj będę zamieszczał historię zmian kolejnych moich modyfikacji skryptu, a także linki do wersji demonstracyjnych, umożliwiających zapoznanie się z pełnią możliwości podrasowanego katalogu.

Okna dialogowe "Zapisz jako" i "Otwórz" w stylu windowsowym

Thu, 28 May 2009 23:52:25 +0000

Okna dialogowe służące do zapisywania i otwierania plików w Gimpie są mało intuicyjne dla użytkowników Windows. Jednak w prosty sposób można osiągnąć efekt widoczny na screeanch.
W tym celu pobieramy archiwum FileOpen-1.0.zip ze strony http://registry.gimp.org/plugin?id=3908. Po rozpakowaniu archiwum kopiujemy plik FileOpen.exe do folderu c:\Program Files\GIMP-2.0\lib\gimp\2.0\plug-ins\. Od tej pory w Gimpie, w menu Plik widoczne będą nowe pozycjie "WinOpen..." i "WinSaveAs...".

Kompresja plików

Tue, 26 May 2009 15:23:27 +0000

Prosty skrypt, który kompresuje zawartość podanego folderu. Dzięki temu można w szybki sposób wykonać backup zawartości całej witryny.

Kod PHP:

$folder = 'moj_katalog/';    // folder, który będzie kompresowany
$plik_archiwum = 'kopia.tar.gz';    //plik archiwum, który zostanie utworzony

system('tar zcf ' . $plik_archiwum . ' ' . $folder);

if(file_exists($plik_archiwum))
    {
        echo "Utworzono plik $plik_archiwum";
    }
else echo "Uwaga! Nie utworzono pliku $plik_archiwum";
?>

Tak utworzone archiwum można teraz ściągnąć przez FTP, a w razie potrzeby odzyskać dane z archiwum można poprzez taki skrypt:

Kod PHP:

$plik_archiwum = 'kopia.tar.gz';    //utworzony wcześniej plik archiwum
system('tar zxf ' . $plik_archiwum);
echo "plik $plik_archiwum został rozpakowany";
?>

Wasze tablety

Tue, 26 May 2009 14:54:38 +0000

Tutaj możecie pisać na temat swoich tabletów. Wymieniajcie te, które polecacie innym (można wymieniać zalety danego modelu), lub też takie, których używanie przyprawia Was o ból głowy.

Zmiana uprawnień CHMOD dla plików

Tue, 26 May 2009 14:41:56 +0000

Czasem występuje potrzeba nadania odpowiednich uprawnień (CHMOD) plikom znajdującym się na serwerze z poziomu skryptu. Przydatne, gdy np. pliki zostały utworzone na serwerze poprzez skrypt instalatora. Wówczas często nie ma możliwości zmiany uprawnień dla tych plików z poziomu FTP. Poniższy skrypt umożliwia sporządzenie listy plików, którym chcemy zmienić uprawnienia, dzięki czemu można szybko zmienić uprawnienia większej ilości plikom.

Kod PHP:

$chmod_ok = '0666';    // CHMOD, który chcemy nadać plikom
$katalog = 'katalog/pokatalog/';    // ustaw ścieżkę katalogów (ustaw $katalog = ''; jeżeli zmieniasz uprawnienia dla plików w bieżącym katalogu

// wprowadź nazwy plików, którym zmieniasz uprawnienia
$pliki[0] = $katalog."plik_0.inc";
$pliki[1] = $katalog."plik_1.inc";
$pliki[2] = $katalog."plik_2.inc";
$pliki[3] = $katalog."plik_3.inc";
$pliki[4] = $katalog."plik_4.inc";
?>





Uprawnienia plików

body {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    }
.wiersz {
    padding-top:5px;
    }
a {
    color: #ff9000;
    font-weight:bold;
    }
a:hover {
    color: #d47800;
    font-weight:bold;
    }




echo " 
Plik
CHMOD

";
for($i = 0, $cnt = count($pliki); $i < $cnt; $i++)
{

if(file_exists($pliki[$i])) {
$chmod_pliku = substr(sprintf('%o', fileperms($pliki[$i])), -4);

// ustaw kolor czerwony dla plików z innym CHMOD, zielony dla plików z właściwym CHMOD
if($chmod_pliku==$chmod_ok) $chmod_kolor = 'green';
else $chmod_kolor = '#cc0000';

echo "$i$pliki[$i]$chmod_pliku";
}

else echo "$i$pliki[$i]brak pliku";
}

echo "nadaj uprawnienia";
?>


// zmiana uprawnien
@$upr=$_GET['upr'];
if($upr=='zmien') {
    
    for($i = 0, $cnt = count($pliki); $i < $cnt; $i++)
        {
            // sprawdz czy plik istnieje i nadaj mu CHMOD
            if(file_exists($pliki[$i])) {
                chmod("$pliki[$i]", $chmod_ok);
            }
        }
    }
else echo 'zły parametr upr';
?>

Prosta animacja

Tue, 26 May 2009 00:41:18 +0000

W tym tutorialu pokażę Wam jak zrobić prostą animację w Gimpie. Do pobrania jest również tutorial w formacie PDF.

1. Otwieramy obrazek z avatarem.

2. Tworzymy nową warstwę z tekstem (np. „Znikaaam!”):

Pod tekstem utworzyłem białą otoczkę, aby tekst był lepiej widoczny na avatarze. Teraz spłaszczam warstwę z tekstem z warstwą z otoczką
(menu Warstwa -> Połącz w dół) i otrzymuję 2 warstwy. Jedną z niezmienionym tłem avatara, drugą z tekstem w białej obramówce:

3. Ustawiam krycie warstwy z napisem na 10% i nazywam ją
znikaaam 10:

4. Następnie warstwę tą duplikuję (Ctrl+Shift+D). Krycie zduplikowanej warstwy ustalam na 20% i nazywam ją znikaaam 20:

5. Duplikowanie jeszcze 2 razy powtarzam ustalając krycie na 60% i 100% (uwaga: czym więcej utworzymy takich warstw przejściowych, tym nasza animacja będzie płynniejsza. Tutaj na potrzeby tutoriala dałem tylko kilka klatek):

6. Duplikuję warstwę z tłem i złączam ją z warstwą z tekstem z ustawionym kryciem 10%:

7. Dla ułatwienia złączoną warstwę nazywam tlo 10 (analogicznie jak podczas duplikowania warstw z tekstem o różnym kryciu). Tworzę kolejne duplikaty warstwy z tłem i złączam je z kolejnymi warstwami z tekstem. Otrzymuję w ten sposób warstwy:

8. Następnie powielam warstwy z tłem i ustawiam według następującej kolejności:

9. Teraz należy zoptymalizować grafikę na potrzeby animowanego GIF'a. W tym celu wybieram w menu Filtry -> Animacja -> Optymalizuj (dla formatu GIF). Zoptymalizowany obrazek otworzy się w nowym oknie. Tu kilka słów wyjaśnienia. Jak widać Gimp utworzył zoptymalizowane warstwy stosując specyficzne nazewnictwo: „nazwa_warstwy (czas_wyświetlania)(rodzaj_Przejścia_między_klatkami)”. Zmieniając te parametry w nazwie mamy wpływ na sposób wyświetlania animacji. Np. możemy wydłużyć czas wyświetlania danej klatki podając w nazwie jej czas w milisekundach (tutaj 100ms), typ przejścia może być jako combine lub replace. Combine powoduje nakładanie warstwy (klatki animacji) na poprzednią, natomiast replace zastępuje klatkę (ukrywa poprzednią i wyświetla bieżącą).

10. Przykładowo ustawiłem czas 1sekundy wyświetlania klatki z widocznym napisem z ustawionym kryciem na 100%.

11. W każdej chwili można podejrzeć animację. W tym celu wybieramy z menu Filtry -> Animacja -> Odtwórz. Ukaże się okno z podglądem animacji.

12. Jak już będziemy zadowoleni z efektów naszej animacji, możemy ją zapisać jako plik GIF. Obrazek zostanie wyeksportowany do formatu GIF. W opcjach eksportu ustawiamy opcję „Zapisz w postaci animacji”. W następnym oknie można ustalić czy animacja ma być zapętlona, czy wykonana tylko raz.

13. Efekt końcowy:

Pamiętajcie, czym więcej klatek przejściowych, tym animacja płynniejsza. Pochwalcie się swoimi pracami, jaką animację wam się udało stworzyć?