DEV Community: MedanInCode

Cara Import Dan Export Table Database Mysql

MedanInCode — Thu, 14 Apr 2022 02:28:48 +0000

Tutorial ini dibuat karena masih banyak yang tidak tahu cara export dan import table ke database.Padahal caranya sangat mudah.Disini kita akan menggunakan managemen database standart PhpMyAdmin

Cara Import Database

Masuk ke localhost/phpmyadmin
Klik Database yang akan di import.
Klik Tab Import ,lihat gambar dibawah.
Klik Choose dan pilih file .sql yang akan diimport lalu tekan Button GO.Untuk nama button Choose bisa berbeda tergantung bahasa.

Setelah itu tunggu sampai import selesai.Untuk catatan saja kita bisa mengimport file berformat .sql ataupun yang sudah dicompress seperti .zip ,untuk .rar tidak support.

Cara Export Database

Masuk ke localhost/phpmyadmin
Klik Database yang akan di export datanya.
Klik Tab Export ,lihat gambar dibawah.
Ada dua tipe Quick dan Custom.Tipe Quick jika ingin mengexport semuanya,tipe Custom jika misalnya hanya ingin beberapa tabel atau hanya tabel tanpa datanya.Jika sudah tekan Go

Sekian tutorial kali ini semoga membantu.

Menghitung Selisih Antara Dua Tanggal Dengan Php

MedanInCode — Wed, 13 Apr 2022 04:08:09 +0000

Tutorial ini akan menunjukan bagaimana cara menghitung selisih antara dua tanggal di php.

Disini kita akan menggunakan dua cara ,yang pertama menggunakan strtotime dan kedua menggunakan fungsi diff().

Cara Pertama.

<?php 
$tgl1 = strtotime("2020-01-01"); 
$tgl2 = strtotime("2020-01-20"); 

$jarak = $tgl2 - $tgl1;

$hari = $jarak / 60 / 60 / 24;
echo $hari;
?>

Cara pertama ini kita mengkonversi kedua tanggal menjadi detik dengan fungsi strtotime ,kemudian mengurangkan keduanya ,terakhir kita konversi detik.Untuk contoh diatas kita konversi menjadi hari.

Sekedar catatan strtotime hanya mencakup mulai dari tanggal 1 Januari 1970,jadi kurang cocok untuk menghitung umur jika dibawah tanggal tersebut.

Cara Kedua

<?php 
$tgl1 = new DateTime("2020-01-01");
$tgl2 = new DateTime("2020-01-20");
$jarak = $tgl2->diff($tgl1);

echo $jarak->d;
?>

Untuk cara kedua kita menggunakan fungsi diff(),fungsi diff() memiliki beberapa keluaran seperti contoh diatas kita menggunakan ->d untuk hari.Untuk yang lain bisa dilihat dibawah:

d untuk selisih hari.
m untuk selisih bulan.
y untuk selisih tahun.
h untuk jam.
i untuk menit.
s untuk detik.
invert bernilai 0 atau 1,0 jika tanggal yang dikurangkan lebih kecil dari tanggal pengurang begitu juga sebaliknya.
days untuk menghitung total selisih hari.

Jika dilihat d dan days sama-sama menunjukan selisih hari,bedanya days mengeluarkan total jadi kalau kita menggurangkan 2020-02-2020 dengan 2020-01-01 maka akan keluar 50,kalau menggunakan d akan tetap mengeluarkan 19.

Sekian tutorial kali ini jika ada yang kurang dipahami,silahkan tanyakan dibawah.

Membuat Grafik Dari Database Codeigniter 4

MedanInCode — Sat, 19 Mar 2022 02:06:50 +0000

Grafik yang kita gunakan adalah highchart.js untuk versi offline bisa didownload langsung dari websitenya https://www.highcharts.com/blog/download/ .Kita akan menggunakan versi online.

Paling tidak anda harus tau cara memasang dan menjalankan project codeigniter 4 jika ingin membaca tutorial ini.Jika belum paham bisa baca disini Instalasi Codeigniter 4.

Pada grafik kita akan menampilkan data kasus corona di Indonesia sampai bulan April.Buat terlebih dahulu database ci4chart.Lalu download file sql ini dan import ke database ci4chart.
File Sql Download Disini

Kalau tidak paham cara import bisa dilihat disini Cara Import Dan Export

Setelah membuat project baru codeigniter 4 jangan lupa ubah setting database di file .env

Pastikan file env sudah ada titiknya .env karena secara default belum ada saat membuat project baru.

Kemudian cari setting database seperti dibawah ini lalu sesuaikan:

database.default.hostname = localhost
database.default.database = ci4chart
database.default.username = root
database.default.password = root
database.default.DBDriver = MySQLi

Ubah juga mode CI_ENVIRONMENT menjadi development agar lebih mudah dalam proses debugging.

Membuat Model

Buat file baru bernama CoronaModel.php di folder app/Models/CoronaModel.php dan tulis kode dibawah.

<?php namespace App\Models;
use CodeIgniter\Model;
class CoronaModel extends Model
{
    protected $table = 'corona';
}

Kalau yang kita pakai fungsi orm database bawaan codeigniter 4,tidak perlu membuat fungsi di Models.Hanya isi dengan nama tabel.

Membuat Controller

Kita akan pakai Controller Home ubah file di folder app/Controllers/Home.php dan isi dengan kode dibawah.

<?php namespace App\Controllers;
use App\Models\CoronaModel;

class Home extends BaseController
{
    public function index()
    {
        $bulan = $this->request->getGet('bulan');
        // jika tidak ada ambil bulan sekarang
        $bulan = $bulan?$bulan:Date("m");

        return view('index');
    }

    public function apiData($bulan){
        $corona = new CoronaModel();
        $corona->where('tgl >=',"2020-{$bulan}-01");
        $corona->where('tgl <=',"2020-{$bulan}-31");
        $corona->orderBy('tgl','asc');
        echo json_encode($corona->get()->getResult());
    }
}

Di controller kita buat dua fungsi yang pertama index untuk menampilkan view,dan fungsi apiData untuk mengambil data dan mengembalikan dalam bentuk json.

Karena kita akan mengambil data untuk grafik menggunakan ajax.

Membuat View

Buat file baru di bernama index.php di folder app/Views/index.php dan isi dengan kode dibawah.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aplikasi Chart Sederhana</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-3">
        <div class="row">
            <div class="col-md-3">
                <label for="">Pilih Bulan</label>
                <select id="bulan" class="form-control">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4" selected="">4</option>
                </select>
            </div>
        </div>
    </div>
    <div id="container"></div>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.js"></script>
    <script>
    // Chart
    const options = {
      chart: {
        type: 'spline',
        events: {
            load: getData(4)
        }
      },
      title: {
        text: 'Corona Virus Indonesia'
      },
         xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    day: '%e of %b'
                }
        },
      series: [
        {
            name:'Kasus',
            data:[],
            pointStart: Date.UTC(2020, 3, 1),
            pointInterval: 24 * 3600 * 1000 // one day
        }
      ]
    };
    const chart = Highcharts.chart('container', options)

    // Data
    $("#bulan").change(function(){
        const val = $(this).val();
        getData(val);
    })
    function getData(bulan) {
        const url = `/home/apiData/${bulan}`;
        $.getJSON(url,function(data) {
            const p =[];
            data.map((obj) => {
                p.push(parseInt(obj.jumlah))
            });
            chart.series[0].update({
                data:p,
                pointStart: Date.UTC(2020, bulan-1, 1)
            })
            chart.redraw(); 
        })
    }
    </script>   
</body>
</html>

Di view kita menggunakan boostrap4,highchart.js dan jquery.Terdapat juga combo yang akan menampilkan data berdasarkan bulan yang dipilih.

Setelah semua langkah selesai.Kemudian masuk ke folder project dari terminal/CMD kemudian ketikkan php spark serve dan bukan http://localhost:8080.

Maka akan terlihat hasil seperti gambar dibawah ini.

Untuk project bisa didownload di https://github.com/medanincode/ci4chart.git

Membuat Custom Helper Codeigniter 4

MedanInCode — Fri, 18 Mar 2022 15:29:42 +0000

Helper biasa digunakan untuk mencegah kode yang berulang-ulang di controller dan view kita.Helper berlandaskan kepada metode DRY.Fungsi di Helper bisa dipanggil di controller maupun view.

Langsung saja ke tahap pembuatan custom helper.

Membuat Custom Helper

Buat di folder app/Helpers/ file bernama my_helper.php ,namanya bebas terserah kita.
Misalnya kita isi dengan fungsi yang pasti sering digunakan yaitu format rupiah.Langsung saja isi Helper dengan kode dibawah.

<?php
function format_rupiah($angka){
  $rupiah=number_format($angka,0,',','.');
  return $rupiah;
}
?>

Menggunakan Custom Helper

Ada dua cara memanggil helper pertama secara global dan manual di masing-masing controller.

Memanggil Secara Global

Buka file app/Controllers/BaseController.php lalu cari bagian ini

protected $helpers = [];

Ubah menjadi

protected $helpers = ['my_helper'];

my_helper merupakan nama file helper yang kita buat tadi.

Memanggil Secara Manual

Buka file controller letakkan di fungsi mana kita akan memanggilnya

helper(['my_helper']);

Menggunakan Fungsi Helper

Untuk menggunakannya kita tinggal memanggil seperti kode dibawah ini baik di controller ataupun di view

echo format_rupiah(10000);

Sekian tutorial kali ini.Selamat Belajar

Membuat Thumbnail Gambar Dengan Codeigniter 4

MedanInCode — Fri, 18 Mar 2022 05:06:05 +0000

Tutorial kali ini akan membahas bagaimana membuat gambar thumbnail menggunakan codeigniter 4.Thumbnail di web sendiri adalah gambar asli yang diperkecil agar proses loading lebih cepat.Apalagi jika gambar asli kita memiliki ukuran yang besar.

Ada dua fungsi yang bisa digunakan pertama fit dan kedua crop.

Menggunakan Fungsi Fit

Pada fungsi fit terdapat tiga parameter :

fit(int $width, int $height = null, string $position = 'center')

$width untuk lebar dari gambar
$height untuk tinggi gambar
$position untuk menentukan mulai dari bagian mana gambar dipotong.Ada beberapa pilihan : ‘top-left’, ‘top’, ‘top-right’, ‘left’, ‘center’, ‘right’, ‘bottom-left’, ‘bottom’, ‘bottom-right’.

<?php namespace App\Controllers;
class Thumbnail extends BaseController
{
    public function index()
    {
        $thumbnail = \Config\Services::image()
        ->withFile(ROOTPATH.'public/uploads/gambar.jpg')
        ->fit(100, 100, 'center')
        ->save(ROOTPATH.'public/uploads/thumb/gambar.jpg');
    }
}

Pada kode diatas kita memangil fungsi \Config\Services::image() dari Codeigniter 4,withFile adalah lokasi dari file gambar asli kita,fit untuk mengcrop gambar,save untuk menyimpan hasil ke lokasi yang baru.

Menggunakan Fungsi Crop

Terdapat 6 parameter pada fungsi crop:

crop(int $width = null, int $height = null, int $x = null, int $y = null, bool $maintainRatio = false, string $masterDim = 'auto')

$width untuk lebar dari gambar
$height untuk tinggi gambar
$x titik awal pixel dari kiri gambar untuk mulai di crop.
$y titik awal pixel dari atas gambar untuk mulai di crop.
$maintainRatio defaulnya false,jika true akan mempertahakan aspect ratio dari gambar asli.
$masterDim menentukan bagian mana yang tidak tersentuh jika $mainRatio bernilai true.Nilainya bisa : 'width','height','auto'.

Gunakan crop jika position awal cropping tidak ada di position fungsi fit diatas.

<?php namespace App\Controllers;
class Thumbnail extends BaseController
{
    public function index()
    {
        $ukuranCrop = 50;

        $info = \Config\Services::image()
            ->withFile(ROOTPATH.'public/uploads/gambar.jpg')
            ->getFile()
            ->getProperties(true);

        $xOffset = ($info['width'] / 2) - ($ukuranCrop / 2);
        $yOffset = ($info['height'] / 2) - ($ukuranCrop / 2);

        $thumbnail = \Config\Services::image()
                    ->withFile(ROOTPATH.'public/uploads/gambar.jpg')
                    ->crop($ukuranCrop, $ukuranCrop, $xOffset, $yOffset)
                    ->save(ROOTPATH.'public/uploads/thumb/gambar.jpg');
    }
}

Misalnya kita ingin mencrop dari tengah-tengah gambar dengan menggunakan crop seperti yang dilakukan pada fungsi fit sebelumnya.Proses akan lebih ribet,kita perlu mendapatkan dulu info dari gambar asli agar mendapatkan posisi pas yang ditengah.

Bisa dilihat kita harus menggunakan rumus seperti yang digunakan di $xOffset untuk mendapatkan posisi center dari x.Jauh lebih ribet padahal dengan fungsi fit kita cukup panggil position center.

$xOffset = ($info['width'] / 2) - ($ukuranCrop / 2);

Dari dua metode untuk membuat thumbnail diatas ,fit lebih kami sarankan karena lebih mudah penggunaanya.Gunakan crop hanya jika benar-benar membutuhkan titik awal kiri dan atas yang spesifik.

Sekian tutorial kali ini,jika ada pertanyaan bisa ditanyakan.Jika tidak yasudah.

Simple Quiz Project Using Vue

MedanInCode — Tue, 18 Jan 2022 13:21:49 +0000

Simple Quiz app using vue js

Link To Code

Github Link

Additional Resources / Info

Project is demo on https://simple-quiz-vue.netlify.app/

Filtering Data Di Vue

MedanInCode — Sun, 16 Jan 2022 11:35:06 +0000

Tutorial kali ini akan membahas bagimana jika kita ingin memfilter data dengan vue.Karena disini kita akan menggunakan directive v-for dan v-if ada baiknya teman-teman membaca dahulu disini.
Percabangan Di Vue Js

Perulangan Di Vue Js

Misalnya kita punya data seperti dibawah ini.

products:[
   {
      name:"dress zara",
      gender:"wanita",
      size:"S"
   },
   {
      name:"baju offwhite",
      gender:"pria",
      size:"L"
   }
]

Kita akan mencoba memfilter data yang akan tampil berdasarkan jenis kelamin.Disini kita akan menggunakan beberapa cara.

v-if
computed
methods

Menggunakan v-if

Untuk penggunaan dengan v-if kurang lebih seperti kode dibawah ini.

<h1>Pakaian pria</h1>
<ul>
  <li v-for="product in products" v-if="product.gender==='pria'">
    {{ product.name }}
  </li>
</ul>
<h1>Pakaian wanita</h1>
<ul>
  <li v-for="product in products" v-if="product.gender==='wanita'">
    {{ product.name }}
  </li>
</ul>

Bisa dilihat pada code diatas kita cukup menambahkan v-if dengan kondisi jika object dengan key gender sesuai dengan jenis kelamin yang kita tentukan.

Maka akan didapatkan hasil seperti dibawah ini.

Menggunakan properti computed

Untuk penggunaan dengan properti computed bisa dilihat pada kode dibawah.

data: () => {
    return {
      products: [
        {
          name: "dress zara",
          gender: "wanita",
          size: "S"
        },
        {
          name: "baju offwhite",
          gender: "pria",
          size: "L"
        }
      ]
    };
  },
  computed:{
    produkPria:function(){
      return this.products.filter(function (data) {
        return data.gender === 'pria'
      })
    },
    produkWanita:function(){
      return this.products.filter(function (data) {
        return data.gender === 'wanita'
      })
    }
  }

Jika dilihat di kode diatas kita membuat dua buah fungsi masing-masing untuk memfilter data berdasarkan jenis kelamin.

Untuk htmlnya sendiri bisa dilihat dibawah,kita langsung membuat v-for berdasarkan fungsi yang terdapat pada properti computed.

