PHP Intl Class Datetime Google Translate Tutorial

PHP Intl Class Datetime Google Translate Tutorial

PHP Intl Class Datetime Google Translate Tutorial

The Internationalization improvements of yesterday’s PHP Intl Class Datetime Clock Tutorial get another boost today via the inclusion of some interfacing to the great …


Google Translate

… for those incidental translations regarding …

  • titles and headings
  • dropdown instructions

… while avoiding what might add confusion, that being any translation of user web application settings, as you might get … you being the user … that is!

But we ask first on this. And when it is the case for asking here, a useful mechanism can be the HTML input type=checkbox element which now feeds into the Javascript below …

<?php echo ”

function parhelp() {
" . $gone . "
}

function storeinnertexts() {
if (!document.getElementById('translate').checked) { return ''; }
if (!allowanyway) {
if (document.getElementById('locale').value == '') { return ''; }
if (document.getElementById('timezone').value == '') { return ''; }
}
var bcols=['yellow','yellow','white','#ffffff'];
var idcnt=0;
var seclet=['h translate=\"no\"','d','h translate=\"no\"','d','d translate=\"no\"','d','d','d'];
var inb='', ina='</span>';
var krow=0;
var itsare=['locale','loptone','timezone','toptone','calendar','calone','doneb','Clock'], thisrowis='';
var h1toform='<html><head><body>' + document.body.innerHTML.split('<form')[0] + '<br><table style=width:100%; border=2></table></body></html>';
for (var iuyt=0; iuyt<itsare.length; iuyt+=2) {
thisrowis='<tr style=background-color:' + bcols[krow] + ';></tr>';
thisrowis='<tr></tr>';
tdsuff='';
inb='<span>';
if (eval('' + seclet[idcnt].length) > 1) {
inb='<span' + seclet[idcnt].substring(1) + '>';
}
if (bcols[krow] == '#ffffff') {
tdsuff=' style=background-color:lightgreen;'
}
if (document.getElementById(itsare[iuyt]).value.trim() != '' || 1 == 1) {
thisrowis=thisrowis.replace('</tr>', '<t' + seclet[idcnt].substring(0,1) + '>' + inb + (inb == '<span>' ? document.getElementById(itsare[iuyt]).value : '') + ina + '</t' + seclet[idcnt].substring(0,1) + '></tr>');
} else {
thisrowis=thisrowis.replace('</tr>', '<t' + seclet[idcnt].substring(0,1) + '>' + inb + (inb == '<span>' ? document.getElementById(itsare[iuyt]).placeholder : '') + ina + '</t' + seclet[idcnt].substring(0,1) + '></tr>');
}
idcnt++;
if (bcols[krow] == '#ffffff') {
tdsuff=' style=background-color:#f0f0f0;'
}
inb='<span>';
if (eval('' + seclet[idcnt].length) > 1) {
inb='<span' + seclet[idcnt].substring(1) + '>';
}
if (itsare[eval(1 + iuyt)] == itsare[eval(1 + iuyt)].toLowerCase()) {
try {
if (document.getElementById(itsare[eval(1 + iuyt)]).innerText.trim() != '') {
//if (doseti == 1) { alert(document.getElementById(itsare[eval(1 + iuyt)]).innerText); }
thisrowis=thisrowis.replace('</tr>', '<t' + seclet[idcnt].substring(0,1) + '>' + inb + (inb == '<span>' ? document.getElementById(itsare[eval(1 + iuyt)]).innerText : '') + ina + '</t' + seclet[idcnt].substring(0,1) + '></tr>');
}
} catch(erty) { alert(itsare[eval(1 + iuyt)]); }
} else {
if (document.getElementById(itsare[eval(1 + iuyt)].toLowerCase()).value.trim() != '') {
thisrowis=thisrowis.replace('</tr>', '<t' + seclet[idcnt].substring(0,1) + '>' + inb + (inb == '<span>' ? document.getElementById(itsare[eval(1 + iuyt)].toLowerCase()).value : '') + ina + '</t' + seclet[idcnt].substring(0,1) + '></tr>');
} else {
thisrowis=thisrowis.replace('</tr>', '<t' + seclet[idcnt].substring(0,1) + '>' + inb + (inb == '<span>' ? document.getElementById(itsare[eval(1 + iuyt)].toLowerCase()).placeholder : '') + ina + '</t' + seclet[idcnt].substring(0,1) + '></tr>');
}
}
idcnt++;
krow++;
h1toform=h1toform.replace('</table>', thisrowis + '</table>');
}
//if (doseti == 1) { alert(h1toform); }
h1toform=h1toform.replace(/Optionally\ select\ /g, '*');
h1toform=h1toform.replace(/Show\ Current\ Time/g, '@');
h1toform=h1toform.replace('RJM Programming - December, 2024', '$');
h1toform=h1toform.replace('As per (white background textboxes optional) ...', '!');
h1toform=h1toform.replace(/\<br\>/g, '');
h1toform=h1toform.replace('<span translate=\"no\"></span>', '');
h1toform=h1toform.replace('<span translate=\"no\"></span>', '');
//if (doseti == 1) { var tyr=prompt('' + (documentURL.split('?')[0] + '?sra=' + encodeURIComponent(sra) + '&it=' + encodeURIComponent(h1toform) + '&rand=' + Math.floor(Math.random() * 1987865)).length + ' ' + h1toform.replace(/\<\//g, String.fromCharCode(10) + '</'), h1toform.replace(/\<\//g, String.fromCharCode(10) + '</')); }
document.getElementById('setiif').src=documentURL.split('?')[0] + '?sra=' + encodeURIComponent(sra) + '&it=' + encodeURIComponent(h1toform) + '&rand=' + Math.floor(Math.random() * 1987865);
doseti++;
return '';
}

function setitranslate() {
if (doseti == 0) {
doseti=1;
setInterval(storeinnertexts, 2000);
}
}

“; ?>

… and the PHP …

<?php

$gtwo='';
$delthis='';
$optcnt=0;

if (isset($_GET['timezone'])) {
$_GET['timezone']=explode('%20',explode('+', $_GET['timezone'])[0])[0];
} else if (isset($_POST['timezone'])) {
$_POST['timezone']=explode('%20',explode('+', $_POST['timezone'])[0])[0];
}

function user_agent() { // thanks to https://stackoverflow.com/questions/6322112/check-if-php-page-is-accessed-from-an-ios-device/6322131
$iPod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
//file_put_contents('./public/upload/install_log/agent',$_SERVER['HTTP_USER_AGENT']);
if ($iPad||$iPhone||$iPod) {
return 'ios';
} else if ($android) {
return 'android';
} else {
return 'pc';
}
}

function server_remote_addr() {
$rma = $_SERVER['REMOTE_ADDR'];
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
// you can add different browsers with the same way ..
if (1 == 1) {
if(preg_match('/(chromium)[ \/]([\w.]+)/', $ua))
$rma = '000000'.$rma;
elseif(preg_match('/(chrome)[ \/]([\w.]+)/', $ua))
$rma = '00000'.$rma;
elseif(preg_match('/(safari)[ \/]([\w.]+)/', $ua))
$rma = '0000'.$rma;
elseif(preg_match('/(opera)[ \/]([\w.]+)/', $ua))
$rma = '000'.$rma;
elseif(preg_match('/(msie)[ \/]([\w.]+)/', $ua))
$rma = '00'.$rma;
elseif(preg_match('/(mozilla)[ \/]([\w.]+)/', $ua))
$rma = '0'.$rma;
}
return str_replace(':','_',str_replace('.','_',$rma));
}

if (isset($_GET['sra']) && isset($_GET['it'])) {
//if (file_exists($_SERVER['DOCUMENT_ROOT'] . '/html_intl_' . str_replace('+',' ',urldecode($_GET['sra'])) . '.html')) {
// exec('rm -f ' . $_SERVER['DOCUMENT_ROOT'] . '/html_intl_' . str_replace('+',' ',urldecode($_GET['sra'])) . '.html');
//}
$wopenit=false;
if (!file_exists($_SERVER['DOCUMENT_ROOT'] . '/html_intl_' . str_replace('+',' ',urldecode($_GET['sra'])) . '.html')) {
$wopenit=true;
}
$cont=str_replace('+',' ',urldecode($_GET['it']));
$cont=str_replace('*', 'Optionally select ', $cont);
$cont=str_replace('@', 'Show Current Time', $cont);
$cont=str_replace('$', 'RJM Programming - December, 2024', $cont);
$cont=str_replace('!', 'As per (white background textboxes optional) ...', $cont);
$cont=str_replace('</body>', '<style> th { background-color:yellow; } </style></body>', $cont);
file_put_contents($_SERVER['DOCUMENT_ROOT'] . '/html_intl_' . str_replace('+',' ',urldecode($_GET['sra'])) . '.html', $cont);
if ($wopenit) {
echo "<html><body onload=\" parent.parhelp(); \"></body></html>";
}
exit;
} else if (isset($_POST['sra']) && isset($_POST['it'])) {
//if (file_exists($_SERVER['DOCUMENT_ROOT'] . '/html_intl_' . str_replace('+',' ',urldecode($_POST['sra'])) . '.html')) {
// exec('rm -f ' . $_SERVER['DOCUMENT_ROOT'] . '/html_intl_' . str_replace('+',' ',urldecode($_POST['sra'])) . '.html');
//}
$wopenit=false;
if (!file_exists($_SERVER['DOCUMENT_ROOT'] . '/html_intl_' . str_replace('+',' ',urldecode($_POST['sra'])) . '.html')) {
$wopenit=true;
}
$cont=str_replace('+',' ',urldecode($_POST['it']));
$cont=str_replace('*', 'Optionally select ', $cont);
$cont=str_replace('@', 'Show Current Time', $cont);
$cont=str_replace('$', 'RJM Programming - December, 2024', $cont);
$cont=str_replace('!', 'As per (white background textboxes optional) ...', $cont);
$cont=str_replace('</body>', '<style> th { background-color:yellow; } </style></body>', $cont);
file_put_contents($_SERVER['DOCUMENT_ROOT'] . '/html_intl_' . str_replace('+',' ',urldecode($_POST['sra'])) . '.html', $cont);
if ($wopenit) {
echo "<html><body onload=\" parent.parhelp(); \"></body></html>";
}
exit;
}

$gone="\n setTimeout(function(){ if ((document.getElementById('locale').value + document.getElementById('locale').placeholder).split('_')[0].split('-')[0] != 'en') { gtwoo=window.open('https://www-rjmprogramming-com-au.translate.goog/html_intl_" . server_remote_addr() . ".html?_x_tr_sch=https&_x_tr_sl=en&_x_tr_tl=' + (document.getElementById('locale').value + document.getElementById('locale').placeholder).split('_')[0].split('-')[0] + '&_x_tr_hl=en','_blank','top=200,left=' + eval(-500 + eval('' + screen.width)) + ',width=500,height=500'); } }, 7000); \n";

// https://www-rjmprogramming-com-au.translate.goog/PHP/GeoChart/image_chart.php?_x_tr_sch=https&_x_tr_sl=en&_x_tr_tl=it&_x_tr_hl=en
if (isset($_GET['translate']) && isset($_GET['locale'])) {
if (strlen($_GET['locale']) > 0) {
$delthis=$_SERVER['DOCUMENT_ROOT'] . "/html_intl_" . server_remote_addr() . ".html";
if (explode('-',explode('_',urldecode($_GET['locale']))[0])[0] != 'en') {
$gtwo="\n setTimeout(function(){ gtwoo=window.open('https://www-rjmprogramming-com-au.translate.goog/html_intl_" . server_remote_addr() . ".html?_x_tr_sch=https&_x_tr_sl=en&_x_tr_tl=" . explode('-',explode('_',urldecode($_GET['locale']))[0])[0] . "&_x_tr_hl=en','_blank','top=200,left=' + eval(-500 + eval('' + screen.width)) + ',width=500,height=500'); }, 7000); \n";
}
}
} else if (isset($_POST['translate']) && isset($_POST['locale'])) {
if (strlen($_POST['locale']) > 0) {
$delthis=$_SERVER['DOCUMENT_ROOT'] . "/html_intl_" . server_remote_addr() . ".html";
if (explode('-',explode('_',urldecode($_POST['locale']))[0])[0] != 'en') {
$gtwo="\n setTimeout(function(){ gtwoo=window.open('https://www-rjmprogramming-com-au.translate.goog/html_intl_" . server_remote_addr() . ".html?_x_tr_sch=https&_x_tr_sl=en&_x_tr_tl=" . explode('-',explode('_',urldecode($_POST['locale']))[0])[0] . "&_x_tr_hl=en','_blank','top=200,left=' + eval(-500 + eval('' + screen.width)) + ',width=500,height=500'); }, 7000); \n";
}
}
}

?>

… to make this a possibility in a changed “fourth draft” PHP code offering here, as a PHP web application, you can also try below.


