WebMatrix

웹 개발 101: 6부, 데이터 페이지 만들기

지금까지 WebMatrix에서 어떻게 웹 사이트를 만드는지, 또, 레이아웃과 스타일링을 사용해서 페이지를 더 간소하고, 관리하게 쉽게 만들고, 브라우저로 하여금 빠르게 다운로드하고 렌더링 하도록 만드는 법을 배웠습니다. 이 페이지들을 유동적이고 데이터기반으로 만들었는데요, 이번 강의에서는 데이터베이스에 데이터를 추가 할 수 있는 페이지를 만들 것입니다.

추가 페이지를 만들고 링크하기

WebMatrix를 사용해서 작업영역에 ‘AddMovie.cshtml’이라는 새로운 페이지를 만들어 보세요.

WebMatrix에서 제공하는 기본 코드를 지우고 다음 코드로 대체하세요.

<h1>Add a New Movie to the database</h1>

‘dataMovies.cshtml’ 페이지로 돌아가세요. 페이지를 열면 다음과 같아야 합니다:

@{

    var db= Database.Open("Movies");

    var sqlQ = "SELECT * FROM Favorites";

    var data = db.Query(sqlQ);  

}

 

<div id="movieslist">

  <ol>

    @foreach(var row in data){

      <li><a href="#">@row.Name, @row.Genre, @row.ReleaseYear</a></li>

    }

  </ol>

</div>

</div>를 닫기 전에,  아래 HTML을 써 넣으세요. 지난 강의를 떠올려보면, <div>은 anchor로, HTML에서 다른 페이지로의 링크를 정의합니다.

<a href="AddMovie.cshtml">Add a new movie</a>

사이트를 실행시고 브라우저 화면을 보세요. 다음과 같이 보일 것 입니다:

webmatrix_Creating_an_Add_Data_01

‘Add a new movie’ 링크를 선택하면, 앞에서 만든 페이지로 이동 할 것입니다.

webmatrix_Creating_an_Add_Data_02

지금은 많은 것이 쓰여져 있지 않지만, 다음 단계에서 추가하도록 하겠습니다.

더 나아가, 당신은 ‘Add a New Movie to the Database’가 다른 것들과 다른 스타일의 글자라는 것을 깨달았을 것 입니다. <h1>이지만, header h1과 같은 형태로 스타일링 되지 않았습니다. 이것을 고칠 수 있는 지 봅시다. (힌트, header h1은 <header> tag의 아기로 생각되지만, 사실은 그렇지 않습니다. 같은 형태로 스타일링 하려면 CSS파일에 어떤 것을 추가해야 할까요?)

영화 추가하는 폼(Form) 만들기

보통, HTTP를 사용할 때, 브라우저는 웹 서버에 HTTP프로토콜의 GET을 이용하여 요청을 합니다. GET은 이름에서 알 수 있듯이 서버로부터 정보를 받아옵니다. 당신은 여태까지 이러한 과정을 해왔지만 알지 못했을 것입니다. 왜냐하면 GET을 사용하는 것은 브라우저가 페이지를 요청하는 방식에 있어 내포되어 있기 때문입니다. HTTP프로토콜은 POST라는 것을 지원하는데, 이는 정보를 다시 서버에 전달 할 수 있게 해 줍니다.

지금 까지 본 것처럼, 유연한 어플리케이션을 갖는 것은 매우 좋습니다. 하지만, 다음과 같은 논리적 단계의 의문이 들 것입니다. 데이터를 서버에 보내는 것, 서버가 데이터를 가지고 무엇인가 하는 것 그리고 그 결과를 다시 보내는 것이 얼마나 힘든 일인가에 대한 의문이 들 것입니다. 아마 당신은 정보를 입력한 후 전송버튼을 이용해 서버에 정보를 보낼 수 있는 사이트를 수백 개 보았을 것입니다.

이러한 어플리케이션은 HTML형식을 이용합니다. 전송 버튼을 누르면, 브라우저는 POST를 사용하는 서버영역으로 정보를 전달합니다. 이것 또한 내포적으로 일어나기 때문에, 이를 사용하기 위해서 특별한 것을 하지 않아도 됩니다. 하지만 이에 맞춰 응답하기 위해서 서버 측의 코드에서 요청에 어떤 종류의 신호가 사용되는지 아는 것은 중요합니다. 데이터베이스에 영화를 추가하기 위해 이를 어떻게 하는 지 살펴볼 것 입니다.

아주 간단한 형식으로 시작해 봅시다. 예쁘진 않지만, 원하는 작업을 수행해 줍니다.

  <h1>Add a New Movie to the Database</h1>

    <form action="" method="post">

      <p>Name:<input type="text" name="formName" /></p>

      <p>Genre:<input type="text" name="formGenre" /></p>

      <p>Year:<input type="text" name="formYear" /></p>

      <p><input type="submit" value="Add Movie" /></p>

  </form>

다음과 같이 결과가 보일 것 입니다. 말했듯이 외관상으론 예쁘지 않지만, 후에 CSS를 이용해 아름답게 보이도록 꾸며볼 것 입니다.

webmatrix_Creating_an_Add_Data_03

이 화면을 만들기위해 방금 전에 적은 HTML 을 살펴봅시다.

<form action="" method="post">

새로운 것은 <form> 태그 입니다. 이는 형식을 정의해 주는데, 사용자가 전송 버튼을 눌렀을 때 서버에 이것이 HTTP POST임을 알려줍니다. action parameter 가 비어있다는 점에서 이 페이지는 (i.e. AddMove.cshtml) 형식에서 POST 형식으로 전송할 것입니다.

<p>Name:<input type="text" name="formName" /></p>

<p>Genre:<input type="text" name="formGenre" /></p>

<p>Year:<input type="text" name="formYear" /></p>

<form> 태그에서 세가지 <input> 제어 요소가 있음을 볼 수 있습니다. 이것들은 HTML <input> control을 사용하는데, 몇 개의 type settings을 설정 할 수 있습니다. 그리고 이 경우 type텍스트로 사용자가 텍스트를 입력해 넣을 수 있는 상자를 제공합니다. 각각은 텍스트 상자에 사용자가 입력한 전송 이전의 데이터를 서버가 저장하는 변수로 사용 될 이름을 갖게 됩니다.

<p><input type="submit" value="Add Movie" /></p>

마지막으로 submit버튼을 정의해주는 문구 ‘submit’을 적은 <input> control이 있습니다. 사용자가 이 버튼을 누르면, HTTP POST이 시작되어 사용자가 입력한 값들이 서버로 전송 될 것입니다.

지금 이 버튼을 누른다면 아무 일도 일어나지 않을 것입니다. 이는 아직 서버의  postback을 조절할 코드를 쓰지 않았기 때문입니다. 이제 다음으로 이를 해볼 것입니다.

폼(Form)으로 데이터 관리하기

‘form’을 만들었을 때 action parameter 공란으로 두었었습니다. 이것은 이 페이지가 form submission을 허용해야 함을 의미합니다.

‘AddMovie.cshtml’ 페이지에, 페이지가 로드 될 때마다 실행되어야 할 코드를 적어 넣음으로써 업데이트 할 수 있습니다. 이렇게 하기 위해서 코드 최상단에 다음과 같은 코드를 써 넣으세요:

   1:    @{

   2:      // Code to execute

   3:    }

   4:    

   5:    <h1>Add a New Movie to the Database</h1>

   6:    <form action="" method="post">

   7:      <p>Name:<input type="text" name="formName" /></p>

   8:      <p>Genre:<input type="text" name="formGenre" /></p>

   9:      <p>Year:<input type="text" name="formYear" /></p>

  10:      <p><input type="submit" value="Add Movie" /></p>

  11:    </form>

앞에서, 페이지 주소를 브라우저에 입력함으로써(혹은 파일을 만들기 위해 Run버튼을 누름으로써) 페이지를 불러올 때 브라우저가 HTTP GET을 요청에 이용한다는 것을 배웠습니다. 당신이 Submit 버튼을 눌렀을 때에는 action property가 공란이었기 때문에 HTTP POST가 아까와 똑같은 페이지를 불러왔습니다.

그래서 코드를 통해서 GET을 통해 불려지는 페이지 혹은 POST를 통해 실행되는 페이지를 지정해 주어야 합니다. 다행히, .NET Frameworks가 이러한 HTTP구문을 체크하도록 해 줍니다. 덕분에 HTTP 헤더 안을 살펴보고 어떤 종류의 메세지를 받는지 살펴 보는 복잡함을 피할 수 있습니다. 단순히 If(IsPost) 체크를 해 주면 됩니다. True일 경우, 정보를 입력하는데 구문이 사용되었음을 의미합니다.

   1:    @{

   2:      If(IsPost)

   3:      {

   4:        // Do something on the POST

   5:      }

   6:    }

Form,을 만들 때, 사용자가 전송하는 값들에 formName, formGenre, formYear과 같은 이름을 붙였습니다. 브라우저가 서버를 호출할 때,’formName=something’, ‘formGenre=something’,’formYear=something’ 등과 같은 구문을 포함하는 메세지를 사용 할 것입니다.

그래서 먼저 당신은 이러한 값들을 저장할 서버 공간을 마련한 후, HTTP post로 부터 읽어야 합니다. 이 과정은 보이는 것보다 훨씬 쉽습니다 🙂

   1:    @{

   2:      var MovieName="";

   3:      var MovieGenre="";

   4:      var MovieYear="";

   5:      if(IsPost){

   6:        MovieName=Request["formName"];

   7:        MovieGenre=Request["formGenre"];

   8:        MovieYear=Request["formYear"];

   9:      }

  10:    }

