KR101787010B1 - 웹사이트 빌더에서 데이터베이스를 위지윅으로 구축하는 방법 및 시스템 - Google Patents

웹사이트 빌더에서 데이터베이스를 위지윅으로 구축하는 방법 및 시스템 Download PDF

Info

Publication number
KR101787010B1
KR101787010B1 KR1020160052271A KR20160052271A KR101787010B1 KR 101787010 B1 KR101787010 B1 KR 101787010B1 KR 1020160052271 A KR1020160052271 A KR 1020160052271A KR 20160052271 A KR20160052271 A KR 20160052271A KR 101787010 B1 KR101787010 B1 KR 101787010B1
Authority
KR
South Korea
Prior art keywords
relationship
entity
area
dropped
database
Prior art date
Application number
KR1020160052271A
Other languages
English (en)
Inventor
김선권
Original Assignee
한다시스템 주식회사
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 한다시스템 주식회사 filed Critical 한다시스템 주식회사
Priority to KR1020160052271A priority Critical patent/KR101787010B1/ko
Application granted granted Critical
Publication of KR101787010B1 publication Critical patent/KR101787010B1/ko

Links

Images

Classifications

    • G06F17/30289—
    • G06F17/30126—
    • G06F17/3089—
    • G06F9/4443—
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

웹사이트 빌더에서 데이터베이스를 위지윅으로 구축하는 방법이 개시되며, 이 방법은, 테이블의 속성 정보를 입력할 수 있는 테이블 생성 화면을 제공하는 단계와; 테이블 생성 화면에서의 입력에 따라 테이블을 생성하는 단계와; 생성중인 폼을 보여주는 폼 영역과 생성된 테이블을 표시한 테이블 영역을 포함하는 폼 생성 화면을 제공하는 단계와; 사용자가 테이블 영역으로부터 엔터티를 드래그하여 폼 영역에 드롭하면, 드롭된 엔터티에 해당하는 UI 콤포넌트를 폼 영역에 추가하고, 드롭된 엔터티와 폼 영역에 기 드롭된 엔터티 간의 관계를 결정하여 관계 정보 테이블에 저장하는 단계를 포함한다.

Description