<h1>Pakaian pria</h1>
<ul>
  <li v-for="product in produkPria">
    {{ product.name }}
  </li>
</ul>
<h1>Pakaian wanita</h1>
<ul>
  <li v-for="product in produkWanita">
    {{ product.name }}
  </li>
</ul>

Menggunakan properti methods

Dengan properti methods kita bisa membuat untuk kasus diatas menjadi 1 fungsi saja.Berbeda dengan computed karena computed memiliki parameter.

data: () => {
    return {
      products: [
        {
          name: "dress zara",
          gender: "wanita",
          size: "S"
        },
        {
          name: "baju offwhite",
          gender: "pria",
          size: "L"
        }
      ]
    };
  },
methods: {
    pakaian: function(gender) {
      return this.products.filter(function(data) {
        return data.gender === gender;
      });
    }
}

Pada kode diatas isi fungsi kurang lebih sama seperti yang kita gunakan pada parameter hanya berbeda di parameter.Untuk datanya kita berikan sesuai dengan parameter.

Untuk htmlnya seperti dibawah ini.

<h1>Pakaian pria</h1>
<ul>
  <li v-for="product in pakaian('pria')">{{ product.name }}</li>
</ul>
<h1>Pakaian wanita</h1>
<ul>
  <li v-for="product in pakaian('wanita')">{{ product.name }}</li>
</ul>

Kita cukup memanggil methods tersebut di v-for dengan parameter gender.

Sekian dulu pembahasan mengenai filtering data,jika ada yang kurang dipahami,silahkan tanyakan dibawah.

Percabangan Di Vue Js

MedanInCode — Tue, 11 Jan 2022 09:32:40 +0000

Tutorial kali ini akan membahas penggunaan percabangan di vue.Disini kita akan menggunakan directive v-if,v-if ini sendiri biasa digunakan untuk menentukan apakah suatu element mau dirender atau tidak ,kalau istilah kerennya conditional rendering.

Pada tutorial ini akan dicontoh penggunaan beberapa bentuk :

v-if
v-if dengan v-else
v-if ,v-else-if dan v-else

Contoh penggunaan v-if

v-if pada umumnya kita gunakan jika hanya memiliki satu kondisi yang harus benar.

<div v-if="isShowNama">{{nama}}</div>

Jika variabel isShowNama bernilai false maka element div yang berisi nama tersebut tidak akan dirender ke browser.

Contoh penggunaan v-if dengan v-else

Digunakan jika kita punya 2 kondisi jika tidak sesuai kondisi if,maka akan menjalankan else.

<div v-if="isShowEmail">{{email}}</div>
<div v-else>Tidak ada email</div>

Bisa dilihat pada contoh diatas jika isShowEmail bernilai true maka akan menampilkan nama,jika false maka akan menampilkan Tidak ada email.

Contoh penggunaan v-else-if

Digunakan jika kita memiliki lebih dari 2 kondisi.

<div v-if="nilai >= 75 ">Lulus</div>
<div v-else-if="nilai >= 60 && nilai<75 ">Cukuplah</div>
<div v-else>Kurang</div>

Contoh diatas kita punya 3 kondisi ,lulus,cukup dan kurang.Jika kita masukkan nilai 74 maka akan menampilkan Cukuplah.

Kurang lebih kode lengkap untuk semuanya seperti dibawah ini.

<template>
  <div id="app">
    <div v-if="isShowNama">{{nama}}</div>


    <div v-if="isShowEmail">{{email}}</div>
    <div v-else>Tidak ada email</div>


    <div v-if="nilai >= 75 ">Lulus</div>
    <div v-else-if="nilai >= 60 && nilai<75 ">Cukuplah</div>
    <div v-else>Kurang</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => {
    return {
      nama: "budi",
      email: "budi@gmail.com",
      isShowNama: false,
      isShowEmail: true,
      nilai: 64
    };
  }
};
</script>

Untuk lebih jelas bisa dilihat langsung demo untuk ketiga contoh diatas disini => Demo v-if.

Jika ada kurang dipahami bisa ditanyakan dibawah.

Perulangan Di Vue Js

MedanInCode — Mon, 10 Jan 2022 16:07:21 +0000

Tutorial kali ini akan membahas bagaimana menggunakan perulangan di vue.

Untuk melakukan ini di vue kita menggunakan directive v-for.

Menampilkan data array

Misalnya kita punya data array nama-nama siswa

siswa: ["budi","andi","caca"]

atau jika menggunakan struktur vue akan seperti ini.

export default {
  name: "App",
  data: () => {
    return {
      siswa: ["budi","andi","caca"]
    };
  }
};

Data tersebut akan kita tampilkan menggunakan v-for.Maka template vue nya akan menjadi seperti ini

<ul>
  <li v-for="nama in siswa">
  {{ nama }}
  </li>
</ul>

Kita menggunakan html list untuk menampilkan nama siswa.Bisa dilihat kita melakukan perulangan dengan variable siswa dan nama sebagai alias untuk item satuan.Kemudian karena ini hanya array kita langsung mencetak dengan seperti dibawah ini.

{{ nama }}

Kita juga bisa menampilkan index dari masing-masing data tersebut dengan menambahkan kode seperti dibawah.

<ul>
  <li v-for="(nama,index) in siswa">
   {{index+1}}.{{ nama }}
  </li>
</ul>

Index diawali dari 0 jadi kita menambah 1 ketika mencetak.Maka akan keluar hasil seperti dibawah ini.

Menampilkan data object

Sebenarnya cara sama saja menampilkan data object ataupun array dengan v-for

Jika kita punya data seperti dibawah ini.

siswa : {
  nama:'budi',
  kelas:'XII-A',
  jurusan:'RPL'
}

Kode template sama saja

<ul>
  <li v-for="value in siswa">
   {{ value }}
  </li>
</ul>

Kita juga bisa menampilkan key dari object sebagimana index dari array sebelumnya.

<ul>
  <li v-for="(value,key) in siswa">
   {{key}} : {{ value }}
  </li>
</ul>

Maka akan mendapatkan hasil seperti dibawah ini.

Di object kita bisa menambahkan satu parameter lagi yaitu index sehingga menjadi seperti ini.

<ul>
  <li v-for="(value,key,index) in siswa">
    {{index+1}}. {{key}} : {{ value }}
  </li>
</ul>

Menampilkan Data Collection

Jika kita mendapatkan data dari api backend,seringkali data yang didapatkan berbentuk collection atau array object atau berformat data JSON.

Misalnya seperti data dibawah.

siswa : [
   {
    nama:'budi',
    kelas:'XII-A',
    jurusan:'RPL'
   },
   {
    nama:'andi',
    kelas:'XII-B',
    jurusan:'TKJ'
   },
   {
    nama:'caca',
    kelas:'XII-A',
    jurusan:'RPL'
    }
 ]

Kita akan menampilkan kedalam html tabel.Maka kode v-for untuk table kurang lebih seperti dibawah ini.

<table border="1">
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kelas</th>
    <th>Jurusan</th>
  </tr>
  <tr v-for="(data,index) in siswa">
    <td>{{index+1}}</td>
    <td>{{data.nama}}</td>
    <td>{{data.kelas}}</td>
    <td>{{data.jurusan}}</td>        
  </tr>
</table>

Kenapa kita meletakkan v-for di tr,karena tr lah yang akan kita looping sebanyak data siswa.data.nama berarti kita memanggil key nama dari variabel data yang sudah jadi objek dari perulangan siswa.

Attribut v-bind:key

Attribut ini bisa juga dipanggil hanya dengan :key.Jika kita menggunakan v-for maka vue menyarankan kita harus menggunakan attribute ini,di IDE apalagi yang menggunakan syntax linter ,akan menunjukan warning di baris kodenya jika kita tidak menambahkan key saat pakai v-for.Attribute ini berperan sebagai penanda unik ,kayak primary key lah kalau di database,agar vue bisa melakukan tracking perubahan setiap tag html saat dirender.

Asal dari :key ini bisa dari index dari array,key atau properti dari object.

Contohnya :

