Skip to main content

Latihan Vue TUGAS

 Hai!

Aku lagi disuruh ngerjain tugas nih,
tugas 1 yaitu membuat lifecycle hooks Vue
tugas 2 yaitu buat template sederhana yang menggabungkan template property, data raw dan data attribute
tugas 3 yaitu buat simulasi kalkulator sederhana menggunakan vue.
tanpa basa basi langsung go!



Lifecycle hooks Vue itu ada hook create, mount, update, dan destroy

CREATE:
Buatlah sebuah file kasih nama apa aja , kalo aku kasih nama file nya "create.html"
lalu isikan dengan script dibawah ini.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Create</title>
    <script src="lib/vue.js"></script>
</head>
<body>
   <div id="sandy">
       <h1>{{ pesan }}</h1>
   </div> 
   <script type="text/javascript">
   var vm = new Vue({
        el:'#sandy',
        data:{
            pesan: 'hello namaku sandy'
        },
        beforeCreate() {
            console.log('before create: '+
            'message = ' + this.pesan)
        },
        created(){
            console.log('created :' + 
            'message = ' + this.pesan)
        },

   })
   </script>
</body>
</html>

Bila sudah coba jalankan di browser dan masuk ke inspect hasilnya akan seperti ini



Penjelasan :
pada console akan langsung muncul "before create: message = undefined" lalu dilanjutkan dengan "created :message = hello namaku sandy" berarti hook created berhasil mengakses variable "pesan".

UPDATE:
Buatlah file bernama "update.html" lalu isikan dengan script dibawah ini.
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belajar Vue</title>
    <script src="lib/vue.js"></script>
</head>
<body>
   <div id="sandy">
       <h1>{{ pesan }}</h1>
   </div> 
   <script type="text/javascript">
   var vm = new Vue({
        el:'#sandy',
        data:{
            pesan: 'hello namaku sandy'
        },
        beforeUpdate() {
            console.log('before update: '+
            'el = ' + this.$el.textContent)
        },
        updated(){
            console.log('updated :' + 
            'el = ' + this.$el.textContent)
        },

   })
   vm.pesan='aku bukan sandy'
   </script>
</body>
</html>

coba cek pada browser masuk ke inspect ini hasil sebelum dan sesudah

sebelum


sesudah


Penjelasan:
Didalam codingan diatas aku menggunakan function TextContent dari javascript, function ini berfungsi untuk menampilkan konten teks pada el tersebut dan alhasil isi di dalam el berubah di ganti dengan isi yang berada pada vm.pesan.

MOUNT:
Buatlah file bernamakan "mount.html" lalu isikan dengan script dibawah ini.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mount</title>
    <script src="lib/vue.js"></script>
</head>
<body>
   <div id="sandy">
       <h1>{{ pesan }}</h1>
   </div> 
   <script type="text/javascript">
   var vm = new Vue({
        el:'#sandy',
        data:{
            pesan: 'hello namaku sandy'
        },
        beforeMount() {
            console.log('before mount: '+
            'el = ' + this.$el.textContent)
        },
        mounted(){
            console.log('mounted :' + 
            'el = ' + this.$el.textContent)
        },

   })
   </script>
</body>
</html>

coba cek pada browser dan buka inspect hasilnya ini.



Penjelasan:

pada "before mount" maupun "mounted" telah berhasil hook namun perbedaannya terdapat pada sebelum dan sesudah render, pada "before mount" terlihat belum dirender dan menghasilkan isi dari code sedangkan pada "mounted" setelah proses "before mount" hasil hook berubah karena el telah berhasil didapatkan.

DESTROY:
Buatlah file bernamakan "destroy.html" lalu masukkan script dibawah ini.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Destroy</title>
    <script src="lib/vue.js"></script>
</head>
<body>
   <div id="sandy">
       <h1>{{ pesan }}</h1>
   </div> 
   <script type="text/javascript">
   var vm = new Vue({
        el:'#sandy',
        data:{
            pesan: 'hello namaku sandy'
        },
        beforeDestroy() {
            console.log('before destroy')
        },
        destroyed(){
            console.log('destroyed')
        },

   })
   vm.$destroy()
   </script>
</body>
</html>

coba cek pada browser lalu masuk inspect




hasilnya

 Selesai

Selanjutnya tugas no.2 ada template property, data raw, dan template attribute
buatlah file dan masukkan script dibawah ini,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Template, Data Raw dan Attribute</title>
    <script src="lib/vue.js"></script>
    <style>
      .randoom{
  color: bisque;
      }
    </style>
  </head>
  <body>
    <div id="random"></div>
    <script type="text/javascript">
      var tgs = new Vue({
        el: '#random',
        data: {
          pesan: "<span style='color: blue;'>namaku sandy</span>",
          class_h1 : 'randoom',
          pesan2: 'tapi boong hiyahiya'
        },
        template:
          '<div v-bind:class="class_h1"><h1 v-html="pesan"></h1><br/><h2>{{ pesan2 }}</h2></div>'
      });
    </script>
  </body>
</html>

cek hasilnya di browser.



Hasilnya seperti diatas

Penjelasan :
codingan diatas terdapat 3 unsur yang disuruh barusan
1. terdapat v-bind = data attribute
2. terdapat v-html = data raw

bila kita tidak menggunakan v-html maka hasilnya akan seperti ini



lalu kita tambahkan v-html


Maka hasilnya akan seperti gambar sebelumnya.

v-html ini berperan untuk merender sebuah codingan html mentah.

