2013年2月26日 星期二

[Django] Internationalization 國際化 〈 I 〉

Django 在 view 和 template 中對於國際化有完整的支持。

以下將概述如何在 view 和 template 中進行國際化〈在此以專案繁中化為例〉:

首先必須將 settings.py 中的 USE_I18N 設置為 True,並修改 LANGUAGE_CODE = 'zh_TW'。

接下來,將逐一介紹 view 和 template 國際化的方法。

[View]

  Django 所使用 Python 標準的翻譯器 ── gettext。在 views.py 中必須先加入 from django.utils.translation import gettext as _,如以一來將可使用 _ 取代 gettext。

接下來,請參考下列範例:

def homepage(request):
output = _("Welcome to my homepage.")

【也可使用 output = gettext("Welcome to my homepage.")
return HttpResponse(output)

上述範例也可改寫為:


def homepage(request):
sentence = "Welcome to my homepage."
output = _(sentence)
return HttpResponse(output)


如果遇上函式包含變數,可寫為:

def homepage(request, variable):
output = _('%(variable)s is a variable.') % {'variable': variable}
return HttpResponse(output)


[Template]

在 template 中進行國際化較為簡單,僅需在

template 的頂端放置 {% load i18n %}

並在需要國際化的部分改寫為 {% trans "Welcome my homepage" %}

如此一來將完成 view 和 template 的國際化。

2012年12月12日 星期三

[JavaScript] input type='text' 取值比大小

  今天在開發 javascript 的時候,發現從 HTML 取得的 input type='text' 值在進行「比大小」的時候會發生奇怪的錯誤。我們來看看下面範例:

<script type='text/javascript'>
    function form_check(){
        var a = example.input_value.value;
        var b = example.compare_value.value;

        if (a > b){alert("a is greater than b.");}
    }
</script>

<form name='example' ... onsubmit='return form_check();'>
    <input type='text' name='input_value' />
    <input type='text' name='compare_value' />
    <input type='submit' ... value='Submit' />

  如果今天在瀏覽器上輸入 a 跟 b 的值之後並點選 submit,此時 javascript function 會進行 a, b 值的比較;如果 a 大於 b,會跳出 a 大於 b 的訊息。

只不過,神奇的錯誤發生了!!!

1 ) 若輸入 a = 80, b = 50,則順利跳出 a 大於 b 的訊息

2 ) 若輸入 a = 100, b = 50,則不會跳出 a 大於 b 的訊息

  經過谷哥大神的開示,我發現,每次輸入 text 的直接為 string,並非我們所想像的 integer。因此, 函式 form_check 進行的比較是字串大小的比較,而非「數值」大小的比較。如果要進行數值大小的比較,必須進行下列的修正:


<script type='text/javascript'>
    function form_check(){
        var a = example.input_value.value;
        var b = example.compare_value.value;

        if (parseInt(a) > parseInt(b)){ alert("a is greater than b."); }
    }
</script>

如此一來,我們將順利比較輸入值的大小!

P.S. 如進行一般數值大小的比較,可使用 parseFloat( )。

2012年11月2日 星期五

[HTML 5] 兩種不同的 form SUBMIT

  話說 HTML 5 推廣一陣子囉!我還是只會使用舊有方法編輯 html 檔案。直到最近,公司的專案請外包廠商編寫 CSS + html,我才發現一個 form submit 可以有兩種不同寫法。

首先,介紹舊有寫法:

<form name="example" method="post (get)" action="form action">
    <!-- FORM 內容 -->
    <input type="submit" name="btn_name" value="Submit" />
</form>

最近學到的新方法:

<form id="example" method="post (get)" action="form action">
    <!-- FORM 內容 -->
</form>
<button type="submit" form="example">Submit</button>

有沒有發現什麼不一樣呢?

答案是 HTML 5 的 button 標籤可以寫在 from 的外頭,透過 button 標籤裡的 form 參數作為按鍵與表單的連結。請注意, button form 參數的值必須等同於表單的 id。

想更了解 <button> 如何使用嗎?請參考這裡

2012年11月1日 星期四

[Avria] Generation of update structure failed. UpdateLib delivers error 537 解決方法

  前幾天,外國友人急電,跟我說:「他的電腦無法自動更新防毒軟體 (Ariva)」,請我過去幫他看看。到了他家,看了更新失敗的 log 之後,發現是 Generation of update structure failed. UpdateLib delivers error 537 問題。上網查詢後,發現蠻多人有這樣的問題,當然解決方法也不少囉!

  發生 Generation of update structure failed. UpdateLib delivers error 537 問題的解決方法,請參考這裡。筆者所紀錄的,為此次解決問題的方法。

1. 先從這裡下載 Avira 離線更新工具

