Categories
VueJS

Cara Install Vue CLI (Command Line Interface)

Hallo coder πŸ˜ƒ,vue membuat vue cli (command line interface) yaitu tools sederhana untuk scaffolding proyek aplikasi berbasi vue. terkadang kita rumit mengaturan javascript bundler dan semua tools terkait.

vue membuat tools untuk memudahkan kita untuk melakukan semua itu.

pada saat ini vue cli telah mencapai versi 3.x di vue cli 3 kita disediakan user interface berbasis web untuk membuat project. didalamnya terdapat banyak plugin yang bisa kita pakai.

Beberapa plugins yang disediakan antara lain: Typescript, PWA, Vuex, Vue Router, ESLint, unit testing dll.

Install Vue CLI

Sebelumnya anda buat dulu folder vue-project setelah itu masuk ke folder itu lewat terminal, sekarang coba anda ketikan seperti berikut di terminal anda.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Tunggu sampa instalasi selesai, ini akan memakan waktu lama, pastikan anda tersambung internet.

setelah instalasi selesai coba ketikan seperti berikut di terminal yang tadi. untuk mengcek versi.

vue --version

nanti akan muncul versi vue cli yang kamu install.

Membuat Project

Sekarang kita akan mencoba membuat project di vue cli, Untuk membuat projek baru dengan menggunakan vue-cli ini maka cukup jalankan perintah dengan format berikut. vue create

vue create myproject

atau

vue create <nama-project>

coba ketikan di terminal seperti berikut vue create myproject setelah kita enter maka akan keluar seperti berikut ini.

Cara Install Vue CLI (Command Line Interface)

Tunggu sampai selesai pastikan anda tersambung internet, jika sudah selesai dan berhasil maka akan keluar seperti ini di terminal.

Cara Install Vue CLI (Command Line Interface)

Berikut ini struktur folder dari project yang dibuat

Cara Install Vue CLI (Command Line Interface)

Sekarang kita akan jalankan projek kita ini. Pada terminal, masuk ke folder myproject kemudian jalankan perintah npm run serve.

$ cd myproject
$ npm run serve

Setlah berhasil di jalankan maka akan keluar tampilan berikut, setelah itu ketikan http://localhost:8081/ di browser anda

Cara Install Vue CLI (Command Line Interface)

jika sudah ketikan http://localhost:8081/ maka nampilan default nya akan seperti ini.

Cara Install Vue CLI (Command Line Interface)

Terdapat 3 folder utama yang terinstall yaitu:

  1. node_modules yaitu folder untuk menampung pustaka yan terinstalasi untuk projek ini, terdapat lebih dari 80 pustaka di dalamnya diantaranya: webpack, babel, browserify, eslint, dsb.
  2. src yaitu folder untuk menampung source code kita, seperti component, assets (image, icon), template, store, dsb.
  3. public yaitu folder untuk menampung file index.html atau mount point dari aplikasi kita nanti, ada juga file favicon di sini.

Baca juga pengenalan vue js

Categories
VueJS

Belajar Vue Js Bagian 10 : Components Basics

Hallo coder, ditutorial sebelumnya kita membahas Event Handling di vue js, sekarang kita akan membahas Components Basics di vue js.

Component merupakan sub class/objek dari Vue yang bisa kita buat untuk berbagai tujuan misalnya memecah kompleksitas kode. Setiap component memiliki lifecycle yang sama dengan objek Vuenya.

Untuk membuat sebuah component kita cukup, membuatnya seperti berikut.

Components Basics

Vue.component('nama-component', { /* options */ })

kita akan membuat sebuah component sederhana seperti ini.


Vue.component('button-counter', {
            data: function () {
                return {
                    count: 0
                }
            },
            template: ''
        })
        new Vue({
            el: '#components-demo'
        })

    

didalam code di atas kita hanya cuku memanggil <button-counter></button-counter> sesuai nama component yang kita daftarkan.

hasilnya akan seperti ini :

Reusable Component

Component yang ada kita bisa kita gunakan berkali kali seperti ini.


    

Organizing Components

Banyak component yang terdapat dalam sebuah website contohnya navigation links, blog posts, footer, sidebar dan sbb.

Terkadang kita ingin merubah salah satu component tersebut hanya dalam satu atau beberapa halaman yang ada. jika kita tidak pisah pisah antar component, maka dalam satu file terdapat banyak sekali code.

maka oleh sebab itu kita harus memisah misah setiap component tersebut agar mudah di panggil kembali.