여기 세 개의 변수들 (MovieName, MovieGenre and MovieYear)이 지정되어 있음을 볼 수 있습니다. 이것들은 사용자가 입력한 값으로 초기값이 지정되어 있습니다. 다음 단계에서는 데이터베이스를 열고 여기에 정보를 저장하는 방법을 베울 것 입니다.

데이터베이스에 추가하기

이전 강의에서, 데이터베이스로부터 데이터를 불러올 때 SQL ‘SELECT’를 썼습니다. 이 경우에는, 당신은 insert 를 이용해서 데이터베이스에 데이터를 추가합니다.

SQL INSERT 명령어는 다음과 같은 형식의 구문을 사용합니다.

INSERT INTO Table (Column1, Column2, …ColumnN) VALUES (Value1, Value2, … ValueN)

우리 코드에 어떻게 적용하는 지를 살펴 봅시다:

   1:    @{

   2:    var MovieName="";

   3:    var MovieGenre="";

   4:    var MovieYear="";

   5:      if(IsPost){

   6:        MovieName=Request["formName"];

   7:        MovieGenre=Request["formGenre"];

   8:        MovieYear=Request["formYear"];

   9:        var SQLINSERT = "INSERT INTO Favorites (Name,ReleaseYear,Genre) VALUES (@0,@1,@2)";

  10:        var db = Database.Open("Movies");

  11:        db.Execute(SQLINSERT, MovieName, MovieYear, MovieGenre);

  12:      }

  13:    }

이 명령을 실행하기 위해서 SQLINSERT라는 문자열을 사용한다는 것을 알 수 있습니다. Razor가 문자열 안의 매개변수들을 판별해 줍니다. 따라서, ‘MovieName’, ‘MovieGenre’ 그리고 ‘MovieYear’에 값을 넣어주는 대신, 간단히 @0, @1 그리고 @2를 사용 할 수 있습니다. query를 실행시켜주면 framework가 그것들을 대체해 줍니다.또한 query에 넣기 전에 매개변수를 ‘청소’할 수 있습니다. 이것은 SQL Injection Attack’의 공격에서 SQL 코드를 매개변수로 사용하여 넘기는 것을 막아 줍니다.

다음으로 데이터베이스를 엽니다. 이 query를 삽입하기 위해서 데이터베이스상의 Execute method를 호출합니다. 값이 대체되고 데이터베이스에 추가됩니다.

사용자가 다시 좋아하는 영화 목록으로 되돌아 갈 수 있도록 다음과 같이 db.Execute() 뒤에 한 줄만 더 추가해 주세요. 사용자는 수정된 영화 목록을 볼 수 있을 것 입니다.

Response.Redirect("dataMovies.cshtml");

이제 페이지를 실행시켜 주세요. 다음과 같은 형식에 데이터를 입력해 주세요:

webmatrix_Creating_an_Add_Data_04

‘Add Movie’ 버튼을 누르면, 서버가 데이터를 데이터베이스에 추가하고 결과물을 볼 수 있도록 리스트로 되돌아가게 해 줄 것입니다. 당신은 추가된 영화 정보를 볼 수 있을 것입니다!

webmatrix_Creating_an_Add_Data_05

중요: 이번 강좌에서 사용자가 입력한 값은 바로 데이터베이스로 추가하는 법을 배웠습니다. 이 기초를 배우면서 사이트를 개설하기 이전에 꼭 유의해야 할 점이 있습니다.

  • 입력한 매개변수가 적절한 데이터 값인지 체크하고 입력이 잘못되었을 경우 정확한 피드백을 해 주어야 합니다. 예를 들어, ‘Year'(연도)에 대해서 잘못된 값을 입력하면 이것에 대해 사용자가 알게 하고 아무 데이터나 입력되지 않도록 해야 합니다.
  • 악랄한 해커가 당신의 데이터베이스를 손상시키기 위해 사용한 입력 매개변수 값이 없는지 체크해야 합니다. 가장 흔한 공격은 SQL Injection로, 해커가 SQL 명령을 보내고 서버가 이 코드를 실행하게 되면 개인정보가 유출되거나 파손됩니다. 

다음 링크에서 WebMatrix에서 데이터베이스사용에 대한 더 많은 것을 볼 수 있습니다: http://www.asp.net/webmatrix/tutorials/5-working-with-data

요약

영화 정보가 담긴 데이터베이스에 어떻게 데이터를 추가 할 수 있는지를 살펴 보았습니다. 사용자 입력을 조절하는 HTML을 만들었고, 데이터베이스에 직접 값을 입력하는 법을 배웠습니다. 그리고 데이터가 추가되자마자 다시 추가된 수정목록으로 되돌아 갈 수 있도록 해 보았습니다.

다음 강좌에서는 ‘추가’ 기능에서 한걸음 더 나아가서 이미 가지고 있는 데이터를 편집해 보도록 하겠습니다.

데이터 편집 페이지를 만드는 법에 대해 7부에서 계속 알아보기로 하겠습니다.

Archives