การแสดงข้อมูลพยากรณ์อากาศนั้น สามารถนำข้อมูลมาจากเว็บไซต์ api ของกรมอุตุนิยมวิทยา ซึ่งมีให้เลือกมากมาย ซึ่งตัวอย่างในที่นี้ เลือกใช้ชุดข้อมูล ทำนายผลพยากรณ์อากาศล่วงหน้า 7 วัน และในบทความนี้จะมาแนะนำการเลือกจังหวัดที่ต้องการแสดง ซึ่งสามารถเลือกได้มากกว่า 1 จังหวัด โดยขั้นตอนการทำ list box เลือกมากกว่า 1 ค่า สามารถทำได้ตามลิงค์ที่ให้ โดยมีขั้นตอน ดังนี้
1. สร้าง class เพื่อดึงข้อมูล api ผลพยากรณ์อากาศของกรมอุตุ มาก่อน
โค้ด: เลือกทั้งหมด
class ModWeatherForcecastHelper
{
Public function getItems(){
$url = 'https://data.tmd.go.th/api/WeatherForecast7Days/V1/?type=json';
$data_url = file_get_contents($url);
return $data_url;
}
}
โค้ด: เลือกทั้งหมด
$helper = new ModWeatherForcecastHelper();
$product = $helper->getItems();
require(JModuleHelper::getLayoutPath('mod_weather_forcecast','default'));
3. สร้าง function ขึ้นมา เพื่อดึงเฉพาะชื่อจังหวัด จะเห็นได้ว่า มีการกำหนดคำสั่งของภาษา เนื่องจากชุดข้อมูลมีเพียงสอง ภาษาเท่านั้น คือ ไทย กับ อังกฤษ
โค้ด: เลือกทั้งหมด
JFormHelper::loadFieldClass('list');
class JFormFieldselpro extends JFormFieldList
{
protected $type = 'selpro';
protected function getOptions()
{
$lang_tag = \Joomla\CMS\Factory::getLanguage()->getTag();
$url = 'https://data.tmd.go.th/api/WeatherForecast7Days/V1/?type=json';
$data_url = file_get_contents($url);
$all = json_decode($data_url, true);
$all_provinces = $all['Provinces'];
$provinces = array();
for ($row=0; $row <= count($all_provinces)-1; $row++) {
$ProvinceName = ($lang_tag=='th-TH') ? $all_provinces[$row]['ProvinceNameTh'] : $all_provinces[$row]['ProvinceNameEng'];
array_push($provinces,$ProvinceName);
}
return array_merge(parent::getOptions(), $provinces);
}
}
?>
โค้ด: เลือกทั้งหมด
<fieldset name="basic" addfieldpath="modules/mod_weather_forcecast/field">
<field name="selProvinces"
type="selpro"
label="MOD_WEATHER_FORECAST_SELECT_PROVINCES"
multiple="true"
description="MOD_WEATHER_FORECAST_SELECT_PROVINCES_DESC"></field>
</fieldset>
5. นำชุดข้อมูลมา decode ให้เป็น array ก่อน จากนั้น ลูป แสดงผล โดยการกำหนดให้ แสดงตามจังหวัด ในตัวแปร $select_provinces
โค้ด: เลือกทั้งหมด
$url = 'modules/mod_weather_forcecast/style/style.css';
$document = JFactory::getDocument();
$document->addStyleSheet($url);
$lang_tag = \Joomla\CMS\Factory::getLanguage()->getTag();
$date = Factory::getDate();
$all = json_decode($product, true);
$all_provinces = $all['Provinces'];
for ($i=0; $i < count($select_provinces) ; $i++) {
$provinces = $all_provinces[$select_provinces[$i]];
$sevenDay = $provinces['SevenDaysForecast'];
?>
<div class="form-group test">
<div class="col-12">
<div class="col-md-6">
<?php $ProvinceName = ($lang_tag=='th-TH') ? $provinces['ProvinceNameTh'] : $provinces['ProvinceNameEng']; ?>
<h3 class="provinceName"><?php echo $ProvinceName; ?></h3></div>
<div class="weather ">
<?php $WeatherDescription = ($lang_tag=='th-TH') ? $sevenDay[0]['WeatherDescription'] : $sevenDay[0]['WeatherDescriptionEn']; ?>
<?php $TempartureLevel = ($lang_tag=='th-TH') ? $sevenDay[0]['TempartureLevel'] : $sevenDay[0]['TempartureLevelEn']; ?>
<span ><?php echo $WeatherDescription." ".$TempartureLevel; ?></span><br>
<span><?php echo $lang_rainCover." ".$sevenDay[0]['Rain']['Value']."".$sevenDay[0]['Rain']['Unit']; ?></span><br>
<span><?php echo $lang_windDirection." ".$sevenDay[0]['WindDirection']['Value']." ".$lang_degree." ".$sevenDay[0]['WindSpeed']['Value']." ".$sevenDay[0]['WindSpeed']['Unit']; ?></span><br>
</div>
</div>
<div class="col-md-12">
<span class="temp"><?php echo $sevenDay[0]['MaxTemperature']['Value']."°C "; ?></span>
</div>
<?php foreach ($sevenDay as $key => $aDay): ?>
<div class="test2">
<?php
$date = $aDay['Date'];
list($d, $m, $y) = explode('/', $date);
// echo JHtml::date(strtotime($y.'-'.$m.'-'.$d),JTEXT::_('DATE_FORMAT_LC3'), 'Asia/Bangkok');
?>
<span><?php echo JHtml::date(strtotime($y.'-'.$m.'-'.$d),JTEXT::_('DATE_FORMAT_LC3')); ?></span>
<span><?php echo $aDay['MaxTemperature']['Value']."°C / ".$aDay['MinTemperature']['Value']."°C"; ?></span>
</div>
<?php endforeach; ?>
</div>
<?php } ?>
หน้าแสดงผล