Belajar Vuejs Dasar dan Membuat aplikasi sederhana amp-img

Belajar Vuejs Dasar dan Membuat aplikasi sederhana amp-img disertai gambar

VUE JS - The Progressive Javascript Framework. Ehe, sudah di tahun 2019 era digital pun semakin lebih canggih. Mengapa VueJs ? Salah satunya, mudahnya dipelajari dan diimplementasikan dalam pembuatan website yang Anda buat.

Form - Sering menjumpai bukan seperti form-input tanpa loading, ada yang menggunakan ajax, javascript murni, jquery. Ya, apalagi dijaman-jamannya gila teknologi, semua orang akan lebih menyukai bagaimana saya mengoperasikannya dengan lebih mudah. Disini penulis akan membuat program sederhana yaitu membuat amp-img dengan sederhana terinspirasi dari Petani Kode

Bahan -
1. LocalHost - Bisa menggunakan xampp/wampp/laragon dll.
2. TextEditor favorit sobat.
3. Koneksi Internet.

Langkah-langkah -
1. Buka text-editor sobat, disini penulis akan membuat inputan text.

Disini nama modelnya adalah src untuk merender dari source-url yang sobat pastekan di inputan diatas.

2. Membuat textarea berguna untuk menampilkan hasil render.

di text area ini nanti akan otomatis render hasil sesuai dari url-gambar yang sobat Pastekan.

3. Membuat Vue Method nya, untuk mengambil width, height, alt, src.

Saat nya untuk menggabungkannya menjadi satu file.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> // jangan lupa untuk memuatkan VueJs.
</head>

<body>
<div id="app">
url gambar : <br>
<input v-on:keyup="getImageData()" v-model="src" type="text" placeholder="https://urlgambar.com/gambar.jpg" />
<br>
Hasil amp-img : <br>
<textarea onclick="this.select()" class="form-control" rows="8" cols="132">
<amp-img
width="{{ width }}"
height="{{ height }}"
alt="{{ alt }}"
src="{{ src }}"
layout="{{ layout }}">
</amp-img>
</textarea>
</div>

<script>
var app = new Vue ({
el: '#app', // Ingat disini kita menggunakan id app
data: {
width: '',
height: '',
layout: '',
alt: '',
src: ''
},
methods: {
getImageData: function () {
var img = new Image();
img.onload = function() {
// mengambil 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);
}
}
})
</script>
</body>
</html>

Keterangan :
1. Coba perhatikan disana input dan textarea diapit oleh div ber-id app. Ya karena, di vue nya kita tuliskan #app bagian el:

2. Perhatikan textarea disini, mengapa di width, height, alt, src terdapat isi {{ width }} dst. ? karena jika kita hanya menggunakan seperti yang kita tuliskan kode disebelumnya maka yang akan dirender hanya src(Source dari url gambar). Dan dikode lengkap kita memuatkan semua.

3. Inputan disini ditambahkan fungsi onkeyup, berguna untuk memanggil fungsi getImageData().

Hasil screenshoot, gambar :