Sebuah aplikasi Vue bisa dibangun dari beberapa component yang memiliki strukturnya hirarki. seperti gambar di atas. ada dua cara Component Registration didalam vue js, yaitu : global dan local.

Component Registration

Global Component

Register component secara global akan membuat component tersebut bisa digunakan oleh semua objek utama (root) Vue.

Vue.component('my-component-name', {
  // ... options ...
})

component diatas akan di daftarkan secara global, dapat digunakan pada vue root(new vue).

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

dan kita bisa memakainya seperti ini


Local Registration

Register component secara local artinya component tersebut diregister hanya pada objek tersebut, dan tidak bisa dipakai di objeck lain.

contohnya sepeti berikut ini

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

dan kita harus definisikan component tersebut seperti ini

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

Component Names

Component Names atau penamaan component di dalam vue js di bagi menjadi dua yaitu :

kebab-case

Format kebab-case menggunakan huruf lowercase dan tentunya di antara katanya di pisahkan – (strip). contohnya seperti berikut ini.

Vue.component('my-component-name', { /* ... */ })

Ketika kita mendefinisikan component dengan menggunakan format kebab-case, maka komponen tersebut dapat diakses menggunakan custom element . <my-component-name>

PascalCase

Jika di PascalCase kita harus menggunakan huruf kapital di awal katanya, contohnya seperti berikut ini :

Vue.component('MyComponentName', { /* ... */ })

Ketika kita mendefinisikan component dengan menggunakan format PascalCase, maka kita bisa memilih untuk mengakses komponen tersebut dengan cara <my-component-name> atau <MyComponentName> . Namun hanya elemen kebab-case yang dianggap valid oleh DOM.

Materi dari Components Basics sudah beres di tutorial selanjutnya kita akan membahas bagian lanjutan dari component, jadi tetap pantengin web warungcode.com , jangan lupa share yah, salam coder .

Categories
VueJS

Belajar Vue Js Bagian 9 : Event Handling di Vue JS

Hallo Coder πŸ˜ƒ , Pada tutorial sebelumnya kita mambahas Input bindings di vue js, kali ini kita akan membahas Event Handling di Vue Js, Event Handling adalah suatu penanganan action yang terjadi.

jadi sesuatu akan terjadi jika ada event contohnya, saat tombol di klik akan ada tulisan keluar.

Listening to Events

Kamu dapat menggunakan v-on merupakan directive yang berperan sebagai sebuah event listener.

Contohnya :


Button yang di klik {{ counter }}.


var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

Hasilnya :

Button yang di klik {{ counter }}.

Method Event Handlers

method event handlers berfungsi untuk menangani event yang lebih komplek. jadi di dalam v-on kita simpan method yang akan di jalankan.

Contohnya :


  
var example2 = new Vue({
            el: '#example-2',
            data: {
                name: ''
            },
            // define methods under the `methods` object
            methods: {
                greet: function (event) {
                    // `this` inside methods points to the Vue instance
                    alert('Hello ' + this.name + '!')
                    // `event` is the native DOM event
                    if (event) {
                        alert(event.target.tagName)
                    }
                }
            }
        })

Hasilnya :

Methods in Inline Handlers

Jika dalam Metode event handlers kita hanya mengisi nama method di dalam v-on:click="nama_method" sedangkan di methods in inline handlers kita bisa langsung ke mengisi isi method nya juga seperti ini v-on:click=”nama_method(‘isi method’)”

Contohnya :

 
 
var example3 = new Vue({
            el: '#example-3',
            methods: {
                say: function (message) {
                    alert('Hi, '+message)
                }
            }
        })

Hasilnya :

dengan menggunakan method di atas akan mempersingkat code yang kita ketikan. semuanya tinggal kamu sesuaikan dengan kebutuhan yang kamu inginkan.

Bagaimana tutorial Event Handling di Vue Js, jika ada kesulitan silahkan tinggalkan dikolom komentar, Pada tutorial selanjutnya kita akan membahas Menggunakan Components Basics, Semoga dapat membantu tutorialnya, salam coder

Categories
VueJS

Belajar Vue Js Bagian 8 : Form Input Binding

Hallo Coder πŸ˜ƒ , Pada tutorial sebelumnya kita sudah membahas Membuat List di Vue Js , dan pada kali ini kita akan membahas Form input binding di vue js.

Didalam form html terdapat beberapa type yaitu : Text, Textarea, Radio, Checkbox, Select dan lainya. fungsi dari type tersebut berbeda beda.

