php – 使用 Google Api 登入並取得個人資料

先介紹編碼,申請 API 方式緊接在後。

編碼

參考。這裡使用 composer 自動引入 google/apiclient 介紹。請按照 0 1 2 3 看流程喔!當然可以拆成多頁 PHP,就不用 if … elseif … 啦。

授權範圍可以這麼寫

或是使用這種寫法

 

 

安裝

參考,使用 Google API Client Libraries 提供的 PHP 版本套件登入,並使用 composer 下載

或是 Github 。此處範例以 composer 為介紹。

取得 ID 與 Secret

前往這裡,在左上角建立專案

輸入專案名稱

一開始平臺中沒有 API,所以我們選擇一個要使用的 API

我們挑選 Google+ API

 

然後啟用這項服務

 

啟用憑證

輸入需要的資料

選擇網路應用程式,並填寫重新導向的 URI。這非常重要,因為要告知 API 當認證完畢以後,要回到哪個網頁。下方介紹使用非框架的寫法,所以只有一張 test.php。

可以看到 ID 與密鑰

忘記的時候點選右邊的筆也能查看

申請文以後,就可以開始寫編碼

sass – scss – 管理複雜的 z-index 方法

當圖層一多起來,要管理 z-index 是很麻煩的一件事。但是可以透過這個方法來管理:

依照 z-index 的大小做順序排列

 

然後利用 SASS 的 index() 方法來自動取得 z-index

 

php – Codeigniter – Query Builder Class 快速檢視表

欄位

$this->db->get()
$this->db->get_compiled_select()
$this->db->get_where()

$this->db->select()
$this->db->select_max()
$this->db->select_min()
$this->db->select_avg()
$this->db->select_sum()

從哪個資料表

$this->db->from()
$this->db->join()

條件

$this->db->where()
$this->db->or_where()
$this->db->where_in()
$this->db->or_where_in()
$this->db->where_not_in()
$this->db->or_where_not_in()

$this->db->like()
$this->db->or_like()
$this->db->not_like()
$this->db->or_not_like()

$this->db->group_by()

$this->db->distinct()

$this->db->having()
$this->db->or_having()
$this->db->order_by()

數量

$this->db->limit()
$this->db->count_all_results()
$this->db->count_all()

分組

$this->db->group_start()
$this->db->or_group_start()
$this->db->not_group_start()
$this->db->or_not_group_start()
$this->db->group_end()

新增

$this->db->insert()
$this->db->get_compiled_insert()
$this->db->insert_batch()

修改

$this->db->replace()
$this->db->set()
$this->db->update()

$this->db->update_batch()
$this->db->get_compiled_update()

刪除

$this->db->delete()
$this->db->empty_table()
$this->db->truncate()
$this->db->get_compiled_delete()

緩存

$this->db->start_cache()
$this->db->stop_cache()
$this->db->flush_cache()

CSS – 進度條動畫設計

動畫部分建議使用 CSS 的效果會比較優異喔,以下實作範例給大家看。

HTML

jQuery

Style

將進度條的寬度設定為 0% ,然後總寬度的 100% 取決於上一層 DIV 的寬度。進度條的 100% 寬度會等於上一層 DIV 寬度的 50%。進度條的進度,交由 JS 賦予。

scss

compile 出來的 css

 

 

 

CSS – 使用 Google Fonts 的思源體的超簡單用法

在 head 中加入外部引用 CSS,並指定 font-family。

可以參考 Google 官方說明

我們可以看看線上範例: