온라인으로 학생 성적표를 볼 수 있다면 학부모와 교사 모두에게 다양한 이점이 있을 것입니다. 온라인 액세스를 통해 학부모와 학생은 학생의 학업 성취도를 실시간으로 확인하여, 최신 정보를 얻고 교육에 참여할 수 있습니다. 쉽게 진도를 추적하고, 출석 여부를 모니터링하고, 성적을 확인하고, 추가 지원이 필요한 부분을 파악할 수 있습니다.

교사의 경우, 온라인 성적표를 사용하여 보고 프로세스를 간소화하고, 종합적인 학생 성취도 평가를 더 쉽게 생성하고 공유할 수 있습니다. 이를 통해 교사는 학부모와 보다 효과적으로 의사소통하고 협력을 촉진하며 목표에 맞는 개입을 할 수 있습니다.

전체적으로, 학생 성적표에 온라인으로 액세스함으로써 커뮤니케이션을 개선하고, 책임성을 증대하고, 학생의 성공을 위한 능동적인 접근 방법을 지원할 수 있습니다.

• 학생 성적표 라이브 데모 실행
• 샘플 코드 및 프로젝트 다운로드

고맙게도 ActiveReportsJS를 사용하면 교사들이 쉽게 보고서를 작성하여 사용자 정의하고, 웹 응용 프로그램에서 간편하게 볼 수 있습니다.

이번 스터디에서는 ActiveReportsJS 보고서 디자이너를 사용하여 성적표를 만들고, 보고서 뷰어를 사용하여 JavaScript 응용 프로그램에 성적표를 표시하는 방법을 설명합니다.

• 보고서에 데이터 연결

• 성적표 헤더와 푸터 만들기

• 학생 정보 표시

• GPA 요약 및 학업 진도표 작성

• 행동 및 태도 진도 Tablix 만들기

• 출석률 Tablix 만들기

• JavaScript 응용 프로그램에 ActiveReportsJS 추가

이번 스터디의 목적상, ActiveReportsJS 다운로드에 포함된 독립 실행형 디자이너(데스크톱 앱)를 사용합니다.

디자이너를 설치하고 실행하면 빈 보고서가 표시됩니다.

보고서에 컨트롤을 추가하기 전에 사용할 데이터를 보고서에 연결해야 합니다.

디자이너의 오른쪽 위에서 데이터 패널을 선택합니다.

그러면 데이터 소스(Data Sources), 데이터 집합(Data Sets) 및 매개 변수(Parameters)가 표시됩니다.

시작하려면 데이터 소스가 필요합니다.

"데이터 소스"의 추가 버튼을 클릭하여 "데이터 소스" 창을 불러옵니다.

여기에서 데이터를 찾을 위치를 보고서에 알릴 수 있습니다. 데이터 소스와 관련하여 두 가지 방법이 있습니다.

Remote JSON 또는 Embedded JSON입니다. Remote JSON은 API 끝점(End-Point)에 URL을 제공해야 하며, Embedded JSON을 사용하면 보고서에 직접 데이터를 로드하는 데 사용할 외부 및 원격 JSON 파일(또는 실시간 JSON 데이터)을 선택할 수 있습니다.

이 보고서의 경우, Embedded JSON(보고서에 특정 데이터를 미리 넣어두는 방법, 사업자 등록증과 같이 웬만해서는 잘 바뀌지 않는 고정된 데이터의 양식/서식일 때 사용 가능합니다.)을 사용하여 여러 JSON 파일을 로드합니다.

학생 정보, 성적, 행동 및 출석률에 대한 파일이 있으므로 이러한 각 파일에 대한 데이터 소스를 만들어야 합니다.

완료되면 다음과 같이 표시됩니다.

이제 네 개의 데이터 소스를 설정했으므로 각 데이터 소스에 대한 데이터 집합을 만들어야 합니다.

데이터 소스에 대한 데이터 집합을 만들려면, 사용할 데이터 소스 옆의 더하기 아이콘을 클릭합니다.

"데이터 집합" 창이 열립니다.

우리는 Embedded JSON을 사용하므로 JSON 경로만 제공하면 됩니다.

JSON 경로는 보고서에 JSON에서 가져올 데이터를 알려줍니다.

