author Ahmad Muhardian

Membuat AMP Image Generator dengan Vuejs


P.S: Ini adalah artikel lama tentang bagaimana saya membuat AMP Generator untuk digunakan pada Blogger (Blogspot)

Hari ini saya baru berkenalan dengan Vue.js. Saya sudah mendengar tentang Vue.js dari beberapa teman dan forum. Tapi, saya belum berani untuk mulai mencobanya.

Awalnya saya ingin membuat sebuah alat untuk kebutuhan saya sendiri, yaitu alat yang bisa membuat tag amp-img secara otmatis melalui url gambar. Karena masih banyak artikel di blog ini yang belum disunting dan belum valid AMP.

Pembuatan tag amp-img secara manual terasa sangat melelahkan, karena saya harus menyesuiakan nilai atribut width dan height dengan ukuran gambarnya. Saya kemudian berpikir untuk membuat alatnya agar bisa otomatis.

Mungkin saya bisa menggunakan JQuery atau Javascript murni. Namun, sepertinya JQuery sudah mulai ketingalan zaman dan kalau menggunakan js murni nanti kodenya mungkin akan banyak.

Kemudian saya ingin menggunakan Angularjs, tapi saya belum mendalami Angular. Akhirnya saya mencoba Vuejs.

Vuejs

Instalasi Vuejs

Penggunaan Vuejs seperti JQuery, kita tinggal mengimpor skrip vuejs-nya ke dalam HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>

Logika Program

Sebelum mulai menggunakan Vuejs, saya memikirkan dulu apa yang akan dilakukan program ini.

  1. Paste URL
  2. Ambil lebar dan tinggi dari URL
  3. Ambil nama file gambar untuk teks alternatif
  4. Buat tag amp-img

Itu saja, tinggal Googling dan bikin kodenya. 😄

Declarative Rendering Vuejs

Berdasarkan panduan yang diberikan di dokumentasi Vuejs, saya diberikan contoh kode berikut.

html:

<div id="app">
  {{ message }}
</div>

javascript:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Kode di atas akan menghasilkan output Hello Vue!. Terilhat lebih mudah dari Angular.

Hmm, mungkin nanti saya akan mulai suka dan jatuh cinta dengan Vuejs. 😍

Vue Model

Setelah itu, saya berkenalan dengan Vue Model. Karena sebelumnya saya mencari di Google tentang event onchange di Vue, malah dikasi Vue Model.

Event onchange saya butuhkan agar nanti ketika paste url, langsung dibuat tag amp-img-nya.

Untuk membuat model Vue dari komponen form seperti input, kita tinggal buat atribut v-model.

<input v-model="src" type="text" placeholder="http://example.com/image.jpg" />

Nama model yang saya buat di atas adalah src. Model ini untuk menampung url gambar.

Kemudian untuk mengambil nilai dari model tersebut caranya seperti ini.

<textarea rows="8">
&lt;amp-img
width=""
height=""
alt=""
src="{{ src }}"
layout=""&gt;
&lt;/amp-img&gt;</textarea>

Apapun yang kita ketik pada elemen model akan langsung di-render.

Vue Method

Selanjutnya, karena saya ingin mengambil nilai tinggi dan lebar dari gambar. Saya membutuhkan sebuah fungsi. Karena mungkin di Vue belum ada fungsi tersebut.

var app = new Vue({
  el: '#app',
  data: {
    width: '',
    height: '',
    layout: 'responsive',
    alt: '',
    src: ''
  },
  methods: {
    getImageData: function () {
        var img = new Image();
        img.onload = function(){
            // ambil ukuran gambar
            app.width = this.width
            app.height = this.height
        };
        img.src = this.src;
        console.log(this.src);

        var index = this.src.lastIndexOf("/") + 1;
        var filename = this.src.substr(index);
        this.alt = unescape(filename);
        console.log(filename);
    }
  }
})

Pada kode di atas, saya membuat sebuah fungsi bernama getImageData(). Isi dari fungsi tersebut untuk mengambil tinggi, lebar, dan nama file gambar.

Fungsi ini saya dapatkan dari Stack Overflow. Lalu fungsi ini saya panggil pada event keyup.

<input v-on:keyup="getImageData()" v-model="src" type="text" placeholder="http://example.com/image.jpg" />

Selesai

Semua yang saya butuhkan sudah tercapai.

Programnya bisa berjalan sesuai harapan.

Apakah itu saja?

Ya benar cuma itu saja.

Sebanarnya banyak error yang saya dapatkan, tapi saya tidak ingin menceritakan di sini hehehe 😄.