3. terdapat sebuah template di dalam codingan diatas itu berfungsi untuk memasukkan html kedalam code vue kerennya lagi kita bisa memasukkan codingan html apa saja kedalamnya.
template:
          '<div v-bind:class="class_h1"><h1 v-html="pesan"></h1><br/><h2>{{ pesan2 }}</h2></div>'


Lanjut ke tugas no.3 yaitu membuat sebuah kalkulator sederhana menggunakan vue.js

1. buatlah sebuah file bernama calculator.html
2. masukkan script dibawah ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> Kalkulator</title>
    <script src="lib/vue.js"></script>
  </head>
  <body>
    <div id="calculator">
    Angka: <input type="text" v-model="kotak1" /><br />
    Angka: <input type="text" v-model="kotak2" /><br />
      <input type="submit" name="tambah" onclick="operator.tambah()" value="+" />
      <input type="submit" name="kurang" onclick="operator.kurang()" value="-" />
      <input type="submit" name="kali" onclick="operator.kali()" value="*" />
      <input type="submit" name="bagi" onclick="operator.bagi()" value="/" />
      <br />
      hasilnya adalah : {{ hasil }}
    </div>
  </body>
  <script type="text/javascript">
    var operator = new Vue({
      el: '#calculator',
      data: {
        kotak1: '',
        kotak2: '',
        hasil: ''
      },
      methods: {
        tambah() {
          return (this.hasil = parseInt(this.kotak1) + parseInt(this.kotak2));
        },
        kurang() {
          return (this.hasil = parseInt(this.kotak1) - parseInt(this.kotak2));
        },
        kali() {
          return (this.hasil = parseInt(this.kotak1) * parseInt(this.kotak2));
        },
        bagi() {
          return (this.hasil = parseInt(this.kotak1) / parseInt(this.kotak2));
        }
      }
    });
  </script>
</html>

3.cek di browser



4. isikan kotak kosong tersebut tes 1 per 1 operatornya
sebagai contoh ini adalah hasil pengurangan dari 2 di kurang 2




Selesai

Penjelasan:

Kodingan diatas terdapat "v-model="kotak1"" , v-model ini menggantikan peran "name" agar dapat diproses karena jika kita menggunakan "name" hasil dari operasi kalkulator diatas akan "NaN",  lalu  terdapat fungsi on-click yang dimana akan menjalankan sebuah methods yang ditentukan.

Lalu ada methods yang isinya adalah sebuah operator kalkulator sederhana tambah, kurang, kali, dan bagi di setiap method nya di isikan operasi penjumlahan, pengurangan, perkalian, dan pembagian.

Selesai

Aku harap blog aku ini memberikan manfaat bagi kalian :)

Comments

Post a Comment

Popular posts from this blog

CodeIgniter Tutor - mengubah ukuran upload

Halo disini aku langsung cepet aja ya karena simple tutorialnya pertama Bukalah file grocery_crud.php dari application/config . Ganti baris: $config['grocery_crud_file_upload_max_file_size'] = '20MB'; Menjadi $config['grocery_crud_file_upload_max_file_size'] = '200MB'; Maka kalian telah berhasil melakukan perubahan upload size. Jangan lupa save ya. selanjutnya buka XAMPP. Cari php.ini dan klik php.ini Pada file PHP.ini cari upload_max_filesize ubah ukuran sesuai dengan keinginan. Jangan lupa save ya selesai :D
Post a Comment
Read more

CodeIgniter Tutor #3 upload audio

Halo, tutorial kali ini aku akan berfokus untuk menyimpan file file seperti audio video namun tutorial ini akan ke audio dulu ya, jadi ,... Let's check this out :D Langkah awal buatlah databasenya terlebih dahulu seperti ini : Sesudah ini kalian jangan dulu lanjutin, ini aku ada tutorial agar terlihat lebih menarik hehe 1. menghilangkan index.php pada url kamu klik 2. mengubah bahasa klik nah ayo lanjut... Setelah database audionya di buat dengan nama table "tb_audio" , masuk ke folder base_url/assets/uploads , buatlah sebuah folder dengan nama "audio". Setelah dibuat, kalian bukalah file Main.php didalam folder "controller" lalu ubah strukturnya dengan menambahkan script ini : -----  $crud->set_subject('File Suara');  $crud->set_field_upload('FILECONTENT','assets/uploads/audio'); ----- before : after : selanjutnya coba panggil "localhost/base_...
Post a Comment
Read more

WEB SERVICE - TUTORIAL PHP LUMEN SERVICE APP

Halo, untuk kali ini aku akan ngeposting tentang web service yaitu tentang Lumen, disini aku akan tutorial membuat instalasi Lumen Service App ya, langsung aja , Let's Gooo Untuk menginstall Lumen ini aku pakai cmd untuk menginstallnya, tapi sebelum menginstallnya kita butuh php berjalan di cmd, bagaimana caranya? silahkan kunjungi link ini Oh iya tutorial ini dibutuhkan juga php version 7.0.0 keatas bila php kalian version nya dibawah ini segera update dulu php nya download saja xampp terbaru. xampp link Nah saatnya menginstall , pertama-tama kita harus download dulu "composer" disini  https://getcomposer.org/doc/00-intro.md Setelah di download install composernya, jika sudah berikut dibawah adalah konfigurasi nya 1. Buka CMD dan ketik composer --v untuk mengecek apakah sudah terinstall atau belum. 2. ketik perintah ini : create-project --prefer-dist laravel/lumen [NAMA_PROJECT] untuk nama_project ini bisa di ganti sesuai nama folder yang di in...
Post a Comment
Read more