2018年3月31日 星期六

[CodeIgniter] CAPTCHA 輔助函式

在 CodeIgniter 要做圖形驗證,可以簡單使用 CAPTCHA 這個輔助函式。

首先像這樣載入。
  1. $this->load->helper('captcha');  

再做一下設定就可以用了。

  1. $vals = array(   
  2.         'word'          => 'Random word',   
  3.         'img_path'      => './captcha/',   
  4.         'img_url'       => 'http://example.com/captcha/',   
  5.         'font_path'     => './path/to/fonts/texb.ttf',   
  6.         'img_width'     => '150',   
  7.         'img_height'    => 30,   
  8.         'expiration'    => 7200,   
  9.         'word_length'   => 8,   
  10.         'font_size'     => 16,   
  11.         'img_id'        => 'Imageid',   
  12.         'pool'          => '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',   
  13.   
  14.         // White background and border, black text and red grid   
  15.         'colors'        => array(   
  16.                 'background' => array(255, 255, 255),   
  17.                 'border' => array(255, 255, 255),   
  18.                 'text' => array(0, 0, 0),   
  19.                 'grid' => array(255, 40, 40)   
  20.         )   
  21. );   
  22.   
  23. $cap = create_captcha($vals);   
  24. var_dump($cap );  

有幾點在設定時要注意。

驗證碼函式需要 GD 圖像函式庫。
只有 img_path 與 img_url 是必填的。
假設沒有填 **word**,函式會自動生成一個隨機的 ASCII 字串,當然你也可以從你自己準備的文字庫當中隨機挑選。
如果你沒有標明字型檔的路徑,將會使用醜醜的預設字型。
“captcha” 資料夾必須是可以寫入的。
expiration (以秒數計) 標明出驗證碼圖示過多久之後會被刪除,預設是兩小時。
word_length 預設為 8,**pool** 預設為 ‘0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ’。
font_size 預設為 16,GD 字型有大小限制。如果要使用更大的字體請選用其他字型。
img_id 將是驗證碼圖示的 id。
如果任一 colors 內的值不見了,將會以預設值代替。

再來可以利用 session 儲存驗證碼,減少資料庫的負擔。
  1. $this->session->unset_userdata('captchaCode');   
  2. $this->session->set_userdata('captchaCode',$captcha['word']);  




參考:
CAPTCHA 輔助函式
How to Implement Captcha in CodeIgniter using Captcha Helper
Read more

2018年3月29日 星期四

[NXEDGE STYLE] 天元突破グレンラガン

P1160714

NXEDGE STYLE 這回跳過了一般型態的グレンラガン,直接推出天元突破グレンラガン,雖然是很開心,但不知道有沒有機會把之前的幾個型態也出一出。

P1160703
P1160704

正面背面,那個火的零件裝起來也很棒。

P1160705
P1160706

可動性沒什麼問題。

P1160707
P1160708
P1160709

拿刀還滿帥的。

P1160710
P1160711
P1160713

P1160714


P1160715
P1160716


鑽頭來啦~
P1160717
P1160718
P1160719
P1160720
P1160722


用鑽頭突破一切吧!

P1160723

RobotInfo 上的介紹
Read more

[CodeIgniter] 使用 mailgun 寄信

之前提過用 gmail 寄信,但最近一個專案發現有些公司會擋 google 寄出去的信,所以就被推薦用 mailgun 來寄信。

總之先申請個帳號吧。

申請完帳號後,就可以設定要寄信的 domain。



接著去 DNS 設定那邊把他要你填的值帶進去。


如果是使用 CodeIgniter 的話,再到 config/email.php 設定就好
  1. $config['useragent']        = 'PHPMailer';            
  2. $config['protocol']         = 'smtp';       
  3. $config['mailpath']         = '/usr/sbin/sendmail';   
  4. $config['smtp_host']        = 'ssl://smtp.mailgun.org';   
  5. $config['smtp_user']        = '[email protected]';   
  6. $config['smtp_pass']        = 'mailgun Password';   
  7. $config['smtp_port']        = 465;  

mailgun 免費一個月就可以處理很多信件了,如果需要更大量的話,可以參考他們的付費方案,用過的經驗是他們可以寄到 gmail 沒辦法寄到的信箱去,對於一個專門做這個服務的公司來說,是還滿值得信賴的。
Read more

