DEV Community: alfianandinugraha

Membuat Compound Components di Reactjs

alfianandinugraha — Mon, 09 May 2022 06:34:52 +0000

Selamat datang di post perdana saya tentang Reactjs 😄 Kali ini saya coba bahas salah satu pattern di Reactjs yang paling banyak digunakan yaitu Compound Components.

Compound dalam bahasa Indonesia artinya menggabungkan. Jadi Compound Components merupakan menggabungkan berapa komponen menjadi satu komponen.

Lhooo kan emang seperti itu kalau komponen di Reactjs 🤔

Nahh bedanya, kalau Compound Component ini komponen nya hanya bisa digunakan dalam scope tertentu saja. Kita contohkan pada HTML biasa. Di HTML terdapat tag <table />, <tbody />, dan <thead />. Tag <tbody /> dan <thead /> ini adalah bagian dari <table /> dan tidak bisa di gunakan diluar <table /> (bisa sih, tapi tidak ada efeknya).

Di komponen Reactjs juga bisa dibuat seperti itu lhoo 😁 Sekarang kita coba bikin studi kasus mengenai komponen Modal.

Pertama kita rancang dulu bagian-bagian pada Modal, yaitu:

Wrapper
Body
Footer

Ada 3 bagian utama pada Modal, maka bisa kita buat komponen setiap bagiannya dengan nama:

<Modal />, untuk Wrapper
<Modal.Body />, untuk Body
<Modal.Footer />, untuk Footer

*FYI: Bentuk komponen diatas disebut Namespace Component

Perancangan kita selesai, kini waktunya programming. Pertama-tama saya akan menggunakan Vite + React, kalau kalian pake create-react-app juga tidak masalah dan saya juga menggunakan UI framework yang bernama Material UI.

*Note: kamu tidak perlu berpatok dengan apa yang saya gunakan, kamu bisa menggunakan CRA dengan React-bootstrap serta NPM

Pertama kita inisialisasi proyeknya terlebih dahulu menggunakan vite:

yarn create vite modal-compound --template react

Setelah inisialiasi kita buka foldernya dan install dependenciesnya:

cd modal-compound && yarn install

Jika sudah di install jalankan dev servernya:

yarn dev

Install dependencies yang dibutuhkan:

yarn add @mui/material @emotion/react @emotion/styled react-nanny

react-nanny? apaan tuh? itu merupakan utilitas tambahan untuk mencari child dari react children. Mirip seperti slot pada Vue

Kalau sudah di install kini inisialisasi App.jsx dan main.jsx terlebih dahulu:
App.jsx

import { Button } from "@mui/material";

function App() {
  return (
    <div>
      <Button variant="contained">Open Modal</Button>
    </div>
  );
}

export default App;

main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Inisialisasi sudah selesai kini kita bermain di komponen modalnya. Coba membuat file di lokasi src/components/modal/index.jsx yang berisi:

const ModalBody = () => {}

const ModalFooter = () => {}

const Modal = () => {}

export default Modal

Setiap komponen sudah dibuat waktunya menambahkan bentuk Namespace menjadi:

const ModalBody = () => {}

const ModalFooter = () => {}

const Modal = () => {}

Modal.Body = ModalBody

Modal.Footer = ModalFooter

export default Modal

Sekarang kita menambahkan prop children disetiap bagian modal nya. Menjadi:

import ReactDOM from "react-dom";

const ModalBody = ({ children = null }) => {
  return <main>{children}</main>;
};

const ModalFooter = ({ children = null }) => {
  return <footer>{children}</footer>;
};

const Modal = ({ children = null, open = false }) => {
  if (!open) return null;

  return ReactDOM.createPortal(
    <div>{children}</div>,
    document.getElementById("root")
  );
};

Modal.Body = ModalBody;

Modal.Footer = ModalFooter;

export default Modal;

Pada komponen <Modal /> diatas saya menggunakan react-portal agar bisa di render di element dengan id root

Sekarang kita coba styling simple aja untuk komponen <Modal /> ini:

import { Box, Typography } from "@mui/material";
import ReactDOM from "react-dom";

const ModalBody = ({ children = null }) => {
  return <main>{children}</main>;
};

const ModalFooter = ({ children = null }) => {
  return <footer>{children}</footer>;
};

const Modal = ({
  children = null,
  open = false,
  title = "",
  onClose = () => {},
}) => {
  if (!open) return null;

  return ReactDOM.createPortal(
    <>
      <Box
        position="fixed"
        zIndex={20}
        top="50%"
        left="50%"
        sx={{ transform: "translate(-50%, -50%)" }}
        boxShadow="rgba(149, 157, 165, 0.2) 0px 8px 24px;"
        bgcolor="white"
        p="1rem"
        borderRadius=".5rem"
        width="500px"
      >
        <Box display="flex" alignItems="center" justifyContent="space-between">
          <Typography variant="h1" fontSize="1.5rem" fontWeight="bold">
            {title}
          </Typography>
          <Typography variant="caption" onClick={onClose}>
            close
          </Typography>
        </Box>
      </Box>
      <Box
        position="fixed"
        zIndex={10}
        bgcolor="rgba(0, 0, 0, 0.5)"
        width="100%"
        height="100%"
        top={0}
        left={0}
      />
    </>,
    document.getElementById("root")
  );
};

Modal.Body = ModalBody;

Modal.Footer = ModalFooter;

export default Modal;

Kini komponen <Modal /> akan menerima props onClose dan title. Kita lanjut ke komponen App.jsx nya:

import { Button } from "@mui/material";
import { useState } from "react";
import Modal from "./components/modal";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen((isOpen) => !isOpen);

  return (
    <div>
      <Modal open={isOpen} title="Simple Modal" onClose={toggle} />
      <Button variant="contained" onClick={toggle}>
        Open Modal
      </Button>
    </div>
  );
}

export default App;

Hasilnya seperti ini:

Waktunya penerapan Compound Component 😄 kini saya akan menggunakan utilitas react-nanny untuk mencari komponen didalam children

import { Box, Typography } from "@mui/material";
import ReactDOM from "react-dom";
import { getChildByType } from "react-nanny";

const ModalBody = ({ children = null }) => {
  return <main>{children}</main>;
};

const ModalFooter = ({ children = null }) => {
  return <footer>{children}</footer>;
};

const Modal = ({
  children = null,
  open = false,
  title = "",
  onClose = () => {},
}) => {
  const body = getChildByType(children, ModalBody);
  const footer = getChildByType(children, ModalFooter);

  if (!open) return null;

  return ReactDOM.createPortal(
    <>
      <Box
        position="fixed"
        zIndex={20}
        top="50%"
        left="50%"
        sx={{ transform: "translate(-50%, -50%)" }}
        boxShadow="rgba(149, 157, 165, 0.2) 0px 8px 24px;"
        bgcolor="white"
        p="1rem"
        borderRadius=".5rem"
        width="500px"
      >
        <Box display="flex" alignItems="center" justifyContent="space-between">
          <Typography variant="h1" fontSize="1.5rem" fontWeight="bold">
            {title}
          </Typography>
          <Typography variant="caption" onClick={onClose}>
            close
          </Typography>
        </Box>
        {body}
        {footer}
      </Box>
      <Box
        position="fixed"
        zIndex={10}
        bgcolor="rgba(0, 0, 0, 0.5)"
        width="100%"
        height="100%"
        top={0}
        left={0}
      />
    </>,
    document.getElementById("root")
  );
};

Modal.Body = ModalBody;

Modal.Footer = ModalFooter;

export default Modal;

Pada kode ini:

const body = getChildByType(children, ModalBody);
const footer = getChildByType(children, ModalFooter);

Digunakan untuk mencari komponen dengan komponen dasarnya. Misalkan getChildByType(children, ModalBody) ini berarti saya mencari komponen ModalBody didalam children.

Karena children ini bisa menerima banyak sekali komponen. Oleh karena itu kita memilih komponen yang dibutuhkan saja. Inilah Compound Components.

Penggunaannya yaitu pada App.jsx:

import { Button, TextField } from "@mui/material";
import { useState } from "react";
import Modal from "./components/modal";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen((isOpen) => !isOpen);

  return (
    <div>
      <Modal open={isOpen} title="Simple Modal" onClose={toggle}>
        <Modal.Body>
          <TextField placeholder="Masukkan nama" variant="standard" />
        </Modal.Body>
        <Modal.Footer>
          <Button variant="contained">Simpan</Button>
        </Modal.Footer>
      </Modal>
      <Button variant="contained" onClick={toggle}>
        Open Modal
      </Button>
    </div>
  );
}

export default App;

Hasilnya:

Maaf kalau desainnya kurang pas, nanti kita perbaiki hehe

Sebentar 🤔 Kok bisa ModalBody bisa kepilih padahal kita menggunakan Modal.Body bukan ModalBody. Nahh ingat, pada komponen <Modal /> kita sudah membuat ini:

Modal.Body = ModalBody;

Modal.Footer = ModalFooter;

Oleh karena itu Modal.Body bisa panggil

Kita coba styling sedikit yaa:
modal/index.jsx

import { Box, Typography } from "@mui/material";
import ReactDOM from "react-dom";
import { getChildByType } from "react-nanny";

const ModalBody = ({ children = null }) => {
  return (
    <Box component="main" my="1rem">
      {children}
    </Box>
  );
};

const ModalFooter = ({ children = null }) => {
  return <footer>{children}</footer>;
};

const Modal = ({
  children = null,
  open = false,
  title = "",
  onClose = () => {},
}) => {
  const body = getChildByType(children, ModalBody);
  const footer = getChildByType(children, ModalFooter);

  if (!open) return null;

  return ReactDOM.createPortal(
    <>
      <Box
        position="fixed"
        zIndex={20}
        top="50%"
        left="50%"
        sx={{ transform: "translate(-50%, -50%)" }}
        boxShadow="rgba(149, 157, 165, 0.2) 0px 8px 24px;"
        bgcolor="white"
        p="1rem"
        borderRadius=".5rem"
        width="500px"
      >
        <Box display="flex" alignItems="center" justifyContent="space-between">
          <Typography variant="h1" fontSize="1.5rem" fontWeight="bold">
            {title}
          </Typography>
          <Typography variant="caption" onClick={onClose} color="lightgray">
            close
          </Typography>
        </Box>
        {body}
        {footer}
      </Box>
      <Box
        position="fixed"
        zIndex={10}
        bgcolor="rgba(0, 0, 0, 0.5)"
        width="100%"
        height="100%"
        top={0}
        left={0}
      />
    </>,
    document.getElementById("root")
  );
};

Modal.Body = ModalBody;

Modal.Footer = ModalFooter;

export default Modal;

App.jsx

import { Button, TextField } from "@mui/material";
import { useState } from "react";
import Modal from "./components/modal";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen((isOpen) => !isOpen);

  return (
    <div>
      <Modal open={isOpen} title="Login" onClose={toggle}>
        <Modal.Body>
          <TextField
            placeholder="Email"
            variant="standard"
            sx={{ width: "100%" }}
          />
          <TextField
            placeholder="Password"
            variant="standard"
            type="email"
            sx={{ width: "100%", mt: "1rem" }}
          />
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={toggle} variant="contained">
            Login
          </Button>
        </Modal.Footer>
      </Modal>
      <Button variant="contained" onClick={toggle}>
        Open Modal
      </Button>
    </div>
  );
}

export default App;

Hasil nya:

Lumayanlah yaa

Keuntungan ✨

Apa yaa keuntungan Compound Component ini? sepertinya sama aja mengguankan children biasa. Keuntungannya tuh disini:

import { Button, TextField } from "@mui/material";
import { useState } from "react";
import Modal from "./components/modal";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen((isOpen) => !isOpen);

  return (
    <div>
      <Modal open={isOpen} title="Login" onClose={toggle}>
        <Modal.Footer> <!-- Footer terlebih dahulu -->
          <Button onClick={toggle} variant="contained">
            Login
          </Button>
        </Modal.Footer>
        <Modal.Body>
          <TextField
            placeholder="Email"
            variant="standard"
            sx={{ width: "100%" }}
          />
          <TextField
            placeholder="Password"
            variant="standard"
            type="email"
            sx={{ width: "100%", mt: "1rem" }}
          />
        </Modal.Body>
      </Modal>
      <Button variant="contained" onClick={toggle}>
        Open Modal
      </Button>
    </div>
  );
}

export default App;

Kamu bisa mengisi <Modal.Footer /> terlebih dahulu lalu <Modal.Body />. Kalau menggunakan children biasa, sudah pasti posisinya berubah. Nahh kalau menggunakan Compound Component ini meski posisi di parent nya berubah, tapi didalam komponen Compound nya tidak akan berubah

Hasilnya:

Kekurangan 🔻

Sejauh pengalaman saya, kekurangan dari Compound Components ini adalah setup komponen yang lama. Kita harus mendefinisikan setiap bagiannya (Header, Body, dll). Jadi tetap ada kekurangannya hehe

Penutup

Mungkin itu saja pembahasan mengenai Compound Component pada Reactjs. Kalau menurutmu ini bermanfaat silahkan bagikan ke teman-teman mu yaa 😄

Sampai jumpa di tutorial React selanjutnya 👋

Oh iyaa untuk source code nya kunjungi https://github.com/alfianandinugraha/modal-compound

Apa itu try, on, catch, dan finally di Dart ?

alfianandinugraha — Fri, 03 Dec 2021 15:08:50 +0000

Hallowww semua, di artikel ini saya coba membahas mengenai Exception Handling di bahasa Dart.

