=x= 🌵 Home 前台頁面 - 新聞圖卡後端功能製作。

Home 頁面資料介紹 :

📌 Home 頁面新聞圖卡內容 :

1. 依客戶發文頻率來決定取得時間範圍內 3 則最新新聞。

2. TOP 新聞的排序會最優先。

3. 依 TOP 新聞加入標籤。

Home 新聞圖卡內容後端實作 :

1. 新聞圖卡使用 asp 控制項來送內容，細節參考如下 :

a. 紅色區塊 : 使用 Image 控制項，來控制 TOP 標籤切換顯示。

b. 綠色區塊 : 使用 Literal 控制項，來送新聞縮圖 HTML 內容。

• 👺 如果直接使用 Image 控制項，客戶上傳圖片名稱如果有中文 .ImageUrl 會將中文轉碼導致無法正確取得圖片位置。

c. 藍色區塊 : 使用 Label 控制項，來送新聞日期標題文字內容。

d. 紫色區塊 : 使用 HyperLink 控制項，來送新聞簡介文字內容及超連接網址。

• 🌵 記得分別設定 3 組新聞圖卡共 12 個控制項。

2. 後端 index.aspx.cs 的 Page_Load 事件加入 loadNews(); 方法

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {
        loadBanner();
        loadNews();
    }
}

3. 建立讀取新聞圖卡內容 loadNews(); 方法

private void loadNews()
{
    //設定首頁 3 筆新聞的時間範圍
    DateTime nowTime = DateTime.Now;
    string nowDate = nowTime.ToString("yyyy-MM-dd");
    int startDate = -1;
    DateTime limitTime = nowTime.AddMonths(startDate);
    string limitDate = limitTime.ToString("yyyy-MM-dd");

    //計算設定的時間範圍內新聞數量
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "SELECT COUNT(id) FROM News WHERE dateTitle >= @limitDate AND dateTitle <= @nowDate";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@nowDate", nowDate);
    command.Parameters.AddWithValue("@limitDate", limitDate);
    connection.Open();
    //用 ExecuteScalar() 來算數量
    int newsNum = Convert.ToInt32(command.ExecuteScalar());
    //時間範圍設定持續往前 1 個月，直到取出新聞數量超過 3 筆
    while (newsNum < 3) {
        startDate--;
        limitTime = nowTime.AddDays(startDate);
        limitDate = limitTime.ToString("yyyy-MM-dd");
        SqlCommand command2 = new SqlCommand(sql, connection);
        command2.Parameters.AddWithValue("@nowDate", nowDate);
        command2.Parameters.AddWithValue("@limitDate", limitDate);
        newsNum = Convert.ToInt32(command2.ExecuteScalar());
    }
    connection.Close();

    //取出時間範圍內首 3 筆新聞，且 TOP 會放在取出項的最前面
    connection.Open();
    string sql2 = "SELECT TOP 3 * FROM News WHERE dateTitle >= @limitDate AND dateTitle <= @nowDate ORDER BY isTop DESC, dateTitle DESC";
    SqlCommand command3 = new SqlCommand(sql2, connection);
    command3.Parameters.AddWithValue("@nowDate", nowDate);
    command3.Parameters.AddWithValue("@limitDate", limitDate);
    SqlDataReader reader = command3.ExecuteReader();
    int count = 1; //第幾筆新聞
    while (reader.Read()) {
        string isTopStr = reader["isTop"].ToString();
        string guidStr = reader["guid"].ToString();
        if (count == 1) {
            //渲染第1筆新聞圖卡
            string newsImg = reader["thumbnailPath"].ToString();
            LiteralNewsImg1.Text = $"<img id='thumbnail_Image1' src='upload/Images/{newsImg}' style='border-width: 0px;' />";
            DateTime dateTimeTitle = DateTime.Parse(reader["dateTitle"].ToString());
            LabNewsDate1.Text = dateTimeTitle.ToString("yyyy/M/d");
            HLinkNews1.Text = reader["headline"].ToString();
            HLinkNews1.NavigateUrl = $"new_view.aspx?id={guidStr}";
            if (isTopStr.Equals("True")) {
                ImgIsTop1.Visible = true;
            }
        }
        else if (count == 2) {
            //渲染第2筆新聞圖卡
            string newsImg = reader["thumbnailPath"].ToString();
            LiteralNewsImg2.Text = $"<img id='thumbnail_Image2' src='upload/Images/{newsImg}' style='border-width: 0px;' />";
            DateTime dateTimeTitle = DateTime.Parse(reader["dateTitle"].ToString());
            LabNewsDate2.Text = dateTimeTitle.ToString("yyyy/M/d");
            HLinkNews2.Text = reader["headline"].ToString();
            HLinkNews2.NavigateUrl = $"new_view.aspx?id={guidStr}";
            if (isTopStr.Equals("True")) {
                ImgIsTop2.Visible = true;
            }
        }
        else if (count == 3) {
            //渲染第3筆新聞圖卡
            string newsImg = reader["thumbnailPath"].ToString();
            LiteralNewsImg3.Text = $"<img id='thumbnail_Image3' src='upload/Images/{newsImg}' style='border-width: 0px;' />";
            DateTime dateTimeTitle = DateTime.Parse(reader["dateTitle"].ToString());
            LabNewsDate3.Text = dateTimeTitle.ToString("yyyy/M/d");
            HLinkNews3.Text = reader["headline"].ToString();
            HLinkNews3.NavigateUrl = $"new_view.aspx?id={guidStr}";
            if (isTopStr.Equals("True")) {
                ImgIsTop3.Visible = true;
            }
        }
        else break; //超過3筆後停止
        count++;
    }
    connection.Close();
}

• 🌵 記得取到 3 組新聞圖卡資料後就可以用 break 停止迴圈。

4. 模擬頁面檢查是否正確呈現，完成~

本日總結 :

📢 一開始寫的時候沒有限制時間範圍，這樣會因為 Top 會排前面，導致最前面的 3 篇新聞會出現很舊但卻標註為 TOP 的新聞，後來就把時間起始範圍加入，這樣可以調整取出的新聞日期範圍，但這樣有可能會出現時間範圍內不足 3 筆新聞狀況，因此寫迴圈自動減去天數來計算新聞數量，考量使用網頁實際使用情形，往前的指標設定為月，只要取出的新聞不足，就會把時間範圍往前調 1 個月，直到取出的新聞有滿足 3 筆以上。

• 明日將介紹製作 Overview Manager 後台功能相關細節。