Didalam input biding nanti kita akan memakai v-model dengan two way data binding. yang artinya jika kita menginputkan sesuatu maka akan ada data yang ikut terinput atau terubah.

Form input binding di vue js

#Text


Hasilnya: {{ messageText }}

Dalam code diatas kita melihat v-model untuk sebagai identitas dari input tersebut. jika kita ketikan sesuatu maka pada hasilpun akan ikut muncul sesuai yang kita ketikan

Hasilnya :

Hasilnya: {{ messageText }}

#TextArea


    

Hasilnya :
{{ messageTextarea }}


Hasilnya :

Hasilnya :
{{ messageTextarea }}


Didalam textarea kita bisa gunakan enter.

#Checkbox


    

Hasilnya :

Didalam checkbox juga kita bisa membuatnya dengan banyak checkbox, contohnya seperti ini


    

Checked names: {{ checkedNames }}

Hasilnya :


Checked names: {{ checkedNames }}

#Radio




Picked: {{ picked }}

Hasilnya :



Picked: {{ picked }}

#Select


    
Hasilnya: {{ selected }}

Hasilnya :

Hasilnya: {{ selected }}

Kamu juga bisa coba Multiple Select seperti ini


    
Hasilnya: {{ selected }}

Hasilnya :

Hasilnya: {{ selected }}

Itulah materi dari tutorial Input Binding di vue js indah bukan πŸ’•, selebihnya tinggal kamu kreasikan dan pake sesuai kebutuhan kamu. semoga dapat membantu, sampai ketemu di tutorial selanjutnya, Salam Coder πŸ˜ƒ

Categories
VueJS

Belajar Vue Js Bagian 7 : Membuat List

Hallo Coder πŸ˜€, di permbahasan sebelumnya kita telah membahas Menggunakan v-bind di vue js, dan di pembahasan sekarang kita akan membahas Bagaimana caranya membuat List di Vue js.

Data dalam bentuk list atau daftar yang bisa berupa array , objek atau collection (array dari objek) bisa kita tampilkan dengan mudah menggunakan Vue Js

Membuat List di Vue Js

Sebagai contoh, kita mempunyai data array bahasa pemograman seperti berikut ini

languages: [
                    'PHP',
                    'Java',
                    'Python',
                    'SQL',
                    'Javascript'
                ]

Jika kita masukan dalam vue js kira kira seperti berikut ini

 var vm = new Vue({
            el: '#app',
            data: {
                languages: [
                    'PHP',
                    'Java',
                    'Python',
                    'SQL',
                    'Javascript'
                ]
            }
        })

Nah kita telah punya data yang akan ditampilkannya sekarang kita akan menampilkan datanya dalam bentuk list menggunakan tag <li>


  • {{ language }}

Dalam tag <li v-for="language in languages"> berfunsi untuk mengulang setiap data yang ada. Vue mempunyai directive v-for yang berfungsi untuk melakukan perulangan sebanyak elemen data yang ada pada variabel languages.

berbeda dengan php jika kita akan menampilkan biasanya kita menggunakan foreach, variable array nya biasanya di depan, seperti ini.

Foreach($languages as $language){
echo $language;
}

Sedangkan di vue js kita memangilnya dibelakang. mari kita lihat hasil dari List nya vue


Menampilkan Data Collection

Pada kasus nyata, seringkali kita dapati data tidak dalam bentuk array sederhana ataupun objek, melainkan dalam bentuk yang lebih kompleks semisal array dari objek atau dalam format JSON. apalagi sekarang lagi buming nya web servis, Terus bagaimana jika kita dapat data array dalam bentuk seperti ini.

courses: [
          {
           id: 'PHP-211',
           nama: 'PHP',
           harga: 600000
          },
]

kita ingin menapilkanya sesuai keynya. misalkan hanya data namanya saja atau data harganya saja. misalkan kita ingin menampilkan datanya kedalam bentuk table.

maka kita akan memakai template seperti ini


    
{{ courses.id }} {{ courses.nama }} Rp. {{ courses.harga }}

Mari kita bedah satu persatu code diatas.

karena kita akan menampilkannya dalam bentuk table maka kita harus meloopingnya di dalam tag <tbody> agar dapat tersusun rapih, codenya seperti berikut ini.




Oleh karena variabel c yang dihasilkan dari perulangan variabel courses berbentuk objek, maka kita bisa panggil setiap item didalamnya dengan menggunakan titik diikuti nama keynya.

c.nama //menampilkan nama
c.harga //menampilkan harga