Apa itu Exception Handling ? ini merupakan cara komputer untuk mengelola error. Jadi saat bikin program itu tidak semuanya akan berjalan mulus, nanti pasti ada error yang harus kita kelola.

Pada kondisi apa terjadi error ? Umumnya exception handling digunakan saat:

Tipe data tidak sesuai
Method / property tidak ditemukan
Error saat membaca file / IO
Kesalahan jaringan saat melakukan request / response
(...tambahkan dikolom komentar yaa hehe)

Di Dart sendiri sudah disediakan fitur exception handling, dan caranya pun mirip seperti bahasa pemrograman lainnya. Konsep utama dari exception handling adalah try-catch.

try-catch

try merupakan tahapan awal untuk menjalankan exception handling. Sedangkan catch digunakan untuk menerima errornya.

Contoh programnya :

try {
  // Kode disini akan berjalan pertama kali
  print("Proses...");
  dynamic name = 20;
  print(name.length); // Awww error !
  print("Finish !"); // Kode tidak dijalankan
} catch (err) {
  print("Terjadi kesalahan");
}

Program diatas akan mengeluarkan error karena property length itu tidak ada di variable name.

Jadi cara kerjanya adalah pertama kode blok yang ada di dalam try akan dijalankan terlebih dahulu. Ketika terjadi error maka akan langsung lompat ke blok catch.

Output:

Kode program print("Finish !"); tidak dijalankan.

on

Dari bahasa yang saya pelajari sepertinya, Dart ini membuat konsep baru pada Exception Handling, karena pada umumnya yang tersedia hanyalah try, catch, dan finally tapi di Dart ini ada on.

Jadi apa itu on pada Dart ? on digunakan untuk mengelola error berdasarkan jenis errornya. Di kode sebelumnya kita hanya menggunakan try-catch saja yang dimana semua error akan masuk ke dalam catch.

Kode program diatas kita jalankan ulang tapi dengan print yang berbeda:

try {
  // Kode disini akan berjalan pertama kali
  print("Proses...");
  dynamic name = 20;
  print(name.length); // Awww error !
  print("Finish !"); // Kode tidak dijalankan
} catch (err) {
  print("Terjadi kesalahan");
  print(err.toString()); // Kode program baru
}

Outputnya adalah:

Dari gambar diatas kita melihat ada error dengan jenis NoSuchMethodError. Dari dokumentasinya, dituliskan:

...corresponding to a failed method call

Artinya error NoSuchMethodError adalah jenis error yang digunakan ketika method pada variabel tidak ada. Ini terjadi akibat property / method length tidak ada di variabel name.

Terus dimana `on` nya ?

Nahh disini kita bisa menerapkan keyword on. Maka programnya menjadi:

try {
  // Kode disini akan berjalan pertama kali
  print("Proses...");
  dynamic name = 20;
  print(name.length); // Awww error !
  print("Finish !"); // Kode tidak dijalankan
} on NoSuchMethodError {
  // Kode program yang dialam `on` ini yang akan dijalankan
  print("Method tidak ditemukan");
} catch (err) {
  // Tidak dijalankan
  print("Terjadi kesalahan");
  print(err.toString());
}

Output:

Sekarang yang keluar adalah Method tidak ditemukan bukan Terjadi kesalahan. Kok iso ? itu karena jenis error nya adalah NoSuchMethodError jadi kode program yang ada didalam on NoSuchMethodError itulah yang akan dijalankan.

finally

finally akan dijalankan ketika semua proses selesai, baik itu ada error atau tidak.

Contoh program ketika ada error:

try {
  // Kode disini akan berjalan pertama kali
  print("Proses...");
  dynamic name = 20;
  print(name.length); // Awww error !
  print("Finish !"); // Kode tidak dijalankan
} catch (err) {
  print("Terjadi kesalahan");
} finally {
  print("Proses try-catch selesai");
}

Output program:

Contoh kode program ketika tidak ada error:

try {
  // Kode disini akan berjalan pertama kali
  print("Proses...");
  dynamic name = 20;
  print(name);
  print("Finish !"); // Berjalan
} catch (err) {
  print("Terjadi kesalahan");
} finally {
  print("Proses try-catch selesai");
}

Output program:

Wait, kenapa harus pakai `finally` ?

Bukankah sama aja ketika kita tidak menggunakan finally ?

Okee kita coba kalau tanpa finally yaa. Jadi programnya:

try {
  // Kode disini akan berjalan pertama kali
  print("Proses...");
  dynamic name = 20;
  print(name.length); // Awww error !
  print("Finish !"); // Kode tidak dijalankan
} catch (err) {
  print("Terjadi kesalahan");
}

