What’s API

An API is a set of rules that allows different software applications to communicate. It acts as a bridge that delivers your request to a server and sends the response back to you.

__________________________________________________________________________________________________________

Let’s Try With Me!

__________________________________________________________________________________________________________

Setup

____________________________________________________________________________

Technology

• Node.js

• Hono

• Echo API / postman / other application for testing API

____________________________________________________________________________

Structure File

Project

|— index.js

____________________________________________________________________________

Init & Install Project

• NPM init

npm init -y

• Install Hono

npm install hono @hono/node-server

• Install Echo API in extension if you use Visual Studio Code or from website

• Add and updaten a little code in package.json

"type": "module",
"scripts": {
  "start": "node index.js"
}

__________________________________________________________________________________________________________

Code Code!

__________________________________________________________________________________________________________

Main Code

____________________________________________________________________________

Index.js Code

import { Hono } from "hono";
import { serve } from "@hono/node-server";

const app = new Hono();

app.get("/", (c) => {
    return c.html(`
        <h1>Hello Hono</h1>
        <p>Available routes:</p>
        <ul>
        <li><a href="/text">/text</a> - Show Normal Text</li>

        <li><a href="/json">/json</a> - Show JSON Output</li>
        </ul>`);
});

// Rute untuk Text
app.get("/text", (c) => c.text("this is a normal text response"));

// Rute untuk JSON
app.get("/json", (c) => c.json({data : "Hello Everyone.", status: "ok"}));

serve({fetch: app.fetch, port:3100}, (info) => {
    console.log(`server run in http://localhost:${info.port}`);
});

__________________________________________________________________________________________________________

Testing

____________________________________________________________________________

Run Code

npm run start

____________________________________________________________________________

Echo API

• Click HTTP1/2 Request for get new file testing api

• fill in the url section with this http://localhost:3100/json

• Change POST to GET

• Click Send

__________________________________________________________________________________________________________

Closing

__________________________________________________________________________________________________________

And that’s it—you’ve just created your first API with Hono.
Think of this API as a clean, direct gateway that knows exactly how to receive a request and return the right response.
This simple setup is the backbone of many real-world backend systems.
Now that the gateway is open, what service will you connect next?
Keep building and happy coding 🚀

__________________________________________________________________________________________________________

What’s Fetch

Fetch is a built-in JavaScript function used to make network requests. It is the action of going to an API's URL to retrieve information and bringing it back to your code.

__________________________________________________________________________________________________________

Let’s Try With Me!

__________________________________________________________________________________________________________

Setup

____________________________________________________________________________

Technology

• JavaScript

• HTML

____________________________________________________________________________

Structure File

Project

|— index.html

|— script.js

__________________________________________________________________________________________________________

Code Code!

__________________________________________________________________________________________________________

URL

____________________________________________________________________________

This Example URL

https://jsonplaceholder.typicode.com/users

Before we use this url, we can test this url with echo api

• first you can download echo api extension in vs code

• then click http1/2 request

• after that change POST to GET

• then click send and you will see the data from that api or that url

__________________________________________________________________________________________________________

HTML

____________________________________________________________________________

Code index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trying Fetch API</title>
</head>
<body>
    <h1>users</h1>
    <div id="users-container"></div>
    <script type="module" src="script.js"></script>
</body>
</html>

__________________________________________________________________________________________________________

JAVASCRIPT

____________________________________________________________________________

Code script.js

const usersContainer = document.getElementById("users-container");

async function fetchUsers() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const users = await response.json();

    users.forEach((user) => {
      const userDiv = document.createElement("div");
      userDiv.innerHTML = `
        <h2>${user.name}</h2>
        <p>Email: ${user.email}</p>
        <p>Phone: ${user.phone}</p>
      `;
      usersContainer.appendChild(userDiv);
    });
  } catch (error) {
    console.error("Error fetching users:", error);
  }
}

fetchUsers();

__________________________________________________________________________________________________________

See Result

____________________________________________________________________________

• Right-Click and choose Show Preview or Open With Live Server, If you don't have it yet, first download the extension in VS Code called "show preview" or "live server".

• And This is Result

__________________________________________________________________________________________________________

Little A Explain

____________________________________________________________________________

• We create a container to display the data using a div with the ID users-container.

• In JavaScript, we create an asynchronous function named fetchUsers.

• We use fetch to get data from the URL and store it in the response variable.

• We convert that response into a JSON format so we can read the data easily.

• We loop through the users array and create a new div for each person.

• Finally, we append all those elements into our main container.

__________________________________________________________________________________________________________

Closing

And there you have it! You have successfully built your very first "Digital Bridge".

Using the Fetch API is like sending a professional messenger to gather treasures from across the internet and bringing them home to your website. This simple piece of code is the foundation of almost every modern app you see today.

Now that the messenger knows the way, what kind of data will you ask for next? Keep practicing, and happy coding! 🚀

__________________________________________________________________________________________________________

What’s

Today we’ll build a data courier system. The goal is to connect our application code to a database so we can seamlessly send and retrieve data using the Drizzle ORM.

_____________________________________________________________________________________________________

Let’s Try With Me!!

_____________________________________________________________________________________________________

Setup

___________________________________________________________________________________________

Technology

• Node JS

• Drizzle ORM

• Supabase

___________________________________________________________________________________________

Structure File

project/

|— index.js

|— schema.js

|— seed.js

|— .env

___________________________________________________________________________________________

Create Database

• Login in Supabase

• Create project

___________________________________________________________________________________________

Init & Install Project

• NPM Init

npm init -y

• Install Drizzle ORM

npm install drizzle-orm pg
npm install -D drizzle-kit

• Install .env

npm install dotenv

• Update file package.json, add this code in file package.json

"type": "method",

_____________________________________________________________________________________________________

Code Code!!

_____________________________________________________________________________________________________

Connect to Database

___________________________________________________________________________________________

Supabase

• Click connect

• Click and Click, then choose Transaction Pooler and copy url

• and paste in file .env and write your password account in supabase

___________________________________________________________________________________________

Code Index.js

import { drizzle } from 'drizzle-orm/node-postgres';
import { Pool } from 'pg';
import * as schema from './schema.js'

const pool = new Pool({
    connectionString: process.env.DATABASE_URL,
    ssl: { rejectUnauthorized: false }
})

export const db = drizzle(pool, { schema })

___________________________________________________________________________________________

Create file Drizzle

Create File drizzle.config.js

import 'dotenv/config'

export default {
    dialect: 'postgresql',
    schema: './schema.js',
    out: './drizzle',
    dbCredentials: {
        url: process.env.DATABASE_URL,
        ssl: { rejectUnauthorized: false }
    }
}

_____________________________________________________________________________________________________

Schema Database

___________________________________________________________________________________________

Code Schema.js

import { pgTable, serial, varchar, text, integer, timestamp, numeric } from 'drizzle-orm/pg-core';

export const note = pgTable('latihan_catatan', {
    id: serial('id').primaryKey(),
    note: varchar('note', { length: 256 }).notNull()
})

___________________________________________________________________________________________

Update File ‘package.json‘ in ‘scripts‘

"scripts": {
  "db:generate": "drizzle-kit generate",
  "db:migrate": "drizzle-kit migrate"
},

___________________________________________________________________________________________

Run Code

