반응형
이 글은 월간 마이크로소프트웨어(일명 마소) 2008년 01월호 실전 강의실에 기고한 글입니다. 요즘 도통 포스팅을 할 수 없는 관계로 인해 대체합니다. ㅡ_ㅡ;; (하는 거 없이 바빠요~~~)
ASP.NET AJAX 웹 사이트 생성 및 웹 폼 구성
RSS 정보를 관리하는 데이터베이스가 만들어졌으므로, 이제 ASP.NET AJAX 웹 사이트를 만들어보도록 하겠다. Visual Studio 2005를 실행시킨 후, 새 웹사이트 메뉴를 선택한다. 새 웹 사이트를 만드는 창이 나타나면, <화면 5>와 같이 ASP.NET AJAX-Enabled Web Site 템플릿으로 선택한 후, 확인 버튼을 클릭하여, 새로운 웹 사이트를 생성한다.
<화면 5> 새 웹사이트의 생성
새롭게 웹 사이트가 생성이 되었으면, 새 항목 추가 메뉴를 이용하여 새로운 웹 폼을 추가한 뒤 웹 폼의 이름을 “RssView.aspx"라고 한다. 그리고, <head> 태그 사이에 웹 폼에서 사용할 스타일을 <리스트 6>과 같이 정의한다.
---------------------------------------------------------------------------------------------------
<style type="text/css">
td { font-size : 9pt font-family : "맑은고딕“ }
a img { border : 0 }
a:link { color : #636563 text-decoration : none font-weight : bold }
a:visited { color : #636563 text-decoration : none font-weight : bold }
a:active { color : #FFA600 text-decoration : none font-weight : bold }
a:hover { left : 1px color : #FFA600 position : relative top : 1px text-decoration : none }
.modalBackground { background-color : Gray filter : alpha(opacity=70) opacity : 0.7 }
#content { width : 500px padding : 10px margin-top : 50px margin-bottom : 20px margin-right : auto; margin-left : auto background : #ccc border : 3px solid #666 ; text-align:left }
.panPopUp { width : 450px height : 400px padding : 10px margin-top : 10px margin-bottom : 10px margin-right : auto; margin-left : auto background : #EEEEEE border : 3px solid #666 text-align : left vertical-align : middle overflow : auto }
</style>
---------------------------------------------------------------------------------------------------
<리스트 6> 웹 폼에서 사용하는 스타일 정의
또한, RSS 주소를 추가하기 위해 추가 버튼을 클릭할 경우, 추가할 RSS 주소를 입력했는지, 그리고 RSS 주소가 정확하게 “http://"로 시작하는지를 확인하기 위한 자바스크립트 함수를 <리스트 7>과 같이 <head> 태그 사이에 추가한다.
---------------------------------------------------------------------------------------------------
<script language="javascript" type="text/javascript">
function fnInputValid() {
var txtRssAddress = document.getElementById( "txtRssAddress" );
if ( txtRssAddress.value == "" ) {
alert( "URL을 입력하세요 );
txtRssAddress.focus();
return false;
} else {
if ( txtRssAddress.value.indexOf( "http://" ) < 0 ) {
alert( "http://로 시작하는 URL을 입력하세요" );
txtRssAddress.focus();
return false;
}
}
return true;
}
</script>
---------------------------------------------------------------------------------------------------
<리스트 7> 웹 폼에서 사용하는 자바스크립트 정의
스타일과 자바스크립트 코드를 웹 폼에 입력하였다면, 이제 실질적인 웹 폼 코드를 입력해보도록 하겠다. 웹 폼의 구조는 content라는 최상위의 div 태그 아래에 divAddRss, divRssList, divPostList라는 3개의 div 태그가 속한 구조로 되어 있다. <리스트 8>은 웹 폼의 전체 소스 코드를 보여준다.
---------------------------------------------------------------------------------------------------
<form id="RSSForm" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="content">
<div id="divAddRss" style="text-align:center;padding-bottom:20px;">
<h4>총<asp:Label ID="lblCount" runat="server" Text="0"></asp:Label>개의 주소가 등록되어 있습니다</h4>
추가할 주소를 입력하세요. :
<asp:TextBox ID="txtRssAddress" runat="Server" Width="200"></asp:TextBox>
<br /><br />
<asp:Label ID="lblInValid" runat="server" ForeColor="red" Visible="false"></asp:Label>
<asp:ImageButton ID="btnAddRssAddress" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/Images/btn_add.png"
OnClientClick="return fnInputValid()" OnClick="btnAddRssAddress_Click" />
</div>
<hr />
<div id="divRssList" style="text-align:center;padding-bottom:20px;">
<h4>등록된 주소 목록</h4>
<asp:GridView ID="gvRssList" runat="server" BackColor="White" BorderColor="#999999" BorderStyle="Solid"
BorderWidth="1px" CellPadding="3" ForeColor="Black" GridLines="Vertical" ShowHeader="false"
AutoGenerateColumns="false" Width="100%" OnRowCommand="gvRssList_RowCommand">
<FooterStyle BackColor="#CCCCCC" />
<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="#CCCCCC" />
<Columns>
<asp:TemplateField>
<ItemStyle HorizontalAlign="left" />
<ItemTemplate>
<asp:LinkButton ID="lbtnTitle" runat="server" Text='<%#Eval("title")%>'
CommandName='<%#Eval("link")%>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<hr />
<div id="divPostList" style="text-align:center;padding-bottom:20px;">
<h4>포스트목록</h4>
<asp:GridView ID="gvPostList" runat="server" BackColor="White" BorderColor="#999999" BorderStyle="Solid"
BorderWidth="1px" CellPadding="3" ForeColor="Black" GridLines="Vertical" ShowHeader="false"
AutoGenerateColumns="false" Width="100%">
<FooterStyle BackColor="#CCCCCC" />
<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="#CCCCCC" />
<Columns>
<asp:TemplateField>
<ItemStyle HorizontalAlign="left" />
<ItemTemplate>
<asp:Label ID="lblItemTitle" runat="server"><span style="cursor:hand"><%#Eval("title")%></span></asp:Label>
<asp:Panel ID="panPopUp" runat="server" Style="display:none">
<asp:Panel ID="panDesc" runat="server" CssClass="panPopUp">
<h4><a href="<%#Eval("link")%>" target="_blank"><%#Eval("title")%></a></h4>
<%#Eval("pubdate")%><br /><hr />
<%#Eval("description")%><br /><hr />
<center><asp:ImageButton ID="btnCancel" runat="server" ImageAlign="AbsMiddle"
ImageUrl="~/Images/btn_cancel.png" /></center>
</asp:Panel>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
</form>
---------------------------------------------------------------------------------------------------
<리스트 8> 웹 폼의 전체 소스 코드
웹 폼에 관련된 코드 비하인드에서의 코드는 이후에, 순차적으로 소개를 하도록 하겠다. 우선 현재의 소스로 빌드를 해보면, 오류가 발생하게 될 것이다. 이러한 오류를 피하기 위해서, 웹 폼에 정의된 필요한 이벤트 핸들러들의 빈 코드를 다음과 같이 추가한다.
---------------------------------------------------------------------------------------------------
protected void btnAddRssAddress_Click(object sender, EventArgs e) { }
protected void gvRssList_RowCommand(object sender, GridViewCommandEventArgs e) { }
---------------------------------------------------------------------------------------------------
이제, 디버그 메뉴의 “디버깅하지 않고 시작” 또는 Ctrl+F5를 눌러, 웹 폼을 브라우저에서 보도록 하자. 다음과 같은 화면이 보이게 될 것이다.
<화면 6> RSS Viewer 화면
CommonUtility 클래스의 구성
위에서 생성한 웹 폼에서 데이터베이스의 데이터를 읽어오고, 저장하는 기능들과, 기타 다른 기능들을 제공하는 메소드들을 포함하는 CommonUtility 클래스를 만들어보도록 하겠다. 새 항목 추가 메뉴를 선택하여, 클래스 템플릿을 선택하고 클래스명을 <화면 7>과 같이 "CommonUtility.cs"라고 한다.
<화면 7> CommonUtility.cs 클래스의 생성
CommonUtility 클래스가 생성되었으면, using 선언부에 다음과 같은 네임스페이스를 추가한다.
---------------------------------------------------------------------------------------------------
using System.Data.SqlClient;
using System.Net;
using System.Xml;
---------------------------------------------------------------------------------------------------
다음으로, 데이터베이스에 연결하기 위한 연결 문자열에 대한 정보를 가지는 변수를 선언한다. (물론, 연결 문자열을 Web.Config의 <connectionStrings> 섹션에 정의하여도 상관은 없다.)
---------------------------------------------------------------------------------------------------
private static string strConnection="Server=localhost;DataBase=MASODataBase;UID=neostyx;PWD=;"
---------------------------------------------------------------------------------------------------
CommonUtility 클래스에는 다음과 같은 7개의 메소드가 추가되게 되며, 각각의 메소드의 설명은 다음과 같다.
- GetRssData() 메소드 : 입력받은 RSS 주소를 통해 반환되는 XML 정보를 XmlDocument로 반환한다.
- ConvertToFitDateTime() 메소드 : <Item>요소의 하위 요소인 <pubDate>의 날짜 정보를 변경한다.
- GetRssAddressCount() 메소드 : 등록된 RSS 주소의 카운트를 반환한다.
- GetRssAddressList() 메소드 : 등록된 RSS에 대한 기본 정보를 반환한다.
- GetRssItemList() 메소드 : 선택한 RSS에 대한 컨텐츠(Item) 정보를 반환한다.
- InsertRssAddress() 메소드 : 새로운 RSS 정보를 데이터베이스에 추가한다.
- InsertRssItems() 메소드 : 새로운 컨텐츠(Item) 정보를 반환한다.
CommonUtility 클래스의 전체 소스는 <리스트 9>와 같다.
---------------------------------------------------------------------------------------------------
using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Net;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml;
public class CommonUtility
{
private static string strConnection
= "Server=localhost;DataBase=MASODataBase;UID=neostyx;PWD=;"
public CommonUtility()
{
}
public static XmlDocument GetRssData(string strURL)
{
HttpWebRequest httpReq = (HttpWebRequest)WebRequest.Create(strURL);
httpReq.UserAgent
= HttpContext.Current.Request.ServerVariables["HTTP_USER_AGENT"].ToString();
HttpWebResponse httpRes = (HttpWebResponse)httpReq.GetResponse();
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.Load(httpRes.GetResponseStream());
return xmlDoc;
}
public static XmlNode ConvertToFitDateTime(XmlNode xChannel)
{
XmlNodeList xItems = xChannel.SelectNodes("item");
foreach (XmlNode xNode in xItems)
{
xNode.SelectSingleNode("pubDate").InnerText
= Convert.ToDateTime(xNode.SelectSingleNode("pubDate").InnerText).ToString("yyyy-MM-dd HH:mm:ss");
}
return xChannel;
}
public static string GetRssAddressCount()
{
string strReturn = string.Empty;
SqlConnection sqlCon = new SqlConnection(strConnection);
SqlCommand sqlCom = new SqlCommand();
sqlCom.Connection = sqlCon;
sqlCom.CommandText = "dbo.usp_GetRssAddressCount"
sqlCom.CommandType = CommandType.StoredProcedure;
sqlCon.Open();
strReturn = sqlCom.ExecuteScalar().ToString();
sqlCon.Close();
return strReturn;
}
public static DataTable GetRssAddressList()
{
DataTable dtReturn = new DataTable();
SqlConnection sqlCon = new SqlConnection(strConnection);
SqlCommand sqlCom = new SqlCommand();
sqlCom.Connection = sqlCon;
sqlCom.CommandText = "dbo.usp_GetRssAddressList"
sqlCom.CommandType = CommandType.StoredProcedure;
SqlDataAdapter sqlDa = new SqlDataAdapter(sqlCom);
sqlDa.Fill(dtReturn);
return dtReturn;
}
public static DataTable GetRssItemList(string strLink)
{
DataTable dtReturn = new DataTable();
SqlConnection sqlCon = new SqlConnection(strConnection);
SqlCommand sqlCom = new SqlCommand();
sqlCom.Connection = sqlCon;
sqlCom.CommandText = "dbo.usp_GetRssItemList"
sqlCom.CommandType = CommandType.StoredProcedure;
sqlCom.Parameters.Add("@link", SqlDbType.VarChar, 200);
sqlCom.Parameters["@link"].Value = strLink;
SqlDataAdapter sqlDa = new SqlDataAdapter(sqlCom);
sqlDa.Fill(dtReturn);
return dtReturn;
}
public static string InsertRssAddress(string strTitle, string strLink, string strDesc)
{
string strReturn = string.Empty;
SqlConnection sqlCon = new SqlConnection(strConnection);
SqlCommand sqlCom = new SqlCommand();
sqlCom.Connection = sqlCon;
sqlCom.CommandText = "dbo.usp_InsertRssChannel"
sqlCom.CommandType = CommandType.StoredProcedure;
sqlCom.Parameters.Add("@title", SqlDbType.NVarChar, 200);
sqlCom.Parameters["@title"].Value = strTitle;
sqlCom.Parameters.Add("@link", SqlDbType.VarChar, 200);
sqlCom.Parameters["@link"].Value = strLink;
sqlCom.Parameters.Add("@description", SqlDbType.NVarChar, 2000);
sqlCom.Parameters["@description"].Value = strDesc;
sqlCom.Parameters.Add("@result", SqlDbType.NVarChar, 5);
sqlCom.Parameters["@result"].Direction = ParameterDirection.Output;
sqlCon.Open();
sqlCom.ExecuteNonQuery();
sqlCon.Close();
strReturn = sqlCom.Parameters["@result"].Value.ToString();
return strReturn;
}
public static string InsertRssItems(string strLink, XmlNode xChannel)
{
string strReturn = string.Empty;
SqlConnection sqlCon = new SqlConnection(strConnection);
SqlCommand sqlCom = new SqlCommand();
sqlCom.Connection = sqlCon;
sqlCom.CommandText = "dbo.usp_InsertRssItem"
sqlCom.CommandType = CommandType.StoredProcedure;
sqlCom.Parameters.Add("@link", SqlDbType.VarChar, 200);
sqlCom.Parameters["@link"].Value = strLink;
sqlCom.Parameters.Add("@iteminfo", SqlDbType.NText);
sqlCom.Parameters["@iteminfo"].Value = xChannel.OuterXml;
sqlCom.Parameters.Add("@result", SqlDbType.NVarChar, 5);
sqlCom.Parameters["@result"].Direction = ParameterDirection.Output;
sqlCon.Open();
sqlCom.ExecuteNonQuery();
sqlCon.Close();
strReturn = sqlCom.Parameters["@result"].Value.ToString();
return strReturn;
}
}
---------------------------------------------------------------------------------------------------
<리스트 9> CommonUtility 클래스의 전체 소스 코드
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
반응형
'Program > ASP.NET' 카테고리의 다른 글
| VS 2008을 이용한 블로그 프로그래밍 - Part1 (0) | 2009.06.16 |
|---|---|
| ASP.NET AJAX로 만드는 RSS Viewer - Part3 [ASP.NET] (0) | 2009.06.16 |
| ASP.NET AJAX로 만드는 RSS Viewer - Part1 [ASP.NET] (0) | 2009.06.16 |
| 페이지 공통 요소 분리하기 (0) | 2009.04.24 |
| Cookie 제대로 알고 사용하자 (0) | 2009.04.24 |