다음을 통해 공유

1부: 개요 및 파일->새 프로젝트

  • 아티클

작성자: Jon Galloway

MVC Music Store는 웹 개발을 위해 ASP.NET MVC 및 Visual Studio를 사용하는 방법을 단계별로 소개하고 설명하는 자습서 애플리케이션입니다.

MVC Music Store는 온라인으로 음악 앨범을 판매하고 기본 사이트 관리, 사용자 로그인 및 쇼핑 카트 기능을 구현하는 간단한 샘플 저장소 구현입니다.

이 자습서 시리즈에서는 ASP.NET MVC Music Store 샘플 애플리케이션을 빌드하기 위해 수행되는 모든 단계를 자세히 설명합니다. 1부에서는 개요 및 파일->새 프로젝트를 다룹니다.

개요

MVC Music Store는 웹 개발을 위해 ASP.NET MVC 및 Visual Web Developer를 사용하는 방법을 단계별로 소개하고 설명하는 자습서 애플리케이션입니다. 우리는 천천히 시작됩니다, 그래서 초보자 수준의 웹 개발 환경은 괜찮습니다.

우리가 구축 할 응용 프로그램은 간단한 음악 상점입니다. 애플리케이션에는 쇼핑, 체크 아웃 및 관리의 세 가지 기본 부분이 있습니다.

장르를 선택하거나 상위 선택 항목에서 선택할 수 있는 옵션이 있는 ASP 점 Net Music Store 개요 메뉴의 스크린샷

방문자는 장르별로 앨범을 찾아볼 수 있습니다.

지정된 장르의 앨범 컬렉션을 보여 주는 ASP dot Net 음악 저장소 장르 앨범 선택 메뉴의 스크린샷.

단일 앨범을 보고 카트에 추가할 수 있습니다.

카트에 추가할 옵션이 있는 앨범 이름, 장르, 아티스트 및 가격을 보여 주는 앨범 선택 창의 스크린샷

카트를 검토하여 더 이상 원하지 않는 항목을 제거할 수 있습니다.

총 가격 정보 및 카트 또는 체크 아웃 편집 옵션이 포함된 '카트 검토' 메뉴의 스크린샷.

체크 아웃을 계속하면 사용자 계정에 로그인하거나 등록하라는 메시지가 표시됩니다.

'기억해 주세요' 단추를 클릭하는 옵션 외에도 사용자에게 사용자 이름과 암호를 입력하도록 요청하는 로그온 메뉴 모음의 스크린샷.

사용자 이름, 전자 메일 주소 및 6자 이상이 포함된 암호를 요청하는 새 계정 만들기 메뉴 모음의 스크린샷 레지스터 단추는 화면 아래쪽에 있습니다.

계정을 만든 후 배송 및 결제 정보를 입력하여 주문을 완료할 수 있습니다. 간단한 작업을 유지하기 위해, 우리는 놀라운 프로모션을 실행하고 있습니다 : 그들이 프로모션 코드 "무료"를 입력하면 모든 것이 무료입니다!

프로모션 코드를 입력하기 위한 자리 표시자와 함께 구매자의 배송 및 결제 정보에 대한 항목 옵션을 보여 주는 스크린샷.

주문 후 간단한 확인 화면이 표시됩니다.

주문에 대해 고객에게 감사하고 주문 번호를 제공하는 확인 화면의 스크린샷.

고객 관련 페이지 외에도 관리자가 앨범을 만들고 편집하고 삭제할 수 있는 앨범 목록을 보여 주는 관리자 섹션을 빌드합니다.

소유 앨범의 제목, 아티스트 및 장르 목록을 보여 주는 관리자 섹션 메뉴의 스크린샷 각 항목을 편집하거나 삭제하는 옵션이 있습니다.

1. 파일 -> 새 프로젝트

소프트웨어 설치

이 자습서는 무료 Visual Web Developer 2010 Express(무료)를 사용하여 새 ASP.NET MVC 3 프로젝트를 만든 다음, 기능을 증분 방식으로 추가하여 완전한 작동 애플리케이션을 만듭니다. 그 과정에서 데이터베이스 액세스, 양식 게시 시나리오, 데이터 유효성 검사, 일관된 페이지 레이아웃을 위해 master 페이지 사용, 페이지 업데이트 및 유효성 검사에 AJAX 사용, 사용자 로그인 등을 다룹니다.