Previous relevant PHP Intl Class Datetime Clock Tutorial is shown below.

PHP Intl Class Datetime Clock Tutorial

PHP Intl Class Datetime Clock Tutorial

Yesterday’s PHP Intl Class Datetime Defaults Tutorial‘s PHP web application involves …

  • timezones … and, for us, whenever that happens, our eyes light up with “possibility” because …
  • “where” meets “when” … when you have timezones involved … and to our mind …
  • “where” and “when” are the best catered for “adverbs” in the I.T. wooooorrrrlllldddd

Invariably, too, the data is “full of possibility” regarding simple ideas of “internationalization” that are easy to deploy, such as …

  • emoji flags
  • Wikipedia lookups in the form of tabulated lists

And so, though our last web application is not totally disengageable from our English bias, we can help its “Internationalization Credentials” today, via …

  • emoji flag code …
    PHP
    <?php

    function orflag($incc) {
    $uretv='';
    $lri=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P", "Q","R","S","T","U","V","W","X","Y","Z"];
    $dri=["127462","127463","127464","127465","127466","127467","127468", "127469","127470","127471","127472","127473","127474","127475", "127476","127477","127478","127479","127480","127481", "127482","127483","127484","127485","127486","127487"];
    for ($jjm=0; $jjm<strlen($incc); $jjm++) {
    for ($jm=0; $jm<sizeof($lri); $jm++) {
    if (strtoupper(substr(substr($incc,$jjm),0,1)) == $lri[$jm]) {
    $uretv.='&#' . $dri[$jm] . ";";
    }
    }
    }
    return $uretv;
    }

    ?>
    Javascript
    <?php echo ”

    function jorflag(thiscc) {
    var lri='ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var dri=['127462','127463','127464','127465','127466','127467','127468', '127469','127470','127471','127472','127473','127474', '127475','127476','127477','127478','127479','127480', '127481','127482','127483','127484','127485','127486','127487'];
    var ccsuff='', ccchar=' ', cde='';
    for (var iccsuff=0; iccsuff<thiscc.length; iccsuff++) {
    ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase();
    ccsuff+=String.fromCodePoint(dri[eval('' + lri.indexOf(ccchar))]); //'&#' + dri[eval('' + lri.indexOf(ccchar))] + ';';
    cde='.';
    }
    return ccsuff;
    }

    “; ?>
  • new clock functionality (using an Internationalization emoji usage regarding an SVG based button background image) and known timezone reasons to tabulate …
    <?php

    $tabp='';
    $tabs='';
    if (isset($_GET['timezone'])) {
    $tabp='<table style=width:100%;><tr><td style=vertical-align:top;>';
    $tabs='</td><td style=vertical-align:top;width:50%;><iframe src="/HTMLCSS/colour_wheel.html?mode=' . $_GET['timezone'] . '" style=width:100%;height:800px;></iframe></td></tr></table>';
    } else if (isset($_POST['timezone'])) {
    $tabp='<table style=width:100%;><tr><td style=vertical-align:top;>';
    $tabs='</td><td style=vertical-align:top;width:50%;><iframe src="/HTMLCSS/colour_wheel.html?mode=' . $_POST['timezone'] . '" style=width:100%;height:800px;></iframe></td></tr></table>';
    }
    $revealp='';
    $reveals='';
    $clockcss='';
    $clocksvg="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;'><text y='50%'>\\0023f0</text></svg>";

    if (isset($_GET['clock']) || isset($_POST['clock'])) {
    $revealp='<details title="Form you can use to display different time or different clock"><summary title="Form you can use to display different time or different clock"></summary>' . $tabp;
    $reveals=$tabs . '</details>';
    $clockcss="\n #pdfmt { border-radius: 50px; } \n";
    } else {
    $revealp=$tabp;
    $reveals=$tabs;
    }

    ?>
  • document.body onload emoji flag application (via Javascript) …
    <?php echo ”

    function onlit() {
    txils=parent.document.getElementById('tzsel').innerHTML.split(' value=\"' + thistz + '\"');
    if (eval('' + txils.length) > 1) {
    isov=txils[1].split('>')[0].split(',')[3];
    cnb='';
    if (ctynames.indexOf(\" value='\" + isov + \"'>\") != -1) {
    cnb=' in ' + ctynames.split(\" value='\" + isov + \"'>\")[1].split('<')[0];
    document.getElementById('tzsel').title='Default is a Timezone in ' + ctynames.split(\" value='\" + isov + \"'>\")[1].split('<')[0];
    document.getElementById('myh1').innerHTML+=' for ' + (thistz + '/').replace(thistz.split('/')[0] + '/', '').split('/')[1].replace(/\_/g,' ') + ' ' + (thistz + '/').replace(thistz.split('/')[0] + '/', '').split('/')[0].replace(/\_/g,' ').trim().replace('Argentina','');
    document.getElementById('myh1').innerHTML+=cnb + ' ' + jorflag(isov);
    }
    }
    }

    “; ?>
  • clock button styling …
    <?php

    $clockcss='';
    $clocksvg="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;'><text y='50%'>\\0023f0</svg>";

    ?>
    <?php echo ”

    <style>
    " . $clockcss . "
    input[type=\"text\"] { width: 250px; }
    #clock { border-radius: 50px; color:pink; text-shadow:-1px 1px 1px yellow; background-image: url('" . str_replace("'",'"',$clocksvg) . "'); }
    </style>

    “; ?>

  • clock recursive style functionality via an iframe onload event paradigm (with function clockif below) …
    <?php echo ”

    var documentURL=document.URL;
    var repcnt=0, cnb='', isov='', txils=[];
    var thistz=(location.search.split('timezone=')[1] ? (decodeURIComponent(location.search.split('timezone=')[1].split('&')[0]) + '') : '');

    function clockif(iois) {
    if (iois.src.indexOf('About_Us.') == -1) {
    repcnt++;
    setTimeout(function(){ iois.src=iois.src.split('&rand=')[0] + '&rand=' + repcnt; }, 1000);
    var aconto = (iois.contentWindow || iois.contentDocument);
    if (aconto != null) {
    if (aconto.document) { aconto = aconto.document; }
    if (aconto.body != null) {
    if (aconto.getElementById('pdfmt') && parent.document.getElementById('pdfmt')) {
    parent.document.getElementById('pdfmt').innerHTML=aconto.getElementById('pdfmt').innerHTML;
    if (repcnt == 1) {
    parent.document.getElementById('pdfmt').style.border='5px dotted pink';
    parent.document.getElementById('pdfmt').style.padding='5 5 5 5';
    if (eval('' + txils.length) > 1) {
    parent.document.getElementById('pdfmt').title='Timestamp for ' + documentURL.split('?')[1].split('&cl')[0].replace(/\&/g,' ').replace(/\=/g,' ').replace(/\%2F/g,'/').replace(/\%2f/g,'/') + txils[1].split('>')[0] + cnb;
    } else {
    parent.document.getElementById('pdfmt').title='Timestamp for ' + documentURL.split('?')[1].split('&cl')[0].replace(/\&/g,' ').replace(/\=/g,' ').replace(/\%2F/g,'/').replace(/\%2f/g,'/');
    }
    }
    }
    }
    }
    }
    }

    “; ?>
    … called into play via document.body onload Javascript …
    <?php echo ”

    <body onload="onlit(); if (documentURL.indexOf('clock=') != -1) { setTimeout(function(){ document.getElementById('justincase').src=documentURL=documentURL.replace('clock=','cloNOWAYck=') + '&rand=' + repcnt; }, 1000); } ">

    “; ?>
    … along with a new form submit button choice …
    <?php echo ”

    <input style=background-color:#f0f0f0; title=Clock type=submit id=clock name=clock value=Clock></input>

    “; ?>
  • dropdown option (subelement) emoji flag title …
    Locale
    <?php

    $locsel='';
    $arrl=ResourceBundle::getLocales('');
    for ($df=0; $df<sizeof($arrl); $df++) {
    $endih='';
    $lastword=explode('_',$arrl[$df])[-1 + sizeof(explode('_',$arrl[$df]))];
    $ends=explode("['" . explode('-',explode('_',$arrl[$df])[0])[0] . '-', $lochelper);
    if (sizeof($ends) > 1) {
    $endih.=' ' . explode("'", explode("['", $ends[0])[-1 + sizeof(explode("['", $ends[0]))])[0];
    }
    if (strpos($lochelpertwo, '>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>') !== false) {
    //echo "yes " . explode('-',explode('_',$arrl[$df])[0])[0] . "\n<br>";
    //echo substr(explode('>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>', $lochelpertwo)[0], -250,250);
    $interim=explode('</a>', explode('<tr', explode('>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>', $lochelpertwo)[0])[-1 + sizeof(explode('<tr', explode('>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>', $lochelpertwo)[0]))])[0]; //)[-1 + sizeof(explode('>', explode('</td>', explode('<tr', explode('>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>', $lochelpertwo)[0];
    //exit;
    $aintm=explode('>', $interim)[-1 + sizeof(explode('>', $interim))];
    if (strpos($endih, ' ' . $aintm) === false) {
    if ($endih != '') {
    $endih.=' (' . $aintm . ')';
    } else {
    $endih.=' ' . $aintm;
    }
    }
    }
    if ($lastword == strtoupper($lastword) && strlen($lastword) == 2) {
    $endih.=' ' . orflag($lastword);
    }
    if ($endih != '') {
    $endih="\t" . $endih . '';
    }

    if (strpos(($arrl[$df] . '_'), '_') !== false) { //} && strpos($arrl[$df], '0') === false) {
    if ($locsel == '') {
    $locsel="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('locale').value=tzdef(this.value); }\" id=locsel><option id=\"loptone\" value=''>Optionally select a Locale below ...</option></select>";
    }
    $locsel=str_replace("</select>", "<option value='" . $arrl[$df] . "' translate=\"no\" title=\"" . $endih . "\">" . $arrl[$df] . "</option></select>", $locsel);
    }
    }

    ?>
    TimeZone
    <?php

    $yourtzlist="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('timezone').value=this.value; }\" id=tzsel><option id=\"toptone\" value=''>Optionally select a TimeZone below ...</option><option value='Africa/Abidjan' data-geo='5.31666,-4.03334,GMT,CI,+0'>Africa/Abidjan</option><option value='Africa/Accra' data-geo='5.55,-0.21667,GMT,GH,+0'>Africa/Accra</option><option value='Africa/Addis_Ababa' data-geo='9.03333,38.7,EAT,ET,+3'>Africa/Addis_Ababa</option><option value='Africa/Algiers' data-geo='36.78333,3.05,CET,DZ,+1'>Africa/Algiers</option> ... blah ... blah ... blah ... </select>";

    $yls=explode(" data-geo='", $yourtzlist);
    for ($iy=(-1 + sizeof($yls)); $iy>=1; $iy--) {
    if (sizeof(explode(',', $yls[$iy])) > 3) {
    $icp=explode(',', $yls[$iy])[3];
    //echo $icp;
    if ($icp == strtoupper($icp) && strlen($icp) == 2 && strpos($icp, '?') === false) {
    //echo $icp . ' data-geo="' . $yls[$iy] . ' becomes ' . ' title="' . orflag($icp) . '" data-geo="' . $yls[$iy];
    //exit;
    $yourtzlist=str_replace(" data-geo='" . $yls[$iy], ' title=' . "'" . orflag($icp) . "'" . " data-geo='" . $yls[$iy], $yourtzlist);
    }
    }
    }


    ?>

… in a changed “third draft” PHP code offering here, as a PHP web application, you can also try below.


Previous relevant PHP Intl Class Datetime Defaults Tutorial is shown below.

PHP Intl Class Datetime Defaults Tutorial

PHP Intl Class Datetime Defaults Tutorial

Onto the recent PHP Intl Class Datetime Tutorial start to a PHP Current Datetime Intl Using Internationalization web application we see a way forward improving …

  • default Locale and TimeZone presented …
    Locale
    <?php

    $defloc=Locale::acceptFromHttp($_SERVER['HTTP_ACCEPT_LANGUAGE']);

    ?>
    Timezone
    <?php

    $deficc=explode('_', str_replace('_posix','',$defloc))[-1 + sizeof(explode('_', str_replace('_posix','',$defloc)))];
    $yourtzlist="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('timezone').value=this.value; }\" id=tzsel><option id=\"toptone\" value=''>Optionally select a TimeZone below ...</option><option value='Africa/Abidjan' data-geo='5.31666,-4.03334,GMT,CI,+0'>Africa/Abidjan</option><option value='Africa/Accra' data-geo='5.55,-0.21667,GMT,GH,+0'>Africa/Accra</option><option value='Africa/Addis_Ababa' data-geo='9.03333,38.7,EAT,ET,+3'>Africa/Addis_Ababa</option><option value='Africa/Algiers' data-geo='36.78333,3.05,CET,DZ,+1'>Africa/Algiers</option> ... blah ... blah ... blah ... </select>";

    if (strpos($yourtzlist, ',' . $deficc . ',') !== false) {
    $ourtz=explode('<', explode('>', explode(',' . $deficc . ',', $yourtzlist)[1])[1])[0];
    } else {
    $ourtz="''"; //date.timezone; // ($_SERVER['TZ'] ?? (file_get_contents('/etc/timezone') ?: file_get_contents('/etc/localtime')))
    }

    ?>
  • add accompanying dropdown ways to select values from a list of what is available on Locale and TimeZone (as above) and Calendar …
    <?php

    $calsel='';
    if (1 == 1) {
    $bundle=new ResourceBundle('','ICUDATA');
    $cnames=[];
    $calendars=$bundle->get('calendar');
    foreach ($calendars as $n=>$v) {
    if ($calsel == '') {
    $calsel="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('calendar').value=this.value; }\" id=calsel><option value=''>Optionally select a Calendar system below ...</option></select>";
    }
    $calsel=str_replace("</select>", "<option value='" . $n . "'>" . $n . "</option></select>", $calsel);
    $cnames[]=$n;
    }
    }

    $locsel='';
    $arrl=ResourceBundle::getLocales('');
    for ($df=0; $df<sizeof($arrl); $df++) {
    if (strpos(($arrl[$df] . '_'), '_') !== false) { //} && strpos($arrl[$df], '0') === false) {
    if ($locsel == '') {
    $locsel="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('locale').value=tzdef(this.value); }\" id=locsel><option id=\"loptone\" value=''>Optionally select a Locale below ...</option></select>";
    }
    $locsel=str_replace("</select>", "<option value='" . $arrl[$df] . "'>" . $arrl[$df] . "</option></select>", $locsel);
    }
    }

    ?>
  • change input type=text placeholder reflect any previously selected Locale and TimeZone and/or Calendar …
    <?php echo ”

    echo "<h1>Show Current Time</h1><br><h3>RJM Programming - December, 2024</h3><br><h4>As per (white background textboxes optional) ...</h4><br><br><form method=GET onsubmit=\"if (document.getElementById('calendar').value.trim() != '') { document.getElementById('calendar').name='calendar'; } if (document.getElementById('locale').value.trim() == '' || document.getElementById('timezone').value.trim() == '') { return false; } return true;\" action=\"./i_eg.php\">
    <br><input type=text ondblclick=this.value=this.placeholder; style=background-color:yellow; id=locale name=locale placeholder=" . (isset($_GET['locale']) ? urldecode($_GET['locale']) : (isset($_POST['locale']) ? urldecode($_POST['locale']) : $defloc)) . " value='' title=Locale></input> " . $locsel . "
    <br><input type=text ondblclick=this.value=this.placeholder; style=background-color:yellow; id=timezone name=timezone placeholder=" . (isset($_GET['timezone']) ? urldecode($_GET['timezone']) : (isset($_POST['timezone']) ? urldecode($_POST['timezone']) : $ourtz)) . " value='' title=TimeZone></input> " . $yourtzlist . "
    <br><input type=text ondblclick=this.value=this.placeholder; style=background-color:white; id=calendar placeholder=" . (isset($_GET['calendar']) ? urldecode($_GET['calendar']) : (isset($_POST['calendar']) ? urldecode($_POST['calendar']) : "gregorian")) . " value='' title=Calendar></input> " . $calsel . "
    <br><br><input style=background-color:lightgreen; type=submit value=Display></input>
    </form>
    ";

    “; ?>

… and regarding Locale selections take the opportunity to gather up to the top of Locale and TimeZone dropdowns any options relevant to any Locale first selected …

<?php echo ”

<scri" . "pt type=text/javascript>
var ctynames=\"" . str_replace("\n","",$ctynames) . "\";
var canmakenothing=false, firstloc='';

function tzdef(inloc) { // wrapper around Locale dropdown selected value
var inicc=inloc.replace(/\-/g,'_').split('_')[eval(-1 + inloc.replace(/\-/g,'_').split('_').length)];
var jnicc=inicc;
var newtstuff='', newlstuff='', newts=0, newls=0, tvalis='';
if (ctynames.indexOf(\" value='\" + inicc + \"'>\") != -1) {
jnicc=ctynames.split(\" value='\" + inicc + \"'>\")[1].split('<')[0];
}
if (document.getElementById('timezone').value == '' && inicc.trim() != '' && inicc == inicc.toUpperCase() && eval('' + inicc.length) == 2) {
var tzoh=document.getElementById('tzsel').innerHTML;
var aftertopt=document.getElementById('toptone').outerHTML;
var tzloh=document.getElementById('locsel').innerHTML;
var afterlopt=document.getElementById('loptone').outerHTML;
var tzs=tzoh.split(',' + inicc + ',');
if (eval('' + tzs.length) > 1) {
//document.getElementById('timezone').value=tzs[1].split('>')[1].split('<')[0];
tvalis=tzs[1].split('>')[1].split('<')[0];
newtstuff+='<option value=\"' + tvalis + '\">' + tvalis + '</option>';
for (newts=1; newts<eval('' + tzs.length); newts++) {
if (tzs[newts].split('>')[1].split('<')[0] != tvalis) {
newtstuff+='<option value=\"' + tzs[newts].split('>')[1].split('<')[0] + '\">' + tzs[newts].split('>')[1].split('<')[0] + '</option>';
}
}
tzs=tzloh.split('_' + inicc + '\"');
if (eval('' + tzs.length) > 1) {
newlstuff+='<option value=\"' + inloc + '\">' + inloc + '</option>';
for (newls=1; newls<eval('' + tzs.length); newls++) {
if (tzs[newls].split('>')[1].split('<')[0] != inloc) {
newlstuff+='<option value=\"' + tzs[newls].split('>')[1].split('<')[0] + '\">' + tzs[newls].split('>')[1].split('<')[0] + '</option>';
}
}
}
}
if (tzoh.indexOf(aftertopt) != -1 && newtstuff != '') {
document.getElementById('tzsel').innerHTML=aftertopt.replace(' id=', ' data-id=').replace(' value=\"', ' value=\" ').replace(' a Time', ' ' + jnicc + ' Time') + newtstuff + aftertopt + tzoh.split(aftertopt)[1];
}
if (tzloh.indexOf(afterlopt) != -1 && newlstuff != '') {
document.getElementById('locsel').innerHTML=afterlopt.replace(' id=', ' data-id=').replace(' value=\"', ' value=\" ').replace(' a Locale', ' ' + jnicc + ' Locale') + newlstuff + afterlopt + tzloh.split(afterlopt)[1];
}
if (tvalis != '') { document.getElementById('timezone').value=tvalis; }
document.getElementById('locsel').value=inloc;
firstloc=inicc;
canmakenothing=true;
}
if (document.getElementById('tzsel').value == ' ' && canmakenothing) {
if (inicc != firstloc) {
document.getElementById('tzsel').value='';
}
}
return inloc.replace(/\-/g,'_');
}
</scr" . "ipt>

“; ?>

… containing an ISO-3166 2 letter Country Code at it’s end, mentioning that country’s name in that first option of the TimeZone dropdown, so that some users will see a Country Name in the mix, adding to relatability, perhaps.

We feel this considerably improves the User Experience using a changed “second draft” PHP code offering here, as a PHP web application, you can also try below.


Previous relevant PHP Intl Class Datetime Tutorial is shown below.

PHP Intl Class Datetime Tutorial

PHP Intl Class Datetime Tutorial

We’re back revisiting the PHP intl “Internationalization” class mentioned in “the AlmaLinux install feeling” PHP Mbstring Multibyte String and Intl Class Tutorial

Reading a bit, we cottoned onto three data items being central to Datetime PHP intl usage being …

  1. locale
  2. timezone
  3. calendar … optional

… and, so, we’re starting our “learning curve” (we got great help from this excellent website developing …

<?php

if (isset($_GET['locale']) && isset($_GET['timezone']) && isset($_GET['calendar'])) {
$DateTime = new DateTime();
$IntlDateFormatter = new IntlDateFormatter(
urldecode($_GET['locale']) . '@calendar=' . urldecode($_GET['calendar']),
IntlDateFormatter::FULL,
IntlDateFormatter::FULL,
urldecode($_GET['timezone']),
IntlDateFormatter::TRADITIONAL);

echo '<p>' . $IntlDateFormatter->format($DateTime) . '</p><br><br>';
}

?>

…) in today’s “first draft” “proof of concept” offering here, as a PHP web application, you can also try below …


Previous relevant PHP Mbstring Multibyte String and Intl Class Tutorial is shown below.

PHP Mbstring Multibyte String and Intl Class Tutorial

PHP Mbstring Multibyte String and Intl Class Tutorial

We’re revisiting the PHP Mbstring Multibyte String Primer Tutorial of the past to see where we stand now with PHP 8 and …

  • mbstring “Multibyte String” extension … and …
  • intl “Internationalization Functions” extension

… and discovered that we can happily now have a chance incorporating these functionalities into PHP serverside logic into the future. We tested this with a tweaked mbstring_test.php “old way” live run and “new way” live run via the writing of a couple of “proof of concepts” …


Previous relevant PHP Mbstring Multibyte String Primer Tutorial is shown below.

PHP Mbstring Multibyte String Primer Tutorial

PHP Mbstring Multibyte String Primer Tutorial

Our (Mac OS X laptop) local MAMP web server is an Apache/PHP/MySql web server. In this environment you can find out a lot with some PHP code as per …

<?php phpinfo(); ?>

… and if, in doing this, you find a reference to the “mbstring” Multibyte String Information functionality existing, you are a lucky candidate to introduce some internationalization code into your PHP code, for those occasions where the destination language uses a UTF-8 character set where individual characters can not be described by the ascii character set from decimal 0 to decimal 255. In other words, it takes more than one byte to describe each character of the language. There are many languages like this, a few being the Chinese languages, Japanese and Korean.

We followed a lot of the advice of the very useful link (thanks) to create some PHP called …

… where we show what we always suspected but were too shy to ask, and didn’t flesh it out before … doh! … you can’t split a Chinese phrase’s characters into their individual characters and expect those characters individually translated bring you back to the sense of the Chinese phrase to start with.

So we take the Chinese phrase 火车票 (which translates into English as “Train tickets” … and we thank Google Translate for help with all this) and use PHP mbstring’s mb_str_split to properly split the Chinese into its constituent multibyte (UTF-8) characters (and along the way, show that PHP str_split messes up this same task, as you’d probably guess would happen), and then translate all these into English using Google Translate, as an intellectual exercise.

If this exercise makes you …

  • a) fall on the floor laughing
  • b) hit a gong with a huge hammer
  • c) cook up some deep fried dumplings
  • d) put the left chopstick in the right ear and the right chopstick in the left ear (please ask for adult supervision) … translation: do not do this
  • e) while reading you sweep the cat under the rug (no animals were harmed in the making of this blog posting)

… then we’re here to tell you that you need to take a Bex and have a lie down.

We are just showing in PHP that if the mbstring functionality is available to you, that the mbstring library of functionality can help with some Internationalization issues you may be grappling with and that this PHP code you could try via this live run link.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

PHP Intl Class Datetime Clock Tutorial

PHP Intl Class Datetime Clock Tutorial

PHP Intl Class Datetime Clock Tutorial

Yesterday’s PHP Intl Class Datetime Defaults Tutorial‘s PHP web application involves …

  • timezones … and, for us, whenever that happens, our eyes light up with “possibility” because …
  • “where” meets “when” … when you have timezones involved … and to our mind …
  • “where” and “when” are the best catered for “adverbs” in the I.T. wooooorrrrlllldddd

Invariably, too, the data is “full of possibility” regarding simple ideas of “internationalization” that are easy to deploy, such as …

  • emoji flags
  • Wikipedia lookups in the form of tabulated lists

And so, though our last web application is not totally disengageable from our English bias, we can help its “Internationalization Credentials” today, via …

  • emoji flag code …
    PHP
    <?php

    function orflag($incc) {
    $uretv='';
    $lri=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P", "Q","R","S","T","U","V","W","X","Y","Z"];
    $dri=["127462","127463","127464","127465","127466","127467","127468", "127469","127470","127471","127472","127473","127474","127475", "127476","127477","127478","127479","127480","127481", "127482","127483","127484","127485","127486","127487"];
    for ($jjm=0; $jjm<strlen($incc); $jjm++) {
    for ($jm=0; $jm<sizeof($lri); $jm++) {
    if (strtoupper(substr(substr($incc,$jjm),0,1)) == $lri[$jm]) {
    $uretv.='&#' . $dri[$jm] . ";";
    }
    }
    }
    return $uretv;
    }

    ?>
    Javascript
    <?php echo ”

    function jorflag(thiscc) {
    var lri='ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var dri=['127462','127463','127464','127465','127466','127467','127468', '127469','127470','127471','127472','127473','127474', '127475','127476','127477','127478','127479','127480', '127481','127482','127483','127484','127485','127486','127487'];
    var ccsuff='', ccchar=' ', cde='';
    for (var iccsuff=0; iccsuff<thiscc.length; iccsuff++) {
    ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase();
    ccsuff+=String.fromCodePoint(dri[eval('' + lri.indexOf(ccchar))]); //'&#' + dri[eval('' + lri.indexOf(ccchar))] + ';';
    cde='.';
    }
    return ccsuff;
    }

    “; ?>
  • new clock functionality (using an Internationalization emoji usage regarding an SVG based button background image) and known timezone reasons to tabulate …
    <?php

    $tabp='';
    $tabs='';
    if (isset($_GET['timezone'])) {
    $tabp='<table style=width:100%;><tr><td style=vertical-align:top;>';
    $tabs='</td><td style=vertical-align:top;width:50%;><iframe src="/HTMLCSS/colour_wheel.html?mode=' . $_GET['timezone'] . '" style=width:100%;height:800px;></iframe></td></tr></table>';
    } else if (isset($_POST['timezone'])) {
    $tabp='<table style=width:100%;><tr><td style=vertical-align:top;>';
    $tabs='</td><td style=vertical-align:top;width:50%;><iframe src="/HTMLCSS/colour_wheel.html?mode=' . $_POST['timezone'] . '" style=width:100%;height:800px;></iframe></td></tr></table>';
    }
    $revealp='';
    $reveals='';
    $clockcss='';
    $clocksvg="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;'><text y='50%'>\\0023f0</text></svg>";

    if (isset($_GET['clock']) || isset($_POST['clock'])) {
    $revealp='<details title="Form you can use to display different time or different clock"><summary title="Form you can use to display different time or different clock"></summary>' . $tabp;
    $reveals=$tabs . '</details>';
    $clockcss="\n #pdfmt { border-radius: 50px; } \n";
    } else {
    $revealp=$tabp;
    $reveals=$tabs;
    }

    ?>
  • document.body onload emoji flag application (via Javascript) …
    <?php echo ”

    function onlit() {
    txils=parent.document.getElementById('tzsel').innerHTML.split(' value=\"' + thistz + '\"');
    if (eval('' + txils.length) > 1) {
    isov=txils[1].split('>')[0].split(',')[3];
    cnb='';
    if (ctynames.indexOf(\" value='\" + isov + \"'>\") != -1) {
    cnb=' in ' + ctynames.split(\" value='\" + isov + \"'>\")[1].split('<')[0];
    document.getElementById('tzsel').title='Default is a Timezone in ' + ctynames.split(\" value='\" + isov + \"'>\")[1].split('<')[0];
    document.getElementById('myh1').innerHTML+=' for ' + (thistz + '/').replace(thistz.split('/')[0] + '/', '').split('/')[1].replace(/\_/g,' ') + ' ' + (thistz + '/').replace(thistz.split('/')[0] + '/', '').split('/')[0].replace(/\_/g,' ').trim().replace('Argentina','');
    document.getElementById('myh1').innerHTML+=cnb + ' ' + jorflag(isov);
    }
    }
    }

    “; ?>
  • clock button styling …
    <?php

    $clockcss='';
    $clocksvg="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;'><text y='50%'>\\0023f0</svg>";

    ?>
    <?php echo ”

    <style>
    " . $clockcss . "
    input[type=\"text\"] { width: 250px; }
    #clock { border-radius: 50px; color:pink; text-shadow:-1px 1px 1px yellow; background-image: url('" . str_replace("'",'"',$clocksvg) . "'); }
    </style>

    “; ?>

  • clock recursive style functionality via an iframe onload event paradigm (with function clockif below) …
    <?php echo ”

    var documentURL=document.URL;
    var repcnt=0, cnb='', isov='', txils=[];
    var thistz=(location.search.split('timezone=')[1] ? (decodeURIComponent(location.search.split('timezone=')[1].split('&')[0]) + '') : '');

    function clockif(iois) {
    if (iois.src.indexOf('About_Us.') == -1) {
    repcnt++;
    setTimeout(function(){ iois.src=iois.src.split('&rand=')[0] + '&rand=' + repcnt; }, 1000);
    var aconto = (iois.contentWindow || iois.contentDocument);
    if (aconto != null) {
    if (aconto.document) { aconto = aconto.document; }
    if (aconto.body != null) {
    if (aconto.getElementById('pdfmt') && parent.document.getElementById('pdfmt')) {
    parent.document.getElementById('pdfmt').innerHTML=aconto.getElementById('pdfmt').innerHTML;
    if (repcnt == 1) {
    parent.document.getElementById('pdfmt').style.border='5px dotted pink';
    parent.document.getElementById('pdfmt').style.padding='5 5 5 5';
    if (eval('' + txils.length) > 1) {
    parent.document.getElementById('pdfmt').title='Timestamp for ' + documentURL.split('?')[1].split('&cl')[0].replace(/\&/g,' ').replace(/\=/g,' ').replace(/\%2F/g,'/').replace(/\%2f/g,'/') + txils[1].split('>')[0] + cnb;
    } else {
    parent.document.getElementById('pdfmt').title='Timestamp for ' + documentURL.split('?')[1].split('&cl')[0].replace(/\&/g,' ').replace(/\=/g,' ').replace(/\%2F/g,'/').replace(/\%2f/g,'/');
    }
    }
    }
    }
    }
    }
    }

    “; ?>
    … called into play via document.body onload Javascript …
    <?php echo ”

    <body onload="onlit(); if (documentURL.indexOf('clock=') != -1) { setTimeout(function(){ document.getElementById('justincase').src=documentURL=documentURL.replace('clock=','cloNOWAYck=') + '&rand=' + repcnt; }, 1000); } ">

    “; ?>
    … along with a new form submit button choice …
    <?php echo ”

    <input style=background-color:#f0f0f0; title=Clock type=submit id=clock name=clock value=Clock></input>

    “; ?>
  • dropdown option (subelement) emoji flag title …
    Locale
    <?php

    $locsel='';
    $arrl=ResourceBundle::getLocales('');
    for ($df=0; $df<sizeof($arrl); $df++) {
    $endih='';
    $lastword=explode('_',$arrl[$df])[-1 + sizeof(explode('_',$arrl[$df]))];
    $ends=explode("['" . explode('-',explode('_',$arrl[$df])[0])[0] . '-', $lochelper);
    if (sizeof($ends) > 1) {
    $endih.=' ' . explode("'", explode("['", $ends[0])[-1 + sizeof(explode("['", $ends[0]))])[0];
    }
    if (strpos($lochelpertwo, '>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>') !== false) {
    //echo "yes " . explode('-',explode('_',$arrl[$df])[0])[0] . "\n<br>";
    //echo substr(explode('>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>', $lochelpertwo)[0], -250,250);
    $interim=explode('</a>', explode('<tr', explode('>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>', $lochelpertwo)[0])[-1 + sizeof(explode('<tr', explode('>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>', $lochelpertwo)[0]))])[0]; //)[-1 + sizeof(explode('>', explode('</td>', explode('<tr', explode('>' . explode('-',explode('_',$arrl[$df])[0])[0] . '</a>', $lochelpertwo)[0];
    //exit;
    $aintm=explode('>', $interim)[-1 + sizeof(explode('>', $interim))];
    if (strpos($endih, ' ' . $aintm) === false) {
    if ($endih != '') {
    $endih.=' (' . $aintm . ')';
    } else {
    $endih.=' ' . $aintm;
    }
    }
    }
    if ($lastword == strtoupper($lastword) && strlen($lastword) == 2) {
    $endih.=' ' . orflag($lastword);
    }
    if ($endih != '') {
    $endih="\t" . $endih . '';
    }

    if (strpos(($arrl[$df] . '_'), '_') !== false) { //} && strpos($arrl[$df], '0') === false) {
    if ($locsel == '') {
    $locsel="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('locale').value=tzdef(this.value); }\" id=locsel><option id=\"loptone\" value=''>Optionally select a Locale below ...</option></select>";
    }
    $locsel=str_replace("</select>", "<option value='" . $arrl[$df] . "' translate=\"no\" title=\"" . $endih . "\">" . $arrl[$df] . "</option></select>", $locsel);
    }
    }

    ?>
    TimeZone
    <?php

    $yourtzlist="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('timezone').value=this.value; }\" id=tzsel><option id=\"toptone\" value=''>Optionally select a TimeZone below ...</option><option value='Africa/Abidjan' data-geo='5.31666,-4.03334,GMT,CI,+0'>Africa/Abidjan</option><option value='Africa/Accra' data-geo='5.55,-0.21667,GMT,GH,+0'>Africa/Accra</option><option value='Africa/Addis_Ababa' data-geo='9.03333,38.7,EAT,ET,+3'>Africa/Addis_Ababa</option><option value='Africa/Algiers' data-geo='36.78333,3.05,CET,DZ,+1'>Africa/Algiers</option> ... blah ... blah ... blah ... </select>";

    $yls=explode(" data-geo='", $yourtzlist);
    for ($iy=(-1 + sizeof($yls)); $iy>=1; $iy--) {
    if (sizeof(explode(',', $yls[$iy])) > 3) {
    $icp=explode(',', $yls[$iy])[3];
    //echo $icp;
    if ($icp == strtoupper($icp) && strlen($icp) == 2 && strpos($icp, '?') === false) {
    //echo $icp . ' data-geo="' . $yls[$iy] . ' becomes ' . ' title="' . orflag($icp) . '" data-geo="' . $yls[$iy];
    //exit;
    $yourtzlist=str_replace(" data-geo='" . $yls[$iy], ' title=' . "'" . orflag($icp) . "'" . " data-geo='" . $yls[$iy], $yourtzlist);
    }
    }
    }


    ?>

… in a changed “third draft” PHP code offering here, as a PHP web application, you can also try below.


Previous relevant PHP Intl Class Datetime Defaults Tutorial is shown below.

PHP Intl Class Datetime Defaults Tutorial

PHP Intl Class Datetime Defaults Tutorial

Onto the recent PHP Intl Class Datetime Tutorial start to a PHP Current Datetime Intl Using Internationalization web application we see a way forward improving …

  • default Locale and TimeZone presented …
    Locale
    <?php

    $defloc=Locale::acceptFromHttp($_SERVER['HTTP_ACCEPT_LANGUAGE']);

    ?>
    Timezone
    <?php

    $deficc=explode('_', str_replace('_posix','',$defloc))[-1 + sizeof(explode('_', str_replace('_posix','',$defloc)))];
    $yourtzlist="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('timezone').value=this.value; }\" id=tzsel><option id=\"toptone\" value=''>Optionally select a TimeZone below ...</option><option value='Africa/Abidjan' data-geo='5.31666,-4.03334,GMT,CI,+0'>Africa/Abidjan</option><option value='Africa/Accra' data-geo='5.55,-0.21667,GMT,GH,+0'>Africa/Accra</option><option value='Africa/Addis_Ababa' data-geo='9.03333,38.7,EAT,ET,+3'>Africa/Addis_Ababa</option><option value='Africa/Algiers' data-geo='36.78333,3.05,CET,DZ,+1'>Africa/Algiers</option> ... blah ... blah ... blah ... </select>";

    if (strpos($yourtzlist, ',' . $deficc . ',') !== false) {
    $ourtz=explode('<', explode('>', explode(',' . $deficc . ',', $yourtzlist)[1])[1])[0];
    } else {
    $ourtz="''"; //date.timezone; // ($_SERVER['TZ'] ?? (file_get_contents('/etc/timezone') ?: file_get_contents('/etc/localtime')))
    }

    ?>
  • add accompanying dropdown ways to select values from a list of what is available on Locale and TimeZone (as above) and Calendar …
    <?php

    $calsel='';
    if (1 == 1) {
    $bundle=new ResourceBundle('','ICUDATA');
    $cnames=[];
    $calendars=$bundle->get('calendar');
    foreach ($calendars as $n=>$v) {
    if ($calsel == '') {
    $calsel="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('calendar').value=this.value; }\" id=calsel><option value=''>Optionally select a Calendar system below ...</option></select>";
    }
    $calsel=str_replace("</select>", "<option value='" . $n . "'>" . $n . "</option></select>", $calsel);
    $cnames[]=$n;
    }
    }

    $locsel='';
    $arrl=ResourceBundle::getLocales('');
    for ($df=0; $df<sizeof($arrl); $df++) {
    if (strpos(($arrl[$df] . '_'), '_') !== false) { //} && strpos($arrl[$df], '0') === false) {
    if ($locsel == '') {
    $locsel="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('locale').value=tzdef(this.value); }\" id=locsel><option id=\"loptone\" value=''>Optionally select a Locale below ...</option></select>";
    }
    $locsel=str_replace("</select>", "<option value='" . $arrl[$df] . "'>" . $arrl[$df] . "</option></select>", $locsel);
    }
    }

    ?>
  • change input type=text placeholder reflect any previously selected Locale and TimeZone and/or Calendar …
    <?php echo ”

    echo "<h1>Show Current Time</h1><br><h3>RJM Programming - December, 2024</h3><br><h4>As per (white background textboxes optional) ...</h4><br><br><form method=GET onsubmit=\"if (document.getElementById('calendar').value.trim() != '') { document.getElementById('calendar').name='calendar'; } if (document.getElementById('locale').value.trim() == '' || document.getElementById('timezone').value.trim() == '') { return false; } return true;\" action=\"./i_eg.php\">
    <br><input type=text ondblclick=this.value=this.placeholder; style=background-color:yellow; id=locale name=locale placeholder=" . (isset($_GET['locale']) ? urldecode($_GET['locale']) : (isset($_POST['locale']) ? urldecode($_POST['locale']) : $defloc)) . " value='' title=Locale></input> " . $locsel . "
    <br><input type=text ondblclick=this.value=this.placeholder; style=background-color:yellow; id=timezone name=timezone placeholder=" . (isset($_GET['timezone']) ? urldecode($_GET['timezone']) : (isset($_POST['timezone']) ? urldecode($_POST['timezone']) : $ourtz)) . " value='' title=TimeZone></input> " . $yourtzlist . "
    <br><input type=text ondblclick=this.value=this.placeholder; style=background-color:white; id=calendar placeholder=" . (isset($_GET['calendar']) ? urldecode($_GET['calendar']) : (isset($_POST['calendar']) ? urldecode($_POST['calendar']) : "gregorian")) . " value='' title=Calendar></input> " . $calsel . "
    <br><br><input style=background-color:lightgreen; type=submit value=Display></input>
    </form>
    ";

    “; ?>

… and regarding Locale selections take the opportunity to gather up to the top of Locale and TimeZone dropdowns any options relevant to any Locale first selected …

<?php echo ”

<scri" . "pt type=text/javascript>
var ctynames=\"" . str_replace("\n","",$ctynames) . "\";
var canmakenothing=false, firstloc='';

function tzdef(inloc) { // wrapper around Locale dropdown selected value
var inicc=inloc.replace(/\-/g,'_').split('_')[eval(-1 + inloc.replace(/\-/g,'_').split('_').length)];
var jnicc=inicc;
var newtstuff='', newlstuff='', newts=0, newls=0, tvalis='';
if (ctynames.indexOf(\" value='\" + inicc + \"'>\") != -1) {
jnicc=ctynames.split(\" value='\" + inicc + \"'>\")[1].split('<')[0];
}
if (document.getElementById('timezone').value == '' && inicc.trim() != '' && inicc == inicc.toUpperCase() && eval('' + inicc.length) == 2) {
var tzoh=document.getElementById('tzsel').innerHTML;
var aftertopt=document.getElementById('toptone').outerHTML;
var tzloh=document.getElementById('locsel').innerHTML;
var afterlopt=document.getElementById('loptone').outerHTML;
var tzs=tzoh.split(',' + inicc + ',');
if (eval('' + tzs.length) > 1) {
//document.getElementById('timezone').value=tzs[1].split('>')[1].split('<')[0];
tvalis=tzs[1].split('>')[1].split('<')[0];
newtstuff+='<option value=\"' + tvalis + '\">' + tvalis + '</option>';
for (newts=1; newts<eval('' + tzs.length); newts++) {
if (tzs[newts].split('>')[1].split('<')[0] != tvalis) {
newtstuff+='<option value=\"' + tzs[newts].split('>')[1].split('<')[0] + '\">' + tzs[newts].split('>')[1].split('<')[0] + '</option>';
}
}
tzs=tzloh.split('_' + inicc + '\"');
if (eval('' + tzs.length) > 1) {
newlstuff+='<option value=\"' + inloc + '\">' + inloc + '</option>';
for (newls=1; newls<eval('' + tzs.length); newls++) {
if (tzs[newls].split('>')[1].split('<')[0] != inloc) {
newlstuff+='<option value=\"' + tzs[newls].split('>')[1].split('<')[0] + '\">' + tzs[newls].split('>')[1].split('<')[0] + '</option>';
}
}
}
}
if (tzoh.indexOf(aftertopt) != -1 && newtstuff != '') {
document.getElementById('tzsel').innerHTML=aftertopt.replace(' id=', ' data-id=').replace(' value=\"', ' value=\" ').replace(' a Time', ' ' + jnicc + ' Time') + newtstuff + aftertopt + tzoh.split(aftertopt)[1];
}
if (tzloh.indexOf(afterlopt) != -1 && newlstuff != '') {
document.getElementById('locsel').innerHTML=afterlopt.replace(' id=', ' data-id=').replace(' value=\"', ' value=\" ').replace(' a Locale', ' ' + jnicc + ' Locale') + newlstuff + afterlopt + tzloh.split(afterlopt)[1];
}
if (tvalis != '') { document.getElementById('timezone').value=tvalis; }
document.getElementById('locsel').value=inloc;
firstloc=inicc;
canmakenothing=true;
}
if (document.getElementById('tzsel').value == ' ' && canmakenothing) {
if (inicc != firstloc) {
document.getElementById('tzsel').value='';
}
}
return inloc.replace(/\-/g,'_');
}
</scr" . "ipt>

“; ?>

… containing an ISO-3166 2 letter Country Code at it’s end, mentioning that country’s name in that first option of the TimeZone dropdown, so that some users will see a Country Name in the mix, adding to relatability, perhaps.

We feel this considerably improves the User Experience using a changed “second draft” PHP code offering here, as a PHP web application, you can also try below.


Previous relevant PHP Intl Class Datetime Tutorial is shown below.

PHP Intl Class Datetime Tutorial

PHP Intl Class Datetime Tutorial

We’re back revisiting the PHP intl “Internationalization” class mentioned in “the AlmaLinux install feeling” PHP Mbstring Multibyte String and Intl Class Tutorial

Reading a bit, we cottoned onto three data items being central to Datetime PHP intl usage being …

  1. locale
  2. timezone
  3. calendar … optional

… and, so, we’re starting our “learning curve” (we got great help from this excellent website developing …

<?php

if (isset($_GET['locale']) && isset($_GET['timezone']) && isset($_GET['calendar'])) {
$DateTime = new DateTime();
$IntlDateFormatter = new IntlDateFormatter(
urldecode($_GET['locale']) . '@calendar=' . urldecode($_GET['calendar']),
IntlDateFormatter::FULL,
IntlDateFormatter::FULL,
urldecode($_GET['timezone']),
IntlDateFormatter::TRADITIONAL);

echo '<p>' . $IntlDateFormatter->format($DateTime) . '</p><br><br>';
}

?>

…) in today’s “first draft” “proof of concept” offering here, as a PHP web application, you can also try below …


Previous relevant PHP Mbstring Multibyte String and Intl Class Tutorial is shown below.

PHP Mbstring Multibyte String and Intl Class Tutorial

PHP Mbstring Multibyte String and Intl Class Tutorial

We’re revisiting the PHP Mbstring Multibyte String Primer Tutorial of the past to see where we stand now with PHP 8 and …

  • mbstring “Multibyte String” extension … and …
  • intl “Internationalization Functions” extension

… and discovered that we can happily now have a chance incorporating these functionalities into PHP serverside logic into the future. We tested this with a tweaked mbstring_test.php “old way” live run and “new way” live run via the writing of a couple of “proof of concepts” …


Previous relevant PHP Mbstring Multibyte String Primer Tutorial is shown below.

PHP Mbstring Multibyte String Primer Tutorial

PHP Mbstring Multibyte String Primer Tutorial

Our (Mac OS X laptop) local MAMP web server is an Apache/PHP/MySql web server. In this environment you can find out a lot with some PHP code as per …

<?php phpinfo(); ?>

… and if, in doing this, you find a reference to the “mbstring” Multibyte String Information functionality existing, you are a lucky candidate to introduce some internationalization code into your PHP code, for those occasions where the destination language uses a UTF-8 character set where individual characters can not be described by the ascii character set from decimal 0 to decimal 255. In other words, it takes more than one byte to describe each character of the language. There are many languages like this, a few being the Chinese languages, Japanese and Korean.

We followed a lot of the advice of the very useful link (thanks) to create some PHP called …

… where we show what we always suspected but were too shy to ask, and didn’t flesh it out before … doh! … you can’t split a Chinese phrase’s characters into their individual characters and expect those characters individually translated bring you back to the sense of the Chinese phrase to start with.

So we take the Chinese phrase 火车票 (which translates into English as “Train tickets” … and we thank Google Translate for help with all this) and use PHP mbstring’s mb_str_split to properly split the Chinese into its constituent multibyte (UTF-8) characters (and along the way, show that PHP str_split messes up this same task, as you’d probably guess would happen), and then translate all these into English using Google Translate, as an intellectual exercise.

If this exercise makes you …

  • a) fall on the floor laughing
  • b) hit a gong with a huge hammer
  • c) cook up some deep fried dumplings
  • d) put the left chopstick in the right ear and the right chopstick in the left ear (please ask for adult supervision) … translation: do not do this
  • e) while reading you sweep the cat under the rug (no animals were harmed in the making of this blog posting)

… then we’re here to tell you that you need to take a Bex and have a lie down.

We are just showing in PHP that if the mbstring functionality is available to you, that the mbstring library of functionality can help with some Internationalization issues you may be grappling with and that this PHP code you could try via this live run link.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in eLearning, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

PHP Intl Class Datetime Defaults Tutorial

PHP Intl Class Datetime Defaults Tutorial

PHP Intl Class Datetime Defaults Tutorial

Onto the recent PHP Intl Class Datetime Tutorial start to a PHP Current Datetime Intl Using Internationalization web application we see a way forward improving …

  • default Locale and TimeZone presented …
    Locale
    <?php

    $defloc=Locale::acceptFromHttp($_SERVER['HTTP_ACCEPT_LANGUAGE']);

    ?>
    Timezone
    <?php

    $deficc=explode('_', str_replace('_posix','',$defloc))[-1 + sizeof(explode('_', str_replace('_posix','',$defloc)))];
    $yourtzlist="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('timezone').value=this.value; }\" id=tzsel><option id=\"toptone\" value=''>Optionally select a TimeZone below ...</option><option value='Africa/Abidjan' data-geo='5.31666,-4.03334,GMT,CI,+0'>Africa/Abidjan</option><option value='Africa/Accra' data-geo='5.55,-0.21667,GMT,GH,+0'>Africa/Accra</option><option value='Africa/Addis_Ababa' data-geo='9.03333,38.7,EAT,ET,+3'>Africa/Addis_Ababa</option><option value='Africa/Algiers' data-geo='36.78333,3.05,CET,DZ,+1'>Africa/Algiers</option> ... blah ... blah ... blah ... </select>";

    if (strpos($yourtzlist, ',' . $deficc . ',') !== false) {
    $ourtz=explode('<', explode('>', explode(',' . $deficc . ',', $yourtzlist)[1])[1])[0];
    } else {
    $ourtz="''"; //date.timezone; // ($_SERVER['TZ'] ?? (file_get_contents('/etc/timezone') ?: file_get_contents('/etc/localtime')))
    }

    ?>
  • add accompanying dropdown ways to select values from a list of what is available on Locale and TimeZone (as above) and Calendar …
    <?php

    $calsel='';
    if (1 == 1) {
    $bundle=new ResourceBundle('','ICUDATA');
    $cnames=[];
    $calendars=$bundle->get('calendar');
    foreach ($calendars as $n=>$v) {
    if ($calsel == '') {
    $calsel="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('calendar').value=this.value; }\" id=calsel><option value=''>Optionally select a Calendar system below ...</option></select>";
    }
    $calsel=str_replace("</select>", "<option value='" . $n . "'>" . $n . "</option></select>", $calsel);
    $cnames[]=$n;
    }
    }

    $locsel='';
    $arrl=ResourceBundle::getLocales('');
    for ($df=0; $df<sizeof($arrl); $df++) {
    if (strpos(($arrl[$df] . '_'), '_') !== false) { //} && strpos($arrl[$df], '0') === false) {
    if ($locsel == '') {
    $locsel="<select onchange=\"if (this.value.trim().length != 0) { document.getElementById('locale').value=tzdef(this.value); }\" id=locsel><option id=\"loptone\" value=''>Optionally select a Locale below ...</option></select>";
    }
    $locsel=str_replace("</select>", "<option value='" . $arrl[$df] . "'>" . $arrl[$df] . "</option></select>", $locsel);
    }
    }

    ?>
  • change input type=text placeholder reflect any previously selected Locale and TimeZone and/or Calendar …
    <?php echo ”

    echo "<h1>Show Current Time</h1><br><h3>RJM Programming - December, 2024</h3><br><h4>As per (white background textboxes optional) ...</h4><br><br><form method=GET onsubmit=\"if (document.getElementById('calendar').value.trim() != '') { document.getElementById('calendar').name='calendar'; } if (document.getElementById('locale').value.trim() == '' || document.getElementById('timezone').value.trim() == '') { return false; } return true;\" action=\"./i_eg.php\">
    <br><input type=text ondblclick=this.value=this.placeholder; style=background-color:yellow; id=locale name=locale placeholder=" . (isset($_GET['locale']) ? urldecode($_GET['locale']) : (isset($_POST['locale']) ? urldecode($_POST['locale']) : $defloc)) . " value='' title=Locale></input> " . $locsel . "
    <br><input type=text ondblclick=this.value=this.placeholder; style=background-color:yellow; id=timezone name=timezone placeholder=" . (isset($_GET['timezone']) ? urldecode($_GET['timezone']) : (isset($_POST['timezone']) ? urldecode($_POST['timezone']) : $ourtz)) . " value='' title=TimeZone></input> " . $yourtzlist . "
    <br><input type=text ondblclick=this.value=this.placeholder; style=background-color:white; id=calendar placeholder=" . (isset($_GET['calendar']) ? urldecode($_GET['calendar']) : (isset($_POST['calendar']) ? urldecode($_POST['calendar']) : "gregorian")) . " value='' title=Calendar></input> " . $calsel . "
    <br><br><input style=background-color:lightgreen; type=submit value=Display></input>
    </form>
    ";

    “; ?>

… and regarding Locale selections take the opportunity to gather up to the top of Locale and TimeZone dropdowns any options relevant to any Locale first selected …

<?php echo ”

<scri" . "pt type=text/javascript>
var ctynames=\"" . str_replace("\n","",$ctynames) . "\";
var canmakenothing=false, firstloc='';

function tzdef(inloc) { // wrapper around Locale dropdown selected value
var inicc=inloc.replace(/\-/g,'_').split('_')[eval(-1 + inloc.replace(/\-/g,'_').split('_').length)];
var jnicc=inicc;
var newtstuff='', newlstuff='', newts=0, newls=0, tvalis='';
if (ctynames.indexOf(\" value='\" + inicc + \"'>\") != -1) {
jnicc=ctynames.split(\" value='\" + inicc + \"'>\")[1].split('<')[0];
}
if (document.getElementById('timezone').value == '' && inicc.trim() != '' && inicc == inicc.toUpperCase() && eval('' + inicc.length) == 2) {
var tzoh=document.getElementById('tzsel').innerHTML;
var aftertopt=document.getElementById('toptone').outerHTML;
var tzloh=document.getElementById('locsel').innerHTML;
var afterlopt=document.getElementById('loptone').outerHTML;
var tzs=tzoh.split(',' + inicc + ',');
if (eval('' + tzs.length) > 1) {
//document.getElementById('timezone').value=tzs[1].split('>')[1].split('<')[0];
tvalis=tzs[1].split('>')[1].split('<')[0];
newtstuff+='<option value=\"' + tvalis + '\">' + tvalis + '</option>';
for (newts=1; newts<eval('' + tzs.length); newts++) {
if (tzs[newts].split('>')[1].split('<')[0] != tvalis) {
newtstuff+='<option value=\"' + tzs[newts].split('>')[1].split('<')[0] + '\">' + tzs[newts].split('>')[1].split('<')[0] + '</option>';
}
}
tzs=tzloh.split('_' + inicc + '\"');
if (eval('' + tzs.length) > 1) {
newlstuff+='<option value=\"' + inloc + '\">' + inloc + '</option>';
for (newls=1; newls<eval('' + tzs.length); newls++) {
if (tzs[newls].split('>')[1].split('<')[0] != inloc) {
newlstuff+='<option value=\"' + tzs[newls].split('>')[1].split('<')[0] + '\">' + tzs[newls].split('>')[1].split('<')[0] + '</option>';
}
}
}
}
if (tzoh.indexOf(aftertopt) != -1 && newtstuff != '') {
document.getElementById('tzsel').innerHTML=aftertopt.replace(' id=', ' data-id=').replace(' value=\"', ' value=\" ').replace(' a Time', ' ' + jnicc + ' Time') + newtstuff + aftertopt + tzoh.split(aftertopt)[1];
}
if (tzloh.indexOf(afterlopt) != -1 && newlstuff != '') {
document.getElementById('locsel').innerHTML=afterlopt.replace(' id=', ' data-id=').replace(' value=\"', ' value=\" ').replace(' a Locale', ' ' + jnicc + ' Locale') + newlstuff + afterlopt + tzloh.split(afterlopt)[1];
}
if (tvalis != '') { document.getElementById('timezone').value=tvalis; }
document.getElementById('locsel').value=inloc;
firstloc=inicc;
canmakenothing=true;
}
if (document.getElementById('tzsel').value == ' ' && canmakenothing) {
if (inicc != firstloc) {
document.getElementById('tzsel').value='';
}
}
return inloc.replace(/\-/g,'_');
}
</scr" . "ipt>

“; ?>

… containing an ISO-3166 2 letter Country Code at it’s end, mentioning that country’s name in that first option of the TimeZone dropdown, so that some users will see a Country Name in the mix, adding to relatability, perhaps.

We feel this considerably improves the User Experience using a changed “second draft” PHP code offering here, as a PHP web application, you can also try below.


Previous relevant PHP Intl Class Datetime Tutorial is shown below.

PHP Intl Class Datetime Tutorial

PHP Intl Class Datetime Tutorial

We’re back revisiting the PHP intl “Internationalization” class mentioned in “the AlmaLinux install feeling” PHP Mbstring Multibyte String and Intl Class Tutorial

Reading a bit, we cottoned onto three data items being central to Datetime PHP intl usage being …

  1. locale
  2. timezone
  3. calendar … optional

… and, so, we’re starting our “learning curve” (we got great help from this excellent website developing …

<?php

if (isset($_GET['locale']) && isset($_GET['timezone']) && isset($_GET['calendar'])) {
$DateTime = new DateTime();
$IntlDateFormatter = new IntlDateFormatter(
urldecode($_GET['locale']) . '@calendar=' . urldecode($_GET['calendar']),
IntlDateFormatter::FULL,
IntlDateFormatter::FULL,
urldecode($_GET['timezone']),
IntlDateFormatter::TRADITIONAL);

echo '<p>' . $IntlDateFormatter->format($DateTime) . '</p><br><br>';
}

?>

…) in today’s “first draft” “proof of concept” offering here, as a PHP web application, you can also try below …


Previous relevant PHP Mbstring Multibyte String and Intl Class Tutorial is shown below.

PHP Mbstring Multibyte String and Intl Class Tutorial

PHP Mbstring Multibyte String and Intl Class Tutorial

We’re revisiting the PHP Mbstring Multibyte String Primer Tutorial of the past to see where we stand now with PHP 8 and …

  • mbstring “Multibyte String” extension … and …
  • intl “Internationalization Functions” extension

… and discovered that we can happily now have a chance incorporating these functionalities into PHP serverside logic into the future. We tested this with a tweaked mbstring_test.php “old way” live run and “new way” live run via the writing of a couple of “proof of concepts” …


Previous relevant PHP Mbstring Multibyte String Primer Tutorial is shown below.

PHP Mbstring Multibyte String Primer Tutorial

PHP Mbstring Multibyte String Primer Tutorial

Our (Mac OS X laptop) local MAMP web server is an Apache/PHP/MySql web server. In this environment you can find out a lot with some PHP code as per …

<?php phpinfo(); ?>

… and if, in doing this, you find a reference to the “mbstring” Multibyte String Information functionality existing, you are a lucky candidate to introduce some internationalization code into your PHP code, for those occasions where the destination language uses a UTF-8 character set where individual characters can not be described by the ascii character set from decimal 0 to decimal 255. In other words, it takes more than one byte to describe each character of the language. There are many languages like this, a few being the Chinese languages, Japanese and Korean.

We followed a lot of the advice of the very useful link (thanks) to create some PHP called …

… where we show what we always suspected but were too shy to ask, and didn’t flesh it out before … doh! … you can’t split a Chinese phrase’s characters into their individual characters and expect those characters individually translated bring you back to the sense of the Chinese phrase to start with.

So we take the Chinese phrase 火车票 (which translates into English as “Train tickets” … and we thank Google Translate for help with all this) and use PHP mbstring’s mb_str_split to properly split the Chinese into its constituent multibyte (UTF-8) characters (and along the way, show that PHP str_split messes up this same task, as you’d probably guess would happen), and then translate all these into English using Google Translate, as an intellectual exercise.

If this exercise makes you …

  • a) fall on the floor laughing
  • b) hit a gong with a huge hammer
  • c) cook up some deep fried dumplings
  • d) put the left chopstick in the right ear and the right chopstick in the left ear (please ask for adult supervision) … translation: do not do this
  • e) while reading you sweep the cat under the rug (no animals were harmed in the making of this blog posting)

