Hướng dẫn viết block vẽ bản đồ thống kê dịch bệnh covid tại Việt Nam

Thứ tư - 18/08/2021 04:33
VNCode xin giới thiệu đến các bạn block thu thập thông tin tình hình dịch bệnh covid được cập nhật hàng ngày tại ncov, thanh niên,... Với mục đích giúp cho các bạn có thể học hỏi thêm về block của nukeviet cms

Hướng dẫn tạo block thống kê tình hình dịch bệnh bằng block nukeviet cms

Đầu tiên tạo file global.covid_bando_vn.ini
<?xml version="1.0" encoding="utf-8"?>
<block>
    <info>
        <name>Config COVID 19</name>
        <author>DACLOI.,Jsc</author>
        <website>http://vinades.vn</website>
        <description></description>
    </info>
    <config>
        <company_name>Công ty cổ phần phát triển nguồn mở Việt Nam</company_name>
        <company_sortname>VINADES.,JSC</company_sortname>
        <company_regcode></company_regcode>
        <company_regplace></company_regplace>
        <company_licensenumber></company_licensenumber>
        <company_responsibility></company_responsibility>
        <company_address> Phòng 1706 - Tòa nhà CT2 Nàng Hương, 583 Nguyễn Trãi, Hà Nội</company_address>
        <company_showmap>1</company_showmap>
        <company_mapurl>https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2634.116366996857!2d105.79399620326203!3d20.9844946314258!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135ac93055e2f2f%3A0x91f4b423089193dd!2zQ8O0bmcgdHkgQ-G7lSBwaOG6p24gUGjDoXQgdHJp4buDbiBOZ3Xhu5NuIG3hu58gVmnhu4d0IE5hbQ!5e0!3m2!1svi!2s!4v1558315703646!5m2!1svi!2s</company_mapurl>
        <company_phone>+84-24-85872007[+842485872007]|+84-904762534[+84904762534]</company_phone>
        <company_fax>+84-24-35500914</company_fax>
        <company_email>contact@vinades.vn</company_email>
        <company_website>http://vinades.vn</company_website>
    </config>
    <datafunction>nv_covid_bando_config</datafunction>
    <submitfunction>nv_covid_bando_submit</submitfunction>
</block>
Tiếp theo tạo file global.covid_bando_vn.php
**
 * NukeViet Content Management System
 * @version 4.x
 * @author VINADES.,JSC <contact@vinades.vn>
 * @copyright (C) 2009-2021 VINADES.,JSC. All rights reserved
 * @license GNU/GPL version 2 or any later version
 * @see https://github.com/nukeviet The NukeViet CMS GitHub project
 */

if (!defined('NV_MAINFILE')) {
    exit('Stop!!!');
}

if (!nv_function_exists('nv_covid_bando')) {
    /**
     * nv_company_info()
     *
     * @param array $block_config
     * @return string
     */
    function nv_covid_bando($block_config)
    {
        global $global_config, $lang_global;

       function file_get_contents_ssl($url) {
			$ch = curl_init();
			curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
			curl_setopt($ch, CURLOPT_HEADER, false);
			curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
			curl_setopt($ch, CURLOPT_URL, $url);
			curl_setopt($ch, CURLOPT_REFERER, $url);
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
			curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 3000); // 3 sec.
			curl_setopt($ch, CURLOPT_TIMEOUT, 10000); // 10 sec.
			$result = curl_exec($ch);
			curl_close($ch);
			return $result;
		}
		$moh_html = file_get_contents_ssl('https://ncov.moh.gov.vn/');

		preg_match('#var data = (.*?);\s*$#m', $moh_html, $matches);
		$DOM = new \DOMDocument();
        libxml_use_internal_errors(true);
        $DOM ->loadHTML('<?xml encoding="UTF-8">' . $moh_html);
        libxml_clear_errors();
        $Header = $DOM->getElementsByTagName('th');
        $Detail = $DOM->getElementsByTagName('td');
        foreach($Header as $NodeHeader) 
        {
            $aDataTableHeaderHTML[] = trim($NodeHeader->textContent);
        }
        $i = 0;
        $j = 0;
        foreach($Detail as $sNodeDetail) 
        {
            $aDataTableDetailHTML[$j][] = trim($sNodeDetail->textContent);
            $i = $i + 1;
            $j = $i % count($aDataTableHeaderHTML) == 0 ? $j + 1 : $j;
        }
        for($i = 0; $i < count($aDataTableDetailHTML); $i++)
        {
            for($j = 0; $j < count($aDataTableHeaderHTML); $j++)
            {
                $aTempData[$i][$aDataTableHeaderHTML[$j]] = $aDataTableDetailHTML[$i][$j];
            }
        }
        $aDataTableDetailHTML = $aTempData; unset($aTempData);
        if (file_exists(NV_ROOTDIR . '/themes/' . $global_config['module_theme'] . '/blocks/global.covid_bando_vn.tpl')) {
            $block_theme = $global_config['module_theme'];
        } elseif (file_exists(NV_ROOTDIR . '/themes/' . $global_config['site_theme'] . '/blocks/global.covid_bando_vn.tpl')) {
            $block_theme = $global_config['site_theme'];
        } else {
            $block_theme = 'default';
        }

        $xtpl = new XTemplate('global.covid_bando_vn.tpl', NV_ROOTDIR . '/themes/' . $block_theme . '/blocks');
        $xtpl->assign('LANG', $lang_global);
        $xtpl->assign('NV_BASE_SITEURL', NV_BASE_SITEURL);
        $xtpl->assign('DATA', $block_config);
		$date = date("d/m/Y");
		foreach($aDataTableDetailHTML as $key => $value){
            $key = $key;
            $country = $value['Tỉnh/TP'];
            $total = $value['Tổng số ca'];
            $today = $value['Hôm nay'];
            $die = $value['Tử vong'];
            $xtpl->assign( 'COUNTRY', $country );
            $xtpl->assign( 'TOTAL', $total );
            $xtpl->assign( 'TODAY',  $today );
            $xtpl->assign( 'DIE',  $die );
            $xtpl->assign( 'STT',  $key );
			$xtpl->parse( 'main.loop' );
        }
		$name = '{point.name}';
		$value= '{point.value}';
		$die = '{point.socatuvong}';
		$restore = '{point.socakhoi}';
		$xtpl->assign('NAME', $name);
		$xtpl->assign('VALUE', $value);
		$xtpl->assign('RESTORE', $restore);
		$xtpl->assign('DIE', $die);
       $xtpl->assign('DATA_MAPS', $matches[1]);
	   $xtpl->assign('DATE', $date);
        $xtpl->parse('main');
        return $xtpl->text('main');
    }
}

