Jak wykorzystać selektory cz. 1.

12 kwietnia 2010

W poprzednim artykule przedstawiłem selektory w stylach CSS. Tym razem pokażę jak ich używać i jakie to może przynieść efekty. Za pomocą selektorów wybieramy element na stronie, który chcemy sformatować. Następnie określamy jakie ich właściwości chcemy zdefiniować i podajemy ich wartość. Załóżmy, że chcemy sformatować akapit na stronie zmienimy kolor czcionki i dodamy obramowanie. Selektorem w tym przypadku będzie „p” – akapit. Jest to selektor typu, gdyż wskazuje jedynie typ elementu strony – w tym przypadku selektor wybierze wszystkie akapity na stronie. Właściwościami będą: „color” – kolor znaków i „border” – obramowanie, a wartościami tych właściwości będą w pierwszym przypadku „#00ff00;” – kolor zielony, a w drugim „4px double #ff0000;” – obramowanie grubości 4 pikseli, linią podwójną w kolorze czerwonym.

Cały zapis można zapisać w pliku „style.css” w taki sposób:

p{color: #00ff00; border: 4px double #ff0000;}

lub taki:

p
{
    color: #00ff00;
    border: 4px double #ff0000;
}

Możemy sprawdzić to w kodzie strony „index.html”

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Lorem ipsum</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
	<p>
	Lorem ipsum dolor sit amet enim. <strong>Etiam ullamcorper. <a href="#">test 1</a></strong> Suspendisse a pellentesque dui, <span>non felis. <a href="#">test 2</a></span> <a href="#">test 3</a> Maecenas malesuada elit lectus felis, <a href="#">test 4</a> malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.</p>
</div>
	<p>Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.
	</p>
</body>
</html>

Efekt powinien prezentować się następująco:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Kolejnym selektorem jest „*” czyli selektor uniwersalny, wskazujący wszystkie elementy na stronie. Najczęściej używa się go do wyzerowania marginesów i dopełnień elementów domyślnie ustawianych przez przeglądarki. Każda może ustawiać nieco inne wartości tych właściwości.

* {margin: 0; padding: 0;}

Jest to przydatny zapis w przypadku witryn, gdzie różnica 1 piksela mogła by popsuć wygląd całej strony. Przykładowa strona po zastosowaniu tego selektora wyglądała by tak:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Następny rodzaj selektora to selektor potomka. Oto jego przykład:

p a {font-size: large;}

a to wygląd strony:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Selektor wskazał wszystkie odnośniki (elementy „a”) leżące wewnątrz akapitu (elementu „p”)

Podobny do poprzedniego jest selektor dziecka. Może on przybrać postać taką:

p>a {color: #ffcc33;}

Strona będzie wyglądała tak jako poniżej.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Tym razem wybrane zostały tylko te odnośniki które leżały bezpośrednio wewnątrz akapitu. Pierwsze dwa odnośniki znajdują się dodatkowo w znacznikach „strong” i „span”, więc selektor p>a nie wskazuje ich.

Selektor braci:

span+a {text-decoration: none;}

Do usunięcia podkreślenia wybrane zostaną tylko te odnośniki, które stoją bezpośrednio za znacznikiem „span”.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Uwaga, selektory braci i selektory dziecka nie są interpretowane przez przeglądarkę IE 6.

Ciąg dalszy niebawem. A w zasadzie zależy to od ilości komentarzy pod spodem.

Selektory CSS

3 kwietnia 2010

Większość osób używających CSS posługuje się kilkoma podstawowymi selektorami, a przecież ich ilość jest znacznie większa. Wraz z ilością używanych selektorów rosną możliwości formatowania różnych elementów na stronie.

Zachęcam do przetestowania poniższych selektorów i dzielenia się uwagami na dole strony.

selektor typu np. p
ustala określone cechy dla wszystkich elementów p
selektor uniwersalny *
pozwala ustalić określone cechy dla wszystkich elementów strony
selektor potomka np. td li
ustala określone cechy dla elementów li leżących wewnątrz elementów td niekoniecznie bezpośrednio.
selektor dziecka np. div > p
ustala określone cechy dla elementów p leżących bezpośrednio wewnątrz elementów div.
selektor braci np. span + a
ustala określone cechy elementów a leżących bezpośrednio za elementami span.
grupowanie selektorów np. h2, h3
ustala określone cechy dla wymienionych elementów
prosty selektor atrybutu np.: h3[class]
ustala określone cechy dla elementów h3 jeżeli mają ustaloną wartość atrybutu class. Można podać kilka atrybutów, wtedy cechy elementu będą ustalone jeżeli element ma ustalone wszystkie wymienione atrybuty np.: h3[class][title]
selektor atrybutu o określonej wartości np.: h3[class=”header”]
ustala określone cechy dla elementów h3 jeżeli mają ustaloną wartość atrybutu class na header. Analogicznie jak w poprzednim wypadku można podać kilka atrybutów z wartościami lub bez.
selektor klasy np.: .header
ustala określone cechy dla elementów jeżeli mają atrybut class ustawiony na header.
selektor identyfikatora np.: #jeden
ustala określone cechy dla elementu o wartości atrybutu id ustawionym na jeden. Identyfikator musi jednoznacznie określać tylko jeden element w dokumencie.
pierwsza linia np.: p:first-line
ustala określone cechy dla pierwszej linii elementów p
pierwsza litera np.: p:first-letter
ustala określone cechy pierwszej literze elementów p jeżeli ich zawartość rozpoczyna tekst.
selektor przed np.: p:before
wstawia podaną zawartość przed elementami p.
selektor po np.: p:after
wstawia podaną zawartość po elementach p.
selektor podstawowy np.: a:link
ustala określone cechy dla nie klikanych elementów a.
selektor odwiedzony np.: a:visited
ustala określone cechy dla klikniętych elementów a.
selektor wskazany np.: a:hover
ustala określone cechy dla elementów a wskazanych myszą.
selektor aktywny np.: a:active
ustala określone cechy dla klikanych elementów a.
selektor zogniskowania np.: a:focus
ustala określone cechy dla elementu a wybranego klawiszem tabulacji (oprócz odnośników stosuje się do pól formularzy, w których umieszczono kursor).
selektor pierwszego dziecka np.: div:first-child
ustala określone cechy dla pierwszego elementu div

Selektory można ze sobą łączyć. Należy przy tym uważać na spacje. Selektor „p .opis” wskazuje inne elementy niż „p.opis”. Pierwszy wskazuje na elementy klasy opis zawarte w znacznikach p, a drugi wskazuje na znaczniki p z ustawioną klasą opis.

Uwaga!!! Nową stronę należy przetestować w różnych przeglądarkach. Zwłaszcza w IE 6 nie wszystkie selektory działają. Na szczęście ta przeglądarka mocno traci na popularności i w zasadzie można ją już pominąć.

Zabezpieczony: Squeeze page i galeria!

10 marca 2010

Ten wpis jest zabezpieczony hasłem. Aby go zobaczyć, proszę wprowadzić poniżej swoje hasło:

Jak zrobić stronę squeeze page i galerię internetową – darmowe fragmenty.

9 marca 2010

Jestem niesamowicie podekscytowany ofertą, którą dla Ciebie przygotowuję. TAKIEGO szkolenia jeszcze nie prowadziłem, ale nie o tym chciałem… By umilić Ci oczekiwanie na premierę „Zawodowego Webmastera” w nowej formie i w niewiarygodnie niskiej cenie przygotowałem dwa fragmenty z szkolenia wideo. Jutro możesz otrzymać kolejne dwa fragmenty. Wystarczy, że na dole strony, w okienku komentarza napiszesz, co jest Twoim największym problemem w robieniu stron internetowych, lub zarabianiu na robieniu stron? Jeżeli odpowiesz na to pytanie, jutro na wpisany w formularzu adres dostaniesz wiadomość z linkiem do kolejnych części nagrania i hasłem dostępu.

Powiększ nagranie na cały ekran przy pomocy przycisku umieszczonego na dole po lewej stronie odtwarzaczaZmień rozmiar

Jeżeli przycisk powiększania nie działa, skorzystaj z linku do powiększonej wersji tego filmu

Jeżeli przycisk powiększania nie działa, skorzystaj z linku do powiększonej wersji tego filmu

  • Wiesz już, że programowanie stron www jest dla Ciebie?
  • Chcesz nauczyć się jeszcze więcej konkretnych umiejętności?
  • Zależy Ci na bezpośrednim kontakcie z doświadczonym trenerem it i programistą?
  • Chcesz wiedzieć jak zarabiać najwięcej na robieniu stron niezależnie od tego, czy jesteś pracownikiem w czyjejś firmie, czy wolnym strzelcem?

Jeśli odpowiedziałeś „TAK” przynajmniej raz, to szkolenie „Zawodowy Webmaster czyli jak tworzyć profesjonalne strony www” jest dla Ciebie.
Oczekuj w najbliższy czwartek specjalnej oferty na to szkolenie w nowej formie i w niewiarygodnie niskiej cenie.

Do zobaczenia
Leszek Sewastianowicz

P.S. Wyjątkowo atrakcyjna oferta będzie obowiązywała tylko przez 24 godziny od daty publikacji, więc bądź czujny, zapisz sobie datę 11.03.2010 w organizerze, kalendarzu, czy notatniku. Albo po prostu poproś najbliższą Ci osobę, by Ci przypomniała o tym w najbliższy czwartek.

Jak wstawić tekst na stronę?

24 lutego 2010

Zawartość strony może być dość zróżnicowana. Same teksty mogą zostać ujęte w akapity, nagłówki, listy itp. Generalnie można te elementy podzielić na blokowe i liniowe. Elementy na stronie są umieszczane przy pomocy znaczników tych elementów np. znacznikami elementu p czyli akapitu są <p> i </p>

Elementy blokowe

Elementy blokowe to takie, które bez względu na to, czy wstawimy je w nowej linii czy bezpośrednio za inną zawartością w tej samej linii, na stronie będą zawsze umieszczane w nowej linii. Również treści wpisane za elementami blokowymi będą przenoszone poniżej jego ostatniej linii. Elementami blokowymi są: nagłówki (h1, h2, h3, h4, h5, h6), cytat (blockquote), blok/sekcja (div), akapit (p), tekst preformatowany (pre), listy i elementy list (ul, ol, li dt, dd, dl).

Elementy liniowe

Elementy liniowe łączą się w jednej linii z elementami je poprzedzającymi i z elementami następującymi po nich. Do elementów liniowych należą: skrót (abbr), akronim (acronym), przejście do nowej linii (br), odniesienie do źródła cytatu (cite), kod (code), podkreślenie znaczenia fragmentu tekstu (em), cytat (q), wydzielenie fragmentu tekstu (span), wyróżnienie (strong). Wszystkie te elementy w mniejszym lub większym stopniu określają znaczenie treści, którą zawierają. Jest też kilka elementów liniowych odpowiedzialnych jedynie za prezentacje treści. Są to: pogrubienie tekstu (b), powiększenie tekstu (big), pochylenie tekstu (i), pomniejszenie tekstu (small), tekst w dolnym indeksie (sub), tekst w górnym indeksie (sup). Ze względu na to, że identyczny efekt można osiągnąć przy pomocy styli CSS, elementy te nie są zalecane.

Stronę zazwyczaj rozpoczyna tytuł. Do jego umieszczenia najlepiej użyć nagłówka pierwszego stopnia (<h1></h1>). Jest to nagłówek domyślnie wyświetlany największą czcionką, ale sposób wyświetlania można zmienić stosując style css. Każdy kolejny stopień nagłówków, a jest ich 6 (od <h1></h1> do <h6></h6>), jest coraz mniejszy i mniej istotny. Nagłówki są elementami blokowymi. Treść nagłówka umieszczamy między jego znacznikami np. (<h1>Tytuł strony</h1>). Treścią nagłówków oprócz tekstu mogą być wszystkie elementy liniowe.

Elementy blokowe w większości nie mogą zawierać innych elementów blokowych. Wyjątkami są tu elementy div, które mogą zawierać zarówno elementy liniowe, jak i blokowe, w tym inne bloki div. Drugim wyjątkiem są elementy blockquote, które nie tyle mogą, co muszą zawierać bezpośrednio inny element blokowy. Również elementy ul i ol wewnątrz siebie bezpośrednio mogą zawierać jedynie elementy li.

Element pre służy do wstawiania treści preformatowanych, w których chcemy zachować oryginalny układ białych znaków (spacji, tabulatorów, przejść do nowej linii). Nie może zawierać elementów: img, object, big, small, sub, sup. W przypadku umieszczania na stronie kodów programów lepiej jest użyć elementu code.

Znacznik <br /> jest znacznikiem przejścia do nowej linii. Kilka takich znaczników umieszczonych jeden za drugim powoduje powstanie większych odstępów na stronie. Jest to znacznik bardzo przydatny podczas tworzenia stron, gdyż przeglądarka ignoruje standardowe przejście do nowej linii.

Znacznik <span></span> jest elementem liniowym i służy do formatowania przy pomocy kaskadowych arkuszy styli wydzielonych fragmentów tekstów.

Znacznik odnośnika <a href=”strona.html”>strona</a> jest istotą Internetu. Pozwala na powiązanie ze sobą odrębnych dokumentów. Zawartością odnośnika jest najczęściej ciąg znaków, który można kliknąć, by otworzyć nowy dokument na stronie, lub przenieść się na zupełnie inną stronę, ale może to być również grafika np.: <a href=”strona.html”><img src=”zdjecie.jpg” alt=”zdjęcie” /></a>. Atrybut href określa miejsce docelowe odnośnika. Jeżeli jest to dokument naszego serwisu wystarczy podać względną ścieżkę do odpowiedniego pliku np.: <a href=”strony/strona4.html”>Strona 4</a>. Natomiast gdy tworzymy odnośnik do innej strony, podajemy jej pełny adres np.: <a href=”http://www.strona.pl/strony/strona4.html”>xxx</a> Za pomocą odnośników można też przenieść się do etykiety – odpowiedniego miejsca na stronie (przeglądarka automatycznie przewinie stronę do żądanego miejsca). Tego typu odnośniki konstruuje się w następujący sposób: <a href=”#etykieta”<xxx>/a>. Po znaku „#” w atrybucie „href” umieszczamy nazwę etykiety. Ta sama nazwa musi się znajdować w miejscu docelowym w atrybucie „id” dowolnego znacznika np. <h3 id=”etykieta”>nagłówek xx</h3>. Etykieta może znajdować się również na innej stronie. Odnośnik do takiej etykiety może wyglądać następująco: <a href=”http://www.strona.pl/strony/strona4.html#etykieta”>xxx</a>. Po adresie strony wstawiamy znak „#”, a po nim nazwę etykiety. Element a nie może zawierać innych elementów a.

Podstawy stron WWW – XHTML

19 lutego 2010

(X)HTML

Kod strony internetowej składa się ze znaczników języka html reprezentujących zdefiniowane elementy strony tj. odnośniki, akapity, tabele itp. Znacznik jest to ciąg znaków pomiędzy symbolami „<” i „>” np. <body>, <table>. Większość znaczników ma swoje wersje otwierające i zamykające, w których po symbolu „<” umieszcza się znak „/” np. <span> </span>. Znaczniki takie wpływają na wszystko co się pomiędzy nimi znajduje. Znaczniki nie mające swoich wersji zamykających zapisujemy w formie <br> na stronach w języku HTML lub <br /> w przypadku stosowania języka XHTML. Często znaczniki posiadają atrybuty modyfikujące ich wygląd lub funkcjonowanie np. <img src=”przykład.jpg” alt=”przykład” />. Nazwę atrybutu umieszcza się za nazwą znacznika, po spacji, następnie stawia się znak równości i w cudzysłowie ustawia się wartość atrybutu. Specyfikacja języka zaleca, by nie umieszczano przerw pomiędzy nazwą atrybutu, znakiem równości, znakami cudzysłowu i wartością atrybutu.

W kodzie strony możemy również umieścić komentarze. Wszystko, co zostanie umieszczone pomiędzy „<!-–” a „-–>”, nie będzie widoczne na stronie. Komentarze mogą posłużyć m.in. do umieszczania własnych uwag lub ukrycia fragmentów strony. Komentarzy nie można w sobie zagnieżdżać.

Struktura dokumentu składa się z trzech głównych elementów: znaczników <html></html>, w których zawiera się cały kod strony zapisany w HTMLU lub XHTMLU, znaczników <head></head> obejmujących część nagłówkową wpływającą na różne aspekty funkcjonowania strony w Internecie, ale nie wyświetlającą żadnych elementów na stronie, oraz znaczników <body></body> stanowiących główną część strony, wyświetlaną w przeglądarce. W znaczniku <body> nie można umieszczać tekstu w sposób bezpośredni. Tekst musi znajdować się w dodatkowych znacznikach.

html 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<!--komentarz -->
<body>
</body>
</html>

xhtml 1.0

<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<!--komentarz -->
<head>
<title>Tytuł</title>
</head>
<body>
</body>
</html>

xhtml 1.1

<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<title>Tytuł</title>
</head>
<body>
<!--komentarz -->
</body>
</html>

Zabezpieczony: Odbieranie danych z formularza

4 lutego 2010

Ten wpis jest zabezpieczony hasłem. Aby go zobaczyć, proszę wprowadzić poniżej swoje hasło:

Formularze na stronie www

4 stycznia 2010

Formularz na stronie www jest bardzo użytecznym narzędziem zwiększającym interakcje z użytkownikiem. Formularze mogą służyć do wysyłania wiadomości, zbierania informacji o odwiedzających stronę, składania zamówień, przesyłania parametrów do skryptów itp.

<form action="form.php" method="post">
	<div>
		Miejsce na pola formularza
	</div>
</form>

Formularz jest wstawiany za pomocą znaczników „<form></form>”. Najczęściej podajemy w nich dwa parametry: action – adres skryptu przetwarzającego dane z formularza oraz method – metodę wysyłania danych. W powyższym przykładzie przetwarzaniem danych z formularza zajmie się skrypt umieszczony w pliku form.php, a dane wysłane zostaną metodą POST.

Istnieją dwie metody wysyłania formularzy: GET i POST. Przy użytej metodzie GET dane wysyłane do skryptu dołączane są do adresu URI (ang. Uniform Resource Identifier – Ujednolicony Identyfikator Zasobów) np. www.serwan.pl/form.php?zmienna=wartosc. W takim adresie bardzo łatwo można zmienić nie tylko wartość zmiennej, ale również jej nazwę. W niektórych przypadkach może to spowodować niechciane przez twórcę lub właściciela strony rezultaty. Dane GET pozostają w historii przeglądarki. Z tego względu nie należy przekazywać tą metodą danych poufnych np. numerów kart kredytowych. Przesyłanie danych metodą GET jest też ograniczone limitem długości URI, który w przeglądarce Internet Explorer wynosi 2048, a może być też obcinany na różnych urządzeniach pośredniczących.

Dużo bezpieczniejsze jest używanie metody POST. W tej metodzie dane przesyłane są w protokole HTTP, co ogranicza możliwość ich podejrzenia i zmodyfikowania. Nie ma też limitu wielkości dla tych danych.

Kontrolki formularzy nie powinny być umieszczane bezpośrednio pomiędzy znacznikami „<form></form>”. Powinno się to robić wewnątrz dodatkowych znaczników np. bloku div lub tabeli.

<form action="form.php" method="post">
	<div>
		Imię: 
		<input type="text" name="imie" />
		Hasło: 
		<input type="password" name="haslo" />
		Akceptuję regulamin: 
		<input type="checkbox" name="akcept" value="q" checked=checked/>
		Kobieta: 
		<input type="radio" name="plec" value="kobieta" />
		Mężczyzna: 
		<input type="radio" name="plec" value="mezczyzna" />
		Rok urodzenia: 
		<select name="rok">
			<option>1998</option>
			<option>1997</option>
			(...)
		</select>
		Zainteresowania: 
		<select name="zainteresowania[]" multiple="multiple">
			<option value=1”>Pływanie</option>
			<option value=2”>Muzyka</option>
			(...)
		</select>
		<textarea name="komentarz">Wpisz komentarz </textarea>
		<input type="hidden" name="nr" value="354634" />
		<input type="submit" value="wyślij" />
	</div>
</form>

Większość kontrolek formularza to pola „input”. Ich rola i funkcje są zróżnicowane w zależności od atrybutu „type”. Wartości z tych pól będą dostępne w skrypcie php poprzez nazwy – atrybut „name”. Wartości pól mogą być określone w atrybutach „value”. Domyślną wartością atrybutu „type” jest „text”. Pola tego typu pozwalają na wprowadzenie krótkiej informacji tekstowej w pojedynczej linii. Jeżeli chcemy, by pole zawierało od razu jakiś tekst, należy umieścić go w atrybucie „value”. Do wpisywania haseł przeznaczony jest typ „password”. Od typu „text” różni go jedynie maskowanie wpisywanych znaków kropkami. Pole typu „checkbox” jest polem wyboru mającym postać małego kwadratu do zaznaczania i odznaczania myszką. Po wysłaniu formularza z zaznaczonym polem „checkbox” w skrypcie pod nazwą z atrybutu „name” tego pola dostępna będzie wartość z atrybutu „value” lub 1, jeżeli „value” nie zdefiniowano. Aby umieścić w formularzu zaznaczone pole „checkbox” należy dodać atrybut „checked” o wartości „checked”.

Pola opcji czyli przełączniki w formie kółek do zaznaczania (zaznaczenie jednego automatycznie odznacza inne) uzyskujemy stosując typ „radio”. Pola tego typu są grupowane ze sobą dzięki identycznej wartości atrybutu „name”. Tylko jedno pole o takim samym atrybucie „name” może być zaznaczone. W skrypcie php dostępna będzie wartość właśnie z tego zaznaczonego pola. Typ „hidden” pozwala dołączyć do formularza dane nie wprowadzane przez osobę wypełniającą formularz, a wygenerowane na stronie. Możemy w ten sposób dołączać informacje o stronie, z której dana osoba weszła, stronie na której został wypełniony formularz (jeżeli mamy kilka identycznych formularzy na różnych stronach takie informacje mogą okazać się bardzo przydatne), informacje o ustawieniach i personalizacji strony itp.

Ostatni typ pola input, który opiszę jest przyciskiem wysyłającym formularz. Typem tym jest „submit”. Poza wyglądem charakterystyczną jego cechą jest to, że wartość atrybutu „value” jest wyświetlana jako tekst przycisku.

Poza elementami „input” w formularzu mogą znaleźć się inne kontrolki. Pole tekstowe do wpisywania wielu linii tekstu otrzymujemy dzięki znacznikom „<textarea></textarea>”. Znacznik ten posiada atrybut „name” natomiast nie posiada atrybutu „value”. Wartością wyświetlaną w formularzu i przesyłaną do skryptu php jest tekst pomiędzy znacznikiem otwierającym i zamykającym. Listę wyboru uzyskujemy wstawiając znaczniki „<select></select>”, a między nimi „<option></option>” dla każdej pozycji na liście. Atrybut „name” jest definiowany dla zancznika „<select>”, a „value” dla znaczników „<option>”. Nazwami wyświetlanymi na liści będą teksty pomiędzy znacznikami „<option></option>”. Jeżeli nie zdefiniujemy atrybutów „value”, to wartością znacznika będzie tekst wyświetlany. Domyślnie wybrany jest pierwszy element listy. Można to zmienić umieszczając w wybranym znaczniku „<option>” atrybut „selected” o wartości „selected”. Jeżeli potrzebujemy listy, z której można wybrać jednocześnie kilka opcji, to do znaczników „<select></select>” należy dodać atrybut „multiple” o wartości „multiple”, a do atrybutu name dodać na końcu „[]” – dzięki temu odpowiednia zmienna w skrypcie php będzie tablicą. Wybór wielu pozycji na takiej liście odbywa się poprzez przytrzymanie klawisza „ctrl” na klawiaturze i klikaniu wybranych pozycji.

O odbieraniu danych w php napiszę wkrótce.

Jak używać funkcji round()

2 grudnia 2009

Php ma wiele dosyć ciekawych funkcji. Dzisiaj postanowiłem opisać jedną z nich. Funkcja round() zwraca zaokrągloną wartość pierwszego argumentu z dokładnością do miejsca podaną w drugim argumencie. Drugi argument jest opcjonalny i domyślnie wynosi 0. Zaokrąglanie odbywa się zgodnie z regułami matematycznymi. Czyli:

<?php
echo round(13.4);
?>

wyświetli liczbę 13, a kod:

<?php
echo round(32.5);
?>

wyświetli liczbę 33. Podanie jawnie drugiego argumentu o wartości 0 nie wnosi niczego nowego w działaniu funkcji. Kod:

<?php
echo round(12.6, 0);
?>

wyświetli liczbę 13. Natomiast przy wartościach większych od zera, zaokrąglenia dokonuje się do części dziesiątych, setnych, tysięcznych…

<?php
echo round(3.976323, 2);
?>

Powyższy kod wyświetli nam 3.98. Przy wartościach mniejszych od zera drugiego argumentu, zaokrąglanie obywa się do dziesiątek, setek, tysięcy…

<?php
echo round(3421757, -3);
?>

Powyższy kod wyświetli 3422000

Podstawy wyświetlania danych w php

27 listopada 2009

Częstym problemem programistów (nie tylko początkujących) jest optymalizacja kodu. Tymczasem mało kto przejmuje się najprostszymi metodami odciążania serwera. Bo czy jest coś prostszego i bardziej powszechnego niż wyświetlanie tekstu przez php. W tym tekście zajmę się instrukcją echo, ale przedstawione zasady są dosyć uniwersalne i przez większość osób niestety zaniedbywane.

echo jest najprostszą instrukcją do wyświetlania tekstu. Można wywołać ją z tekstem przekazanym przez zmienną:

<?php
$tekst='Ala ma kota.';
echo $tekst;
?>

przez łańcuch znaków umieszczony w apostrofach:

<?php
echo 'Ala ma kota.';
?>

lub łańcuch znaków umieszczony w cudzysłowie:

<?php
echo "Ala ma kota.";
?>

Wszystkie trzy sposoby wyświetlą dokładnie to samo. Można też przekazać do instrukcji echo tekst razem ze zmiennymi.

<?php
$zwierz='kota';
echo "Ala ma $zwierz.<br />";
$zwierz='tygrysa';
echo "Ala ma $zwierz.";
?>

Efektem powyższego będą dwie linijki tekstu:

Ala ma kota.
Ala ma tygrysa.

Zmienne umieszczone w cudzysłowie zostaną zinterpretowane. Inaczej jest w przypadku apostrofów. Kod w postaci:

<?php
$zwierz='kota';
echo 'Ala ma $zwierz.<br />';
$zwierz='tygrysa';
echo 'Ala ma $zwierz.';
?>

da efekt nieco odmienny:

Ala ma $zwierz.
Ala ma $zwierz.

Czysty tekst lepiej jest umieszczać w apostrofach niż w cudzysłowie. Cała zawartość cudzysłowu jest przetwarzana przez php co bardziej obciąża serwer. Przy jednej linijce i małej liczbie odwiedzin można to pominąć, ale przy większym serwisie to już jest różnica. Umieszczając tekst ze zmiennymi najlepiej jest stosować apostrofy dla tekstu, a zmienne dołączać operatorem konkatenacji (czyli kropki).

<?php
$zwierz='kota';
echo 'Ala ma '.$zwierz.'.<br />';
$zwierz='tygrysa';
echo 'Ala ma '.$zwierz.'.';
?>

Tu efekt będzie zgodny z oczekiwaniami, a przy tym serwer mniej obciążony.

Ala ma kota.
Ala ma tygrysa.

Jeżeli już ktoś upiera się przy cudzysłowie, to nie ma powodu stosować operatora konkatenacji. Dwie pierwsze linie kodu będą dawały identyczny efekt i podobnie obciążają serwer. Trzecia linia jest bardziej przyjazna dla procesora.

<?php
echo "Zamówienie nr" . $numer . " zostało przyjęte przez " . $user;
echo "Zamówienie nr $numer zostało przyjęte przez $user";
echo 'Zamówienie nr' . $numer . ' zostało przyjęte przez ' . $user;
?>