… then we’re here to tell you that you need to take a Bex and have a lie down.

We are just showing in PHP that if the mbstring functionality is available to you, that the mbstring library of functionality can help with some Internationalization issues you may be grappling with and that this PHP code you could try via this live run link.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in eLearning, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Making of iPhone Videos Play Around the Traps Tutorial

Making of iPhone Videos Play Around the Traps Tutorial

Making of iPhone Videos Play Around the Traps Tutorial

Especially as far as video creation goes with the set of web browser brands, on mobile and non-mobile platforms, going around, it can be valid to ask …

Does it play everywhere?

… because it’s surprising what can arise sometimes.

During last week we had one happen, where our …

  • original MOV video the iPhone (Camera app in Video mode) created … and we AirDroped to MacBook Air (macOS) …
  • converted via (macOS command line) …

    ffmpeg -i IMG_2910.MOV squidgy.m4v

  • and then played, online, via …

    <video style="width:100%;" controls><source type=video/mp4 src=/squidgy.m4v></source></video>

    “crashed and burned” just, quietly, didn’t play on any Safari incarnation of web browser, though did for Google Chrome, for example

… so annoying!

We asked the Open Source community, no doubt, and we liked this great advice, to, at first, try (on macOS command line) …


ffmpeg -i IMG_2910.MOV -c:v libx264 -pix_fmt yuv420p -profile:v main -level:v 3.1 -an squidgy.m4v

