2023 - Tutorial Seputar Teknologi

KEREN!! - MENGGUNAKAN TOAST NOTIFICATION DI VUE.JS 3 DENGAN VUE3-TOASTIFY


Halo sobat coding! 
Kali ini admin ingin membagikan cara untuk menampilkan toast notifikasi atau pesan pemberitahuan yang dapat diterapkan di project Vue 3 dan dapat dikustomisasi sesuai selera dan tentunya tidak sulit.

Sebelumnya, mari kita bahas sedikit tentang Vue JS. Vue JS adalah salah satu framework frontend open-source berbasis javascript yang digunakan untuk pembangunan atau pengembangan sebuah website atau tampilan ui (user interface). Selain itu, dengan Vue JS ini, kita dapat juga membuat sebuah SPA atau Single Page Application. Vue JS (saat penulisan artikel ini), dapat dikatakan sebagai salah satu framework yang cukup populer dikalangan developer. Tentunya, framework ini sangatlah mudah dipelajari dan digunakan. Saat ini, sudah banyak komunitas dari Vue JS yang dapat membantu saat kita membuat atau mendevelop sebuah aplikasi Vue JS. Vue 3 merupakan salah satu versi terbaru dari Vue JS saat penulisan artikel ini. 

Oya, dengan Vue JS ini juga, kita bisa membuat website PWA. PWA merupakan singkatan dari Progressive Web Applicaion, yakni suatu aplikasi web yang menawarkan pengalaman pengguna untuk merasakan aplikasi web seperti aplikasi native. Aplikasi native adalah aplikasi mobile yang dibuat khusus untuk sistem operasi tertentu, misalnya Android atau iOS. Intinya, dengan penerapan PWA, web kita secara otomatis bisa juga di 'download' untuk menjadi aplikasi di handphone/desktop kita. Jadi, setiap kali kita ingin membuka web, tidak perlu masuk ke browser lalu ketik url tujuan, melainkan dapat dilakukan hanya dengan klik aplikasi yang sudah ter'download' tadi. Kalau belum jelas mengenai PWA, silakan mencari tahu lebih lanjut di mbah gugel ya.. hehe

Oke, kita masuk pada inti pembahasan kita, yakni mengenai toast notifikasi di Vue 3. Dilansir dari getbootstrap.com, Toast adalah notifikasi ringan yang dirancang untuk meniru notifikasi push yang telah dipopulerkan oleh sistem operasi seluler dan desktop. Ga usa panjang lebar penjelasannya ya, intinya toast ini kurang lebih hasilnya sebagai berikut,


Keren? Menarik? Ya, ini yang akan admin bahas mengenai instalasi dan penerapannya. Langsung saja kita masuk ke pembahasan lebih dalamnya mengenai instalasi dan penerapan toast notifikasi di Vue 3.


INSTALASI DAN PENERAPAN TOAST NOTIFICATION DI VUE JS 3 MENGGUNAKAN LIBRARY VUE3-TOASTIFY

vue3-toastify adalah library toast notifikasi yang mudah digunakan dan sangat dapat disesuaikan untuk aplikasi Vue 3. Sebelum melanjutkan, pastikan requirement berikut terpenuhi ya agar nantinya toast berjalan sebagaimana mestinya!
  • vue version >= 3.2.0
    Jika kalian sudah ada project Vue, bisa lihat di file package.json bagian dependencies. Disana tertera versi dari vue yang digunakan.
Setelah memastikan requirement tersebut terpenuhi, mari kita masuk pada langkah instalasi dan penerapan. cekidot!

  1. Install library vue3-toastify. Buka cmd dan arahkan path pada project Vue. Lalu ketikkan perintah berikut:
    npm install --save vue3-toastify

    kurang lebih tampilan hasil dari npm install --save vue3-toastify

  2. Setelah berhasil instal, buka file src/main.js lalu import vue3-toastify dan deklarasikan di .use(). (lihat pada yang ditebalkan)

    Jika menggunakan JavaScript
    import { createApp } from 'vue';
    import Vue3Toasity from 'vue3-toastify';
    import App from './App.vue';
    import { loadFonts } from './plugins/webfontloader';
    import 'vue3-toastify/dist/index.css';
    
    loadFonts();
    
    createApp(App)
      .use(Vue3Toasity, {
        autoClose: 5000,
      })
      .mount('#app');
    

    Jika menggunakan TypeScript
    import { createApp } from 'vue';
    import Vue3Toasity, { typeToastContainerOptions } from 'vue3-toastify';
    import App from './App.vue';
    import { loadFonts } from './plugins/webfontloader';
    import 'vue3-toastify/dist/index.css';
    
    loadFonts();
    
    createApp(App)
      .use(Vue3Toasity, {
        autoClose: 5000,
      } as typeToastContainerOptions, )
      .mount('#app');
    

    didalam .use() terdapat deklarasi autoClose. Isi nilai waktu dalam milidetik yang diinginkan untuk toast muncul. Dalam contoh tersebut, gw menuliskan autoClose: 5000, yang berarti toast akan muncul selama 5 detik dan setelah itu menghilang.

  3. Setelah itu, tinggal gunakan toast nya. Caranya import terlebih dahulu { toast } dari vue3-toastify lalu gunakan dengan perintah:
    toast("A basic toast message", {
       // toast options here
    });
    Contoh aneka penerapannya:
    <template>
      <div>
        <button click="notify">Notify !</button>
      </div>
    </template>
    <script>
    import { toast } from 'vue3-toastify';
    
    export default {
      name: 'App',
      methods: {
        notify() {
          toast("Default Notification !"); //untuk toast default
    
          toast.success("Success Notification !", {
            position: toast.POSITION.TOP_CENTER,
          }); //untuk toast jenis sukses
    
          toast.error("Error Notification !", {
            position: toast.POSITION.TOP_LEFT,
          }); //untuk toast jenis error
    
          toast.warn("Warning Notification !", {
            position: toast.POSITION.BOTTOM_LEFT,
          }); //untuk toast jenis warning
    
          toast.info("Info Notification !", {
            position: toast.POSITION.BOTTOM_CENTER,
          }); //untuk toast jenis info
    
          toast("Custom Style Notification with css class!", {
            position: toast.POSITION.BOTTOM_RIGHT,
            className: 'foo-bar',
          });  //untuk custom toast
        }
      }
    }
    </script>
    <style>
       .foo-bar { color: #f00; }
    </style>
    

  4. Berikut ini untuk toast options yang dapat digunakan
    /**
     * support multiple
     * @default true
     */
    multiple?: boolean;
    /**
     * use like
     * ```
     * toast.info("Hello World.\n I am <b>Tom</b>", { dangerouslyHTMLString: true });
     * ```
     */
    dangerouslyHTMLString?: boolean;
    /**
     * Support right to left content
     * @default false
     */
    rtl?: boolean;
    /** Used to identify the ToastContainer when working with multiple container. Also used to set the id attribute */
    containerId?: Id;
    /**
     * One of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
     * @mark {@link ToastPosition}
     * @default 'top-right'
     */
    position?: ToastPosition;
    /**
     * Delay in ms to close the toast. If set to false, the notification needs to be closed manually
     * @default 5000
     */
    autoClose?: number | boolean;
    /**
     * Pass a custom close button.
     * To remove the close button pass `false`
     */
    closeButton?: CloseBtnType;
    /**
     * A reference to a valid react-transition-group/Transition component
     * @default 'bounce'
     */
    transition?: ToastTransition | CSSTransitionProps;
    /**
     * Display or not the progress bar below the toast(remaining time)
     * @default false
     */
    hideProgressBar?: boolean;
    /**
     * Keep the timer running or not on hover
     * @default true
     */
    pauseOnHover?: boolean;
    /**
     * Pause the timer when the window loses focus
     * @default true
     */
    pauseOnFocusLoss?: boolean;
    /**
     * Dismiss toast on click
     * @default true
     */
    closeOnClick?: boolean;
    /**
     * Add optional classes to the toast wrapper
     * @default -
     */
    toastClassName?: string; // TODO: ToastClassName
    /**
     * Add optional classes to the TransitionGroup container
     * @default ''
     */
    bodyClassName?: string; // TODO: ToastClassName
    /**
     * Add optional inline style to the container
     * @default {}
     */
    style?: CSSProperties;
    /**
     * Add optional classes to the progress bar
     * @default -
     */
    progressClassName?: string; // TODO: ToastClassName
    /**
     * Add optional inline style to the progress bar
     * @default {}
     */
    progressStyle?: CSSProperties;
    /**
     * Define the ARIA role for the toasts
     * @default 'alert'
     */
    role?: string;
    /**
     * One of auto, light, dark, colored
     * @description `auto` means automatically detects system theme colors
     * @mark {@link ToastTheme}
     * @default 'auto'
     */
    theme?: ToastTheme;

  5. Tampilan toast:



Itulah langkah-langkah instalasi dan penerapan dari toast notifikasi di project Vue 3 dengan menggunakan library vue3-toastify. Untuk melihat dokumentasi resminya, bisa lihat di sini.
Sekian artikel dari admin. Selamat mencoba dan semoga berhasil! Jika ada pertanyaan silakan tanyakan pada kolom komentar. Terima kasih dan salam coding!👋



INI CARANYA!! - TUTORIAL RUN PROGRAM LARAVEL HASIL CLONE DARI GIT/GITHUB


Halo sobat coding! 
Sadarkah sobat saat download atau clone project Laravel dari git/github pasti menemukan beberapa file bahkan folder yang hilang atau tidak ada? Ya, memang benar bahwa saat kita membuat project Laravel lalu kemudian kita upload (push) ke repositori git/github akan ada beberapa file dan folder yang tidak akan diikutsertakan. Ingat! ini bukan berarti project Laravel yang kita push atau project yang kita download ataupun clone dari git/github tersebut mengalami error atau corrupt ya! Hal ini adalah wajar. Pada umumnya, jika kita lihat dengan cermat di setiap project Laravel, kita akan menemukan file yang bernama .gitignore dan memang secara default saat pembuatan project Laravel, kita akan langsung diberikan file tersebut. Bila sobat buka file tersebut, maka isinya kurang lebih sebagai berikut:

/node_modules
/public/build
/public/hot
/public/storage
/storage/*.key
/vendor
.env
.env.backup
.env.production
.phpunit.result.cache
Homestead.json
Homestead.yaml
auth.json
npm-debug.log
yarn-error.log

Apa arti dari isi file tersebut? Tujuannya untuk apa? Nah, disini admin akan membantu sobat untuk memahami sedikit mengenai file yang cukup penting ini. Mari kita berbasa-basi terlebih dahulu.

Dilansir dari situs microsoft, file .gitignore ini akan berfungsi untuk membantu memastikan bahwa Git tidak menerapkan jenis file tertentu di repositori kita. Alasan tidak diterapkan atau tidak diikutsertakan dalam repositori git/github ialah mulai dari alasan ukuran file hingga keamanan. 
Sebagai contoh, dalam project Laravel akan ada folder bernama node_modules ataupun vendor yang masing-masing didalamnya terdapat banyak sekali file-file yang mana ukuran masing-masing filenya berbeda-beda dan jelas ini akan banyak memakan memori atau penyimpanan. Oleh karenanya, mengingat ukuran file yang besar jika diikutsertakan, maka folder ini akan kita keep sendiri dan tidak akan ikut dipush ke repositori git/github kita. Selain itu, dalam project Laravel terdapat pula file .env yang mana isinya ialah tentang konfigurasi-konfigurasi sesuai dengan environment sistem yang dipakai oleh masing-masing komputer pengguna yang tentunya hal ini tidak semua komputer pengguna sama dan selain itu, terdapat pula informasi yang bersifat kredensial (terkait keamanan) pada file ini. Oleh karena itu pula, file .env tidak ikut dipush ke repositori git/github. Kita bisa melihat daftar file dan folder apa saja yang tidak akan ikut dipush ke repositori git/github kita dengan membuka file .gitignore tersebut. Jadi, sampai sini seharusnya sobat sudah tahu ya apa itu file .gitignore dan kegunaannya.

fyi, selama folder node_modules, vendor, dll nya tidak ada dalam project Laravel, maka bila kita jalankan project tersebut (php artisan serve), maka jelas akan menimbulkan error dan project tidak bisa dijalankan dengan baik. Lalu, langkah apa yang harus ditempuh supaya project Laravel yang kita download atau clone dari git/github bisa dirun atau dijalankan dengan baik dan normal? Mari, admin akan berikan tutorial langkah demi langkahnya. langsung saja cekidott..!


CARA RUN PROGRAM LARAVEL HASIL CLONE DARI GIT/GITHUB

Pada saat kita download atau clone project Laravel di git/github. Kita perlu mendapatkan file dan folder yang tidak diikutsertakan supaya program tersebut bisa berjalan. Caranya adalah sebagai berikut:
  1. Pertama, buat file .env berdasarkan file env.example, caranya jalankan perintah berikut di cmd atau terminal:
    copy .env.example .env
  2. Selanjutnya, instal package-package yang diinstal dalam composer di mana package tersebut akan disimpan dalam folder vendor. Jalankan perintah berikut di cmd atau terminal:
    composer install
  3. Setelah berhasil membuat file .env dan instal package-package yang diperlukan, berikutnya jalankan perintah berikut:
    php artisan key:generate

    Perintah tersebut akan meng-generate key untuk kemudian dituliskan ke
    APP_KEY di file .env
  4. Kemudian, jika project Laravel tersebut memiliki database, buatlah nama database baru. Lalu sesuaikan nama database, username, dan password database di file .env. Setelah itu, jalankan perintah berikut:
    php artisan migrate

    Perintah tersebut akan meng-generate tabel yang dimiliki database dalam project Laravel, tapi sebelumnya bisa pastikan dahulu apakah project Laravel tersebut menyediakan file-file migrations di folder database/migrations. Jika tidak menyedialan file di folder database/migrations, maka lewati langkah ini.
  5. Selanjutnya, biasanya untuk project yang sudah jadi tidak hanya menyediakan file-file migrations tapi juga file-file seeder untuk data table yang ada di folder database/seeds sehingga perlu memasukkannya pula ke dalam table dengan perintah:
    php artisan db:seed
  6. Akhirnya, project Laravel sudah bisa di run. Untuk menjalankannya, jalankan perintah berikut:
    php artisan serve

    Kemudian buka http://localhost:8000

Itulah sobat Cara Run Program Laravel Hasil Clone dari Git/GitHub. Semoga artikel ini dapat membantu sobat coding sekalian. Terima kasih dan jangan lupa bagikan artikel ini agar makin banyak sobat coding yang mengetahuinya. Salam coding!


MENGAKTIFKAN FONT LIGATURES DI VISUAL STUDIO CODE


Hai sobat coding! 
Balik lagi sama admin yang setia menemani perjalanan coding kalian.. ciahhh...

Di artikel kali ini, admin mau kembali berbagi tips dan trik tutorial mengenai salah satu text editor yang paling banyak digunakan dan pastinya tidak asing lagi bagi sebagian banyak kalangan programmer. Text editor itu ialah Visual Studio Code. Yak, sebenernya artikel ini hanya untuk mempercantik tampilan code saja. Jadi, bisa aja artikel ini tidak penting bagi kalian yang tidak terlalu memperhatikan tampilan code. Namun, akan penting jika kalian memperhatikan tampilan code demi alasan kenyamanan saat melakukan coding. Admin akan membahas cara untuk mengaktifkan Font Ligatures di Visual Studio Code.

INI DIA! 8 EKSTENSI VISUAL STUDIO CODE UNTUK PROGRAMMER LARAVEL


Hai sobat coding!

Laravel. Siapa tak mengenal salah satu framework satu ini? Sebagian besar programmer bahkan sobat sendiri yang datang ke halaman ini pastinya mengenal. Ya ato ya?
Laravel merupakan salah satu framework PHP yang paling banyak dibicarakan dan gunakan pada era saat ini. Laravel adalah sebuah framework website berbasis PHP yang tersedia secara gratis dan tentunya open source. Framework ini dikembangkan oleh Taylor Otwell dan ditujukan untuk pengembangan aplikasi web mengikuti pola arsitektur MVC (model-view-controller). Adapun beberapa keuntungan yang didapatkan dengan menggunakan Framework ini, antara lain:
  • Pengujian Unit yang terbilang Easy (mudah)
  • Mekanisme keamanan tinggi
  • Dukungan komunitas yang kuat
  • Performa unggul
  • Powerful authentication
  • Migrasi Database
  • Multilingual capabilities