print("Proses try-catch selesai");

Output program:

Ehhh, iyaa juga yaaa...

Eitss, finally ini biasanya digunakan untuk membuat program kita lebih konsisten. Umumnya digunakan ketika:

Selesai terhubung ke database
Membersihkan memori

Sumber https://stackoverflow.com/a/16705037/9905881

Okee deh mungkin itu saja, untuk pembahasan mengenai error / exception handling di bahasa Dart. Kalau kalian memiliki saran / kritikan silahkan komentar yaa 😉

Terima kasih sudah membaca ~

Cara Mudah Upgrade PHP7 ke PHP8 di XAMPP

alfianandinugraha — Sun, 28 Nov 2021 07:30:33 +0000

Halo semuanya, pada blog kali ini saya coba membagikan cara upagrade PHP7 ke PHP8 di XAMPP. XAMPP merupakan sebuah software untuk membuat aplikasi berbasis website XAMPP sendiri singkatan dari X(Cross), A(Apache), M(Mysql), P(PHP), P(Perl).

Kalau kalian lihat di website download XAMPP kini sudah tersedia XAMPP dengan versi 8 https://www.apachefriends.org/download.html. Tapi kalau XAMPP kamu masih menggunakan PHP7 dan kamu mau upgrade ke PHP8, tutorial ini mungkin cocok buat kamu.

Tapi sebelumnya ada apa sih di PHP8 ? PHP8 kini mengadopsi JIT Compiler yang membuat versi ini menjadi lebih cepat dibanding versi sebelumnya.

Ditutorial ini saya menggunakan XAMPP versi ke v3.3.0

Cek Versi PHP di XAMPP

Sebelumnya yuk kita cek dulu versi PHP di XAMPP masing-masing, caranya.

Jalankan dulu XAMPP nyaa yaa kan. Disini sudah berjalan di port 3030
Sekarang buat folder version di htdocs kalian lalu buat file di dalammnya phpinfo.php
Lalu buka menggunakan Notepad / Notepad++ biar cepat. Dan ketik
```
<?php
phpinfo();
?>
```
Yang terakhir buka link http://localhost:3030/version/phpinfo.php. Sesuaikan sama port Apache kamu berjalan yaa, kalau jalan di port 5000 maka link nya http://localhost:5000/version/phpinfo.php

Nahh kamu akan menemukan versi PHP kamu dan nanti tampilannya jadi seperti ini

Disini saya masih menggunakan PHP7 versinya 7.3.33. Kalau kalian sudah menggunakan PHP8, kalian lebih baik stop sampai disini tutorialnya 😄 karena kalian sudah sesuai target.

Tapi bagi kalian yang masih PHP7 yukk kita lanjutkan.

Upgrade PHP7 ke PHP8

Download dulu PHP8 nya di https://windows.php.net/download. Pada saat saya membuat tutorial ini (28 November 2021) versi PHP yang terbaru adalah 8.1.0. Tapi di website download XMAPP, XAMPP baru support untuk 8.0.13. Jadi saya download PHP versi 8.0.13.
Klik zip untuk mendownload, pilih yang bagian VS16 x64 Thread Safe (2021-Nov-16 22:28:26) yaa atau klik link ini https://windows.php.net/downloads/releases/php-8.0.13-Win32-vs16-x64.zip untuk langsung mendownload
Jika sudah berhasil silahkan ekstrak zip tersebut
Copy folder hasil ekstrak ke folder utama xampp, kalau di saya di C:/xampp
Matikan dahulu service Apache di XAMPP nya
Folder php di folder xampp ubah nama nya menjadi php-7. Alasan saya mengubah ini untuk jaga-jaga ketika PHP8 ada kendala jadi saya tidak perlu mendownload PHP7 lagi.
Folder folder hasil ekstrak yaitu php-8.0.13-Win32-vs16-x64 tadi silahkan ubah nama nya menjadi php
Jika semua sudah di copy kini waktunya update configurasi Apachenya. Jadi sebelumnya Apache masih menganggap bahwa PHP yang kita gunakan adalah versi 7. Sekarang buka file httpd-xampp.conf menggunakan Notepad / Notepad++ di folder xampp > apache > conf > extra
Silahkan copy kan httpd-xampp.conf menjadi 2 yang hasil copy nya diganti nama menjadi httpd-xampp-php7.conf
Buka httpd-xampp.conf menggunakan notepad / notepad++

Silahkan cari kode

LoadFile "C:/xampp/php/php7ts.dll"
LoadFile "C:/xampp/php/libpq.dll"
LoadModule php7_module "C:/xampp/php/php7apache2_4.dll"

