다보리-컴포저블 Frontend 개발 Tutorial

1장. 설치방법

1장. 설치방법

Production DB 생성과 .env.dabory 의 이해

다보리 Front-end에서는 Laravel에서 기본 제공하는 환경설정 파일인 env 항목에 자주 사용되는 추가적인 변수를 넣어 사용하고 있습니다. 또한 Back-end API 서버와의 연동을 위해 env.dabory 항목을 별도로 사용하고 있습니다. 

1장. 설치방법

다보리 DB API 와 DB 연결 방법

 

해당사항은 먼저 2장 Restfull api의 구성 1번 메뉴얼을 숙지하시고 확인해주시기 바랍니다.

2장 1번 메뉴얼에서 언급한바와 같이 clientId와 beforebase64가 담긴 json type의 데이터를 통해 API 서버를 호출하게되면 api 서버에서 response로 gate token을 생성하여 반환합니다. 이 gate token으로 env.dabory에서 설정을 통해 연동된 db api에 접근할 수 있습니다.

1장. 설치방법

Docker에 설치하는 방법

docker 설치방법

설치할 프로젝트 경로로 이동한뒤 깃서버에서 php-docker를 복제해옵니다. (git clone php-docker url)
docker를 돌리기 위해 Dockerfile과 docker-composeyml 파일을 세팅합니다. Dockerfile은 디폴트로 php 7.3버전이 설치되며 

image.png

다시 설치할 프로젝트 경로로 이동하여 깃서버에서 dbrerp를 복제해옵니다.(git clone dbrerp url) 확인해야 할 파일은 다음과 같습니다.

위 파일들을 세팅해줍니다. 또한 .gitignore 파일이 깃서버에는 업로드되지 않기 때문에 .gitignore에 포함되어 있는 파일들을 추가해줍니다.( ventor, theme 등) 마지막으로 docker-compose up -d 혹은 sh /shell/dkcu-compose-up.sh 명령어를 통해 docker를 실행합니다.


1장. 설치방법

웹서버/웹호스팅에 설치하는 방법

웹서버/웹호스팅 설치방법

*[.ussh를 통한 리눅스 서버 접근방법]

먼저 웹호스팅 서버에 접근하기전 세팅할 파일들을 준비해줍니다. git clone을 통해 깃서버로부터 소스코드를 복제할 것이기 때문에 gitignore에 포함되는 파일들을 세팅합니다. 세팅목록은 다음과 같습니다.

위 파일들이 세팅이 되면 ussh 파일을 통해 웹호스팅 서버에 접근합니다. ./ussh 서버명 호스트명을 통해 접근할 수 있습니다.

설치할 폴더 경로로 이동합니다. /home/호스트명/호스트명.daboryhost.com 폴더에서

git clone ‘repository url’ 명령어를 통해 소스코드를 복제합니다.

서버 접근전에 세팅해두었던 파일들을 웹호스팅 서버에 추가합니다.



1장. 설치방법

더미테마(Dummy-Theme)설치 방법

.env 항목에서 DBR_THEME 변수에 erponly를 넣어줍니다. erponly는 테마는 /pro로 들어오는 경로로 들어오는 모든 트래픽을 user page로 redirection시켜주는 테마입니다.

/dabory/themes 디렉토리로 이동한뒤 git clone erponly url 명령어를 통해 theme 소스코드를 가져옵니다. 반드시 변수의 이름과 테마 폴더 이름을 변수 값으로 동기화해야 합니다. 디렉토리 관련해서는composer 디렉토리에 autoload_psr4 파일에 각 디렉토리들을 namespace로 구성하여 관리되고 있으니 참고하시기 바랍니다.

1장. 설치방법

운영테마(Production-Theme)설치방법

.env파일에서 ERP_THEME, PRO_THEME 변수를 찾아 확인합니다. 변수의 이름과 테마 폴더 이름을 변수 값으로 동기화해야 합니다. /themes/pro 폴더 임폴트 (수정 예정)

1장. 설치방법

Dabory Linux 서버 SSH 로 로그인 방법

