=x= 🌵 建立 Company Manager - Content Page 後台頁面功能。

COMPANY 前台頁面分析 :

📌 原本專案規畫此頁應該是靜態網頁，其實不用針對此頁面做後台功能，但因為看到 Yachts 頁面跟 NEWS 頁面太難，不知道怎麼開始，而且部分功能可以在此頁先練習，因此就決定先拿這個頁面練習會用到的功能，也就是前兩天介紹的文字編輯器及相簿管理功能。

• About Us 頁面內容，因為圖文為文繞圖的效果，無明確區隔。

• Certificat 頁面內容分為 : 文字區、直式並排圖片區、橫式並排圖片區，有明確區隔。

Company Manager - Content Page 後台頁面功能介紹 :

1. About Us 頁面 : 用 Day 10 提到的 WYSIWYG 文字編輯器。
2. Certificat 頁面 - 文字區 : 用 TextBox 控制項。
3. Certificat 頁面 - 直式並排圖片區 : 用 Day 11 提到的相簿管理方式。
4. Certificat 頁面 - 橫式並排圖片區 : 用 Day 11 提到的相簿管理方式。

Company Manager - Content Page 後台頁面實作 :

1. 建立 Company Manager 後台頁面用資料表如下

• 👀 兩個圖片 JSON 資料欄預設值參考 Day 11 文章設為('[]')。

2. 於 .aspx 頁面加入 CKEditorControl 相關控制項，用於 About Us 頁面，參考如下

<h6>Content :</h6>
<CKEditor:CKEditorControl ID="CKEditorControl1" runat="server" BasePath="/Scripts/ckeditor/"
    Toolbar="Bold|Italic|Underline|Strike|Subscript|Superscript|-|RemoveFormat
        NumberedList|BulletedList|-|Outdent|Indent|-|JustifyLeft|JustifyCenter|JustifyRight|JustifyBlock|-|BidiLtr|BidiRtl
        /
        Styles|Format|Font|FontSize
        TextColor|BGColor
        Link|Image"
    Height="400px">
</CKEditor:CKEditorControl>
<asp:Label ID="UploadAboutUsLab" runat="server" Visible="False" ForeColor="#009933" class="d-flex justify-content-center"></asp:Label>
<asp:Button ID="UploadAboutUsBtn" runat="server" Text="Upload About Us Content" class="btn btn-outline-primary btn-block mt-3" OnClick="UploadAboutUsBtn_Click"/>

• 👀 請確認上方有無自動引入 Register，參考 Day 10 文章內容。

3. 於 .aspx 頁面加入 TextBox 相關控制項，用於 Certificat 頁面 - 文字區，參考如下

<h6>Content Text :</h6>
<asp:TextBox ID="certificatTbox" runat="server" type="text" class="form-control" placeholder="Enter certificat text" TextMode="MultiLine" Height="200px"></asp:TextBox>
<asp:Label ID="uploadCertificatLab" runat="server" Visible="False" ForeColor="#009933" class="d-flex justify-content-center"></asp:Label>
<asp:Button ID="uploadCertificatBtn" runat="server" Text="Upload Certificat Text" class="btn btn-outline-primary btn-block mt-3" OnClick="uploadCertificatBtn_Click"/>

4. 於 .aspx 頁面加入 FileUpload 相關控制項，用於 Certificat 頁面 - 直式並排圖片區，參考如下

<h6>Upload Vertical Group Image :</h6>
<div class="input-group my-3">
    <asp:FileUpload ID="imageUploadV" runat="server" class="btn btn-outline-primary btn-block" AllowMultiple="True" />
    <asp:Button ID="UploadVBtn" runat="server" Text="Upload" class="btn btn-primary" OnClick="UploadVBtn_Click" />
</div>
<h6>Vertical Image List :</h6>
<asp:RadioButtonList ID="RadioButtonListV" runat="server" class="my-3 mx-auto" AutoPostBack="True" OnSelectedIndexChanged="RadioButtonListV_SelectedIndexChanged" RepeatDirection="Horizontal" RepeatColumns="3" CellPadding="10"></asp:RadioButtonList>
<asp:Button ID="DelVImageBtn" runat="server" Text="Delete Image" type="button" class="btn btn-danger btn-sm" OnClientClick="return confirm('Are you sure you want to delete？')" Visible="False" OnClick="DelVImageBtn_Click" />

• 👀 參考 Day 11 文章內容。

5. 同上，於 .aspx 頁面加入 FileUpload 相關控制項，用於 Certificat 頁面 - 橫式並排圖片區。

6. 於 .aspx.cs 後置程式碼的全域及 Page_Load 事件加入以下程式碼

//宣告全域 List<T> 可用 Add 依序添加資料
private List<ImageNameV> saveNameListV = new List<ImageNameV>();
private List<ImageNameH> saveNameListH = new List<ImageNameH>();

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {
        ckfinderSetPath();
        loadCkeditorContent();
        loadCertificatContent();
        loadImageVList();
        loadImageHList();
    }
}

• 👀 ckfinderSetPath(); 方法內容請參考 Day 10 文章詳解。

• 👀 loadImageVList(); 及 loadImageHList(); 方法內容請參考 Day 11 文章詳解。

7. 建立 loadCkeditorContent(); 方法邏輯程式碼如下

private void loadCkeditorContent()
{
    //取得 About Us 頁面 HTML 資料
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "SELECT aboutUsHtml FROM Company WHERE id = 1";
    SqlCommand command = new SqlCommand(sql, connection);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
                //渲染畫面
        CKEditorControl1.Text = HttpUtility.HtmlDecode(reader["aboutUsHtml"].ToString());
    }
    connection.Close();
}

8. 建立 Upload About Us Content 事件邏輯程式碼如下

protected void UploadAboutUsBtn_Click(object sender, EventArgs e)
{
    //取得 CKEditorControl 的 HTML 內容
    string aboutUsHtmlStr = HttpUtility.HtmlEncode(CKEditorControl1.Text);
    //更新 About Us 頁面 HTML 資料
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "UPDATE Company SET aboutUsHtml = @aboutUsHtml WHERE id = 1";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@aboutUsHtml", aboutUsHtmlStr);
    connection.Open();
    command.ExecuteNonQuery();
    connection.Close();

    //渲染畫面提示
    DateTime nowtime = DateTime.Now;
    UploadAboutUsLab.Visible = true;
    UploadAboutUsLab.Text = "*Upload Success! - " + nowtime.ToString("G");
}

• 👺 使用 .HtmlEncode() 來避免錯誤或惡意使用。

9. 建立 loadCertificatContent(); 方法邏輯程式碼如下

private void loadCertificatContent()
{
    //取得 Certificat 頁文字說明資料
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "SELECT certificatContent FROM Company WHERE id = 1";
    SqlCommand command = new SqlCommand(sql, connection);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        //渲染畫面
        certificatTbox.Text = reader["certificatContent"].ToString();
    }
    connection.Close();
}

10. 建立 Upload About Us Content 事件邏輯程式碼如下

protected void uploadCertificatBtn_Click(object sender, EventArgs e)
{
    //更新 Certificat 頁文字說明資料
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "UPDATE Company SET certificatContent = @certificatContent WHERE id = 1";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@certificatContent", certificatTbox.Text);
    connection.Open();
    command.ExecuteNonQuery();
    connection.Close();

    //渲染畫面提示
    DateTime nowtime = DateTime.Now;
    uploadCertificatLab.Visible = true;
    uploadCertificatLab.Text = "*Upload Success! - " + nowtime.ToString("G");
}

11. 參考 Day 11 建立 Certificat 頁面 - 直式並排圖片區 邏輯程式碼。

12. 參考 Day 11 建立 Certificat 頁面 - 橫式並排圖片區 邏輯程式碼。

13. 模擬並測試功能是否正常，完成~

本日總結 :

📢 由於前兩日已練習過此頁要做到的功能，所以今天實作上相對輕鬆，可以注意到文字編輯器輸入的資料在 HTML 編碼的轉換，因為資料庫不接受不安全的文字內容，要特別做轉換才可以存入，所以取出時也要轉回來才能用，另外新增上傳時提示文字會增加上傳時間，用來提醒使用者重覆編修時要記得上傳。

• 明日將介紹製作 COMPANY - About Us 前台頁面後端相關細節。