<ul>
  <li v-for="(value,index) in siswa" v-bind:key="index">
   {{index+1}}. {{ value }}
  </li>
</ul>

atau jika kita punya object yang memiliki attribute unik.

siswa : [
   {
    id:1,
    nama:'budi'
   },
   {
    id:2,
    nama:'andi'
   }
]

Maka kode htmlnya bisa seperti dibawah ini.

<ul>
  <li v-for="(data,index) in siswa" v-bind:key="data.id">
   {{index+1}}. {{ data.nama }}
  </li>
</ul>

Sampai sini dulu pembahasan mengenai penggunaan v-for,silahkan bertanya dibawah jika ada yang kurang dimengerti.

Menampilkan Raw Html Di Vue

MedanInCode — Sun, 09 Jan 2022 10:20:16 +0000

Tutorial kali ini cukup mudah,hanya bagaimana kita menampilkan html mentah atau biasa dibilang orang, raw html.

Jika kita punya variabel yang berisi tag html,seperti dibawah ini.

textHtml: `<b>Ini teks bold</b>`

lalu menampilkan seperti ini.

<p>{{textHtml}}</p>

Maka akan keluar hasil seperti dibawah.

Bisa dilihat tag tidak terrender.Jika ingin variabel tersebut terrender kita harus menggunakan directive bernama v-html.

Sehingga kode kita menjadi.

<p><span v-html="textHtml"></span></p>

atau bisa langsung di tag

<p v-html="textHtml"></p>

Hasil yang kita dapatkan seperti gambar dibawah,tag html akan ikut dirender.

Sekian tutorial kali ini,saya rasa cukup mudah membuatnya di vue, karena hanya menambahkan directive v-html.

Menggunakan Filters Di Codeigniter 4 Sebagai Middleware

MedanInCode — Sun, 09 Jan 2022 10:06:35 +0000

Tutorial kali ini akan membahas penggunaan Filters sebagai middleware di Codeigniter 4.

Apa itu Middleware?

Middleware di dunia pemrograman web adalah software layer yang menghubungkan antara request dengan controller.Hal paling umum adalah authentication.Selain itu juga bisa digunakan untuk beberapa hal seperti :

Authorization
Validasi dan Sanitasi Input
Logger
CSRF
Dan Lain-lain

Middleware membuat kode kita lebih clean , reusable, maintainable dan readable.Karena membuat controller hanya akan fokus dalam proses alur bisnis tanpa harus melakukan hal-hal lain seperti validasi login,input dan lain-lain.Umumnya middleware dipasang di router terutama untuk framework yang menganut sistem MVC seperti Codeigniter 4,tapi tidak selalu begitu tergantung aturan framework masing-masing.

Menggunakan Filters sebagai Middleware

Sebagai contoh kita akan membuat middleware sederhana Authentication di Codeigniter 4 untuk mengcheck apakah user sudah login.

Membuat Filters

Pertama buat Filters baru di app\Filters bernama AuthFilter.php,lalu isi dengan kode dibawah.

<?php namespace App\Filters;

use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use CodeIgniter\Filters\FilterInterface;

class AuthFilter implements FilterInterface
{
    public function before(RequestInterface $request)
    {
        if (!session()->islogin)
        {
            echo "invalid";
            return redirect()->to(base_url('/auth'))->with('error', "Invalid Credential");
        }
        // Do something here
    }

    //--------------------------------------------------------------------

    public function after(RequestInterface $request, ResponseInterface $response)
    {
        // Do something here
    }
}

Bisa dilihat pada kode diatas kita menambahkan kode di fungsi before jadi dijalankan sebelum masuk ke controller.Fungsinya sangat sederhana hanya mengcheck apakah session()->isLogin ,jika tidak ada akan redirect ke halaman login dengan memberikan pesan Invalid Credential.

Menambahkan Filters ke Config

Tahap selanjutnya adalah menambahkan AuthFilter yang sudah dibuat ke dalam Config agar bisa digunakan.Buka File Filters.php di folder app\Config.

Tambahkan Filters yang dibuat tadi sehingga menjadi seperti dibawah ini.

<?php namespace Config;

use CodeIgniter\Config\BaseConfig;

