AdityaDees

Kamu pasti tahu apa itu facebook, twiter, kaskus , gojek, mesin harga di alfamart ataupun aplikasi -aplikasi game yang kamu mainkan. nah bagaimana cara membuat itu semua? jawaban sederhananya adalah dengan menggunakan bahasa pemograman.

Bahasa pemograman banyak sekali, entah itu bahasa yang digunakan untuk membuat program - program komputer , mobile ataupun perangkat mesin. Bahasa pemograman akan menerjemahkan baris - baris instruksi yang di buat programan menjadi bahasa yang di mengerti oleh mesin.

Untuk lebih jelasnya. dalam artikel singkat ini kita akan membahas apa itu bahasa pemograman dan beberapa macam bahasa pemograman dan contohnya.

Pengertian Bahasa Pemprograman

Bahasa pemograman adalah bahasa yang dapat menerjemahkan perintah - perintah yang diberikan pengguna menjadi bahasa yang dapat di pahami dan di jalankan mesin komputer. seperti diketahui komputer hanya mengerti intruksi dalam bentuk biner ( bit bit bernilai 0 atau 1 ).

contoh dari program yang di hasilkan dari bahasa komputer misalnya aplikasi kasir, aplikasi - aplikasi android, situs - situs website seperti bukalapak, tokopedia dan sebagainya.

Jumlah bahasa pemograman sangat banyak dan diantara bahasa pemograman yang terkenal adalah bahasa Java, C, C++ , PHP , phyton , basic , Cobol dll.

Tingkatan Bahasa Pemograman ini dapat dibagi menjadi 3 kategori antara lain

1. Bahasa Tingkat Tinggi 

Bahasa pemograman tingkat tinggi ini mempunyai ciri yang mudah di mengerti oleh siapa saja , karena memiliki kedekatan terhadap bahasa sehari -hari. Suatu pernyataan dari program akan diterjemahkan pada sebuah atau juga beberapa mesin menggunakan compiler.

Adapun contoh dari bahasa tingkat tinggi ini adalah basic, C++, C, Cobol , pascal. Fortran , Java , Net dll.

2. Bahasa Tingkat menengah 

Bahasa tingkat menengah, disebut demikian , karena jenis bahasa ini tidak dapat masuk dalam jenis bahasa tingkat tinggi atau tingkat rendah. Adapun contoh dari bahasa tingkat menengah ini adalah bahsa C.

3. Bahasa Tingkat Rendah 

Janis bahasa tingkat rendah atau low level language ini adalah bahasa pemograman yang lebih ditujukan pada mesin. Maksudnya adalah karena jenis bahasa ini lebih dekat dengan bahasa mesin dibandingkan dengan bahasa manusia . Contoh dari bahasa tingkat rendah ini adalah bahasa assembly.

kenapa bahasa pemograman ini sangat sulit.

• Materi yang satu ini sulit dipelajari, seorang programmer harus mengerti barbagai seluk beluk perangkat keras yang digunakan.
• Bahasa assembly yang digunakan untuk satu jenis mikroprosesor dengan lainnya tentunya jauh berbeda, karena belum ada standarisasinya. Adapun contoh untuk bahasa assembly yang biasanya digunakan untuk mikroprosesor ini adalah intel 8088

Macam - macam Bahasa Pemograman 

Jenis atau macam - macam bahasa pemograman yang ada saat ini memang cukup banyak, hal ini tentunya berkaitan dengan fungsi dari bahasa tersebut. berikut ini adalah beberapa bahasa pemograman yang banyak digunakan, antara lain :

• Assembly Language
• Basic
• C
• C++
• Cobol
• Delphi
• Erlang
• Elixir
• Fortran
• Golo
• Java
• Kotlin
• Lisp
• LFE
• Pascal
• PHP
• Python
• Ruby
• Swift
• Snobol
• Strach
• Spark
• Tynker
• Visual Foxpro
• Visual Basic
• Visual Basic net

1. Bahasa C

Bahasa C ini dapat dikategorikan sebagai bahasa induk dari berbagai macam bahasa pemograman lainnya. Bahasa pemograman yang satu ini sudah dikembankan sejak tahun 70 - an, ini yang membuat bahasa yang satu ini sebagai bahasa pemograman tertua.

Walau saat ini bahasa yang satu ini sudah jarang di gunakan , namun bahasa yang satu ini menjadi acuan bagi pembentukan bahasa pemograman lainnya, antara lain bahasa C++,C#, dll

Saat ini bahasa C biasanya digunakan sebagai media pembelajaran untuk para siswa dalam mengembangkan sebuah software.

2. Java

ini adalah salah satu jenis bahasa yang umum di temukan dimana saja, baik di komputer, ponsel pintar, dll. Ada banyak sekali keunggulan dari Java ini, antara lain sifatnya yang multi plaform, yang artinya, bahasa ini dapat digunakan untuk berbagai macam sistem operasi dan basis software yang lain.

Keunggulan lain dari bahasa Java ini adalah mudah dikembangkan, mudah dalam menyusun scrip, dll.

3. PHP

Ini adalah salah satu bahasa pemrograman yang tidak kalah populer di kalangan pengembang dan juga developer di situs -situs internet. PHP ini sendiri adalah singkatan dari Hypertext Pre-Processor dimana ini adalah salah satu bahasa yang biasanya di gunakan untuk mengembangkan sebuah situs yang ada di dalam jaringan internet.

yang artinya, ketika anda akan membuat sebuah situs, maka anda akan membutuhkan bahasa pemograman yang satu ini, untuk mengintegrasikan managemen data base yang ada. keunggulan menggunakan bahasa yang satu ini antara lain bahasa pemograman yang sifatnya gratis, dapat membuat dan mengembangkan website secara dinamis, berkat adanya fitur server side scripting, dll.

4..Basic 

Ini adalah salah satu bahasa pemograman yang dikembangkan oleh raksasa teknologi yang ada, yaitu Microsoft. Ini adalah sebuah bahasa pemograman yang dapat digunakan untuk membuat aplikasi, yang berjalan menggunakan operasi windows Fitur - fitur yang ada dalam VB atau visual Basic ini cukup beragam, dan termasuk salah satu bahasa pemrogaman yang cukup terkenal.

Bahasa pemrograman ini biasanya digunakan untuk mengembangkan software yang sederhana seperti program absensi, kalkulator, program akutansi, dll.

5. Python 

Nama bahasa pemrograman yang satu ini memang sama dengan salah satu jenis olah predator yang terkenal ganas. Bahasa pemrograman yang digunakan cenderung sederhana, dan juga mudah dipahami. Python termasuk bahasa yang multifungsi, karena dapat mengembangkan sebuah aplikasi dan juga software.

Termasuk bahasa pemrograman tingkat tinggi, yang artinya bahasa yang satu ini dapat manusia membaca program yang ini, bahasa yang satu ini biasanya digunakan untuk membuat berbagai macam aplikasi, software, dll.

6. JavaScript

Bahasa Java Script ini berbeda dengan bahasa Java. dimana Java vokus pada pengembangan software dan juga aplikasi berbasis OS dan juga Non OS. Sedangkan JavaScrip lebih memfokuskan diri pada bahasa pemrograman yang biasanya digunakan untuk mengembangkan website.

Cukup banyak website yang dikembangkan dengan JavaScrip sebagai bahasa Pemrograman utamanya.

Keunggulan menggunakan bahasa yang satu ini, adalah mampu mengembangkan sebuah situs, juga website, dengan penampilan visual yang interaktif dan juga menarik

DOM selector with document.querySelector(selectors)

As the name already suggests, this method under the Document object fetch the first element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned. One important thing that we need to know here is that, using this method will return "null" value when no matches were found. For those who familiar with jQuery need to pay attention as the jQuery selector always returns empty Array when no matches were found. Below I show you some example.

<!doctype html>
<html><head><title>Query Selector in JavaScript</title><meta charset="UTF-8"></head>
<body>
<div>This is the first DIV</div>
<div>This is the second DIV</div>
<div>This is the third DIV</div>
<div>This is the fourth DIV</div>
<div>This is the fifth DIV</div>
<script>
    // get the first DIV
    let firstDiv = document.querySelector('div');
    console.log('This is ', firstDiv);

    // get the second DIV
    let secondDiv = document.querySelector('div:nth-of-type(2)');
    console.log('This is the ', secondDiv);
    // change the text color to blue
    secondDiv.style.color = 'blue';

    // get the third DIV
    let thirdDiv = document.querySelector('div:nth-of-type(3)');
    console.log('This is the ', thirdDiv);
    // change the text format to bold
    thirdDiv.style.fontWeight = 'bold';

    // check if element exists
    let sixthDiv = document.querySelector('div:nth-of-type(6)');
    if (sixthDiv == null) {
        // add the sixth div if it is not exists yet
        let newDiv = document.createElement("div")
        newDiv.innerText = 'This is the sixth DIV';
        document.body.append(newDiv);
    }   
</script>
</body>
</html>

Tree traversal

querySelector method accepts all type of CSS selector and can be used to do DOM element tree traversal. In fact I already showed one of it the first example using nth-of-type(n) modifier. You can of course use parent children relationship selector also in this case.

<!doctype html>
<html><head><title>Query Selector in JavaScript</title><meta charset="UTF-8"></head>
<body>
<div id="parent">
  <div class="child">
    <div class="grandchild">
      <div class="great_grandchild"></div>
    </div>
  </div>
  <div class="child">
    <div class="grandchild"></div>
  </div>
</div>
<script>
    /* TREE TRAVERSAL */
    // get the first direct child under parent
    let firstChild = document.querySelector('#parent > .child');
    console.log('This is the ', firstChild); 
    
    // get the great grandchild under parent
    let greatGrandChild = document.querySelector('#parent .great_grandchild');
    console.log('This is the ', greatGrandChild);

    // alternative syntax to get the great grandchild
    greatGrandChild = firstChild.querySelector('.great_grandchild');
    console.log('This is the ', greatGrandChild);

    // add new first child under parent
    let newFirstChild = document.createElement("div");
    newFirstChild.innerText = 'The real 1st child';
    document.querySelector('#parent').prepend(newFirstChild);

    // get the parent of great grandchild
    let parentOfGrandChild = greatGrandChild.parentNode;
    console.log(parentOfGrandChild);
</script>
</body>
</html>

Multiple DOM element matches and manipulation with querySelectorAll

The querySelectorAll method behaves almost similar with the querySelector, except that it returns not only single match but an array in form of NodeList object instead. You can use this if you want to manipulate more than one element that match with your specified selector. Just remember to add :scope pseudo class at the very first of selector string to make sure the browser only get the child element under the specified element.

<!doctype html>
<html><head><title>Query Selector in JavaScript</title><meta charset="UTF-8"></head>
<body>
<ul id="bio">
    <li class="name">The first one</li>
    <li class="location">Tsukuba, Japan</li>

    <li class="name">The second one</li>
    <li class="location">Tokyo, Japan</li>

    <li class="name">The third one</li>
    <li class="location">Jakarta, Indonesia</li>

    <li class="name">The fourth one</li>
    <li class="location">Seoul, South Korea</li>

    <li class="name">The fifth one</li>
    <li class="location">Wuhan, China</li>
</ul>
<script>
    /* querySelectorAll */
    // get all names
    let names = document.querySelectorAll(':scope #bio .name');
    console.log('Number of names ', names.length);
    console.log('The elements are ', names);

    // get all locations
    let locations = document.querySelectorAll(':scope #bio .location');
    console.log('The elements are ', locations);

    // make all location texts italic
    locations.forEach(e => e.style.fontStyle = 'italic');

    // prepend "name" text inside name element
    names.forEach(e => e.prepend('Name: '));

    // add empty list element with bottom border after location
    // as a data separator
    locations.forEach(function(e){
        let borderedList = document.createElement('li');
        borderedList.style.borderBottom = '1px solid #999';
        e.after(borderedList);
    }); 
</script>
</body>
</html>

Pretty neat huh? :D

Sibling manipulation with previousElementSibling and nextElementSibling

It is very often we want to manipulate DOM elements which are positioned on the same level as current selected element, or the siblings of current element. In this case we can use the previousElementSibling and nextElementSibling property.

<!doctype html>
<html><head><title>Query Selector in JavaScript</title><meta charset="UTF-8"></head>
<body>
<div id="friends">
    <div class="friend">Harada</div>
    <div class="friend">Sasaki</div>
    <div class="friend">Iqbal</div>
    <div class="friend">Michael</div>
    <div class="friend">Megumi</div>
