Google Cloud Platform 探索經驗 (5) - 將 Google Storage 中的檔案當網站

雖然 Google 有提供部落格 Blogger 可以使用，網路上也有教學將個人部落格改成公司網站使用，但畢竟是部落格的使用方式，在設計上難免會困難度較大。

所以 Google Cloud Platform 有另一個工具 - Storage 可以將寫好的網頁或檔案放在裡面(個人覺得類似於 Google 文件)，可以公開連結給需要的人，就變成像是網站的感覺。

接下來就將個人的經驗寫下來供參考

【網站檔案設定】
步驟一：當然要先有 Google Cloud Platform (以下簡稱 GCP)的權限
步驟二：到 GCP 的控制台，展開左邊 ≡ 符號，然後點選 Storage

步驟三：建立 BUKET (此 BUKET 的名稱要和你的網域名稱相同)
步驟四：點選剛才建立 BUKET ，然後將 首頁 和 錯誤頁 的網頁上傳

步驟五：在 BUKET 清單頁找到剛才建立的 BUKET 右邊會有一個 (三個黑點)的符號，點下去之後選擇 "編輯網站設定"，將首頁和錯誤頁設好

步驟六：此時點選 BUKET 下的 index.html 的 公開連結，就可以看到網站的首頁了，但是此時網址還是你 Google Storage 的樣子，所以接下來要到你的網域申請的網站上設定DNS對應到的網址。

【網域申請與設定】-這邊是以免費網域申請(https://my.freenom.com/)為範例

步驟一：進入官網後，找到 SERVICE 下的 Register a New Domain，將想要的網域名稱打進去之後，按下 Check Availability，確認看看是否可用和所需費用，選擇清單中想要的那一個，按下 Get it now，然後按下上面的 checkout 後，選擇要用的區間(既然有 12 個月免費可以選，哪有不選的道理)，選擇之後按下 Continue，在左下角填入你的 Email Address(這會用來確認並啟用)，並按下 Verify My Email Address，然後到你的信箱去點確認連結。

步驟二：點下確認信中的連結後，會要你填寫一些資料(好像全部都是必填)，然後勾選I have read and agree to the Terms & Conditions，然後按下 Complete Order，完成申請。

步驟三：完成申請後，要將 Google Storage 和 DNS 做連結，所以找到官網上的 Services 下的 My Domains，選擇剛才申請的 Domain 的 Manage Domain，再點選 Manage Freenom DNS 來設定關聯。

步驟四：先跳到 Google 的 Cloud Storage 文件(Hosting a Static Website)來看一下如何做確認，這邊說明要到你的DNS申請的地方做的設定，但設定前需要先做一下確認，所以先跳到Google 網站網理員中心，網頁告訴你驗證的方法。

步驟五：到Google 網站網理員中心 ，按下新增資源，輸入要驗證的網域後按下繼續

，選擇 其他方法 > 網域名稱供應商 > 其他，選擇下方的 新增 CNAME 紀錄

這是要填入步驟三中的設定，供確認用

步驟六：我們將【網域申請與設定】步驟一申請的那個網域填入上列相對資訊，按下 Save Change，

然後再回到步驟五的地方按下下方的"驗證"，(驗證可能不會馬上生效，需要幾分鐘時間後，才會生效)，如果驗證過了，表示你是該網域的擁有者。就會在你的資源清單中看到剛才的資源了

步驟七：開始瀏覽器，在網址列打上你設定的網域，就可以看到和 Google Storage 中一樣的網頁內容了 (如同【網站檔案設定】中的步驟六)

GridView 自訂分頁

一般 GridView 可以交給自動分頁產生出分頁效果，只需要將 GridView 的屬性 AllowPaging 設為 true，再搭配取得資料的語法，即可完成。
GridView 會依據資料筆數 和 GridView.PageCount 自動計算出頁數。

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GridView1.DataSource = GetData();
        GridView1.DataBind();
    }
}

private DataTable GetData()
{
    // 讀取資料
}

// 翻頁時改變 PageIndex 後重新綁定 GridView 的資料
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridView gridview = (GridView)sender;
    GridView.PageIndex = e.NewPageIndex;
    GridView.DataSource = GetData();
    GridView.DataBind();
}

因為GridView其實是將全部的資料都載入後，只顯示某一頁的資訊出來，所以當讀取的資料太多時就會造成載入的間很久。


此時可以使用自訂分頁的方式，自訂分頁除了要將 GridView 的屬性 AllowPaging 設為 true 之外，還要將 GridView 的屬性 AllowCustomPaging 設為 true，然後再在程式碼中指定 GridView.VirtualItemCount (虛擬 GridView 總共有幾筆資料)，然後 GridView 會依據 VirtualItemCount 和 GridView.PageCount 自動計算出頁數，具體做法大致如下：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // GridView.VirtualItemCount：虛擬 GridView 總共有幾筆資料
        GridView1.VirtualItemCount = GetAllDataCount();
        GridView1.DataSource = GetSpecPageData(0);
        GridView1.DataBind();
    }
}
private int GetAllDataCount()
{
    // 讀取全部資料的筆數
}

/// 只讀取指定頁的資料
private DataTable GetSpecPageData(int PageIndex)
{
    // 比方每頁要顯示 15 筆
    // 讀取第一頁要顯示的資料，那就只讀取 TOP 15
    // 或是若要讀取第三頁 31 到第 45 筆，則可以用 OFFSET 30 ROWS FETCH NEXT 15 ROWS ONLY
    // 意思是是位移 30 筆之後，再往下取 15 筆資料
   請參考MIS2000 Lab
}

翻頁時改變 PageIndex 後重新綁定 GridView 的資料
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridView gridview = (GridView)sender;
    GridView.PageIndex = e.NewPageIndex;
    GridView.DataSource = GetSpecPageData(e.NewPageIndex);
    GridView.DataBind();
}

此時遇到的題目是 GridView 的每頁筆數不一致(比方某個欄位要固定只顯示幾種資料)，所以除了上述的寫法之外，還要加上一點點修正，如下：

加上一個全域變數，用以儲存每頁的筆數資訊
Dictionary<int, int> dictCountPerPage;

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        dictPerPageCount = GetPerPageCount();
        GridView1.PageCount = dictPerPageCount[0];  // 指定第一頁的筆數

        // GridView.VirtualItemCount：計算虛擬 GridView 總共有幾筆資料(因為每頁筆數不一，所以以要顯示的該頁的筆數當基準，用以計算出虛擬總筆數，好產生頁數(碼)
        GridView1.VirtualItemCount = GridView1.PageCount * dictPerPageCount.Count;
        GridView1.DataSource = GetSpecPageData(0);
        GridView1.DataBind();
    }
}

/// 依需求記錄每頁要顯示的資料筆數
/// Key: 頁碼, Value: 每頁到第幾筆資料
private Dictionary<int, int> GetPerPageCount()
{
    // 讀取全部每頁的資料的筆數
    // 例如：
    // Dictionary<int, int> dict = new Dictionary<int, int>();
    // dict.Add(0, 10); // 第 1 頁: 0~10 筆
    // dict.Add(1, 16); // 第 2 頁: 11~16 筆    // dict.Add(2, 18); // 第 3 頁: 17~18 筆
    // dict.Add(3, 22); // 第 4 頁: 19~22 筆
    // Session.Add("PerPageCount", dictPerPageCount); 將分頁資訊記錄在 Session

    // return dict;
}

/// 只讀取指定頁的資料
private DataTable GetSpecPageData(int PageIndex)
{
    // 比方每頁要顯示 15 筆
    // 讀取第一頁要顯示的資料，那就只讀取 TOP 15
    // 或是若要讀取第三頁 31 到第 45 筆，則可以用 OFFSET 30 ROWS FETCH NEXT 15 ROWS ONLY
    // 意思是是位移 30 筆之後，再往下取 15 筆資料
    請參考MIS2000 Lab
    // SQL 語法：
   StringBuilder SQL = new StringBuilder("...");
    SQL.Append(" ORDER BY 1, 2, 3, 4");

    // 取回第幾筆~第幾筆資料
    if (CurrentPage == 0)
        SQL.AppendFormat(" OFFSET {0} ROWS FETCH NEXT {1} ROWS ONLY", 0, dicRowCountPerPage[CurrentPage]);
    else
        SQL.AppendFormat(" OFFSET {0} ROWS FETCH NEXT {1} ROWS ONLY", dictCountPerPage[PageIndex- 1], dictCountPerPage[PageIndex] - dictCountPerPage[PageIndex- 1]);

    // 每次都重新指定 PageCount 和 VirtualItemCount
    if (PageIndex== 0)
        GridView1.PageSize = dictCountPerPage[PageIndex];
    else
        GridView1.PageSize = dictCountPerPage[PageIndex] - dictCountPerPage[PageIndex - 1];

    GridView1.VirtualItemCount = GridView1.PageSize * dictCountPerPage.Count;

}

/// 翻頁時改變 PageIndex 後重新綁定 GridView 的資料
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridView gridview = (GridView)sender;
    GridView.PageIndex = e.NewPageIndex;
    if (dictCountPerPage == null)
        dictCountPerPage = (Dictionary<int, int>)Session["PerPageCount"];
    GridView.DataSource = GetSpecPageData(e.NewPageIndex);
    GridView.DataBind();
}