Install ZMQ extension di PHP

Hmm, kebetulan sering lupa cara untuk install zmq extension di PHP. Dulu cukup menggunakan PECL pecl install zmq atau pecl install zmq-beta. Tapi semenjak PHP 7.2 cara tersebut tidak berhasil. Jadi saya dokumentasikan caranya melalui blog ini. Semoga bisa membantu yang lain juga.

Sebelum lanjut, pastikan sudah install PHP development packages. Di macOS sepertinya cukup brew install php. Tapi di Linux distro lain, misalnya Ubuntu harus install php-dev dan build-essentials. Kalau di Fedora, SUSE, ArchLinux (atau distro lain) bisa beda nama package-nya.

Berikut cara untuk build manual di PHP 7.4 (cara yang sama bisa dipakai di 7.2 dan 7.3).

git clone https://github.com/zeromq/php-zmq.git
cd php-zmq
phpize
./configure
make
make install

Baca infonya yang muncul dimana file hasil compile zmq.so . Setelah itu pindahkan file tersebut ke directory sesuai dengan extension_dir yang ada di php.ini. Untuk mengecek gunakan php -i | grep extension_dir.

Setelah itu aktifkan extension dengan menambahkan extension=zmq.so di file php.ini. Atau bisa juga di /etc/conf/php/7.4/conf.d/zmq.ini. Kalau di macOS dengan Homebrew lokasinya ada di /usr/local/etc/php/7.4/conf.d/zmq.ini.

Periksa dengan php -m apakah zmq sudah aktif atau belum. Kalau konfigurasi benar, zmq akan muncul di list module yang aktif.

Oh ya, cara ini juga bisa digunakan untuk compile extension yang lain. Misalnya mau compile MongoDB extension secara manual tanpa pecl, cara di atas juga bisa digunakan.

Cara Preview PDF & Image Sebelum Upload File di Vue.js

Hoo, sudah lama sekali nggak nulis di blog. Ini yang pertama di 2019 ūü§£

Langsung aja. Jadi ceritanya sedang ngasi training Vue.js + Node.js ke teman-teman programmer dari Pindad. Ada pertanyaan soal preview image dan PDF sebelum di-upload. Untuk image, kalau kalian search di internet, pasti banyak yang merujuk ke FileReader, dengan code yang agak panjang. Tapi ada satu tag HTML yang sudah ada sangat lama, yang bisa digunakan untuk preview image dan PDF. Apa itu? Tag itu adalah <object>.

Langsung aja contoh code di Vue.js.

<template>
  <div>
    <input type="file" @change="changeFile" accept="image/*,application/pdf"/>
    <object :data="blob" width="100%" height="700"/>
  </div>
</template>

<script>
export default {
  data: () => ({
    blob: null
  }),

  methods: {
    changeFile(event) {
      const file = event.target.files[0]
      this.blob = URL.createObjectURL(file)
    }
  }
}
</script>

Kamu juga bisa mencoba code tersebut di Code Sandbox https://codesandbox.io/s/trusting-sun-ktycx

Kuncinya ada di URL.createObjectURL() dan <object> yang akan mengubah binary menjadi URL

Jadi, kalau kalian mau sekedar preview image dan PDF, bisa menggunakan cara ini. Tapi untuk urusan yang lebih kompleks (misalnya mau tau ukuran file) saya sarankan pakai FileReader atau cara lain.

Ok, selamat mencoba dan have fun! ūüėĀ

Nice Terminal

sudo apt install zsh git curl

# Install Powerline Fonts
git clone https://github.com/powerline/fonts.git --depth=1 ~/powerline_fonts && sh ~/powerline_fonts/install.sh && rm -rf ~/powerline_fonts

# Install Oh My ZSH
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

# Use ZSH as default shell
chsh -s /bin/zsh

# Ganti ZSH_THEME menjadi agnoster
vi ~/.zshrc

Ganti default font di Terminal menggunakan Powerline fonts

Menggunakan jQuery dengan Vue CLI 3

Sudah lama nggak nulis blog. Hehe … Yang lain pada pindah ke Medium, saya masih setia dengan WordPress. Soalnya WordPress statistik-nya jauh lebih bagus daripada Medium. Liat dashboard lebih enak.

Ehm! Jadi gini, kebetulan ada pertanyaan tentang bagaimana menggunakan jQuery dengan Vue CLI 3? Kasusnya pakai template dari ThemeForest, yang mana template tersebut sudah banyak fitur, plugin yang menggunakan jQuery. Mau convert semua ke Vue.js? Tentu ini akan memakan waktu yang cukup lama.

Solusinya gampang. Pertama, pastikan sudah install jquery dengan npm install jquery atau kalau pakai yarn add jquery

Kedua, buat file .eslintrc di root project. Lalu isi dengan

{
  "env": {
    "browser": true,
    "node": true,
    "jquery": true
  }
}

Ini alasannya agar eslint tidak rewel saat menggunakan $ atau jQuery. Soalnya kedua keyword itu tidak di-import. Kalau mau di-import bisa-bisa saja. Tapi capeklah.

Ketiga, edit file vue.config.js di root project. Kalau belum ada bikin aja sendiri. Lalu isi dengan

const webpack = require('webpack');

module.exports = {
  chainWebpack: config => {
    config
      .plugin('provide')
      .use(webpack.ProvidePlugin, [{
        $: 'jquery',
        jquery: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      }]);
  },
}

Inti sebenarnya adalah mengkonfigurasi Webpack (build tools yang digunakan oleh Vue CLI 3) agar menggunakan jQuery.

Dah, gitu aja.

Video Editor List

Ini cuma list Video Editor yang mau saya explore lebih lanjut. Beberapa sudah pernah pakai, tapi eksplorasinya belum mendalam.

Membuat fitur email aktivasi pada saat registrasi di Laravel 5.4

Ada diskusi di Laravel Group tentang Sentinel yang memiliki fitur email aktivasi pada saat registrasi. Untuk membuat fitur tersebut, apakah bisa tanpa bantuan package dari pihak ketiga? Jawabannya tentu saja bisa.

Sebelum dimulai, saya asumsikan Laravel anda sudah terkonfigurasi dengan benar. Sehingga sudah bisa mengirimkan email dan save data ke database.

Migration

Hal pertama yang perlu anda lakukan adalah menambahkan dua field ke users table. Kira-kira begini migration-nya.

$table->string('activation_token')->nullable()->unique();
$table->datetime('activated_at')->nullable();

Mail

Setelah itu, jalankan perintah artisan berikut

php artisan make:mail UserActivation -m emails/activation

Perintah di atas akan men-generate dua file, yaitu app/Mail/UserActivation.php dan resources/views/emails/activation.blade.php

Edit file app/Mail/UserActivation.php

Tambahkan public property $user dan parameter $user ke __construct. Juga sedikit modifikasi pada method build. Kira-kira menjadi seperti ini

public $user;

public function __construct(User $user)
{
    $this->user = $user;
}

public function build()
{
    return $this->markdown('emails.verification', $this->user->toArray());
}

Berikutnya kita edit file resources/views/emails/activation.blade.php

@component('mail::message')
# Activate your account

Klik link berikut untuk mengaktifkan akun anda.

@component('mail::button', ['url' => url('activation/' . $user->activation_token) ])
Aktifkan!
@endcomponent

Thanks,

{{ config('app.name') }}
@endcomponent

Route

Edit routes/web.php, tambahkan route baru untuk handle activation token

Route::get('activation/{token}', function ($token)
{
    $user = App\User::where('activation_token', $token)->first();

    if ($user) {
        $user->activated_at = \Carbon\Carbon::now();
        $user->save();

        return 'Your account has been activated.';
    }

    return 'Invalid activation token.';
});

Registrasi

Agar tutorialnya simple dan seragam, saya asumsikan anda menggunakan php artisan make:auth untuk membuat registrasi.

Tambahkan method di bawah ini ke app/Http/Controllers/Auth/RegisterController.php

protected function registered(Request $request, $user)
{
    \Mail::to($user)->send(new \App\Mail\UserActivation($user));

    return 'Please check your mail box.';
}

Masih di file yang sama, pada method create, tambahkan activation_token

protected function create(array $data)
{
    return User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => bcrypt($data['password']),

         // Tambahin ini nih...
         // Btw, jangan lupa nambahin 'activation_token' pada
         // property $fillable di file app/User.php
        'activation_token' => str_random(64),
    ]);
}

Selesai! Sekarang anda bisa coba lakukan registrasi. Lalu cek email, dan visit URL yang ada di email.

Kesimpulan

Membuat fitur mengirimkan email untuk aktivasi di Laravel sangat mudah. Sehingga penggunaan package tambahan tidak diperlukan.

Anda juga bisa mengubah fitur aktivasi lewat email menjadi aktivasi yang lain. Misalnya aktivasi menggunakan SMS dengan menggunakan fitur Notification di Laravel.

Contoh source code bisa dilihat di https://github.com/mul14/demo-account-activation-via-email-laravel54

Buka PDF dari JS

Ini tulisan supaya gak cape nyari-nyari lagi di Google. ūüėź

Kalo mau buka PDF dari JavaScript di browser, bisa pake cara ini. Contoh ini pakai axios sebagai http client.

async function openPdfWindow() 
{
    const pdfWindow = window.open()

    const url = 'dummy.pdf'

    const response = await axios.get(url, {
        responseType: 'blob',
    })

    const file = new Blob([response.data], {type: 'application/pdf'})

    const fileURL = URL.createObjectURL(file)

    pdfWindow.location = fileURL
}

Alternatif lain bisa pake base64.