</div>
<script>
    /* SIBLINGS */
    // get iqbal
    let iqbal = document.querySelector('#friends .friend:nth-of-type(3)');
    console.log(iqbal);

    // who is our friend before iqbal
    let beforeIqbal = iqbal.previousElementSibling;
    // change the color to orange
    beforeIqbal.style.color = 'orange';

    // who is our friend after iqbal
    let afterIqbal = iqbal.nextElementSibling;
    // change the color to purple
    afterIqbal.style.color = 'purple';</script>
</body>
</html>

Javascript saat ini semakin populer digunakan dalam pengembangan aplikasi berbasis web baik di sisi client (browser) maupun server, yang semakin diperkuat dengan munculnya standar-standar ECMAScript terbaru seperti ECMAScript6 (ES6) atau biasa disebut juga ECMAScript 2015 (ES2015). Untuk lebih lengkapnya mengenai ES6 ini silahkan baca halaman web penjelasan dari Luke Hoban yang sangat bermanfaat ini. Sejarahnya dulu saya ingat Javascript ini adalah bahasa pemrograman client-side yang paling menyebalkan karena perbedaan standar setiap browser, aplikasi web kita berjalan lancar di Interner Explorer 5 atau 6, pas dijalankan dengan Mozilla, Netscape atau Firefox tidak jalan sama sekali dan juga berlaku sebaliknya, Mikocok ehhh maksud saya Microsoft cenderung membuat implementasi mereka sendiri. Seiring dengan semakin maraknya penggunaan aplikasi berbasis web, Javascript semakin banyak digunakan untuk membuat aplikasi web yang responsif dan "reaktif". Istilah "Reaktif" sedang "in" dalam pengembangan web saat ini, yang merujuk kepada kemampuan untuk "mereaktifkan" elemen DOM (Document Object Model)/tag HTML sehingga ketika diubah nilainya pada kode Javascript, maka secara otomatis tag HTML tersebut juga akan berubah, begitu juga sebaliknya apabila kita melalukan perubahan di sisi HTML, maka perubahan tersebut akan terefleksi pada kode Javascript. Beberapa framework/library Javascript yang memungkinkan kita membangun aplikasi web yang reaktif ini antara lain: AngularJS (bukan Angular), Backbone.js, Ember, React, Riot, Polymer, dan yang akan kita bahas kali ini adalah Vue.js yang menyatakan dirinya sebagai "The Progressive JavaScript Framework" (kayanya semua framework menyatakan diri mereka paling hebat dibandingkan dengan framework lain 😬).

Reaktifitas

Untuk melihat contoh "reaktifitas" dengan Vue, silahkan buat sebuah file HTML bernama index.html dan masukkan kode berikut:

index.html

<!doctype html>
<html lang="id">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <script src="assets/js/vue.min.js"></script>
  <title>Contoh Reaktifitas</title>
</head>
<body>
  <div id="spa">
    <div class="jumbotron jumbotron-fluid p-3">
      <h1 class="display-4 text-center">{{ teks_yang_reaktif?teks_yang_reaktif:'Hmmmm...' }}</h1>
      <hr class="my-4"/>
      <p class="lead text-center"><input type="text" class="form-control" v-model="teks_yang_reaktif"/></p>
    </div>
  <script>
  var spa = new Vue({
    el: '#spa',
    data: {
      teks_yang_reaktif: 'Sebuah Teks yang Reaktif!'
    }
  })
  </script>
</body>
</html>

Buka file index.html ini pada browser dan kita akan melihat seperti berikut ini:

Single Page Application

Dengan munculnya library/framework reaktif seperti Vue.js ini mendorong model pengembangan aplikasi berbasis web "Single Page Application (SPA)", dimana semua "view" atau tampilan antar muka dibangun dengan hanya menggunakan sebuah file HTML yang kemudian akan me-load view komponen/modul lain dengan meng-injeksi (atau istilah kerennya: render) secara dinamis dengan Javascript. Dengan model SPA ini maka aplikasi di sisi server tidak lagi harus mengirimkan respon balik halaman HTML full, cukup data saja dalam format JSON (menggunakan AJAX) misalnya yang kemudian akan direaktifkan oleh Vue, setiap perubahan di sisi klien akan memicu perubahan pada server, begitu juga sebaliknya dan pada akhirnya komunikasi data antara client dengan server berlangsung lebih cepat karena ukuran data yang kecil. Kita lihat contoh sederhana dengan menggunakan Vue berikut ini:

index.html

