Minggu, 22 Maret 2020

Vue Js Form Data & Binding

1. Handling Submit Form & Validation
Buat file dengan nama form.html dan tambah kode berikut:
<!DOCTYPE html>
<html>
<head>
    <title>Form Data</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/
4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTN
h0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script type="text/javascript" src="lib/vue.js"></script>

</head>
Sampai disini adalah untuk memasukkan bootstrap kedalamnya.

<body>
    <div class="col pt-3">
                <h2 class="font-weight-bold"> Input The Data </h2>
                <hr>
            </div>
        <div id="app" class="container">
            <form class = "form-control"ref="formBook" @submit.prevent="submitForm($event)"
            action="" method="post" id="myForm">
            <p v-if="errors.length">
                    <b>Oops Something is wrong!</b>
                <ul>
                    <li v-for="error in errors">{{ error }}</li>
                </ul>
            </p>
            <hr>
            <div class="row">
                <div class="col">
                    <label>Name Of Product :</label>
                    <input class = "form-control" type="text" v-model="nama" ref="nama"/>
                    <br>
                </div>
                <div class="col">
                    <label>Description :</label>
                     <textarea class="form-control" v-model="description"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <label>Brand :</label>
                    <input class = "form-control" type="text" v-model="merk">
                </div>
                <div class="col">
                    <label>Price :</label>
                    <input class = "form-control" type="number" v-model.number="price">
                </div>
            </div>
                <div class="row">
                    <div class="col">
                        <label>Categories:</label>
                        <select multiple class= "form-control"  v-model="categories" multiple>
                            <option v-for="option in options" :value="option.value">
                            {{ option.text }}
                            </option>
                        </select>
                    </div>
                </div>
            <div class="row">
                <div class="col">
                    <label>Picture :</label>
                    <input  name="gambar" ref="gambar" type="file" class="form-control-file">
                    <br>
                    <input type="submit" value="Submit" class="btn btn-primary">
                </div>
            </div>
            <br>
            </form>
        </div>
        <script type="text/javascript">
                var vm = new Vue({
                el: '#app',
                data: {
                    nama: '',
                    description: '',
                    merk: '',
                    price: 0,
                    categories: [],
                    options: [
                            { text: 'Shirt', value: '01' },
                            { text: 'T-Shirt', value: '02' },
                            { text: 'Jacket ', value: '03' },
                            { text: 'Hoodie ', value: '04' },
                            { text: 'Pants ', value: '05' },
                            { text: 'Accesories ', value: '06' }
                            ],
                    errors: []
                        },
                    methods: 
                    {
                        submitForm(event){
                            this.errors = []
                            // kode validasi
                            if(this.nama.length < 3){
                                this.errors.push('Input the name more than 2 char')
                                this.$refs.nama.select()
                            }
                            if(this.description.length > 500){
                                this.errors.push('Description max is 500 char!')
                                this.$refs.description.select()
                            }
                            if(this.merk.length < 3){
                                this.errors.push('Input the brand more than 2 char')
                                this.$refs.merk.select()
                            }
                            if(this.price < 0){
                                this.errors.push('No minus on price')
                                this.$refs.price.select()
                            }
                            if(this.categories.length === 0){
                                this.errors.push('Choose minimal 1 category')
                                this.$refs.categories.focus()
                            }
                            // kode status informasi
                            if(this.errors.length === 0 ){
                            // persiapkan data
                                let formData = new FormData()
                                let gambar = this.$refs.gambar.files[0]
                                formData.append('nama', this.nama)
                                formData.append('description', this.description)
                                formData.append('merk', this.merk)
                                formData.append('price', this.price)
                                formData.append('categories', this.categories)
                                formData.append("gambar", gambar)
                                // kirim data ke server
                                let xhttp = new XMLHttpRequest() // create objek XMLHttp
                                // definisikan fungsi ketika terjadi perubahan state
                                xhttp.onreadystatechange = function() {
                                // state ini menunjukkan data terkirim dan diterima server dengan baik
                                if (this.readyState == 4 && this.status == 200) {
                                // respon text dari server
                                console.log(this.responseText)
                                    }
                            }
                            // sesuaikan dengan lokasi file proses.php
                            xhttp.open("POST", "http://localhost/proses.php", true)
                        // kirim objek formData
                            xhttp.send(formData)
                        }
                    }
                    }
                    })
        </script>
