(8) Razor 강좌 - 데이터베이스 처리

음... 부족한 제 강좌 글을 보시는 분들 중에는 데이터베이스가 어떤 것인지 잘 감이 안 잡히는 분도 계실 것 같은데요, 제가 예전에 데이터베이스 기본 개념을 설명한 강좌 몇개를 소개해 드릴 예정이니 처음 데이터베이스를 공부하시는 분들도 참고 하시면 많은 도움 되실 거에요. – 시간이 조금 지난 강좌라도 걱정 마세요. 데이터베이스 기본 개념은 여전 하답니다. 한번이라도 =, 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에서 데이터베이스 생성

(1) 왼쪽 아래의 Databases를 클릭해 데이터베이스 영역으로 넘어 갑니다.
(2) 중간의 Add a Database to your site를 클릭해 데이터베이스를 생성하세요.
(3) 위의 웹사이트 하위에 WebSite1.sdf라는 DB가 잘 만들어 진게 보이시면 완료 되신 겁니다. ^_^
이제 Database 이름을 변경해 보도록 할께요.(아쉽지만, 현재 버전-Beta1 - WebMatrix는 Databases 섹션에서 DB이름 변경이 불가해요.)

Database 이름 변경
(1) Files를 선택하고
(2) 해당 데이터베이스를 선택, 마우스 우버튼 후 “Rename” 이름을 변경합니다.
(3) 이름을 저처럼 CohoWinery.sdf 로 잡아 주세요.(이후 예제에서 이 이름으로 사용합니다.)
자, 데이터베이스도 만들었으니, 이제 실제 데이터를 넣고 테스트를 하기 위한 테이블 생성, 샘플 데이터 삽입 작업을 할 차례입니다.

WebMatrix에서 테이블 생성
WebMatrix에서 테이블을 생성하기 위해 아래 절차를 진행 하세요~

(1) 왼쪽 하단의 Databases를 클릭하고,
(2) 왼쪽 상단에서 조금 전 만든 해당 DB를 선택 하신 후에
(3) 중간 위의 “New Query”를 클릭해 새로운 SQL 쿼리를 수행합니다.
참고로, WebMatrix는 쿼리가 아닌 UI가 있는 화면으로 테이블 생성, 관계 설정 등도 가능합니다. 위의 화면 New Table을 누르고 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를 누르시거나, 상단 중간 정도에 위치한 “Execute”를 클릭 하셔도 됩니다.

Command(s) completed successfully 라고 나오실 거에요. 그럼 성공~
확인을 위해 왼쪽 맨 위의 우리 DB인 “CohoWinery.sdf” 펼치고 나오는 Tables에서 마우스 우측 버튼 - “Refresh”를 실행하면, Customers라는 테이블이 보이실 겁니다. 또는, 왼쪽 메뉴에서 Customers 테이블을 더블클릭하거나 우클릭 후 "Data"를 클릭 하셔도 데이터 조회가 가능합니다. - 참 쉽죠? ^_^;;;
바로 이어서, 샘플 데이터를 삽입해 보도록 할게요.

샘플 데이터 삽입 – 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.OpenFile("CohoWinery.sdf");
//var db = Database.OpenFile("~/App_Data/CohoWinery.sdf");
//var db = Database.OpenFile(@"Data Source=C:\Users\사용자명\Documents\My Web Sites\WebSite1\App_Data\CohoWinery.sdf");
var selectQueryString = "SELECT * FROM Customers ORDER BY CustomerID";
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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.OpenFile("CohoWinery.sdf");
저는 이렇게 연결 했습니다. 이어서, SQL 쿼리 구문을 만들고, 아래 Foreach 구문에서 db.Query로 한큐에 실행합니다.
@foreach (var row in db.Query(selectQueryString))
사실 위의 두 줄로 DB연결이 끝난 겁니다. 잊지 마시고, 이 두 과정을 꼭 잘 눈에 익혀 두시면 나중에도 DB관련 처리를 하실 때 많은 도움 되실 겁니다.

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

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

