分類: 程式設計

讓您一目瞭解網頁切版的firefox插件tilt3D

許多時候看到不錯的網頁，都會想看看它的DIV如何設定，意外的發現一個蠻炫的firefox插件tilt。

安裝完成後，點選網頁開發者→Tilt時，網頁就會透過WebGL的技術呈現3D的頁面。

它的原理則是透過DIV的切版來做顯示，對於研究DIV會有”些許”幫助（不過酷炫還是佔大部份原因）

tilt2 tilt tilt1

php json_encode亂碼問題

php很簡單的用json_encode就可以回傳json格式了！

不過遇到中文會有亂碼問題，解決方式很簡單在json_encode之前先做urlencode，json_encode之後做urldecode。

範例：

[php]
While ($row=mysql_fetch_array($result1)){
$stores[] = array("NAME" => urlencode($row["STORE_NAME"]),
"TEL" => urlencode($row["STORE_TEL"]))
}
echo urldecode(json_encode($stores));
[/php]

form加上enctype=multipart/form-data作用

在設計表單時，如果內容有檔案時，我們都會在上面加上enctype=”multipart/form-data”。其實form的enctype有三種

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

預設的狀況下都是以application/x-www-form-urlencoded為主，會將資料做編碼傳送(空白以+代替，而特殊字元則傳成ASCII HEX。而multipart/form-data則是不做任何編碼，如果需要上傳文件時，就要使用它；text/plan則是僅將空白以+代替，常見於電子郵件表單。

 

 

延伸閱讀：

http://www.w3.org/TR/html401/interact/forms.html

JQuery Cycle Plugin顯示頁數

可以在after加上以下的代碼就可以了

[javascript]

$(function() {

$('#slideshow').cycle({

fx:      'scrollHorz',

timeout:  2000,

prev:    '#prev',

next:    '#next',

pager:   '#nav',

after:     onAfter

});

});


function onAfter(curr,next,opts) {

	var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;

	$('#counter').html(caption);

}

[/javascript]

筆記-自己常用的PHP Opensource框架或元件

Yii
http://www.yiiframework.com/

CodeIgniter
http://ellislab.com/codeigniter
http://www.codeigniter.org.tw/

資料庫(adodb)
http://adodb.sourceforge.net/

模板引擎(SMARTY)
http://www.smarty.net/

電子郵件(PHPMailer)
http://phpmailer.worxware.com/

MobileDetect
http://mobiledetect.net/

Captcha Genie
http://www.captchagenie.com/

QrCode
http://phpqrcode.sourceforge.net/

有趣的PHP Session機制

網站為了擔心Cross-site Request Forgery(CSRF/XSRF)攻擊，所以在增加csrf-token的session，在執行時判斷網頁的csrf-token值跟session是不是一樣。

不過發現即使設定gc_maxlifetime，仍會有可能出現應該過期的session還在的問題，這才發現原來php沒有一個daemon定時掃描過期的session，而是透過session.gc_probability/session.gc_divisor的設定來決定是否啟動Garbage Collector機制的機率。

解決的方式有幾種：
1.提高session.gc_probability/session.gc_divisor的機率，不過會造成系統的性能降低。

2.如果有更動gc_maxlifetime的話，也要跟著更動session.save_path，或者使用session_save_path()

自己使用了另一個方式，增加了csrf-time，自己檢查過期的話就unset Session。

網站中增加Line分享按鈕，將網頁資訊分享給朋友

在台灣智慧型手機的APP使用率，前幾名排行除了 Facebook外，接下來應該就是 Line了！最近在幾個網站上看到Line分享的按鈕，原來是官方網站去年老早就推出的機制。

首先進到 Line for Media Operators ( 日文 / 英文 ) 的網站。

上面有一個installation on Smartphone Website，可以透過點選的方式就增加按鈕。

line_share_button

如果您要自己設定的話，也有文件可以參考，目前格式有二種

http://line.naver.jp/R/msg/<CONTENT TYPE>/?<CONTENT KEY>

line://msg/<CONTENT TYPE>/<CONTENT KEY>

如果您要傳送圖片的話，得選第二種(它的CONTENT TYPE多了 IMAGE)。

範例的話是傳送 LINE it! http://line.naver.jp/

一般的website

<a href=”http://line.naver.jp/R/msg/text/?LINE%20it%21%0d%0ahttp%3a%2f%2fline%2enaver%2ejp%2f“><img src=”[圖片的網址]” width=”[圖片的寬度]” height=”[圖片的高度]” alt=”LINE分享！” /></a>

它也很貼心的特別準備給適用架設wordpress的程式碼

<a href=”http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>”><img src=”[圖片的網址]” width=”[圖片的寬度]” height=”[圖片的高度]” alt=”LINE分享！” /></a>

那要注意的是，您的網站要是手機版的才行唷~可以透過檢查，或是如果是Wordpress用戶的話，可以安裝Post Layout的外掛，然後 Enable mobile user agents detection，接著在想放的位置放上程式碼就行了！

line_share_post_layout

那至於如何設定按鈕呢～在網頁的最後有設置的參考頁面，或是可以按這裡下載官方的按鈕。

line_share_button_images

最後我們看一下成果，在進入網頁出現用LINE分享給朋友看~

993308_10151450281461541_361881484_n

接著可以選擇要傳送給那些朋友或是群組，或按下面的傳送到主頁貼在自己的動態消息

1013846_10151450277861541_1931992677_n

1013714_10151450277831541_567113956_n

延伸閱讀：

Line按鈕圖片分享包 http://media.line.naver.jp/img/linebutton.zip

SMARTY模板中CSS及JavaScript問題

SMARTY算是歷史久遠且強大的template engine(模板引擎)，不過最常遇到的問題就是SMARTY引擎將{} 大括號區塊中視為它的解析語法。因此與CSS及JavaScript語法產生衝突，解決的方式有以下幾種：

1.使用{literal} {/literal}

在CSS或JavaScript語法區塊前後加上{literal} {/literal}，Smarty 就不會進行解析，不過注意的是裡面就不能再增加任何變數囉。

[php]
{literal}

<style type="text/css"><!– body {
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}

–></style>{/literal}
[/php]

2.利用 {ldelim} {rdelim} 取代左右大括號

[php]
<style type="text/css"><!–
body {ldelim}
padding-bottom: 40px;
{rdelim}
.sidebar-nav {ldelim}
padding: 9px 0;
{rdelim}
–></style>
[/php]

3.重新定義delimiters

[php]
<?php
$smarty->left_delimiter = ‘<!–{‘;
$smarty->right_delimiter = ‘}–>’;
?>
[/php]

4.獨立成檔案

[html]
<link id="bs-css" href="css/base.css" rel="stylesheet">
<script src="js/base.js"></script>
[/html]

這樣一來就可以讓SMARTY與CSS/JavaScript和平共存！

寫PHP的一些安全性問題

怕自己忘記，隨手筆記一下：

．php.ini 中的 register_globals = off;

如果不能改變php.ini的話，可以利用下面的code

[php]
if(ini_get(‘register_globals’)){
foreach($GLOBALS as $key=>$val){
if(!in_array($key,array(‘GLOBALS’,’_POST’,’_GET’,’_COOKIE’,’_SERVER’,’_FILES’,’wind_in’))){
${$key}=”;
}
}
}
[/php]

或是

[php]
if ((isset($_REQUEST[‘GLOBALS’])

OR isset($_FILES[‘GLOBALS’]))

AND ini_get(‘register_globals’)) {

die(globals overwrite attempted.);

}
[/php]

．error_reporting(0);

．防止上傳的檔案執行，在http.conf加上
[php]
<Directory "/home/www/upload">
AllowOverride None
php_flag engine off
Allow from all
</Directory>
[/php]
或是在上傳的目錄下增加 .htaccess
[php]
RemoveHandler .php .phtml .php3
RemoveType .php .phtml .php3
php_flag engine off
[/php]
 

1. SQL 注入攻擊 (SQL injection attack)
mysql_real_escape_string
2. 操縱 GET 的值 (manipulating GET variables)
is_numeric 、 regular expression(ereg(“^[0-9]+$”)
3. 緩衝器溢位攻擊 (buffer overflow attack)
前端 maxlength 、strlen 、 substr
4. 跨站腳本攻擊 (cross-site scripting)
strip_tags 、 htmlspecialchars
5. 操縱瀏覽器內的資料 (manipulating data inside the browser)
假設Tamper Data
6. 遠程表格遞交 (remote form posting)
random token(md5、uniqid、rand)