안녕하세요. 코난 김대우 입니다.
지난 2011년 1월 14일에 WebMatrix 정식버전(RTW)이 발표되었으며, 이 문서의 내용은 최신의 WebMatrix 정식버전에 맞춰 수정 되었습니다. 감사합니다.
- 최종 수정일 : 2011년 1월 19일

================================================================================


안녕하세요. 김대우 입니다.

코난이와 함께하는 Razor & WebMatrix 시리즈 강좌리스트

(1) WebMatrix와 Razor! 이제 시작합니다.

(2) WebMatrix 설치부터 Hello World까지

(3) Razor 강좌 - 기본 구문 및 주석 처리

(4) Razor 강좌 - 코드 블록과 POST 처리

(5) Razor 강좌 - 재사용 가능한 코드 생성

(6) Razor 강좌 - 레이아웃 페이지 구조 처리

(7) Razor 강좌 - 파일처리, 파일 업로드

(8) Razor 강좌 - 데이터베이스 처리 - (지금 보고 계신 내용)

(9) Razor 강좌 - Helper 소개(이미지, 비디오)

(10) Razor 강좌 - 디버깅

(11) Razor 강좌 - 캐시 처리

지난 시간에는 “(7) Razor 강좌 - 파일처리, 파일 업로드” 강좌를 진행 했습니다.

이번 시간에는 바로 이어서,(8) Razor 강좌 - 데이터베이스 처리” 강좌를 진행 하도록 하겠습니다. 

 

 

이번 시간은 데이터베이스 관련 내용이에요. 아마 이 Razor & WebMatrix 관련 내용을 기다리시는 분들 중에 이 데이터베이스 부분이 가장 궁금한 부분이실 것 같네요.

 

개인적으로, 가장 먼저 제가 테스트해보고 공부한 부분이 바로 이 데이터베이스 처리 부분인데요.

기존 웹 개발 언어들의 스파게티 코드를 얼마나 분리해냈고, DB처리가 간결하게 구성되어 있는지 비교하면서 보셔도 좋을 것 같습니다.

 

SQL과 같은 데이터베이스를 처음 하시는 분들의 참고자료 :

음... 부족한 제 강좌 글을 보시는 분들 중에는 데이터베이스가 어떤 것인지 잘 감이 안 잡히는 분도 계실 것 같은데요, 제가 예전에 데이터베이스 기본 개념을 설명한 강좌 몇개를 소개해 드릴 예정이니 처음 데이터베이스를 공부하시는 분들도 참고 하시면 많은 도움 되실 거에요. – 시간이 조금 지난 강좌라도 걱정 마세요. 데이터베이스 기본 개념은 여전 하답니다.  한번이라도 =, MSSQL이나 MySQL이나 오라클 등을 아주 잠시라도 접해보신 분들은 아마 이하 내용을 쉽게 이해 하실것 같아요. 하지만, 전혀 DB에 대해 경험이 없는 분이라면 아래 내용을 참고 하셔도 좋을 것 같습니다.


 

데이터베이스를 처음 하시는 분들이 참고하시면 좋을 내용

데이터베이스란 무엇이고 왜 사용하는가?
SQL프런티어가 전해 드리는 SQL2008 기본 강좌 – 최근에 진행된 SQLER의 SQL프런티어 강좌 입니다.
SQL2000강좌 게시판 – 앞 부분의 SELECT, INSERT, UPDATE, DELETE를 보시면서 감을 잡으시는 것도 좋을 것 같습니다.

웹 개발과 데이터베이스 처리는 뗄래야 뗄 수 없는 그런 찰떡 같은 관계입니다. 이번의 요즘 좀 한다는 분들이 관심좀 가지시고 계신 Razor가 데이터베이스 관련 개발을 공부할 좋은 기회라고 생각하시고 꼭 DB와 SQL 처리에 대한 감을 잡으시는 것도 좋을 것 같아요.

PHP나 ASP를 사용 하셨고, 예전에 사용해 보신 DB가 MSSQL이나 MySQL 또는 이기종의 DB라서 걱정되세요?
전혀 걱정 안하셔도 됩니다. 소견으로 감히 말씀 드리면, PHP보다 쉽고 다양한 편의성을 제공하며, ASP.NET의 엔터프라이즈급 성능과 안정성을 제공하는게 Razor 입니다. 당연히, WebMatrix에 포함된 DB도 SQL서버처럼 ANSI 표준을 따르고, 아무 DB나 경험이 있으시다면 쿼리 방식에는 차이가 없기 때문에 어려움 없이 개발을 진행 가능하답니다~ 이 강좌가 끝날 때 즈음이면 저 코난이처럼 “후덜~ Razor DB처리 이거 겁나 쉽네”를 연발 하시게 될거에요~!!

Razor와 WebMatrix에서의 데이터베이스의 관계?
예전 강좌에서 소개해 드렸는데요. WebMatrix에서는 간단히 SQL서버보다 더 작고 가벼운 SQL Server Compact Edition 4가 WebMatrix에 포함되어 있습니다.  전문 웹 개발자 분들을 위해 조금 더 상세한 설명을 드리자면, 무료 데이터베이스 엔진으로 .NET 기반의 API를 제공해 WebMatrix를 통한 손쉬운 웹 개발이 가능하며, SQL Server로 쉬운 데이터 마이그레이션이 가능합니다.(WebMatrix에서 자체 마이그레이션 도구를 제공합니다.)

처음 데이터베이스 관련 개발을 Razor와 WebMatrix로 진행하셔도 아무 걱정하지 마세요. 데이터베이스 쿼리나 테이블 생성 디자인 등도 모두 WebMatrix가 책임집니다~ 개발, DB, 배포 모든 과정을 하나의 심플하고 빠른 개발 도구, WebMatrix에서 진행 하실 수 있어요~

우워~ 세상 점점 좋아 지는구나~ 생유 생유~

WebMatrix의 데이터베이스 기능 참고자료 :
[동영상 강좌] (2) WebMatrix 5분 리뷰~ – 동영상으로 Database는 물론 WebMatrix에 대한 전반적인 기능을 보실 수 있습니다.
WebMatrix에서 데이터베이스 작업, 테이블 작업 뿐만 아니라 쿼리도 가능하다고 계속 말씀 드렸습니다. 실제로 이번 강좌를 진행할때 다 해보도록 할께요.


 

WebMatrix에서 데이터베이스 생성
 www_sqler_com_0037.jpg

(1) 왼쪽 아래의 데이터베이스를 클릭해 데이터베이스 영역으로 넘어 갑니다.
(2) 중간의 "사이트에 데이터베이스 추가"를 클릭해 데이터베이스를 생성하세요.

바로 DB명을 넣어 주시면 됩니다. 저는 이름을 "CohoWinery.sdf" 로 잡았습니다.


DB이름을 변경 하시려면 F2나 마우스 우버튼 후 "이름 바꾸기" 하시면 됩니다.
자, 데이터베이스도 만들었으니, 이제 실제 데이터를 넣고 테스트를 하기 위한 테이블 생성, 샘플 데이터 삽입 작업을 할 차례입니다.

WebMatrix에서 테이블 생성

WebMatrix에서 테이블을 생성하기 위해 아래 절차를 진행 하세요~
www_sqler_com_0038.jpg  
(1) 왼쪽 하단의 데이터베이스를 클릭하고,
(2) 왼쪽 상단에서 조금 전 만든 해당 DB를 선택 하신 후에
(3) 중간 위의 “새 쿼리”를 클릭해 새로운 SQL 쿼리를 수행합니다.
참고로, WebMatrix는 쿼리가 아닌 UI가 있는 화면으로 테이블 생성, 관계 설정 등도 가능합니다. 위의 화면 "새 테이블"을 누르고 UI로 제작도 가능하니 지금은 참고만 해 두세요~

테이블 생성 쿼리 수행

 

CREATE TABLE Customers (    
        CustomerID int NOT NULL
,       FirstName  nvarchar(128) NOT NULL
,       LastName   nvarchar(128) NOT NULL
,       Address    nvarchar(256) NOT NULL
,       Phone      nvarchar(15)  NOT NULL
,       Email      nvarchar(128) NOT NULL
,       PRIMARY KEY (CustomerID)
);

위의 테이블 생성 구문을 수행하시면 테이블이 생성됩니다. 실행을 위해서는, WebMatrix의 지금 열려 있는 쿼리 창에 붙여 넣으시고, F5를 누르시거나, 상단 중간 정도에 위치한 “실행”를 클릭 하셔도 됩니다.

"명령이 완료되었습니다" 라고 나오실 거에요. 그럼 성공~

확인을 위해 왼쪽 맨 위의 우리 DB인 “CohoWinery.sdf” 펼치고 나오는 "테이블"에서 마우스 우측 버튼 - “새로고침”을 실행하면, Customers라는 테이블이 보이실 겁니다. 또는, 왼쪽 메뉴에서 Customers 테이블을 더블클릭하거나 우클릭 후 "데이터"를 클릭 하셔도 데이터 조회가 가능합니다. - 참 쉽죠? ^_^;;;

바로 이어서, 샘플 데이터를 삽입해 보도록 할게요.



샘플 데이터 삽입 – INSERT 처리
쿼리창의 CREATE TABLE 구문을 지우고 아래 INSERT 구문을 “한 줄씩” 복사해 실행합니다.

 
주의 – 아래 쿼리들을 한 Insert 구문씩 복사해 넣으세요.

INSERT INTO Customers VALUES (1, 'Jim', 'Corbin', '3425 23 Ave SE New York 87905', '555-0100', 'JC@cpalnd.com');

INSERT INTO Customers VALUES (2, 'Eva', 'Coretta', '800 100 St Portland 34567', '555-0101', 'EC@cpalnd.com');

INSERT INTO Customers VALUES (3, 'Sara', 'Davis', '1123 Main St Orcas 3444', '555-0200', 'SW@contoso.com');

데이터 조회 구문
SELECT * FROM Customers;


(한 줄씩 복사해 개별 실행하려니 갑갑 하시죠? 현재 WebMatrix가 전용 MSSQL 관리 도구나 개발도구와 달리, 몇몇 부분이 조금 불편하실 수 있습니다. 차기 버전에서는 개선될 예정이라고 하니 도움 되시길 바랍니다.)

 

자~ 이렇게 해서 간단히 데이터베이스 작업을 수행 했습니다. 저희가 해본 작업은
(1) 데이터베이스 생성
(2) 테이블 생성
(3) 쿼리 도구를 이용해 데이터 삽입, 데이터 조회

작업을 진행해 보았습니다. 그럼 이제 본편~ Razor에서 데이터베이스를 처리하는 부분을 진행해 보도록 하지요~


Razor에서 데이터 조회 – SELECT 처리

 