… creating a different set of problems, until we went …


ffmpeg -i IMG_2910.MOV -c:v libx264 -pix_fmt yuv420p -profile:v main -level:v 3.1 -an squidgy.mp4

… teamed with the blog posting video playing HTML …


<video style="width:100%;" controls><source type=video/mp4 src=/squidgy.mp4></source></video>

… as per …

… instead, to make everyone browser happy (as well as any readers of HTML/Javascript Scratchpad Simultaneous Line Equations Hints Revisit Tutorial who persisted)!

Yes, but thinking on it, those early readers will have noticed audio present on that previous video incarnation. We wanted to get it back, and it contextualizes things. Well, we went back to the source (but didn’t ask any horses) to use ffmpeg to extract an audio “track” if you will, via …


ffmpeg -i IMG_2910.MOV squidgy.m4a

… and uploaded this, then looked for help and found this great link, thanks, getting us to …


<video id=myvideo style=width:95%; controls>
<source type=video/mp4 src=/squidgy.mp4></source>
<audio id=myaudio>
<source type=audio/mp4 src=/squidgy.m4a></source></audio>
<script>
// Thanks to https://stackoverflow.com/questions/6433900/syncing-html5-video-with-audio-playback
var myvideo=null, myaudio=null, change_time_state=true;
function syncit() {
myvideo = document.getElementById("myvideo");
myaudio = document.getElementById("myaudio");
change_time_state = true;
myvideo.onplay = function(){
myaudio.play();
if(change_time_state){
myaudio.currentTime = myvideo.currentTime;
change_time_state = false;
}
}
myvideo.onpause = function(){
myaudio.pause();
change_time_state = true;
}
}
setTimeout(syncit, 5000);
</script>
</video>

