Design Pattern: Mengelola Kode Frontend Dalam Kode Vanilla-PHP

<?php
if(isset($_SESSION['username'])) {
    echo "<h1>Selamat Datang</h1><br/>";
    echo "Anda telah login!";
} else {
    echo "<h1>Silakan Login</h1><br/>";
    echo '<a href="/login">login</a>';
}

    if (($_POST['swconfig'] == $vtoken) && (strlen($_POST['x_usr'])>4) && (strlen($_POST['x_pwd'])>4)) {
        myQuery("select * from env");
        $z = md5(time().date('YmDHiSz'));
        $r = myQuery("update env set value=? where vname='bilco.vbast_usr'", 0, $_POST['x_usr']);
        $r = $r + intval(myQuery("update env set value=? where vname='bilco.vbast_pwd'", 0, $_POST['x_pwd']));
        echo "--- updated: $r<script language='JavaScript'>function c() { top.location='/?z=$z'; }window.setTimeout('c()', 500);</script>";
    } else {
        $vusr = myQuery("select value from env where vname='bilco.vbast_usr'",'cell');
        $vpwd = myQuery("select value from env where vname='bilco.vbast_pwd'",'cell');
        echo "
        <a href=# onclick='swconfig(0)' id=dlgclose><i class='fa fa-close'></i></a>
        <a href=# onclick='swconfig(99)' id=dlgsave><i class='fa fa-check-circle-o'></i> Simpan</i></a>
        <form method=post action='/'><input type=hidden name=swconfig value='$vtoken'><table width=100% cellpadding=8 cellspacing=8>
            <tr><td colspan=2 style='font-size: 125%; border-bottom: 1px solid #444;'><i class='fa fa-user-circle' style='float:left; margin: 0 16pt 8pt 0; font-size: 2.5em; display: inline-block'></i><b style='margin-bottom: 4pt; display: inline-block'>".$GLOBALS['usr_fullname']."</b><br>".$GLOBALS['usr_desc']."</td></tr>
            <tr><td>SAP User for Invoice</td><td><input type=text name=x_usr id=x_usr value='$vusr' maxlength=80></td></tr>
            <tr><td>SAP Password for Invoice</td><td><input type=text name=x_pwd id=x_pwd value='$vpwd' maxlength=80></td></tr>
        </table></form><!-- ##DONE## -->";
    }

<?php
class Template {
    protected $path;

    public function __construct($path) {
        //File to be included
        $this->path = $path;
    }

    public function render() {
        if(file_exists($this->path)){
            //Starts output buffering
            ob_start();

            //Includes contents into buffer
            include $this->path;
            $buffer = ob_get_contents();
            @ob_end_clean();

            //Returns output buffer
            return $buffer;
        } else {
            //Throws exception
            throw new Exception('File not found!');
        }
    }       
}

<?php
// cukup include class Template; ga perlu individual PHP include file
include_once("Template.php");

// argumen 1 konstruktor adalah path PHP include file
$view1 = new Template('job1.php');
// return render() tetap di echo
echo $view1->render();

<?php
class Template {
    protected $path, $data;

    public function __construct($path, $data = array()) {
        //File to be included
        $this->path = $path;
        // Data to be populated into View
        $this->data = $data;
    }

    public function render() {
        if(file_exists($this->path)){
            //Extracts vars to current view scope
            extract($this->data);
            
            //Starts output buffering
            ob_start();

            //Includes contents into buffer
            include $this->path;
            $buffer = ob_get_contents();
            @ob_end_clean();

            //Returns output buffer
            return $buffer;
        } else {
            //Throws exception
            throw new Exception('File not found!');
        }
    }       
}

<?php
// cukup include class Template; ga perlu individual PHP include file
include_once("Template.php");

// argumen 1 konstruktor adalah path PHP include file
$view1 = new Template('job1.php');
// return render() tetap di echo
echo $view1->render();

$data = array('var1' => 'injected variable 1', 'var2' => 69);
// Constructor Template sekarang bisa menerima data external
$view2 = new Template('job2.php', $data);
echo $view2->render();

<?php
    $localvar = 'PHP localvar';
?>

<style>
    .greenpara {
        background-color: #387806;
        color: white;
    }
</style>

<!-- elemen $data menjadi local variable  -->
<p class="greenpara">PHP var from HTML <?=$localvar?> with injected var: <?=$var2?></p>
<p id="targetp"></p>

<script>
    // elemen $data menjadi local variable 
    let phpvarfromjs2 = '<?=$var1?>';
    document.getElementById("targetp").innerHTML = phpvarfromjs2;
</script>