Lalu ubah menjadi

LoadFile "C:/xampp/php/php8ts.dll"
LoadFile "C:/xampp/php/libpq.dll"
LoadModule php_module "C:/xampp/php/php8apache2_4.dll"

Jika sudah diubah, langkah selanjutnya adalah mengganti semua text php7_module menjadi php_module
Jangan lupa di save yaa teman-teman 😁
Kalau sudah di save notepad++ nya boleh di close terus buka lagi http://localhost:3030/version/phpinfo.php
Andddd, taraaaaa ! PHP kamu sudah menjadi PHP8

Sebentar, kok PHPMyAdmin jadi error ?

Kalau kalian buka phpmyadmin nanti akan muncul error seperti ini

Disitu ada pesan

Composer detected issues in your platform: Your Composer dependencies require the following PHP extensions to be installed: mysqli, openssl

Itu artinya kalau PHP yang kita install ini belum mengaktifkan ekstensi yang dibutuhkan. Jadi masih banyak yang disabled gitu.
Cara ubahnya gini:

Buka folder php yang ada didalam folder xampp ( folder php ini sudah PHP8 yaa )
Copy file php.ini-development menjadi 2 lalu ubah file copy an nya menjadi php.ini
Kalau muncul pesan ini silahkan klik Yes saja yaa
Buka file php.ini menggunakan notepad / notepad++
Silahkan cari kode ini
Lalu ubah menjadi, sedikit pembahasan PHP ini menggunakan ekstensi luar untuk menjalankan programnya oleh karena itu kita harus menyertakan lokasi ekstensi ini dan lokasi ekstensi PHP saya ada di C:\xampp\php\ext (Sesuaikan sama lokasi instalasi xampp masing-masing yaa)
Selanjutnya, kalian scroll kebawah lalu temukan kode ini
Itu merupakan kumpukan ekstensi yang tersedia di PHP8 dan masih belum diaktifkan, cara mengatifkannya hapus tanda titik koma / ; didepan ekstensi. Menjadi
Jangan lupa di save yaa file php.ini 😉
Silahkan restart lagi Apache dan Mysql di XAMPP nya
Yayyy sekarang PHPMyAdmin sudah jalan

Mungkin itu saja mengenai tutorial upgrade PHP7 ke PHP8. Kalau ada kesalahan atau kebingungan silahkan komentar yaa 🤩 sampai jumpa di tutorial berikutnya

Menggunakan SSH untuk Remote GitHub

alfianandinugraha — Wed, 08 Sep 2021 13:29:06 +0000

Halooo semuanya pada kesempatan ini, saya coba membagikan cara untuk menggunakan SSH untuk remote GitHub. Sebelum menggunakan SSH ini pasti kalian seringnya menggunakan HTTPS, nahh kekurangan dari HTTPS ini adalah kita harus menyimpan password GitHub kita kedalam config agar setiap push commit tidak perlu input email/username dan password lagi.

Tapi, dengan menggunakan SSH ini kalian tidak perlu repot untuk menyimpan password lagi karena kita cukup membuat sebuah public dan private key untuk berkomunikasi dengan GitHub. Yukkk kita mulai

Pada tutorial ini saya menggunakan Git Bash sebagai terminalnya. Kalau kamu menginstall git sebelumnya pasti sudah mendapatkan paket Git Bash ini.

Ketik command ssh-keygen
Kamu akan mendapatkan input berupa nama file public/private key nya nanti. Untuk sekarang kamu bisa mengkosongkannya terlebih dahulu
Untuk input passphrase kamu bisa kosongkan keduanya

Kalau semua langkahnya sudah diikuti nanti akan muncul hasilnya seperti ini :

Apakah sudah beres ? tentu belum hehe. Sekarang waktunya mencari lokasi public key kamu

Dari pesan tadi ada sebuah teks Your public key has been saved in /c/Users/alfian-andi/.ssh/id_rsa.pub nahh kamu hanya perlu pergi ke folder tersebut

lalu buka Git Bash disana dengan cara klik kanan lalu pilih Git Bash Here. Jika sudah dibuka lalu ketik command :



cat id_rsa.pub | clip.exe

Tapi nanti ngga ada apa-apa. Jadi maksud dari command itu adalah buka id_rsa.pub lalu copy semua isinya kedalam clipboard. Untuk membuktikannya coba kamu buka notepad lalu ctrl + v

Kalau muncul itu berarti sudah tercopy public-key nya

Memasukkan Public-key ke GitHub

Sekarang waktunya untuk menambahkan public-keynya kedalam akun GitHub kita