… as per …

… to help, more, with context.

If this was interesting you may be interested in this too.

Posted in eLearning, Operating System, Photography, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

PHP Intl Class Datetime Tutorial

PHP Intl Class Datetime Tutorial

PHP Intl Class Datetime Tutorial

We’re back revisiting the PHP intl “Internationalization” class mentioned in “the AlmaLinux install feeling” PHP Mbstring Multibyte String and Intl Class Tutorial

Reading a bit, we cottoned onto three data items being central to Datetime PHP intl usage being …

  1. locale
  2. timezone
  3. calendar … optional

… and, so, we’re starting our “learning curve” (we got great help from this excellent website developing …

<?php

if (isset($_GET['locale']) && isset($_GET['timezone']) && isset($_GET['calendar'])) {
$DateTime = new DateTime();
$IntlDateFormatter = new IntlDateFormatter(
urldecode($_GET['locale']) . '@calendar=' . urldecode($_GET['calendar']),
IntlDateFormatter::FULL,
IntlDateFormatter::FULL,
urldecode($_GET['timezone']),
IntlDateFormatter::TRADITIONAL);

echo '<p>' . $IntlDateFormatter->format($DateTime) . '</p><br><br>';
}

?>

…) in today’s “first draft” “proof of concept” offering here, as a PHP web application, you can also try below …


