Tích hợp thông tin thời tiết vào website P2

Như ở bài trước, chúng ta đã tìm hiểu được cách đọc dữ liệu thời tiết từ file xml của yahoo để xây dựng một tính năng xem thời tiết đơn giản. Ở bài này, chúng ta sẽ đi vào hoàn thiện chức năng xem thời tiết với lựa chọn cho nhiều thành phố, và hiển thị thêm hình ảnh mô tả...

Chúng ta xem lại cấu trúc project hiện tại của ví dụ trước.

- Để hoàn thiện project trên, và tiện tham khảo lại mã nguồn cũ, ta tạo thêm một file weatherAjax.aspx vào project, mã nguồn ở trang này sẽ như sau:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Thuy.vk's Blog | Tích hợp thông tin thời tiết vào website</title>
    <link href="css/StyleSheet.css" rel="stylesheet" />
    <script src="js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#htmlWeather').load('readXML.ashx?id=1252376');
        });
        function getWeather(value) {
            $('#htmlWeather').html('<img alt="loading..." src="img/ajax-loader.gif" />');
            $('#htmlWeather').load('readXML.ashx?id=' + value);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <select name="we_zone" id="we_zone" onchange="getWeather(this.value);">
            <option value="12800712">Hà Nội</option>
            <option value="1252431">TP HCM</option>
            <option value="1236690">Hải Phòng</option>
            <option value="1252662">Vinh</option>
            <option value="1252376" selected="selected">Đà Nẵng</option>
            <option value="1252522">Nha Trang</option>
            <option value="1229284">Bắc Giang</option>
        </select>
        <div id="htmlWeather">
            <img alt="loading..." src="img/ajax-loader.gif" />
        </div>
    </form>
</body>
</html>

- Như ta thấy ở trên, tôi đã thêm một select option các tỉnh thành phố, với mã thành phố lấy ở yahoo như bài trước đã hướng dẫn. Và thêm một hàm javascript getWeather để thay đổi thông tin thời tiết khi lựa chọn select option.

- Ở file readXML.ashx trong project hiện tại, vì cần phải lấy thêm thông tin hình ảnh mô tả và đọc dữ liệu xml theo tham số truyền vào, nên chúng ta sẽ phải chỉnh sửa lại một chút

public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        ///@source: http://weather.yahoo.com/vietnam/
        ///@author: thuyvk - 21/10/2013
        string LocationId = context.Request.QueryString["id"].ToString();
        XmlDocument xdoc = new XmlDocument();
        xdoc.Load("http://weather.yahooapis.com/forecastrss?w=" + LocationId + "&u=c");
        XmlNodeList xNodelst = xdoc.DocumentElement.SelectNodes("channel");
        string ContentHTML = "";
        foreach (XmlNode xNode in xNodelst)
        {
            ContentHTML += "<div class='weatherItems'><span class='spName'>Thành phố:</span><span class='spValue'><b style='text-transform:uppercase; color:Blue;'>" + xNode["yweather:location"].Attributes["city"].InnerText + "</b></span></div>";
            ContentHTML += "<div class='weatherItems'>" + getImageWeather(LocationId) + "<br/>" + xNode["item"].ChildNodes[5].Attributes["text"].InnerText + "</div>";
            ContentHTML += "<div class='weatherItems'><span class='spName'>Mặt trời:</span><span class='spValue'>Mọc - " + xNode["yweather:astronomy"].Attributes["sunrise"].InnerText + ", Lặn - " + xNode["yweather:astronomy"].Attributes["sunset"].InnerText + "</span></div>";
            ContentHTML += "<div class='weatherItems'><span class='spName'>Nhiệt độ:</span><span class='spValue'>" + xNode["yweather:wind"].Attributes["chill"].InnerText + "&nbsp;&deg;" + xNode["yweather:units"].Attributes["temperature"].InnerText + "</span></div>";
            ContentHTML += "<div class='weatherItems'><span class='spName'>Độ ẩm:</span><span class='spValue'>" + xNode["yweather:atmosphere"].Attributes["humidity"].InnerText + "%</span></div>";
            ContentHTML += "<div class='weatherItems'><span class='spName'>Gió:</span><span class='spValue'>" + getWindDirection(Convert.ToInt32(xNode["yweather:wind"].Attributes["direction"].InnerText)) + ",&nbsp;" + xNode["yweather:wind"].Attributes["speed"].InnerText + "&nbsp;" + xNode["yweather:units"].Attributes["speed"].InnerText + "</span></div>";
        }

        context.Response.Write(ContentHTML);
    }

