반응형

이 포스트는 월간 마이크로소프트웨어에 기고한 원고를 재편집한 포스트입니다. 그러므로, 본의 아니게 반말로 진행되고 있습니다. 원래 싸가지가 없어서 그런 것이 아니니 무한 용서를... ^^;;
또한, .NET Framework 3.5 SP1이 적용되기 이전의 소스이므로, 현재의 개발 환경과 다를 수 있습니다. 마소에 제출한 블로그 소스는 블로그 소스 다운로드에서 다운로드하실 수있습니다.

포스트 작성 기록 페이지(Archive.aspx) 페이지 구현

관리자에 의해 작성된 포스트를 “년도-달”의 형식으로 우측 메뉴 영역에서 볼 수 있도록 하는 기능은 지난 호에서 설명하였다. 이 목록을 선택할 경우에 선택한 달에 작성된 포스트의 목록을 볼 수 있는 페이지인 “Archive.aspx" 페이지를 만들어보도록 하자. 웹 사이트 이름에서 우측 마우스를 클릭하여 “새 항목 추가(Add New Item...)" 메뉴를 선택하여, "Archive.aspx"라는 이름으로 새로운 웹 페이지를 만들도록 한다. “Archive.aspx" 페이지 역시, 지난 호에서 설명한 카테고리에 속한 포스트 목록 페이지를 보여주는 "Category.aspx" 페이지와 구현 방법은 거의 동일하므로 "Category.aspx"에서 사용한 코드를 거의 그대로 사용하도록 한다.

그리고 "Archive.aspx.cs" 파일의 Page_Load 이벤트에서 쿼리스트링으로 받은 archiveid값을 바탕으로 포스트 작성 기록 정보와 개수를 가져오기 위한 GetArchiveInfo() 메소드를 호출한다. 또한, 포스트 작성 기록 목록을 표현하기 위해 LinqDataSource 컨트롤을 사용하며, LinqDataSource 컨트롤의 OnSelecting 이벤트가 발생할 때 작성일의 년-월 정보가 쿼리스트링으로 받은 archivesid값과 같은 포스트의 목록을 가져오는 저장 프로시져를 호출하여 반환된 데이터 정보를 ListView 컨트롤을 이용하여 화면에 출력하는 방식을 사용하고 있다. 이 때 호출되는 저장 프로시져명은 “dbo.usp_GetArchivePostsInfo"이며, <리스트 1>과 같은 코드로 되어 있다.

CREATE PROCEDURE [dbo].[usp_GetArchivePostsInfo]
(
    @archiveid    VARCHAR(7)
)
AS
BEGIN
    SELECT PostID, PostName, CreateDate, PostContent, Tag, ViewCount, CommentCount
    FROM dbo.BLOG_POSTS
    WHERE CONVERT(VARCHAR(7), CreateDate, 120) = @archiveid AND DeleteDate IS NULL
    ORDER BY CreateDate DESC
END
<리스트 1> usp_GetArchivesPostsInfo 저장 프로시져의 코드

<리스트 1>의 코드를 이용하여 저장 프로시저를 생성한 후, “App_Code" 폴더 안에 이미 생성되어 있는 ”BlogDataClasses.dbml“ 파일의 디자이너 화면의 우측 영역에 이 저장 프로시저를 추가하기 위해, 기존에 연결시켜 놓은 "서버 탐색기(Server Explorer)"의 연결 정보를 새로고침하여, 추가된 ”dbo.usp_GetArchivePostsInfo“ 저장 프로시저를 검색한 후, ”BlogDataClasses.dbml“ 파일의 디자이너 화면의 우측 영역으로 저장 프로시저를 드래그 앤 드랍하여, 저장 프로시저를 추가한다. ”BlogDataClasses.dbml“ 파일의 디자이너 영역에 저장 프로시저가 추가된 것을 확인한 후에 선택한 "년도-달"에 속하는 포스트의 목록을 화면에 출력하기 위해 ListView 컨트롤과 LinqDataSource 데이터 소스 컨트롤을 이용하도록 한다. 여기에서 "Category.aspx"에서 사용된 LinqDataSource 데이터 소스 컨트롤과는 달리 LinqDataSource 컨트롤에는 Select, TableName, OrderBy 등의 속성을 별도로 정의하지 않으며, LinqDataSource 데이터 소스 컨트롤이 가지고 있는 OnSelecting 이벤트를 통해서 OnSelecting 이벤트가 발생할 때, ListView 컨트롤에 바인딩할 데이터의 값을 ”dbo.usp_GetArchivePostsInfo“ 저장 프로시저를 이용해서 가져오도록 하겠다. 웹 폼과 코드 비하인드 파일에서 정의되는 LinqDataSource 데이터 소스 컨트롤과 컨트롤의 이벤트에 관련된 코드는 <리스트 2>와 같다.

-- Archive.aspx의 코드
<asp:LinqDataSource ID="LinqDataSourcePostList" runat="server" 
            ContextTypeName="BlogDataClassesDataContext"
            OnSelecting="LinqDataSourcePostList_Selecting">
</asp:LinqDataSource>
 
-- Archive.aspx.cs의 코드
protected void LinqDataSourcePostList_Selecting(object sender
    , LinqDataSourceSelectEventArgs e) 
{
    blogDataContext = new BlogDataClassesDataContext();
    e.Result = blogDataContext.usp_GetArchivePostsInfo(_archiveID).ToList();
    blogDataContext = null;
}
<리스트 2> 정의된 LinqDataSource 데이터 소스 컨트롤의 코드

<리스트 2>에서 보는 것과 같이 저장 프로시저에 매개변수 값으로 _archiveID를 넣어주면, <리스트 1>에서 정의된 저장 프로시저의 구문에 의해서 결과가 반환되게 된다. 이 결과값을 LinqDataSourceSelectEventArgs가 가지고 있는 Result라는 객체에 할당하면, LinqDataSource 데이터 소스 컨트롤에 데이터가 추가되게 되며, 이 데이터를 바탕으로 ListView 컨트롤에 결과값이 표시되게 되는 것이다. 또한, "Category.aspx"에서 사용한 방법과 동일하게, ListView 컨트롤의 OnDataBinding 이벤트 발생시에 현재 화면에 표시되는 목록에 대한 세부 포스트 정보를 보여주기 위해서, GetPostListInCategory()라는 메소드를 호출하게 되며, 이 메소드는 DataPager 컨트롤의 StartRowIndex 속성값과 현재의 페이지 인덱스를 지정하는 전역변수인 _pageIndex, 그리고 화면에 출력할 페이지의 개수를 정의하는 전역변수인 _pageCount를 가지고 화면에 보여줄 포스트의 정보를 가져오게 된다. GetPostListInCategory() 메소드의 코드는 <리스트 3>에 정의되어 있다.

    private void GetPostListInCategory()
    {
        blogDataContext = new BlogDataClassesDataContext();
        _pageIndex = DpPostList.StartRowIndex / _pageCount;
 
        List<usp_GetArchivePostsInfoResult> blogPostList = 
            blogDataContext.usp_GetArchivePostsInfo(_archiveID).Skip(
            _pageIndex * _pageCount).Take(_pageCount).ToList();
 
        LvwPostInCategory.DataSource = blogPostList;
        LvwPostInCategory.DataBind();
 
        blogDataContext = null;
    }
<리스트 3> GetPostListInCategory() 메소드 코드

지금까지 설명한 것을 바탕으로 구현된 "Archive.aspx" 페이지의 화면은 <화면 1>과 같다.


<화면 1> 포스트 글 보관함 페이지 화면

검색 페이지(Search.aspx) 페이지 구현

다음으로는 검색 페이지를 구현하는 방법에 대해서 알아보도록 하겠다. 검색 페이지는 "Search.aspx" 파일에 정의되며, 검색어를 입력하게 되면, 포스트의 제목이나 포스트 본문의 내용, 태그 등을 검색하는 코드가 정의된 "dbo.usp_GetSearchPostsInfo" 저장 프로시저를 사용하여 검색어가 들어있는 포스트의 목록 정보를 반환하는 결과를 SqlDataSource 데이터 소스 컨트롤을 이용하여, ListView 컨트롤을 통해 화면에 출력하게 된다. 검색 페이지에서 사용되는 "dbo.usp_GetSearchPostsInfo" 저장 프로시저의 코드는 <리스트 4>와 같다.

CREATE PROCEDURE [dbo].[usp_GetSearchPostsInfo]
(
    @searchtext    VARCHAR(30)
)
AS
BEGIN
    IF @searchtext <> ''
    BEGIN
        SELECT PostID, PostName, posts.CreateDate, PostContent
        , Tag, ViewCount, CommentCount, CategoryName
        FROM dbo.BLOG_POSTS posts
        INNER JOIN dbo.BLOG_CATEGORIES category
        ON posts.categoryid = category.categoryid
        WHERE (PostName LIKE '%' + @searchtext + '%' 
            OR PostContent LIKE '%' + @searchtext + '%'
            OR Tag LIKE '%' + @searchtext + '%') 
            AND posts.DeleteDate IS NULL
        ORDER BY posts.CreateDate DESC
    END
END
<리스트 4> dbo.usp_GetSearchPostsInfo 저장 프로시저의 코드

<리스트 4>의 코드를 이용하여 저장 프로시저를 생성한 후, "Search.aspx"에 SqlDataSource 데이터 소스 컨트롤을 추가한다. 그리고 SqlDataSource 데이터 소스 컨트롤의 스마트 태그 메뉴의 "데이터 소스 구성(Configurate Data Source...)" 메뉴를 클릭하여, 데이터 소스 구성 마법사를 실행한다. <화면 2>와 같이 연결 문자열을 구성하는 화면이 나오게 되면, 기존에 Web.Config 파일에 연결 문자열이 정의되어 있으므로, 이 연결 문자열을 선택한 후, "다음(Next)" 버튼을 클릭한다.


<화면 2> 연결 문자열 정의 화면

다음으로는 Select 구문을 구성하는 화면이 나오게 된다. 여기에서는 <리스트 4>에서 정의된 "dbo.usp_GetSearchPostsInfo" 저장 프로시저를 사용할 것이므로, <화면 3>과 같이 "사용자 지정 SQL 문 또는 저장 프로시저 구성(Specify a custom SQL statement or stored procedure)"를 선택한 후 "다음(Next)" 버튼을 클릭한다.


<화면 3> Select 문 구성 화면

그러면, <화면 4>와 같은 사용자 지정 문 또는 저장 프로시져 정의 화면이 나오게 된다. 저장 프로시저로 "dbo.usp_GetSearchPostsInfo" 저장 프로시저를 사용할 것이므로, 화면 하단의 저장 프로시저 부분을 클릭한 후, "dbo.usp_GetSearchPostsInfo" 저장 프로시저를 선택 후, "다음(Next)" 버튼을 클릭한다.


<화면 4> 사용자 지정 문 또는 저장 프로시져 정의 화면

다음으로는 저장 프로시저에 정의된 @searchtext 매개 변수에 할당할 매개 변수 소스를 정의하는 화면인 매개 변수 정의 화면이 나오게 된다. "Search.aspx"에서는 txtSearch라는 TextBox 컨트롤에 입력되는 값을 통하여 검색을 할 예정이므로, 매개 변수 소스(Parameter Source)를 Control로 선택하고, ControlID값을 txtSearch로 선택하면, <화면 5>와 같게 된다. "다음(Next)" 버튼을 클릭한다.


<화면 5> 매개 변수 정의 화면

마지막으로 쿼리를 테스트할 수 있는 쿼리 테스트 창이 <화면 6>과 같이 나타나게 된다. "쿼리 테스트(Test Query)" 버튼을 통해서 정상적으로 값이 출력되는 지를 확인할 수 있다. "마침(Finish)" 버튼을 클릭하여, 데이터 소스 구성 마법사를 종료한다.


<화면 6> 쿼리 테스트 화면

이달의 디스켓에 포함되어 있는 소스를 참고하여, "Search.aspx"와 "Search.aspx.cs" 페이지의 코드를 구성한 후 웹 브라우저를 실행시켜, 블로그 메뉴 상단의 "Search" 메뉴를 클릭하면 검색 화면이 나타나게 되며, TextBox 컨트롤에 검색할 단어를 입력 후에 "Search" Button 컨트롤을 클릭하면, <화면 7>과 같이 검색하는 단어가 포함되는 포스트의 목록 정보가 화면에 출력되게 된다.


<화면 7> 검색어가 포함된 포스트 목록 정보


Creative Commons License
저작물크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
반응형

+ Recent posts