docs

1. API (`api.js`)

Modul api.js menyediakan fungsi-fungsi wrapper di atas Fetch API bawaan browser untuk mempermudah komunikasi HTTP dengan backend. Setiap fungsi menggunakan pola callback — Anda menyediakan sebuah fungsi yang akan dipanggil saat respons diterima dari server, beserta informasi HTTP status code.

Pola Umum Response

Semua fungsi JSON pada modul ini (getJSON, postJSON, deleteJSON, putJSON) mengembalikan respons ke callback function dengan format objek yang konsisten:

{
  status: Number,  // HTTP status code (200, 201, 400, 404, 500, dst.)
  data: Object     // Body respons yang sudah di-parse dari JSON
}

1.1 `getJSON()`

Melakukan HTTP GET request ke URL yang ditentukan dan mengembalikan respons dalam format JSON ke callback function.

Signature

getJSON(target_url, responseFunction, tokenkey?, tokenvalue?)

Parameter

Parameter	Tipe	Wajib	Deskripsi
`target_url`	`string`	✅	URL tujuan HTTP GET request
`responseFunction`	`function`	✅	Callback function yang menerima objek `{ status, data }`
`tokenkey`	`string`	❌	Nama header untuk autentikasi (misal: `"Authorization"`, `"token"`, `"Login"`)
`tokenvalue`	`string`	❌	Nilai token autentikasi (misal: `"Bearer eyJhbGci..."`)

Return Value

void — Hasil dikirim melalui responseFunction secara asinkron.

Contoh Penggunaan

Tanpa Token (Public API):

import { getJSON } from './lib/api.js';

// Ambil data dari API publik
getJSON(
  'https://api.example.com/users',
  function(response) {
    console.log('Status:', response.status); // 200
    console.log('Data:', response.data);     // [{id: 1, name: "Andi"}, ...]

    if (response.status === 200) {
      // Proses data berhasil
      response.data.forEach(user => {
        console.log(user.name);
      });
    }
  }
);

Dengan Token Autentikasi:

import { getJSON } from './lib/api.js';
import { getCookie } from './lib/cookie.js';

// Ambil token dari cookie
const token = getCookie('user_token');

// Request ke API yang membutuhkan autentikasi
getJSON(
  'https://api.example.com/profile',
  function(response) {
    if (response.status === 200) {
      document.getElementById('nama').innerText = response.data.name;
      document.getElementById('email').innerText = response.data.email;
    } else if (response.status === 401) {
      console.log('Token tidak valid, silakan login ulang.');
    }
  },
  'Authorization',
  'Bearer ' + token
);

1.2 `postJSON()`

Melakukan HTTP POST request ke URL yang ditentukan dengan mengirimkan data dalam format JSON pada body request. Digunakan untuk membuat data baru di server (Create).

Signature

postJSON(target_url, datajson, responseFunction, tokenkey?, tokenvalue?)

Parameter

Parameter	Tipe	Wajib	Deskripsi
`target_url`	`string`	✅	URL tujuan HTTP POST request
`datajson`	`object`	✅	Objek JavaScript yang akan dikirim sebagai body JSON
`responseFunction`	`function`	✅	Callback function yang menerima objek `{ status, data }`
`tokenkey`	`string`	❌	Nama header untuk autentikasi
`tokenvalue`	`string`	❌	Nilai token autentikasi

Return Value

void — Hasil dikirim melalui responseFunction secara asinkron.

Contoh Penggunaan

Membuat Data Baru (Tanpa Token):

import { postJSON } from './lib/api.js';

// Data yang akan dikirim ke server
const dataMahasiswa = {
  nama: 'Budi Santoso',
  nim: '1234567890',
  jurusan: 'Teknik Informatika'
};

postJSON(
  'https://api.example.com/mahasiswa',
  dataMahasiswa,
  function(response) {
    if (response.status === 201) {
      console.log('Mahasiswa berhasil ditambahkan!');
      console.log('ID baru:', response.data.id);
    } else if (response.status === 400) {
      console.log('Validasi gagal:', response.data.message);
    }
  }
);

Dengan Token Autentikasi:

import { postJSON } from './lib/api.js';
import { getCookie } from './lib/cookie.js';

const token = getCookie('user_token');

const dataPeminjaman = {
  ruangan_id: 'R-101',
  tanggal: '2026-03-15',
  jam_mulai: '08:00',
  jam_selesai: '10:00',
  keperluan: 'Rapat organisasi'
};

postJSON(
  'https://api.example.com/peminjaman',
  dataPeminjaman,
  function(response) {
    if (response.status === 201) {
      alert('Peminjaman berhasil diajukan!');
    } else {
      alert('Gagal: ' + response.data.message);
    }
  },
  'Login',
  token
);

1.3 `deleteJSON()`