• open your terminal with ctrl + ` or click like this and choose terminal

• Write npm run db:generate then npm run db:migrate in terminal

_____________________________________________________________________________________________________

Seed Data

___________________________________________________________________________________________

Code Seed.js

import 'dotenv/config';
import { db } from './index.js';
import { note } from './schema.js';

async function seed() {
    console.log('Sedding database......')
    await db.delete(note)

    const note1 = await db.insert(note).values({
        note: "First step"
    })
    .returning();

    console.log(note1);
    console.log('✅ Sedding completed!')
    process.exit(0)
}

seed().catch((err) => {
    console.error('❌ Sedding failed:', err);
    process.exit(1)
})

___________________________________________________________________________________________

Update File ‘package.json‘ in ‘scripts‘

"scripts": {
    "db:seed": "node seed.js"
  }

• Run code with write npm run db:seed in terminal

_____________________________________________________________________________________________________

See Result

___________________________________________________________________________________________

_____________________________________________________________________________________________________

Update Column

___________________________________________________________________________________________

Update Code Schema.js

export const note = pgTable('latihan_catatan', {
    id: serial('id').primaryKey(),
    name: varchar('name', { length: 256 }).default('Anonymous').notNull(),
    note: varchar('note', { length: 256 }).notNull()
})

___________________________________________________________________________________________

Run Code

___________________________________________________________________________________________

Update Code Seed.js

const note1 = await db.insert(note).values({
        name: "The Champion",
        note: "We Are Champion"
    })
    .returning();

___________________________________________________________________________________________

Run Code

_____________________________________________________________________________________________________

See Result

___________________________________________________________________________________________

• This is result, we can add data to database

_____________________________________________________________________________________________________

Repository

• Github: https://github.com/MC-AHN/connection_to_database

_____________________________________________________________________________________________________

Closing

_____________________________________________________________________________________________________

Congratulations! You’ve just successfully built a solid data pipeline. Your application is no longer just isolated code—it can now seamlessly communicate with a PostgreSQL database.

From this project, we’ve learned how to:

• Build the Bridge: Connect Node.js to a database using the lightweight and fast Drizzle ORM.

• Design the Blueprint: Create and update table structures (schemas) with ease.

• Test with Confidence: Use Seeding to automatically fill your database with sample data for quick testing.

By skipping SSL, we've kept our setup simple and perfect for learning or local development. As you move forward, you can explore more complex data relationships or even add security layers when you're ready to take your project to the next level.

Happy coding and keep building! 🚀

_____________________________________________________________________________________________________

About application

an application used to process student data which includes entering student data, viewing student data, updating student data, deleting student data and this application runs on the terminal

_____________________________________________________________________________________________________

Let’s Try With Me !!

_____________________________________________________________________________________________________

Setup

1. Prepare node.js and postgreSQL software

2. Create Folder and file for this project with terminal

   • Structure file and folder

     db-project/

     ├── utils/

     │ ├── db.js

     │ └── input.js

     ├── 1-create.js

     ├── 2-read.js

     ├── 3-update.js

     ├── 4-delete.js

     ├── app.js

     ├── .env

     └── .gitignore

   • Create Folder db-project

       mkdir db-project
     

   • Create utils folder into db-project

       cd db-project
       mkdir utils
     

   • Create a file for database and for input into utils folder

       touch input.js
       touch db.js
     

   • Create a file for operation CRUD

       cd ..
       touch 1-create.js
       touch 2-read.js
       touch 3-update.js
       touch 4-delete.js
     

   • Create a file app.js for bridge or connector to access or perform CRUD operations

       touch app.js
     

   • Create a file with the .env extension to store confidential data.

       touch .env
     

     extension .env is A file acting as a secret diary for your code, holding sensitive information like passwords.

   • Create a file .gitignore

       touch .gitignore
     

     .gitignore It's a list for Git to ignore certain files and folders.

3. Enter to Visual Studio Code with that folder

   

   If you are confused about where the folder you created is, you can see it in the terminal.

   

   That is path or address your folder

   

   These are the files and folders that we created earlier

   

   you can open terminal in Visual Studio Code with click ctrl + ` (Grave accent above the tab key on the keyboard)

   

4. install npm, pg and git in folder, Write this in your terminal or you can copy past

    npm init -y # install npm
    npm install pg # install pg for connect to database
    npm install dotenv # install extension env
    git init # install git
   

_____________________________________________________________________________________________________

CODE CODE !!

_____________________________________________________________________________________________________

Prepare foundation

1. Setting or configuration npm

   • open file package.json

   • write this ‘type‘: ‘module‘, like this

    {
      "name": "db-project",
      "version": "1.0.0",
      "description": "",
      "type": "module", // HERE
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "dotenv": "^17.2.2",
        "env": "^0.0.2",
        "pg": "^8.16.3"
      }
    }

2. Create database and table

    CREATE DATABASE name_database;
    \c name_database -- for enter to database
   
    CREATE TABLE student(
    id SERIAL PRIMARY KEY,
    name VARCHAR(50) NOT NULL,
    address VARCHAR(100) NOT NULL
    );
   

3. Connect to database

   • Actually this is not connecting the database to the file but more about preparation

   • Go to file with extension .env and write like this

     

4. The contents of the .gitignore file are like this

   

_____________________________________________________________________________________________________

Create Program

• Write the program for connect to database in file db.js which is in the utils folder

import pg from "pg";
import "dotenv/config";

const pool = new pg.Pool({
  user: process.env.DB_USER,
  host: process.env.DB_HOST,
  database: process.env.DB_DATABASE,
  password: process.env.DB_PASSWORD,
  port: process.env.DB_PORT,
});

export default pool;

• Create function for input in file input.js which is in the utils folder

import readline from 'node:readline/promises';
import { stdin as input, stdout as output } from 'node:process';

const rl = readline.createInterface({ input, output });

export async function inputData(question) {
 const answer = await rl.question(`${question}`);
 return answer.trim();
}

export async function closeInput() {
 await rl.close();
}

• Write the program for Create data in file 1-create.js

import pool from './utils/db.js';

export async function addStudent(name, address) {
 try{
  // this code for testing code 
  const name = 'fine'
  const address = 'Tokyo'

  const queryText = 'INSERT INTO student(name, address) VALUES ($1, $2) RETURNING *';
  const res = await pool.query(queryText, [name, address]);

  console.log('new student successfully added');
  console.log(res.rows[0]);
 } catch (err) {
  console.error('fail adding student:', err.stack);
 } finally { // this block finally for testing code
  pool.close()
  closeInput()
 }
}