Previous relevant PHP Mbstring Multibyte String and Intl Class Tutorial is shown below.

PHP Mbstring Multibyte String and Intl Class Tutorial

PHP Mbstring Multibyte String and Intl Class Tutorial

We’re revisiting the PHP Mbstring Multibyte String Primer Tutorial of the past to see where we stand now with PHP 8 and …

  • mbstring “Multibyte String” extension … and …
  • intl “Internationalization Functions” extension

… and discovered that we can happily now have a chance incorporating these functionalities into PHP serverside logic into the future. We tested this with a tweaked mbstring_test.php “old way” live run and “new way” live run via the writing of a couple of “proof of concepts” …


Previous relevant PHP Mbstring Multibyte String Primer Tutorial is shown below.

PHP Mbstring Multibyte String Primer Tutorial

PHP Mbstring Multibyte String Primer Tutorial

Our (Mac OS X laptop) local MAMP web server is an Apache/PHP/MySql web server. In this environment you can find out a lot with some PHP code as per …

<?php phpinfo(); ?>

… and if, in doing this, you find a reference to the “mbstring” Multibyte String Information functionality existing, you are a lucky candidate to introduce some internationalization code into your PHP code, for those occasions where the destination language uses a UTF-8 character set where individual characters can not be described by the ascii character set from decimal 0 to decimal 255. In other words, it takes more than one byte to describe each character of the language. There are many languages like this, a few being the Chinese languages, Japanese and Korean.

