• 프로젝트 작성하기
• Write.aspx 작성
• Validation 컨트롤 속성 바꾸기
• DB 객체 설정
• 코드 입력 및 완료

VS.NET 프로젝트를 생성합니다. VS.NET을 실행하신 후, 파일->새로만들기->프로젝트로 새로운 프로젝트를 생성합니다.

Visual C# 프로젝트에, ASP.NET 웹 응용 프로그램을 선택하고 프로젝트 이름 MessageBoard 라고 줍니다. 위치 란에 url을 입력하시면 되는데요, 그림에선 제 홈페이지인 cassatt.pe.kr  에 MessageBoard 라는 프로젝트를 만들도록 하고 있습니다. 여러분은 http://localhost/MessageBoard를 입력하시면 될겁니다. 입력하고 확인을 클릭하면, VS.NET 프로젝트가 생성됩니다.

그리고 제어판 -> 관리도구 -> 인터넷 서비스 관리자를 열어, 해당 웹사이트에 MessageBoard 디렉터리가 생성되어있는지 보시고, 그것이 응용프로그램으로 설정되어있나 확인하세요. 아이콘이 일반 폴더 모양이라면 설정되어 있지 않은 것입니다. 설정되어있지 않다면 해당 MessageBoard 디렉터리를 마우스 오른쪽 클릭, 등록정보 -> 디렉터리탭의 '만들기' 버튼을 클릭해서 응용프로그램으로 설정합니다. 그럼 '만들기' 버튼은 다음 그림처럼 '제거'로 바뀝니다.

'확인'을 클릭하고 MessageBoard 디렉터리의 아이콘 보시면, 열린 상자에 깃발 꽂힌 것으로 바뀌어 있을겁니다.

처음 프로젝트를 만든 화면은 다음과 같습니다. 그림에서 보듯  Webform1.aspx 라는 페이지가 추가되어 있고 그 페이지를 편집하는 상태가 되어있습니다.

시작하기 전에, 툴바를 잠깐 설명하겠습니다.
VS.NET의 메뉴 아래 툴바를 보시면, 왼쪽에는 프로젝트나 항목을 새로 만드는 버튼도 보이고, 파일 저장, 클립보드 복사하는 버튼도 보입니다. 그리고 중간에 화살표가 있는데요, 파일을 편집한 후에 그 버튼을 누르면 실행됩니다.
그리고 툴바 오른쪽에는 옆의 그림처럼 버튼이 네게 있습니다.  클릭하면 각각 솔루션 탐색기, 도구상자, 속성창, 클래스뷰 윈도우로 전환됩니다. 클래스뷰 버튼 옆의 아래로된 작은 화살표 클릭하면 그외에도 여러 창을 선택할수있습니다. 각각을 좀더 설명하면 다음과 같습니다.

• 솔루션 탐색기 : 솔루션에 포함된 여러 프로젝트, 파일 등을 탐색할 수 있습니다. 파일을 추가/삭제/편집할때 사용합니다.
• 도구상자 : 웹폼 디자인할때 쓰일 여러 컨트롤들이 있습니다. 원하는 컨트롤을 드래그-드롭하면 해당 페이지에 컨트롤이 추가됩니다.
• 속성창 : 페이지에 포함된 컨트롤들의 속성을 변경할때 사용합니다.
• 클래스뷰 : 솔루션에 포함된 여러 클래스들을 확인하고, 클래스에 메서드/속성을 추가할 수 있습니다.

위 네 가지는 강좌 중간중간에 설명없이 쓰이게 되어 미리 설명했습니다.

참, 강좌 중간 중간에 '오른쪽 클릭' 혹은 '오른쪽 버튼 클릭' 같은 말이 나오면 '마우스 오른쪽 버튼으로 클릭'이라 생각하시면 됩니다.

먼저 만들 페이지는 글쓰기 페이지입니다. 이름, 제목, 내용 등을 입력해서 버튼을 클릭하면 글을 저장하는 페이지입니다. 테이블에 자료가 있어야, 목록 페이지를 만들수 있기 때문에 글쓰기 페이지부터 하려 합니다.

페이지 이름은 Write.aspx로 할것인데요, 지금 Webform1.aspx 란 파일이 미리 만들어져있을테니, 그 파일의 이름을 Write.aspx로 변경합니다. 솔루션 탐색기에서 해당 파일을 오른쪽 버튼으로 클릭, 이름 바꾸기를 선택하셔서 바꾸면 됩니다.

그리고 앞선 프로젝트 만든 그림 보시면 페이지 편집하는 부분에 '모눈 레이아웃'으로 되어있고, 객체들이 x,y 절대 좌표로 정렬된다는 메시지가 보일겁니다. 이 상태에선 작업하긴 편할지 모르나, 넷스케이프 같은 브라우저에선 이상한 모양으로 나올 수 있습니다. 페이지 바탕 아무곳에서나 오른쪽 버튼 클릭해서, 메뉴에서 '속성'을 선택하여 다음 그림처럼 페이지 레이아웃을 'FlowLayout'으로 바꿉니다.

그러면 모눈이 사라지고, 객체들이 '선형 레이아웃 모드'으로 정렬된다는 메시지로 바뀔겁니다.

글쓰기 만들기를 위해, 우선은 컨트롤들을 드래그 드롭해 놓고 시작해 보겠습니다.
앞서 설명했던 툴바의 '도구상자'를 누르면 다음 그림과 같은 도구상자 창을 볼수 있습니다.
　

페이지에 끌어다 놓을수 있는 다양한 컨트롤들을 볼수 있습니다. '데이터'란에는 Connection 객체, Command객체등 DB관련 객체들이 있고, 그림에서 선택된 'Web Forms' 란에는 웹폼 서버 컨트롤들이 있습니다. 그리고 'HTML'란에는 기존의 친숙한 HTML 컨트롤들이 있습니다.여기서 원하는 컨트롤을 드래그해서, 페이지 바탕에 끌어다 놓으면 추가됩니다. 우선은 'HTML' 란에서 'Table'을 끌어다 놓고, 행을 추가해서 레이아웃을 잡으면서, 'Web Forms' 란에서 TextBox, RadioButtonList, Button, RequiredFieldValidator, RegularExpressionValidator, ValidationSummary 등을 끌어다 놓아서 아래 그림처럼 만듭니다.

입력란은 모두 TextBox 입니다. '바인딩 안됨' 으로 되어있는 부분이 RadioButtonList 끌어다 놓은 것이고요, '오류메시지 1, 오류 메시지 2'라 표시된 부분이 ValidationSummary 들어간 자리입니다. 나머지는 화면에 나타난 글씨대로이고요.

컨트롤을 끌어다 놓았으니, 각각의 속성을 설정해 봅시다. 우선은 이름 행의 TextBox를 오른쪽 버튼으로 클릭하고 '속성'을 선택하면 속성 창이 보일겁니다. 이름란의 경우엔 항목중 '(ID)' 란을 txtWriter 로, 'MaxLength' 를 '10'으로 바꿉니다.
같은 방식으로 다음처럼 바꿉니다.
　

웹폼 컨트롤쓰면 <input type=text>, <input type=password>, <textarea></textarea> 모두 TextBox 컨트롤 쓰고, 속성중 'TextMode' 만 바꾸면 됩니다.
MaxLength 속성은, <input type=text>의 MaxLength 와 같은 역할을 합니다. MaxLength=10으로 하면 10자 이상은 입력이 안되죠. 다만 한글이든 영문이든 10자이니, 한글 10자면 20byte까지 될수 있고요, TextMode=MultiLine 인 여러줄 입력란에선 작동하지 않을겁니다.
크기는 Columns 조절하면 <input type=text>의 size 바꾼것과 같으니 대충 맞출수 있습니다. 물론 Width 속성 조정해도 되고, 마우스로 끌어 조정해도 됩니다. Width를 100% 식으로 퍼센트로 주면 테이블 크기따라 알아서 조정되니 편합니다.

형식란의 RadioButtonList의 경우, 아직 항목이 없어 '바인딩 안됨'으로 표시될겁니다. 글이 TEXT 형식인지, HTML을 허용할것인지 선택하기 위한 것인데요, 항목이 정해져있으니 직접 입력해 보도록 하죠.
속성란에서 items 항목 보시면, [...] 으로 표시된 버튼이있습니다. 그것을 클릭하면 'ListItem 컬렉션 편집기' 라는 창이 뜹니다. 거기서 '추가'를 클릭하고 다음 그림처럼 오른쪽 란에 값을 입력하면 됩니다.

두 항목을 추가하고, 다음처럼 입력합니다.

• 첫번째 항목 : Selected:True, Text:TEXT, Value:0
• 두번째 항목 : Selected:False, Text:HTML, Value:1

항목추가하고 확인 클릭하면 라디오버튼 리스트는 입력한 항목대로로 바뀔겁니다.

사용자가 폼에 입력한 내용이 정확한지, 검사하는 부분을 폼 유효성 검사(Form Validation)이라 부르는데요, 예전엔 Javascript를 썼었습니다. 예를들어 이름을 입력하지 않고 버튼을 클릭하면 '이름을 입력해주세요'라고 메시지박스를 띄우도록 했었죠.
한편 ASP.NET에선 그러한 폼 유효성 검사를 쉽게 할수 있는 컨트롤들을 직접 지원합니다. Validation 컨트롤이라 불리는데, 앞에서 끌어다 놓았던 RequiredFieldValidator, RegularExpressionValidator 같은 것들입니다. 에러 메시지를 모아서 출력하고 싶다면ValidationSummary 를 쓰면 되고요. 자바스크립트로 폼 유효성 검사하는 것은 좀 복잡하고 손이 많이가는 작업이었는데, ASP.NET의 Validation 컨트롤은 드래그-드롭하고 속성만 몇개 바꾸면 되기 때문에 사용하기가 쉽습니다.

컨트롤은 아까 끌어다 놓았으니, 속성을 바꿔가며 설명해 보겠습니다. 끌어다 놓은 RequiredFieldValidator, RegularExpressionValidator, ValidationSummary 등의 속성을 다음처럼 바꿉니다. 아이디는 바꿀 필요 없고요, 속성중 ControlToValidate, Text, ErrorMessage 를 변경합니다.
　

어떤 컨트롤을 체크할 것인지, 그 ID를 ControlToValidate에 넣어주고, 에러메시지는 ErrorMessage란이나 Text 란에 넣게 됩니다. 잠시후 만들 ValidationSummary를 같이 쓰게 되면, Text란의 값은 해당 컨트롤 위치에, ErrorMessage는 ValidationSummary 위치에 모여 출력됩니다. 저는 컨트롤 옆에는 별표(*), ValidationSummary 란에는 무엇이 잘못되었는지 이름만 모아 출력할 생각이라 위처럼 속성을 정했습니다.

이름, 제목, 내용, 비밀번호의 경우 필수 항목이라 RequiredFieldValidator를 썼습니다. RequiredFieldValidator 는 이처럼 원하는데 끌어놓고, ControlToValidate 에 해당 컨트롤 아이디 넣고, Text나 ErrorMessage 설정하면 끝입니다.

그런데 메일주소 옆의 Validation 컨트롤은 RegularExpressionValidator 이었죠 ? 메일주소는 필수는 아니지만, 혹 입력하게되면 정확히 하도록 하기 위해 그 컨트롤을 썼습니다. RegularExpressionValidator는 정규식을 이용해서 컨트롤의 값이 유효한지 검사합니다. 메일주소는 중간에 @기호도 있어야 하고, @ 뒤에는 정확히 url 폼이어야 하고 해서 순수 코딩으론 검사하기가 쉽지않습니다만, 정규식을 쓰면 간단해 집니다.

그 메일주소 옆의 RegularExpressionValidator 속성란에서, ValidationExpression 란의 [...] 버튼을 클릭하면 정규식 편집기 창이 뜹니다. 거기서 '표준 식'을 찾아보면 '인터넷 전자 메일 주소'가 있습니다. 그것을 선택하고 '확인' 버튼을 클릭합니다.

그럼 메일주소도 정확히 체크하게 될겁니다.

그리고 ValidationSummary는 다음의 두 속성을 변경합니다.

• HeaderText :<font color=darkred><b>다음을 확인해주세요 :</b></font>
• DisplayMode : SingleParagraph

그리고 테이블 크기 조절하고, 약간 정렬하면 다음 그림처럼 그럭저럭 글쓰기 폼이 만들어 집니다.

이제 폼 유효성 검사까지 완료되어, 화면 상에 보이는 컨트롤의 속성은 모두 입력했습니다. 아직 DB에 입력하는 루틴은 없지만, 이 상태로도 유효성 검사는 테스트해볼 수 있습니다. 툴바에서 화살표를 눌러서( 혹은 '디버그' 메뉴의 '시작' 선택 ) 실행해 보시고, 이것저것 입력해서 테스트해보세요.

위 그림은 페이지 실행해서, 아무것도 입력하지 않고 '글쓰기' 버튼 클릭한 상태입니다. 필수 항목 옆에는 빨간색 별표가 표시되고, ValidationSummary 위치에는 빠진 항목이 정리되어 출력되었습니다. 메일주소는 필수 항목은 아니라서 입력하지 않으면 체크 안됩니다.

이제 지금 만든 폼이 실제로 작동하도록 할 차례입니다. '글쓰기' 버튼을 클릭하면 입력한 내용을 데이터베이스의 cstVSBoard 테이블에 추가해야 겠죠.

그러자면 DB에 연결할 객체와, 레코드를 추가할 명령을 실행할 객체가 필요할 텐데요, ADO.NET, SQL 서버 하에서 그에 해당하는 객체는 SqlConnection과 SqlCommand 입니다. 도구상자를 열어, '데이터'란에서 SqlConnection과 SqlCommand를 페이지 아무 곳에나 드래그-드롭합니다. 그러면 다음 그림처럼, 페이지 편집하는 부분 아래쪽에 객체가 추가될겁니다.

그림 왼쪽 하단의 'sqlConnection1' 'sqlCommand1' 이라 표시된 부분이 그것입니다. 끌어 놓은 후, 속성창을 열어 우선 '(Name)'란을 각각 'dbConnection', 'dbCommandAddArticle' 라고 바꿉니다.

dbConnection 의 경우, DB와의 연결을 담당할텐데요, 가장 중요한 것은 연결문자열이겠습니다. 연결문자열을 세팅하기 전에, 속성창 보시면 '(Dynamic Properties)' 라는 항목이 있을겁니다. 그 앞의 [+] 기호 클릭해서 확장하신 후, '(고급)' 란의 [...] 버튼을 클릭하면 'dbConnection의 동적속성' 이란 창이 뜹니다. 다음 그림처럼, 그 창 '속성'란의 ConnectionString 앞의 체크박스를 체크해줍니다.

이것은 해당 Connection의 ConnectionString이란 속성을 'dbConnection.ConnectionString' 이란 키에 매핑시킨다는 뜻입니다. 이에 대해선 잠시후 설명하겠습니다. '확인'을 클릭합니다.
그러면 속성창, 바로 아래의 ConnectionString 란도 'dbConnection.ConnectionString'으로 바뀔겁니다. 그란 옆의 [...] 버튼을 클릭하면 다음 그림처럼 되어있을겁니다. 변경 없이 확인만 하시고 '확인'을 클릭합니다.

이제 실제 연결 문자열을 세팅할 차례입니다. 아래쪽으로 몇칸 내려와서 '데이터'란에 있는 ConnectionString 항목의 화살표 버튼을 클릭하면 작은 메뉴가 뜨는데, 거기서 '<새 연결...>'을 선택합니다. 그러면 다음 그림처럼 '데이터 연결 속성'이란 창이 뜹니다.

서버이름( 로컬이면 localhost 입력), 아이디, 암호, 데이터베이스 등을 선택하고 '연결테스트' 버튼으로 연결되나 시험해보세요. 시험후, sa 같은 SQL 로그인 쓴다면 '암호 저장 허용' 체크하고 '확인'을 클릭합니다. 암호가 저장된다느니 하는 경고창 뜨면 읽어보시고 '확인'을 클릭하세요.

옆의 그림이 dbConnection 객체 속성란 편집한 모습입니다.

이것으로 연결 객체 설정은 끝났습니다만, 약간 설명이 필요할듯 싶습니다.
방금전 연결 문자열(ConnectionString) 설정하기 전에, 그 ConnectionString을 dbConnection.ConnectionString 이란 키와 매핑하였었습니다. 사실, 그렇게 매핑하지 않아도, 데이터란에 있는 ConnectionString만 설정해도 페이지는 잘 작동합니다. 그런데 그렇게 하면 연결문자열이 해당 페이지( 이경우 Write.aspx.cs )내에 저장됩니다. 다음에 다른 페이지도 만들것인데, 매 페이지마다 연결문자열을 저장한다면 귀찮기도 하고, 관리하기도 어렵습니다.  예컨대 암호가 바뀌면 모든 페이지의 연결문자열을 바꿔야겠죠. 그렇게 하기 보다는 하나의 파일에 관리하는 것이 나을겁니다.

한편, 앞에서 했던 것처럼 그 연결문자열을 어떤 키에 매핑시키면, 연결문자열은 해당 페이지에 저장되는 것이 아니라 Web.config 파일에 저장됩니다. ( Web.config 파일 열어 확인해보세요 ) 그럼 다음에 다른 페이지에서 sqlConnection 객체를 또 생성하게 되면, 키만 같은 것(여기선 dbConnection.ConnectionString)으로 매핑시키면 연결문자열이 자동으로 입력됩니다.
간단한 내용인데 설명하기가 어렵네요. ^^; 다음에 글 목록페이지(List.aspx) 설명할때 다시 설명드리겠습니다. 암튼, 키 매핑하는 것은 중요하니 기억해 두세요.

이제 방금 만든 연결 객체를 이용해서 실제로 DB 테이블에 레코드를 추가할 명령객체, dbCommandAddArticle 이라고 이름준 객체의 속성을 편집해 봅시다.

dbCommandAddArticle의 속성창에서 다음처럼 항목의 값을 입력합니다.

• Connection : 화살표 클릭, 기존객체에서 방금 정의한 dbConnection을 선택합니다. 오른쪽 그림 참조하세요.
• CommandText : 저장 프로시저 이름, 혹은 SQL 구문을 입력하는 란입니다. 여기서는 SQL 구문을 직접 입력하겠습니다.
  CommandText 란의 [...] 버튼을 클릭하면 '쿼리작성기' 란 창이 뜨면서 '테이블추가'라는 창도 뜹니다. '테이블추가' 창에선 '닫기'를 클릭하고, '쿼리작성기'란의 중간 부분에 SQL 구문을 다음처럼 입력합니다.

  insert into cstVSBoard
    (writer,pwd,email,title,mode,content) 
  values
    (@writer,@pwd,@email,@title,@mode,@content)
  

  다음 그림이, 쿼리문 입력하는 화면입니다.
  
• Parameters : [...] 버튼을 클릭하면 'SqlParameter 컬렉션 편집기' 라는 창이 뜹니다. 거기서 '추가' 버튼을 눌러 멤버를 하나씩 추가하면서, 다음처럼 항목을 추가합니다. ParameterName란, SqlDbType란, Size 란만 입력하시면 됩니다.
  　

  ParameterName	SqlDbType	Size
  @writer	VarChar	10
  @pwd	VarChar	20
  @email	VarChar	50
  @title	VarChar	100
  @mode	TinyInt	(입력안함)
  @content	Text	(입력안함)

  다음 그림이 파라메터중 '@title'란 편집하는 모습입니다.

SQL 문 중간중간에 @writer, @pwd 처럼 @ 기호를 앞에 붙인 변수들을 보셨을 겁니다. 그 변수들의 형식/크기 등을 정해서 파라메터로 정의하는 것입니다. 해당 파라메터의 값을 설정한후 dbCommand를 실행하면, insert 문이 실행되면서 테이블에 값이 들어갈 겁니다.

여기까지가 VS.NET에서 Visual 하게 할수 있는 부분입니다. 이제 버튼을 클릭했을때, 지금껏 설정한 것들을 작동시키도록 하는 코드를 넣을 차례입니다.
글쓰기 버튼, 즉 id 를 btnSubmit 로 주었던 그 버튼을 더블클릭하면, Write.aspx.cs 라는 소스 파일이 열리면서 btnSubmit_Click 이란 메서드가 생길겁니다. 거기에 다음 처럼 소스를 입력합니다. 파란색 글씨 부분입니다.

....
private void btnSubmit_Click(object sender, System.EventArgs e)
{
  if(IsValid) 
  {
    dbCommandAddArticle.Parameters["@writer"].Value = txtWriter.Text;
    dbCommandAddArticle.Parameters["@pwd"].Value = txtPassword.Text;
    dbCommandAddArticle.Parameters["@email"].Value = txtEmail.Text;
    dbCommandAddArticle.Parameters["@title"].Value = txtTitle.Text;
    dbCommandAddArticle.Parameters["@content"].Value = txtContent.Text;
    dbCommandAddArticle.Parameters["@mode"].Value = rdoMode.SelectedIndex;

    dbConnection.Open();
    dbCommandAddArticle.ExecuteNonQuery();
    dbConnection.Close();
    //Response.Redirect("list.aspx");
  }
}
...

암튼, 이제 다 되었습니다. 툴바의 작은 화살표를 눌러, 페이지를 실행해보세요.
입력하고 버튼을 클릭했는데 화면만 리로드되고 아무 반응이 없다면 잘 작동하는 겁니다. ^^; ( 아까 List.aspx 로 이동하는 행을 리마크 처리했으니까요 ) 그럼 Query Analyser 나 Enterprise Manager 에서 테이블을 열어서 방금 입력한 내용이 레코드로 추가되었나 확인해보세요. 레코드가 잘 입력된다면 성공입니다.

화면 디자인은 여러분들이 직접 해보세요. 다음 강좌는 이렇게 입력한 글을 목록으로 출력해볼, 글 목록 페이지(List.aspx) 입니다.