* ussh 파일을 통한 linux 서버 로그인 

ussh 파일을 사용하여 로그인하기 위해서는 먼저 세가지를 준비해야합니다.

image.png

(1). ussh파일

(2). pem key

(3). 해당 서버의 정보를 포함하고 있는 txt 파일

- txt 파일은 .ussh 파일을 참고하여 파일명까지 적합하게 맞춰줘야 합니다.

ex) list_file=$svr_str3"_list.txt"

위 세가지가 준비되었다면 ussh 파일이 위치한 경로로 이동합니다.
./ussh serverhost username 
ex) ./ussh eyeFr textmsg
위 명령어를 통해 해당 linux 서버에 접근이 가능합니다.
* window 사용자의 경우 wsl 혹은 git bash를 설치한 후에 명령어를 사용할 수 있습니다.

2장. Restfull API 구성

2장. Restfull API 구성

다보리 Gate Token 개념

SSO에 가입한 사용자는 로그인후 접속정보를 통해 ClientId와 PublicKey를 발급받습니다. 최초에 작성된 sodium key pair는 sso 서버에 저장됩니다.

(Front-end) - - - - > {Client Id, BA64 Key} - - - - > (Back-end)

                                  gateToken 생성

(Back-end) - - - - > {gate token} - - - - > (Front-end)

Front-end에서 최초 발급된 ClientId와 사용자의 db 접속정보가 암호화된 BA64 Key를 Back-end로 전송하면 Back-end에서 Gate Token을 생성하여 반환하면 Front-End에서 session에 토큰을 저장하여 사용할 수 있습니다. 이 Gate Token을 통해 사용자를 검증하고 세션을 유지시켜줍니다. 또한 Gate token을 발급받은 사용자는 한번의 로그인으로 다수의 API 서버와 연동할 수 있습니다.

[Gate Token 순서도]

https://manual.dabory.com/books/frontend-tutorial/page/envdabory-gate-token

2장. Restfull API 구성

다보리 API 설계의 기본 지식

2장. Restfull API 구성

PAP(pick-act-page) API 설명

PAP(pick-act-page) API란?

PAP(pick-act-page) API는 다보리 컴포저블 앱에서 개별 Table 단위의 데이터 처리를 위한 API 구조를 정의하는 방법입니다. 이 API 구조는 데이터의 추출(Pick), 실행(Action), 그리고 페이지네이션(Page) 세 가지 api를 포함하고 있습니다.

*API 공용 Json Structure 정의

"PageVars": {
  "QueryCnt": "string",//Response 시에만 유효한 값, Where 절에 걸리는 Row Count - Request 시에는 지정하지 않아도 됩니다.
  "Query": "string",//Query의  Where Clause의 내용과 같은 문법으로 지정 가능합니다. (And / Or 조건 지정 가능)
  "Fields": "string",// 가져올 필드를 지정합니다, 필드 자체를 뺄 수는 없지만, 해당값을 Empty 처리가 가능합니다. (지정하지 않으면 all)
  "Asc": "string",// ORDER BY  *** ASC  지정 가능합니다.
  "Desc": "int",// ORDER BY  *** DESC  지정 가능합니다.
  "Limit": "int",// 한번 페이징에서 가져오는 Row  갯수,  반드시 지정필요, 10개 Default
  "Offset": "int",// Where로 필터된 rows 중 가져오는 첫번째 레코드 레코드 옵셋 지정 가능
  "ReturnJson": "string",//일반적으로 필터링 하는 지정 조건 값을 서버로 보냈다가 받을 수 있습니다.
}

3장. Frontend 기반 구조

3장. Frontend 기반 구조

.env 의 구조

3장. Frontend 기반 구조

.env.dabory 와 Gate Token