해당 경우, JSON의 모든 데이터를 가져오려고 하므로 $.* 경로를 사용합니다.

이것은 사용 가능한 모든 데이터를 가지고 오도록 보고서에 지시합니다.

참고

Remote JSON(외부 JSON)을 사용하는 경우에는 URI/경로 값도 제공해야 합니다. 이 값은 보고서에서 API에 전달되어 API에 반환할 데이터를 알려줍니다.

JSON 경로를 제공한 후, 유효성 검사 버튼을 눌러 데이터 집합에서 요청된 데이터를 가져올 수 있는지 확인합니다. 모든 것이 올바로 작동하는 경우 데이터베이스 필드 필드가 이제 데이터의 값으로 채워져야 합니다.

각 데이터 소스에 대한 데이터 집합을 설정하면 데이터 패널은 다음과 같이 표시됩니다.

모든 작업이 끝났습니다. 이제 컨트롤에서 참조할 수 있는 보고서에 데이터를 연결했습니다.

다음 섹션에서는 헤더(머리글)와 푸터(바닥글)부터 시작하여 보고서의 여러 섹션을 작성합니다.

성적표 헤더와 푸터 만들기  

이제 데이터가 설정되었으므로 보고서 요소를 생성할 수 있습니다. 먼저 보고서의 페이지 헤더(머리글)과 푸터(바닥글)을 만듭니다.

도구 모음에서 섹션 탭을 선택하고 헤더(머리글) 및 푸터(바닥글)버튼을 클릭합니다.

보고서에 헤더와 푸터 섹션이 추가됩니다.

헤더 섹션의 "컨트롤 도구 상자"에서 두 개의 컨트롤을 추가하려고 합니다.

디자이너의 왼쪽 상단의 햄버거 버튼을 클릭하여 도구 상자를 확장한 다음, 텍스트 상자와 이미지 컨트롤을 페이지 헤더로 드래그합니다.

텍스트 상자 내에서 텍스트 상자의 값을 "학생 성적표"로 설정합니다. 그런 다음, 이미지 컨트롤을 위한 이미지를 보고서에 포함합니다.

이미지 컨트롤을 선택한 다음, 속성의 "모양" 섹션에서 "이미지" 드롭다운을 확장합니다.

이미지를 포함하려면 삽입 버튼을 클릭한 다음 "로드…"를 클릭하여 파일 탐색기를 열고 로드할 이미지를 선택합니다.

이제 이미지가 불러와지고 텍스트가 설정되었습니다.

"속성" 패널을 통해 약간 크기를 조정하고 스타일을 조정하면 됩니다.

완료되면 헤더 섹션이 다음과 같이 표시됩니다.

이제 푸터(바닥글)를 만들겠습니다.

푸터에는 연락처 정보를 포함할 상자 두 개와 현재 연도를 표시할 상자 한 개 등, 텍스트 상자 세 개를 포함하려고 합니다. 또한 연락처 정보가 포함될 각 상자 옆에는 전화번호임을 표시하기 위해 전화 아이콘을 포함하려고 합니다.

텍스트 상자 컨트롤 세 개와 이미지 컨트롤 두 개를 페이지의 푸터 영역으로 드래그합니다. 위에 설명된 것과 동일한 단계에 따라 이미지를 설정하겠습니다.

텍스트 상자 컨트롤 두 개의 경우, 보고서 소유자에게 연락하는 데 사용할 수 있는 전화번호 몇 개만 넣지만, 세 번째 컨트롤의 경우 식을 사용하여 항상 현재 연도를 표시하도록 하려고 합니다.

세 번째 텍스트 상자 안에 다음 값을 넣습니다.

© {Year(Now())} GrapeCity, Inc. All Rights Reserved.

문자열 안에 중괄호를 포함하고, 중괄호 안에는 Year(Now()) 식을 포함했습니다.

이 식은 현재 연도를 반환하며, 보고서에서는 중괄호 안에 포함했기 때문에 이 값을 식으로 평가해야 한다는 것을 인식합니다.

약간의 스타일을 지정하면 푸터가 다음과 같이 표시됩니다.

보고서를 미리 보고 생성된 식이 어떻게 평가되는지 확인할 수 있습니다.

이제 헤더와 푸터가 각 보고서 페이지에 표시됩니다.

다음 섹션에서는 학생에 대한 몇 가지 기본 정보를 표시하여 로드한 데이터의 일부를 추가하겠습니다.

학생 정보 표시  

보고서에서 로드 중인 일부 데이터를 통합하겠습니다. 먼저, 텍스트 상자와 컨테이너 컨트롤을 보고서 본문으로 드래그합니다.

두 컨트롤 모두 페이지의 너비만큼 확대하고, 텍스트 상자 컨트롤 안에 "학생 정보(Studen Information)"라는 텍스트를 포함합니다.

컨테이너를 사용하여 학생 정보와 관련된 모든 정보를 저장하겠습니다.

이제 컨테이너 안에 텍스트 상자를 배치합니다. 텍스트 상자는 두 레이블 및 데이터 집합의 정보를 저장하는 데 사용됩니다.

컨테이너를 다음과 일치하도록 설정합니다.

각각의 빈 텍스트 상자 안에 학생 정보 데이터 집합에서 데이터를 가져오는 식을 포함하려고 합니다. 연결된 텍스트 상자에 다음과 같은 텍스트를 포함합니다.

GPA 요약 및 학업 진도표 작성 

다음으로 학생의 성적과 관련된 정보를 표시합니다.

먼저 "GPA 요약" 섹션을 만듭니다.

이전 섹션과 마찬가지로 텍스트 상자와 컨테이너 컨트롤을 보고서로 드래그합니다.

두 컨트롤 모두 페이지의 너비만큼 확대하고, 텍스트 상자 컨트롤 안에 "GPA 요약"이라는 텍스트를 포함합니다.

이 컨테이너 안에 학생의 전체 GPA 및 백분위수를 표시하려고 합니다.

텍스트 상자 네 개를 컨테이너로 끌고 다음과 같이 설정합니다.

다음으로 빈 텍스트 상자 안에 식을 더 설정해야 합니다.

이제 요약을 만들었으므로 학생의 진도를 과목별로 나누어 표시하겠습니다. "GPA 요약" 섹션 밑에서 텍스트 상자와 표 컨트롤을 보고서 본문으로 드래그합니다. 텍스트 상자 안에 "학업 진도"라는 텍스트를 포함하고, 표 안에 다음과 같은 열 헤더를 포함합니다.

• 제목

• 교사

• 1학기

• 2학기

• 3학기

완료되면 다음과 같이 표시됩니다.

다음으로 올바른 데이터를 표와 연결해야 합니다. 표 컨트롤을 선택한 다음, 속성 패널 내에서 mark 데이터 집합을 사용하도록 데이터 집합 이름 드롭다운을 설정합니다.

이제 표 내에서 데이터 집합의 데이터를 참조할 수 있습니다.

표의 나머지 부분은 다음과 같이 채워 주세요.

약간의 스타일을 지정하면 표 컨트롤이 다음과 같이 표시됩니다.

보고서를 미리 볼 때 표는 다음과 같이 표시됩니다.

 

행동 및 태도 진도 Tablix 추가 

이제 사용자가 자신의 학업 진도를 볼 수 있으므로, 학생의 행동 및 태도 진도에 관한 교사의 평가를 보여주는 섹션을 추가합니다.

그 전에 보고서에 새 섹션을 추가합니다. 보고서 디자이너의 하단에 섹션 추가 버튼이 표시됩니다.

이 버튼을 누르면 보고서에 새 페이지/연속 섹션이 추가됩니다.

이제 이 새 섹션의 머리글 밑에 텍스트 상자 컨트롤과 컨테이너 컨트롤을 추가하고, 컨테이너 컨트롤 안에 텍스트 상자 세 개를 추가합니다.

다음과 같이 텍스트 상자를 자체 텍스트로 채웠습니다.

Tablix 컨트롤을 추가하기 전에 한 가지를 더 수정하려고 합니다.

이 표에서 아이콘을 사용하여 우수, 만족, 개선 필요 등 학생이 속하는 범위를 표시하려고 합니다. 녹색, 노란색 및 빨간색 아이콘을 사용합니다.

