https://youtu.be/BfEjDD8mWYg?si=tDqFy0AlbE5sH8F2
비주얼 스튜디오 Community 설치 후 프로젝트 생성
ASP.NET Core 웹앱과 ASP.NET Core 웹앱(MVC)가 따로 있으니 잘 보고 필요한 것을 선택한다.
실행하기
IIS Express(Information Internet Server): 마이크로소프트웨어의 웹서버
아무것도 하지 않고 서버를 돌렸을 때 나오는 화면
HTML 페이지 확인
Views -> Home -> Index와 Privacy 페이지 확인
*cshtml: C#HTML. 두 언어가 섞여있음
Controller
[Controllers] -> [HomeController] -> Index
뷰 페이지 만들기
1)클래스 추가
[Models] 우클릭 -> [추가] -> [클래스]
이름 입력 후 [추가] 클릭
prop 입력 후 탭
constructor: ctor 입력 후 탭
2)컨트롤러 추가
[Controllers] 우클릭 -> [추가] -> 컨트롤러
모델 클래스 지정, DbContext 클래스 지정
완료하면 다음과 같은 창이 뜬다.
Views에 페이지가 추가되었다.
3)데이터 추가
패키지 관리자 콘솔은 주로 의존성 설치?(install new dependencies)를 위해 사용한다. 이번에는 데이터베이스 관리를 위해 사용한다.
(1)add-migration "initialsetup" 입력
"initialsetup"은 마이그레이션의 이름이다. 한 번에 이름까지 입력하지 않고 'add-migration'만 입력하고 엔터를 치면 이름을 입력하라고 다시 나온다.
Migrations 아래에 파일이 생성됐다.
파일 내의 코드는 다음과 같다.
using Microsoft.EntityFrameworkCore.Migrations;
#nullable disable
namespace ASP.NET_Core_Crash_Course2.Data.Migrations
{
/// <inheritdoc />
public partial class initialsetup : Migration
{
/// <inheritdoc />
protected override void Up(MigrationBuilder migrationBuilder)
{
migrationBuilder.CreateTable(
name: "Joke",
columns: table => new
{
Id = table.Column<int>(type: "int", nullable: false)
.Annotation("SqlServer:Identity", "1, 1"),
JokeQuestion = table.Column<string>(type: "nvarchar(max)", nullable: false),
JokeAnswer = table.Column<string>(type: "nvarchar(max)", nullable: false)
},
constraints: table =>
{
table.PrimaryKey("PK_Joke", x => x.Id);
});
}
/// <inheritdoc />
protected override void Down(MigrationBuilder migrationBuilder)
{
migrationBuilder.DropTable(
name: "Joke");
}
}
}'Joke' 테이블에는 'JokeQuestion'과 'JokeAnswer'이 포함되어야 한다는 것을 알 수 있다.
(2)update-database 입력
테이블이 생성되어있다.
Joke 테이블을 더블클릭해 확인해보면 다음과 같이 나온다.
웹페이지를 실행한 뒤 주소를 Jokes로 변경하면 다음과 같은 화면이 나온다.
Create New를 클릭해 이동하고 테이블에 넣을 값을 입력한다.
벌써 주요 기능이 만들어졌다. 우와~
발전시키기
1. 내비 바에 아이템 추가
2. 검색 기능 추가
3. 답 숨기기
4. 로그인 기능, 작성자 표시 기능
1. 내비 바에 아이템 추가
[Views] -> [Shared] -> Layout.cshtml로 이동
내비 바의 li 태그를 수정한다.
- JokesController와 연동됨(Controller 생략 가능)
- 클릭하면 Index 페이지로 이동
[Controllers]의 JokesController
인덱스 페이지에서 실행할 내용이 있다. 테이블의 모든 내용을 보여준다.
_context: database code that is created using the entity framework
2. 검색 기능 추가
1)Layout.cshtml의 내비바에 아이템 추가
2)JokesController에 ShowSearchForm 메서드 추가
Index 아래에 메서드를 추가한다.
View() 안의 string이 메서드명과 같기 때문에 생략해도 된다.(아래)
2)뷰 페이지 추가
메서드명 우클릭 -> [뷰 추가]
Razor 뷰 선택
필요한 설정 지정 후 [추가] 클릭
*Create, Delete, Details, Edit, Empty, List 중에서 검색 기능과 가장 가까운 것은 Create라고 한다
페이지를 실행해 [검색하기]로 들어가보면 다음과 같이 나온다.
3)뷰 페이지 수정
다음과 같이 수정한다.
4)ShowSearchResults 페이지 작성
JokesController에서 ShowSearchResults 메서드를 작성한다.
이때 매개변수명을 ShowSearchForm.cshtml에서 사용한 SearchPhrase와 같게 만든다.
*매개변수 테스트
매개변수로 폼 데이터를 잘 받고 있는지 확인하기 위해 메서드를 위와 같이 작성한다. 리턴 타입 또한 string으로 변경한다.
검색 기능을 사용하면 다음과 같이 나온다.
처음 상태로 되돌린다.
앞에 "Index"를 추가하면 "Index" 페이지로 뷰를 보여주라는 코드가 된다.
다음은 검색에서 '베를린'을 입력한 결과이다. 단, 다른 조건을 입력하지 않았기 때문에 검색 키워드에 관계없이 모든 결과가 나온다.
검색 기능을 사용하기 위해 다음과 같이 작성한다.
'베를린'이라고 검색한 결과
'개구리'라고 검색한 결과
3. 답 숨기기
[Views] -> [Jokes] -> Index.cshtml
답이 바로 보이지 않게 하기 위해 JokeAnswer 컬럼을 출력하는 열을 지운다.
이제 Index 페이지에서는 답이 보이지 않고 Details를 눌러서 들어가야 보인다.
4. 로그인 기능, 작성자 표시 기능
JokesController의 Create() 메서드 편집
[Authorize] 입력
오류 발생 -> 추천 해결 방법 중에서 'using Microsoft.AspNetCore.Authorization;' 선택
위에 추가되었다.
Create New를 클릭하면 로그인을 요구하게 바뀌었다.
회원가입과 로그인 기능을 자동으로 만들어줬다.(우와............)
Create의 POST와 Delte, Delete의 POST에도 [Authorize]를 추가한다.
5. CSS
[wwwroot]에 css, js, lib 폴더가 있다.