제 2장 Rest Api의 구성(https://manual.dabory.com/books/frontend-tutorial/chapter/restfull-api)에서 Gate Token에 대한 내용을 다뤘으니 참조하시고 해당 장을 숙지하시면 이해하는데 도움이 됩니다.

dabory Gate Token(DGT) 순서도

- [ KeyPair/PublicKey 등을 를 생성하는 일반적인 PHP Code]
https://www.php.net/manual/en/function.sodium-crypto-box-seal.php).
- [Sodium 사용 Ajax 제공 (260~262 Lines)]
http://git.daboryhost.com:10880/dabory/dbrerp/src/master/routes/web.php).
- [ DB 정보 암호화 how to use it in PHP (254~263 Lines)](http://git.daboryhost.com:10880/dabory/dbrerp/src/master/resources/views/front/dabory/pro/my-app/popup/popup-form1/form-a/client-app-form.blade.php).


[DGT 생성과정 시작]

[Main Request]

[DCS 생성과정 시작]

[요청 끝]

3장. Frontend 기반 구조

다보리 Frontend 폴더 구조

├── 0.0.0

├── app

├── app.examples

├── appslabke

├── artisan* 

├── composer

├── config

├── dabory 

      (... 생략)

├── public

├── ralouphie

├── ramsey

├── resources ├── robots.txt

      (... 생략)

- dabory

- public

3장. Frontend 기반 구조

다보리 Theme 폴더의 구조

Theme 폴더의 구조

다보리 테마폴더는 두가지로 분류됩니다.

1. pro (서비스 페이지)

    기업이나 조직 외부에 있는 게스트 및 고객 구성원을 대상으로 하는 프론트 오피스 페이지입니다.

- pro 폴더의 구조 예시

├─themes

     ├─eyerecord

      ├─erp

            ├─shell

      ├─pro

            ├─app

                    ├─Http

                    ├─Services

            ├─para

            ├─resources

            ├─routes

            ├─shell

2. erp (관리자 페이지)

    기업이나 조직 내 직원 및 관리자를 대상으로 하는 백오피스 페이지입니다.

    erponly 테마는 erp 기능만 사용할 수 있도록  /pro (프로테마 경로)로  들어오는 모든 트래픽을 user page로 redirection시키는 간      단한 테마입니다.

- erp 폴더의 구조 예시

├─themes

      ├─erponly

             ├─erp

                    ├─shell

              ├─pro

                    ├─routes

                    ├─shell

              ├─qry

3장. Frontend 기반 구조

gate-token-get 요청 보내기

- api 테스트를 통해 gate-token 받아오기

rest api를 테스트할 수 있는 PostMan이나 Thunder Client(vsocde 사용시)를 통해 gate-token response를 테스트해봅니다.

먼저 .env.dabory 파일에서 초기설정된 MAIN_API_URL, MAIN_API_CLIENT_ID, MAIN_API_BEFORE_BASE64

세개의 값을 확인하여 복사해줍니다. Thunder Client에서 MAIN_API_URL을 입력하고 엔드포인트는 clientId와 BeforeBase64를 통해 gate-toeken을 받아올 수 있는 GateTokenController에 store() 또는 test() 매서드의 엔드포인트로 post 요청을 합니다. 또한
body에 json 형식으로 다음과 같이 입력합니다.

{
  "ClientId": "MAIN_API_CLIENT_ID의 value",
  "BeforeBase64": "MAIN_API_BEFORE_BASE64의 value"
}

위와 같이 요청하면 api server에서 gate-toekn을 응답받을 수 있습니다.




4장. Parameter 기반 개발

4장. Parameter 기반 개발

다보리 파라메터의 개념

다보리 컴포터블에서는 쿼리에 대한 정보를 json 구조의 파라미터에 넣어 다양한 구조의 쿼리를 사용할 수 있습니다.

프론트에서 필요한 데이터에 해당하는  json 파일(쿼리의 내용을 담고 있는)을 배열로 요청하면

백엔드에서 해당 json 파일을 읽습니다. json 파일에서 호출한 sql 파일을 실행하여  결과 데이터를 프론트에서 사용할 수 있습니다.

공통적으로 파라미터 파일의 경로는 다음과 같습니다.

/dabory/themes/$theme/$theme_type/para/ko_KR/{$type}/{$filePath}.json
$theme = 테마명
$theme_type= pro or erp
$type = request or response
$filePath = 세부경로 + 파일명


json 요소의 구조

{
    "//list-type-1": "simple and plain list by query of table join",

    "General": {
        "Title": "Crawling Domains",
        "PageApi": "list-type1-page",
        "ActApi": "domain-act"
    },

    "QueryVars": {
        "QueryName": "pro/my-app/dbr-main/domain-input",
        "FilterName": "",
        "FilterValue": "",
        "FilterDate": "domain_date"
    },

    "HeadSelectOptions": [
        {
            "Value": "new",
            "Caption": "레코드 추가"
        },
        {
            "Value": "multi-delete",
            "Caption": "일괄 삭제"
        },
        {
            "Value": "clear-all-filter",
            "Caption": "초기화"
        }
    ],

    "//FormVars": "FormVars[0]-caption, FormVars[1]-searchPopup",
    "FormVars": [
        {
            "ListButton": "조회",
            "DateRange": "",
            "DateNavi": "일자방향(오늘)",
            "Date": "날짜",
            "From": "부터",
            "To": "까지",
            "FirstRange": "",
            "SecondRange": "",
            "ThirdRange": "",
            "FourthRange": "",
            "AddTotalLine": "",
            "SelectPopup": "",
            "MultiPopup": "",
            "ChartPopup": "",
            "DownloadList": "",
            "ShowOnlyClosed": "",
            "Balance": "",
            "OrderBy": "표시 순서",
            "FilterOption": "검색조건",
            "SimpleOption": "상태별 검색"
        }
    ],

    "FilterSelectOptions": [
        {
            "Value": "",
            "Caption": "=검색 조건="
        },
        {
            "Value": "mx.domain_url",
            "Caption": "Domain URL"
        },
        {
            "Value": "mx.solution_code",
            "Caption": "Solution Code"
        },
        {
            "Value": "mx.search_tool",
            "Caption": "Search Tool"
        }
    ],

    "SimpleSelectOptions": [
        {
            "Value": "",
            "Caption": "전체"
        },
        {
            "Value": "mx.status='0'",
            "Caption": "Waiting"
        },
        {
            "Value": "mx.status='1'",
            "Caption": "Confirmed"
        },
        {
            "Value": "mx.status='2'",
            "Caption": "GivingUp"
        },
        {
            "Value": "mx.status='9'",
            "Caption": "Exception"
        }
    ],

    "//ListType1RangeVars": "[0]-filter, [1]-component, [2]-parameter",
    "ListType1RangeVars": [
        {
            "FirstRange": "",
            "SecondRange": "",
            "ThirdRange": "",
            "FourthRange": ""
        },
        {
            "FirstRange": "",
            "SecondRange": "",
            "ThirdRange": "",
            "FourthRange": ""
        },
        {
            "FirstRange": "",
            "SecondRange": "",
            "ThirdRange": "",
            "FourthRange": ""
        }
    ],

    "// DateRangeOptions": "월:현재월의 1~30, 분기: 현재분기의 첫째월 1일 ~ 마지막월의 말일, 반기/년 동일한 컨셉,전체:1990~3000",
    "DateRangeOptions": [
    ],

    "DateNaviOptions": [
        {
            "Value": "day",
            "Caption": "일"
        },
        {
            "Value": "week",
            "Caption": "주"
        },
        {
            "Value": "month",
            "Caption": "월"
        },
        {
            "Value": "quarterly",
            "Caption": "분기"
        },
        {
            "Value": "year",
            "Caption": "년"
        },
        {
            "Value": "all",
            "Caption": "전체"
        }
    ],

    "SelectPopupOptions": [

    ],

    "// OrderByOptions": "OrderBy Options//첫번째 Value가 Default",
    "OrderByOptions": [
        {
            "Value": "mx.domain_url asc",
            "Caption": "도메인 순서"
        },
        {
            "Value": "mx.solution_code asc",
            "Caption": "솔루션 순서"
        }
    ],

    "//BalanceOptions": "Show OnlyBalaceRemained or All",
    "BalanceOptions": [
        {
            "Value": "",
            "Caption": "전체 보기"
        },
        {
            "Value": "c10 > 0",
            "Caption": "잔량있는 것만"
        }
    ],

    "DisplayVars": {
        "IsListFirst" : true,
        "IsExcelColumn" : false,
        "InitLines" : 15,
        "HeadHeight": "130",
        "InitDateRange" : "all",
        "IsC1Popup": "1",
        "BodyHeight": "680"
    },

    "// ListVars": "ListVars[0]-caption, ListVars[1]-size(px), ListVars[2]-align->right(number) left(left)",
    "ListVars": [
        {
            "$Radio": "$Radio",
            "$Check": "$Check",
            "No": "No",
            "C1": "Domain URL*",
            "C2": "Host Hash",
            "C3": "Domain Date",
            "C4": "Owner Name",
            "C5": "Solution Code",
            "C6": "OwnerFile",
            "C7": "EncryptKey",
            "C8": "DbrHub URLs",
            "C9": "TimeZone",
            "C10": "크롤링 상태",
            "C11": "Aggreg Hash",
            "C12": "Status"
        },
        {
            "$Radio": "5",
            "$Check": "5",
            "No": "5",
            "C1": "20",
            "C2": "15",
            "C3": "15",
            "C4": "20",
            "C5": "15",
            "C6": "10",
            "C7": "10",
            "C8": "10",
            "C9": "10",
            "C10": "10",
            "C11": "10",
            "C12": "10"
        },
        {
            "$Radio": "center",
            "$Check": "center",
            "No": "center",
            "C1": "left",
            "C2": "center",
            "C3": "center",
            "C4": "center",
            "C5": "center",
            "C6": "center",
            "C7": "center",
            "C8": "center",
            "C9": "center",
            "C10": "status('crawled')",
            "C11": "center",
            "C12": "status('domain')"
        }
    ]
}

각각의 요소에 대한 설명
1. General
Title : 타이틀명
PageApi : page api명
ActApi : act api명

2. QueryVars -> 쿼리 제어 파라메터
해당 파라메터를 통해 초기설정된 db 서버에 접근하여
QueryName과 일치하는 경로의 쿼리를 실행하여 결과를 반환할 수 있습니다.
QueryName : sql 파일명
FilterName : 쿼리의 기준 컬럼명
FilterValue : FilterName에서 입력한 컬럼의 입력할 값
FilterDate : 정렬 기준 날짜 데이터 혹은 기준 날짜 컬럼
  
3. 명칭 + Options -> 각 option별 key : value 형식
Value : option의 value값
Caption : option명
     
4. FormVars -> 폼 제어 파라메터
-> 해당 폼에 직접적으로 보여지는 부분입니다.
FormVars[0]-caption, FormVars[1]-format",
"key" : "value" 형

7. ListType1RangeVars -> ListType1 제어변수
[0]-filter, [1]-component, [2]-parameterFirstRange
FirstRange : 
SecondRange : 
ThirdRange : 
FourthRange : 
      

12. DisplayVars   -> 디스플레이 제어 파라메터
IsListFirst : 첫번째 리스트인지 여부
IsExcelColumn : 엑셀컬럼인지 여부
InitLines : 호출한 라인인지 여부
HeadHeight : 헤드의 높이
InitDateRange :  날짜범위 호출여부
IsC1Popup :  C1 팝업 여부
BodyHeight : 바디의 높이

* diplay의 형식에 따라 다른 파라메터를 사용


13. ListVars -> 리스트 제어 파라메터
ListVars[0] - > caption(메뉴명)
ListVars[1] -> size(px) 
ListVars[2] -> align->right or left or center


4장. Parameter 기반 개발

ListType1 파라메터의 이해와 사용법

다보리 파라메터 중 가장 많이 사용하는 ListType1 파라메터의 예시

다음 내용은 새로운 LT1을 추가하는 방법입니다.

image.png

먼저 erp 페이지의 슈퍼유저메뉴 -  바둑판 불러오기 메뉴를 통해 파라메터 명을 확인합니다.

혹은 dbr_user_menu에서 para_name을 확인확인할 수 있습니다. 파라메터명을 확인했다면 

페이지의 소스에서 list-type1 디렉토리 내 para_name에 해당하는 경로의 json 파일을 똑같이 복사하여 붙여넣습니다.

예를들어 para_name이 /list/list-type1/dowonload/menu/sort-menu 라면 /list/list-type1/dowonload/menu/ 경로로 이동하여

sort-menu.json 파일을 복사하여 같은 경로에 붙여넣고 네이밍을 해줍니다.

 

weberp-queries에서도 동일한 경로로 이동하여 

해당 페이지 메뉴에서 보여주고 싶은 데이터, 엑셀 다운로드 데이터를 C1~C20까지 순서대로 넣습니다.

image.png

쿼리 작성이 끝났다면 방금 만들어줬던 쿼리와 동일하게 새로 만들어준 json 파일의 파라메터도 수정해줍니다.

 

image.png

마지막으로 쿼리를 실행하기 위래 QueryName을 입력해줍니다.

image.png

 

이제 다시 웹으로 가서 바둑판 메뉴 불러오기를 하면 새로 추가한 list를 확인할 수 있습니다.

5장. 실행 메뉴와 권한 관리

5장. 실행 메뉴와 권한 관리

실행 메뉴의 확장

다보리 컴포저블에서 사용자 메뉴를 확장하고 수정할 수 있습니다.


사용자 메뉴리스트

image.png

image.png

먼저 erp 페이지에서 좌측 메뉴를 보면 사용자 메뉴리스트가 출력되고 있습니다.

Component : /views/components/nav-side-bar-component

Parameter : dabory/para/erp//ko_KR/list/list-typ1/user-menu-input

Query_name : user-menu-input

해당 사용자의 권한에 따른 메뉴들이 출력되며 메뉴코드별로 자식 메뉴가 있다면  모두 출력됩니다.

여기서 메뉴정보들은 bpa 변수 안에 암호화되어 반환되고 bpa를 통해 해당 메뉴에 접근할 수 있습니다.

사용자 메뉴의 수정 / 추가 / 삭제

image.png

Component : /views/components/nav-side-bar-component

Parameter : dabory/para/erp//ko_KR/list/list-typ1/user-menu-input

Query_name :

사용자메뉴를 자유롭게 커스터마이징 할 수 있습니다.

사용자 메뉴의 검색

image.png

Component : /views/front/dabory/erp/popup-form1/form-a/menu-form

Parameter : /dabory/para/erp/ko_KR_list/popup/popup-form1/form-a/user-menu

Query_name : download/menu/user-menu

파라메터의 value값을 통해 다양한 검색조건, 상태별 검색이 가능합니다.






5장. 실행 메뉴와 권한 관리

실행메뉴의 권한관리

사용자 메뉴별 유저의 권한을 설정할 수 있습니다.

image.png

Component : /views/front/dabory/erp/perm/user-perm

Parameter : /dabory/para/erp/ko_KR/form/form-b/user-menu-perm

Query_name : user-menu-perm

 

 

 

6장. 테마 커스터마이징

6장. 테마 커스터마이징

theme 폴더 설치방법

테마폴더 설치

참조:  Theme 폴더의 구조

테마폴더를 설치하기 위해서는 먼저 프로젝트 내 /public/themes 폴더로 이동합니다.


- pro 테마

dbr-themes-pro 레포지토리에서 적용할 pro 테마를 선택합니다.

만약 erponly 테마를 적용한다면

git clone erponly

명령어를 통해 테마 폴더를 /public/themes로 복제합니다.


- erp 테마

dbr-themes-erp  에서 레포지토리에서 적용할 erp 테마를 선택합니다.

만약 optical_pos 테마를 적용한다면

git clone optical_pos

명령어를 통해 테마 폴더를 /public/themes로 복제합니다.

* pro 테마 폴더는 하나여야 합니다. erp 테마 폴더는 비즈니스 로직과 워크플로우에 의해 제한된 기능을 가질 수 있기 때문에 여러개일 수 있습니다.



6장. 테마 커스터마이징

git 서버와 Standard/theme 폴더 동기화

깃서버 : 테마폴더 동기화

로컬 PC에서의 스크립트 (cd php):

  1. cd $HOME/docker-works/php/: 홈 디렉토리 아래에 있는 docker-works/php/ 경로로 이동합니다. 

  2. all-gitpp {website-alias}: all-gitpp는 사전 정의된 쉘 함수로, 웹사이트 별로 Git 저장소에서 변경 사항을 가져오고 특정 폴더로 이동하여 업데이트를 수행합니다. {website-alias}는 웹사이트의 별칭을 나타내며, 해당 웹사이트의 폴더로 이동하고 Git 동기화를 실행합니다.

서버에서의 스크립트 (cdz):

  1. cd /home: 서버의 /home 디렉토리로 이동합니다. 

  2. all-gitpp-host {website-alias}: all-gitpp-host는 로컬 PC의 all-gitpp와 비슷한 역할을 합니다. 이 명령은 특정 웹사이트에 대한 Git 저장소 동기화 및 업데이트를 실행합니다. 이전과 마찬가지로 {website-alias}는 웹사이트의 별칭을 나타내며, 해당 웹사이트의 폴더로 이동하고 Git 동기화를 실행합니다.

이러한 스크립트들은 특정 작업을 자동화하여 개발자가 코드 변경 사항을 효율적으로 동기화하고 관리할 수 있도록 도와줍니다. 로컬 PC에서는 개발 환경을 관리하고, 서버에서는 실제 배포된 웹사이트를 관리하는 데 사용될 수 있습니다.

6장. 테마 커스터마이징

theme 폴더 및 .env 변수 동기화

Theme 폴더 : .env 변수 동기화

 

프로젝트 루트 경로에서 .env파일로 이동합니다.

.env파일의 DBR_THEME, PRO_THEME 변수에  적용할 테마 폴더의 이름과 동일한 값을 넣어줍니다.


(변수 이름과 테마 폴더 이름을 변수 값으로 동기화해야 합니다.)

현재는 DBR_THEME로 통합되어 DBR_THEME 변수로만 운영되고 있습니다.

6장. 테마 커스터마이징

프로 테마 커스터마이징 예제

pro 테마 : 기업이나 조직 외부에 있는 게스트 및 고객 구성원을 대상으로 하는 프론트 오피스 페이지

다보리 컴포저블에서 가장 기준이 되는 pro 테마에는 point2u가 있습니다.

프로 테마 커스터마이징 예제

image.png

point2u는 상품을 등록하고 판매할 수 있으며 결제, 장바구니 등의 기능으로 커스터마이징한 쇼핑몰 기반의 pro 테마입니다.

- 커스터마이징 방법
  1. 상품 리스트 페이지와 상품 디테일 페이지에서 사용하고 있는 데이터, 메뉴를 수정합니다.
  2. route와 Controller를 수정 및 추가합니다.
  3. view 페이지에 text와 이미지 및 css 등 정적인 요소들을 수정합니다.

위와 같은 방법으로 프로 테마를 커스터마이징할 수 있습니다.

수정중...

[테마폴더 설치방법 보기]




6장. 테마 커스터마이징

ERP 테마 커스터마이징 예제

7장. 쿼리 커스터마이징

7장. 쿼리 커스터마이징

커스터마이징 방법

다보리 컴포저블에서 업체는 표준(standard) 쿼리 구조를  적용할 수 있고

각 업체별 쿼리를 커스터마징하여 사용할 수 있습니다. 일반적으로 쿼리폴더에서 표준화된 공통 쿼리를 사용하지만

각 theme 폴더 -> qry 폴더를 통해 커스터마이징하여 사용할 쿼리를 생성하고(해당 경로에 sql 파일 생성)

프론트엔드에서 이 경로의 query_name으로 호출하게 되면  쿼리를 커스터마이징하여 사용할 수 있습니다

8장. 커스텀 테이블 사용방법