How to Create a JavaScript Gantt Chart App Using PHP Laravel – DHTMLX Tutorial

안녕하세요, DHX 기술 지원 팀의 Ramil입니다이 동영상에서는 Laravel 프레임 워크를 사용하여 Gantt 차트 응용 프로그램을 쉽게 만들 수 있습니다

GitHub에서 데모를 준비하거나이 단계별 비디오 가이드를 따르십시오 이 비디오를 위해 여러분은 이미 PHP의 기초에 익숙하다고 가정합니다 'Composer'패키지 관리자뿐만 아니라 시스템에 설치하십시오 확실하지 않은 경우에 대한 소개 문서를 확인하십시오 Laravel 프레임 워크

모든 링크는 동영상 설명에 포함됩니다 이제`create-project` 명령을 사용하여 프로젝트 상용구를 생성 해 보겠습니다 필요한 파일을 모두 다운로드하여 만드는 데 1 분 정도 걸립니다 완료되면 모든 것이 올바른지 확인할 수 있습니다 이 단계에서 우리는 기본 Laravel 페이지를 얻습니다

괜찮아! 다음으로 Gantt 차트를 사용하여 새 페이지를 만듭니다 views 폴더로 이동하여 ganttbladephp라는 새보기를 작성하십시오 페이지에 Gantt 차트를 표시하는 데는 단지 3 단계 만 거쳐야합니다

새 페이지를 추가 한 후에는 브라우저에서 액세스 할 수 있도록해야합니다 이 튜토리얼에서는 Gantt를 앱의 기본 페이지로 만들 계획입니다 webphp로 가서 기본 경로를 'gantt'로 변경하십시오 우리가 지금 무엇을 가지고 있는지 확인합시다

그래서 빈 Gantt 차트가 있습니다 이제 Gantt가 모델을 사용하여 데이터베이스에서 데이터를 가져 오도록하겠습니다 이 비디오에서는 데이터베이스 용으로 MySQL을 사용하고 설치했다고 가정합니다 귀하의 시스템에 MySQL 서버에 새로운 데이터베이스를 생성해야합니다

녹음 할 때 PHP에 필요한 버전 8의 MySQL에는 몇 가지 문제가 있습니다 workarounds, 그래서 나는 MySQL 57을 사용하고있다 데이터베이스 서버가 실행 중인지 확인하면 'env'파일을 열고 연결 설정을 업데이트하십시오

여기서 방금 작성한 데이터베이스를 지정합니다 데이터베이스 사용자 및 암호를 설정하십시오 나머지 설정 값은 기본값과 잘 맞습니다 다음 단계는 모델 클래스와 마이그레이션을 생성하는 것입니다 Artisan 명령을 사용하여 클래스 및 마이그레이션 파일을 생성합니다

마이그레이션이 성공적으로 생성되었음을 알 수 있습니다 이제 마이그레이션 파일을 열어 보겠습니다 우리 작업과 링크에 대한 열을 지정하십시오 작업 테이블의 코드는 다음과 같습니다 그리고 링크 테이블의 코드는 다음과 같습니다

그것은 Gantt가 일하기 위해 요구되는 최소한의 것입니다 추가 데이터를 저장해야하는 경우 우리는 문제없이 모든 열을 추가 할 수 있습니다 이제 우리는 마이그레이션을 실행합니다 그 동안 우리 앱을위한 테스트 데이터를 생성 할 수 있습니다 artisan 명령을 사용하여 시드 자 클래스를 생성합니다

이제 TasksTableSeeder에 데이터를 추가합니다 데이터가로드되는지 확인하기 위해 몇 가지 작업을 추가했습니다 그리고 DatabaseSeederphp에서 테이블 시더를 호출하십시오 그런 다음 명령 줄에서 데이터베이스를 시드 할 수 있습니다

일단 데이터베이스가 생성되고 모델이 정의되면, 우리는 Gantt에 데이터를로드 할 수 있습니다 클라이언트 측에서는 JSON 형식의 데이터를 허용합니다 우리는 그것이 어떻게 작동 하는지를 알기 위해 간단한 컨트롤러를 만들 수 있습니다 클라이언트가이 작업을 호출 할 수 있도록 경로를 등록하십시오 api

php routes 파일에 경로를 추가합니다 마지막으로 'ganttload'메소드를 사용하여 뷰에서이 액션을 호출합니다 ganttload가 AJAX 요청을 보냅니다

지정된 URL에 JSON 응답을 기대할 것입니다 전에 정의 된 또한 xml_date 값을 지정했습니다 이것이 우리가 Gantt에게 데이터 소스가 사용할 날짜 형식을 알려주는 방식입니다 클라이언트 쪽에서 파싱 할 수 있습니다

응용 프로그램을 다시 시작하면 Gantt는 우리가 데이터베이스에 추가 한 작업을 표시해야합니다 기본적으로 작업 트리가 축소되어 있지만, 당신은 그것이 확대되기를 바랄 수도 있습니다 프로젝트 트리의 초기 상태는 공개 설정 클라이언트 쪽 Gantt 또는 서버에서 반환 된 데이터에서 가져옵니다 우리가 Laravel 통합을 다루고 있기 때문에, 후자로 진행해 보겠습니다 공식 문서에서, 우리는 작업의 초기 상태가 `open` 속성의 값

