Hướng dẫn reports in php - báo cáo trong php

Cập nhật lần cuối: 15 Tháng Ba 2020 15 Tháng Ba 2020

857 Lượt xem

Khi bạn phát triển phần mềm thì có một công việc mà bạn luôn phải làm và nó luôn là một tính năng bắt buộc phải có trong các phần mềm đó chính là tính năng báo cáo. Nếu bạn phát triển phần mềm với công nghệ Winform hay ASP.Net thì bạn sẽ có những công cụ hỗ trợ rất mạnh giúp bạn có thể tạo được một báo cáo khá là nhanh chóng và dễ dàng nhưng nếu bạn phát triển phần mềm trên nền tảng PHP thì sẽ không có nhiều công cụ có thể giúp bạn tạo một report thật chuyên nghiệp và dễ dàng. Vậy đâu sẽ là giải pháp cho vấn đề này. Thực ra vẫn có một số công cụ hỗ trợ tạo báo cáo cho những phần mềm phát triền trên nền tàng PHP hay các framework được viết bằng PHP như Laravel và hôm nay tôi muốn hướng dẫn mọi người các tạo report trên Laravel bằng một công cụ giúp bạn tạo được các mẫu report chuyên nghiệp đó chính là phần mềm StimulSoft Report Ultimate. Đây là một phần mềm tạo báo cáo rất trực quan và chuyên nghiệp.

Đầu tiên để tạo một mẫu report cho sản phẩm mà mình đang phát triển thì bạn sẽ cần tạo một file mẫu báo cáo bằng công cụ thiết kế của Stimulsoft đã công việc khá là đơn giản và dễ dàng bạn chỉ việc mở công cụ Stimulsoft Desgin và kéo thả các thành phần mà bạn mong muốn vào trong mẫu Report của mình.

Đề tạo một mẫu báo cáo cơ bản thì bạn sẽ cần kéo vô hai thành phần bắt buộc phải có là Report Title Band và Report Summary Band đây chính là hai thành phần sẽ chứa phần đầu tiêu đề của báo cáo và phần thân của báo cáo.Sau đó bạn có thể chèn bất cứ thành phần náo vào bên trong hai thành phần này như hình ảnh hay văn bản.

Đề có thể hiển thị được dữ liệu được trả về từ server của bạn thì bạn cũng cần kéo DataBand vào báo cáo của mình để có thể hiển thị dữ liệu vào báo cáo của mình.

Nếu trong báo cáo của bạn có bảng biểu và bạn muốn tạo bảng trong báo cáo của mình thì bạn sẽ cần thêm hai thành phần khác vào báo cáo của mình là Headerband và FooterBand đây là hai thành phần sẽ hiển thị phần đầu và phần cuối của dải dữ liệu khi dữ liệu của bạn được hiển thị hoàn tất.

Sau khi bạn đã thiết kế hoàn tất mẫu báo cáo của mình tiếp theo bạn cần tạo nguồn dữ liệu cho báo cáo để có thể nhận dữ liệu được phản hồi từ server.

Để tạo nguồn dữ liệu mới thì bạn hãy chuyển sang tab từ điển và nhấn chuột phải vào mục các nguồn dữ liệu và chọn tạo nguồn dữ liệu mới.

Tại hộp thoại chọn nguồn dữ liệu bạn có thể chọn rất nhiều kiểu nguồn dữ liệu cho mẫu báo cáo của mình nhung ở đây mình sẽ chọn Dataset, Datable.

Hộp thoại tạo nguồn dữ liệu hiện ra ở hộp thoại này bạn có thể đặt tên cho nguồn dữ liệu và tạo các bảng dữ liệu có các cột và tên sao cho giống với các dữ liệu mà bạn đã trả về từ server hãy nhớ tên của các bảng cũng như các cột trong bảng phải giống y hệt với dữ liệu được trả về từ server, sau khi đã tạo xong bạn hãy nhấn đồng ý để lưu lại nguồn dữ liệu đã tạo.

Sau khi bạn đã tạo xong nguồn dữ liệu và muốn gắn các dữ liệu bạn đã tạo vào báo cáo của mình thì rất đơn giản bạn chỉ cần chọn thành phần muốn gắn sau đó chọn ô cột dữ liệu và chọn cột dữ liệu mà bạn muốn gắn vào báo cáo.

Và StimulSoft cũng cho phép bạn có thể viết các biểu thức tại ô biểu thức để có thể tuỳ chỉnh các dữ liệu theo ý muốn của bạn.

Bạn cũng có thể tạo các biến để có thể chuyền các biến từ bên ngoài vào báo cáo của mình.

Cách làm rất đơn giản click chuột phải tại tab từ điển và chọn tạo biến mới.

Tại hộp thoại tạo biến mới bạn có thể nhập tên của biến và chọn kiểu dữ liệu cho biến mà bạn sẽ tạo và nhấn đồng ý để lưu biến đó lại

để hiển thị biến đó thì rất đơn giản bạn có thể kéo thả biến đó vào report hoặc bạn có thể chọn vào thành phần bạn muốn hiển thị và tại phàn biểu thức bạn có thể nhập vào theo cấu trúc sau để hiển thị biến đó ra: {tên biến};

