1부: 프로젝트 개요 및 만들기

작성자: Rick Anderson

완료된 프로젝트 다운로드

Entity Framework는 개체/관계형 매핑 프레임워크입니다. 코드의 도메인 개체를 관계형 데이터베이스의 엔터티에 매핑합니다. 대부분의 경우 Entity Framework가 데이터베이스 계층을 관리하므로 데이터베이스 계층에 대해 걱정할 필요가 없습니다. 코드는 개체를 조작하고 변경 내용은 데이터베이스에 유지됩니다.

자습서 정보

이 자습서에서는 간단한 저장소 애플리케이션을 만듭니다. 애플리케이션에는 두 개의 기본 부분이 있습니다. 일반 사용자는 제품을 보고 주문을 만들 수 있습니다.

관리자는 제품을 만들거나 삭제하거나 편집할 수 있습니다.

학습할 기술

다음 내용을 학습하게 됩니다.

• ASP.NET Web API Entity Framework를 사용하는 방법
• knockout.js 사용하여 동적 클라이언트 UI를 만드는 방법입니다.
• Web API에서 양식 인증을 사용하여 사용자를 인증하는 방법입니다.

이 자습서는 자체 포함되어 있지만 먼저 다음 자습서를 읽을 수 있습니다.

• 최초 ASP.NET 앱 API
• CRUD 작업을 지원하는 Web API 만들기

ASP.NET MVC에 대한 지식도 유용합니다.

개요

대략적으로 애플리케이션의 아키텍처는 다음과 같습니다.

• ASP.NET MVC는 클라이언트에 대한 HTML 페이지를 생성합니다.
• ASP.NET Web API 데이터(제품 및 주문)에 대한 CRUD 작업을 노출합니다.
• Entity Framework는 Web API에서 사용하는 C# 모델을 데이터베이스 엔터티로 변환합니다.

다음 다이어그램은 도메인 개체가 애플리케이션의 다양한 계층에서 표시되는 방법을 보여 줍니다. 즉, 데이터베이스 계층, 개체 모델 및 마지막으로 HTTP를 통해 클라이언트로 데이터를 전송하는 데 사용되는 와이어 형식입니다.

Visual Studio 프로젝트 만들기

Visual Web Developer Express 또는 전체 버전의 Visual Studio를 사용하여 자습서 프로젝트를 만들 수 있습니다.

시작 페이지에서 새 프로젝트를 클릭합니다.

템플릿 창에서 설치된 템플릿을 선택하고 Visual C# 노드를 확장합니다. Visual C#에서 웹을 선택합니다. 프로젝트 템플릿 목록에서 MVC 4 웹 애플리케이션 ASP.NET 선택합니다. 프로젝트의 이름을 "ProductStore"로 지정하고 확인을 클릭합니다.

새 ASP.NET MVC 4 프로젝트 대화 상자에서 인터넷 애플리케이션을 선택하고 확인을 클릭합니다.

"인터넷 애플리케이션" 템플릿은 양식 인증을 지원하는 ASP.NET MVC 애플리케이션을 만듭니다. 지금 애플리케이션을 실행하는 경우 다음과 같은 몇 가지 기능이 이미 있습니다.

• 새 사용자는 오른쪽 위 모서리에 있는 "등록" 링크를 클릭하여 등록할 수 있습니다.
• 등록된 사용자는 "로그인" 링크를 클릭하여 로그인할 수 있습니다.

멤버 자격 정보는 자동으로 생성되는 데이터베이스에 유지됩니다. ASP.NET MVC의 양식 인증에 대한 자세한 내용은 연습: ASP.NET MVC에서 양식 인증 사용을 참조하세요.

CSS 파일 업데이트

이 단계는 코스메틱이지만 페이지가 이전 스크린샷처럼 렌더링되도록 합니다.

솔루션 탐색기 Content 폴더를 확장하고 Site.css라는 파일을 엽니다. 다음 CSS 스타일을 추가합니다.

.content {
    clear: both;
    width: 90%;
}

li {
    list-style-type: none;
}
        
#products li {
    width: 300px;
    background-color: #aaf;
    font-size: 1.5em;
    font-weight: bold;
    color: #ff0;
    margin: 0 0 5px 0;
    padding: 0 5px 0 5px;
}
        
.price  {
    float: right;
    color: #c00;
    font-size: 0.75em;
}
        
.details thead td {
    background-color: #CCCCCC;
    color: #333333;
}

.details td {
padding: 6px;
}
        
.details td.qty {
text-align: center;
}       
        
#cart a {
color: Blue;
font-size: .75em;
} 
        
#update-products li { 
    padding: 5px; 
    color: #666;
    border-style: dashed;
    border-width: 2px;
    border-color: #666;
}

#update-products li .item {
width: 120px;
display: inline-block;
text-align: right;
}

다음