class Filters extends BaseConfig
{
    // Makes reading things below nicer,
    // and simpler to change out script that's used.
    public $aliases = [
        'csrf'     => \CodeIgniter\Filters\CSRF::class,
        'toolbar'  => \CodeIgniter\Filters\DebugToolbar::class,
        'honeypot' => \CodeIgniter\Filters\Honeypot::class,
        'authfilter' => \App\Filters\AuthFilter::class
    ];

Kita beri nama authfilter agar mudah dipanggil.

Menggunakan Filters di Router

Untuk menggunakan Filters buka file Routes.php di folder app\Config.

Untuk penggunaan router group ubah menjadi kode dibawah ini.

<?php
//skill
$routes->group('skill', ['filter' => 'authfilter'], function($routes) {
    $routes->get('/', 'Skill::index');
    $routes->get('add', 'Skill::add');
    $routes->post('add', 'Skill::store');
});

Jadi setiap kali route skill dipanggil akan mengcheck apakah sudah login atau tidak.

Untuk penggunaan router bisa.

<?php
$routes->get('/dashboard', 'Home::index', ['filter' => 'authfilter']);

Sekian tutorial kali ini ,jika ada yang kurang paham bisa ditanyakan jangan dipendam.

Membuat Slug Di Laravel

MedanInCode — Sun, 09 Jan 2022 09:53:02 +0000

Membuat Slug di Laravel.Apa itu slug? Slug sendiri adalah bagian dari URL/Permalink Website yang merujuk pada sebuah konten secara spesifik.Slug berada di bagian belakang dari permalink,setelah nama domain anda.Kalau biasanya temen-teman buat detail data masih dengan angka seperti dibawah ini.

https://medanincode.com/post/ci4/2/

Dimana 2 adalah id dari si data,ini kurang ramah SEO Friendly,kita akan merubah menjadi seperti dibawah ini agar lebih SEO Friendly.

https://medanincode.com/post/ci4/passing-data-controller-ke-view-di-codeigniter-4/

Str::Slug

Cara paling mudah adalah menggunakan perintah Str::slug('parameter') jadi ketika menyimpan hanya menggunakan code seperti dibawah ini.

<?php
...

public function store(Request $request){
    $post = new Post; 
    $post->title = $request->title;
    $post->slug = Str::slug($post->title, '-'); 
    $post->body = $request->body;
    $post->save();

}

Tapi kalau hanya dengan cara ini akan ada kendala jika post memiliki title yang sama.Karena slug juga bersifat unique.Daripada teman-teman pusing memikirkan logikannya bisa menggunakan package cviebrock/eloquent-sluggable.

Package cviebrock/eloquent-sluggable

Untuk menggunakan package cviebrock/eloquent-sluggable pertama yang dilakukan adalah install package.

composer require cviebrock/eloquent-sluggable

Setelah terinstal publish konfigurasi file agar bisa merubah settingan default dari package.

php artisan vendor:publish --provider="Cviebrock\EloquentSluggable\ServiceProvider"

Update Model laravel teman-teman,contohnya menjadi seperti dibawah ini.

<?php
use Cviebrock\EloquentSluggable\Sluggable;

class Post extends Model
{
    use Sluggable;
    /**
     * Return the sluggable configuration array for this model.
     *
     * @return array
     */
    public function sluggable(): array
    {
        return [
            'slug' => [
                'source' => 'title'
            ]
        ];
    }
}

title adalah nama kolom table yang akan dijadikan patokan dari slug.Atau jika ingin menggunakannya tanpa menambahkan di model panggil fungsi SlugService::createSlug seperti contoh dibawah ini.

<?php
...
use Cviebrock\EloquentSluggable\Services\SlugService;
...
public function store(Request $request){
    $post = new Post; 
    $post->title = $request->title;
    $post->slug = SlugService::createSlug(Post::class, 'slug', $post->title);
    $post->body = $request->body;
    $post->save();

}

Sekian tutorial kali ini,jika ada yang kurang jelas bisa ditanyakan dibawah.Kalau diatas susah gak ada kolom komentar.