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

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);
}

Xem Thêm : Block nukeviet hiệu ứng cánh hoa mai rơi

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.

Nguồn: https://vncode.info
Danh mục: Block nukeviet

Related Posts

Block hotline contact nukevite 4.5

Hướng dẫn viết block Holine Contact nukeviet 4.5 Tạo file global.hotline_contact.iniCó thể bạn quan tâm Hướng dẫn viết block vẽ bản đồ thống kê dịch bệnh covid tại…

Hướng dẫn thêm thống kê truy cập tháng trước vào block statics nukeviet

Hướng dẫn viết block hiển thị thống kê truy cập theo tháng Thêm phần code PHP dưới đây vào block global.counter.php  phía dưới  $xtpl->assign(‘IMG_PATH’, NV_STATIC_URL . ‘themes/’ . $block_theme…

Hướng dẫn thêm đọc bằng audio vào module news nukeviet

Hướng dẫn tạo nút audio tại nukeviet Thêm đoạn code phía dưới vào detail.tpl tìm file (DETAIL.publtime)Có thể bạn quan tâm Hướng dẫn thêm thống kê truy…

Block hiệu ứng tuyết rơi nukeviet 4.x

Hướng dẫn làm block nukeviet trang trí Giáng Sinh cho website của bạn như tạo tuyết rơi, khung cảnh chuông giáng sinh, cây thông….Có thể bạn quan…

Block nukeviet hiệu ứng cánh hoa mai rơi

VNCODE xin chia sẽ đến các bạn block tết với hiệu ứng cánh hoa mai và hoa anh đào rơi. Sourcode bao gồm hình ảnh câu đối,…

Chia sẻ block groups multi tabs module shops nukeviet miễn phí

Ứng dụng của blocks Multi Tabs trong module Shops Với ứng dụng Product Tabs, người bán có thể: thêm tab và điều chỉnh nội dung dễ dàng…