PureJS PHP 웹 응용 프로그램에서 JavaScript 리포팅 도구를 사용하는 방법
페이지 정보
작성자 GrapeCity
작성일 2022-05-18 16:16 조회 972회
댓글 0건
본문
관련링크
ActiveReportsJS는 서버 종속성이 없는 100% 클라이언트 측 보고 도구입니다. 따라서 PHP 응용 프로그램을 비롯하여 ActiveReportsJS 및 모든 웹 서버를 사용할 수 있습니다. 이 튜토리얼에서는 PHP 응용 프로그램과 ActiveReportsJS를 통합하는 방법에 대해 간단하게 설명합니다. 이 튜토리얼을 마치면 다음을 수행할 수 있습니다.
Laravel 프레임워크를 사용하여 JSON API를 제공하는 PHP 응용 프로그램 만들기
CSV 파일에서 데이터 초기화
JSON API 엔드포인트 구성
ActiveReportsJS 보고서를 만들어 JSON API에서 데이터 시각화
정적 HTML 페이지를 만들어 보고서 뷰어에서 보고서 표시
필수 구성 요소
다음 콘텐츠는 컴퓨터에 Laravel이 설치되어 있다고 가정합니다. 설치되어 있지 않은 경우 에서 다운로드할 수 있습니다. ActiveReportsJS도 설치되어 있으면 유용합니다. 설치되어 있지 않은 경우 에서 다운로드할 수 있습니다.
PHP 응용 프로그램 만들기
이 튜토리얼에서는 를 사용합니다. Laravel 웹 프레임워크를 사용하는 새로운 PHP 응용 프로그램을 만들기 위해서는 의 공식 문서를 확인해 보시기 바랍니다. 여기서는 새로 만든 응용 프로그램의 이름이 "ReportingOnLaravel"이라고 가정합니다.
http://localhost로 이동한 다음 Visual Studio Code와 같이 자주 사용하는 코드 편집기에서 새로 만든 ReportingOnLaravel 디렉터리를 열어 응용 프로그램이 시작되어 실행 중인지 확인합니다.
응용 프로그램 데이터 추가
웹사이트에서 다운로드할 수 있는 Sales 데이터 집합을 사용해 보겠습니다. 100개의 레코드부터 5백만 개의 레코드까지 다양한 크기의 데이터 집합을 제공합니다. 간단하게 100개의 레코드가 있는 첫 번째 데이터 집합을 사용하겠습니다.
데이터를 다운로드하고 파일에서 응용 프로그램의 "storage" 디렉터리로 압축을 해제합니다.
데이터 집합에는 많은 필드가 있지만 이 튜토리얼에서는 이 중 몇 가지만 사용하겠습니다.
JSON API 엔드포인트 구성
응용 프로그램의 "routes\web.php" 파일을 열고 다음 코드를 추가합니다.
Route::get('/api/sales', function () {
$sales = [];
if (($open = fopen(storage_path() . "/100 Sales Records.csv", "r")) !== FALSE) {
$header = fgetcsv($open);
$keys=array("region", "itemType", "unitsSold");
while (($data = fgetcsv($open)) !== FALSE) {
$sales[] = array_combine($keys, array($data[0], $data[2], $data[8]));
}
fclose($open);
}
return response()->json($sales);
});응용 프로그램이 실행되고 브라우저를 열어 로 이동하고 JSON API가 반환한 데이터를 확인합니다.
ActiveReportsJS 보고서 만들기
이제 JSON API에서 데이터를 시각화하는 보고서를 만들어 보겠습니다.
에서 파일 메뉴를 클릭하고 새로 만든 보고서를 위해 연속 페이지 레이아웃 템플릿을 선택합니다.
속성 검사자의 을 열고 추가 버튼을 클릭합니다.
데이터 소스 편집기 대화 상자에서 ENDPOINT 필드에 http://localhost/api/sales를 입력하고 변경 사항 저장 버튼을 클릭합니다.
데이터 패널에서 DataSource 근처에 있는 + 아이콘을 클릭합니다.
데이터 집합 편집기 대화 상자의 이름 필드에 Sales를, JSON 경로 필드에는 $.*를 입력합니다.
유효성 검사 버튼을 클릭하고 데이터베이스 필드 섹션이 [3개 항목] 텍스트를 표시하는지 확인하고 변경 사항 저장 버튼을 클릭합니다.
도구 모음 왼쪽에 있는 햄버거 메뉴를 사용하여 을 확장합니다.
도구 상자의 차트 항목을 보고서 페이지 영역의 왼쪽 위로 드래그하여 놓습니다. 차트 마법사 대화 상자가 나타납니다. 막대 유형을 선택하고 첫 번째 화면에서 다음 버튼을 클릭합니다.
대화 상자의 두 번째 화면에서 다음 이미지에 표시된 대로 데이터를 구성하고 다음 버튼을 클릭합니다.
세 번째 화면에서 마침 버튼을 클릭합니다.
보고서 페이지의 전체 너비를 채우기 위해 차트 보고서 항목의 크기를 조정합니다. 차트 범례를 클릭하여 속성을 속성 패널에 로드하고 방향 속성을 가로로, 위치 속성을 아래쪽으로 설정합니다.
파일 메뉴를 클릭하고 새로 만든 보고서를 응용 프로그램의 public 폴더에 SalesReport.rdlx-json이라는 이름으로 저장합니다.
보고서를 표시할 정적 HTML 페이지 만들기
응용 프로그램의 public 폴더에서 report.html 파일을 만들고 파일 내용을 다음 코드로 바꿉니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sales Report</title>
<link
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-ui.css"
type="text/css"
/>
<link
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-viewer.css"
type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-pdf.js"></script>
<style>
#viewer-host {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="viewer-host"></div>
<script>
var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.open('SalesReport.rdlx-json');
</script>
</body>
</html>브라우저에서 을 열어 보고서를 확인합니다. 다음과 같이 JSON API 데이터를 표시하는 보고서가 나타납니다.
지금 바로 ActiveReportsJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