</body>
</html>
Kode diatas adalah kode tampilan form, Kode v-if=”errors.length” adalah untuk memeriksa apakah ada yangg tidak sesuai dengan ketentuan atau error. Jika ada maka akan lanjut ke this.errors dan akan muncul alert sesuai dengan errornya.
Misal, errornya adalah kita lupa memasukkan nama dari produknya maka akan muncul "Input the name more than 2 char"

Setelah itu buat 1 file baru yang bernama proses.php dan masukkan kode dibawah ini:
<?php
// untuk mencegah error akibat CORS
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Credentials: true');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
echo "SIMULASI KIRIM DATA FORM <hr>";
// menampilkan data yang dikirimkan dengan method post
print_r($_POST);
print_r($_FILES['gambar']);
Kode ini untuk menerima data yang dikirim dari form. Dan kemudian tampilannya akan seperti ini pada browser:
Dan kemudian untuk contoh error akan seperti dibawah ini:



2. Input Binding
Buat file dengan nama binding.html kemudian masukkan kode dibawah:
<!DOCTYPE html>
<html>
<head>
    <title> Form BInding </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/
css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E2
63XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script type="text/javascript" src="lib/vue.js"></script>
</head>
Sama seperti yang input tadi, ini juga adalah untuk memasukkan bootstrap.
Lalu masukkan lagi kode ini dibawahnya:
<body>
    <div id= "app" class ="container">
        <div class="row">
            <div class="col pt-3">
                <h2 class="font-weight-bold"> Binding </h2>
                <hr>
            </div>
        </div>
        <form>
             kategori : <input type="text" name="kategori" v-model="kategori" 
placeholder="pilih kategori di bawah">
            <hr>
            <input type="radio" id="baju" value="baju" v-model="kategori">
            <label for="baju">baju</label>
            <br>
            <input type="radio" id="celana" value="celana" v-model="kategori">
            <label for="two">celana</label>
            <hr>
            <span> Pilih warna nya : </span>
            <br>
            <input type="checkbox" id="merah" value="merah" v-model="checked">
            <label for="jack">merah </label>
            <input type="checkbox" id="kuning" value="kuning" v-model="checked">
            <label for="john">kuning</label>
            <input type="checkbox" id="hijau" value="hijau" v-model="checked">
            <label for="mike">hijau</label>
            <hr>
            <select v-model="selected">
              <option disabled value="">pilih salah satu</option>
              <option> jearsey </option>
              <option> Katun </option>
              <option> Jeans </option>
            </select>
            <hr>
            <textarea v-model="deskrip" placeholder="Tambahkan Deskripsi Baju">
</textarea>
            <hr>
            <h2 class="font-weight-bold"> Hasil Binding </h2>
            <span>Kategori text : {{ kategori }}</span>
            <br>
            <span> fitur radio button : {{ kategori }}</span>
            <br>
            <label for="checkbox">fitur check box :{{ checked }}</label>
            <br>
            <span>fitur select : {{ selected }}</span>
            <br>
            <span>Deskripsi Baju: {{ deskrip }}
            </span>
        </form>
    </div>
    <script type="text/javascript">
        var vm= new Vue({
            el:'#app',
            data : {
                kategori:"",
                checked:[],
                selected:"",
                deskrip:""
            }
        })
    </script>
</body>
</html>
Kode ini untuk tampilan binding pada browser.
Terdapat fitur input text, radio button, check box dan selected dalam kode diatas.
Dan tampilan dari kode diatas adalah:
Kemudian jika kita masukkan data maka akan seperti dibawah ini: 

Data yang ada diatas terikat ke data yang ada dibawah sehingga hasilnya yang dibawah dipengaruhi dari yang di atasnya.



Minggu, 15 Maret 2020

VUE.JS DIRECTION & LIST

Menggunakan fitur Directive dan List pada vue

A.Directive
Saya masukkan kode seperti ini:
<!DOCTYPE html>
<html>
<head>
    <title>Directive vue js</title>
    <script src="lib/vue.js"></script>
</head>
<body>
        <div id="app">
            
            <p> Berbelanja Untuk Kategori </p>
            <button v-on:click="gender = 1">
                Pria
            </button>
            <button v-on:click="gender = 2">
                Wanita
            </button>
            
            <div v-if="gender === 1" >
                <img  v-bind:src="m" width="300">
                <p>Pria</p>
            </div>
            <div v-else-if= "gender === 2" >
                <img  v-bind:src="f" width="300">
                <p>Wanita</p>
            </div>
            <div v-else >
                
            </div>

        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data:{
                    gender : 0,
                    m: 'images/pria.png',
                    f : 'images/wanita.png'
                }
            })
        </script>