Dengan penuh percaya diri, saya pun merilisnya ke publik.

Akhir Kata…

Artikel ini bukan tutorial yang dapat anda ikuti. Melaikan hanya untuk berbagi pengalaman saja.

Jika kamu ingin belajar tentang Vuejs dari Nol, silahkan baca tutorialnya di:

Dan jika kamu ingin belajar Vuejs dari buku, kamu bisa membeli buku Vuejs di sini.

Baca Juga ini

4 Cara Menulis Kode Javascript pada HTML yang Wajib Kamu Ketahui

4 Cara Menulis Kode Javascript pada HTML yang Wajib Kamu Ketahui

Baru belajar Javascript? ..dan masih bingung dengan cara menulis Javascript di HTML? Tenang! Saya akan menjelaskannya. Ada 4 cara menulis kode Javascript pada HTML. Dari keempat cara ini, ada yang biasa dan sering digunakan.. ..ada juga yang ‘aneh’, jarang digunakan sih tapi masih work! Apa saja keempat cara itu? Mari kita bahas: googletag.cmd.push(function () { googletag.display('div-gpt-ad-multibanner1'); }); 1. Menulis Javascript pada Tag <script>Penulisan kode Javascript menggunakan tag <script> adalah cara umum yang digunakan.

Cara Menggunakan Plug-in Data Tables untuk Membuat Tabel Dinamis

Cara Menggunakan Plug-in Data Tables untuk Membuat Tabel Dinamis

Data Tables merupakan sebuah plug-in jQuery untuk memanipulasi data dalam tabel HTML. Data Tables memungkinkan kita melakukan membuat tabel dengan fitur pencarian, membuat pagination, menampilkan data sebanyak yang kita mau, mengambil data dari ajax, dsb. 1. Menyisipkan Data TablesPlug-in Data Tables yang saya gunakan pada tulisan ini adalah versi online melalui CDN. Bila anda ingin menggunakan versi offline, silahkan di-download dulu Data Tables-nya di https://datatables.net/download/index.

Menggunakan TinyMCE pada Proyek Web

Menggunakan TinyMCE pada Proyek Web

Pada sebuah proyek yang saya kerjakan, terdapat fitur yang harus menggunakan teks editor untuk menginputkan nilainya. Karena deadline proyek ini begitu cepat. Saya tidak punya banyak waktu untuk membuat teks editor berbasis HTML. Karena itu, cara tercepat ialah menggunakan teks editor yang sudah ada, yaitu TinyMCE. Nah, pada kesempatan ini, saya akan berbagi cara menerapkan TinyMCE dalam Web. 1. Download TinyMCESilahkan men-download TinyMCE pada website resminya: tinymce.

Mengambil Nilai dari Select/Option dengan JQuery

Mengambil Nilai dari Select/Option dengan JQuery

Pada sebuah kasus, kita menggunakan elemen <select> dan <option> sebagai input dalam form. Kita ingin: Setiap opsi yang terpilih akan memberikan data yang berbeda-beda. Misalnya kita punya form seperti ini ini: <form> <select name="package" id="package"> <option>Paket 1</option> <option>Paket 2</option> <option>Paket 3</option> </select> <h4>Anda memilih: <span id="selected"></span></h4> </form> Nah, saat kita memilih Paket, kita ingin mengambil data dari opsi yang dipilih. Kita bisa saja melakukannya seperti ini:

Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman

Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman

Validasi data itu penting! Mengapa? Karena jika kita tidak melakukan validasi, user bisa sembarangan mengisi data dan akibatnya website kita menjadi error. Dampak terburuknya: Website kita bisa diambil alih atau di-hack. Ngeri kan. Karena itu.. Jangan percaya 100% dengan data yang diinputkan user. Bisa saja itu script jahat. Nah, biar terhindar dari kejadian ini.. kita disarankan melakukan validasi sebelum data itu dikirim ke server. Dulu.. validasi data di sisi client dilakukan dengan Javascript.

Mengatasi Malsalah Posisi Titik Tengah Google Maps pada Modal

Mengatasi Malsalah Posisi Titik Tengah Google Maps pada Modal

Saat membuat Google Maps pada Modal di template Admin LTE, ada masalah yang membuat saya bingung. Posisi titik tengah Google maps selalu berada di pojok kiri atas. Meskipun saya sudah set titik tengahnya pada trigger event resize, namun tetap saja posisinya berada di pojok kiri atas. masalah sebelumnya, Google Maps tidak bisa ditampilkan karena di letakkan di dalam modal. Meskipun saya sudah set titik tengahnya pada trigger event 'resize', namun tetap saja posisinya berada di pojok kiri atas.