Trong XML trả về của yahoo, hình ảnh mô tả thời tiết nằm trong một chuỗi html như sau:

<description>
<![CDATA[
<img src="http://l.yimg.com/a/i/us/we/52/20.gif"/><br /> <b>Current Conditions:</b><br /> Fog, 25 C<BR /> <BR /><b>Forecast:</b><BR /> Tue - Scattered Thunderstorms. High: 28 Low: 23<br /> Wed - Scattered Thunderstorms. High: 28 Low: 23<br /> Thu - Scattered Thunderstorms. High: 28 Low: 22<br /> Fri - Scattered Thunderstorms. High: 27 Low: 22<br /> Sat - Scattered Showers. High: 27 Low: 21<br /> <br /> <a href="http://us.rd.yahoo.com/dailynews/rss/weather/Da_Nang__VN/*http://weather.yahoo.com/forecast/VMXX0028_c.html">Full Forecast at Yahoo! Weather</a><BR/><BR/> (provided by <a href="http://www.weather.com" >The Weather Channel</a>)<br/>
]]>
</description>

Việc chúng ta cần làm là phải phân tích html để tách ra được img trong chuỗi trả về ở trên, chúng ta cần sử dụng thêm thư viện

using System.Text;
using System.Text.RegularExpressions;

Hàm phân tích xml và lấy hình ảnh sẽ như sau:

//Lấy hình ảnh
    private string getImageWeather(string locationId)
    {
        try
        {
            string ContentHTML = "";
            XmlDocument xdoc = new XmlDocument();
            xdoc.Load("http://weather.yahooapis.com/forecastrss?w=" + locationId + "&u=c");
            XmlNode xNode = xdoc.DocumentElement.SelectSingleNode("channel/item/description");
            string matchString = Regex.Match(xNode.InnerText, "<img.+?src=[\"'](.+?)[\"'].+?>", RegexOptions.IgnoreCase).Groups[1].Value;
            ContentHTML = "<img alt='thuyvk.com' src='" + matchString + "'/>";
            return ContentHTML;
        }
        catch
        {
            return null;
        }
    }

- Project của chúng ta sẽ như sau.

- Như vậy là đã xong, chúng ta hãy chạy thử project để xem kết quả

- Các bạn có thể download file mã nguồn đính kèm ở cuối bài viết để tiện tham khảo.

 

Download Source

Related Post


Tích hợp thông tin thời tiết vào website P1
Friday, October 18, 2013
Hiện nay có khá nhiều khách hàng có nhu cầu tích hợp thông tin thời tiết, giá vàng, ngoại tệ... vào website của mình. Và để thực hiện được việc này không khó, có khá nhiều kết quả tìm kiếm đưa ra để giải quyết vấn đề này. Trước đây tôi có sử dụng qua một website khác như vnexpress nhưng được một thời gian phải lập trình lại  vì bên họ thay đổi, sau này lại chuyển qua dùng widget weather của kuma...và nhận thấy một điều mình bị phụ thuộc khá nhiều và khó tùy biến. Vấn đề ở đây là phải tìm được một nguồn cung cấp ổn định...
Thay đổi giao diện website Asp.Net với App_Themes
Wednesday, October 16, 2013
Giao diện website thân thiện với người dùng là một mục tiêu mà bất cứ nhà phát triển web nào cũng quan tâm và muốn hướng tới, tuy nhiên để đáp ứng được nhiều người dùng thì lại là một vấn đề không hề đơn giản vì mỗi người sẽ có một cách nhìn nhận và đánh giá khác nhau. Và để đáp ứng tốt hơn, chúng ta nên cân nhắc đến việc xây dựng thêm chức năng để có thể cho phép người dùng linh hoạt thay đổi được giao diện theo sở thích. Trong bài này, chúng ta sẽ tìm hiểu cách thay đổi giao diện của một website Asp.net bằng cách sử dụng App_Themes...
Search

Đăng ký nhận bài mới


Category

Blog Archive