|
Menu główne
use PerlMongers::Warszawa;
use PerlMongers::Krakow;
NG_gRadio
|
| Perl z Tancerzem - część trzecia |
|
przez wrares
(109 odsłon)
|
Tancerz jest na tyle uniwersalny, że pozwala Nam na używanie różnych programów do obróbki szablonów. Drogi, którymi zarządza, które się przecinają, łączą lub rozdzielają, mogą być tworzone z wykorzystaniem różnorodnych metodologii. Dziś przybliżymy sposób zapisu szablonu w typowym języku HTML. Dokonamy kilku modyfikacji które są konieczne aby efekt końcowy był zadawalający. Co zrobimy.
Cytat:
(1) Budujemy nową drogę perlgtk.tt
(2) Dokonujemy zmian w szablonie CSS
(3) Dokonujemy zmian w layout
(4) Dopisujemy obsługę drogi w pliku perlgtk.pm
[1]
Na poczatku budujemy nową drogę o nazwie perlgtk.tt i zapisujemy w katalogu /perlgtk/views. Poniżej zamieszczam kod HTML
<html>
<head>
<title>Badanie zainteresowanych klubem Perlgtk </title>
</head>
<body>
<h1>Badanie zainteresowania członkostwem</h1>
<p>Prosimy o udzielenie poniższych informacji, abyśmy mogli,
określić czy chcecie brać udział we wsspólnym ćwiczeniu,
z Portalem PerlGtk w naszym klubie. Jesteśmy zainteresowni Waszym
aktywnym udziałem, we wspólnym rozwoju ekosystemu Perla.
</p>
<form>
<p>Nazwisko uczestnika: <input type= "text" name = "nazwisko" size= 40, maxlength = 80> </p>
<p>Hasło: <input type= "password" name="haslo" size= 40> </p>
<p>Skąd się o Nas dowiedziałeś
<br>
<input type="checkbox" name="znajomi" value="Tak"> znajomi
<input type="checkbox" name="magazyny" value="Tak"> magazyny
<input type="checkbox" name="gazety" value="Tak"> gazety
<input type="checkbox" name="radio" value="Tak"> radio
<br>
<input type="checkbox" name="plotki" value="Tak"> plotki
<input type="checkbox" name="sluchy" value="Tak"> słuchy
<input type="checkbox" name="szpital" value="Tak"> Karta informcyjna ze szpitala
<hr>
<p>Jakie są twoje dotychcasowe osiągnięcia</p><br>
<input type="radio" name="Pas" value="Brak" checked> Brak
<input type="radio" name="Pas" value="html"> HTML
<input type="radio" name="Pas" value="css"> CSS
<input type="radio" name="Pas" value="wyrazenia"> Regex
<input type="radio" name="Pas" value="obiekty"> Obiektowość
<hr>
<p>Kontakt z Nami</p>
<select name="zajecia" size=1>
<option value="PnSrSo"> pon-śr-sob
<option value="SoNe"> sob-nie
<option value="Pia"> pią.
</select>
<hr>
<p>Powiedz Nam dlaczego chcesz dołączyć do klubu Perlgtk<br>
<textarea name="Komentarz" rows=4 cols=40>Chciałbym dołączyć do klubu Perlgtk, bo
</textarea>
<hr>
<pre>
Nazwisko: <input type ="text" name="nazwisko" size=25><br>
Adres wysyłkowy: <input type ="text" name="wysylka" size=40><br>
Miasto : <input type ="text" name="maisto" size=40><br>
Kod pocztowy: <input type ="text" name="kod" size=6><br>
</pre>
<hr>
<table border=0>
<tr><td align="right">Nazwisko:</td>
<td><input type="text" name="nazwisko" size=40></td></tr>
</table>
<hr>
<p><input type="reset" value="Wyczyść wszystkie pola"></p>
<p><input type="submit" value="Gotowe - wyślij dane"></p>
</form>
</body>
</html>
[2]
Następnie w szablonie CSS o nazwie style.css dokonuję zmian, aby napis nie był zielony a niebieski
body {
font-family: Lucida,sans-serif;
color: #eee;
background-color: #1f1b1a;
}
#content {
color: #000;
background-color: #eee;
padding: 1em;
margin: 1em;
padding-top: 0.5em;
}
a {
color: gren;
}
h1 {
color: blue;
background-color: transparent;
text-align: center;
}
#footer {
border-top: 1px solid #aba29c;
margin-top: 2em;
padding-top: 1em;
font-size: 10px;
color: #ddd;
}
pre {
font-family: \"lucida console\",\"monaco\",\"andale mono\",\"bitstream vera sans mono\",\"consolas\",monospace;
}
Plik CSS dostępny jest w katalogu /perlgtk/public/css/style.css.
[3]
Teraz chcemy aby nasza droga perlgtk.tt mówiła w stadardzie utf-8 oraz aby jezyk był polski, aby stopka wskazywała na stronę http://perlgtk.pl/ . Dlatego dokonujemy zmian w pliku main.tt w katalogu /perlgtk/views/layouts/main.tt. Ponizej kod ze zmianami
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL" xml:lang="pl-PL">
<head>
<title>perlgtk</title>
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Strona przygotowana dla Portalu PerlGtk </h1>
<div id="content"><p><% content %></p></div>
<div id="footer">Wydawca<a href="http://perlgtk.pl"> Perlgtk</a></div>
</body>
</html>
[4]
Następnie mały wpis do pliku perlgtk.pm
use utf8;
set charset => 'utf-8';
get '/perlgtk' => sub {
template 'perlgtk.tt'
};
I już możemy uruchomić Naszą stronę w przeglądarce poprzez adres
http://localhost:3000/perlgtk. A tutaj mamy trzy ekrany z naszą stroną pierwszy..., drugi..., trzeci....
|
|
|
Szukaj w PerlGtk.pl
The Perl Job site
Szukaj kodu :
|