contoh penerapanya seperti berikut ini.


                
                    {{ courses.id }}
                    {{ courses.nama }}
                    Rp. {{ courses.harga }}
                

Dan berikut Code kumplitnya.

Code Lengkapnya


{{ courses.id }} {{ courses.nama }} Rp. {{ courses.harga }}

kamu bisa menerapkannya sesuai keinginan kamu, bisa dalam bentuk list bisa dalam table ataupun card. jadi, salam coder.πŸ˜ƒπŸ˜ƒπŸ˜ƒ

Categories
VueJS

Belajar Vue JS Bagian 6 : Menggunakan v-bind

hallo coder πŸ˜ƒ, setelah dipertemuan sebelumnya kita membahas, Menggunakan v-once dan v-on pada vue js sekarang kita akan membahas Menggunakan v-bind di vue js.

v-bind adalah directive yang ada di vue js,Β v-bind mempunyai fungsi untuk mem-binding atribut HTML agar nilainya terupdate secara reactive.

Sesuai dengan data yang dinginkan. misalnya perubahan gambar, perubahan class pada suatu tag, perubahan style pada suatu tag.

Contohnya :

<!DOCTYPE html>
<html>

<head>
    <title>Belajar Vue</title>
    <script src="lib/vue.min.js"></script>
    <style>
        .active {
            color: brown
        }
    </style>
</head>

<body>
    <div id="app">
        <h1 v-bind:class="{ active: isActive }">Test</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: false
            }
        })
        setTimeout(() => {
            vm.isActive = true
        }, 3000);
    </script>
</body>

</html>

Pada contoh diatas, kita mem-biding suatu class pada tag h1, sehingga nilai class pada h1 menggikuti isActive, Β lihat disini

setTimeout(() => {
            vm.isActive = true
        }, 3000);

ini berfungsi untuk merubah isActive menjadi true dalam waktu 3 detik. jadi warna dari h1 akan berubah menjadi merah.

ini dapat di pakai untuk anda yang sedang membuat aplikasi yang menginginkan perbuhan data yang realtime.

kita juga dapat mem-biding dengan dua variable sekaligus dengan menggunakan [ ] (kurung siku). contohnya seperti ini

<h1 v-bind:class="[class1, class2]"></h1>

selain class, kita juga dapat mem-biding style contohnya seperti berikut ini.

 <h1 v-bind:style="{ color: color }">Test</h1>

Selesai suda tutorial Menggunakan v-bind di vue js, anda dapat kerasikan penggunaan v-bind ini. selamat mencoba sampai ketemu di tutorial Membuat List di Vue Js . salam coder πŸ’»

Categories
VueJS

Belajar Vue JS Bagian 5 : Menggunakan v-once dan v-on

Hallo coder, pada tutorial sebelumnya kita telah membahas Menggunakan if dan else di vue js pada pembahasan kali ini kita akan membahas v-once dan v-on pada Vue js.Β v-once dan v-on merupakan directive.

Directive merupakan atribut khusus yang disematkan pada elemen atau markup HTML sebagai penanda bahwa elemen DOM tersebut akan dikenai perlakuan tertentu oleh Vue js.

Menggunakan v-once dan v-on

V-once digunakan agar nilai variabel pada template tidak bisa diubah-ubah lagi, kita lihat contohnya di bawah ini.

<!DOCTYPE html>
<html>

<head>
    <title>Belajar Vue</title>
    <script src="lib/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <h1 v-once>{{ message2 }}</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello world!',
                message2: 'Ini V-once'
            }
        })
    </script>
</body>

</html>

di contoh di atas kita punya dua data yaitu message dan message2, di message2 kita akan kasih directive v-once, setalah copy code di atas coba run. setelah itu coba buka console ganti data message dan message2 dengan mengketikan seperti berikut

vm.message ="test"
vm.message2 ="test"

dan ini lah hasil yang akan terjadi

bisa terlihat bahwa data message2 tidak berubah tetap sama, berarti directive v-once berjalan.

v-on

Merupakan directive yang berperan sebagai sebuah event listener pada elemen HTML/komponen Vue Js.
Directive ini bertugas memantau aktifitas (aksi) yang dilakukan terhadap suatu elemen HTML/komponen Vue Js.

Contoh penggunaannya

<div id="app">
        <button v-on:click="info('halo')">
            Informasi
        </button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                info(text) {
                    alert(text)
                }
            }
        })
    </script>

maka hasilnya akan seperti ini