[CodeIgniter] 使用 reCAPTCHA 驗證(包含 AJAX) 教學



如果要在網站上加裝防機器人的機制,google 提供的這個 reCAPTCHA 是一個很方便的套件,如果有投票、留言板之類的功能怕被灌票的話,可以透過裝上這個來防治。

1. 申請認證

要使用的話首先要到 google reCAPTCHA 去申請一個帳號,簡單填一下網域跟管理員 email 就好了。



接下來會拿到像這樣一組 key


接下來在你要做認證的網頁上貼上兩組 html,第二行那個是要貼在你要認證的表單 form 標籤內。


這樣就會自動產生認證的區塊了。

2. 使用 CodeIgniter

前端設置好了之後,介紹後端驗證的部分,這邊用 CodeIgniter 來介紹,首先可以先去下載 CodeIgniter-reCAPTCHA 這個套件。



在 config/recaptcha.php 填入申請到的 key
  1. $config['recaptcha_site_key'] = '';   
  2. $config['recaptcha_secret_key'] = '';  

使用
  1. $this->load->library('recaptcha');  

如果是 form post 的話,直接這樣就可以接到值並做驗證了。
  1. $recaptcha = $this->input->post('g-recaptcha-response');   
  2. $response = $this->recaptcha->verifyResponse($recaptcha);   
  3.   
  4. if (isset($response['success']) and $response['success'] === true) {   
  5.     echo "You got it!";   
  6. }  

3. AJAX 驗證

如果要使用 AJAX 的話,讀 api 要變成這樣寫。
  1. <script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onReCaptchaLoad"></script>  

要生成驗證碼的地方取一個 id
  1. <div id="myCaptcha"></div>  

接下來就可以一下面的程式碼接到回傳值
  1. var captchaWidgetId;   
  2. var onReCaptchaLoad = function() {   
  3.   
  4.             captchaWidgetId = grecaptcha.render( 'myCaptcha', {   
  5.                 'sitekey' : 'your_site_key',  // required   
  6.                 'theme' : 'light',  // optional   
  7.                 'callback''verifyCallback'  // optional   
  8.             });   
  9. };   
  10.   
  11. var verifyCallback = function( recaptcha ) {   
  12.     //接到回傳值   
  13.   
  14. };  


在其他地方要拿到 reCAPTCHA 的值的話用這個方法
  1. var recaptcha = grecaptcha.getResponse(captchaWidgetId);  

然後就可以用 AJAX 傳到 server 後再處理了。


參考:
google reCAPTCHA
CodeIgniter-reCAPTCHA
Google reCAPTCHA v2.0 on a Dynamic Page
Read more

2018年3月28日 星期三

2018年3月27日 星期二

2018年3月26日 星期一

2018年3月25日 星期日

整理 Pokémon 資訊的 Pokémon-Info

Pokemon-Info

網站連結: Pokémon-Info

其實在申請 wingzero.tw 這個網域的時候就想做一個 Pokémon 圖鑑的網站,當時應該算是 Pokémon 的低點吧? 網路上能搜尋到的都是一些老舊的有愛的粉絲做的東西,但真的也是因為做了制服地圖加上其他事情的繁忙,所以一直沒時間做。

這兩年則是因為 Pokémon GO 走紅的關係,Pokémon 又再次回到大家會討論的話題,但還是因為很忙碌還是沒時間去做這個網站,但覺得再這樣下去不行,所以這幾個月來就陸續抽一些時間,終於把最初步想做的上線了。

Pokemon-Info
Pokemon-Info

目前就是把 Pokédex 的部分完成,包含了本傳還有 Pokémon GO 的基本資料,收錄到第三世代,之後再看繼續抽時間完成我想做的東西。

Read more

2018年3月24日 星期六

2018年3月23日 星期五

2018年3月22日 星期四

2018年3月21日 星期三

[php] 使用 mb_split 將多行資料分割存到資料庫

最近寫到一個功能,是要把網頁輸入時一行一行的資料傳到後台後直接分割後存到資料庫,查了一下可以用 mb_split 這個方法。

官方的說法是 mb_split ( 切割規則正規表示 , 要切割的字串 , 切割數量限制 ); 切完會變成陣列,但正規式不熟沒關係,要把輸入的分行分開就用 /n 就好了,所以會變成這樣寫。

  1. $email=$this->input->post('email');   
  2. $email=mb_split("\n",$email);  