if (defined('NV_SYSTEM')) {
    $content =  nv_covid_bando($block_config);
}
Tiếp theo tạo tiếp file global.covid_bando_vn.tpl
<!-- BEGIN: main -->

<style>
	#map-vn {
		height: 500px; 
		min-width: 310px; 
		max-width: 800px; 
		margin: 0 auto; 
	}
	.loading {
		margin-top: 10em;
		text-align: center;
		color: gray;
	}
	        position: relative;
        height: 300px;
        overflow: auto;
        }
        .table-wrapper-scroll-y {
        display: block;
        }
</style>

<script src="https://vncode.info/assets/bando/highmaps.js"></script>
<script src="https://vncode.info/assets/bando/exporting.js"></script>
<script src="https://vncode.info/assets/bando/vn-all.js"></script>

<div id="map-vn"></div>
			<div class="table-wrapper-scroll-y my-custom-scrollbar">          
        <table class="table table-bordered table-striped mb-0">
            <thead>
            <tr style="position: sticky;top: 0px;z-index: 1;background: #f2f2f2;">
                <th scope="col">STT</th>
                <th scope="col">Tỉnh\/TP</th>
                <th scope="col">Tổng số ca</th>
                <th scope="col">Hôm nay</th>
                <th scope="col">Tử vong</th>
            </tr>
            </thead>
            <tbody>
            <!-- BEGIN: loop -->
            <tr>
                <th scope="row">{STT}</th>
                <td>{COUNTRY}</td>
                <td>{TOTAL}</td>
                <td style="color:red;">{TODAY}</td>
                <td>{DIE}</td>
            </tr>
           <!-- END: loop -->
            </tbody>
        </table>
    </div>
<script>
	var data = {DATA_MAPS}
	// Create the chart
	Highcharts.mapChart('map-vn', {
	  chart: {
	    map: 'countries/vn/vn-all'
	  },
	  exporting: {
	    enabled: false
	  },

	  title: {
	    text: 'Thống kê dữ liệu covid ngày {DATE}  '
	  },
	  subtitle: {
	    text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/vn/vn-all.js">Vietnam</a>'
	  },
	  credits: {
	    enabled: false
	  },
	  subtitle: {
	    text: ''
	  },

	  mapNavigation: {
	    enabled: true,
	    buttonOptions: {
	      verticalAlign: 'bottom'
	    }
	  },

	  legend: {
	    title: {
	      text: ''
	    },
	    align: 'center',
	    verticalAlign: 'bottom',
	    floating: false,
	    layout: 'horizontal',
	    valueDecimals: 0,
	    backgroundColor: 'rgba(255,255,255,0.9)',
	    symbolRadius: 0,
	    symbolHeight: 14
	  },
	  colors: ['#f8f9fa', '#c5c573', '#ff9c07',
	    '#ff7907', '#e01c1c', '#f70202'
	  ],
	  colorAxis: {
	    dataClassColor: 'category',
	    dataClasses: [{
	      name: '0'
	    }, {
	      from: 1,
	      to: 5
	    }, {
	      from: 6,
	      to: 10
	    }, {
	      from: 11,
	      to: 20
	    }, {
	      from: 21,
	      to: 50
	    }, {
	      from: 50
	    }]
	  },

	  tooltip: {
	    useHTML: true,
	    backgroundColor: '#9c9c9c',
	    borderColor: '#aaa',
	    headerFormat: '',
	    pointFormat: '<div style="text-align: center;text-transform: uppercase;color:white">' +
	      '<span style="text-align: center;"><b>{NAME}</b></span></div>' +
	      ' <div style="color:white"> <b>Nhiễm bệnh: <span class="badge badge-pill badge-danger">{VALUE}</span></b> <br/>' +
	      '  <b>Phục hồi: <span class="badge badge-pill badge-info">{RESTORE}</span> </b><br/> ' +
	      '<b>Tử vong: <span class="badge badge-pill badge-dark">{DIE}</span></b>	</div>'
	  },

	  series: [{
	    data: data,
	    name: 'Random data',

	    states: {
	      hover: {
	        color: '#2A3477'
	      }
	    },
	    dataLabels: {
	      enabled: false,
	      format: ''
	    }
	  }]
	});
</script>
<!-- END: main -->
Sau khi tạo xong 3 file -> copy pase vào theme cần sử dụng. Chúc mọi người có một trải nghiệm hữu ích từ ngôn ngữ PHP (framework nukeviet cms). Đừng quên like và share để ủng hộ VNCODE ra nhiều bài viết bổ ích hơn hihi.

Tác giả: admin, Đắc lợi

 Tags: Covid 19, covid

Tổng số điểm của bài viết là: 9 trong 2 đánh giá

Xếp hạng: 4.5 - 2 phiếu bầu
Click để đánh giá bài viết

  Ý kiến bạn đọc

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây