Tutorial Memanfaatkan View Parser CodeIgniter4

By Harjito

image from Tutorial Memanfaatkan View Parser CodeIgniter4

Tutorial ini merupakan kelanjutan dari tutorial Tutorial Oauth Google Dengan CodeIgniter4. kali ini kita akanmemnfaatkan view parser yang disediakan oleh framework sehingga meminimalkan terjadi serangan xss.

Menyiapkan Library

Untuk menangani tampilan, kita akan membuat sebuah library yang akan menyatukan bagian-bagian dari html untuk memudahkan penataan dan penyeragaman tampilan

  • Buat file baru di folder app/Libraries
  • Beri nama Layout.php
  • Ketikkan script berikut
<?php 
namespace App\Libraries;

use \CodeIgniter\View\Parser;

class Layout{

    public $title;

    public $data = [];

    public $view = 'home';

    
    function __construct(){
        $this->data['menus'] = null;
        $this->data['contents'] = null;
        $this->data['action'] = null;
        $this->data['fields'] = null;
    }

    public function show(){
        $parser = \Config\Services::parser(); 
        $this->data['web_title'] = sprintf('%s | Tito-OAuth',$this->title);
        $this->data['author'] = 'Harjito';
        $this->data['email'] = '[email protected]';
        $this->data['affiliation'] = 'e-project-tech.com';
        $this->data['favicon'] = 'favicon.ico';

        echo $parser->setData($this->data)->render('Partials/header');
		echo $parser->setData($this->data)->render('Partials/menu');
		echo $parser->setData($this->data)->render('Templates/'.$this->view);
		return view('Partials/footer');
    }
}

Menyiapkan View

Untuk pengaturan view, kita akan membuat dua buah folder di app/Views yaitu folder Partials dan Templates. Partials digunakan untuk memisahkan bagian header, menu dan footer. Sedangkan Templates digunakan untuk main.

  • Buat folder Partials di app/Views
  • Buat folder Templates di app/Views

Membuat HTML untuk Header

  • Buat file baru di app/Views/Partials
  • Beri nama header.php
  • Salin kode berikut
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{web_title}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="theme-color" content="theme">
        <meta content='id' name='language'/>
        <meta content='id' name='geo.country'/>
        <meta content='Indonesia' name='geo.placename'/>
        <meta name="author" content="{author}, {email}">
        <link rel="shortcut icon" href="/e-project.ico" type="image/x-icon">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-title" content="e-Project">
        <meta name="msapplication-TileImage" content="{favicon}">
        <meta name="msapplication-TileColor" content="#2F3BA2">
        <link rel="shortcut icon" type="image/png" href="{favicon}"/>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
    </head>
    <style>
        .table th{
            min-width:120px;
        }
        .table td{
            word-wrap: break-word;
            max-width:200px;
            padding-top:5px;
            padding-bottom:5px;
        }
        .container{
            max-width:calc(100% - 20px);
            padding-top:10px;
            padding-bottom:10px;
            margin:auto;
        }
        .input-group-text hover{
            cursor:hand;
        }
        .nav-link{
            height:55px;
            padding-top:15px;
        }
        .btn{
            width: 110px;
            height: 55px;
            word-wrap: break-word;
            margin:1px 1px 1px 1px;
        }
        #container{
            max-width: 1024px;
            margin:auto;
        }
        .myForm {
            min-width: 500px;
            position: absolute;
            text-align: center;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding-top:30px;
            padding-bottom:30px;
        }

        @media (max-width: 500px) {
            .myForm {
                min-width: 90%;
            }
        }

        html, body {
            height: 100%;
        }

        #wrap {
            min-height: 100%;
        }

        #main {
            overflow:auto;
            padding-bottom:150; /* this needs to be bigger than footer height*/
        }

        .footer {
            position: relative;
            margin-top: -130px; /* negative value of footer height */
            height: 130px;
            clear:both;
            padding-top:20px;
        } 
    </style>
    <body>

Membuat HTML untuk Menu

  • Buat file baru di app/Views/Partials
  • Beri nama menu.php
  • Salin kode berikut
<div id="wrap">
    {if $menus}
        <div class="container bg-light text-dark">
            <nav class="nav nav-pills flex-column flex-sm-row">
                {menus}
                    <a class="flex-sm-fill text-sm-center nav-link {active}" href="/{target}"><i class="fa fa-{icon}"></i> {label}</a>    
                {/menus}
            </nav>
            <hr/>
        </div>
    {endif}
    <div class="container">
        <div class="alert alert-primary" role="alert">
            <h3>{heading}</h3>
        </div>
    </div>
        <div class="container">
  • Buat file baru di app/Views/Partials
  • Beri nama footer.php
  • Salin kode berikut
        </div>
    </div>
    <footer class="footer ">
      <div class="container alert alert-primary">
        <p class="text-center">Developed by {author} &copy 2021</p>
        <p class="text-center">{affiliation}</p>
      </div>
    </footer>
</body>
</html>

Membuat HTML untuk Login

  • Buat file baru di app/Views/Templates
  • Beri nama login.php
  • Salin kode berikut
<main id="main" class="myForm alert alert-primary">
    <h5> Login Page </h5>
    {buttons}
        <a class="btn btn-primary" href="{target}"><i class="fab fa-{icon}"></i> <br>{label}</a>
    {/buttons}
</main>

Membuat HTML untuk Profile

  • Buat file baru di app/Views/Templates
  • Beri nama profile.php
  • Salin kode berikut
<main id='main' class="myForm alert alert-primary">
    {if $fields}
        {fields}
            <p><img src="{picture}"></p>
            <p><label>Name: </label>{name}</p>
            <p><label>Email: </label>{email}</p>
        {/fields}
    {endif}
</main>

memodifikasi Controller

Memodifikasi Controller Home

  • Buka file app/Controllers/Home.php
  • Ganti isi method index dengan script berikut
$layout = new \App\Libraries\Layout(); 
		
$auth = Session()->auth;
		
if($auth){
			
    $layout->data['menus'] = [
        [
            'icon' => 'sign-out-alt',
            'target' => 'logout',
            'label' => 'Logout',
        ],
    ];	
                
    $layout->view = 'profile';
    $layout->title = 'Profile';
    $layout->data['heading'] = 'Profile';
            
    $layout->data['fields'] = [			[	
        'picture' => $auth->picture,
            'id' => $auth->id, 
            'name' => $auth->name,
            'email' => $auth->email
        ]
    ];

    return $layout->show();
}
$layout->data['menus'] = [
	[
	    'icon' => 'sign-in-alt',
		'target' => 'redirect',
		'label' => 'Login',
	],
];
$layout->data['heading'] = 'Home';
return $layout->show();

Memodifikasi Controller Redirect

  • Buka file app/Controllers/Redirect.php
  • Ganti baris perintah: echo “Google Login”; dengan script berikut
$layout = new \App\Libraries\Layout(); 
$layout->view = 'login';	
$layout->title = 'Login';
$layout->data['heading'] = 'Login/Register';
$layout->data['buttons'] = [
    [
        'icon' => 'google',
        'target' => $client->createAuthUrl(),
        'label' => 'Login'
    ]
];

return $layout->show();

Demikian tutorial kali ini. Semoga bermanfaat. Tunggu tutorial selanjutnya di eProject Tech

Tags:

Ikuti terus tutorial saya di e-Project dan channel saya di


Donasi