Sau khi bạn đã tạo xong mẫu báo cáo của mình bằng phần mềm desginer của stimulsoft thì bạn có thể lưu mẫu báo cáo của mình vào một thư mục trong dự án của bạn.

Sau đó bạn hãy coppy các file js cần thiết của stimulsoft vào project của bạn và nhúng nó vào file master của bạn.

Bạn sẽ cần coppy và nhúng vào các file js sau:

Sau khi đã nhúng các file js cần thiết vào thì tại nơi bạn muốn hiển thị báo cáo thì bạn hẫy tạo một thẻ div và đặt một id tuỳ ý, ở đây tôi đặt là content.

sau đó tại file js của bạn thì bạn có thể nhúng đoạn mã JS sau vào:

 // Load file key ban quyen cho phan mem

Stimulsoft.Base.StiLicense.loadFromFile("js/libReport/Reports.JS/license.key");

    //đặt ngôn ngữ

    Stimulsoft.Base.Localization.StiLocalization.setLocalizationFile("js/libReport/Reports.JS/Localization/vi.xml");

    // Đặt chế độ toàn màn hình cho người xem

    var options = new Stimulsoft.Viewer.StiViewerOptions();

    options.height = "200vh";

    options.appearance.scrollbarsMode = true;

    options.toolbar.showOpenButton = false;

    options.toolbar.printDestination = Stimulsoft.Viewer.StiPrintDestination.Direct;

    options.appearance.htmlRenderMode = Stimulsoft.Report.Export.StiHtmlExportMode.Table;

    options.toolbar.showAboutButton = false;

    // options.appearance.fullScreenMode = true;

    // Tạo trình xem báo cáo với các tùy chọn được chỉ định

    var viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);

// Khởi tạo view 

    viewer.renderHtml('content');

    // Create a new report instance

    // Tạo một ví dụ báo cáo mới

    var report = new Stimulsoft.Report.StiReport();

    // Load file báo cáo từ url

    report.loadFile("../../../report/2.2.2quyetdinhhotromaitangphi.mrt");

    // Gán báo cáo cho người xem, báo cáo sẽ được xây dựng tự động sau khi hiển thị trình xem

    viewer.report = report;

    var viewer = null;

    var designer = null;

Và ở tại hàm hiển thị báo cáo sau khi bạn thực hiện hành động xuất ra báo cáo thì bạn hãy chèn đoạn JS này vào.

 //view report

          Stimulsoft.Base.StiLicense.loadFromFile("js/libReport/Reports.JS/license.key");

            //đặt ngôn ngữ

            Stimulsoft.Base.Localization.StiLocalization.setLocalizationFile("js/libReport/Reports.JS/Localization/vi.xml");

            // Set full screen mode for the viewer

            // Đặt chế độ toàn màn hình cho người xem

            var options = new Stimulsoft.Viewer.StiViewerOptions();

            options.height = "200vh";

            options.appearance.scrollbarsMode = true;

            // options.toolbar.showDesignButton = true;

            options.toolbar.showOpenButton = false;

            options.toolbar.printDestination = Stimulsoft.Viewer.StiPrintDestination.Direct;

            options.appearance.htmlRenderMode = Stimulsoft.Report.Export.StiHtmlExportMode.Table;

            options.toolbar.showAboutButton = false;

            // options.appearance.fullScreenMode = true;



            //Viewer

            var viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);

            viewer.renderHtml('content');

            var report = new Stimulsoft.Report.StiReport();

            // var datas = { "databases" : [{"libelle":"myLibelle1","libcourt":"myLibCourt1","name":"name1"},{"libelle":"myLibelle2","libcourt":"myLibCourt2","name":"name2"}]};

            var datas = data;

//Khoi tao mot dataset

            var dataSet = new Stimulsoft.System.Data.DataSet("datas");

// Gan du lieu tu Json tra ve vao dataset

            dataSet.readJson(datas);

            report.regData(dataSet.dataSetName, "", dataSet);

            // report.dictionary.synchronize();

            report.loadFile("../../../report/2.2.2quyetdinhhotromaitangphi.mrt");

// Lay cac bien duoc tao trong bao cao

            let nam = report.dictionary.variables.getByName('nam');

            let thang = report.dictionary.variables.getByName('thang');

            let ubnd = report.dictionary.variables.getByName('ubnd');

            let ngayht = report.dictionary.variables.getByName('ngayht');

            let thanght = report.dictionary.variables.getByName('thanght');

            let namht = report.dictionary.variables.getByName('namht');

// Gan gia tri cho cac bien 

            let ubndText = $('#cbxa option:selected').text();

            let rpthang = $('#cbchonthang').val();

            rpthang = rpthang.split('/');

            let Current = new Date();

            ubnd.value = ubndText;

            thang.value = rpthang[1];

            nam.value = rpthang[2];

            ngayht.value = Current.getDate();

            thanght.value =Current.getMonth()+1;

            namht.value = Current.getFullYear();

            report.dictionary.synchronize();

// gan report vào view

            viewer.report = report;

Như vậy là bạn đã hoàn thành việc tạo và sử dụng report trong project PHP của mình rồi đấy. hi vọng qua bài viết này bạn sẽ có một công cụ mới giúp bạn có thể dễ dàng tạo các báo cáo cho project của mình.