We followed a lot of the advice of the very useful link (thanks) to create some PHP called …

… where we show what we always suspected but were too shy to ask, and didn’t flesh it out before … doh! … you can’t split a Chinese phrase’s characters into their individual characters and expect those characters individually translated bring you back to the sense of the Chinese phrase to start with.

So we take the Chinese phrase 火车票 (which translates into English as “Train tickets” … and we thank Google Translate for help with all this) and use PHP mbstring’s mb_str_split to properly split the Chinese into its constituent multibyte (UTF-8) characters (and along the way, show that PHP str_split messes up this same task, as you’d probably guess would happen), and then translate all these into English using Google Translate, as an intellectual exercise.

If this exercise makes you …

  • a) fall on the floor laughing
  • b) hit a gong with a huge hammer
  • c) cook up some deep fried dumplings
  • d) put the left chopstick in the right ear and the right chopstick in the left ear (please ask for adult supervision) … translation: do not do this
  • e) while reading you sweep the cat under the rug (no animals were harmed in the making of this blog posting)

… then we’re here to tell you that you need to take a Bex and have a lie down.

We are just showing in PHP that if the mbstring functionality is available to you, that the mbstring library of functionality can help with some Internationalization issues you may be grappling with and that this PHP code you could try via this live run link.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in eLearning, Tutorials | Tagged , , , , , , , , , , , , | Leave a comment

HTML/Javascript Scratchpad Simultaneous Line Equations Hints Revisit Tutorial

HTML/Javascript Scratchpad Simultaneous Line Equations Hints Revisit Tutorial

HTML/Javascript Scratchpad Simultaneous Line Equations Hints Revisit Tutorial

One way a lot of us learn something new is to …

  • have a way to an answer be modelled for us … then …
  • perhaps, for a different problem presented, of the same ilk, we might need to model again, or have less modelling, or have no modelling needed at all … then …
  • over time we might be able to solve this type of problem independently

… that last step important when being examined on a topic. We’re equating “modelling” with “hints” in our web application, where, today, further to yesterday’s HTML/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial, we’ve introduced a new emoji button 🤝 the user can click to receive a hint in their Javascript scratchpad used to code for a Simultaneous Linear Equation “intersection point” solution.

There is a bit of a juggle trying to keep “various webpage players” above the fold, and for the first time we can remember we’re accessing the relevant element CSS vertical-align property in a Javascript DOM way, as well as using the incredibly useful [Element].scrollIntoView() there at one point …


function yourhandhold() {
var ik=-1;
var tac=document.getElementById('tascratch').value;
var newlines='';
if (hhcnt == 0) {
newlines+='<br> // Get first y isolated, by dividing both sides of equation by ' + your_y1 + ' ... ' + String.fromCodePoint(129309) + ' ' + document.getElementById('yourhh').title;
newlines+='<br> your_x1 = eval((' + your_x1 + ') / (' + your_y1 + ')); // ' + eval((your_x1) / (your_y1)) + '';
newlines+='<br> your_f1 = eval((' + your_f1 + ') / (' + your_y1 + ')); // ' + eval((your_f1) / (your_y1)) + '';
newlines+='<br> your_y1 = 1; // y = ' + eval((your_x1) / (your_y1)) + 'x + (' + eval((your_f1) / (your_y1)) + ') <br><br> ';
hiddenm=eval((your_x1) / (your_y1));
hiddenf=eval((your_f1) / (your_y1));
tac=tac.replace('// ... hopefully by here', newlines + '// ... hopefully by here');
document.getElementById('tascratch').value=tac.replace(/\<br\>/g, String.fromCharCode(10));
document.getElementById('tdleft').style.verticalAlign='middle';
hhcnt++;
document.getElementById('yourhh').title='Hint ' + eval(1 + hhcnt) + ' of up to 5';
} else if (hhcnt == 1) {
newlines+='<br> // Get second y isolated, by dividing both sides of equation by ' + your_y2 + ' ... ' + String.fromCodePoint(129309) + ' ' + document.getElementById('yourhh').title;
newlines+='<br> your_x2 = eval((' + your_x2 + ') / (' + your_y2 + ')); // ' + eval((your_x2) / (your_y2)) + '';
newlines+='<br> your_f2 = eval((' + your_f2 + ') / (' + your_y2 + ')); // ' + eval((your_f2) / (your_y2)) + '';
newlines+='<br> your_y2 = 1; // y = ' + eval((your_x2) / (your_y2)) + 'x + (' + eval((your_f2) / (your_y2)) + ') // ... meaning ... <br> // ' + eval((your_x1) / (your_y1)) + 'x + (' + eval((your_f1) / (your_y1)) + ') = ' + eval((your_x2) / (your_y2)) + 'x + (' + eval((your_f2) / (your_y2)) + ') <br><br> ';
tac=tac.replace('// ... hopefully by here', newlines + '// ... hopefully by here');
document.getElementById('tascratch').value=tac.replace(/\<br\>/g, String.fromCharCode(10));
document.getElementById('tdleft').style.verticalAlign='bottom';
hhcnt++;
document.getElementById('yourhh').title='Hint ' + eval(1 + hhcnt) + ' of up to 5';
} else if (hhcnt == 2) {
newlines+='<br> // Gather x over on left ... ' + String.fromCodePoint(129309) + ' ' + document.getElementById('yourhh').title;
newlines+='<br> // ' + eval(eval((your_x1) / (your_y1)) - eval((your_x2) / (your_y2))) + 'x = (' + eval((your_f2) / (your_y2)) + ') - (' + eval((your_f1) / (your_y1)) + ') <br><br> ';
hiddend=eval(eval((your_x1) / (your_y1)) - eval((your_x2) / (your_y2)));
tac=tac.replace('// ... hopefully by here', newlines + '// ... hopefully by here');
document.getElementById('tascratch').value=tac.replace(/\<br\>/g, String.fromCharCode(10));
hhcnt++;
document.getElementById('yourhh').title='Hint ' + eval(1 + hhcnt) + ' of up to 5';
} else if (hhcnt == 3) {
newlines+='<br> // Isolate that x by dividing both sides by ' + hiddend + ' ... ' + String.fromCodePoint(129309) + ' ' + document.getElementById('yourhh').title;
newlines+='<br> // ' + 'x = (' + eval(eval(eval((your_f2) / (your_y2)) / hiddend) - eval(eval((your_f1) / (your_y1)) / hiddend)) + ') <br><br> ';
tac=tac.replace('// ... hopefully by here', newlines + '// ... hopefully by here');
document.getElementById('tascratch').value=tac.replace(/\<br\>/g, String.fromCharCode(10));
hiddenx=eval(eval(eval((your_f2) / (your_y2)) / hiddend) - eval(eval((your_f1) / (your_y1)) / hiddend));
hhcnt++;
document.getElementById('yourhh').title='Hint ' + eval(1 + hhcnt) + ' of up to 5';
} else if (hhcnt == 4) {
newlines+='<br> // Plug that x into either y (as isolated) equation ... ' + String.fromCodePoint(129309) + ' ' + document.getElementById('yourhh').title;
newlines+='<br> // ' + 'y = (' + hiddenm + ' * (' + hiddenx + ')) + (' + hiddenf + ') ';
newlines+='<br> // ' + 'y = (' + eval(hiddenf + eval(hiddenm * hiddenx)) + ') <br><br> ';
newlines+='<br> ' + 'thisxintercept = ' + hiddenx + '; ';
newlines+='<br> ' + 'thisyintercept = ' + eval(hiddenf + eval(hiddenm * hiddenx)) + '; <br><br> ';
tac=tac.replace('// ... hopefully by here', newlines + '// ... hopefully by here');
document.getElementById('tascratch').value=tac.replace(/\<br\>/g, String.fromCharCode(10));
checkyours(); // document.getElementById('yourcheck').click();
document.getElementById('tdleft').style.verticalAlign='bottom';
document.getElementById('s').click();
hhcnt++;
document.getElementById('tascratch').rows=eval(0 + eval('' + document.getElementById('tascratch').value.split(String.fromCharCode(10)).length));
}

if (ik < 0) {
document.getElementById('tascratch').rows=eval(1 + eval('' + document.getElementById('tascratch').value.split(String.fromCharCode(10)).length));
}

setTimeout(function(){ isokay=true; document.getElementById('yourhh').scrollIntoView(); }, 2000);
}

… to try to help the user out a bit, here, as far as a User Experience goes, with our changed simultaneous_linear.html Simultaneous Linear Equations web application.


Previous relevant HTML/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial is shown below.

HTML/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial

HTML/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial

What yesterday’s HTML/Javascript Simultaneous Line Equations Revisit Tutorial lacked, in our opinion, was a way in for the user to interact with it’s web application. To add this new optional functionality might have a dual advantage …

  • learn about Simultaneous Linear Equations in an interactive way, more likely to sink in and be remembered …
  • study and create some Javascript coding

This involves a user …

  • using a suggested template …

    function beforepresolve() {
    your_x1 = document.getElementById("x1").value;
    your_y1 = document.getElementById("y1").value;
    your_f1 = document.getElementById("f1").value;
    your_x2 = document.getElementById("x2").value;
    your_y2 = document.getElementById("y2").value;
    your_f2 = document.getElementById("f2").value;
    s_w_big='function you_solve_equations() { <br>' + ' thisxintercept = 0; <br>' + ' thisyintercept = 0; <br><br>' + ' your_y1 = ' + your_y1 + '; ';
    s_w_big+='<br>' + ' your_x1 = ' + your_x1 + '; ';
    s_w_big+='<br>' + ' your_f1 = ' + your_f1 + '; ';
    s_w_big+='<br>' + ' your_y2 = ' + your_y2 + '; ';
    s_w_big+='<br>' + ' your_x2 = ' + your_x2 + '; ';
    s_w_big+='<br>' + ' your_f2 = ' + your_f2 + '; ';

    s_w_big+='<br><br> document.getElementById("yans").placeholder="Intersection point is (0,0)"; <br><br> // So you have Javascript variables above to play around with (new ones prefix with "var ") ... <br><br><br><br> // ... hopefully by here you have calculated <br> // thisxintercept and thisyintercept to match the Solve click answer<br><br> if (thisxintercept != 0 || thisyintercept != 0) { <br> var myans="Intersection point is (" + thisxintercept + "," + thisyintercept + ")"; <br> document.getElementById("yans").value=myans;<br> } <br>';

    s_w_big+='<br>}<br><br>you_solve_equations(); <br>';

    if (!document.getElementById('tascratch')) {
    document.getElementById('helpout').innerHTML='<details><summary>Optionally try solving in Javascript scratchpad below ...</summary><textarea cols=95 id=tascratch>' + s_w_big.replace(/\<br\>/g, String.fromCharCode(10)) + '</textarea><br><br><button id=yourcheck onclick=checkyours(); style=background-color:lightgreen;>Check Working Above ...</button>  <input id=yans type=text placeholder="Intersection point is (0,0)" value="" style=width:70%;></input><br></details><br>';
    } else {
    document.getElementById('tascratch').value=s_w_big.replace(/\<br\>/g, String.fromCharCode(10));
    document.getElementById('yans').value='';
    }

    document.getElementById('tascratch').rows=eval(1 + eval('' + s_w_big.split('<br>').length));

    s_w_big="";
    }

    … to create some Javascript to calculate a Simultaneous Linear Equation intersection point (x,y)
  • our web application executing that Javascript …

    function checkyours() {
    var tag = document.createElement('script');
    tag.innerHTML = document.getElementById('tascratch').value;
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.insertAdjacentElement("afterend", tag);
    }

    … this way, instantaneously, and without navigating to any new webpages

