這個 共分 5 部分的系列文章 向您介紹了如何使用 Perl 和 Apache 構建一個照片共享網站，從而訪問 Amazon 的 Simple Storage Service (S3) 和 SimpleDB。在這最後一期文章中，我們將考察完整 mod_perl 站點的模板，包括一個用於索引的模板、三個用於上傳的模板（通用模板、S3 表單和 URL 添加物）、一個用於瀏覽照片和評論的模板，以及一個用於遞歸式地瀏覽（即遍歷瀏覽）照片評論的模板。
在最後一期文章中，我們將了解完整的 mod_perl 站點（這一次將討論模板；代碼庫位於 功能豐富的 Perl：Perl 和 Amazon 雲，第 4 部分）。我再一次鼓勵您閱讀源代碼。該站點是功能性的，但是許多細節都沒有在本系列中詳細介紹，我希望您能理解這些細節或者了解還存在疑問的地方。您可以通過書店或搜索引擎查找信息。
 |
|
特別是，設置一個完整的 mod_perl 站點並使用 Template Toolkit 是非常廣泛的主題，並且已經介紹過許多次，因此這裡不再解釋。最佳學習途徑就是了解每一個問題和難點，直到網站可以正常運行。本系列將給出可以使網站正常運行所需的所有內容 — 但是需要由您來將所有內容結合起來。
和此前的文章一樣，我將使用 share.lifelogs.com 作為域名。當在您自己的環境中使用時，應根據需要修改它。
index.tmpl
我們將按照從上而下的順序討論模板（policy.tmpl 在 第 4 部分 已作討論）。有關 Template Toolkit 語法的解釋，見 參考資料 小節。我將解釋比較複雜的部分。
index.tmpl 是一個簡單的 HTML 頁面。這裡惟一需要注意的是所有 URI 都是相關的，因此這個模板和其他所有模板都可以用於任何域。
<html> <head> <title>Share Pictures</title> </head> <body> <h1>Share Pictures</h1> You can <a href="/upload">upload or add images</a> or <a href="/browse">browse images and comments</a>. <address> Contact <a href="mailto:tzz@bu.edu">Ted Zlatanov</a> if you have lots of money you're trying to get out of Nigeria. The breath is <strike>baited</strike>bated. </address> </body> </html> |
 |
upload.tmpl
現在，我們將了解一個優秀的模板，它集合了 JavaScript、HTML 和 Template Toolkit 語言。如果這還不能讓 Web 設計師激動不已的話，那麼我不知道還有什麼能夠擁有這種魔力。
<html> <head> <title>Upload Page For [% username %]</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js" type="text/javascript"></script> </head> <body> <script language="JavaScript"> function OnSubmitForm() { var form = $('uploader'); var file = form['file']; var ct = form['Content-Type']; var name = form['name'].value; if (!name || name.length < 1) { alert("Sorry, you can't upload without a name."); return false; } var filename = ''+$F(file); var f = filename.toLowerCase(); // always compare against the lowercase version if (!navigator['mimeTypes']) { alert("Sorry, your browser can't tell us what type of file you're uploading."); return false; } var type = $A(navigator.mimeTypes).detect(function(m) { // does any of the suffixes match? return m.type.length > 3 && m.type.match('/') && $A(m.suffixes.split(',')).detect(function(suffix) { return f.match('\.' + suffix.toLowerCase() + ' |
上傳頁面展示了兩個上傳對話框。它們都可以添加照片，但是第二個對話框更加簡單。在第二個對話框中，用戶填入照片的 URL 和名稱，這些內容隨後被 POST 到 /urluploaded，後者正是 urluploaded.tmpl。在顯示該模板時，將自動調用圖像參數處理程序。用戶名從伺服器獲得並且是一個隱藏了表單的 POST 參數。
第一個表單非常複雜。幸運的是，可以閱讀本系列的 第 2 部分，其中解釋了有關 S3 上傳的所有內容，因此您應當不會感到陌生。
對第 2 部分的 s3form.pl（包含在 下載 小節）的主要修改包括：
|
s3uploaded.tmpl
在 S3 上傳中將使用該模板。
[% success = params.result %] <html> <head> <title>[% IF success %]Successful[% ELSE %]Unsuccessful[% END %] Upload Page For [% params.user %]</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> [% IF success %]Congratulations[% ELSE %]Sorry[% END %], [% params.user %]. You have [% IF success %]successfully[% ELSE %]unsuccessfully[% END %] uploaded [% params.key %] to S3 bucket [% params.bucket %] named [% params.name %].<p> (etag is [% params.etag %] but I doubt you care.) <p> [% IF success %] <a href="http://[% params.bucket %].s3.amazonaws.com/[% params.key %]"> Your new upload is probably here. Let's see if it displays already. <img src="http://[% params.bucket %].s3.amazonaws.com/[% params.key %]"> </a> [% END %] <p> You can now go back to <a href="/upload">uploading</a> or <a href="/">the main page</a>. </body> </html> |
通過一些複雜的 Template Toolkit IF-ELSE 結構和 result 參數，頁面可以處理成功的和不成功的上傳。成功上傳的關鍵在於添加了 SimpleDB；如果掌握了這點，那麼就能夠始終成功地將照片上傳到 S3。在 SimpleDB 故障時從 S3 取回照片留給讀者作為練習。
|
urluploaded.tmpl
該模板用於 URL 添加。
[% success = params.result %] <html> <head> <title>[% IF success %]Successful[% ELSE %]Unsuccessful[% END %] URL add Page For [% params.user %]</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> [% IF success %]Congratulations[% ELSE %]Sorry[% END %], [% params.user %]. You have [% IF success %]successfully[% ELSE %]unsuccessfully[% END %] added [% params.url %] named [% params.name %].<p> <p> [% IF success %] <a href="[% params.url %]"> The URL you added is, perhaps, visible here. <img src="[% params.url %]"> </a> [% END %] <p> You can now go back to <a href="/upload">uploading</a> or <a href="/">the main page</a>. </body> </html> |
[火星人 ] 功能豐富的 Perl: Perl 和 Amazon 雲，第 5 部分已經有452次圍觀