Login GitHub kamu https://github.com/
Klik foto profile kamu di kanan-atas lalu pilih settings
Di menu bagian kiri pilih SSH and GPG keys
Lalu pada bagian SSH keys kamu klik buttom new SSH key
Untuk title kamu isi aja bebas, disini saya isi Laptop
Nah untuk bagian key ini kamu isi dengan yang saya contohin di notepad tadi
Terakhir klik Add SSH key

Uji Coba SSH

Untuk menguji coba SSH nya disini saya coba buat sebuah private repo dengan nama hello-ssh

Saya coba tambah langsung README.md nya biar ada isinya wkwkwk.
Ketika berhasil dibuat seperti ini

Kalau kita menggunakan HTTPS command untuk clonenya adalah



git clone https://github.com/alfianandinugraha/hello-ssh.git

karena sekarang sudah menggunakan SSH jadi commandnya



git clone git@github.com:alfianandinugraha/hello-ssh.git

Agar lebih gampang, kamu bisa copy alamat clonenya dibagian button code berwarna hijau lalu pilih SSH

Dannn finally kita bisa clone GitHub menggunakan SSH

Uji Coba Push Commit

Sepertinya clone repo saja tidak cukup. Disini saya coba menambahkan uji coba untuk commit

Buat file hello.txt
Lalu isi file tersebut dengan Hello world
Jalankan perintah git add . && git commit -m "Menambahkan hello.txt"
Lalu jalankan perintah git push -u origin main untuk push commit kita ke branch main Dan untuk percobaan ini akhirnya sukses juga

Untuk mengeceknya coba buka repository kamu yang tadi. Dan yaaa sekarang sudah berhasil

Lebih Dekat Dengan Lambda di Kotlin

alfianandinugraha — Wed, 01 Sep 2021 12:08:31 +0000

Lambda disebut juga sebagai anonymous function, karena sifatnya yang tidak perlu mendeklarasikan fungsi. Perbedaan function dengan lambda adalah lambda langsung mengembalikan nilai tanpa perlu menggunakan keyword return. Contoh kode:

fun main () {
    val sayHello = { name: String -> "Hello, I'm $name" }
    println(sayHello("Andi")) // output : "Hello, I'm Andi"
}

Penulisan lambda juga bisa ditaruh di luar fungsi main. Karena lambda ini tidak perlu menggunakan return maka cara untuk membuat multilinenya adalah

fun main() {
    val add = { num1: Int, num2: Int ->
        val result = num1 + num2
        result
    }
    println(add(5, 2)) // output : 7
}

Keyword `it`

It akan merujuk kepada parameter yang hanya berjumlah satu. Contoh :

fun main() {
    // val getMessage: (String) -> String = { name: String -> "Hello from $name" }
    val getMessage: (String) -> String = { "Hello from $it" }
    val message: String = getMessage("Andi")
    print(message) // output : Hello from Andi
}

Pada contoh diatas untuk membuat lambda getMessage bisa menggunakan kode :

val getMessage: (String) -> String = { name: String -> "Hello from $name" }

Tapi karena lambda ini hanya memiliki satu parameter saja yaitu name maka parameter bisa dihapus lalu untuk memanggil parameternya cukup menggunakan keyword it.

val getMessage: (String) -> String = { "Hello from $it" }

Syarat untuk menggunakan keyword it adalah

Parameter harus ada satu dan tidak boleh lebih
Harus mendeklarasikan tipe datanya, pada contoh tipe data pada getMessage adalah (String) → String

Empty Parameter

Lambda bisa dibuat tanpa menggunakan parameter. Contohnya :

fun main() {
    val sayHi = { "Hi world !" }
    println(sayHi()) // output : Hi world !
}

Let, Run, Apply, & Also di Kotlin

alfianandinugraha — Sat, 28 Aug 2021 11:15:51 +0000

Fungsi dari scope function adalah untuk mengelola object menggunakan lambda / fungsi ekstensi. Kegunaan ini adalah agar kode mudah dibaca karena memiliki scope masing-masing. Buat kode class terlebih dahulu untuk nanti dipakai lagi :

data class Product (
    var name: String,
    var price: Int
)

Jenis-jenis

Perlu diingat bahwa materi ini akan berkaitan erat dengan lambda bagi kamu yang belum tau apa itu lambda silahkan cek disini yaa :

Lebih Dekat Dengan Lambda di Kotlin

alfianandinugraha ・ Sep 1 '21 ・ 1 min read

#kotlin #lambda #indonesia

Let