addStudent() // for testing code
// Run this file directly from the terminal to test it.
// If there are no issues, remove this test code. 
// Otherwise, it could cause errors later.

• Write the program for Read data in file 2-read.js

import pool from './utils/db.js';

export async function readStudent() {
 try {
  const res = await pool.query('SELECT * FROM student ORDER BY id ASC');

  if (res.rows.length === 0) {
   console.log('no student data');
   return;
  }

  console.log('List Student:');
  res.rows.forEach(s => {
   console.log(`ID: ${s.id}, Name: ${s.name}, address: ${s.address}`);
  });
 } catch (err) {
  console.error('failed to read student data:', err.stack);
 }
}

• Write the program for Update data in file 3-update.js

import pool from './utils/db.js';

export async function editStudent(id, reName, reAddress) {
 try {

  const queryText = 'UPDATE student SET name = $1 , address = $2 WHERE id = $3';
  const res = await pool.query(queryText, [reName, reAddress, id]);

  console.log('data edited successfully');
 } catch (err) {
  console.error('data failed to edit');
 }
}

• Write the program for Delete data in file 4-delete.js

import pool from './utils/db.js';

export async function deleteStudent(id) {
 try {

  const queryText = 'DELETE FROM student WHERE id = $1';
  const res = await pool.query(queryText, [id]);

  console.log('Student data was successfully deleted.');
 } catch (err) {
  console.error('data failed to delete');
 }
}

• Write the program for app.js

import { addStudent } from "./1-create.js";
import { readStudent } from "./2-read.js";
import { editStudent } from "./3-update.js";
import { deleteStudent } from "./4-delete.js";

import { closeInput, inputData } from "./utils/input.js";

import pg from "pg";

const pool = new pg.Pool({
  user: "postgres",
  host: "localhost",
  database: "dbproject1",
  password: "postgres",
  port: 5432,
});

function fitur() {
  console.log("  APP Console JS  ");
  console.log("1) Add Student");
  console.log("2) Read Student");
  console.log("3) Edit Student");
  console.log("4) Delete Student");
  console.log("0) Close");
}

async function addProgram() {
  const name = await inputData("Enter Name: ");
  const address = await inputData("Enter Address");
  await addStudent(name, address);
}

async function editProgram() {
  const id = await inputData("Enter ID: ");
  const name = await inputData("Enter New Name: ");
  const address = await inputData("Enter New Address: ");
  await editStudent(id, name, address);
}

async function deleteProgram() {
  const id = await inputData("Enter ID: ");
  await deleteStudent(id);
}

async function program() {
  while (true) {
    fitur();
    const choice = await inputData("Choose: ");
    switch (choice) {
      case "1":
        await addProgram();
        break;

      case "2":
        await readStudent();
        break;

      case "3":
        await editProgram();
        break;

      case "4":
        await deleteProgram();
        break;

      case "0":
        console.log("\nApp is Closed. Thank You.\n");
        closeInput();
        pool.end();
        return;

      default:
        console.log("Unknown choice. Please try again.\n");
    }
  }
}

program();

_____________________________________________________________________________________________________

Test Program

1. Test Create Fitur

2. Test Read Fitur

3. Test Update Fitur

4. Test Delete Fitur

_____________________________________________________________________________________________________

_____________________________________________________________________________________________________

Closing

And that's it! 🎉 You've now successfully built a simple CRUD application. You've mastered the fundamentals: creating, reading, updating, and deleting data.

From here, you can try to:

• Add more features, such as a search function.

• Use a web framework like Express.js to build a web-based application.

• Create a more engaging user interface.

Thanks for reading! See you in the next project.

_____________________________________________________________________________________________________

note : picture from https://www.atatus.com/glossary/crud/

A flow chart is a diagram that shows the steps of a process or decision using symbols and arrows.

— ChatGPT

Flowchart shapes

Flowcharts have many forms, including:

Example

• The Flow:

  ---

  • The process starts when a new student opens the registration page on the High School website.

  • They fill out the form with name, address, etc.

  • After clicking the “Register” button, the system checks if all the required info is filled in.

  • Decision: “Is the form complete?”

    • If NO → the system shows an error message telling what’s missing, and the student has to complete the form again.

    • If YES → the system saves the student’s data into the database.

  • Once saved, the system automatically creates a unique Registration Number.

  • The system then shows a confirmation page saying: “Congrats, your registration was successful!” + the Registration Number.

  • Done.

  • The process starts when a new student opens the registration page on the High School website.

  • They fill out the form with name, address, school, etc.

  • After clicking the “Register” button, the system checks if all the required info is filled in.

  • Decision: “Is the form complete?”

    • If NO → the system shows an error message telling what’s missing, and the student has to complete the form again.

    • If YES → the system saves the student’s data into the database.

  • Once saved, the system automatically creates a unique Registration Number.

  • The system then shows a confirmation page saying: “Congrats, your registration was successful!” + the Registration Number.

  • Done.