Melakukan HTTP DELETE request ke URL yang ditentukan dengan mengirimkan data identifikasi dalam format JSON pada body request. Digunakan untuk menghapus data di server (Delete).

Signature

deleteJSON(target_url, datajson, responseFunction, tokenkey?, tokenvalue?)

Parameter

Parameter	Tipe	Wajib	Deskripsi
`target_url`	`string`	✅	URL tujuan HTTP DELETE request
`datajson`	`object`	✅	Objek JavaScript berisi data identifikasi item yang akan dihapus
`responseFunction`	`function`	✅	Callback function yang menerima objek `{ status, data }`
`tokenkey`	`string`	❌	Nama header untuk autentikasi
`tokenvalue`	`string`	❌	Nilai token autentikasi

Return Value

void — Hasil dikirim melalui responseFunction secara asinkron.

Contoh Penggunaan

Menghapus Data dengan Konfirmasi:

import { deleteJSON } from './lib/api.js';
import { getCookie } from './lib/cookie.js';

const token = getCookie('user_token');

function hapusMahasiswa(mahasiswaId) {
  // Konfirmasi sebelum menghapus
  if (!confirm('Apakah Anda yakin ingin menghapus data ini?')) {
    return;
  }

  const dataHapus = {
    id: mahasiswaId
  };

  deleteJSON(
    'https://api.example.com/mahasiswa',
    dataHapus,
    function(response) {
      if (response.status === 200) {
        alert('Data berhasil dihapus!');
        // Refresh tampilan tabel
        location.reload();
      } else if (response.status === 404) {
        alert('Data tidak ditemukan.');
      } else if (response.status === 403) {
        alert('Anda tidak memiliki izin untuk menghapus data ini.');
      }
    },
    'Login',
    token
  );
}

1.4 `putJSON`

Sends a PUT request with a JSON body to the specified URL and passes the response (status + parsed data) to a callback function.

putJSON(target_url, datajson, responseFunction, tokenkey?, tokenvalue?)

Parameters

Parameter	Type	Required	Description
`target_url`	`string`	✅	The endpoint URL to send the PUT request to
`datajson`	`object`	✅	The JavaScript object to be sent as the JSON body
`responseFunction`	`function`	✅	Callback receiving `{ status, data }` from the response
`tokenkey`	`string`	❌	Header key name for authorization token (e.g. `"Authorization"`)
`tokenvalue`	`string`	❌	Header value for the token (e.g. `"Bearer abc123"`)

Response Callback Shape

responseFunction({ status: number, data: object })

Example

import { putJSON } from './lib/api.js';

const payload = { name: "Alice", age: 30 };

putJSON(
  "https://api.example.com/users/1",
  payload,
  ({ status, data }) => {
    console.log("Status:", status); // e.g. 200
    console.log("Data:", data);     // parsed JSON response
  },
  "Authorization",
  "Bearer my-secret-token"
);

1.5 `insertHTML`

Fetches raw HTML from a URL and injects it into a DOM element by its id, then runs a callback function after rendering.

insertHTML(target_url, id, runFunction)

Parameters

Parameter	Type	Required	Description
`target_url`	`string`	✅	The URL to fetch HTML content from
`id`	`string`	✅	The `id` of the DOM element where the HTML will be injected
`runFunction`	`function`	✅	Callback executed after the HTML has been inserted

Example

import { insertHTML } from './lib/api.js';

insertHTML(
  "https://example.com/partials/navbar.html",
  "navbar-container",
  () => {
    console.log("Navbar has been loaded and rendered!");
    // Initialize dropdown menus, event listeners, etc.
  }
);

1.6 `getDomHTML`

Fetches HTML from a URL and returns it as a parsed DOM object via a callback, allowing you to query and manipulate elements programmatically before rendering.

getDomHTML(target_url, domFunction)

Parameters

Parameter	Type	Required	Description
`target_url`	`string`	✅	The URL to fetch HTML content from
`domFunction`	`function`	✅	Callback receiving the parsed `Document` object

Example

import { getDomHTML } from './lib/api.js';

getDomHTML(
  "https://example.com/partials/card.html",
  (htmlDom) => {
    const title = htmlDom.querySelector(".card-title");
    console.log("Card title:", title?.textContent);

    // You can then append or modify elements before inserting into the page
    document.getElementById("content").appendChild(
      document.importNode(htmlDom.body, true)
    );
  }
);

Usage Examples

Updating a resource with authentication

import { putJSON } from './lib/api.js';

putJSON(
  "/api/products/42",
  { price: 99.99, stock: 150 },
  ({ status, data }) => {
    if (status === 200) {
      alert("Product updated successfully!");
    } else {
      console.error("Update failed:", data);
    }
  },
  "x-api-key",
  "your-api-key-here"
);

Loading a page section dynamically

import { insertHTML } from './lib/api.js';

document.addEventListener("DOMContentLoaded", () => {
  insertHTML("/components/footer.html", "footer", () => {
    console.log("Footer loaded.");
  });
});

Dokumentasi Upload File - api.js

Dokumentasi ini menjelaskan fungsi-fungsi upload file yang tersedia di api.js menggunakan fetch() dan FormData.

📌 SOURCE CODE

export function postFile(target_url,id,formdataname,responseFunction) {
    const input = document.getElementById(id);
    const file = input.files[0];
    const formData = new FormData();
    formData.append(formdataname, file);

    var requestOptions = {
        method: 'POST',
        body: formData,
        redirect: 'follow'
    };
    
    fetch(target_url, requestOptions)
    .then(response => response.text())
    .then(result => responseFunction(JSON.parse(result)))
    .catch(error => console.log('error', error));
}

// make sure formdataname use in the backend to get data file
export function postFileWithHeader(target_url,tokenkey,tokenvalue,id,formdataname,responseFunction) {
    let myHeaders = new Headers();
    myHeaders.append(tokenkey, tokenvalue);
    myHeaders.append("Accept", "application/json");

    const input = document.getElementById(id);
    const file = input.files[0];
    const formData = new FormData();
    formData.append(formdataname, file);

    var requestOptions = {
        method: 'POST',
        body: formData,
        redirect: 'follow',
        headers: myHeaders
    };
    
    fetch(target_url, requestOptions)
    .then(response => response.text())
    .then(result => responseFunction(JSON.parse(result)))
    .catch(error => console.log('error', error));
}

export function postFileJSON(target_url, tokenkey, tokenvalue, id, formdataname, responseFunction) {
    let myHeaders = new Headers();
    myHeaders.append(tokenkey, tokenvalue);
    myHeaders.append("Accept", "application/json");

    const input = document.getElementById(id);
    const file = input.files[0];
    const formData = new FormData();
    formData.append(formdataname, file);

    var requestOptions = {
        method: 'POST',
        body: formData,
        redirect: 'follow',
        headers: myHeaders
    };

    fetch(target_url, requestOptions)
    .then(response => response.text().then(data => ({
        status: response.status,
        data: data
    })))
    .then(result => responseFunction({
        status: result.status,
        data: JSON.parse(result.data)
    }))
    .catch(error => console.log('error', error));
}

📌 PENJELASAN FUNGSI

1️⃣ postFile()

Digunakan untuk upload file tanpa header tambahan.

Parameter:

target_url → endpoint backend
id → id input file di HTML
formdataname → nama field file di backend
responseFunction → callback untuk menerima response

Contoh penggunaan:

postFile(
    "https://example.com/upload",
    "fileInput",
    "file",
    function(response){
        console.log(response);
    }
);

2️⃣ postFileWithHeader()

Digunakan untuk upload file dengan header (biasanya token authentication).

Parameter tambahan:

tokenkey → contoh: “Authorization”
tokenvalue → contoh: “Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9…”

Contoh penggunaan:

postFileWithHeader(
    "https://example.com/upload",
    "Authorization",
    "Bearer TOKEN_KAMU",
    "fileInput",
    "file",
    function(response){
        console.log(response);
    }
);

3️⃣ postFileJSON()

Digunakan untuk upload file dan mengembalikan:

HTTP Status Code
Data JSON

Contoh response handler:

function responseHandler(response) {
    console.log("HTTP Status:", response.status);
    console.log("Response Data:", response.data);
}

⚠️ CATATAN PENTING

Pastikan formdataname sama dengan nama field di backend.
Input HTML harus memiliki type="file".
Jangan set Content-Type manual jika menggunakan FormData.

Contoh HTML:

<input type="file" id="fileInput">

This site is open source. Improve this page.

docs

1. API (api.js)

Pola Umum Response

1.1 getJSON()

Signature

Parameter

Return Value

Contoh Penggunaan

1.2 postJSON()

Signature

Parameter

Return Value

Contoh Penggunaan

1.3 deleteJSON()

Signature

Parameter

Return Value

Contoh Penggunaan

1.4 putJSON

1.5 insertHTML

1.6 getDomHTML

Usage Examples

Updating a resource with authentication

Loading a page section dynamically

📌 SOURCE CODE

📌 PENJELASAN FUNGSI

1️⃣ postFile()

Parameter:

Contoh penggunaan:

2️⃣ postFileWithHeader()

Parameter tambahan:

Contoh penggunaan:

3️⃣ postFileJSON()

Contoh response handler:

⚠️ CATATAN PENTING

1. API (`api.js`)

1.1 `getJSON()`

1.2 `postJSON()`

1.3 `deleteJSON()`

1.4 `putJSON`

1.5 `insertHTML`

1.6 `getDomHTML`