아이콘을 추가하려면 연결된 텍스트 상자의 이미지 속성에 다음과 같은 값을 추가합니다.

보고서는 다음과 같이 표시됩니다. 

이제 Tablix 컨테이너를 설정했으므로 행동 및 태도 진도 데이터를 표시할 Tablix 컨트롤을 추가합니다. Tablix 컨트롤을 컨테이너로 드래그합니다. 디자이너 창에 Tablix 마법사 팝업이 표시됩니다.

Tablix 마법사는 표준 표보다 더 동적인 방식으로 데이터를 표시할 수 있는, Tablix(또는 피벗 테이블) 컨트롤을 만들기 위한 매우 강력한 도구입니다.

도움말의 시작 부분에서 만든 behavior 데이터 집합의 데이터를 사용하겠습니다.

이 데이터 집합을 확장한 다음 BehavioralMeasure 값을 마법사의 행 그룹 섹션으로 끌어서 놓고 T1, T2 및 T3 값을 마법사의 값 섹션으로 끌어서 놓습니다. T1, T2 및 T3의 집계 값을 개수에서 없음으로 변경해야 합니다.

완료하기 전에 마법사의 필터 버튼을 클릭합니다. 이 표에 대한 필터를 설정해야 합니다. 여기에서 추가 버튼을 클릭하여 새 필터를 추가합니다.

첫 번째 상자를 데이터 집합의 유형 필드로 설정하고 공부 습관(Work Habit) 문자열을 검색하도록 필터를 설정합니다.

완료되면 확인 버튼을 클릭해 주세요. 현재 Tablix의 모양을 확인할 수 있습니다.

이제 우수, 만족 및 개선 필요 텍스트 상자와 마찬가지로 T1, T2 및 T3 열의 데이터 셀을 텍스트 값 대신 아이콘을 표시하도록 업데이트합니다. 각 데이터 셀에 대해, 텍스트 값을 제거하고 연결된 텍스트 상자의 이미지 속성을 업데이트합니다.

이렇게 하면 Tablix 컨트롤이 셀 값을 기반으로 올바른 신호등 아이콘을 셀에 배치합니다. 몇 가지 스타일 업데이트 후 첫 번째 Tablix는 다음과 같이 표시되어야 합니다. 

보고서를 미리 볼 때 Tablix는 다음과 같이 표시됩니다.

이제 태도 정보를 표시하기 위해 두 번째 Tablix 컨트롤을 만들어야 합니다.

좋은 점은 이 Tablix는 방금 만든 Tablix와 거의 동일하다는 것입니다.

첫 번째 Tablix를 복사하여 붙여 넣은 다음 다른 Tablix 바로 밑의 컨테이너에 배치합니다.

그리고 첫 번째 머리글 셀을 "공부 습관(Work Habits)"에서 "행동 강령 준수(Adherence to Code of Conduct)"로 업데이트합니다.

마지막으로 두 번째 Tablix 컨트롤을 선택하고 컨트롤 오른쪽 위의 톱니바퀴 아이콘을 클릭합니다. Tablix 마법사가 다시 열립니다.

필터 버튼을 클릭합니다. 현재 사용 중인 필터를 수정할 것입니다.

필터 텍스트 값을 공부 습관(Work Habits)에서 "교실 행동(Classroom Conduct)"으로 업데이트합니다.

이제 "행동 및 태도 진도(Behavioral and Attitude Progress)" 섹션이 다음과 같이 표시됩니다.

보고서를 미리 볼 때 "행동 및 태도 진도(Behavioral and Attitude Progress)" 섹션은 다음과 같이 표시됩니다.

출석률 Tablix 추가 

보고서에 추가할 마지막 섹션에는 학생의 출석률(Attendance)이 표시됩니다.

텍스트 상자 컨트롤과 Tablix 컨트롤을 보고서로 드래그하여 "행동 및 태도 진도 (Behavioral and Attitude Progress)" 섹션 밑에 놓습니다.

Tablix 마법사 내에서 attendance 데이터 집합을 사용하려고 합니다. 일 수(Days)값을 마법사의 행 그룹(Row Groups) 섹션으로 끌고 T1, T2 및 T3 값을 마법사의 값(Values) 섹션으로 끕니다. 또한 T1, T2 및 T3의 집계 값을 개수에서 합계(Sum)로 변경해야 합니다.

이제 "출석률(Attendance)" 섹션이 다음과 같이 표시됩니다.

보고서를 미리 볼 때 보고서는 다음과 같이 표시됩니다.

이제 보고서가 완료되었으며 보고서를 미리 볼 때 페이지는 다음과 같이 표시됩니다.

 

JavaScript 응용 프로그램에 ActiveReportsJS 추가 

학생 성적표를 만들었으므로 브라우저에서 보고서를 볼 수 있도록 ActiveReportsJS 보고서 뷰어를 JavaScript 응용 프로그램에 추가합니다.

index.html이라는 새 파일을 만들고 원하는 IDE에서 해당 파일을 엽니다. 파일에 다음 코드를 추가합니다.

<!DOCTYPE html>
​
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Student Progress Report</title>
  <meta name="description" content="ARJS Report viewer" />
  <meta name="author" content="GrapeCity" />
</head>
<body></body>
</html>

이제 HTML 파일이 설정되었으므로 파일에 ActiveReportsJS를 추가합니다.

이를 위해 CDN을 사용하여 필수 파일을 로드합니다. <head> 태그 안에 다음 코드를 추가합니다.

<link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-ui.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-viewer.css" type="text/css" />
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-html.js"></script>

처음 두 코드 줄은 코어 CSS 파일과 뷰어 CSS 파일 등 필수 CSS 파일을 로드합니다. 다음으로 핵심 JavaScript 파일과 뷰어 JavaScript 파일을 로드합니다.

마지막으로 pdf, 표 형식 데이터 및 HTML JavaScript 파일을 로드합니다. 해당 파일들을 사용하면 사용자가 보고서를 각 파일 형식을 내보낼 수 있습니다.

사용자가 보고서를 특정 형식으로 내보내는 것을 허용하지 않으려면, 관련 <script> 태그를 제외하기만 하면 됩니다. 그러면 사용자가 해당 파일 형식으로 내보낼 수 없게 됩니다.

다음으로 페이지의 요소에 몇 가지 기본 스타일을 추가합니다. <head> 태그 안의 방금 추가한 스크립트 태그 밑에 다음 코드를 추가합니다.

<style>
  body {
      margin: 0;
  }
  #viewer-host {
    width: 100%;
    height: 100vh;
  }
</style>

이렇게 하면 본문 요소에서 여백이 제거되고, ID가 viewer-host인 요소의 너비와 높이도 설정됩니다.

이제 <body> 태그 안에 다음 요소를 추가합니다.

<div id="viewer-host"></div>

우리는 이 div 요소의 ID를 viewer-host로 지정했습니다. 이는 이전에 설정한 CSS 스타일을 연결하지만, JavaScript 보고서 뷰어를 div에 연결할 수도 있음을 의미합니다.

마지막으로 div 밑에 다음 코드를 추가합니다.

<script>
  var viewer = new ActiveReports.Viewer("#viewer-host");
  viewer.open("StudentProgressReport.rdlx-json");
</script>

이 JavaScript는 새 ActiveReportsJS 뷰어를 만들어, ID가 viewer-host인 요소와 연결합니다. 그런 다음 뷰어의 open 메서드를 호출하여 보고서 이름을 전달합니다.

마지막으로 index.html 파일과 동일한 폴더에 보고서를 넣어야 합니다. 그러지 않을 경우 보고서의 정확한 위치를 가리키도록 해야 합니다.

이제 응용 프로그램을 실행하기만 하면 됩니다. 정적 웹 서버를 사용하여 응용 프로그램을 실행할 수 있습니다. 우리는 Visual Studio Code를 사용하므로 Live Server 확장 프로그램을 사용하여 신속하게 정적 웹 서버를 가동합니다.

브라우저에서 응용 프로그램을 열면 다음과 같이 표시됩니다.

 

결론

작업이 모두 완료되었습니다. ActiveReportsJS를 사용하면 사용자 정의된 성적표를 쉽게 작성하여, 교사와 학생 모두 학기 내내 학생의 진도를 추적할 수 있습니다!