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>Klikalna mapa europy w HTML
W tej krótkiej notce chciałbym zwrócić uwagę na bardzo ciekawe rozwiązanie klikalnej mapy Europy i Polski bez wykorzystywania technologii flash. Tym chętniej o tym informuje, iż jest to rodzimy produkt stworzony przez Łukasza Popardowskiego (Winston Wolf). Do dyspozycji mamy:
Cała mapa jest wykonana w html i css przy użyciu jQuery i jednego obrazka png. Mapa udostępniona jest na licencji Creative Commons: Attribution-Share Alike 3.0 License co umożliwia jej stosowanie zarówno w prywatnych jak i komercyjnych projektach.
Czytaj dalej...Piszemy prosty plugin TinyMCE – wstawianie kodu
TinyMCE jest jednym z najpopularniejszych i największych edytorów WYSIWYG stosowanych w systemach zarządzania treścią. Mimo swoich ogromnych możliwości, z czasem może zabraknąć nam pewnej funkcjonalności, która znacznie poprawiałaby pracę z naszym systemem. Dobrym przykładem takiego rozwiązania, jest menadżer obrazków. Możemy wybrać płatny plugin stworzony przez twórców TinyMCE, skorzystać z jednego udostępnionego przez innych użytkowników, lub napisać własny i dostosować do indywidualnych potrzeb. Menadżer obrazków, może być trochę zbyt skomplikowanym przykładem dla osób zaczynających przygodę z TinyMCE, dlatego postanowiłem pokazać podstawy tworzenia pluginów na bardzo prostym przykładzie: wyświetlanie kodu w naszych artykułach.
Przygotowanie plików i folderów
Wychodzę z założenia, że jeżeli chcesz napisać plugin do TinyMCE, to edytor jest zainstalowany i podpięty do swojej strony. W katalogu tiny_mce/plugins tworzymy katalog insertcode i przegrajmy do niego zawartość katalogu example.
W katalogu mamy następujące pliki i foldery:
- katalog img – opcjonalny folder na pliki graficzne, w nim będziemy przechowywać ikonę naszego pluginu
- katalog js – może zawierać pliki z naszymi skryptami, w przypadku skomplikowanych skryptów warto logikę działania skryptu zamieścić w osobnym pliku, ale ponieważ nasz przykład jest bardzo prosty, cały skrypt będzie zamieszczony w pliku dialog.html
- katalog lang – zawiera wersje językowe dla naszego pluginu – opcjonalny.
- plik dialog.html – plik w którym będzie strona otwierana przez nasz plugin, tutaj umieszcza się różnego rodzaje formularze, listy wyboru, przyciski itp.
- pliki editor_plugin_src.js i editor_plugin.js – pliki odpowiedzialne za inicjacje wtyczki, istotny jest tylko plik editor_plugin.js, który powinien zawierać skompresowaną zawartość pliku źródłowego (editor_plugin_src.js), ja proponuje przenieść zawartość pliku z źródłem do editor_plugin.js.
Kolorowanie składni na stronie www
Ponieważ blog ten z założenia ma być o tematyce programistycznej, nie wyobrażam sobie pisania postów bez dobrego kolorowania składni przedstawianych przykładów. Postanowiłem poszukać kilka ogólnie znanych metod uzyskania kolorowej składni popularnych języków. Postanowiłem zawęzić horyzont do najbardziej mnie interesujących GeSHi, SyntaxHighlighter oraz Highlight.js.
Wystarczy CSS
Oczywiście nie zawsze musimy korzystać z osobnych skryptów, aby osiągnąć zadowalające efekty. Czasami wystarczy użyć czystego CSS oraz tagów <pre> oraz <code>. Poniżej przedstawiłem przykładowy sposób ostylowania tych znaczników.
pre {
background: #f0f0f0;
border-left: 2px solid #ccc;
font-size: 12px;
line-height: 20px;
margin: 0 auto;
overflow: auto;
overflow-Y: hidden;
width: 600px;
}
pre code {
color:#333;
display: block;
font-family: "Courier New",Courier,monospace;
margin: 0 0 0 20px;
padding: 15px 0;
}Jest to bardzo prosty sposób dzięki któremu osiągamy przyzwoite efekty, w zupełności wystarczające do przedstawienia mało skomplikowanego kodu jak style CSS czy fragmenty HTML. Metoda taka jest używana miedzy innymi przez Css Globe oraz CSS-Tricks.
GeSHi
Czyli Generic Syntax Highlighter to działający po stronie serwera skrypt zwracający ostylowany kod gotowy do prezentacji na stronach internetowych. Skrypt przy wersji 1.0.8.3 obsługuje 132 języki programowania! Liczba ta jest imponująca, podobnie jak opcje, dzięki którym możemy w bardzo elastyczny sposób dostosować wygląd kodu do naszych wymagań. Dodawanie kolejnych języków nie jest skomplikowane, jednak nie wyobrażam sobie osoby, która nie znajdzie w skrypcie lub na forum interesującego go języka.
Czytaj dalej...