2. 解壓縮avira_fusebundlegen-win32-en.zip,開啟 avira_fusebundlegen-WIN32-EN 資料夾

3. 執行 fusebundle.exe 並等待一段時間,在 install 資料夾下產生 vdf_fusebundle.zip

4. 開啟 Ariva ,選擇【更新】→【手動更新】→【選擇 vdf_fusebundle.zip】

這裡有一項相當重要的部分要注意,如果您所安裝的作業系統為 Windows 64 位元,在執行 fusebundle.exe 時,必須在 fusebundle.conf 中增加一個參數 platform= win32

2012年10月21日 星期日

[JavaScript] 燈箱效果 ── Lytebox

  先前開發公司專案時,被要求使用類似「燈箱特效」顯示相關聯結的內容。藉由「燈箱」作為關鍵字搜尋,發現已有強者寫好的 JS 可利用,且大多數使用者推薦 lightbox2。使用 lightbox2 相當簡單,藉由下載官方網站整包檔案,解壓縮並加入專案,即可立即使用!只不過, lightbox2 僅可嵌入圖檔,無法嵌入網頁,所以不符合需求。

國父革命十一次才成功,一次的失敗不算什麼!在努力不懈搜尋之下,發現另一套 JS ── Lytebox 可嵌入網頁內容,這不就是符合我們所要的需求嗎?!在這兒,我將記錄如何安裝與使用 Lytebox,達到「燈箱」效果並嵌入靜態網頁。

2012年6月26日 星期二

[Django] Installing Django with Apache & mod_wsgi

Django 安裝及簡介 文章中曾介紹如何安裝 Django。

不過,若要將開發的網頁透過 domain 分享給世界各地的人欣賞,

則需要設定 apache 以達到這個目的。

下面將一步一步介紹如何在 apache 上安裝 Django:

PART 1 - Server 的部署

安裝 Apache 及 mod_wsgi
> sudo apt-get install apache2 libapache2-mod-wsgi

安裝 Django 請參考這裡

建立一資料夾儲存網站資料〈此為筆者存放位置,讀者可自行決定〉
> sudo mkdir /opt/www

PART 2 - 設定 domain name

> sudo vi /etc/hosts

並加入下列內容:

192.168.1.1 domainname 〈此為筆者之假設,請讀者自行決定〉

PART 3 - Django 測試

建立 Django 專案
> cd /opt/www
> sudo django-admin.py startproject helloworld

產生一個 wsgi 的檔案
> sudo mkdir /opt/www/helloworld/apache
> sudo vi /opt/www/helloworld/apache/django.wsgi

在 django.wsgi 檔案中編輯下列內容:

import os
import sys

path = '/opt/www'
if path not in sys.path:
    sys.path.insert(0, '/opt/www')

os.environ['DJANGO_SETTING_MODULE'] = 'helloworld.settings'

import django.core.handlers.wsgi
application = django.core.handlers.wsgi.WSGIHandler( )


修改 apache 設定
> sudo vi /etc/apache2/sites-available/default

於 default 檔案中‧‧‧

修改下列內容:

DocumentRoot /var/www -> /opt/www/helloworld

<Directory /var/www> -> <Directory /opt/www/helloworld>


增加下列內容:

WSGIScriptAlias / /opt/www/helloworld/apache/django.wsgi

啟動 site
> sudo a2ensite default
> sudo service apache2 reload


最後,打開網址,並輸入 http://domainname 就會看到 Django 安裝完成的畫面囉!

2012年6月14日 星期四

[OpenStack] 如何透過 dashboard import keypair?

在 OpenStack dashboard 中存在一項功能 ── import keypair。

But, how to import a keypiar via dashboard 一直困擾著我!囧

經由上網發問,總算得知正確的使用方式。

因此,藉由這裡記錄在 OpenStack dashboard import keypair 的方法。

首先,什麼是 keypair?下面是 OpenStack 初學者手冊中的定義。

You will also need to generate a keypair consisting of private key/public key to be able to launch instances on OpenStack. These keys are injected into the instances to make password-less SSH access to the instance. This depends on the way the necessary tools are bundled into the images.

接下來,將說明如何操作 import keypair。

STEP 1. 在主機上建立公鑰 (public key)
# ssh-keygen

建立過程中詢問之事項皆 Enter 帶過。

STEP 2. 進入 .ssh 資料夾
# cd .ssh

將會發現資料夾中存在 id_rsa 以及 id_rsa.pub 檔案。

STEP 3. 開啟公鑰
# cat ~/.ssh/id_rsa.pub

STEP 4. 複製工要內容,並貼入 dashboard 中 public key 欄位

恭喜你,順利完成 import keypair 的艱難任務! :D

參考資料:
1. OpenStack Compute Starter Guide -Essex