Read more

2018年3月20日 星期二

我要當女一

我要當女一

最近完成的一個活動網站,跟選秀節目配合,因為這次活動要兩岸都能看到,很開心的自己的網域對岸也能看到,於是就直接用來當官網了。

我要當女一

這次從設計到接完程式大概花一個禮拜的時間上線,包含 RWD,只是剛上線的時候本來是用 IP 位置投票,但問題太多又緊急改成用 email 認證的方式,活動剛上線也請大家多多支持囉。

我要當女一

這次還有做多語系,簡中跟繁中看到的內容會不大一樣,還有嵌入兩種留言板可以切換。



我要當女一
Read more

2018年3月19日 星期一

2018年3月17日 星期六

2018年3月16日 星期五

2018年3月15日 星期四

2018年3月14日 星期三

2018年3月13日 星期二

2018年3月11日 星期日

2018年3月10日 星期六

2018年3月9日 星期五

2018年3月7日 星期三

2018年3月6日 星期二

讓網頁區塊的捲軸在 iOS 裡也有跟整個頁面一樣的回饋效果

在 iOS 裡卷動網頁,相信大家都有經驗是在往上或往下捲超過頁面時,會有一個可以拉超過頁面後「彈」回來的效果,這個是一個很好的 UX 回饋,但僅止於網頁整體,若想要在頁面裡某個區塊裡就不會有這個效果,還好 iOS 內建的瀏覽器可以設定 CSS 後就可以直接支援這個效果,只要使用

-webkit-overflow-scrolling: touch;

就可以了,但記得也要讓你的區塊是可以捲動的。

overflow-y: scroll;

可以用 iOS 的手機開啟這個頁面,捲動下面兩個區塊比較看看。

See the Pen Overflow Scrolling on iOS by Chris Coyier (@chriscoyier) on CodePen.

Read more

2018年3月4日 星期日

[php] 計算兩個時間經過的天數

如果想要計算兩個時間相隔有多久,比如要知道在某年某月某個人幾歲,或是計算離某一個事件有幾天,在 php 有一個方便的方法就是使用 diff 或 date_diff 這一類的 function。

  1. $start  = date_create('1988-08-10');   
  2. $end    = date_create(); // 目前日期   
  3. $diff   = date_diff( $start$end );   
  4.   
  5. echo '經過時間為 ';   
  6. echo  $diff->y . ' 年, ';   
  7. echo  $diff->m . ' 月, ';   
  8. echo  $diff->d . ' 日, ';   
  9. echo  $diff->h . ' 小時, ';   
  10. echo  $diff->i . ' 分鐘, ';   
  11. echo  $diff->s . ' 秒';   
  12.   
  13. echo 經過天數 : ' . $diff->days;  

使用 DateTime Object
  1. $start = new DateTime('1988-08-10');   
  2. $end   = new DateTime(); // 目前時間   
  3. $diff  = $start->diff($end);   
  4.   
  5. echo 'The difference is ';   
  6. echo  $diff->y . ' 年, ';   
  7. echo  $diff->m . ' 月, ';   
  8. echo  $diff->d . ' 日, ';   
  9. echo  $diff->h . ' 小時, ';   
  10. echo  $diff->i . ' 分鐘, ';   
  11. echo  $diff->s . ' 秒';   
  12.   
  13. echo '經過天數 : ' . $diff->days;  

基本上就是丟入兩個時間,再看要輸出哪些數值就好。

參考文章: How to Calculate Date and Time Difference in PHP – The Easiest Way
Read more

2018年3月3日 星期六

2018年3月2日 星期五

facebook 分享帶 hashtag

想要宣傳活動,有很多朋友都會利用 fb 的分享功能,而要在網站上做這個功能也很簡單,只要改一下以下這個網址
https://www.facebook.com/sharer/sharer.php?u=url

把 url 的部分改成你要分享的網址就好,而且還可以在後面加個 &hashtag=%23你要分享的hashtag,就可以把 hashtag 也帶到你的分享對話框裡了。

比如透過這個連結分享制服地圖到 fb,就會看到以下的畫面。



這樣分享的時候還可以自帶 hashtag,是不是很方便呢。
Read more

2018年3月1日 星期四

Related Posts Plugin for WordPress, Blogger...