우리가이 값을 작업 모델에 저장하려고한다고 생각하지 않습니다 대신, 작업 클래스에 고정 값 속성을 추가 할 수 있습니다 응용 프로그램을 다시 실행하면 초기에 지점을 확장해야합니다 현재 Gantt는 백엔드에서 데이터를 읽을 수 있습니다 그러나 클라이언트에서 변경된 사항은 백엔드로 보내지거나 데이터베이스에 저장되지 않습니다

예를 들어, 여기에 새 작업을 추가 한 다음 페이지를 다시로드하면 그 작업이 사라진 것을 볼 수 있습니다 고쳐 주자! 이전 비디오에서 보았 듯이, 당신은 꽤 쉽게 클라이언트 측에서 업데이트를 가능하게 할 수 있습니다 지금 우리가 필요로하는 것은 작업과 링크 모두에 대한 작업을 처리하는 컨트롤러를 정의하는 것입니다 모델을 만들고 클라이언트의 경로를 만들고 클라이언트 측에서 데이터를 저장할 수 있습니다 컨트롤러부터 시작하겠습니다

각 모델에 대해 하나의 리소스 컨트롤러를 만듭니다 여기에는 모델을 추가, 삭제 및 업데이트하는 메소드가 포함됩니다 이 방법은 매우 간단합니다 클라이언트 측에서 작업 객체를 요청 매개 변수를 입력하면 모델 항목을 구성하여 저장 장치에 저장합니다 dhtmlxGantt에 특정한 몇 가지가 있습니다

"진행"값을 확인하고 요청이있는 경우 기본값을 0으로 지정합니다 매개 변수가 비어 있습니다 클라이언트 측 Gantt가이 열을 선택 사항으로 간주하고이 열을 선택적으로 간주하기 때문에이를 수행합니다 값이 클라이언트에 설정되지 않은 경우 백엔드 이 경우 기본값 대신 null 대신 0을 설정해야합니다

둘째, 응답 형식을 기록하십시오 action 매개 변수는 클라이언트 측에 조치 결과를 알려줍니다 클라이언트가 이해할 수있는 몇 가지 고정 값이 있습니다 이 경우 성공적으로 추가 된 항목에 대해 '삽입 됨'상태가 반환됩니다 그리고 새로운 데이터베이스 ID를 포함해야하는 "tid"매개 변수가 있습니다

목 실제로 응답과 함께 추가 정보를 클라이언트에게 보낼 수 있습니다 기본적으로 Gantt는이를 무시하지만 공용 API를 사용하여 Gantt에 액세스 할 수 있습니다 여기에는 "업데이트"및 "삭제"작업이 있습니다 그들은 거의 같은 방식으로 작동하므로 더 이상 확장하지 않을 것입니다

Gantt가 호출 할 수 있도록 새 컨트롤러의 경로를 추가하는 것을 잊지 마십시오 이제 LinkController에 대해서도 같은 것을 구현해 보겠습니다 우리가 방금 만든 작업 컨트롤러와 정확히 같기 때문에 너무 자세하게 설명하지 않겠습니다 구현 됨 : 여기서 새로운 링크를 생성하는`store` 메소드를 볼 수 있습니다 기존 항목의 변경 사항을 저장하는`update` 메소드와`destroy` 메소드는 그것과 거의 동일합니다

이전의 경우와 마찬가지로 경로를 추가하십시오 마지막으로 클라이언트 쪽에서 업데이트를 사용할 수 있습니다 우리가 이전 단계에서 모든 것을 올바르게 만들었다는 것을 감안할 때, 우리의 간트는 변화를 저장할 것입니다 방금 구현 한 컨트롤러를 사용합니다 앱을 다시 실행하고 확인해 보겠습니다

dev 도구를 보면, Gantt가 이제 서버를 호출해야합니다 내가 뭔가를 수정할 때마다 페이지를 새로 고침하면 모든 변경 사항은 유지됩니다 더 많은 것을 알고 싶다면 이전 비디오와 공식 문서를 볼 수 있습니다 Gantt가 사용하는 요청 형식

그리고이게 다야! Gantt 차트가 포함 된 간단한 Laravel 응용 프로그램을 만들었습니다 봉사해야하는 dhtmlxGantt를 사용하여 실험을 시작하십시오 동영상 설명에서이 자습서의 텍스트 버전에 대한 링크를 찾을 수 있습니다 완벽한 응용 프로그램과 함께 GitHub 저장소에 대한 링크입니다 다음 번에 짧은 동영상 시리즈를 계획하고 있습니다

Gantt API의 다른 부분 탐색 일반적으로 직면하는 일반적인 작업 실제 프로젝트에서 Gantt 사용하기 구성처럼 Gantt 차트에서 왼쪽 그리드의 댓글 섹션에서 내가 다루고 싶은 다른 주제를 알려주십시오 앞으로는! 관심과 비디오를 주셔서 감사합니다!