Selain directive v-on:click ada beberapa directive lain yang bisa kita gunakan, diantaranya:

  • v-on:mouseover ketika mouse berada di area elemen.
  • v-on:mouseenter ketika mouse masuk ke area elemen.
  • v-on:mouseout ketika mouse keluar dari area elemen.
  • v-on:mousedown sama dengan v-on:click.
  • v-on:keyup ketika keyboard up pada elemen (biasanya digunakan pada elemen input).
  • v-on:keydown ketika keyboard down pada elemen (biasanya digunakan pada elemen input).
  • v-on:submit ketika form di submit.
Categories
Laravel

Mengenal Lebih Dekat Framework Laravel

Laravel adalah framework php yang sedang populer saat ini. banyak yang sudah dan sedang memakainya.

Laravel adalah proyek open source yang oleh Taylor Otwell, untuk menyediakan framework alternatif yang lebih canggih dibandingkan CodeIgniter.

saat itu Codeigniter tidak memiliki beberapa fitur penting, itulah yang membuat Taylor Otwell untuk mengembangkan aplikasi berbasis web dengan arsitektur MVC (Model-View-Controller).

Beberapa fitur Laravel antara lain, Artisan, Migrate Database, Namespace, desain yang modular, Testing dan masih banyak lagi.

Semua fitur itu memudahkan developer dalam pengembangan maupun maintenance.

Semua itu mengarah kepada sintaks yang pendek dan mudah dipahami (syntactic sugar). Fitur-fitur tersebut akan kita bahas lebih detil di tutorial selanjutnya.

Rilis pertama Laravel dilakukan pada 9 Juni 2011 dengan versi beta, dan diikuti dengan rilis Laravel 1 pada bulan yang sama. dan sekarang versi terbaru Laravel versi 5.8.

Fitur Unggulan

  • Eloquent ORM

ORM memiliki kepanjangan Object Relational Mapping, dengan ORM kita bisa melakukan operasi CRUD ke database tanpa harus menulis SQL Command.

ORM inilah yang bertugas untuk menulis SQL Command untuk kita. Laravel menggunakan ORM yang bernama Eloquent. contohnya jika memakai native

$id = 1;

$command = "Select * From user whereuser.id = $id";

Bandingkan dengan menggunakan Eloquent ORM

$id=1;
$user = User::find($id);

berbeda sekali bukan dengan menggunakan PHP native. kita tetap menggunakan SQL Command namun dengan menggunakan Eloquent ORM akan lebih singkat code yang di hasilkan.

Selain itu Eloquent ORM juga memiliki fitur unggulan lain seperti Mudah mengganti database.

Jika kita Menggunakan MYSQL ingin pindah ke ORACLE itu mudah kita hanya perlu menggunakan syntax yang sama. dan satu lagi yaitu mudah membuat sebuah relation antar table.

  • Template Engine (Blade)

Laravel memanfaatkan templating engine yaitu Blade. Blade berguna untuk menghindari penulisan yang berulang, memudahkan dalam Templating, Memudahkan dalam memanggil dan menyembunyikan commponent.

//Data yang akan ditampilkan
$user='warungcode';
//cara menampilkan
<?php
echo $user;
?>

//Jika menggunakan Blade akan lebih singkat

{{$user}}
  • Migration

Migration memudahkan kita mengelola struktur database dan tabel aplikasi kita.

Jika kita terbiasa membuat tabel atau field menggunakan GUI semisal PHPMyAdmin atau SQL Management Studio, maka dengan Migration kita bisa langsung melakukannya dari teks editor tanpa berpindah aplikasi.

  • Policy & Gate

Dalam aplikasi Laravel kita bisa lebih mudah untuk menetapkan hak akses ke aplikasi atau ke fitur-fitur tertentu dengan Policy & Gate.

  • Built-in JSON

Kamu bisa mengembangkan aplikasi dengan view Blade ataupun menggunakan frontend javascript seperti VueJS, ReactJS atau yang lain.

dari semua fitur diatas mahis banyak fitur unggulan laravel lainya. Mengapa kita menggunakan laravel ? Karena laravel bersifat Open Source atau gratis, memiliki ekosistem yang baik, memiliki kemamanan yang baik pula, dan mudah dalam pengembangan.

Kesimpulan

Laravel cocok buat kamu developer yang ingin merhatikan keindahan code, Keamanan, dan modern. dengan fitur fitur yang dimiliki laravel, akan memudakan kita dalam pembuatan sebuah web, selain itu juga laravel telah bisa di gunakan di PHP 7. jadi apakah kamu akan berpidah hati ke laravel ?

Baca juga Mengenal Vue JS