Again, then, why not try a changed simultaneous_linear.html Simultaneous Linear Equations web application.


Previous relevant HTML/Javascript Simultaneous Line Equations Revisit Tutorial is shown below.

HTML/Javascript Simultaneous Line Equations Revisit Tutorial

HTML/Javascript Simultaneous Line Equations Revisit Tutorial

It’s the anniversary of HTML/Javascript Simultaneous Line Equations Tutorial!

Happy (11th give or take) Anniversary … release of HTML/Javascript Simultaneous Line Equations Tutorial! Many happy Javascript returns … chortle, chortle.

On revisiting it’s Simultaneous Line Equations web application, we were a bit lost with the initial form settings, given the default input numbers, unchanged, resulted in an ill-defined result … not a good look … and we apologize for this. So, we’ve fixed that with a pretty simple new randomizer Javascript function …


function mixitup() {
document.getElementById("x1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("y1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("f1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("x2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("y2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("f2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
}

… we also slot in at the document.body onload event intervention point … our favourite … aaaaaahhhh!

And then, a flash back to high school days, when every mathematics teacher there stressed how important it was to show your workings. You know in Netflix this will amount to some screen zooming into some code somewhere ticking through the codelines meaningfully … but really … it is just boring hardish slog to “Show Workings”, which we do here via a “reveal” functionality with details/summary usage, but given we remember Linear Equations from mathematics, and it interested us, we decided to show the (no doubt less efficient Javascript guise for) coding steps mimicking the Substitution Method so well explained, thanks, by HTTP://sydney.edu.au/stuserv/documents/maths_learning_centre/simeqns.pdf

Why not try the changed simultaneous_linear.html Simultaneous Linear Equations web application.

Stop Press

The Other Day at Lawson Station Tutorial

The Other Day at Lawson Station Tutorial

We had an …

Ephemeral 101

… lesson this morning at Lawson train station. We came across this …


… reminding us of the rubber snake guest appearance in Citizen Science Primer Tutorial! Funny later, but a bit concerning at the time, especially in summer, in some parts hereabouts in the Blue Mountains. Well … you had to be there!

We did not plant this, but it looks like 6 ply, if you want to try it. Alas, a bit before filming, when a train went by, we could not get the camera out quick enough to see it gyrating a lot better than this!

Stop Press … later today …

It’s still there!


If this was interesting you may be interested in this too.


Previous relevant HTML/Javascript Simultaneous Line Equations Tutorial is shown below.

HTML/Javascript Simultaneous Line Equations Tutorial

HTML/Javascript Simultaneous Line Equations Tutorial

Here is a tutorial showing some client-side basics in HTML and Javascript that can solve a pair of Simultaneous Linear Equations. The inspiration for this came from the tutorial here.

Sometimes a graphical representation of the Line Equations can help visualize the situation, so for this we call on a previous tutorial PHP/Javascript/HTML Google Chart Line Chart Tutorial.

This HTML/Javascript solution uses an HTML form to collect information, and it is a lot like Javascript form validation to do the mathematics, so the previous tutorial Javascript Form Validation Primer Tutorial has many similarities in its coding structure to today’s tutorial.

Link to some downloadable HTML programming code … rename to simultaneous_linear.html

Hope you get some ideas from today’s tutorial.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Hope you get some ideas from today’s tutorial.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial

HTML/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial

HTML/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial

What yesterday’s HTML/Javascript Simultaneous Line Equations Revisit Tutorial lacked, in our opinion, was a way in for the user to interact with it’s web application. To add this new optional functionality might have a dual advantage …

  • learn about Simultaneous Linear Equations in an interactive way, more likely to sink in and be remembered …
  • study and create some Javascript coding

This involves a user …

  • using a suggested template …

    function beforepresolve() {
    your_x1 = document.getElementById("x1").value;
    your_y1 = document.getElementById("y1").value;
    your_f1 = document.getElementById("f1").value;
    your_x2 = document.getElementById("x2").value;
    your_y2 = document.getElementById("y2").value;
    your_f2 = document.getElementById("f2").value;
    s_w_big='function you_solve_equations() { <br>' + ' thisxintercept = 0; <br>' + ' thisyintercept = 0; <br><br>' + ' your_y1 = ' + your_y1 + '; ';
    s_w_big+='<br>' + ' your_x1 = ' + your_x1 + '; ';
    s_w_big+='<br>' + ' your_f1 = ' + your_f1 + '; ';
    s_w_big+='<br>' + ' your_y2 = ' + your_y2 + '; ';
    s_w_big+='<br>' + ' your_x2 = ' + your_x2 + '; ';
    s_w_big+='<br>' + ' your_f2 = ' + your_f2 + '; ';

    s_w_big+='<br><br> document.getElementById("yans").placeholder="Intersection point is (0,0)"; <br><br> // So you have Javascript variables above to play around with (new ones prefix with "var ") ... <br><br><br><br> // ... hopefully by here you have calculated <br> // thisxintercept and thisyintercept to match the Solve click answer<br><br> if (thisxintercept != 0 || thisyintercept != 0) { <br> var myans="Intersection point is (" + thisxintercept + "," + thisyintercept + ")"; <br> document.getElementById("yans").value=myans;<br> } <br>';

    s_w_big+='<br>}<br><br>you_solve_equations(); <br>';

    if (!document.getElementById('tascratch')) {
    document.getElementById('helpout').innerHTML='<details><summary>Optionally try solving in Javascript scratchpad below ...</summary><textarea cols=95 id=tascratch>' + s_w_big.replace(/\<br\>/g, String.fromCharCode(10)) + '</textarea><br><br><button id=yourcheck onclick=checkyours(); style=background-color:lightgreen;>Check Working Above ...</button>  <input id=yans type=text placeholder="Intersection point is (0,0)" value="" style=width:70%;></input><br></details><br>';
    } else {
    document.getElementById('tascratch').value=s_w_big.replace(/\<br\>/g, String.fromCharCode(10));
    document.getElementById('yans').value='';
    }

    document.getElementById('tascratch').rows=eval(1 + eval('' + s_w_big.split('<br>').length));

    s_w_big="";
    }

    … to create some Javascript to calculate a Simultaneous Linear Equation intersection point (x,y)
  • our web application executing that Javascript …

    function checkyours() {
    var tag = document.createElement('script');
    tag.innerHTML = document.getElementById('tascratch').value;
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.insertAdjacentElement("afterend", tag);
    }

    … this way, instantaneously, and without navigating to any new webpages

Again, then, why not try a changed simultaneous_linear.html Simultaneous Linear Equations web application.


Previous relevant HTML/Javascript Simultaneous Line Equations Revisit Tutorial is shown below.

HTML/Javascript Simultaneous Line Equations Revisit Tutorial

HTML/Javascript Simultaneous Line Equations Revisit Tutorial

It’s the anniversary of HTML/Javascript Simultaneous Line Equations Tutorial!

Happy (11th give or take) Anniversary … release of HTML/Javascript Simultaneous Line Equations Tutorial! Many happy Javascript returns … chortle, chortle.

On revisiting it’s Simultaneous Line Equations web application, we were a bit lost with the initial form settings, given the default input numbers, unchanged, resulted in an ill-defined result … not a good look … and we apologize for this. So, we’ve fixed that with a pretty simple new randomizer Javascript function …


function mixitup() {
document.getElementById("x1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("y1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("f1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("x2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("y2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("f2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
}

… we also slot in at the document.body onload event intervention point … our favourite … aaaaaahhhh!

And then, a flash back to high school days, when every mathematics teacher there stressed how important it was to show your workings. You know in Netflix this will amount to some screen zooming into some code somewhere ticking through the codelines meaningfully … but really … it is just boring hardish slog to “Show Workings”, which we do here via a “reveal” functionality with details/summary usage, but given we remember Linear Equations from mathematics, and it interested us, we decided to show the (no doubt less efficient Javascript guise for) coding steps mimicking the Substitution Method so well explained, thanks, by HTTP://sydney.edu.au/stuserv/documents/maths_learning_centre/simeqns.pdf

Why not try the changed simultaneous_linear.html Simultaneous Linear Equations web application.

Stop Press

The Other Day at Lawson Station Tutorial

The Other Day at Lawson Station Tutorial

We had an …

Ephemeral 101

… lesson this morning at Lawson train station. We came across this …


… reminding us of the rubber snake guest appearance in Citizen Science Primer Tutorial! Funny later, but a bit concerning at the time, especially in summer, in some parts hereabouts in the Blue Mountains. Well … you had to be there!

We did not plant this, but it looks like 6 ply, if you want to try it. Alas, a bit before filming, when a train went by, we could not get the camera out quick enough to see it gyrating a lot better than this!

Stop Press … later today …

It’s still there!


If this was interesting you may be interested in this too.


Previous relevant HTML/Javascript Simultaneous Line Equations Tutorial is shown below.

HTML/Javascript Simultaneous Line Equations Tutorial

HTML/Javascript Simultaneous Line Equations Tutorial

Here is a tutorial showing some client-side basics in HTML and Javascript that can solve a pair of Simultaneous Linear Equations. The inspiration for this came from the tutorial here.

Sometimes a graphical representation of the Line Equations can help visualize the situation, so for this we call on a previous tutorial PHP/Javascript/HTML Google Chart Line Chart Tutorial.

This HTML/Javascript solution uses an HTML form to collect information, and it is a lot like Javascript form validation to do the mathematics, so the previous tutorial Javascript Form Validation Primer Tutorial has many similarities in its coding structure to today’s tutorial.

Link to some downloadable HTML programming code … rename to simultaneous_linear.html

Hope you get some ideas from today’s tutorial.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , | Leave a comment

HTML/Javascript Simultaneous Line Equations Revisit Tutorial

HTML/Javascript Simultaneous Line Equations Revisit Tutorial

HTML/Javascript Simultaneous Line Equations Revisit Tutorial

It’s the anniversary of HTML/Javascript Simultaneous Line Equations Tutorial!

Happy (11th give or take) Anniversary … release of HTML/Javascript Simultaneous Line Equations Tutorial! Many happy Javascript returns … chortle, chortle.

On revisiting it’s Simultaneous Line Equations web application, we were a bit lost with the initial form settings, given the default input numbers, unchanged, resulted in an ill-defined result … not a good look … and we apologize for this. So, we’ve fixed that with a pretty simple new randomizer Javascript function …


function mixitup() {
document.getElementById("x1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("y1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("f1").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("x2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("y2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
document.getElementById("f2").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);
}

… we also slot in at the document.body onload event intervention point … our favourite … aaaaaahhhh!

And then, a flash back to high school days, when every mathematics teacher there stressed how important it was to show your workings. You know in Netflix this will amount to some screen zooming into some code somewhere ticking through the codelines meaningfully … but really … it is just boring hardish slog to “Show Workings”, which we do here via a “reveal” functionality with details/summary usage, but given we remember Linear Equations from mathematics, and it interested us, we decided to show the (no doubt less efficient Javascript guise for) coding steps mimicking the Substitution Method so well explained, thanks, by HTTP://sydney.edu.au/stuserv/documents/maths_learning_centre/simeqns.pdf

Why not try the changed simultaneous_linear.html Simultaneous Linear Equations web application.

Stop Press

The Other Day at Lawson Station Tutorial

The Other Day at Lawson Station Tutorial

We had an …

Ephemeral 101

… lesson this morning at Lawson train station. We came across this …


… reminding us of the rubber snake guest appearance in Citizen Science Primer Tutorial! Funny later, but a bit concerning at the time, especially in summer, in some parts hereabouts in the Blue Mountains. Well … you had to be there!

We did not plant this, but it looks like 6 ply, if you want to try it. Alas, a bit before filming, when a train went by, we could not get the camera out quick enough to see it gyrating a lot better than this!

Stop Press … later today …

It’s still there!


If this was interesting you may be interested in this too.


Previous relevant HTML/Javascript Simultaneous Line Equations Tutorial is shown below.

HTML/Javascript Simultaneous Line Equations Tutorial

HTML/Javascript Simultaneous Line Equations Tutorial

Here is a tutorial showing some client-side basics in HTML and Javascript that can solve a pair of Simultaneous Linear Equations. The inspiration for this came from the tutorial here.

Sometimes a graphical representation of the Line Equations can help visualize the situation, so for this we call on a previous tutorial PHP/Javascript/HTML Google Chart Line Chart Tutorial.

This HTML/Javascript solution uses an HTML form to collect information, and it is a lot like Javascript form validation to do the mathematics, so the previous tutorial Javascript Form Validation Primer Tutorial has many similarities in its coding structure to today’s tutorial.

Link to some downloadable HTML programming code … rename to simultaneous_linear.html

Hope you get some ideas from today’s tutorial.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , | Leave a comment