웹 페이지 및 모달
웹 애플리케이션에서 새 페이지와 모달 창을 만드는 방법
대부분의 웹 응용 프로그램을 만드는 데 가장 중요한 단계는 데이터베이스를 사용하여 작업을 구성하는 것입니다. 데이터베이스에서 데이터를 가져오는 방법, 사용자 화면에 표시하는 방법, 이 데이터를 관리 및 삭제하는 방법.
물론 새 모듈이 다루는 것은 이러한 질문입니다. 세 번째 모듈에서는 데이터베이스를 만들고 도시와 국가에 대한 정보를 기록하는 모델을 설계했습니다. 이제 우리는 이 데이터베이스로 작업을 구성할 것입니다. 다음을 수행해야 합니다.
- 데이터베이스에서 정보를 출력하는 테이블 생성
- 데이터베이스에 데이터를 추가하고 삭제하는 방법 알아보기
- 모달 창이 작동하여 사용자 친화적인 인터페이스를 만드는 방법 알아보기
- 연결된 테이블의 작동 방식 이해
페이지
준비 부분부터 시작하겠습니다. 우리 앱은 점점 커지고 있으며 한 페이지에 비좁습니다. 적어도 하나를 더 만들어야 합니다. 왼쪽 메뉴에 추가해 보겠습니다.
생성된 페이지를 World 라고 부르고 아이콘과 clear URL을 설정해 봅시다.
모달 창
생성된 페이지에 새로운 국가를 추가할 수 있는 기능이 필요합니다. 이렇게 하려면 필요한 데이터를 입력할 모달 창과 이 모달 창을 여는 버튼이 필요합니다.
모달 창은 특별한 구성 요소입니다. 페이지의 특정 위치를 차지하지 않으며 동시에 구성 요소의 속성(구성 요소에 특정한 설정 포함)과 새 페이지(다른 구성 요소를 추가하기 위한 자체 캔버스 포함)를 결합합니다. 모달을 배치하기에 가장 적절한 위치는 페이지 하단의 영역입니다. 모달 구성 요소 자체와 마찬가지로 녹색으로 강조 표시됩니다.
적절한 이름을 지정하고 버튼을 누를 때 이 모달 창을 표시하는 간단한 작업을 지정해야 합니다.
다음 단계는 필요한 데이터를 입력하는 것입니다. 이전 모듈에서 X와 Y 값을 전달할 때 이미 유사한 작업을 수행했습니다. 이제 데이터 유형이 다르고 입력 필드가 모달 창에 있다는 점을 제외하고 동일한 작업을 수행해야 합니다.
데이터베이스는 국가에 대한 가장 기본적인 정보를 기록합니다. 이것은 이름( String 유형)과 일반 설명( Text )입니다. 추가해야 하는 입력 필드입니다.