Let lambda memungkinkan untuk mengelola object sekaligus mengembalikan sesuatu. Let juga memiliki satu parameter yang nantinya juga bisa dialiaskan dengan keyword it. Contoh kode :

fun main() {
    val asus = Product("Asus", 6_000_000)

    val description: String = asus.let { product ->
        println(product.name)
        println(product.price)
        "Name ${product.name}, Price: Rp${product.price}"
    }

    println(description)
}

Hasil output :

Run

Lambda ini hampir mirip dengan let yang membedakan adalah lambda ini tidak memiliki parameter jadi untuk mengakses objectnya menggunakan keyword this. Contoh kode :

fun main() {
    val lenovo = Product("Lenovo", 3_000_000)

    val description: String = lenovo.run {
        println(this.name)
        println(this.price)
        "Name ${this.name}, Price: Rp${this.price}"
    }

    println(description)
}

Hasil output :

Also

Also memiliki 1 parameter dan mengembalikan nilai object itu sendiri. Contoh :

fun main() {
    val msi = Product("MSI", 5_000_000)

    val newMsi: Product = msi.also { product ->
        println(product.name)
        println(product.price)
    }
}

Hasil Output :

Apply

Berbeda dengan sebelumnya, apply hanya mengembalikan nilai Object itu sendiri saja dan tidak memiliki paramater. Jadi untuk mengakses properti nya menggunakan keyword this

fun main() {
    val hp = Product("HP", 4_000_000)

    val newHp: Product = hp.apply {
        println(this.name)
        println(this.price)
    }
}

Hasil Output :

Mari Mengenal Infix Notation di Kotlin

alfianandinugraha — Sun, 22 Aug 2021 17:05:52 +0000

Infix merupakan notasi antara operand dan operator (+, -, *, /) dimana operator berada di antara dua operand. Bentuk Infix pada matematika :

2 + 3 = 5
5 + 5 = 10

Misalkan pada 2 + 3, 2 dan 3 merupakan operand dan + merupakan operator.

Bentuk Infix diatas bisa diterapkan kedalam kotlin, jadinya

fun Int.kurangi(newValue: Int): Int {
    return this - newValue
}

infix fun Int.tambah(newValue: Int): Int {
    return this + newValue
}

fun main() {
    val hasil = 10.kurangi(4)
    val hasil2 = 5 tambah 5
    val hasil3 = 5.tambah(5)
}

Penjelasan kode

Ada dua function yang ditambahkan pada tipe data Int yaitu kurangi dan tambah maka setiap tipe data Int bisa menggunakan kedua fungsi tersebut. Misalkan pada variabel hasil karena 10 itu adalah tipe data Int maka bisa langsung di eksekusi fungsinya jadi 10.kurangi(4)

Penulisannya bisa dipersingkat menggunakan keyword Infix sebelum keyword fun. Misalkan pada method tambah, karena method ini adalah sebuah Infix maka pemanggilannya bisa dipersingkat menjadi 5 tambah 5 (notasi infix)

Class Infix Method

Kode di atas merupakan contoh Infix pada sebuah class Int. Kotlin juga support Infix pada method di sebuah class. Misalkan :

class Angka(var angka: Int) {
    infix fun tambah(nilai: Int): Int {
        return angka + nilai
    }
}

fun main() {
    val hasil = Angka(10)
    println(hasil tambah 10)
}

Syarat Infix

Bisa bertipe data apa saja termasuk String atau Double
Harus memiliki satu parameter

DEV Community: alfianandinugraha

Membuat Compound Components di Reactjs

Keuntungan ✨

Kekurangan 🔻

Penutup

Apa itu try, on, catch, dan finally di Dart ?

try-catch

on

Terus dimana on nya ?

finally

Wait, kenapa harus pakai finally ?

Cara Mudah Upgrade PHP7 ke PHP8 di XAMPP

Cek Versi PHP di XAMPP

Upgrade PHP7 ke PHP8

Sebentar, kok PHPMyAdmin jadi error ?

Menggunakan SSH untuk Remote GitHub

Memasukkan Public-key ke GitHub

Uji Coba SSH

Uji Coba Push Commit

Lebih Dekat Dengan Lambda di Kotlin

Keyword it

Empty Parameter

Let, Run, Apply, & Also di Kotlin

Jenis-jenis

Lebih Dekat Dengan Lambda di Kotlin

alfianandinugraha ・ Sep 1 '21 ・ 1 min read

Let

Run

Also

Apply

Mari Mengenal Infix Notation di Kotlin

Class Infix Method

Syarat Infix

Terus dimana `on` nya ?

Wait, kenapa harus pakai `finally` ?

Keyword `it`