ASP.NET Web Forms 시작하기

다양한 입력 양식을 기반으로한 데이터 저장 및 검색을 주로하는 웹사이트라면 ASP.NET Web Forms를 적극 검토할 필요가 있습니다. ASP.NET Web Forms는 윈도우 폼 응용을 개발하는 것처럼 다양한 컨트롤을 도구 상자에서 끌어다 놓기로 화면을 디자인하고 버튼을 클릭했을때 처리하는 로직을 추가하는 등의 이벤트 기반 프로그래밍을 웹사이트에서도 적용할 수 있도록 해줍니다. ASP.NET MVC, ASP.NET WebAPI에 비하면 가장 고전적인 개발 방식일 수 있지만 나름의 유용성도 있다고 봅니다.

파일>새로만들기>프로젝트로 ASP.NET Web Forms를 시작합니다. 위의 그림과 같은 "새 프로젝트" 창에서 템플릿>Visual C#>웹을 클릭하고 "ASP.NET 웹 응용 프로그램"을 선택한 다음 프로젝트 이름을 입력한 다음 [확인]으로 비주얼스튜디오에서 제공하는 다양한 ASP.NET 템플릿 선택으로 진행합니다.

템플릿에서 "Web Forms"를 선택하고 [확인]을 누르면 프로젝트를 생성합니다. 템플릿에서도 확인할 수도 있지만 ASP.NET MVC, ASP.NET Web API, Single Page 응용을 제작하는 과정도 이 경로를 따라서 하면 됩니다.

생성된 프로젝트는 위의 그림과 같이 바로 실행할 수 있는 수준의 기본 사이트의 모습을 갖추고 있습니다. 개발자는 자신의 필요에 맞도록 수정하고 필요한 페이지를 추가해가면 됩니다. 프로젝트에 기본적으로 포함되어 있는 내용은 위 그림 좌측의 솔루션 탐색기에서 확인할 수 있듯이 홈페이지인 Default.aspx, 정보 페이지 About.aspx, 연락처 페이지 Contact.aspx 뿐만아니라 사용자 등록과 로그인/로그아웃, 비밀번호 분실등을 처리하는 인증 모듈이 포함되어 있어서 처음 ASP.NET을 접하는 개발자도 쉽게 따라하기를 할 수 있도록 해줍니다. 주목할 부분은 프로젝트에 부트스트랩(http://getbootstrap.com) 및 jQuery 프레임워크가 기본적으로 내장되어 있다는 것입니다. 최신 트렌드에 맞추어 반응형 웹을 구축하는 데도 무리가 없을 뿐만아니라 웹 브라우저에서 스크립트를 통한 응용의 확장도 용이하다는 것을 시사합니다.

프로젝트 생성 시점에서 아무것도 변경하지 않은 상태 그대로 프로젝트를 실행해도 됩니다. 비주얼스튜디오 상단의 "시작" 버튼을 누르면 위의 그림과 같이 현재 프로젝트 내용을 웹 브라우저를 통해서 실행해 볼 수 있습니다. 가장 기본적인 기능을 갖춘 웹사이트 하나가 완성된 상태입니다. 웹서버는 비주얼 스튜디오에 내장되어 있는 IIS Express이기 때문에 상단 주소줄에 포트 번호가 부가되어 있음을 확인할 수 있습니다.

비주얼스튜디오의 통제를 받기 때문에 위의 그림과 같이 수행과정을 비주얼스튜디오 내부에서 모니터링 할 수 있습니다. 앞서 언급한 것처럼 기본 프로젝트에는 회원관리 및 인증을 수행하는 ASP.NET Identity 모듈이 포함되어 있기 때문에 개발자는 데이터를 저장할 데이터베이스를 생성하여 환경 설정 파일에 등록만 하면  Identity 모듈에서 알아서 필요한 테이블을 생성하고 데이터를 저장합니다. 

DB 연결을 위해서 우선 서버 탐색기>데이터 연결>연결 추가로 사용할 데이터베이스 서버와 데이터베이스를 지정합니다. 마이크로소프트 제품이니 만큼 당연히 SQL Server가 가장 원활하게 연결되는 것은 맞지만 DB드라이버만 제공된다면 다른 DBMS 를 연결할 수도 있습니다.

서버, DB사용자 아이디 및 비밀번호, 데이터베이스를 입력하고 [연결테스트]로 연결을 확인합니다. [연결테스트]가 성공하면 [확인]으로 진행합니다.

새롭게 추가한 데이터 연결의 속성창>연결 문자열 항목을 복사해서 프로젝트의 루트 폴더에 있는 Web.config 파일의 <connectionStrings> 항목에 "DefaultConnection"의 connectionString 속성으로 붙여넣기 합니다. 단, 붙여넣기 이후 비밀번호 항목은 다시 입력해 주어야 합니다. 이렇게 DB 연결을 위한 준비를 성공적으로 끝내고 프로젝트를 다시 실행하면 이제 부터는 회원 등록, 로그인등을 실제처럼 진행할 수 있습니다.

위의 그림은 사용자 등록 시점에 데이터베이스에 자동 생성되는 테이블들을 조회한 것입니다.

"Account/Register.aspx"의 컨텍스트 메뉴>디자이너 보기로 기본 프로젝트에 있는 회원 등록 페이지의 디자이너 화면을 엽니다. C# 윈도우 폼 응용 처럼 코드 보기와 디자이너 보기가 구분되어 있으므로 화면 설계는 디자이너 보기에서 수행하고 이벤트 처리등은 코드 보기에서 수행합니다.

위의 그림은 디자이너 보기에서 [등록] 버튼의 이벤트 속성을 확인한 것으로 버튼 클릭시의 로직이 있음을 확인할 수 있습니다. 해당 이벤트 처리 함수를 더블클릭하거나 코드 보기로 해당하는 이벤트 처리 로직을 확인할 수 있습니다.

위의 그림은 디자이너 보기에서 끌어다 놓기 방식으로 추가할 수 있는 도구 상자의 다양한 컨트롤입니다.

디자인 보기, 코드 보기 방법도 있지만 위의 그림처럼 편집창 하단에 있는 뷰 탭(View Tab)을 통해서 "디자인" 과 "소스"를 보거나 "나누기"로 동시에 보면서 편집할 수도 있습니다. 무엇보다 유용한 것은 HTML 요소에 대한 경로 정보를 통해서 보다 용이하게 화면 디자인을 수행할 수 있습니다. 위의 그림은 <div.col-md-4> 요소를 클릭한 것으로 디자인의 해당 위치와 소스 코드의 해당 위치로 이동해서 영역을 표시하고 있음을 확인할 수 있습니다. 홈페이지 소스인 Default.aspx는 <div.row>안에 <div.col-md-4> 항목을 3개두어서 반응형 웹 화면을 디자인 했습니다.

홈페이지의 디자이너 보기에서 한 섹션을 테스트용으로 변경합니다. 텍스트 박스와 버튼을 추가해서 입력한 사용자가 존재하는지를 검사하는 테스트를 수행해 보겠습니다. 일단 필요한 화면 요소를 도구 상자에서 끌어다 놓기로 추가하고 버튼의 클릭 이벤트를 추가합니다.

웹 사이트를 제작하는지 그냥 단순한 윈도우 폼 응용을 개발하는지 모를 정도로 개발 과정에 직접 HTML이나 CSS를 손 댈일은 아직 없습니다. 왠만한 업무 개발은 기본 디자인 하에서 그냥 수행해도 무방하지 않을까 싶습니다. 반응형 웹이 가져온 디자인 단순화의 파급력 덕분이라 할수 있을까요?

디자인과 코드가 정상적으로 동작하는지 일단 테스트를 진행해서 문제가 없는 경우 테이블 쿼리하는 로직을 추가하는 단계로 진행합니다.

protected void Button1_Click(object sender, EventArgs e)
{
    System.Configuration.Configuration rootWebConfig =
        System.Web.Configuration.WebConfigurationManager.OpenWebConfiguration("/");
    System.Configuration.ConnectionStringSettings connString = null;
    if (rootWebConfig.ConnectionStrings.ConnectionStrings.Count > 0)
    {
        connString =
            rootWebConfig.ConnectionStrings.ConnectionStrings["DefaultConnection"];
    }
    if (connString != null)
    {
        try
        {
            SqlConnection conn = new SqlConnection(connString.ConnectionString);
            conn.Open();
            SqlCommand cmd = new SqlCommand("SELECT * FROM AspNetUsers WHERE Email LIKE '%" + TextBox1.Text + "%'", conn);
            SqlDataReader reader = cmd.ExecuteReader();
            if (!reader.HasRows)
            {
                reader.Close();
                Label1.Text = TextBox1.Text + " 를 확인할 수 없습니다(해당하는 사용자가 없습니다)";
            }
            else
            {
                DataTable rettbl = new DataTable();
                rettbl.Load(reader);
                reader.Close();
                Label1.Text = TextBox1.Text + " 검사 결과 : ";
                foreach (DataRow row in rettbl.Rows)
                {
                    Label1.Text = Label1.Text + row["Email"] + "(" + row["Id"] + ") ";
                }
            }
            conn.Close();
        }
        catch (Exception ex)
        {
            Label1.Text = TextBox1.Text + " 를 확인할 수 없습니다(질의 실패 " + ex.Message + ")";
        }
    }
    else
        Label1.Text = TextBox1.Text + " 를 확인할 수 없습니다(DB 연결 불가)";
}

기본 프로젝트에서 사용하는 기본 DB의 연결 스트링을 가져와서 DB를 연결하고 SQL을 통해서 직접 질의를 통해 자료를 얻는 방식입니다. 다른 방법이 있지만 디자이너를 통한 컨틑롤 배치, 이벤트를 통한 서버 작업 수행, 서버에서의 DB 처리등을 ASP.NET Web Forms로 시작해 보았습니다.