<!doctype html>
<html lang="id">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <script src="assets/js/vue.min.js"></script>
  <script src="assets/js/vue-router.min.js"></script>
  <title>Single Page Application Vue.js</title>
</head>
<body>
  <div id="spa"><!-- elemen root/utama dari SPA Vue -->
    <!--  Navigasi utama aplikasi SPA
          perhatikan tag "router-link" adalah tag khusus untuk membuat hyperlink ke router Vue -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <router-link class="navbar-brand" to="/">SPA Vue.js</router-link>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigasi" 
        aria-controls="navigasi" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <div class="collapse navbar-collapse" id="navigasi">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <router-link class="nav-link" to="/">Home</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/berita">Berita</router-link>
          </li>
        </ul>
      </div>
    </nav>

    <!-- link dari "router-link" di atas akan merender view masing2 di dalam tag "router-view" -->
    <div id="main-content">
      <router-view></router-view>
    </div>
  </div>

  <!-- template view untuk komponen "Home" -->
  <script type="text/x-template" id="home">
    <div class="jumbotron jumbotron-fluid"><h1 class="display-4 text-center">{{ judul }}</h1>
      <hr class="my-4"/>
    <p class="lead text-center">{{ konten }}</p>
  </script>

  <!-- template view untuk komponen "Berita" -->
  <script type="text/x-template" id="berita">
    <div>
      <p class="p-1"><input type="text" class="form-control" v-model="keywords" 
        v-on:keyup="search"
        placeholder="Masukkan kata kunci pencarian"></p>
      <div v-if="berita_filtered.length>0">
        <div class="berita p-2" v-for="b in berita_filtered">
          <p class="h4">{{ b.judul }}</p>
          <p class="lead">{{ b.konten }}</p>
          <hr/>
        </div>
      </div>
      <div v-else>
        <div class="berita p-2" v-for="b in berita">
          <p class="h4">{{ b.judul }}</p>
          <p class="lead">{{ b.konten }}</p>
          <hr/>
        </div>
      </div>
    </div>
  </script>

  <!-- kode javascript untuk menjalankan Vue.js -->
  <script src="assets/js/app.js"></script>
</body>
</html>

assets/js/app.js