단계별로 수행하거나 MVC-Music-Store에서 완료된 애플리케이션을 다운로드할 수 있습니다.

Visual Studio 2010 SP1 또는 Visual Web Developer 2010 Express SP1(Visual Studio 2010 무료 버전)을 사용하여 애플리케이션을 빌드할 수 있습니다. SQL Server Compact(무료)를 사용하여 데이터베이스를 호스트합니다. 시작하기 전에 아래에 나열된 필수 구성 요소를 설치했는지 확인합니다.

  • [Visual Studio Web Developer Express SP1 필수 구성 요소]
  • [ASP.NET MVC 3 도구 업데이트]
  • [SQL Server Compact 4.0] - 런타임 및 도구 지원 모두 포함

새 ASP.NET MVC 3 프로젝트 만들기

먼저 Visual Web Developer의 파일 메뉴에서 "새 프로젝트"를 선택합니다. 그러면 새 프로젝트 대화 상자가 나타납니다.

새 프로젝트를 만들기 위한 선택 및 바로 가기 키보드 명령을 보여 주는 Visual Web Developer 파일 메뉴의 스크린샷

왼쪽에서 Visual C# -> 웹 템플릿 그룹을 선택한 다음 가운데 열에서 "ASP.NET MVC 3 웹 애플리케이션" 템플릿을 선택합니다. 프로젝트 이름을 MvcMusicStore로 지정하고 확인 단추를 누릅니다.

다른 애플리케이션 옵션 템플릿을 제공하는 새 프로젝트 대화 상자 창 메뉴의 스크린샷

프로젝트에 대한 일부 MVC 특정 설정을 만들 수 있는 보조 대화 상자가 표시됩니다. 다음을 선택합니다.

프로젝트 템플릿 - 비어 있음 선택

엔진 보기 - Razor 선택

HTML5 의미 체계 태그 사용 - 선택됨

아래와 같이 설정이 있는지 확인한 다음 확인 단추를 누릅니다.

사용자가 프로젝트에 대해 다른 설정을 선택할 수 있도록 하는 보조 대화 상자의 스크린샷

그러면 프로젝트가 만들어질 것입니다. 오른쪽의 솔루션 탐색기 애플리케이션에 추가된 폴더를 살펴보겠습니다.

애플리케이션에 추가된 폴더 목록을 보여 주는 프로젝트를 만든 후의 솔루션 탐색기 창 스크린샷

빈 MVC 3 템플릿은 완전히 비어 있지 않으며 기본 폴더 구조를 추가합니다.

위에서 언급한 폴더 목록의 확대/축소 스크린샷 보기로, 생성된 프로젝트의 이름을 강조 표시합니다.

ASP.NET MVC는 폴더 이름에 대한 몇 가지 기본 명명 규칙을 사용합니다.

폴더 용도
/컨트롤러 컨트롤러는 브라우저의 입력에 응답하고, 이를 사용하여 수행할 작업을 결정하고, 사용자에게 응답을 반환합니다.
/레이아웃 보기에는 UI 템플릿이 있습니다.
/모델 모델은 데이터를 보유 및 조작합니다.
/콘텐츠 이 폴더에는 이미지, CSS 및 기타 정적 콘텐츠가 보관되어 있습니다.
/스크립트 이 폴더에는 JavaScript 파일이 있습니다.

이러한 폴더는 기본적으로 ASP.NET MVC 프레임워크가 "구성에 대한 규칙" 접근 방식을 사용하고 폴더 명명 규칙에 따라 몇 가지 기본 가정을 만들기 때문에 빈 ASP.NET MVC 애플리케이션에도 포함됩니다. instance 경우 컨트롤러는 코드에서 명시적으로 지정할 필요 없이 기본적으로 Views 폴더에서 보기를 찾습니다. 기본 규칙을 고수하면 작성해야 하는 코드의 양이 줄어들고 다른 개발자가 프로젝트를 더 쉽게 이해할 수 있습니다. 애플리케이션을 빌드할 때 이러한 규칙을 더 자세히 설명하겠습니다.

다음