</body>
</html>
Dari kode diatas maka akan seperti ini hasilnya:
Dari kode diatas ini menjelaskan tentang pemilihan jenis kelamin seperti pada saat kita ingin berbelanja di sebuah toko online dan memilih kategori berdasarkan gender kita.
Kemudian ada juga v-on click, jika kita klik yang Pria maka akan muncul seperti ini:
dan jika yang Wanita diklik maka akan seperti ini:


Dan kita pun bisa merubah v-if nilai 1 yang isinya male dan v-if female nilai 2.


B.List
Saya masukkan kode ini:
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="lib/vue.js"></script>
    <title>list</title>
  </head>
  <body>
    <h1>V E N T E L A</h1>

    <div id="app">
        <table border=315>
            <tr v-for="book of books">
                <td>
                    <img width=500 :src="'images/' + book.image" />
                </td>
                <td>
                    Produk: {{ book.Produk }} <br>
                    Deskripsi: {{ book.Deskripsi }} <br>
                    Harga: {{ book.Harga }}
                </td>
            </tr>
        </table>
    </div>
        <script type="text/javascript">
            var vm = new Vue({
        el: '#app',
        data: {
        books : [
        {
            id: 10,
            Produk: 'Public Series High',
            Deskripsi: 'Black / Natural',
            Harga: 260000,
            image: 'pubhigh.jpg'
        },
        {
            id: 13,
            Produk: 'Public Series Low',
            Deskripsi: 'Black / Natural',
            Harga: 250000,
            image: 'publow.jpg'
        },
        {
            id: 14,
            Produk: 'Retro Series',
            Deskripsi: 'Yellow / Black Stripe',
            Harga: 400000,
            image: 'retro.jpg'
        }
        ]
        }
        })
    </script>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <h1>VENTELA Products 2020</h1>
    
    </body>
</html>
dari kode di atas maka hasilnya akan seperti ini:



dari kode diatas sederhananya adalah membuat tampilan semacam kist atau daftar, terlihat seperti di web marketplace pada umumnya. Terdiri dari gambar dan juga ada deskripsinya. 
Pada table saya memasukkan Produk, Deskripsi dan Harga. yang dimana sebelumnya sudah dibuat variablenya di v-for="book of books"> serta juga ada gambar produknya yang dipanggil dengan nama gambar tersebut yang terletak di satu folder yang bernama "images".
Setelah itu saya juga memakai Bootstrap 4 bisa cek disini https://getbootstrap.com/

Sekian

Minggu, 08 Maret 2020

MEMBUAT KALKULATOR DENGAN VUE.JS

Membuat beberapa contoh program dengan vue.js
A. Membua kalkulator sederhana yang memiliki inputan nilai 1 dan nilai 2, dengan 4 tombol perhitungan (tambah, kurang, kali, bagi). Ketika nilai telah diinput dan tombol di klik akan tampil hasilnya.

Pertama buat file baru dengan kode seperti ini:
<!DOCTYPE html>
<html>
<head>
    <title> calculator </title>
    <script src="lib/vue.js"></script>
    <style type="text/css">
        *{
            font-family: parchment;
            font-size: 50px;
        }
        .row{
            margin-bottom: 20px;
        }
        .input1{
            margin-left: 20px;
            padding: 10px;
        }
        .input2{
            margin-left: 16.5px;
            padding: 10px;
        }
        .ml-75{
            margin-left: 75px;
        }
        button{
            font-family: sans-serif;
            font-size: 30px;
            height: 40px;
            width: 40px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="row">
            <label> Angka 1 :</label>
            <input type="number" class="angka1" v-model="angka1">
        </div>
        <div class="row">
            <label> Angka 2 :</label>
            <input type="number" class="angka2" v-model="angka2">
        </div>
        <div class=" row ml-75">
            <button onclick="vm.tambah()">+</button>
            <button onclick="vm.kurang()">-</button>
            <button onclick="vm.kali()">x</button>
            <button onclick="vm.bagi()">/</button>
        </div>
        <div class="row ml-75=">
            <label>Hasil :</label>
            <span>{{ hasil }}</span>
        </div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data : {
                angka1:0,
                angka2:0,
                hasil:0
            },
            methods : {
                tambah(){
                    this.hasil = parseInt(this.angka1) + parseInt(this.angka2)
                },
                kurang(){
                    this.hasil = parseInt(this.angka1) - parseInt(this.angka2)
                },
                kali(){
                    this.hasil = parseInt(this.angka1) * parseInt(this.angka2)
                },
                bagi(){
                    this.hasil = parseInt(this.angka1) / parseInt(this.angka2)
                },

            }
        })
    </script>
