* Mapa strony

Projektowanie, optymalizacja stron

Porady dla webmasterów


* * Formularz: wysyłanie przez stronę z weryfikacją * *

Kiedyś pokazałem bardzo prosty kod na wysyłanie przez stronę, bez weryfikacji danych które są wpisywane w formularz.
Zaprezentuje teraz jak można to weryfikować i wyświatlać komunikaty które informują wpisującego o błędach oraz o pomyślnym wysłaniu wiadomości z formularza.
PHP


<?php
// **************************************************************
// Autorem skryptu jest Puma.
// www.puma.pomorze.pl
//
// skrypt jest darmowy pod warunkiem zostawienia tej informacji.
// **************************************************************

echo '<div id="kontakt">';

$imie = stripslashes(htmlspecialchars(trim($_POST[imie])));
$mail = stripslashes(htmlspecialchars(trim($_POST[mail])));
$tresc = stripslashes(htmlspecialchars(trim($_POST[tresc])));

if(isset($_COOKIE[sent])) echo '<p style="color: red;">Nie możesz tak szybko po sobie wysyłać wiadomości.</p>';

if ((isset($_POST[wyslij])) && (!isset($_COOKIE[sent])))
{
if (empty($imie)) {
$error=1;
$warmings[imie] = " style=\"border: 1px solid red;\" ";
echo '<span class="form-kom1">Nie wypełniłeś/aś pola <span class="form-kom2">- Imię/nick -</span></span><br />'; }

if (!ereg("^.+@.+\..+$" , $mail)) {
$error=1;
$warmings[mail] = " style=\"border: 1px solid red;\" ";
echo '<span class="form-kom1">Nie wypełniłeś/aś pola <span class="form-kom2">- E-mail -</span></span> <br />'; }

if (empty($tresc)) {
$error=1;
$warmings[tresc] = " style=\"border: 1px solid red;\" ";
echo '<span class="form-kom1">Nie wypełniłeś/aś pola <span class="form-kom2">- Wiadomość -</span></span><br />'; }

if ((strlen($tresc)) >= 150) {
$error=1;
$znaki = strlen($tresc);
$warmings[tresc] = " style=\"border: 1px solid red;\" ";
echo '<span class="form-kom1">Twoja <span class="form-kom2">- Wiadomość -</span> jest za długa.<br />
Jest <span class="form-kom2">- '.$znaki.' -</span> znaków.</span><br />'; }

if ($error==0) {
$list = "Imię - $imie / E-mail - $mail\n Treść - $tresc\n\n";
$naglowki .= "Content-type: text/html; charset=kodowanie\r\n";
$naglowki .= "From: $mail";
if (@mail("twoj_mail","tytul", $list, $naglowki)) {

echo '<p style="color: #FF0000;">Wiadomośc została wysłana.</p>';

setcookie ("sent", "sent", time()+60); // ustawia ciacho na 60 sekund
} else {
echo '<p style="color: #FF0000;">Nie udało się wysłać wiadomości,<br /> proszę spróbować później.</p>'; }
}
}

echo '<form action="'.$_SERVER[PHP_SELF].'" method="post" id="formularz">
<p class="kontakt-uwaga"><span class="gwiazdka">*</span> Wiadomość do 150 znaków</p>
<fieldset><legend><span class="margines">Formularz kontaktowy: </span></legend>
<label for="pole1"> - Imię/nick -</label>
<input type="text" name="imie" '.$warmings[imie].' value="'.$_POST[imie].'" id="pole1" /><br />
<label for="pole2"> - E-mail -</label><br />
<input type="text" name="mail" '.$warmings[mail].' value="'.$_POST[mail].'" id="pole2" /><br />
<label for="pole3"><span class="gwiazdka">*</span> - Wiadomość - </label>
<textarea '.$warmings[tresc].' name="tresc" cols="25" rows="5" id="pole3">'.$_POST[tresc].'</textarea><br />
<input type="submit" value="Wyślij" class="przycisk" name="wyslij" />
</fieldset>
</form>

</div>';
?>

Weryfikacji podlegają wszystkie pola, ustawione jest też max 150 znaków w polu wiadomości.
Jest cookies ustawione na 60 sekund, prędzej nie można wysłać wiadomości ponownie.
Tam gdzie piszę twoj_mail to wpisujesz mail na który mają być wysyłane wiadomości z formularza.

Formularz jest sformatowany przez CSS, jak ktoś chcę to może go zmienić.
CSS


#kontakt { font: normal 13px Verdana; margin: 0 auto; width: 280px; }
.kontakt-uwaga { font-size: 10px; }
form { text-align: center; width: 240px; margin: 0 auto; }
form span.margines { margin: 0 6px; }
input { margin-bottom: 4px; }
.przycisk {
    width: 160px;
    margin-top: 8px;
    background: #ffffff;
    font-size: 12px;
    cursor: pointer;
    font-weight: bold;
    padding: 2px;
    letter-spacing: 3px;
    border: 2px solid #80400;
}
.przycisk:hover { background: #804000; color: #ffffff; }
#pole1, #pole2 { width: 190px; border: 1px solid #804000; }
#pole3 { width: 190px; height: 120px; border: 1px solid #804000; }
#pole1:focus, #pole2:focus, #pole3:focus { background: #f0ffff; }
span.gwiazdka { color: #ff0000; }
span.form-kom1 { color: #008000; }
span.form-kom2 { color: #ff0000; }

* * Galeria w CSS * *

HTML :

<div id="menu">
<ul>
<li><img src="miniaturki/01.jpg" alt="" /><img class="g" src="duze/01.jpg" alt="" /></li>
<li><img src="miniaturki/02.jpg" alt="" /><img class="g" src="duze/02.jpg" alt="" /></li>
<li><img src="miniaturki/03.jpg" alt="" /><img class="g" src="duze/03.jpg" alt="" /></li>
<li><img src="miniaturki/04.jpg" alt="" /><img class="g" src="duze/04.jpg" alt="" /></li>
<li><img src="miniaturki/05.jpg" alt="" /><img class="g" src="duze/05.jpg" alt="" /></li>
</ul>
</div>

CSS :

* { margin: 0; padding: 0; }
img { border: 0; }
body { behavior: url(csshover.htc); position: relative; margin: 20px auto; width: 400px; height: 430px; border: 1px solid #5F9EA0; }
#menu { width: 100%; height: 132px; overflow: auto; }
ul { list-style: none; width: 770px; height: 112px; }
li { display: inline; }
li img { widht: 150px; height: 112px; }
img.g { display: none; }
li:hover img.g {
display: block; position: absolute; bottom: 0; left: 0; width: 400px; height: 300px; }

Galeria jest zrobiona w CSS, dla IE trzeba dodać hack w postaci pliku csshover.htc i kodu behavior: url(csshover.htc);.

demo

* * Cytat dnia * *

Cytat dnia to spotykany skrypt na stronach, zaprezentuje taki skrypt poniżej.

<?php
$data = date('j');
$cytat = ($data - 1);
$file = file("cytat-dnia.txt");
echo "<p>$file[$cytat]</p>";
?>

Omówię po kolei linijki kodu :
1. Funkcja daty która pobiera dzień.
2. Jako że php liczy wiersze od zera a nie od jedynki to odejmiemy jeden od daty, dla wygody wpisywania cytatów w pliku.
3. Pobiera cytat z pliku cytat-dnia.txt.
4. Wyświetla nasz cytat dnia.

demo

* * Plik .htaccess * *

Za pomocą pliku .htaccess mamy możliwość do ograniczonego zestawu poleceń które umożliwiają wprowadzanie dodatkowych zmian w konfiguracji podstawowej serwera.

Można tego pliku użyć np. do zdefiniowania własnych stron błędu,
Np. błąd 404 tzn. nie ma takiego pliku.

ErrorDocument 404 http://www.puma.pomorze.pl/404.php

Dostęp zabroniony

ErrorDocument 403 http://www.puma.pomorze.pl/403.php

Wymagana autoryzacja

ErrorDocument 401 http://www.puma.pomorze.pl/401.php

Plagą naszych stron jest hotlinkowanie tzn. użycie naszej grafiki na innych stronach bezpośrednio z naszego serwera. Nie trzeba dodawać że takie działanie zwolni nasz serwer (szybkość wczytywania się strrony) jak też znacząco zwiększa zużycie naszego transferu. Tutaj też przychodzi nam z pomocą plik .htaccess.
Niektórym stronom możemy jednak zezwolić na to, jak np. naszej.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http://www.puma.pomorze.pl.*$ [NC]
RewriteRule .*\.(jpe?g|gif|bmp|png)$ - [F]

W pozycjonowaniu strony ważne jest aby nasza strona była zaindeksowana w wyszukiwarce pod jednym adresem, mówię o adresie z www lub bez www. Można to zrobić wpisując do pliku .htaccess :

RewriteEngine On
RewriteCond %{HTTP_HOST} ^puma.pomorze.pl$ [NC]
RewriteRule ^(.*)$ http://www.puma.pomorze.pl$1 [R=301,L]

* * Menu w jednym pliku * *

Przy robieniu stron bardzo przydatne jest gdy dodajemy kolejne podstrony to żeby nie zmieniać menu na każdej podstronie.
Jest kilka metod na ułatwienie sobie sprawy, ogólnie zasada jest taka żeby elementy strony które się powtarzają umieścić w jednem pliku np. menu, stopka czy też top.
Jak wspomiałem rozwiązań tego problemu jest kilka, można za pomocą HTML lub JavaScrip, ale według mnie najlepszym sposobem jest użycie PHP.
W PHP są dwa warianty rozwiązania :
Dajesz nasze menu w plik np. menu.php, potem w kodzie strony podajesz <?php include ('menu.php') ?>.
Sposób 1
Przykład 1 :

<div id="top"><?php include ('top.php') ?></div>

<div id="menu"><?php include ('menu.php') ?></div>

<div id="tresc"><p>nasz tekst</p></div>

<div id="stopka"><?php include ('stopka.php') ?></div>

Jak widać w powyższym przykładzie, elementu powtarzające się to pliki top.php, menu.php oraz stopka.php.
Taki szablon kopiujesz ile masz podstron i na każdej z nich zmieniasz tylko część zawierającą treść naszej podstrony, czyli w moim przykładzie <p>nasz tekst</p>.

Drugi wariant użycia PHP trochę się różni od tego w.w.
W tym wariancie nie ma plików które includejesz na stronę w takim sensie jak to pokazałem, ale wstawiasz samą treść podstrony tam gdzie ma być. Pokażę to na przykładzie :
Sposób 2
Przykład 2a :
Wstawiasz to tam gdzie mają się wyświetlać podstrony.

<?php
// zmienna $id przekazana metoda GET
$id = $_GET['id'];
// sprawdzamy czy zmienna $id nie jest pusta
if(!empty($id)) {
// sprawdzamy czy plik o danej nazwie (php) oraz dopuszczalnych znakach (litera oraz -) istnieje
if( (file_exists("$id.php")) && (preg_match('|^[[:alpha:]-]+$|', $id)) ) include "$id.php";
// jezeli plik nie istnieje wyswietla się komunikat
else include '404.php';
}
// jezeli zmienna $id jest pusta wyswietla się strona glowna
else include 'start.php';
?>

Jak widać konstrukcja jest wyraźnie inna od pierwszego przykładu.
Dodam że postać linków do podstron ma następującą postać w podanym przykładzie :
index.php?id=podstrona lub index.php?id=katalog/podstrona
ps. W podstronach dajemy tylko to co zwykle się znajduje między znacznikami <body>.

Jeżeli chcesz dołączać do strony też pliki HTML to skrypt wygląda tak :
Sposób 2
Przykład 2b :

<?php
// zmienna $id przekazana metoda GET
$id = $_GET['id'];
// sprawdzamy czy zmienna $id nie jest pusta
if(!empty($id)) {
// sprawdzamy czy plik o danej nazwie (php) oraz dopuszczalnych znakach (litera oraz -) istnieje
if( (file_exists("$id.php")) && (preg_match('|^[[:alpha:]-]+$|', $id)) ) include "$id.php";
// sprawdzamy czy plik o danej nazwie (html) oraz dopuszczalnych znakach (litera oraz -) istnieje
if( (file_exists("$id.html")) && (preg_match('|^[[:alpha:]-]+$|', $id)) ) include "$id.html";
// jezeli plik nie istnieje wyswietla się komunikat
else include '404.php';
}
// jezeli zmienna $id jest pusta wyswietla się strona glowna
else include 'start.php';
?>

Jeżeli mają być inne znaki dozwolone w nazwach plików to zapoznaj się z 'wyrażeniemi regularnymi w php'

Drugi sposób jest praktyczny, ale ma pewien mankament...mniej się nadaje taka strona do pozycjonowania w wyszukiwarkach.
Chodzi o brak możliwości zmiany na podstronach metagów i title.
Problem ten rozwiązuje dodatkowy skrypt w PHP który należy umieścić zamiast meta : keywords i description oraz title.
Dodatek do sposobu 2 :

<?php
// zmienna $id przekazana metoda GET
$id = $_GET['id'];
// sprawdzamy czy zmienna $id nie jest pusta
if(!empty($id)) {
// sprawdzamy czy plik o danej nazwie (inc) oraz dopuszczalnych znakach (litera oraz -) istnieje
if( (file_exists("$id.inc")) && (preg_match('|^[[:alpha:]-]+$|', $id)) ) include "$id.inc";
// jezeli plik nie istnieje wyswietla sie glowny plik
else include 'start.inc';
}
// jezeli zmienna $id jest pusta wyswietla się strona glowna
else include 'start.inc';
?>

Plik inc powinien się znajdować w tym samym miejscu (katalogu) co dana strona/podstrona oraz posiadać tą samą nazwę z rozszerzeniem inc.
Jako że nie chcemy wyświetlać żadnego błędu w przypadku braku określonego pliku np. gdy nie chcemy robić oddzielnych pliki do wszystkich podstron to wyświetlamy plik główny start.inc.

Portfolio

projektowanie, optymalizacja

www.puma.pomorze.pl

2017 / 08 / 19
Po
Wt
Śr
Cz
Pi
So
Ni
1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Jeżeli skorzystałeś z moich porad,
będę wdzięczny za umieszczenie linka do mojej strony.

<a href="http://www.puma.pomorze.pl" title="Porady webmasterskie">Porady webmasterskie</a>
Konkurs WWW - forumweb.prv.pl :: 3 MIEJSCE
(2007.05)
Puma © 14.05.2006 Moje strony: Portfolio | Świat marzeń i prawdy | Aktualności - komentarze