// 1. Definisikan komponen Vue
// Komponen "Home" akan menampilkan halaman depan aplikasi
const Home = Vue.extend({ 
  template: '#home',
  data: function() {
    return {
      judul: 'Selamat datang di Single Page Application',
      konten: 'Vue.js memungkinkan developer web membangun aplikasi web yang dinamis, ringan dan cepat.'
    }
  }
});
// Komponen "Berita" akan menampilkan daftar berita
var data_berita = {
  keywords: '',
  berita: [
    {judul: 'Lorem Ipsum', konten: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat, eros quis semper dignissim, libero erat semper ante, non porttitor sem metus a neque.'},
    {judul: 'In Vehicula Vulputate', konten: 'In vehicula vulputate eros vitae porttitor. Praesent commodo accumsan semper. Proin eu tellus purus, eu malesuada sapien.'},
    {judul: 'Aliquam Laoreet Gravida Erat', konten: 'Aliquam laoreet gravida erat, in hendrerit arcu lobortis id. Cras libero augue, aliquam nec sollicitudin id, molestie eu ante.'},
    {judul: 'Donec Adipiscing', konten: 'Donec adipiscing, diam eget tempor volutpat, odio justo molestie dolor, vitae sodales felis risus a mi.'},
    {judul: 'Praesent Mollis', konten: 'Praesent mollis placerat mi ut accumsan. Vivamus ultricies lobortis risus, quis venenatis ligula elementum id.'},
  ],
  berita_filtered: []
};
const Berita = Vue.extend({
  template: '#berita',
  data: function() {
    return data_berita;
  },
  methods: {
    search: function() {
      var katakunci = new RegExp(this.keywords, 'ig');
      if (this.keywords.length > 2) {
        this.berita_filtered = this.berita.filter(el => el.judul.search(katakunci)>-1);
      } else {
        this.berita_filtered = [];
      }
    }
  }
});

// 2. Definisikan routing menuju komponen
const routes = [
  { path: '/', component: Home},
  { path: '/berita', component: Berita }
]

// 3. Buat instance Router Vue
const router = new VueRouter({ routes })

// 4. Tempelkan instance "router" ke App Vue
const spa = new Vue({ router }).$mount('#spa');

Saya akan coba jelaskan beberapa poin penting yang perlu kita perhatikan disini, terutama bagi teman-teman yang baru mengenal Vue:

1. Untuk contoh SPA ini saya menggunakan juga framework Bootstrap versi 4.0, jadi pastikan bahwa Anda juga sudah mengunduh dan menginstall Bootstrap. Pada tulisan ini semua file CSS saya letakkan pada direktori assets/css/ dan semua file Javascript saya letakkan pada direktori assets/js/;


2. Untuk menggunakan Vue, kita harus sudah meng-include library Javascript Vue pada bagian head file HTML. Karena kita membangun antar muka SPA, maka kita juga memerlukan Vue Router yang bertugas melakukan routing komponen ke view-nya masing-masing. Unduh library Vue.js di sini dan Vue Router di sini. Atau apabila Anda adalah tipe pemalas download library Javascript gunakan versi CDN masing-masing hehehe;


3. Perhatikan terdapat custom tag <router-link class="nav-link" to="/">Home</router-link> yang secara otomatis akan dikenali oleh Vue Router dan akan diubah ke tag A sebagai hyperlink menuju route yang ditunjuk oleh atribut "to". Semua hyperlink yang menuju ke route Vue harus menggunakan custom tag ini;


4. Custom tag <router-view></router-view> berfungsi sebagai tempat penampung (placeholder) dari view untuk masing-masing komponen route;


5. View atau tampilan untuk masing-masing komponen kita definisikan dengan menggunakan tag <script type="text/x-template" id="berita">. X-Templates adalah salah satu jenis template yang didukung oleh Vue, dan menurut saya yang paling aman dan mudah untuk digunakan untuk kebutuhan aplikasi skala kecil hingga menengah;


6. Kode dalam bentuk seperti {{ judul }}, {{ konten }} disebut juga sebagai Mustache yang merupakan placeholder untuk data.
   moustache akan otomatis digantikan oleh Vue dengan data yang kita tetapkan pada komponen dan data tersebut sudah bersifat reaktif.


7. Vue juga memiliki atribut directive, yang kita gunakan pada contoh ini antara lain adalah v-bind, v-if, v-else, v-for, v-model dan v-on. v-model kita gunakan untuk mereaktifkan sebuah tag HTML dengan model data yang kita definisikan pada Vue/komponen, v-if dan v-else memungkinkan kita me-load bagian dari view dengan kondisi tertentu, v-for memungkinkan kita untuk melakukan pengulangan/loop pada view dan sangat berguna untuk menampilkan data dalam bentuk Array atau Object Javascript dan v-on kita gunakan untuk mengaitkan suatu tag HTML dengan "method" yang kita definisikan di dalam kode Javascript Vue;


8. Semua kode Javascript untuk menjalankan Vue diletakkan pada file assets/js/app.js dan diletakkan pada bagian paling bawah kode HTML;


9. Variabel objek data_berita pada kode Javascript Vue bersifat static (tidak dinamis), pada aplikasi SPA yang sesungguhnya data berita ini akan diambil melalui AJAX ke database pada aplikasi di sisi server;


10. Untuk membuat komponen (dalam terminologi aplikasi web MVC tradisional kita bisa anggap komponen merupakan sebuah controller sekaligus model), kita menggunakan sintak Vue.extend({});


11. Setiap komponen merupakan objek Javascript yang biasanya memiliki property template, data, methods dan/atau computed;


12. Aplikasi Vue dijalankan dengan membuat instance melalui konstruktor Vue yaitu const spa = new Vue({}). Setelah itu objek spa bisa diakses oleh komponen melalui methods.

Apabila file index.html kita jalankan melalui browser maka kita akan melihat aplikasi kita seperti berikut ini:

Kita bisa lihat bahwa perpindahan antara satu halaman ke halaman lain dilakukan dengan sangat cepat karena tidak membutuhkan request HTTP kembali ke server. Semua proses pengolahan/rendering tampilan antar muka dilakukan di sisi client oleh Vue, request HTTP hanya dibutuhkan untuk komunikasi data dalam format JSON atau plain-text lainnya, bukan untuk kode HTML yang membuat aplikasi menjadi lebih cepat layaknya aplikasi desktop. Pada tulisan bagian 2 kita akan melihat contoh yang sedikit lebih kompleks dengan melibatkan form isian data. Selamat mencoba!