</body>
</html>
 Pada kode berikut di atas setiap kita memasukkan angka ke variable ;Angka 1' dan 'Angka 2' maka angka di dalam itulah yang akan diproses nantinya. Variable awal dari semuanya adalah '0' dan proses tambah, kurang kali dan baginya akan diproses pada method tambah(), kurang(), kali() dan bagi(). Dan hasilnya akan seperti ini;

dan jika melakukan penghitungan akan seperti ini: (method tambah)

B. Membuat template vue yang menggabungkan property template, data raw dan data attribute.dan membuat penerapan siklus Object Vue
Buat file baru dengan kode seperti ini:
<!DOCTYPE html>
<html>
<head>
    <title>Belajar Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        .title{
            color: yellow;
            }
    </style>

</head>
<body>
    <div id="app">
    <h1>{{ atas }}</h1>
    <h1 v-html="dataRaw"></h1>
    <h1 v-bind:class="kelas1"> {{ Atribute }}</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue ({
            el : '#app',
            data : {
                atas : "Hai",
                dataRaw : "<span style = 'color:blue '>Selamat Pagi</a>",
                Atribute : "Sehat Sehat Ya",
                kelas1 : "title"
            },
             
            beforeCreate () {
                console.log('before create:'+'atas='+ this.atas)
            },
            created () {
                console.log('created: '+ 'atas =' + this.atas)
            },
            beforeMount() {
                console.log('before Mount'+'atas = '+ this.$el.textContent)
            },
            mounted () {
                console.log(' Mounted '+' atas =' + this.$el.textContent)
            },
            beforeUpdate () {
                console.log('beforeUpdate ='+'el = ' + this.$el.textContent)
            },
            updated() {
                console.log('Updated = '+'el' + this.$el.textContent)
            },
            
            beforeDestroy () {
                console.log('before Destroy')
            },
            Destroy() {
                console.log('Destroyed')
            }
        })
        vm.$destroy()
    </script>
</body>
</html>
Pada kode diatas kita mempunyai template yang berisi tag html h1, yang akan menampilkan teks message, h1 juga mempunyai v-bind:class dengan nama kelas1 yang diambil dari data, variable kelas1 ini mempuyai value title yang artinya kelas1 sama dengan title jadi pada tag h1 ini akan memanggil class css .title, dan hasilnya akan di render pada div id=app.
- Apabila dijalankan, akan tampil seperti berikut :


Dan untuk penerapan Object Vue
- penjelasan : 
a. fungsi  Create  untuk meng create
b. fungsi mount adalah untuk meng mount : Kode diatas akan mencoba mengakses DOM dengan menggunakan fungsi bawaan js, yaitu textContent. textContent ini berfungsi untuk menampilkan konten teks yang ada di dalam el.
c. update untuk mengupdate data
d. Destroye untuk mendestroy atau meng hapus data
Tidak terjadi apapun namun di console terlihat sebelum dan sesudah script dieksekusi

Senin, 24 Februari 2020

Membuat & Menampilkan Data Diri Menggunakan Vue & JavaScript

Step 1
Kita copy kode di web https://vuejs.org/js/vue.js untuk mengaktifkan vue

Step 2 
Lalu kita membuat file JavaScript di folder lib yang dimana folder lib itu ada di dalam folder project kita dan paste kode tadi didalam file js tersebut

Step 3
Lalu kita membuat file html dengan nama "data diri.html" pada teks editor.

Step 4 
Ketikkan kode dibawah

Kode <script src="lib/vue,js></script> adalah untuk memanggil kode vue atau mengaktifkan vue tadi yang sudah kita simpan di vue.js

Yang akan muncul adalah semua yang ada di h1 dan diikuti dengan {{}} yang menandakan bahwa itu adalah variable, variable itu memiliki isi yaitu di bawahnya. Disini saya masukkan data diri saya yaitu nama, prodi, tahun angkatan dan emai.

Step 5
Jika sudah maka kita buka browser dan lihat apakah file html kita sudah dapat muncul pada browser. Jika berhasil maka akan terlihat seperti ini

Pastikan bahwa besar kecilnya huruf diperhatikan saat ingin memanggil variable.

Terimakasih :)