DEV Community: Dimas Andhika

String Prototype Capitalize

Dimas Andhika — Tue, 22 Jun 2021 02:40:15 +0000

Note: This article is intended for Indonesians

Perkenalan

Javascript mempunyai banyak built in function pada prototype. Ada di array, string, object, dan lain2. Salah satu contohnya adalah String.prototype.toUpperCase() yang memungkinkan kita membuat string menjadi huruf besar.

String.prototype.toUpperCase()

const str = 'ini teks';
console.log(str.toUpperCase()) // => 'INI TEKS'

Tapi pada suatu saat kita mungkin perlu mengubah string menjadi huruf kapital, tetapi javascript tidak punya builtin function seperti itu. Jadi solusinya adalah kita membuat function sendiri seperti pada contoh berikut:

Contoh Function Capitalize

function capitalize(str) {
  return `${str[0].toUpperCase()}${str.slice(1)}`
}
console.log(capitalize('ini teks')) // => 'Ini teks'

Penjelasan

str[0].toUpperCase() kode ini dapat mengubah huruf pertama pada string menjadi kapital, dan kode str.slice(1) menampilkan string dari index ke 1

Permasalahan

Ini bekerja dengan baik tetapi tidak seperti yang kita harapkan. Contoh yang saya buat diatas merupakan function biasa, yang bisa menjadikan kode kita sulit dibaca jika sudah terdapat banyak function. Lalu gimana cara kita dapat membuat function seperti .toUpperCase()? Caranya seperti berikut:

String.prototype.capitalize()

String.prototype.capitalize = function() {
  return `${this[0].toUpperCase()}${this.slice(1)}`
}
console.log('ini teks'.capitalize()) // => 'Ini teks'

Isi functionnya sama dengan yang kita buat pada contoh diatas ini, tetapi penulisan kode menjadi lebih rapih karena kita mendefinisikannya langsung ke prototype, ini seakan2 menjadikan capitalize seperti function bawaan javascript.

Penjelasan

Tetapi jika dilihat ada yang berubah, kita memakai keyword this pada kode diatas karena this pada kode diatas mereferensikan ke string yang kita beri method capitalize, contoh:

String.prototype.capitalize = function() {
  return this
}
console.log('ini teks'.capitalize()) // => 'ini teks'

Jadi this pada kode diatas digunakan untuk menangkap stringnya, dan karena itu pula kita tidak dapat menggunakan arrow function karena keyword this akan berisi undefined

Basic Component pada Vue JS

Dimas Andhika — Mon, 12 Apr 2021 08:04:23 +0000

Perkenalan

Vue adalah progresif framework javascript yang memungkinkan kalian menulis kode dengan efisien dan cepat dibandingkan tanpa Framework sama sekali, oleh karena itu di Vue JS menerapkan sistem Component. Note: This article is intended for Indonesians

Di vue js terdapat banyak component seperti: Component Basic, Component Props, Component Emit, Component Slot, Component Provide, Component Inject. Artikel ini akan membahas Component Basic pada Vue JS Note: Pastikan kalian paham tentang Vue dan Javascript Dasar

Component Basic

🚀 Konfigurasi pada Vue CLI

Pertama kita buat file (Nama.vue) biasanya di simpan pada direktori src/components/

// src/components/Nama.vue
<template>
  <h3>
    Ini Dipanggil Dari Component Nama.vue
  </h3>
</template>

Kalian bebas menentukan nama filenya. Lalu didalam filenya kalian tuliskan elemen html seperti biasa, seperti pada contoh diatas.

2.Tentukan dimana kalian akan merender Component tersebut contoh saya ingin render di src/App.vue

<template>
  <div class="container">
    <Nama />
  </div>
</template>

<script>
/* eslint-disable */
import Nama from "path/ke/FileVueKalian"
export default {
  components: {
    Nama,
    'nama-component': Nama, // Jika ingin kebab-case
  },
};
</script>

Otomatis elemen h3 dengan tulisan Ini Dipanggil Dari Component Nama.vue akan langsung di render pada File App.vue. Hanya dengan begitu saja kalian sudah bisa membuat Component Dasar pada Vue JS

Vue Router: Cara dan Contoh Penggunaan

Dimas Andhika — Sat, 10 Apr 2021 13:54:07 +0000

Perkenalan

Vue sangat berguna untuk membuat Aplikasi Satu Halaman, halaman webnya juga sangat interaktif yang memungkinkan kita untuk tidak me-refresh halaman ketika kita mengubah dari halaman satu ke halaman yang lain. Note: This article is intended for Indonesians

Jika website kamu memiliki banyak halaman dan kamu menggunakan Vue, itulah mengapa kamu membutuhkan Vue Router. Note: Pastikan kalian paham tentang Vue dan Javascript dasar

Basic Dari Vue Router

🚀 Mempersiapkan Vue Router dari awal

1.Pertama Kita Install Vue Router di Command Line

$ npm i vue-router@next

2.Konfigurasi pada Direktori /src/router/index.js

import { createWebHistory, createRouter } from "vue-router";
// Import Component2 Kalian

import Home from "@/views/Home.vue"; 
import About from "@/views/About.vue";

const routes = [ 
  {
    path: "/", 
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Note: Di direktori /src/router/index.js kita membuat routes di dalam sebuah array yang akan mengspesifikasikan beberapa hal:

Path - URL / Tempat dimana component akan di load
Component - Komponen yang akan diload saat path dipanggil
Name - (Opsional)

Dibawah array routes terdapat createRouter yang pastinya diperlukan untuk membuat router itu sendiri

Dan juga terdapat createWebHistory yang digunakan untuk beralih dari mode hash ke mode history di dalam browser, menggunakan API history HTML5, Ini yang akan membuat history pada browser kita setiap kita meload router

3.Konfigurasi pada direktori /src/main.js
Pada direktori /src/main.js kita juga perlu menambahkan sesuatu

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // <---

createApp(App)
  .use(router) // <---
  .mount('#app')

Ya, tentunya kita perlu mengimpornya ke file utama kita

🚀 Menggunakan Router

Ada 2 component yang diberikan oleh Vue Router yaitu <router-view /> dan <router-link to="/" />.

<router-view /> digunakan untuk membungkus component2 yang akan dirender , dan <router-link to="/" /> ini mirip seperti tag anchor pada html, pada tag anchor biasanya kita menggunakan href tetapi pada router link kita menggunakan 'to'

Note: Biasanya <router-view /> dideklarasikan di file App.vue karena file tersebut adalah halaman utama yang isinya akan kita ubah2

Contoh:

// (/src/App.vue)
<template>
  <div id="navbar">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
  </div>
  <router-view />
</template>

// (Home.vue)
<template>
  <h1>Home Page</h1>
</template>

// (About.vue)
<template>
  <h1>About Page</h1>
</template>

🚀 Selesai.. ya mungkin seperti itu konsep dasar vue router, mohon maaf bila bahasa yang digunakan membingungkan