@{
    var db = Database.OpenFile("CohoWinery.sdf");
    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()) {
            Validation.AddFieldError("CustomerID", "고객 ID 번호를 입력하세요.");
        }
        // 사용자의 입력 값 저장 & 입력값을 검사
        FirstName = Request["FirstName"];
        if (FirstName.IsEmpty()) {
            Validation.AddFieldError("FirstName", "이름을 입력하세요.");
        }
        // 사용자의 입력 값 저장 & 입력값을 검사
        LastName = Request["LastName"];
        if (LastName.IsEmpty()) {
            Validation.AddFieldError("LastName", "성을 입력 하세요.");
        }
        // 사용자의 입력 값 저장 & 입력값을 검사
        Address = Request["Address"];
        if (Address.IsEmpty()) {
            Validation.AddFieldError("Address", "주소를 입력하세요.");
        }
        // 사용자의 입력 값 저장 & 입력값을 검사
        Phone = Request["Phone"];
        if (Phone.IsEmpty()) {
            Validation.AddFieldError("Phone", "전화번호를 입력하세요.");
        }
        // 사용자의 입력 값 저장 & 입력값을 검사
        Email = Request["Email"];
        if (Email.IsEmpty()) {
            Validation.AddFieldError("Email", "이메일 주소를 입력하세요.");
        }
        if(Validation.Success) {
            // 입력받은 값을 파라미터화 후 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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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> </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 영역에 표시하게 됩니다.

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

다음은 Update를 알아 보도록 할게요. 이제 데이터베이스 처리 좀 감이 잡히시죠? Update도 전혀~ 어렵지 않습니다.
Razor로 데이터베이스 수정 – Update 처리
데이터를 수정하려면, 먼저 조회를 하고, 수정 루틴을 넣은 후에 수정 화면이 있어야겠지요. 조회는 위의 SELECT와 유사하고, Update 값 화면은 INSERT 화면과 유사합니다.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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.OpenFile("CohoWinery.sdf");
    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) {
        Validation.AddFieldError("CustomerID", "고객ID 번호를 입력하세요.");
    }
    FirstName = Request["FirstName"];
    if (String.IsNullOrEmpty(FirstName)) {
        Validation.AddFieldError("FirstName", "이름을 입력하세요.");
    }
    LastName = Request["LastName"];
    if (String.IsNullOrEmpty(LastName)) {
        Validation.AddFieldError("LastName", "성을 입력하세요.");
    }
    Address = Request["Address"];
    if (String.IsNullOrEmpty(Address)) {
        Validation.AddFieldError("Address", "주소를 입력하세요.");
    }
    Phone = Request["Phone"];
    if (String.IsNullOrEmpty(Phone)) {
        Validation.AddFieldError("Phone", "전화번호를 입력하세요.");
    }
    Email = Request["Email"];
    if (String.IsNullOrEmpty(Email)) {
        Validation.AddFieldError("Email", "이메일 주소를 입력하세요.");
    }
    if(Validation.Success) {
        // 업데이트 처리를 위해 파라미터화 작업
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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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> </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.OpenFile("CohoWinery.sdf");
    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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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.OpenFile("CohoWinery.sdf");
    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로 저장하고 실행해 보세요. 그럼 이런 형태로 보이실 겁니다. ^_^

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

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

Razor & WebMatrix의 데이터베이스 개발 작업의 장점은
(1) 자체 내장된 SQL DB를 이용하고
(2) 무료 SQL서버인 SQL Express나 SQL서버 상위 버전으로 100% 마이그레이션을 WebMatrix 내부에서 지원하며
(3) 간결한 데이터베이스 접근 처리 방식
(4) 개발과 쿼리, 데이터베이스 작업을 모두 하나의 도구인 WebMatrix에서 제공
하는 것은 Razor와 데이터베이스 개발에 대한 큰 매력이 아닐까 생각합니다.
데이터베이스에 경험이 없으신 분들은 내용이 조금 어려웠을지도 모르겠습니다. 곧, 이 강좌에 대해서도 동영상 강좌를 준비하고 있으니 많은 도움 되시길 바랍니다.

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

참고자료 :

(1) WebMatrix와 Razor! 이제 시작합니다.
(2) WebMatrix 설치부터 Hello World까지
(3) Razor 강좌 - 기본 구문 및 주석 처리
(4) Razor 강좌 - 코드 블록과 POST 처리
(5) Razor 강좌 - 재사용 가능한 코드 생성
(6) Razor 강좌 - 레이아웃 페이지 구조 처리
(7) Razor 강좌 - 파일처리, 파일 업로드
[동영상 강좌] (1) WebMatrix 첫 실행 & Hello World까지 달려요~
[동영상 강좌] (2) WebMatrix 5분 리뷰~
[동영상 강좌] (3) Razor 강좌 - 기본 구문 및 주석 처리
[동영상 강좌] (4) Razor 강좌 - 코드 블록과 POST 처리

Comments

Anonymous
November 28, 2011
WebGrid로 테이블을 만들시 데이터가 없는경우 "데이터가 없습니다." 이런식의 출력은 가능하나요??

Partager via

(8) Razor 강좌 - 데이터베이스 처리

Comments

Ressources supplémentaires