웹사이트 빌더에서 데이터베이스를 위지윅으로 구축하는 방법 및 시스템 {Method and system for constructing database in WYSIWYG based website builder}
본 발명은 웹사이트 빌더(website builder)에서 데이터베이스(database)를 위지윅(WYSIWYG, What You See Is What You Get)으로 쉽게 구축하는 방법 및 시스템에 대한 것이다.
웹사이트 빌더(website builder)는 웹사이트를 템플릿(template)이나 테마 기반으로 간단히 만들수 있는 서비스를 말하며, 이를 이용하면 HTML(Hypertext Mark-up Language)에 대한 지식이 없고 웹 서버(Web Server)를 운영할 수 없는 일반 사용자들도 자신의 웹사이트를 쉽게 만들수 있다.
한편, 데이터베이스(database)를 구성하는 요소인 테이블(table), 컬럼(column), 뷰(view) 등을 엔터티(entity)라고 하며, 데이터베이스 구축을 위해서는, 일반적으로 데이터베이스를 구성하는 요소들 간의 관계를 나타내는 ERD(Entity-relationship Diagram)를 그리고, 이 ERD를 보면서 DBA(Database Administrator)가 각 테이블의 관계를 하나씩 설계한다. 그리고, 개발자들은 이 ERD를 보면서 정보화시스템을 개발한다.
데이터베이스를 웹사이트와 연동하기 위해서는 데이터베이스의 설계 뿐만아니라 데이터베이스와 홈 페이지를 연결하기 위한 코딩(coding)이 필요하기 때문에 기술자가 아닌 일반인들을 대상으로하는 웹사이트 빌더에서는 데이터베이스 연동 서비스를 제공하기가 어려운 실정이다.
본 발명은 상기와 같은 종래 기술의 문제점을 해소하기 위한 것으로, 웹사이트 빌더에서 웹사이트를 구축할 때 데이터베이스를 쉽게 생성하고 웹 페이지상에 엔터티를 드래그앤그롭(Drag&Drop)해주는 것만으로 웹 화면에 해당 데이터베이스의 데이터가 표시될 수 있도록 하는 데이터베이스 구축 방법을 제공하기 위한 것이다.
또한, 본 발명은 둘 이상의 서로 다른 테이블로부터 데이타베이스 엔터티를 웹 페이지로 드래그앤드롭하는 것만으로 엔터티들간의 관계가 자동으로 설정되도록 하는 데이터베이스 구축 방법을 제공하기 위한 것이다.
상기와 같은 목적을 달성하기 위하여, 본 발명의 일 실시예에 따라 웹사이트 빌더에서 데이터베이스를 위지윅으로 구축하는 방법은, 테이블의 속성 정보를 입력할 수 있는 테이블 생성 화면을 제공하는 단계와; 상기 테이블 생성 화면에서의 입력에 따라 테이블을 생성하는 단계와; 생성중인 폼을 보여주는 폼 영역과 상기 생성된 테이블을 표시한 테이블 영역을 포함하는 폼 생성 화면을 제공하는 단계와; 사용자가 상기 테이블 영역으로부터 엔터티를 드래그하여 상기 폼 영역에 드롭하면, 상기 드롭된 엔터티와 연동하는 UI 콤포넌트를 상기 폼 영역에 추가하고, 상기 드롭된 엔터티와 상기 폼 영역에 기 드롭된 엔터티 간의 관계를 결정하여 관계 정보 테이블에 저장하는 단계를 포함할 수 있다.
상기 방법은, 상기 결정된 관계를 나타내는 키 필드를 상기 두 엔터티에 설정하고, 상기 키 필드에 대한 정보를 상기 관계 정보 테이블에 저장하는 단계를 더 포함할 수 있다.
상기 테이블의 속성 정보는 라벨 및 데이터 유형을 포함하고, 상기 UI 콤포넌트를 폼 영역에 추가하는 단계는, 상기 데이터 유형에 대응하는 UI 콤포넌트를 결정하여 상기 라벨과 함께 상기 폼 영역에 표시하는 단계를 포함할 수 있다.
상기 테이블의 속성 정보는 라벨 및 UI 콤포넌트 유형을 포함하고, 상기 UI 콤포넌트를 폼 영역에 추가하는 단계는, 상기 UI 콤포넌트 유형에 대응하는 UI 콤포넌트를 상기 라벨과 함께 상기 폼 영역에 표시하는 단계를 포함할 수 있다.
상기 관계를 결정하는 단계는, 제1 테이블로부터 하나의 레코드를 드래그앤드롭하고 제2 테이블로부터 하나의 레코드를 드래그앤드롭한 경우, 상기 제1 테이블과 상기 제2 테이블이 일대일 관계인 것으로 결정하는 단계를 포함할 수 있다.
상기 관계를 결정하는 단계는, 제1 테이블로부터 하나의 레코드를 드래그앤드롭하고 제2 테이블로부터 복수의 레코드를 드래그앤드롭한 경우, 상기 제1 테이블과 상기 제2 테이블이 일대다 관계인 것으로 결정하는 단계를 포함할 수 있다.
상기 제2 테이블로부터 드래그앤드롭된 레코드들은 그리드, 리스트 또는 콤보 박스의 형태로 상기 폼 영역에 추가될 수 있다.
상기 관계를 결정하는 단계는, 서로 일치하는 키 필드가 없는 제1 테이블 및 제2 테이블로부터 하나 이상의 레코드를 각각 드래그앤드롭한 경우, 상기 제1 테이블과 상기 제2 테이블이 다대다 관계인 것으로 결정하는 단계를 포함하고, 상기 드래그앤드롭된 제1 테이블 및 제2 테이블의 레코드를 이용하여 교차 테이블을 생성하는 단계를 더 포함할 수 있다.
본 발명의 다른 실시예에 따라 웹사이트 빌더에서 데이터베이스를 위지윅으로 구축하는 시스템은, 사용자 단말과; 상기 사용자 단말로 테이블의 속성 정보를 입력할 수 있는 테이블 생성 화면을 제공하고, 상기 테이블 생성 화면에서의 입력에 따라 테이블을 생성하고, 상기 사용자 단말로부터의 요청에 따라 생성중인 폼을 보여주는 폼 영역과 상기 생성된 테이블을 표시한 테이블 영역을 포함하는 폼 생성 화면을 제공하고, 상기 사용자가 상기 테이블 영역으로부터 엔터티를 드래그하여 상기 폼 영역에 드롭하면, 드롭된 엔터티와 연동하는 UI 콤포넌트를 상기 폼 영역에 추가하고, 상기 폼 영역에 드롭된 복수의 엔터티들 간의 관계를 결정하여 관계 정보 테이블에 저장하는 서버를 포함할 수 있다.
상기와 같은 본 발명에 의하면, 사용자는 데이터베이스나 ERD에 대한 지식이 없이도 데이터베이스를 쉽게 구축할 수 있고, ERD를 사용하지 않고도 엔터티들간의 관계를 자동으로 설정할 수 있으며, 위지윅 방식으로 데이터베이스와 연동되는 웹페이지를 구축할 수 있다.
도 1은 본 발명의 일 실시예에 따른 데이터베이스 구축 시스템을 설명하기 위한 네트워크 도면이다.
도 2는 본 발명의 일 실시예에 따른 데이터베이스 구축 방법을 설명하기 위한 순서도이다.
도 3은 본 발명의 일 실시예에 따라 테이블을 생성하는 화면을 예시한 것이다.
도 4는 본 발명의 일 실시예에 따라 생성된 테이블에 데이터를 입력하는 화면을 예시한 것이다.
도 5는 본 발명의 일 실시예에 따라 엔터티를 드래그앤드롭하여 웹 페이지에 데이터베이스의 데이터를 표시하는 폼을 생성하기 위한 폼 생성 화면을 예시한 것이다.
도 6은 본 발명의 일 실시예에 따라 두 엔터티 간의 일대일 관계를 설정하는 화면을 예시한 것이다.
도 7은 본 발명의 일 실시예에 따라 두 엔터티 간의 일대다 관계를 설정하는 화면을 예시한 것이다.
도 8은 본 발명의 일 실시예에 따라 두 엔터티 간의 다대다 관계를 설정하는 화면을 예시한 것이다.
도 9는 본 발명의 일 실시예에 따라 다대다 관계에 있는 두 엔터티를 이용하여 생성한 교차 테이블을 예시한 것이다.
도 10은 본 발명의 일 실시예에 따라 웹사이트 생성시 사용할 수 있는 템플릿을 예시한 것이다.
도 11은 본 발명의 일 실시예에 따라 두 엔터티 간의 일대다 관계를 설정하는 화면을 예시한 것이다.
본 명세서에서 사용되는 용어에 대해 간략히 설명하고, 본 발명에 대해 구체적으로 설명하기로 한다.
본 발명에서 사용되는 용어는 본 발명에서의 기능을 고려하면서 가능한 현재 널리 사용되는 일반적인 용어들을 선택하였으나, 이는 당 분야에 종사하는 기술자의 의도 또는 판례, 새로운 기술의 출현 등에 따라 달라질 수 있다. 또한, 특정한 경우는 출원인이 임의로 선정한 용어도 있으며, 이 경우 해당되는 발명의 설명 부분에서 상세히 그 의미를 기재할 것이다. 따라서 본 발명에서 사용되는 용어는 단순한 용어의 명칭이 아닌, 그 용어가 가지는 의미와 본 발명의 전반에 걸친 내용을 토대로 정의되어야 한다.
명세서 전체에서 어떤 부분이 어떤 구성요소를 "포함"한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있음을 의미한다. 또한, 명세서에 기재된 "...수단", "...부", "모듈" 등의 용어는 적어도 하나의 기능이나 동작을 처리하는 단위를 의미하며, 이는 하드웨어 또는 소프트웨어로 구현되거나 하드웨어와 소프트웨어의 결합으로 구현될 수 있다.
아래에서는 첨부한 도면을 참고하여 본 발명의 실시예에 대하여 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자가 용이하게 실시할 수 있도록 상세히 설명한다. 그러나 본 발명은 여러 가지 상이한 형태로 구현될 수 있으며 여기에서 설명하는 실시예에 한정되지 않는다. 그리고 도면에서 본 발명을 명확하게 설명하기 위해서 설명과 관계없는 부분은 생략하였으며, 명세서 전체를 통하여 유사한 부분에 대해서는 유사한 도면 부호를 붙였다.
도 1은 본 발명의 일 실시예에 따른 데이터베이스 구축 시스템을 설명하기 위한 네트워크 도면이다.
도 1을 참조하면, 사용자 단말(100)은 인터넷(300)을 통해 서버(200)에 접속하며, 서버(200)는 사용자 단말(100)에 위지윅 방식의 데이터베이스 구축 및 데이터베이스와 연동된 웹사이트 구축 서비스를 제공한다.
서버(200)는 물리적으로 하나 또는 복수의 장치로 구현될 수 있으며, 예를 들어 복수의 사용자에게 웹사이트 구축 서비스를 제공하기 위한 제1 서버와 각 사용자가 구축한 데이터베이스를 저장하고 관리하는 제2 서버로 구성될 수 있다.
서버(200)는 사용자 단말(100)로부터의 요청에 따라 사용자 단말(100)로 테이블의 속성 정보를 입력할 수 있는 테이블 생성 화면과, 웹사이트를 구성하는 폼(FORM)을 생성하기 위한 폼 생성 화면을 제공한다. 폼 생성 화면은 사용자 단말(100)로부터의 요청에 따라 생성중인 폼을 보여주는 폼 영역과 생성된 테이블을 표시한 테이블 영역을 포함할 수 있다.
서버(200)는, 테이블 생성 화면에서의 사용자 입력에 따라 테이블을 생성하고, 사용자가 테이블 영역으로부터 엔터티를 드래그하여 폼 영역에 드롭하면, 드롭된 엔터티에 해당하는 UI 콤포넌트를 폼 영역에 추가하고, 폼 영역에 드롭된 복수의 엔터티들 간의 관계를 결정하여 관계 정보 테이블에 저장한다.
도 2는 본 발명의 일 실시예에 따른 데이터베이스 구축 방법을 설명하기 위한 순서도이다.
데이터베이스 시스템에 대한 정보를 저장하는 시스템 테이블은 서버(100)에 빌트인으로 미리 구축되며, 유저 테이블은 각 사용자의 니즈(Needs)에 따라 정의된다. 시스템 테이블의 명칭은 미리 정해져 있으며, 유저 테이블의 명칭은 사용자에 의해 지정될 수 있다.
도 2의 단계 S202에서, 유저 테이블의 생성을 위해 테이블 생성 화면이 사용자 단말(100)로 제공되며, 사용자는 테이블 생성 화면을 통해 테이블을 생성하고 각 테이블의 속성(attributes)을 지정할 수 있다.
도 3은 본 발명의 일 실시예에 따라 테이블을 생성하는 화면을 예시한 것이다. 도 3을 참조하면, 테이블 생성 화면에서 사용자는 테이블의 라벨(301)을 입력하고, 각 컬럼의 라벨(302), 시스템 네임(303), 데이터 유형(304) 등의 테이블의 속성을 입력 또는 설정할 수 있다.
컬럼의 라벨(302)은 해당 컬럼이 웹사이트에 보여질 때 붙는 명칭이며, 시스템 네임(303)은 해당 컬럼에 대한 데이터베이스 내부의 명칭이다. 도 3의 실시예에서는 라벨(302)과 시스템 네임(303)이 별도의 속성으로 정의되어 있으나, 실시예에 따라서는 라벨(302)과 명칭(303)을 분리하지 않고 하나의 항목으로 설정하고 웹페이지에 표시되는 라벨을 시스템 네임으로 그대로 사용하도록 할 수도 있다. 또한, 데이터베이스 기술에 대해 잘 모르는 사용자를 위해 시스템 네임(303)이 사용자로부터 입력되는 대신 자동으로 부여되도록 구현할 수도 있을 것이다.
데이터 유형(304)은 해당 컬럼에 어떤 유형의 데이터가 입력될지를 지정하는 항목으로서, 사용자가 직접 입력하도록 하는 대신 도 3과 같이 유형 리스트를 제공하여 정해진 데이터 유형들 중 하나를 선택하도록 할 수 있다.
또한, 테이블 생성시 사용자로 하여금 각 컬럼에 대응하는 UI 콤포넌트의 유형도 테이블 속성으로 미리 정의하도록 할 수 있다. 아래 표 1은 테이블 생성시 사용자에 의해 UI 콤포넌트까지 정의된 테이블 속성들의 예이다.
NO 컬럼 라벨 시스템 네임 데이터 유형 적절한 UI 콤포넌트
1 이름 NAME 텍스트 텍스트 박스
2 나이 AGE 숫자 드롭다운 리스트
3 성별 GENDER 1비트 체크 박스
4 메모 MEMO 롱텍스트 텍스트 박스
다른 실시예에서는 사용자가 각 필드에 적절한 UI 콤포넌트를 설정하는 대신, 각 필드의 데이터 유형에 따라 미리 정해진 적절한 UI 콤포넌트가 자동으로 사용되도록 할 수도 있다. 예컨대, 1비트 형식의 데이터를 가지는 컬럼이 폼에 드래그앤드롭되면 컬럼의 라벨과 함께 체크 박스가 자동으로 폼에 추가되도록 설정될 수 있다.
사용자에 의한 테이블의 라벨(301)과 각 컬럼들에 대한 정의 입력에 따라 사용자의 웹사이트 구축에 필요한 데이터를 저장할 테이블(들)이 생성되며, 도 3과 유사한 사용자 인터페이스를 통해 유저 테이블들의 생성, 변경, 삭제 등의 관리가 이루어질 수 있다. 생성된 테이블(들)은 서버(100)의 데이터베이스에 저장된다.
테이블을 생성한 후에는 각 테이블에 데이터를 입력할 수 있는데, 도 4a 및 4b는 테이블에 데이터를 입력하는 화면을 예시한 것이다.
도 4a를 참조하면, 사용자가 선택한 "고객 정보" 테이블(401)의 "이름"(402), "성별"(403), "나이"(404) 컬럼에 대해 데이터를 입력할 수 있는 폼(FORM)이 제공되며, 사용자는 이전 레코드(405)나 다음 레코드(406)로 이동하여 새로운 레코드를 추가로 입력하거나 기 입력된 데이터의 수정, 삭제, 조회를 수행할 수 있다.
도 4b를 참조하면, 사용자가 선택한 "고객 정보" 테이블(410)에 대해 그리드 형태의 사용자 인터페이스(411)를 통해 데이터를 입력, 수정, 삭제, 조회할 수 있다.
이와 같이 본 발명에 따른 데이터베이스 구축 시스템은 테이블의 생성과 데이터 관리를 위한 사용자 인터페이스를 다양하게 제공하며, 사용자의 선택에 따라서 또는 테이블의 컬럼 수 등의 환경에 따라서 적절한 사용자 인터페이스를 사용자에게 제시할 수 있다.
도 2의 단계 S204에서는, 생성중인 폼을 보여주는 폼 영역과 구축된 테이블을 표시한 테이블 영역을 포함하는 폼 생성 화면이 제공된다. 웹사이트 구축에 필요한 테이블(들)을 생성한 사용자는 폼 생성을 요청할 것이며, 서버(200)는 이에 대응하여 폼 생성 화면을 사용자 단말(100)에 제공하는 것이다.
폼은 웹사이트 빌더 상에서 웹페이지에 표시되는 UI 콤포넌트(User Interface components)의 집합으로서, 데이터베이스의 데이터가 표시되는 영역에 해당한다.
도 5의 예에서 생성되는 폼은 단일 테이블의 하나의 행(row)을 표시하고 레코드를 입력, 삭제, 수정하는데 사용되는 UI(User Interface) 요소이다.
도 5는 본 발명의 일 실시예에 따라 엔터티를 드래그앤드롭하여 웹 페이지에 데이터베이스의 데이터를 표시하는 폼을 생성하기 위한 폼 생성 화면을 예시한 것이다.
도 5를 참조하면, 화면의 왼쪽에는 새로이 생성중인 빈 폼이 표시되는 폼 영역이, 화면의 오른쪽에는 사용자가 생성한 테이블에 대한 정보가 표시되는 테이블 영역이 배치된다.
사용자가 테이블 영역의 테이블 리스트(510)에서 하나의 테이블(511)을 선택하면 하단에 선택된 테이블의 컬럼 리스트(512)가 표시될 것이다. 이 컬럼 리스트(512)에서 원하는 엔터티(514)를 드래그하여 폼 영역에서 드롭하면, 드롭된 엔터티와 연동하는 UI 콤포넌트가 폼 영역에 추가된다. UI 콤포넌트(520)의 라벨은 테이블의 해당 컬럼에 대해 정의된 라벨이며, 미리 정의된 데이터 유형에 따라 UI 콤포넌트(520)의 유형이 결정될 것이다. 도 5의 예에서 "이름" 컬럼은 텍스트 유형이므로 텍스트를 입력할 수 있는 텍스트 박스가 폼에 추가되었음을 알 수 있다(520).
각 컬럼을 순차적으로 드래그앤드롭하거나 복수의 컬럼을 드래그앤드롭할 경우 해당 테이블의 컬럼들에 대해 데이터를 조회하거나 입력할 수 있는 폼을 자동으로 생성할 수 있다. 또한, 테이블 자체를 폼에 드래그앤드롭할 경우는 해당 테이블의 모든 컬럼들과 연동되는 UI 콤포넌트들이 폼에 추가될 것이다.
상기와 같이 데이터베이스 엔터티(들)을 폼에 드래그앤드롭하면 서버(200)가 데이터베이스 연동에 필요한 코드를 자동으로 생성해주므로, 사용자에 의한 추가적인 코딩 없이 데이터베이스가 연동되는 폼을 생성할 수 있다.
도 2의 단계 S206에서는, 폼 영역의 엔터티들, 즉 폼 영역에 드롭되는 엔터티와 폼 영역에 기 드롭된 엔터티 간의 관계를 결정하여 관계 정보 테이블에 저장한다. 이후, 해당 엔터티들을 하나의 폼에 드래그앤드롭하면 관계 정보 테이블에 설정된 관계에 따라 적당한 형태로 엔터티들을 표시할 것이다.
도 6은 본 발명의 일 실시예에 따라 두 엔터티 간의 일대일 관계를 설정하는 화면을 예시한 것이다.
도 6을 참조하면, 아직까지 관계가 설정되어 있지 않은 "고객 정보" 테이블(530)과 "고객 주소" 테이블(540)의 데이터가 테이블 영역에 표시되어 있다. "고객 정보" 테이블(530)의 첫번째 레코드(531)를 폼 영역에 드래그앤드롭하면, "이름", "성별", "나이" 컬럼에 해당하는 라벨과 UI 콤포넌트들(550)이 폼에 추가될 것이다. 또한, "고객 주소" 테이블(540)의 첫번째 레코드(541)를 폼 영역에 드래그앤드롭하면, 해당 데이터가 폼에 추가될 것이다. 이때, 각 컬럼에 대응하는 라벨과 UI 콤포넌트가 개별적으로 추가될 수도 있으나, 사용자에게 선택 옵션을 주어 복수 컬럼의 데이터를 통합하여 조회할 수 있도록 할 수 있으며, 컬럼의 라벨도 사용자의 입력에 따라 변경하여 사용할 수 있도록 구현할 수 있다(551).
한편, 도 6과 같이 2개의 테이블에서 각각 하나의 레코드가 드래그앤드롭되는 경우, 두 엔터티 간에 일대일 관계가 있다고 결정하고 결정된 관계에 대한 정보를 관계 정보 테이블에 저장할 수 있다. 사용자가 테이블을 생성하는 시점에서는 전혀 별개의 테이블이었지만 이제는 두 테이블이 서로 연결된 것이다.
이에 따라, FORM2의 생성 완료 후 대응하는 웹 페이지에서 "고객정보" 테이블(530)의 레코드가 조회될 때, 이 레코드와 연결된 "고객주소" 테이블(540)의 레코드에 저장된 주소 정보도 같이 조회될 것이다.
본 발명의 일 실시예에 따른 데이터베이스 구축 시스템의 서버(200)는 관계 정보 테이블을 만들어 관리하며, 관계 정보 테이블은 아래 표 2와 같이 관계가 있는 엔터티들의 식별 정보와 관계에 대한 정보를 저장한다. 엔터티들간의 관계는 일대일 관계, 일대다 관계 또는 다대다 관계로 분류될 수 있다.
ENTITY1 ENTITY2 RELATION
ENTITY A ENTITY C 1:1
ENTITY A ENTITY D 1:N
ENTITY B ENTITY C N:N
ENTITY D ENTITY E 1:1
이와 같은 관계 정보 테이블을 참조하여 두 테이블간의 관계를 알 수 있으며 파악된 관계에 따라 데이터베이스에 저장된 데이터를 폼에 표시할 수 있다. 폼 생성 화면에서 엔터티의 드래그앤드롭이 있을 때마다 엔터티들간의 관계를 판단하여 관계 정보 테이블에 저장할 수 있다.
테이블간의 관계를 이어주는 필드로 두 테이블에서 이름이 동일한 필드가 사용될 수 있다. 도 6의 예에서 ID 필드는 "고객정보" 테이블(530)과 "고객주소" 테이블(540) 둘 다에 포함되어 있으며, 이 ID 필드가 동일한 레코드들이 1:1 관계로 연결될 수 있다. 웹사이트의 구축이 완료된 후에 도 6의 예에 따라 생성된 페이지에서, "이름" 란에 특정 이름이 표시될 때, 해당 레코드의 "ID" 값과 일치하는 "ID" 값을 가지는 레코드를 "고객주소" 테이블(540) 로부터 조회하여 같이 뿌려주는 것이다.
두 엔터티 간의 관계를 설정할 때 일치하는 필드가 없는 경우는, 결정된 관계를 나타내는 키 필드를 두 엔터티에 동일하게 추가하고, 사용자의 드래그앤드롭에 의해 관계를 연결해야 하는 레코드들이 동일한 키 값을 가지도록 설정할 수 있을 것이다. 또한, 실시예에 따라서는 상기 키 필드에 대한 정보를 관계 정보 테이블에 저장할 수도 있다.
도 7은 본 발명의 일 실시예에 따라 두 엔터티 간의 일대다 관계를 설정하는 화면을 예시한 것이다.
도 7을 참조하면, 먼저 사용자는 "반정보" 테이블(710)과 이 테이블(710)의 각 레코드에 대응하는 독립적인 테이블들을 생성한다. "반정보" 테이블(710)에서 하나의 레코드를 드래그앤드롭하여 폼에 해당 UI 콤포넌트들(712)을 추가하면 해당 레코드의 데이터가 폼에 보여지며, 1학년 4반의 중간고사 성적을 저장하고 있는 테이블 "1-4중간고사성적"(720)의 모든 레코드를 통째로 드래그앤드롭하면 해당 테이블의 모든 데이터가 그리드의 형태로 폼에 추가될 것이다.
또한, 이 경우 두 테이블 간의 관계가 일대다 관계인 것으로 판단하고 해당 관계 정보를 관계 정보 테이블에 저장하게 된다. 이때, 한 테이블의 각 레코드에 대해 연결되는 테이블이 어떤 것인지를 나타내는 정보가 저장될 수 있다.
일대다 관계에 있는 테이블의 데이터를 보여주기 위해서 도 7과 같이 그리드 형태로 다수의 레코드를 출력할 수도 있으나, 사용자의 선택 또는 구현 옵션으로 리스트나 콤보 박스 등의 UI 콤포넌트가 사용될 수 있다.
도 8은 본 발명의 일 실시예에 따라 두 엔터티 간의 다대다 관계를 설정하는 화면을 예시한 것이다.
다대다 관계는, 예컨대 제품과 대리점의 매핑 관계와 같이 하나의 제품이 여러 대리점에서 판매되고 각 대리점은 여러개의 물품을 판매하는 경우를 말한다.
서로 일치하는 키 필드가 없는 독립적인 제1 테이블 및 제2 테이블로부터 하나 이상의 레코드를 각각 드래그앤드롭한 경우, 제1 테이블과 상기 제2 테이블이 다대다 관계인 것으로 결정할 수 있다.
도 8을 참조하면, 테이블1(810)은 제품에 대한 데이터를 저장하기 위해 생성된 테이블이며, 테이블2(820)는 대리점에 대한 데이터를 저장하기 위해 생성된 테이블이다. 초기에 이 두 테이블은 아무런 관계가 없는 독립적인 테이블이다. 그런데 사용자가 웹페이지를 저작하면서 도 8에서와 같이 "대리점" 테이블(820)의 레코드 하나(821)를 드래그앤드롭하여 폼에 가져오고, "제품" 테이블(810)에서 복수의 레코드(811, 812, 813)를 드래그앤드롭하여 폼에 가져다 붙이면, 폼에는 대리점 "3"에 대한 정보(822)와 그에 대응하는 제품 정보(814)가 뿌려지고, 이 두 테이블은 다대다 관계가 있다고 판단되어 이 관계에 대한 정보가 관계 정보 테이블에 저장되며, 두 테이블의 레코드를 이용한 교차 테이블이 생성된다.
도 9는 본 발명의 일 실시예에 따라 다대다 관계에 있는 두 엔터티를 이용하여 생성한 교차 테이블을 예시한 것이다.
도 8에서 선택하여 가져온 대리점의 대리점 코드 "3"과 그에 대응하는 제품 코드 "1", "2", "10"을 저장하는 레코드 3개를 포함하는 교차 테이블이 생성되었음을 알 수 있다. 이 예에서 교차 테이블은 "제품 코드"와 "대리점 코드" 컬럼으로 구성된다. 도 8의 화면에서 다른 대리점에 대한 레코드와 그에 해당하는 제품 레코드들을 폼에 드래그앤드롭하면, 해당 관계를 나타내는 레코드들이 교차 테이블에 추가될 것이다.
웹사이트 구축 후 FORM4가 포함된 웹페이지에서 대리점 정보가 조회될 때, 교차 테이블이 참조되어 현재 조회되고 있는 대리점에 대응하는 제품들에 대한 정보가 같이 보여질 것이다.
도 10은 본 발명의 일 실시예에 따라 웹사이트 생성시 사용할 수 있는 템플릿을 예시한 것이다.
도 10을 참조하면, 폼 생성 화면에 라디오 박스(1010), 텍스트 박스(020), 콤보 박스(1030), 그리드(1040) 등의 템플릿들을 제공하고 템플릿을 가져다가 폼에 붙일 수 있도록 구현될 수 있다. 또는 다양한 스타일의 폼 템플릿을 제공하고 사용자가 원하는 폼 템플릿을 웹페이지에 가져다 붙이도록 할 수도 있다.
도 11은 본 발명의 일 실시예에 따라 두 엔터티 간의 일대다 관계를 설정하는 화면을 예시한 것이다.
도 11은 한 테이블의 레코드 하나에 다른 테이블의 레코드 여러 개가 관련지어지는 구조를 보여주며 이 관계를 마스터 디테일(master-detail) 구조라고도 할 수 있다. 도 11을 참조하면, "게시판" 테이블(1110)에서 하나의 레코드(1111)를 가져오면 해당 레코드의 데이터가 적절한 UI 콤포넌트를 통해서 표시되고(1112), "게시물" 테이블(1120)로부터 복수의 레코드(1121)를 가져오면, 이들 레코드의 데이터가 그리드 형태의 UI 콤포넌트(1122)를 통해 표시됨을 알 수 있다.
또한, 두 테이블의 관계가 일대다 관계로 설정되어 관계 정보 테이블에 저장되며, 두 테이블 간에 동일한 이름의 필드가 없는 경우는 미리 정해진 동일 명칭의 필드가 각 테이블에 추가되어 키 필드로서의 기능을 하도록 테이블이 수정될 수 있다. 구축된 웹사이트의 FORM5에서 특정 게시판을 조회하면 상기 키 필드를 이용해 특정 게시판과 관계있는 레코드들을 "게시물" 테이블(1120)에서 조회하고 검색된 레코드들이 그리드 형태의 UI 콤포넌트(1122)를 통해 출력될 것이다.
상기에서는 테이블로부터 레코드를 선택하여 드래그앤 드롭하는 것으로 설명하였으나 이는 이해를 돕기 위한 것으로, 행(Row)이나 컬럼(Column) 또는 테이블 그 자체와 같은 다양한 형태의 데이터 베이스 엔터티를 선택하여 드래그앤 드롭하는 것으로 구현할 수 있다.
본 발명의 일 실시예에 따른 방법은 다양한 컴퓨터 수단을 통하여 수행될 수 있는 프로그램 명령 형태로 구현되어 컴퓨터 판독 가능 매체에 기록될 수 있다. 상기 컴퓨터 판독 가능 매체는 프로그램 명령, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다. 상기 매체에 기록되는 프로그램 명령은 본 발명을 위하여 특별히 설계되고 구성된 것들이거나 컴퓨터 소프트웨어 당업자에게 공지되어 사용 가능한 것일 수도 있다. 컴퓨터 판독 가능 기록 매체의 예에는 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기 매체(magnetic media), CD-ROM, DVD와 같은 광기록 매체(optical media), 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical media), 및 롬(ROM), 램(RAM), 플래시 메모리 등과 같은 프로그램 명령을 저장하고 수행하도록 특별히 구성된 하드웨어 장치가 포함된다. 프로그램 명령의 예에는 컴파일러에 의해 만들어지는 것과 같은 기계어 코드뿐만 아니라 인터프리터 등을 사용해서 컴퓨터에 의해서 실행될 수 있는 고급 언어 코드를 포함한다.
이상에서 본 발명의 실시예에 대하여 상세하게 설명하였지만 본 발명의 권리범위는 이에 한정되는 것은 아니고 다음의 청구범위에서 정의하고 있는 본 발명의 기본 개념을 이용한 당업자의 여러 변형 및 개량 형태 또한 본 발명의 권리범위에 속한다.
100: 사용자 단말
200: 서버
300: 인터넷

Claims (10)

  1. 웹사이트 빌더에서 데이터베이스를 위지윅으로 구축하는 방법에 있어서,
    테이블의 속성 정보를 입력할 수 있는 테이블 생성 화면을 제공하는 단계와;
    상기 테이블 생성 화면에서의 입력에 따라 테이블을 생성하는 단계와;
    생성중인 폼을 보여주는 폼 영역과 상기 생성된 테이블을 표시한 테이블 영역을 포함하는 폼 생성 화면을 제공하는 단계와;
    사용자가 상기 테이블 영역으로부터 엔터티를 드래그하여 상기 폼 영역에 드롭하면, 상기 드롭된 엔터티와 연동하는 UI 콤포넌트를 상기 폼 영역에 추가하고, 상기 드롭된 엔터티와 상기 폼 영역에 기 드롭된 엔터티 간의 관계를 결정하여 관계 정보 테이블에 저장하는 단계를 포함하며,
    상기 테이블 생성 화면의 제공을 통해 데이터베이스의 설계를 지원하며,
    상기 데이터베이스의 설계의 결과물로서 상기 테이블을 생성하며,
    상기 테이블은 관계 정보 테이블로서, 상기 테이블을 포함한 엔터티가 상기 폼 영역으로 드래그앤드롭됨에 따라 관계형 데이터베이스간 연동에 필요한 코딩을 수행하며,
    상기 테이블 생성 화면의 제공을 통해 상기 UI 콤포넌트의 유형이 미리 정의되도록 지원하는 것을 특징으로 하는 방법.
  2. 제1항에 있어서,
    상기 결정된 관계를 나타내는 키 필드를 상기 두 엔터티에 설정하고, 상기 키 필드에 대한 정보를 상기 관계 정보 테이블에 저장하는 단계를 더 포함하는 것을 특징으로 하는 방법.
  3. 제1항에 있어서,
    상기 테이블의 속성 정보는 라벨 및 데이터 유형을 포함하고,
    상기 UI 콤포넌트를 폼 영역에 추가하는 단계는, 상기 데이터 유형에 대응하는 UI 콤포넌트를 결정하여 상기 라벨과 함께 상기 폼 영역에 표시하는 단계를 포함하는 것을 특징으로 하는 방법.
  4. 제1항에 있어서,
    상기 테이블의 속성 정보는 라벨 및 UI 콤포넌트 유형을 포함하고,
    상기 UI 콤포넌트를 폼 영역에 추가하는 단계는, 상기 UI 콤포넌트 유형에 대응하는 UI 콤포넌트를 상기 라벨과 함께 상기 폼 영역에 표시하는 단계를 포함하는 것을 특징으로 하는 방법.
  5. 제1항에 있어서,
    상기 관계를 결정하는 단계는,
    제1 테이블로부터 하나의 엔터티를 드래그앤드롭하고 제2 테이블로부터 하나의 엔터티를 드래그앤드롭한 경우, 상기 제1 테이블과 상기 제2 테이블이 일대일 관계인 것으로 결정하는 단계를 포함하는 것을 특징으로 하는 방법.
  6. 제1항에 있어서,
    상기 관계를 결정하는 단계는,
    제1 테이블로부터 하나의 엔터티를 드래그앤드롭하고 제2 테이블로부터 복수의 엔터티를 드래그앤드롭한 경우, 상기 제1 테이블과 상기 제2 테이블이 일대다 관계인 것으로 결정하는 단계를 포함하는 것을 특징으로 하는 방법.
  7. 제5항에 있어서,
    상기 제2 테이블로부터 드래그앤드롭된 엔터티들은 그리드, 리스트 또는 콤보 박스의 형태로 상기 폼 영역에 추가되는 것을 특징으로 하는 방법.
  8. 제1항에 있어서,
    상기 관계를 결정하는 단계는,
    서로 일치하는 키 필드가 없는 제1 테이블 및 제2 테이블로부터 하나 이상의 엔터티를 각각 드래그앤드롭한 경우, 상기 제1 테이블과 상기 제2 테이블이 다대다 관계인 것으로 결정하는 단계를 포함하고,
    상기 드래그앤드롭된 제1 테이블 및 제2 테이블의 엔터티를 이용하여 교차 테이블을 생성하는 단계를 더 포함하는 것을 특징으로 하는 방법.
  9. 웹사이트 빌더에서 데이터베이스를 위지윅으로 구축하는 방법을 실행하기 위해 기록매체에 기록된 컴퓨터 프로그램에 있어서, 상기 방법은,
    테이블의 속성 정보를 입력할 수 있는 테이블 생성 화면을 제공하는 단계와;
    상기 테이블 생성 화면에서의 입력에 따라 테이블을 생성하는 단계와;
    생성중인 폼을 보여주는 폼 영역과 상기 생성된 테이블을 표시한 테이블 영역을 포함하는 폼 생성 화면을 제공하는 단계와;
    사용자가 상기 테이블 영역으로부터 엔터티를 드래그하여 상기 폼 영역에 드롭하면, 드롭된 엔터티와 연동하는 UI 콤포넌트를 상기 폼 영역에 추가하는 단계와;
    상기 폼 영역에 드롭된 복수의 엔터티들 간의 관계를 결정하여 관계 정보 테이블에 저장하는 단계를 포함하며,
    상기 테이블 생성 화면의 제공을 통해 데이터베이스의 설계를 지원하며,
    상기 데이터베이스의 설계의 결과물로서 상기 테이블을 생성하며,
    상기 테이블은 관계 정보 테이블로서, 상기 테이블을 포함한 엔터티가 상기 폼 영역으로 드래그앤드롭됨에 따라 관계형 데이터베이스간 연동에 필요한 코딩을 수행하며,
    상기 테이블 생성 화면의 제공을 통해 상기 UI 콤포넌트의 유형이 미리 정의되도록 지원하는 것을 특징으로 하는 컴퓨터 프로그램.
  10. 웹사이트 빌더에서 데이터베이스를 위지윅으로 구축하는 시스템에 있어서,
    사용자 단말과;
    상기 사용자 단말로 테이블의 속성 정보를 입력할 수 있는 테이블 생성 화면을 제공하고, 상기 테이블 생성 화면에서의 입력에 따라 테이블을 생성하고, 상기 사용자 단말로부터의 요청에 따라 생성중인 폼을 보여주는 폼 영역과 상기 생성된 테이블을 표시한 테이블 영역을 포함하는 폼 생성 화면을 제공하고, 상기 사용자가 상기 테이블 영역으로부터 엔터티를 드래그하여 상기 폼 영역에 드롭하면, 드롭된 엔터티와 연동하는 UI 콤포넌트를 상기 폼 영역에 추가하고, 상기 폼 영역에 드롭된 복수의 엔터티들 간의 관계를 결정하여 관계 정보 테이블에 저장하며,
    상기 테이블 생성 화면의 제공을 통해 데이터베이스의 설계를 지원하며,
    상기 데이터베이스의 설계의 결과물로서 상기 테이블을 생성하며,
    상기 테이블은 관계 정보 테이블로서, 상기 테이블을 포함한 엔터티가 상기 폼 영역으로 드래그앤드롭됨에 따라 관계형 데이터베이스간 연동에 필요한 코딩을 수행하며,
    상기 테이블 생성 화면의 제공을 통해 상기 UI 콤포넌트의 유형이 미리 정의되도록 지원하는 서버를 포함하는 것을 특징으로 하는 시스템.
