Formularz z wykorzystaniem Lightbox, PHP i Ajax. Część 1 – front-end
Jednym z najprostszych przykładów wykorzystywania PHP w standardowych stronach internetowych, są różnego rodzaju formularze. Od prostego newslettera, poprzez systemy komentarzy, aż po formularz kontaktowy. W tym artykule postaram się przedstawić bardzo prosty przykład formularza, za pomocą którego, będziemy mogli dodawać informacje do bazy danych z wykorzystaniem jQuery i PHP. Dla lepszego zrozumienia zagadnienia podzieliłem artykuł na dwie części. W pierwszej zajmiemy się oprogramowaniem wyglądu serwisu w HTML i CSS. A w drugim programowaniem działania naszego formularza, czyli wykorzystanie PHP i MySQL do składowania informacji.
Przygotowujemy biblioteki
W celu zwiększenia użyteczności naszego formularza wykorzystamy popularny obecnie mechanizm lightbox, który pozwoli na otworzenie i wypełnienie naszego formularza bez opuszczania danej podstrony. W tym celu wykorzystamy doskonały skrypt Colorbox wykorzystujący bibliotekę jQuery, charakteryzuje się on przyzwoitą prędkością i rozmiarem, oraz dużą możliwością konfiguracji. Po szczegóły odsyłam do strony głównej projektu, gdzie znajdziemy krótką dokumentacje i przykłady. Przygotowujemy podstawowy kod HTML który umieszczamy pomiędzy tagiem body:
<h1>Przykład - Formularz z wykorzystaniem lightbox i AJAX</h1>
<button id="open-colorbox">Dodaj informacje</button>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" src="media/js/jquery.colorbox.js"></script>
<script language="javascript">
$(document).ready(function(){
// tu kod jquery
}); //end ready
</script>Jak widzimy jest to bardzo prosty kod dodający przycisk, któremu nadajemy id potrzebny przy wywoływaniu późniejszego skryptu. Następnie dodajemy potrzebne skrypty, czyli jQuery, w tym celu skorzystamy z ogólnodostępnego CDN udostępnionego nam przez firmę Google, oraz znajdujący się na naszym serwerze plik jquery.colorbox.js.
Formularz
Następnie przyszedł czas na formularz, którego kod znajduje się poniżej:
<div style='display:none'>
<div id="form">
<h2>Dodaj informacje</h2>
<form action="">
<label for="title">Tytuł informacji:</label>
<input type="text" name="title" id="title" />
<label for="link">Link:</label>
<input type="text" name="link" id="link" />
<label for="desc">Opis:</label>
<textarea cols="" rows="" name="desc" id="desc" ></textarea>
<button type="submit" class="right" >Dodaj</button>
</form>
</div>
</div>Jest to podstawowy kod prostego formularza zawierający dwa pola input (Tytuł informacji i Link) oraz jedno pole tekstowe mające zawierać opis naszego linku. Na końcu formularza znajduje się przycisk odpowiadający za zatwierdzenia danych dodanych do formularza. Jak zapewne większość z was zauważyła cały formularz otoczony jest tagiem div z nadanym stylem display: none;. Czyli ukryliśmy nasz formularz, ponieważ chcemy aby pokazywał się jako zawartość Colorbox po kliknięciu na przycisk Dodaj informacje.
Oczywiście aby nasz formularz lepiej się prezentował należy dodać odpowiednie style CSS:
button {
background: #a0cd43;
font-size: 16px;
border:1px solid #415c26;
-moz-border-radius: 5px;border-radius: 5px;
color:#2c562c;
padding: 5px 12px;
overflow: visible;}
#form {
background:#e7eef3;
padding:10px 25px;
width: 500px;
overflow: hidden;}
#form h2 {
font-family: Verdana ,Arial, sans-serif;
font-size: 28px;
color: #004e7f;
font-weight: bold;}
#form form label {
display: block;
color:#555;
font-size: 16px;
margin-bottom: 5px;}
#form form input,#form form textarea{
font-size: 16px;
width: 480px;
border: 2px solid #99ccff;
margin-bottom:20px;
padding: 6px 8px;
color:#004e7f;
-moz-border-radius: 3px;border-radius: 3px;}
#form form input.focus,#form form textarea.focus {border-color: #004e7f;}
#form form textarea{height: 150px;}który dodajemy do naszego pliku CSS wraz z stylami do Colorboxa. Niektórzy zauważą komendy udostępnione w CSS3
-moz-border-radius: 3px; border-radius: 3px;które odpowiadają za zaokrąglenie rogów w niektórych elementach naszego formularza. Oczywiście nie jest to jeszcze obsługiwane przez IE i użytownicy tej przeglądarki zobaczą elementy prostokątne, ale nie wpływa to na ogólne działanie naszego formularza.
Uruchamiamy lightbox
Jeżeli mamy przygotowany już cały nasz kod HTML i CSS oraz dodane potrzebne nam biblioteki, przyszedł czas na uruchomienie lightboxa. Strona zawiera w tym momencie poniższy kod JavaScript:
$(document).ready(function(){
$('form input, form textarea').focus(function() {
$(this).addClass('focus');
}).blur(function() {
$(this).removeClass('focus');
});
$("#open-colorbox").colorbox({inline:true, href:"#form"});
}); //end readyJak widać na początku znajduje się bardzo prosty skrypt jQuery, który wykorzystuje prawie w każdym projekcie, a jego zadaniem jest podświetlanie aktywnych pól formularza. Ostatnia linijka odpowiada za zainicjowanie Colorbox’a. Ponieważ formularz jest ukryty na naszej podstronie stosujemy parametr inline, a w znaczniku href podajemy identyfikator diva otaczającego nasz formularz. Istnieje możliwość wykorzystania formularza z osobnego linku, którego wartość dodajemy do href, a następnie zamiast opcji inline używamy iframe. Jest to podstawowe wykorzystanie Colorbox’a dla większej liczby opcji odsyłam do strony projektu, istnieje możliwość ustawienia wysokości, szerokości, metody wyłaniania się lightbox’a itp.
Podsumowanie
Jak widać wykonanie takiego formularza jest proste i nie wymaga niesamowitych nakładów pracy. Wykorzystaliśmy ogólno dostępne biblioteki do stworzenia użytecznego, czytelnego i łatwego w obsłudze formularza, nie wymagającego przeładowania strony. W następnej części zajmiemy się programowaniem naszego formularza i dodawaniem jego zawartości do bazy danych.
DyskusjaKomentarze: 4
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
http://www.webnote.pl/media/js/jquery.colorbox.js
Dodaj komentarz Komentarze są moderowane, a przy linkach używane jest rel="nofollow". Prosimy o nie reklamowanie i nie spamowanie w komentarzach.
Linki tworzone za pomocą tagu [url] np: [url=www.xyz.pl]xyz[/url]
Źródła za pomoc tagu [code] z wskazaniem języka np. [code=php] echo [/code]