• This is Flowchart, you can draw in draw.io Website

  

_____________________________________________________________________________________________________

Closing

And that’s it! 🎉

Now you’ve got a flowchart for sketch from application

Thanks for reading! Stay tuned on my blog for more articles or the next episode.

note : picture from https://unstop.com/blog/difference-between-algorithm-and-flowchart

Hono is a small and fast web framework for building APIs and web apps in JavaScript and TypeScript. It is lightweight, modern, and works across different runtimes like Node.js, Bun, and Deno.

_____________________________________________________________________________________________________

Let’s Try With Me !!

_____________________________________________________________________________________________________

Setup

1. Open Git Bash and go to your project folder.

   

2. initialize npm.

   

3. open package.json with nano and add ‘ ”type” : “module”, ‘ inside. This makes npm work with Hono or other modules that use ES modules.

   

   Use nano to edit a file, or create one if it doesn’t exist.

   

4. and install hono.

   

   and don’t forget from install @hono/node-server.

   

   if you don’t install this, you will get an error when running the file later, like this

   

_____________________________________________________________________________________________________

Create File

1. create a file named service.js (you can use nano or any editor)

   

_____________________________________________________________________________________________________

Run the server

1. write this code inside file server.js

   

   Save and exit with Ctrl + X, then press Y, then Enter.

2. Run the code with node server.js

   

_____________________________________________________________________________________________________

Routes Result

• Open http://localhost:3000/ → you will see the main page.

  

• Open http://localhost:3000/text → you will see the text response, or click /text in main page

  

• Open http://localhost:3000/json → you will see the JSON response, or click /json in main page

  

_____________________________________________________________________________________________________

Closing

And that’s it! 🎉

Now you’ve got a simple Hono server running.

Later you can try middleware, auth, or even deploy it.

Thanks for reading! Stay tuned on my blog for more articles or the next episode.

_____________________________________________________________________________________________________

note: picture from https://dev.to/joodi/honojs-a-lightweight-framework-with-big-potential-3lh9

1. Create object into array

    let itemList = [
     { code: "BRG001", name: "Soap", price: 1.3, qty: 10},
     { code: "BRG002", name: "Shampoo", price: 2.5, qty: 5 },
     { code: "BRG003", name: "Toothpaste", price: 2, qty: 7 }
    ];
   

2. add another object

    itemList.push({ code: "BRG004", name: "Tissue",   price: 1.5, qty: 20});
    itemList.push({ code: "BRG005", name: "Brush",    price: 2, qty: 12});
    itemList.push({ code: "BRG006", name: "Detergent", price: 5, qty: 9 });
   

3. Update data object

    console.log("Before Update Data", itemList);
    const idShampoo = itemList.findIndex(b => b.code === "BRG002");
    if ( idShampoo !== -1) {
        itemList[idShampoo].price = 2.6;
        itemList[idShampoo].qty = 6;
    }
   
    const idTisuee = itemList.findIndex(b => b.code === "BRG004");
    if ( idTisuee !== -1 ) {
        itemList[idTisuee].price = 1.6;
        itemList[idTisuee].qty = 22;
    }
   
    console.log("After Update Data", itemList);
   

   

4. Delete data object

    console.log("Before Delete Data", itemList);
   
    function findIndexByCode(list, code) {
      return list.findIndex(
        (b) => b.code.toLowerCase() === code.toLowerCase()
      );
    }
   
    const idx = findIndexByKode(itemList, "BRG002");
    if (idx !== -1) {
      itemList.splice(idx, 1);
    }
   
    console.log("After Delete Data");
   

   

5. Show data object with table

    console.log("No | Code    | Name          | Price  | Qty");
    itemList.forEach((b, i) => {
     const no = String(i + 1).padStart(2, "0");
     const code = b.code.padEnd(7, " ");
     const name = b.name.padEnd(13, " ");
     const price = String(b.price).padStart(6, " ");
     const qty = String(b.qty).padStart(3, " ");
     console.log(`${no} | ${code} | ${name} | ${price} | ${qty}`);
    });
   

6. This Result

   

End!!

Your feedback is a gift. Let us know your thoughts in the comments below!.

See you next time guys!!!.

note: picture from https://www.geeksforgeeks.org/javascript/how-to-convert-set-to-array-in-javascript/