KR1020160052271A 2016-04-28 2016-04-28 웹사이트 빌더에서 데이터베이스를 위지윅으로 구축하는 방법 및 시스템 KR101787010B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020160052271A KR101787010B1 (ko) 2016-04-28 2016-04-28 웹사이트 빌더에서 데이터베이스를 위지윅으로 구축하는 방법 및 시스템

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020160052271A KR101787010B1 (ko) 2016-04-28 2016-04-28 웹사이트 빌더에서 데이터베이스를 위지윅으로 구축하는 방법 및 시스템

Publications (1)

Publication Number Publication Date
KR101787010B1 true KR101787010B1 (ko) 2017-10-17

Family

ID=60297690

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020160052271A KR101787010B1 (ko) 2016-04-28 2016-04-28 웹사이트 빌더에서 데이터베이스를 위지윅으로 구축하는 방법 및 시스템

Country Status (1)

Country Link
KR (1) KR101787010B1 (ko)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20190087841A (ko) * 2018-01-17 2019-07-25 (주)비아이매트릭스 그리드 인터페이스 기반 데이터 입출력 시스템
CN111966683A (zh) * 2020-08-14 2020-11-20 北京致远互联软件股份有限公司 可视化表单图谱建立方法、装置、电子设备及存储介质
KR102230729B1 (ko) * 2020-08-31 2021-03-23 (주)비아이매트릭스 템플릿 기반 엑셀 문서 온라인 작업 시스템
KR102653618B1 (ko) 2024-01-17 2024-04-01 서창호 고객 니즈를 반영한 웹 시스템 설계 및 제공 방법

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20190087841A (ko) * 2018-01-17 2019-07-25 (주)비아이매트릭스 그리드 인터페이스 기반 데이터 입출력 시스템
KR102034679B1 (ko) * 2018-01-17 2019-10-23 (주)비아이매트릭스 그리드 인터페이스 기반 데이터 입출력 시스템
CN111966683A (zh) * 2020-08-14 2020-11-20 北京致远互联软件股份有限公司 可视化表单图谱建立方法、装置、电子设备及存储介质
KR102230729B1 (ko) * 2020-08-31 2021-03-23 (주)비아이매트릭스 템플릿 기반 엑셀 문서 온라인 작업 시스템
KR102653618B1 (ko) 2024-01-17 2024-04-01 서창호 고객 니즈를 반영한 웹 시스템 설계 및 제공 방법

Similar Documents

Publication Publication Date Title
CN105408885B (zh) 用于对话框定制的***和方法
KR102023214B1 (ko) 데이터 개체의 자동 영역화 기법
US8478769B2 (en) Conversational question generation system adapted for an insurance claim processing system
KR101787010B1 (ko) 웹사이트 빌더에서 데이터베이스를 위지윅으로 구축하는 방법 및 시스템
US10579678B2 (en) Dynamic hierarchy generation based on graph data
JP2019512816A (ja) ページリソースの配置方法及び装置
CN102693247B (zh) 数据综合管理***及客户终端
CN102521416A (zh) 数据关联查询方法和数据关联查询装置
JP2008503830A (ja) ウェブブラウザ上で直接ウィジウィグ編集が可能な組立式ホームページと、個人ポータルサイトの作成と編集、取引方法及びそのプログラム記録媒体
US20140136958A1 (en) Relating to distributed access infrastructure for a database
CN103019693A (zh) 用户界面的生成***和生成方法
US7856428B2 (en) Method, computer program product and device for importing a plurality of data sets into a system
US9953331B2 (en) Extensibility for sales predictor (SPE)
US20190180337A1 (en) Requirement-specific configuration of user interface forms
US20190095085A1 (en) Page construction method, terminal, computer readable storage medium, and page construction device
CN105389184A (zh) 产品界面信息的配置方法及装置
US11372826B2 (en) Dynamic inclusion of custom columns into a logical model
Armel Web application development with Laravel PHP Framework version 4
US20110302483A1 (en) Forms integration toolkit
KR20200119108A (ko) 데이터베이스를 위지윅으로 구축하는 방법
JP2015036876A (ja) 画面自動生成装置、画面自動生成プログラムおよび画面自動生成方法
US20110258224A1 (en) Method and computer program product for creating content management systems
Feldman et al. Developing Business Intelligence Apps for SharePoint: Combine the Power of SharePoint, LightSwitch, Power View, and SQL Server 2012
JP2010186409A (ja) ホームページ作成装置、およびこれに用いるホームページ作成支援装置とホームページ作成のためのクライアント装置
US20140136257A1 (en) In-memory analysis scenario builder

Legal Events

Date Code Title Description
E701 Decision to grant or registration of patent right
GRNT Written decision to grant