Membuat fitur email aktivasi pada saat registrasi di Laravel 5.4

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.

Catatan brew packages yang harus saya install

Post ini juga untuk catatan pribadi, simpen di GitHub Gist nggak ada fitur search. T_T Jadi di sini aja. Akan di-update secara berkala.

List brew packages yang biasanya ane install. Jangan lupa beberapa GNU kita pake tanpa prefix “g” dengan parameter --with-default-names.

aria2 \
autoconf \
automake \
axel \
bash \
binutils \
boost160 \
caddy \
cmake \
colordiff \
coreutils \
curl \
diff-so-fancy \
diffutils \
dirmngr \
dnsmasq \
dwarfutils \
elasticsearch \
emacs \
fasd \
ffmpeg \
findutils --with-default-names \
fish \
flow \
fontconfig \
freetype \
fzf \
gawk \
gd \
gdbm \
gettext \
gflags \
git \
git-extras \
git-ftp \
glog \
gmp \
gnu-indent --with-default-names \
gnu-sed --with-default-names \
gnu-tar --with-default-names \
gnu-time --with-default-names \
gnu-which --with-default-names \
gnupg \
gnupg2 \
gnutls \
go \
gpg-agent \
grep \
gzip \
hhvm \
httpie \
icu4c \
imagemagick \
jemalloc \
jpeg \
jq \
keychain \
lame \
less \
libassuan \
libelf \
libevent \
libffi \
libgcrypt \
libgpg-error \
libksba \
libmemcached \
libpng \
libssh2 \
libtasn1 \
libtiff \
libtool \
libusb \
libusb-compat \
libxml2 \
libyaml \
libzip \
llvm \
lz4 \
mackup \
mas \
mcrypt \
md5sha1sum \
memcached \
mhash \
mpfr \
mycli \
mysql \
nano \
ncurses \
nettle \
nginx \
node \
ocaml \
ocamlbuild \
oniguruma \
openssh \
openssl \
openssl@1.1 \
ossp-uuid \
pcre \
pcre2 \
perl \
phantomjs \
php-version \
php71 \
php71-apcu \
php71-event \
php71-intl \
php71-mcrypt \
php71-pcntl \
php71-redis \
php71-ssh2 \
php71-stats \
php71-swoole \
php71-uuid \
php71-xdebug \
php71-yaml \
pinentry \
pkg-config \
prettyping \
pth \
python \
python3 \
ranger \
readline \
redis \
rsync \
ruby \
safe-rm \
selenium-server-standalone \
speedtest_cli \
sqlite \
tbb \
the_platinum_searcher \
the_silver_searcher \
thefuck \
tig \
tmux \
unixodbc \
unzip \
utf8proc \
vifm \
vim \
vimpager \
watch \
watchman \
webp \
wget \
whois \
x264 \
xvid \
xz \
youtube-dl \
zsh \
zsh-syntax-highlighting \

Multiple .env di Laravel

Multiple .env di Laravel

Singkat cerita saya butuh konfigurasi yang berbeda-beda di tiap sub-domain, tapi dengan menggunakan core aplikasi yang sama. Maksudnya gini, kalau membuat sub-domain, maka ada folder khusus untuk sub-domain. Isi sub-domain ini adalah isi dari folder public. Misalnya begini struktur folder-nya

~/company1.example.com
  company2.example.com
  company3.example.com
  main_app

Nah, lokasi aplikasi utama ada di main_app. Sedangkan company1/2/3 maunya menggunakan core-nya si main_app tapi dengan konfigurasi environment dan database yang berbeda. Gimana caranya? :/

Update bootstrap/app.php

Tambahkan ini sebelum return $app;

if (is_readable(getcwd().'/.env')) {
    $app->useEnvironmentPath( getcwd() );
}

Yup, selesai 😀

Sekarang kalau menuju ke http://company1.example.com, maka akan menggunakan konfigurasi dari company1.example.com/.env

Weits, jangan lupa juga file .env diamankan. Kalau menggunakan Apache HTTPD

<Files ".env">
    Order Allow,Deny
    Deny from all
</Files>

Nginx

location ~ /\.env
{ 
    deny all; 
}

How to use “Laravel facade” outside of Laravel

How to use “Laravel facade” outside of Laravel

I love Laravel facade. With Laravel facade the code be more beautiful and readable than traditional approach. But, what if you don’t use Laravel? How to use the “facade”?

For example, I want to use Laravel “File” facade inside of my application.

First, I need to install illuminate/filesystem via composer.

composer require illuminate/filesystem

Then, just load the composer autoloader and create a new class like this

<?php

require 'vendor/autoload.php';

use Illuminate\Filesystem\Filesystem;

class File
{
    public static function __callStatic($name, $args)
    {
        $self = new Filesystem;

        return $self->{$name}(...$args);
    }
}

Finally, we can use File:: like in Laravel.

File::allFiles('./');

File::get('somefile.txt');

UPDATE 23 Aug 2016 – illuminate/config

For example I have folder structure like this

\ - assets/
  - config/
     \ - database.php
       - site.php
       - mail.php

Inside of database.php, site.php, mail.php just simple array. Example of database.php

<?php

return [
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'test',
];

Here’s the main file to load all configurations.

<?php

require 'vendor/autoload.php';

use Illuminate\Config\Repository;

class Config
{
    protected static $instance;

    public static function __callStatic($method, $args)
    {
        if (! static::$instance) {
            static::$instance = new Repository(
                (new self)->loadConfig('config')
            );
        }

        return static::$instance->{$method}(...$args);
    }

    protected function loadConfig($configPath)
    {
        $items = [];

        foreach(scandir($configPath) as $file) {
            if (substr($file, -4) === '.php') {
                $filename = str_replace('.php', '', $file);
                $items[$filename] = require $configPath . '/' . $file;
            }
        }

        return $items;
    }
}

To get the configuration, just use Config::

Config::get('database.username');             // root
Config::set('database.username', 'newuser');  // Set new value
Config::get('database.username');             // newuser

Config::all();  // All configs

Uncaught SecurityError: Tainted canvases may not be exported

Today, I play with HTML5 canvas to load an image from a URL, then convert it to dataURL. Here a piece of my JavaScript ES6 code

const image = new Image()
const canvas = document.createElement('canvas')
let dataURL

image.onload = () => {
  canvas.getContext('2d').drawImage(image, 0, 0)
  dataURL = canvas.toDataURL()
}

image.src = 'http://placehold.it/300'

But when I run the code, I got this error message

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

That’s happen because of CORS. The solution is so simple. Just add crossOrigin="Anonymous" attribute to HTMLImageElement (image object), like so

const image = new Image()
const canvas = document.createElement('canvas')
let dataURL

image.crossOrigin = 'Anonymous'

image.onload = () => {
  canvas.getContext('2d').drawImage(image, 0, 0)
  dataURL = canvas.toDataURL()
}

image.src = 'http://placehold.it/300'

The problem solved.

References: