Dimensi TutupBotol: 2020

Thursday, October 22, 2020

Menggunakan CKEDITOR4 di NextJS

Siipss... ini rich editor yang ke-3 yang kita cobain di next js. Sebelumnya kita udah nyobain CKEDITOR5 dan React-QUILL... naaah skrg kita bakalan nyobain yang CKEDITOR4... So sy g' bakalan start dari awal lagi wkwkw... udah ngantukk... @_@

So langsung ajjah daa.. kita install package dl laah...

npm i --save ckeditor4-react

Itu ko' banyak warning yaaak... yaa biarin laaah... :v

abis itu beralih ke index.jsnya next.js trs tambain ginian:

import Head from 'next/head'
import styles from '../styles/Home.module.css'

// import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import {useState, useEffect, useRef} from 'react'

export default function Home() {
  const [text, setText] = useState('')
  const ckedt4 = useRef()
  const [editorLoaded, setEditorLoaded] = useState(false)
  const {CKEditor4} = ckedt4.current || {}

  useEffect(() => {
    ckedt4.current = {
      CKEditor4: require('ckeditor4-react')
    }
    setEditorLoaded(true)
  }, [])


  const handleChange = (val) => {
    setText(val)
    console.log(val)
  }
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h2> Testing CK EDITOR 4 in Next JS </h2>
      {editorLoaded &&
        <CKEditor4 
        //data={text}
        data="<p>initial text</p>"
        onChange={(val) => handleChange(val)}
        />
      }
      
      
    </div>
  )
}

Hasilnya:

Trs klu masukin image kita harus upload dl filenya ditempat lain, terus dapatin url-nya, trs baru dimasukin ke editornya... tampilannya kekgini laah

Daaah... bobo dl... :v

Menggunakan React-Quill di NextJS

Pertama-tama kita create next app dl:

Setelah itu install react quill

npm install react-quill

Setelah itu edit index.js di root folder next js dan isikan kode ini:

import Head from 'next/head'
import styles from '../styles/Home.module.css'

// import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import {useState, useEffect, useRef} from 'react'

export default function Home() {
  const [text, setText] = useState('')
  const QuillRef = useRef()
  const [editorLoaded, setEditorLoaded] = useState(false)
  const {ReactQuill} = QuillRef.current || {}

  const modules = {
    toolbar: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline','strike', 'blockquote'],
      [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
      ['link', 'image'],
      ['clean']
    ],
  }

  const formats = [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image'
  ]

  useEffect(() => {
    QuillRef.current = {
      ReactQuill: require('react-quill')
    }
    setEditorLoaded(true)
  }, [])


  const handleChange = (val) => {
    setText(val)
    console.log(val)
  }
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h2> Testing React Quill in Next JS </h2>
      {editorLoaded &&
        <ReactQuill value={text}
        onChange={(val) => handleChange(val)}
        modules={modules}
        formats={formats}
        />
      }
      
      
    </div>
  )
}

Daan hasilnya :

Klu kita ngetik dan masukin image :

Menggunakan CKEDITOR5 di NextJS

Pertama-tama mari kita install next.js dengan perintah

npx create-next-app

Stelah itu kita jalanin next.js-nya buat mastiin semuanya okie

cd next-ckedt

npm run dev

Hasilnya

Siiipsss semuanya okie.... setelah itu kita beralih ke CKEditor 5 yang dokumnetasinya bisa dilihat disini:
https://ckeditor.com/docs/ckeditor5/latest/index.html

Untuk integrasi ke next.js, kita bisa lihat contoh integrasi buat react.js

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html

So pertama-tama install dl packagenya

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

Setelah itu kita apus semua kode di index.js seperti terlihat dibawah:

Jadi skrg pagenya udah kosong kecuali titlenya hahhaa...

Naah... abis itu kita masukin source code dibawah untuk index.js

import Head from 'next/head'
import styles from '../styles/Home.module.css'

import React, { useState, useEffect, useRef } from 'react'

export default function Home() {
  const editorCKRef = useRef()
  const [editorLoaded, setEditorLoaded] = useState(false)
  const { CKEditor, ClassicEditor } = editorCKRef.current || {}

  useEffect(() => {
    editorCKRef.current = {
      CKEditor: require('@ckeditor/ckeditor5-react'),
      ClassicEditor: require('@ckeditor/ckeditor5-build-classic')
    }
    setEditorLoaded(true)
  }, [])

  return (
    <div className={styles.container}>
      <Head>
        <title>My CKEditor 5</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h2>Using CKEditor 5 build in Next JS</h2>
      {editorLoaded &&
        <CKEditor
          editor={ ClassicEditor }
          data="<p>Hello from CKEditor 5!</p>"
          onInit={ editor => {
              // You can store the "editor" and use when it is needed.
              console.log( 'Editor is ready to use!', editor );
          } }
          onChange={ ( event, editor ) => {
              const data = editor.getData();
              console.log('ON CHANGE')
              console.log(data)
              // console.log( { event, editor, data } );
          } }
          onBlur={ ( event, editor ) => {
              console.log( 'Blur.', editor );
          } }
          onFocus={ ( event, editor ) => {
              console.log( 'Focus.', editor );
          } }
        />
      }
      
    </div>
  )
}

Daaan hasilnya seperti ini:

Naah contentnya bisa dicapture di onChange, jadi difungsi itu tar bisa dikonekin ke useState trs disimpen di database lewat API. Contohnya seperti ini

Siiipss segini dl ajjah :D

Friday, October 16, 2020

Refund Biaya Tiket Citilink Akhirnya Selesai

Postingan ini ngasih liad proses yang saya lakuin ketika melakukan refund biaya tiket citilink. Jadi tiketnya dibeli tanggal 10 februari 2020 dengan harga Rp. 1.979.870. Kemudian jadwal penerbangannya tanggal 19 Mei 2020 dari Bandara Soekarno Hatta (Jakarta) ke Bandara Sultan Hasanuddin (Sulawesi Selatan). Terus karena bulan Mei ada pandemi, jadi penerbangannya dicancel dan emg dapat notifikasi dari pihak citilinknya untuk refund biaya tiket atau atur ulang jadwal penerbangannya. Jadi dipilih refund ajjah karena g' tau kapan pandemi covid akan berakhir. Pertama-tama ngebaca baik2 aturan refund dan langkahnya di

https://refund.citilink.co.id/

https://www.citilink.co.id/refundvoucher

Eittss... tapi diatas udah berubah daa... dl pas ngebaca bulan april g' kayk gitu wkwkw... tapi gpp...
Waktu ada step buat ngirim email ke refund@citilink.co.id atau langsung telpon ke no. CS Citilink di 08041080808

Nah... yang pertama yang saya lakuin adalah mengirimkan email ke refund@citilink.co.id tanggal 2 april seperti terlihat dibawah:

Abis itu dapat balasan email otomatis dari citilink beberapa detik kemudian

Nah diemail diatas saya sebenernya saya pengen ngekonfirmasi ulang prosedur refund tiket itu seperti apa, tapi karena sekitar 3/4 mingguan tidak ada balasan, akhirnya saya nelpon ke CS yang 08041080808

Naah dari situ baru dikasih tau format emailnya seperti apa, kemudian dokument kelengkapannya apa saja. Dan berikut contoh email yang saya kirimkan sesuai instruksi dari CS seperti terlihat dibawah:

Tiket diatas dikirim tanggal 7 Mei 2020 jam 11.14 siang.... Nah kemudian tanggal 8 Mei 2020 akhirnya dapat balasan dari pihak Citilink, emailnya seperti terlihat dibawah:

Nah itu ada lampiran email, isinya seperti ini:

HALAMAN 1

HALAMAN 2

Jadi intinya kita harus ngisi form tersebut, kemudian mengirimkan kembali form dan dokument yang dibutuhkan dalam waktu 7 hari kerja (atau 14 hari kerja, mending 7 hari ajjah :D). Terus SUBJECT EMAIL JANGAN DIGANTI

Nah jadinya sya ngelengkapi dokument diatas, terus direply balik ke pihak citilinknya (Waktu itu ngirim emailnya dihari yang sama ahhaha.. saking terlalu semangatnya :D)

Nah 2 minggu kemudian baru dapat balasan dari pihak Citilink (26 Mei 2020)

Intinya mereka telah menerima dokumentnya dan akan diverifikasi, kalau misalkan ada dokument yang kurang maka pihak Citilink akan memberi tahu lagi dikemudian hari.......

naaah... setelah email tersebut saya tidak melakukan apa2 cuma menunggu.......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................... 5 BULANAN KEMUDIAN........................................................... eh ada email masuk dari bank BNI: