Wielki POST i mały GET

 

Widzieliście ostrzeżenia typu „nie odświeżaj strony, ani nie używaj przycisku wstecz przeglądarki” ? Zapewne tak, bo to dość często stosowana praktyka zapobiegania ponownemu wysłaniu danych np. poprzez formularz. Praktyka powszechna, ale metoda rozwiązania problemu żadna.

Weźmy przykład – formularz przelewu internetowego. Wypełniamy dane, klikamy przycisk Akceptuj. Dane o transakcji zostają wysłane do serwera za pomocą metody POST. Serwer odnotowuje zmiany w bazie danych. Załadowana zostaje ta sama strona z formularzem. Użytkownik klika wstecz. Przeglądarka z reguły rzuca ostrzeżeniem o powtórnym przesłaniu danych żądaniem POST. Wiadomość jest zbyt konfundująca, użytkownik nieopatrznie zgadza się na ponowne przesłanie danych. Pieniądze zostają przelane dwukrotnie.

Co zrobić by uniknąć pozwów od użytkowników takich jak powyżej? Ostrzec, że za ich działania na stronie nie odpowiadamy prawnie lub użyć przekierowania po przetworzeniu danych otrzymanych POST-em. Tylko tyle i aż tyle. Teraz przykład wypisania z listy mailingowej. Schemat działania zawarty w trzech plikach:

form.html z prostym formularzem:


<form action="form_post.php" method="post">
   <input type="text" name="email" />
   <input type="submit" value="Wyślij" />
</form>

form_post.php przetwarzający dane (operacje na bazie danych itp.)


<?php
if(isset($_POST['email'])){
   // usuń e-mail z bazy subskrybentów
}
//przekierowanie z parametrem - adresem e-mail (metoda GET!)
header('Location: form_result.php?email=' . $_POST['email']);
?>

form_result.php, czyli plik wynikowy z rezultatem operacji


<?php
if(isset($_GET['email'])){
   //pobierz dane np. imię i nazwisko z bazy danych
   $query = "SELECT name, surname FORM users WHERE email = ?";
   //podstawienie $_GET['email'] pod zmienną wiązania i zwrócenie wyniku bazy danych
   (...)
   echo "$name $surname, zostałeś poprawnie wypisany z newslettera.";
}
?>

Voila! Teraz nawet po naciśnięciu przycisku wstecz, nie ma zagrożenia, ponieważ strona rezultatu operacji była ładowana za pomocą metody GET.

Idea szerzej opisana w artykule Redirect After Post.

 
 

Uprość linki – znacznik <base>

 

Znacznik <base> pozwala na określenie względnej ścieżki do wszystkich odnośników na naszej stronie. Przykład?



<head>

<base href="extras/images/" />

</head>

<body>

<!-- odnośnik, który w rzeczywistości wskazuje na adres "extras/images/page_2.html" -->

<a href="page_2.html">Strona 2</a>

<!-- obraz, który w rzeczywistości wskazuje na adres "extras/images/more/bground.jpg" -->

<img src="more/bground.jpg" />

</body>


Zalety?

  • oszczędność czasu
  • w razie zmiany głównej lokalizacji – wystarczy zmienić jedną ścieżkę w <base>
  • mniejszy rozmiar pliku

Czy jeszcze muszę Cię przekonywać do stosowania znacznika <base>? ;-)

Podziel się ze mną opinią – czy ten wpis był pomocny?

 
 

Warunkowe programowanie pod IE – I’m lovin’it!

 

Nie ma przeglądarki doskonałej. Chociażby w odniesieniu do wsparcia CSS widać ogromne rozbieżności między standardami, a implementacją. Jednak są przeglądarki lepsze, gorsze, te złe i Internet Explorer :]

Jak sobie radzić z IE? Sami projektanci widocznie uznali, że ich przeglądarka zachowuje się wyjątkowo dziwnie w niektórych sytuacjach i udostępnili developerom furtkę w postaci instrukcji warunkowych specjalnie dla IE. Czy to nie jest przyznanie się do błędu? Ale do rzeczy…

Wszystko wyjaśnia ten fragment kodu:


<!--[if IE 6]>
Tylko IE wykona tę instrukcję.
<![endif]-->

Instrukcja pozwala nam na wykrycie przeglądarki i jej wersji, możliwe jest także zastosowanie instrukcji gt lub lte, które odpowiednio oznaczają wersję późniejszą niż i równą lub wcześniejszą.

Tutaj możecie otrzymać więcej informacji na temat instrukcji warunkowej IE.

I małe sprostowanie. Nie, nie jestem haterem Microsoftu, ani ich produktów. To tylko pozostałości frustracji po IE 6 ;-)

 
 

Sposób na główne logo

 

Zwyczajowo logo strony www umieszcza się w prawym górnym rogu layoutu. Nie rezygnuj z tego. Podobnie jak podlinkowania go do strony głównej. To oczywiste oczywistości.

Co jednak z SEO? Logo to zwykle pierwszy link, jaki napotyka robot przeglądarki na swojej ścieżce wiodącej przez kod Twojej strony. W dodatku link, który powtarza się na wszystkich podstronach. Żal marnować tak doskonałe miejsce na grafikę. Oczywiście można opisać ją atrybutem alt, a odnośnik odpowiednim title, ale…

…są lepsze rozwiązania. Co powiesz na wykorzystanie tagu <h1>? Tekstowe logo? To jakiś absurd, prawda?

Nie, nadal pozostaniemy przy obrazie. Najpierw trochę zabawy w kodzie.

HTML:


<h1 id="logo">
<a href="#" title="Strona główna XYZ">Anchor tekst bogaty w słowa kluczowe</a>
</h1>

CSS:


h1#logo{
position: absolute;
left: 30px;
top: 30px;
margin: 0;
padding: 0;
}

h1#logo a{
display: block;
background: url(logo.png) no-repeat;
width: 50px;
height: 50px;
text-indent: -5000px; //ukrywamy tekst
outline: none; //ukrywa paskudną ramkę odnośnika
}

Cały myk polega na ukryciu tekstu poza obrębem strony. Sprawia to, że mamy klikalne logo graficzne, a przy okazji korzystamy z dobrodziejstwa nagłówków, które skutecznie pozycjonują nam odpowiednie słowa kluczowe.

 
 
« poprzednie wpisy