MVC4 게시판 만들기 - 프로젝트 생성, 모델추가, 메인화면 구성

MVC4 게시판 만들기 프로젝트!!

MVC : Model-View-Controller

말 그대로 웹 어플리케이션을 모델 / 뷰 / 컨트롤러로 분리해서 개발한다는 뜻이다.

기존의 ASP.NET 프로젝트 들은 WebForm 기반으로 거의 구성되어있지만,

현재 신규 프로젝트들은 꽤나 MVC 로 많이 진행되고 있는듯 하다.

웹폼기반은 웹폼기반대로 이점이 있고,

 MVC기반도 MVC 기반대로 이점이 있다. 각각의 이점은 아래 내용을 참고 

(MSDN 에서 긁어옴 : http://msdn.microsoft.com/ko-kr/library/dd381412(v=vs.108).aspx)

MVC 기반 웹 응용 프로그램의 이점

ASP.NET MVC 프레임워크에서 제공하는 이점은 다음과 같습니다.

응용 프로그램을 모델, 뷰 및 컨트롤러로 분할해 복잡성을 관리하기 쉽습니다.

뷰 상태 또는 서버 기반 양식을 사용하지 않습니다. 따라서 MVC 프레임워크는 응용 프로그램의 동작을 완벽히 제어하려는 개발자에게 적합합니다.

• 단일 컨트롤러를 통해 웹 응용 프로그램 요청을 처리하는 프런트 컨트롤러 패턴을 사용합니다. 따라서 풍부한 라우팅 인프라를 지원하는 응용 프로그램을 디자인할 수 있습니다. 자세한 내용은 프런트 컨트롤러를 참조하십시오.

• TDD(테스트 구동 방식 개발)에 대해 향상된 지원을 제공합니다.

• 대규모 개발자 팀에서 지원하는 웹 응용 프로그램 및 응용 프로그램 동작에 대해 수준 높은 제어가 필요한 웹 디자이너에게 매우 적합합니다.

Web Forms 기반 웹 응용 프로그램의 이점

Web Forms 기반 프레임워크에서 제공하는 이점은 다음과 같습니다.

• HTTP상의 상태를 보존하는 이벤트 모델을 지원하므로 LOB(Line-Of-Business) 웹 응용 프로그램 개발에 도움이 됩니다. Web Forms 기반 응용 프로그램에서는 수백 개의 서버 컨트롤에서 지원하는 수십 가지 이벤트를 제공합니다.

• 또한 개별 페이지에 기능을 추가하는 페이지 컨트롤러 패턴을 사용합니다. 자세한 내용은 페이지 컨트롤러를 참조하십시오.

• 서버 기반 양식에서 뷰 상태를 사용하므로 상태 정보를 보다 쉽게 관리할 수 있습니다.

• 적은 수의 웹 개발자로 구성된 팀과 신속한 응용 프로그램 개발에 사용 가능한 다수의 구성 요소를 활용하려는 디자이너에게 매우 적합합니다.

• Page 클래스, 컨트롤 등의 구성 요소가 긴밀히 통합되어 있고 일반적으로 MVC 모델에 비해 적은 코드가 필요하므로 응용 프로그램 개발의 복잡성이 낮은 편입니다.

서두는 여기서 마치고. 본격적으로 진행 GO!!

개발환경 : Visual Studio 2012

               MS-SQL 2012

자 먼저 VisualStudio를 실행하고 왼쪽메뉴의 [웹] -> [ASP.NET MVC4 웹 응용프로그램]을 선하고 확인을 누른다.

확인 버튼을 누르고 나면 아래와 같은 화면이 또!! 나타나는데 여기서 [인터넷 응용 프로그램]을 선택하고,

확인을 선택한다. 뷰 엔진은 Razor로 선택

 (Razor 문법은 여기에 자세히 나와있다. http://taeyo.net/columns/View.aspx?SEQ=442&PSEQ=35&IDX=0) 

확인을 프로젝트가 생성된다.

여기서 Model View Contoller 부분중 Model을 먼저 추가한다.

[Models 오른쪽클릭] -> 추가 -> BoardModel 추가

기존에 있던 AccountModels 모델은 프로젝트 생성하면서 기본으로 구성되어있는 템플릿에서 사용하는

모델이기 때문에 그냥 무시하고 진행한다. 

BoardModel 클래스에 게시판에 필요한 프로버티 모델들을 정의해준다.

Linq to Sql 이나 Entity Framwork 를 사용하려면 따로 작업이 필요하지만 이번 내용에서는 사용하지 않기 때문에

프로퍼티만 구성한다.

[출처] [ ASP.NET MVC4 게시판 ] 2. MVC4 게시판 만들기 - Model 및 Connetion String 추가|작성자 wow0815

BoardModel 을 정상적으로 추가했으면 이 모델과 연결될 Controller 를 추가한다.

컨트롤 이름에 Controller는 자동으로 맵핑이 되기때문에 Controller 앞에 내용만 변경해서 BoardController를 추가한다.

BoardController 생성 템플릿은 여러가지가 있으나 맨땅에서부터 진행하기 때문에 빈 컨트롤러를 선택하고 진행한다.

* 뒤에 붙은 Controller 라는 문구는 수정하지 않는게 정신건강에 이롭다..

빈 컨트롤러가 추가됐으면 우선 내용은 나중에 넣기로 하고 컨트롤러와 연결될 View를 생성해준다.

Index() 메서드 안에서 오른쪽버튼 클릭 -> 뷰 추가

뷰가 정상적으로 추가되면 아래와 같이 Views 폴더에 우리가 만든 BoardController 의 Index() 메소드와 연결된 Index.cshtml View가 생성된다. 내용이 아무것도 없기 때문에 그냥 Index라는 문구만 출력됨. 빌드하고 실행하면 기본적으로 구성된 샘플화면이 나타난다. 

현재 이 프로젝트는 기본적으로 구성되어있는 템플릿들이 있기 때문에 기본 홈주소를 변경해줘야 내가 만든 Index View 화면이 출력된다. 아래와 같이 변경 ㄱㄱ

[App_Start폴더] -> [RouteConfig.cs] -> Controller 를 Home에서 Board로  변경

여기서 기본 Home controller로 구성되어있는 부분은 내가 만든 Board 로 변경한다.

그리고 빌드한후에 실행을 해보면 아래와 같이 내가 만든 화면이 나타난다.

이제 다음으로 아까 만든 BoardController 에 Index Action 에 데이터를 받아와보자.

게시판 메인화면을 리턴해주는 컨트롤러 Index() 에 데이터를 만들어서

View() 넘겨주자!!  Model은 아까 만든 BoardModel 을 이용하고, DB는 ADO.NET을 이용해서 가져온다.

Linq to Sql & Entity Framework 는 이 컨트롤로에서 따로 작업해주면 됨.

중요한 부분은  return View(lstModel); 부분인데,

아까 우리가 만든 Index View에 Controller 에서 가공한 LIST 객체를 넘겨준다고 이해하면 된다.

BoardController 에서 만든 Index Action을 이용해서 Index View로 데이터를 전달했다.

그럼 아래와 같이 간단하게 HTML 테이블 코딩을 해준다.

1번 라인에 보면 @model IEnumerable<Board_Mvc.Models.BoardModel> 부분이 위에서 만든 컨트롤러에서 넘겨준 리스트 데이터를 View 단에서 사용하겠다고 선언한 부분이다. Model 이라는 프로퍼티로 접근이 가능하다.

29번에 @Html.ActionLink("글쓰기", "Write") 는  

          @Html.ActionLink("표시될텍스트", "BoardController의 Action명") 이다. 아직 글쓰기 Action은 만들지 않았으니 우선 추가만 하고 빌드후 실행해보면 아래와 같은 화면이 나타난다.

DB 스크립트는 첨부파일을 참조해서 DB에 풀어주면된다.

BBS_Script.sql

지금까지 잘 따라왔으면 아래와같은 게시판 VIEW 화면이 보인다.

테이블 디자인은 직접 만들기 귀찮아서 인터넷에 공유되어있는 테이블 css를 참조했다.

TableCSSCode.css

참조되어있는 css 파일을 Content 폴더에 Site.css 와 같은 위치에 넣어준뒤

아래 App_Start 폴더에 BundleConfig.cs 에 추가해주면 된다.

요약.

Model 생성 -> Models/BoardModel.cs

                     게시판에 사용될 Model 클래스 및 각각의 프로퍼티들 생성 ( SEQ, Name, Subject 등등)

Controller 생성 -> Controllers/BoardController.cs

                      게시판 메인화면으로 연결될 View Public ActionResult Index() 구현

View생성 -> Views/Board/Index.cshtml

                     게시판 메인이 보여질 View 화면 구성

다음 내용은 글쓰기, 수정, 삭제에 대한내용에 대해서 쓰도록 하겠습니다.

그럼 이만~~