@{    
    var db = Database.Open("CohoWinery");    
    var selectQueryString = "SELECT * FROM Customers ORDER BY CustomerID";
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>   
        <title>고객리스트 </title>
    </head>
    <body>   
        <h2>         Coho Winery 고객리스트     </h2>         
        <table border="1">        
            <thead>            
                <tr>                
                <th>이름</th>                
                <th>성</th>                
                <th>주소</th>               
                <th>전화번호</th>                
                <th>Email</th>            
                </tr>        
            </thead>        
            <tbody>            
                @foreach (var row in db.Query(selectQueryString)) {                
                <tr>                    
                    <td>@row.FirstName</td>                   
                    <td>@row.LastName</td>                   
                    <td>@row.Address</td>                      
                    <td>@row.Phone</td>                   
                    <td> <a href="mailto:@row.Email" style="text-decoration: underline;">@row.Email</a></td>                
                </tr>            
            }        
            </tbody>    
        </table>
    </body>
</html>


“DB” 폴더를 웹사이트 루트에 만들고 “01_select.cshtml” 파일을 만들고 복사해 실행합니다.

Razor는 기존의 많은 웹 개발 방식과 달리, 더 쉽고 더 빠른 웹개발을 그 목표로 하고 있습니다.

개인적으로 저 코난이가 Razor에 푸욱~ 빠지게 된 이유는 바로 이 데이터베이스 처리 방식. 스파게티 코드 없이 깔끔하고, DB처리를 우리 웹 개발자에게는 눈물겹게 감사하도록, 딱 한큐로 끝내고 있습니다. DB처리 방식이나 Helper를 이용해 그 동안 있었던 웹 개발의 어려움과 복잡함을 덜어내고, 개발자에게 더 쉽고 빠른 개발이 가능하게 돕는 녀석이지요.

지~ 코드를 봐 볼까요~
DB연결 방식으로 Database.OpenFile을 이용합니다. (주석들을 참고하시면 여러 DB연결 방식 참조가 가능합니다.)

var db = Database.Open("CohoWinery);   


저는 이렇게 연결 했습니다. 이어서, SQL 쿼리 구문을 만들고, 아래 Foreach 구문에서 db.Query로 한큐에 실행합니다.

@foreach (var row in db.Query(selectQueryString))

사실 위의 두 줄로 DB연결이 끝난 겁니다. 잊지 마시고, 이 두 과정을 꼭 잘 눈에 익혀 두시면 나중에도 DB관련 처리를 하실 때 많은 도움 되실 겁니다.

개발 경험이 있으신 분들을 위해… WebMatrix에 기본 포함된 SQL CE가 아니라, 타 DBMS를 이용하실 경우(MSSQL서버와 같은)에는 기존 방식과 마찬가지로, Connection String을 이용해 처리가 가능합니다.(참고로, Connection String은 Web.config에 저장됩니다. Connection String 구성 등은 나중에 요청이 있으시거나 하면 상세하게 풀어 볼게요.) 
그럼 이어서 Razor로 데이터 삽입 처리를 보도록 하겠습니다.


Razor에서 데이터 삽입 – INSERT 처리

 
@{   
    var db = Database.Open("CohoWinery");     
    var CustomerID = Request.Form["CustomerID"];   
    var FirstName = Request.Form["FirstName"];   
    var LastName = Request.Form["LastName"];   
    var Address = Request.Form["Address"];   
    var Phone = Request.Form["Phone"];   
    var Email = Request.Form["Email"];            

    if (IsPost) {       
        // 사용자의 입력 값 저장 & 입력값을 검사
        CustomerID = Request["CustomerID"];       
        if (CustomerID.IsEmpty()) {           
            ModelState.AddError("CustomerID", "고객 ID 번호를 입력하세요.");       
        }                 
        // 사용자의 입력 값 저장 & 입력값을 검사  
        FirstName = Request["FirstName"];       
        if (FirstName.IsEmpty()) {           
            ModelState.AddError("FirstName", "이름을 입력하세요.");       
        }                
        // 사용자의 입력 값 저장 & 입력값을 검사    
        LastName = Request["LastName"];       
        if (LastName.IsEmpty()) {           
            ModelState.AddError("LastName", "성을 입력 하세요.");       
        }                
        // 사용자의 입력 값 저장 & 입력값을 검사
        Address = Request["Address"];       
        if (Address.IsEmpty()) {          
            ModelState.AddError("Address", "주소를 입력하세요.");       
        }               
        // 사용자의 입력 값 저장 & 입력값을 검사    
        Phone = Request["Phone"];       
        if (Phone.IsEmpty()) {           
            ModelState.AddError("Phone", "전화번호를 입력하세요.");       
        }                
        // 사용자의 입력 값 저장 & 입력값을 검사   
        Email = Request["Email"];       
        if (Email.IsEmpty()) {           
            ModelState.AddError("Email", "이메일 주소를 입력하세요.");       
        }       
        if(ModelState.IsValid) {          
            // 입력받은 값을 파라미터화 후 insert 구문에 전달
            var insertQueryString =            
            "INSERT INTO Customers (CustomerID, FirstName, LastName, Address, Phone, Email) VALUES (@0, @1, @2, @3, @4, @5)";                        
            // 쿼리 실행
            db.Execute(insertQueryString, CustomerID, FirstName, LastName, Address, Phone, Email);                        
            // 삽입 후 데이터 조회 페이지로 이동
            Response.Redirect("01_select.cshtml");       
        }   
    }    
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>  
        <title>고객 정보 추가</title>   
        <style type="text/css">      
        label {               
            float: left;               
            width: 8em;               
            text-align: right;              
            margin-right: 0.5em;
            }                      
        fieldset {                   
        qpadding: 1em;                   
        border: 1px solid;                   
        width: 50em;}      
        legend {               
        padding: 0.2em 0.5em;               
        border: 1px solid;               
        font-weight: bold;
        }   
        </style>
        </head>
    <body>  
        <h2>새로운 고객 정보 추가</h2>        
        <div style="font-weight:bold; color:red">       
            @Html.ValidationSummary("입력값 오류가 있습니다.")   
        </div>        
        <form method="post" action="">            
            <fieldset>           
                <legend>고객 추가</legend>           
                <div>               
                    <label>고객ID번호:</label>               
                    <input name="CustomerID" type="text" size="50"  value="@CustomerID" />                           
                </div>
                <div>               
                    <label>이름:</label>               
                    <input name="FirstName" type="text" size="50" value="@FirstName" />           
                </div>           
                <div>               
                    <label>성:</label>               
                    <input name="LastName" type="text" size="50" value="@LastName" />           
                </div>           
                <div>               
                    <label>주소:</label>               
                    <input name="Address" type="text" size="50" value="@Address" />           
                </div>           
                <div>               
                    <label>전화번호:</label>               
                    <input name="Phone" type="text" size="50" value="@Phone" />                      
                </div>           
                <div>               
                    <label>Email:</label>               
                    <input name="Email" type="text" size="50" value="@Email" />           
                </div>           
                <div>               
                    <label>&nbsp;</label>               
                    <input type="submit" value="Insert" class="submit" />           
                </div>       
            </fieldset>   
        </form>
    </body>
</html>


02_Insert.cshtml 파일로 저장합니다.

참고하실 내용이 두 개 정도가 있는데요. INSERT 구문을 수행하실 경우에는 이렇게 파라미터화 된 값을 전달합니다.

// 입력 받은 값을 파라미터화 후 insert 구문에 전달
var insertQueryString =              
"INSERT INTO Customers (CustomerID, FirstName, LastName, Address, Phone, Email) VALUES (@0, @1, @2, @3, @4, @5)";                         


또한, 이번에 새롭게 등장한 또 하나의 Razor Helper인 “Html.ValidationSummary” 녀석인데요.

이 Html.ValidationSummary을 이용하면, 입력 값을 손쉽게 검사해 입력 오류 여부를 사용자에게 쉽게 알릴 수 있습니다.

간단히 빈 값을 입력하게 되면 해당 체크 영역에서 값을 처리해 @Html.ValidationSummary 영역에 표시하게 됩니다.

db4
요렇게 자동으로 도와 줍니다.  개발자의 번거로운 작업인 입력값 체크 처리를 간략화 시킬 수 있는 깔꼼한 녀석이에요. 저희들의 경우 이런 validation을 쓰는 개발자 분들과 UI를 위해 직접 만들어 사용하시는 경우도 꽤 있는 것 같습니다. 

다음은 Update를 알아 보도록 할게요. 이제 데이터베이스 처리 좀 감이 잡히시죠? Update도 전혀~ 어렵지 않습니다.


Razor로 데이터베이스 수정 – Update 처리
데이터를 수정하려면, 먼저 조회를 하고, 수정 루틴을 넣은 후에 수정 화면이 있어야겠지요. 조회는 위의 SELECT와 유사하고, Update 값 화면은 INSERT 화면과 유사합니다.

 
@{      
    var db = Database.Open("CohoWinery");       
    var selectQueryString = "SELECT * FROM Customers ORDER BY CustomerID";
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>  
        <title>고객 정보 수정</title>
    </head>
    <body>  
        <h2>          고객 정보 수정     </h2>
        <form method="post" action="" name="form">       
            <table border="1">           
                <thead>               
                    <tr>                   
                    <th/>                   
                    <th>이름</th>                   
                    <th>성</th>                   
                    <th>주소</th>                   
                    <th>전화번호</th>                   
                    <th>Email</th>               
                    </tr>           
                </thead>           
                <tbody>               
                @foreach (var row in db.Query(selectQueryString)) {                   
                    <tr>                       
                        <td><a href="@Href("~/db/04_update_02.cshtml", row.CustomerID)">수정</a></td>                                      
                        <td>@row.FirstName</td>                       
                        <td>@row.LastName</td>                       
                        <td>@row.Address</td>                       
                        <td>@row.Phone</td>                       
                        <td><a href="mailto:@row.Email"     style="text-decoration: underline;">@row.Email</a></td>                   
                    </tr>               
                }           
                </tbody>       
            </table>   
        </form>
    </body>
</html>

03_update_01.cshtml 파일로 저장해 두겠습니다. 이어서 UPDATE에 필요한 후속 파일을 만들어 주세요. 위의 “04_update_02.cshtml” 페이지로 CustomerID를 넘겨주고 있어요. 참고 하시길 바랍니다.


 

 
@{    
    var db = Database.Open("CohoWinery");        
    var selectQueryString = "SELECT * FROM Customers WHERE CustomerID=@0";        
   
    //  업데이트를 위해 고객ID번호로 정보를 읽어 옵니다.
    //  고객ID는 앞의 update 페이지에서 넘겨 받았습니다. 
    var CustomerID  = UrlData[0];         
   
    if (CustomerID.IsEmpty()) {        
        Response.Redirect("03_update_01.cshtml");    
    }             
   
    // 업데이트를 위해 고객 정보를 조회
    var row = db.QuerySingle(selectQueryString, CustomerID);    
   
    // Update 입력 상자에 넣기 위해 변수에 값을 저장
    var FirstName   = row.FirstName;     
    var LastName    = row.LastName;    
    var Address     = row.Address;    
    var Phone       = row.Phone;    
    var Email       = row.Email;

   if (IsPost) {        
   
    CustomerID = Request["CustomerID"];        
    if (CustomerID == null) {              
        ModelState.AddError("CustomerID", "고객ID 번호를 입력하세요.");        
    }                  
   
    FirstName = Request["FirstName"];        
    if (String.IsNullOrEmpty(FirstName)) {            
        ModelState.AddError("FirstName", "이름을 입력하세요.");        
    }                 
   
    LastName = Request["LastName"];        
    if (String.IsNullOrEmpty(LastName)) {            
        ModelState.AddError("LastName", "성을 입력하세요.");        
    }                 
   
    Address = Request["Address"];        
    if (String.IsNullOrEmpty(Address)) {            
        ModelState.AddError("Address", "주소를 입력하세요.");        
    }                
   
    Phone = Request["Phone"];        
    if (String.IsNullOrEmpty(Phone)) {            
        ModelState.AddError("Phone", "전화번호를 입력하세요.");        
    }                 
   
    Email = Request["Email"];        
    if (String.IsNullOrEmpty(Email)) {            
        ModelState.AddError("Email", "이메일 주소를 입력하세요.");        
    }        
   
    if(ModelState.IsValid) {           
        // 업데이트 처리를 위해 파라미터화 작업    
        var updateQueryString = "UPDATE Customers SET FirstName=@0, LastName=@1, Address=@2, Phone=@3, Email=@4 WHERE CustomerID=@5" ;             
        // UPDATE 쿼리 구문 실행
        db.Execute(updateQueryString, FirstName, LastName, Address,               
            Phone, Email, CustomerID);             
        // 업데이트를 위한 리스트 페이지로 이동
        Response.Redirect("~/db/03_update_01.cshtml");        
    }    
}
}
   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>   
        <title>고객 정보 수정</title>         
        <style type="text/css">       
        label {                
            float: left;                
            width: 8em;                
            text-align: right;                
            margin-right: 0.5em;
        }       
        fieldset {                    
            padding: 1em;                    
            border: 1px solid;                    
            width: 50em;
        }       
        legend {                
            padding: 0.2em 0.5em;                
            border: 1px solid;                
            font-weight: bold;
        }    
        </style>
    </head> 
    <body>   
        <h2>       고객 정보 수정 페이지     </h2>         
        <div style="font-weight:bold; color:red">        
            @Html.ValidationSummary("입력값에 오류가 있습니다 :")    
        </div>         
        <form method="post" action="">              
            <fieldset>            
                <legend>고객정보 수정</legend>            
                <div>              
                    <label>고객ID 번호:</label>              
                    <input name="CustomerID" type="text" size="50" value="@CustomerID" />             
                </div>            
                <div>                
                    <label>이름:</label>                
                    <input name="FirstName" type="text" size="50" value="@FirstName" />             
                </div>            
                <div>                
                    <label>성:</label>                
                    <input name="LastName" type="text" size="50" value="@LastName" />                             
                </div>            
                <div>                
                    <label>주소:</label>                
                    <input name="Address" type="text" size="50" value="@Address" />            
                </div>            
                <div>
                    <label>전화번호:</label>                
                    <input name="Phone" type="text" size="50" value="@Phone" />              
                </div>            
                <div>                
                    <label>Email:</label>                
                    <input name="Email" type="text" size="50" value="@Email" />            
                </div>            
                <div>                
                    <label>&nbsp;</label>                
                    <input type="submit" value="Update" class="submit" />            
                </div>        
            </fieldset>    
        </form>
    </body>
</html>

04_update_02.cshtml 파일로 저장합니다. 실행을 위해 앞에서 만들었던 03_update_01.cshtml 업데이트 리스트 페이지를 실행하세요.
위의 업데이트 화면은 Insert 처리와 마찬가지로 validation 후에 파라미터화 된 값을 처리하게 되면서 마무리 됩니다. 마지막 삭제처리 - DELETE를 알아 보도록 할께요~


Razor로 데이터베이스 값 삭제 – DELETE 처리
어느덧 마지막 내용이네요. 삭제 처리를 위한 DELETE는 더 쉽습니다. 데이터 조회 리스트 화면에서 해당 값을 선택해 “삭제”를 클릭하면 처리가 완료되는 처리 입니다.

 

@{    
    var db = Database.Open("CohoWinery");        
    var selectQueryString = "SELECT * FROM Customers ORDER BY CustomerID";     
    if (IsPost) {                
        var deleteQueryString = "DELETE FROM Customers WHERE CustomerID=@0";        
        db.Execute(deleteQueryString, Request["rowID"]);    

    }
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>   
        <title>고객 정보 삭제</title>     
        <script type="text/javascript">                 
            function deleteRow(rowID) {          
                var answer = confirm("정말 삭제 하시겠습니까?")          
                if (answer==true)            
                {                
                    document.form.rowID.value = rowID;                
                    document.form.submit();            
                }        
            }        
        </script> 
    </head>
    <body>   
        <h2 class="SubHeader">         고객 정보 삭제     </h2>     
        <form method="post" action="" name="form">        
            <input type="hidden" name="rowID" value="" />        
            <table border="1">            
                <thead>                
                    <tr>                    
                        <th/>                    
                        <th>이름</th>                    
                        <th>성</th>                    
                        <th>주소</th>                    
                        <th>전화번호</th>                    
                        <th>Email</th>                
                    </tr>            
                </thead>            
                <tbody>
                    @foreach (var row in db.Query(selectQueryString)) {                    
                    <tr>                    
                        <td><a href="Javascript:deleteRow('@row.CustomerID')"> 삭제</a></td>                        
                        <td>@row.FirstName</td>                        
                        <td>@row.LastName</td>                        
                        <td>@row.Address</td>                        
                        <td>@row.Phone</td>                        
                        <td><a href="mailto:@row.Email" style="text-decoration:underline;">@row.Email</a></td>                    
                    </tr>                
                    }            
                </tbody>        
            </table>    
        </form>
    </body>
</html>

05_del.cshtml 파일로 저장하고 실행하세요.

마지막으로, 데이터를 손쉽게 웹에서 표시해주는 WebGrid Helper를 소개해 드리려고 합니다. 기본 제공되는 Grid로 그리드로 사용하기 편리하실 거에요. 자동 페이징이나, 쉬운 디자인 등등... 이번에는 맛보기 정도만 하고, 나중에 기회되면 이 WebGrid도 잘 풀어 보도록 할께요. ^_^

 
WebGrid Helper를 이용한 손쉬운 데이터 표시

 

@{
    var db = Database.Open("CohoWinery");
    var selectQueryString = "SELECT * FROM Customers";
    var data = db.Query(selectQueryString);
    var grid = new WebGrid(data, defaultSort: "FirstName", rowsPerPage: 5);
}

<!DOCTYPE html>
<html>
    <head>
        <title> WebGrid에 데이터를 표시 합니다. </title>
        <style type="text/css">
            h1 {font-size: 14px;}
            .grid { margin: 4px; border-collapse: collapse; width: 600px; }
            .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
            .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
            .alt { background-color: #E8E8E8; color: #000; }
            .FirstName { width: 200px; }
        </style>
    </head>
    <body>
    <h1>웹그리드로 데이터를 표시</h1>
        @grid.GetHtml(
            tableStyle: "grid",
            headerStyle: "head",
            alternatingRowStyle: "alt",
            columns: grid.Columns(
                grid.Column("FirstName", "이름", style: "product"),
                grid.Column("Address", "주소", format:@<i>@item.Address</i>),
                grid.Column("Phone", "전화번호", format:@<text>@item.Phone</text>)
            )
        )

</html>


WebGrid.cshtml로 저장하고 실행해 보세요. 그럼 이런 형태로 보이실 겁니다. ^_^ 

 

 

db5 

짧은 코드로 그리드가 아주 깔끔하게 나오죠? 이런 방법도 Razor와 WebMatrix는 기본제공하고 있으니 참고 하시길 바랍니다.

 

Razor와 WebMatrix를 이용한 데이터베이스 개발의 장점은?
데이터 처리에 대한 예를 말씀 드렸어요. 어쩌면 Razor가 기존의 웹개발 방식과 가장 차별화를 제공하는 부분이 바로 이 데이터베이스 처리 부분일 겁니다.

Razor & WebMatrix의 데이터베이스 개발 작업의 장점은
(1) 자체 내장된 SQL DB를 이용하고
(2) 무료 SQL서버인 SQL Express나 SQL서버 상위 버전으로 100% 마이그레이션을 WebMatrix 내부에서 지원하며
(3) 간결한 데이터베이스 접근 처리 방식
(4) 개발과 쿼리, 데이터베이스 작업을 모두 하나의 도구인 WebMatrix에서 제공
하는 것은 Razor와 데이터베이스 개발에 대한 큰 매력이 아닐까 생각합니다.

데이터베이스에 경험이 없으신 분들은 내용이 조금 어려웠을지도 모르겠습니다. 곧, 이 강좌에 대해서도 동영상 강좌를 준비하고 있으니 많은 도움 되시길 바랍니다.

 

그럼 다음 강좌인 (9) Razor 강좌 - Helper 소개(이미지, 비디오) 에서 뵙도록 하겠습니다. ^_^ 


 

Razor & WebMatrix 시리즈 강좌

(1) WebMatrix와 Razor! 이제 시작합니다.
(2) WebMatrix 설치부터 Hello World까지
(3) Razor 강좌 - 기본 구문 및 주석 처리
(4) Razor 강좌 - 코드 블록과 POST 처리
(5) Razor 강좌 - 재사용 가능한 코드 생성
(6) Razor 강좌 - 레이아웃 페이지 구조 처리
(7) Razor 강좌 - 파일처리, 파일 업로드
(8) Razor 강좌 - 데이터베이스 처리
(9) Razor 강좌 - Helper 소개(이미지, 비디오)
(10) Razor 강좌 – 디버깅
(11) Razor 강좌 - 캐시 처리
(12) Razor 강좌 – SMTP 메일전송(Live메일과 Gmail지원. SSL지원)
(13) Razor 강좌 – 웹사이트 전체, 또는 폴더 내 파일 요청 시 항상 실행 되는 모듈

(14) Razor 강좌 - URL 라우팅(Routing) 으로 SEO 최적화 구현



지난 동영상 참고 자료 :

[동영상 강좌] (1) WebMatrix 첫 실행 & Hello World까지 달려요~

[동영상 강좌] (2) WebMatrix 5분 리뷰~

[동영상 강좌] (3) Razor 강좌 - 기본 구문 및 주석 처리

[동영상 강좌] (4) Razor 강좌 - 코드 블록과 POST 처리

[동영상 강좌] (5) Razor 강좌 - 재사용 가능한 코드 생성
[동영상 강좌] (6) Razor 강좌 - 레이아웃 페이지 구조 처리

[동영상 강좌] (7) Razor 강좌 - 파일처리, 파일 업로드

[동영상 강좌] (8) Razor 강좌 - 데이터베이스 처리
[동영상 강좌] (9) Razor 강좌 - Helper 소개(이미지, 비디오)

[동영상 강좌] (10) Razor 강좌 – 디버깅

[동영상 강좌] (11) Razor 강좌 - 캐시 처리

[동영상 강좌] (12) Razor 강좌 – SMTP 메일전송(Live메일과 Gmail지원. SSL지원)

[동영상 강좌] (13) Razor 강좌 – 웹사이트 전체, 또는 폴더 내 파일 요청 시 항상 실행 되는 모듈

[동영상 강좌] (14) Razor 강좌 - URL 라우팅(Routing) 으로 SEO 최적화 구현

 





profile

부족하지만, SQLER의 누군가와 함께한 나눔을 통해 제가 더 많이 즐거웠습니다.
SQLER와 함께 즐거워 할수록, 그 나눔을 통해 더 많은 기회와 가치를 발견하게 되었습니다.
나눔의 생각이 앞으로도 계속, SQLER를 움직일 것입니다.

코난, 김대우 / SQLER 운영자 / 골라먹는 SQLER RSS 정보 구독 / 실시간 SQLER 소식 uxkorea 트위터