What is Hono?

Hono is framework to many language programming, is simple, fast, and easy, hono in web dev it is mean backend developer.

backend developer is programmer who menages data and server for website

How To Use Hono In Javascript

First, initialization npm in your project

npm init

then change type on package.json to “module”

next install hono with npm, yarn, or other ways.

npm install hono @hono/node-server

then create file server.js and this code

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

const app = new Hono();

app.get("/", (c) => {
    return c.html(`
        <h1>Hallo Hono</h1>
        <p>Rute yang tersedia:</p>
        <ul>
        <li><a href="/text">/text</a> - Menampilka Text biasa</li>

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

// Rute untuk Text
app.get("/text", (c) => c.text("ini adalah respons text biasa"));

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

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

so now you can running the code

node server.js

so this is result

How Try API

you can use postman, echo api, etc, for example i use echo api here.

and success…..

Closing

thanks for watching, see you next video…..

What Is Database?

easily database is a place for save a many data.

for example: in the class have a many student, in that data is not missing, the data must put into Database to save.

Database With Supabase

Supabase is a database based from “postgres sql” alias with SQLanguage, and how to use that with javascript?

lets go to explanation to use supabase for you project…

Supabase, Drizzle, And Javascript

Supabase : Database (the place of the data).

Drizzle : ORM (the connection between database and program).

Javascript : Basic language (language to create program).

Node.js : Package manager (installation Package).

First, initialization npm

npm init -y

then you can install this:

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

fill .env with url database (postgresql, mysql, etc) for example i use supabase

 DATABASE_URL="postgresql://postgres:[your-password]:6543/postgres"

create file “schema.js“ then you can typing this:

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

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

next you can create configuration between javascript and supabase with drizzle, check this code (drizzle.config.js):

import 'dotenv/config'

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

then you can add new code in scripts on package.json

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

explanation:

• generate: is mean generate Query SQL before execute in database.

• migrate: is mean database start to execute the previous query (generate).

after that, you can run on terminal

npm run db:generate
npm run db:migrate

and right now you have table on database but empty

so you can fill data for your database with connecting into database with this 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 })

next you can create new data in database:

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: "Abdullah Juara Pertama Koki Bintang Lima Internasional dari Indonesia"
    })
    .returning();

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

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

then you can update again package.json

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

so right now you have data now

Closing

thanks for watching, see you next time……

https://jsonplaceholder.typicode.com/users

but before that, here i will explain about front end

Why We Need Front End?

Frontend is a programmer who create user interface in website or app or other, and for example he is show data from database until can look users.

Create Html

this code html for you:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Percobaan Fetch API</title>
</head>
<body>
    <h1>users</h1>
    <div id="users-container"></div>
</body>
</html>

Create Script

this code javascript for you:

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

      async function fetchUsers() {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/users"
        )
          .then((response) => response.json())
          .catch((error) => console.error("Error fetching users:", error));
        console.log(response);
        const users = response;
        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);
        });
      }
      fetchUsers();

Explanation About Code

then here i will explain you about my code:

• we need container for data, this is tag div with id ‘users-container’

• on javascript create function, name is fetchUsers

• then you get the data with fetch from this url: https://jsonplaceholder.typicode.com/users and put in variable response

• so that is safety you put variable users for identify

• for loop array users then you create new div to fill data

• then the data already you put into container

Closing

okay, maybe this is my project, thanks for watching good bye…………

Dalam dunia pemrograman, pemahaman mengenai manipulasi database adalah hal yang sangat penting, terutama bagi programmer pemula. Salah satu konsep dasar yang wajib dikuasai adalah CRUD, yaitu singkatan dari Create, Read, Update, dan Delete. Konsep ini digunakan untuk mengelola data dalam sebuah database.

Presentasi ini disusun oleh Ahmad Afan Shobari dan menjelaskan implementasi CRUD menggunakan Supabase, sebuah platform backend modern berbasis open-source yang menjadi alternatif dari Firebase.

Apa Itu Supabase?

Supabase adalah platform pengembangan backend open-source yang dibuat oleh Paul Copplestone dan Ant Wilson. Supabase sering disebut sebagai alternatif dari Firebase, namun memiliki perbedaan mendasar:

• Supabase menggunakan PostgreSQL sebagai basis datanya, sehingga mendukung query berbasis SQL.

• Sedangkan Firebase tidak menggunakan SQL, karena berbasis NoSQL database.

Supabase memberikan kemudahan bagi developer untuk membuat dan mengelola backend aplikasi tanpa harus membangun server secara manual. Fitur-fitur seperti autentikasi, penyimpanan data, dan API otomatis dapat diakses dengan mudah.

Pengenalan CRUD

CRUD adalah singkatan dari empat operasi dasar dalam pengelolaan data:

1. Create (Membuat data)

2. Read (Membaca data)

3. Update (Mengubah data)

4. Delete (Menghapus data)

Keempat fungsi ini menjadi fondasi utama dalam setiap aplikasi berbasis database, baik itu aplikasi web maupun mobile.

Fungsi CREATE dalam Database

Fungsi CREATE digunakan untuk membuat database maupun tabel baru.
Contoh syntax dasar SQL:

-- Membuat database baru
CREATE DATABASE toko;

-- Membuat tabel baru
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    umur INTEGER,
    kelas INTEGER NOT NULL
);

Dengan perintah ini, programmer dapat mendefinisikan struktur data yang akan digunakan dalam sistem.

Jenis-Jenis Tipe Data

Dalam pembuatan tabel, setiap kolom memiliki tipe data yang berbeda sesuai dengan kebutuhan. Beberapa tipe data umum yang digunakan antara lain:

• serial – nomor urut otomatis

• integer – bilangan bulat

• varchar – teks pendek dengan batas karakter

• date – tanggal

• boolean – nilai benar/salah

• text – teks panjang

• numeric – angka desimal

Pemilihan tipe data yang tepat akan memengaruhi efisiensi dan kecepatan database.

Menambah Data: INSERT

Untuk menambahkan data ke dalam tabel, digunakan perintah INSERT.
Contoh syntax:

INSERT INTO users (name, umur, kelas) VALUES
('Akyel Malino', 18, 10),
('Alif Fauzan', 17, 10);

Perintah di atas akan menambahkan dua data baru ke dalam tabel users.

Mengambil Data: SELECT

Untuk menampilkan atau membaca data dari database, digunakan perintah SELECT.
Contoh penggunaan:

SELECT name FROM users;           -- Menampilkan hanya kolom name
SELECT * FROM users;              -- Menampilkan seluruh kolom
SELECT * FROM users WHERE umur > 17;  -- Menampilkan data dengan umur di atas 17

Kata kunci WHERE digunakan untuk menyaring data berdasarkan kondisi tertentu.

Mengubah Data: UPDATE

Perintah UPDATE digunakan untuk mengubah data yang sudah ada.
Contohnya:

UPDATE users SET name = 'Halim Samodra' WHERE id = 5;

Tiga kata kunci penting yang harus diperhatikan dalam perintah ini adalah:

• UPDATE – menentukan tabel yang ingin diubah

• SET – menentukan kolom dan nilai baru

• WHERE – menentukan baris data yang akan diperbarui

Menghapus Data: DELETE

Untuk menghapus data dari tabel, digunakan perintah DELETE.
Contoh syntax:

DELETE FROM users WHERE id = 3;

Perintah di atas akan menghapus data dengan id = 3 dari tabel users.
Hati-hati dalam menggunakan DELETE, karena data yang dihapus tidak dapat dikembalikan tanpa backup.

Kesimpulan

CRUD merupakan konsep fundamental dalam pengelolaan database dan menjadi dasar bagi semua aplikasi berbasis data. Supabase mempermudah penerapan konsep ini karena menyediakan backend yang terintegrasi dengan PostgreSQL serta antarmuka yang mudah digunakan.

Dengan memahami dan menguasai perintah dasar CRUD — Create, Read, Update, dan Delete — seorang programmer dapat membangun aplikasi yang efisien, dinamis, dan mudah dikembangkan.

Kata Penutup

“Belajarlah karena dengan belajar kamu akan mendapatkan apa yang akan kamu dapatkan.”
— Ahmad Afan Shobari

Keberangkatan.

Kami berangkat dari pondok jam 07:00 WIB dan menempuh perjalanan kurang lebih satu setengah jam atau sekitar sampai di jam 08:30 WIB, dalam perjalan kami melihat pemandangan yang begitu indah seperti pohon-pohon pinus, jalan pegunungan, dan pemandangan alam lainya dan itu membuat kami merasa lebih fresh & berenergi 💪💪💪.

TKI (Tekno Kartu Indonesia).

Sesampainya disana kami di bawa ke sebuah rumah kecil, awalnya bingung “perusahaan kok cuman rumah sepetak kaya gini, emang bisa ya nampung banyak karyawan?“ tapi selepas masuk baru terjawab ternyata perusahaanya ada di bersembunyi di balik rumah kecil itu (hidden place).

lalu kami duduk di tempat yang disediakan, kemudian kami diberikan banyak ilmu tentang teknologi perusahaan, seperti bahasa pemograman yang digunakan, bidang apa saja yang digunakan dalam sebuah perusahaan, dan lain-lainnya.

selain itu kami juga di bawa berkeliling area kerja seperti ruang pembuatan kartu, tim marketing, tim programming, dan lainya, banyak juga ilmu yang kami dapat terkait cyber security mengingat itu juga sedang populer di masa kini.

kemudian di jam 11:30 WIB kami pergi dari pt.TKI, untuk pergi ke tujuan selanjutnya sungguh pengalaman yang menyenangkan yang tidak akan terlupakan.

Kopeng Park

Kemudian siangnya kami melanjutkan perjalan kami ke kopeng park di sana kami hanya bermain dan menikmati suasana pegunungan,ada yang berenang, main bola, ngopi, ngoding, dll, dan lumayan asyik walau keadaan sedang hujan, but, that good, lalu kami pulang kepondok setelah perjalanan ini.

Al-mazz

Kemudian sorenya kami mampir ke al-mazz fried chicken untuk makan sore dan itu adalah pengalaman cukup menarik dan mengenyangkan, apa lagi beberapa dari juga memesan untuk dibawa pulang, setelah sholat maghrib kami melanjutkan pulang kami dan kami sampai di pondok berpasan dengan adzan isya’

Penutup

Ini adalah pengalaman pertama saya mengunjungi sebuah perusahaan IT, dan ini akan menjadi gambaran bagi saya untuk membuat perusahaan kedepanya, Terima Kasih Telah Membaca.

Create Database

you can create project and install this

npm i drizzle-orm pg dotenv
npm i -d drizzle-kit

then you can create data base on postgres

//open on postgres ubuntu
sudo -i -u postgres
psql

//open on windows
psql -U postgres

//create database
create database pesantren

Connecting Database

then you can create file .env ant typing this

//for local host
DATABASE_URL="postgresql://postgres:postgres@localhost:5432/pesantren"

//for online database, exemple: supabase and anymore
DATABASE_URL="postgresql://postgres.yieipycgkveuhreikdyy:[YOUR-PASSWORD]@aws-1-ap-southeast-1.pooler.supabase.com:6543/postgres?sslmode=require"

then you can create schema or table on directory db/schema.js

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

export const santri = pgTable('student', {
  id: serial('id').primaryKey(),
  nama: varchar('nama', { length: 256 }).notNull(),
  kelas: varchar('kelas', { length: 50 }),
  createdAt: timestamp('created_at').defaultNow().notNull(),
});

then you can create connecting schema and database on drizzle.config.js

import 'dotenv/config';

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

then you can git init and add this on package.json on scripts

"scripts": {
  "db:generate": "drizzle-kit generate",
  "db:migrate": "drizzle-kit migrate",
  "dev": "node --watch server.js",
  "start":"node server.js"
}

then you can running migration database

npm run db:generate   # generate file migrasi
npm run db:migrate    # eksecution migrasi (create tabel)

then you can check on your database

SELECT * FROM student;

then you can setup early data on db/index.js

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

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

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

then create db/seed.js

import { db } from './index.js';
import { santri } from './schema.js';

async function main() {
  await db.insert(santri).values([
    { id: 1, nama: 'Ahmad Fauzi', kelas: 11 },
    { id: 2, nama: 'Muhammad Rizky', kelas: 12 },
    { id: 3, nama: 'Alwi Saputra', kelas: 10 },
  ]);

  console.log(' Data santri berhasil di-seed');
}

main();

then running seed.js

node db.seed.js

Use API With EchoAPI

then you can setup api, in this segmen we will use hono

npm i hono @hono/node-server

then create file server on server.js

import { Hono } from 'hono';
import { serve } from '@hono/node-server';
import { db } from './db/index.js';
import { santri } from './db/schema.js';
import { eq } from 'drizzle-orm';

const app = new Hono();

//[C]Create
app.post('/api/santri', async (c) => {
    const data = await c.req.json();
    const result = await db.insert(santri).values(data).returning();
    return c.json({error: false, data: result[0]}, 201);
});

app.get('/api/santri', async (c) => {
    const result = await db.query.santri.findMany()
    return c.json({error: false, data: result})
});

app.get('/api/santri/:id', async (c) => {
    const id = Number(c.req.param('id'));
    const result = await db.query.santri.findFirst({
        where: eq(santri.id, id)
    })
    if (!result) return c.json({error: true, massage: 'Not found'}, 404);
    return c.json({error: false, data:result})
});

app.put('/api/santri/:id', async (c) => {
    const id = Number(c.req.param('id'));
    const data = await c.req.json();
    const result = await db.update(santri).set(data).where(eq(santri.id, id)).returning();

    if (!result) return c.json({error: true, massage: 'Not found'}, 404);
    return c.json({error: false, data:result[0]})
});

app.delete('/api/santri/:id', async (c) => {
    const id = Number(c.req.param('id'));
    const result = await db.delete(santri).where(eq(santri.id, id)).returning();
    if (result.length === 0){
        return c.json({error: true, massage: 'Not found'}, 404);
    }
    return c.json({error: false, massage: `delete id ${id}`});
});

app.get('/', async (c) => {
    return c.html(
        `<div><h1>Doc API</h1></div><a href="/api/santri" target="_parent">/api/santri</a>`
    );
});

serve({ fetch: app.fetch, port: 5429});
console.log(`✅ API running at http://localhost:5429`);

then you can running server.js then active

node server.js

then we need use api, this is echoAPI (extension on Visual Studio Code)

then setting this for post method

http://localhost:5429/api/santri
{
    "id":4,
    "nama":"Ahmad",
    "kelas":"x-b"
}

and this result the running or after send

then we get all data you can use this, get method

http://localhost:5429/api/santri

then get some data use this,

http://localhost:5429/api/santri/find_id

then use this for update data, put method

http://localhost:5429/api/santri/find_id

then use this for delete data, delete method

http://localhost:5429/api/santri/find_id

Closing

thanks for watching

1. Install Package on NPM

First, we need some a package:

• pg

• readline/promise (default available in node.js)

npm i pg
npm i readline/promise (optional)

2. Create DataBase on Postgres

Second, we need database to save data from query

create database school;

create table students (
id serial primary key,
name varchar(100) not null,
address varchar(150) not null
);

3. Create a File & CRUD with the file

3.1 Create a File to Save Package Pg

Third, we will create a file name is db.js on folder utils, and add this code:

import pg from 'pg';

const pool = new pg.Pool({
  user: 'postgres',
  host: 'localhost',
  database: 'school',
  password: '<your_password>',
  port: 5432,
});

export default pool;

3.2 Create a File to Save Package Readline

Fourth, we will create a file name is rideline.js on folder utils, and add this code:

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();
}

3.3 Create System Create Data

Fifth, we will create a file to system create data for database name file is 1-create.js, add this code:

//file 1-create.js
import pool from './utils/db.js';
import {inputData, closeInput} from './utils/app.js'

export default async function addStudent() {
  try {
    const queryText = `
    INSERT INTO students(name, address) VALUES($1, $2) RETURNING *
    `;
    const res = await pool.query(
    queryText, 
    [studentName, studentAddress]
    );

    console.log('new student success add on database:');
    console.log(res.rows[0]); 
  } catch (err) {
    console.error('failed add student data:', err.stack);
  } finally {
    await pool.end();
    await closeInput();
  }
}

addStudent();

when you running in terminal, display this:

2.4 Create System Read Data

Sixth, we will create a file to system read data for database name file is 2-read.js, add this code:

//file 2-read.js
import pool from './utils/db.js';
export default async function seeStudent() {
  try {
    const res = await pool.query('
    SELECT * FROM student ORDER BY id ASC
    ');

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

    console.log('data student:');
    res.rows.forEach(santri => {
      console.log(
    `ID: ${santri.id}, 
    Name: ${student.name}, 
    address: ${student.address}`);
    });

  } catch (err) {
    console.error('failed ride data student:', err.stack);
  } 
}

seeStudent();

when we running this, display this:

3.5 Create System Update Data

Seventh, we will create a file to system update data for database name file is 3-update.js, add this code:

//file 3-update.js
import pool from './utils/db.js';
import {inputData, closeInput} from './utils/app.js'

export default async function updateStudent() {
  try {
    const res = await pool.query(
    'UPDATE students SET nama = $1, alamat = $2 WHERE id = $3', 
    [choice_name, choice_address, choice_id]
    );

    console.log('new student success add on database:');
    console.log(res.rows[choice_id]);
  } catch (err) {
    console.error('failed update data student:', err.stack);
  }
}

updateStudent();

when we running this, display this:

3.6 Create System Delete Data

Eighth, we will create a file to system update data for database name file is 4-delete.js, add this code:

//file 4-delete.js
import pool from './utils/db.js';
import {inputData, closeInput} from './utils/app.js'

export default async function deleteStudent() {
  try {

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

    console.log('new student success add on database:');
  } catch (err) {
    console.error('failed delete data student:', err.stack);
  } 
}

deleteStudent();

when we running this, display this:

last, we will create a file to running all previes file

import { inputData, closeInput } from './utils/readline.js';
import pool from './utils/db.js';
import addStudent from './1-create.js';
import seeStudent from './2-read.js';
import updateStudent from './3-update.js';
import deleteStudent from './4-delete.js';

function showMenu() {
  console.log("\n=== DATEABASE SERVICES ===");
  console.log("1) Create Database");
  console.log("2) Read Database");
  console.log("3) Update Database");
  console.log("4) Delete Database");
  console.log("0) Close Shop");
}

async function askCreate() {
  const nameStudent = await inputData("student name?");
  const addressStudent = await inputData('student address?');
  await tambahSantri(nameStudent, addressStudent);
}


async function askUpdate() {
  const choice_id = await inputData("how much id update:");
  const choice_name = await inputData("new name?:")
  const choice_address = await inputData("new address?")
  await updateSantri(choice_id, choice_name, choice_address);
}

async function askDelete() {
  const choice_id = await inputData("how much id will delete:");
  await deleteSantri(choice_id);
}

async function serviceLoop() {
  while (true) {
    showMenu();
    const choice = await inputData("Choose a CRUD Database (number): ");

    switch (choice) {
      case "1":
        await askCreate();
        break;

      case "2":
        await seeStudent()
        break;

      case "3":
        await askUpdate()
        break;

      case "4":
        await askDelete()
        break

      case "0":
        console.log("\nShop closed. Thank you.\n");
        await pool.end()
        await closeInput()
        return;

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

serviceLoop();

this a display from app.js

4. Publish Into Github

then we will publish this project into github

first we create new repository on github

this a display from we repository

then we need clone repository into we the device, copy ssh

than we paste to directory which we need, example this

git clone "use the paste"

than we will move some previous file it into this repository

than we can commit and push to repository

finally, we success to create connecting database project

4. Closing

thanks for watching, and see you next time

Problem

Imagine you are a programmer tasked with designing an online registration flow for new students. Create a flowchart for this process in draw.io based on the scenario below.

Scenario & Workflow:

• The process begins when prospective students open the registration page on the boarding school website.

• Prospective students then fill out a registration form containing their name, address, school of origin, etc.

• After the “Register” button is clicked, the system will validate whether all required data has been filled in completely.

• There will be a check (Decision): “Is the form data complete?”

• If NO: The system will display an error message informing the prospective student which data is missing, and the prospective student will be asked to complete the form again.

• If YES: The system will save the prospective student's data into the database.

• After the data is saved, the system will automatically generate a unique Registration Number for the prospective student.

• Finally, the system will display a confirmation page containing “Congratulations, your registration was successful!” along with the Registration Number that has been generated. The process is complete.

Lets Create Flowchart

first we need shape start and end

than we need shape box for program not related with user

than we need shape parallelograms for program related with user

than we need shape box again

than we need shape diamond for program if else, function, and anymore

than we need box again

than we need parallelograms again

Closing

thanks for your watching this article, see you next time…

Ahmad Afan Shobari

Source: https://course.ppqita.my.id/cycle/3.-Backend-Developer-with-Hono/0.6_latihan-tugas?pass=ppqita

1. Install Hono From Node.JS

first, we will install hono in the we directory.

!! remember, make sure you install in diretory the true !!

than we can do init

after init, we can add new line in package.json(add esm),

"type":"module"

than install hono with this code

npm i hono

enough, you success install hono on your directory

2. Testing with Hono

Second, we will test hono can progress or not ?
than install server hono with this code:

npm i @hono/node-server

we will create new file name is Server.js and add this code

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

const app = new Hono();

app.get("/", (c) => {
    return c.html(`
<h1> sample doc API</h1>
<p>rute available</p>
<ul>
<li><a href="/text"> - discribe text biasa</li>
<li><a href="/json"> - discribe output json</li>
</ul>
`)
}
);

app.get("/text", (c) => c.text("hallo this a normal text"));

app.get("/json", (c) => c.json({ data: "this response for JSON", Status: "ok" }));

serve(app, (info) => {
    console.log(`yes, you can do this http://localhost:${info.port}`)
})

and this result run the server.js

3. Error

honest i have many error because i am a newbie and noob.

and i forgot to screen shot my desktop, i am sorry.

4. Closing

thanks for your watching , and see you next time

sorry i can’t speak english but i hope can in future

1. Item List

This project about item list, look this code

let itemList = [
{code: "BRG001", name: "shoap",      price:"5000",  qty: 10},
{code: "BRG002", name: "shampo",     price:"12000", qty: 5},
{code: "BRG003", name: "toothpaste", price: "8000", qty: 7}
];

This code a array object that stores the item list data

2. CRUD Item List Data

Before we crud data we need code for find index for array object : item list data

function findIndexByCode(list, code){
    return list.findIndex(
        (b) => b.code.toLowerCase() === code.toLowerCase()
    );
};

2.1 Create New Data for Item List

we will create 3 new data:

//hard code (for you don't have duplicated)
if(findIndexByCode(itemList, "BRG004") === -1){
    itemList.push({code: "BRG004", name: "tissue",    price: "6000",  qty: 20})
}
//or simple code
itemList.push({code: "BRG004", name: "tissue",    price: "6000",  qty: 20});
itemList.push({code: "BRG005", name: "brush",     price: "7000",  qty: 12});
itemList.push({code: "BRG006", name: "detergent", price: "15000", qty: 9});

2.2 Update Data for Item List

we will update some data in item list

const id_shampo = itemList.findIndex(b => b.code === "BRG002")
    itemList[id_shampo].price = "12500"
    itemList[id_shampo].qty = 6

const id_tissue = itemList.findIndex(b => b.code === "BRG004")
    itemList[id_tissue].price = "12500"
    itemList[id_tissue].qty = 6

2.3 Delete Data for Item List

we will delete 1 data for item list

const indexToothPaste = itemList.indexOf(2);
if(indexToothPaste === -1){
itemList.splice(indexToothPaste, 1)
}

2.4 Read Data for Item List

we wiil create table from item list data

console.log("no  |kode   | nama         | harga      |qty  ")
itemList.forEach((b, i) => {
const no = string(i + 1).padStart(3, "0");
const code = b.code.padEnd(5, " ");
const name = b.name.padEnd(12, " ");
const harga = string(b.harga).padStart(9, " ");
const qty = string(b.qty).padStart(3, " ");
console.log(`${no} | ${code} | ${name} | ${price} | ${qty} `);
});

2.5 Result Data

3. Closing

see you next time guys, good bye

1. Create Ingredients

first we need for folder coffe shop, you can typing this

--create & open folder--
mkdir coffe-shop
cd coffe-shop

--initial--
npm init

then you can use npm init for give you package.json

then you can edit in folder package.json

then you can create new file in folder coffe-shop

2. Create Service

In this segmen we will create code every file in direcotory

import promptSync from "prompt-sync";
import makeCoffee from "./menu/create-coffe.js";
import makeTea from "./menu/create-tea.js"
import makeFriedRice from "./menu/create-fried-rice.js"
import makeGrilledChicken from "./menu/create-grilled-chiken.js"

const prompt = promptSync({ sigint: true });

function showMenu() {
  console.log("\n=== WARUNG SERVICES ===");
  console.log("1) Make Coffee");
  console.log("2) Make Tea        (please create the module)");
  console.log("3) Fried Rice      (please create the module)");
  console.log("4) Grilled Chicken (please create the module)");
  console.log("0) Close Shop");
}

function askNumber(label, def = 0) {
  const txt = prompt(`${label} (default ${def}): `).trim();
  const num = txt === "" ? def : Number(txt);
  return Number.isNaN(num) ? def : num;
}

function askBoolean(label, def = false) {
  const txt = prompt(`${label} (y/n, default ${def ? "y" : "n"}): `)
    .trim()
    .toLowerCase();
  if (txt === "") return def;
  return txt === "y" || txt === "yes";
}

function coffeeService() {
  console.log("\n— Coffee Menu —");
  const cups = askNumber("How many cups", 1);
  const sugar = askNumber("Sugar (tsp per cup)", 1);
  const withMilk = askBoolean("With milk?", false);
  const result = makeCoffee({ cups, sugar, withMilk });
  console.log("\n" + result + "\n");
}

function teaService() {
  console.log("\n— Tea Menu —");
  const cups = askNumber("How many cups", 1);
  const sugar = askNumber("Sugar (tsp per cup)", 1);
  const teaBag = askBoolean("add Tea Bag?", false);
  const lemonSqueeze = askBoolean("add lemonsqueeze?", false);
  console.log(cups, sugar, teaBag, lemonSqueeze);
  const result = makeTea({ cups, sugar, teaBag, lemonSqueeze });
  console.log("\n" + result + "\n");
}

function friedRiceService() {
  console.log("\n— Fried Chicken Menu —");
  const servings = askNumber("How many servings", 1);
  const spicy = askNumber("spicy level (0-5)", 1);
  const egg = askBoolean("with egg?", false);
  const chicken = askBoolean("with chicken?", false);
  console.log(servings, spicy, egg, chicken);
  const result = makeFriedRice({servings, spicy, egg, chicken});
  console.log("\n" + result + "\n");
}

function grilledChickenService() {
  console.log("\n— Grilled Chicken Menu —");
  const servings = askNumber("How many servings", 1);
  const sweet = askNumber("sweet level (0-5)", 1);
  const spice = askBoolean("with spice?", false);
  const grilling = askNumber("grilling time?", 1);
  const result = makeGrilledChicken({servings, sweet, spice, grilling});
  console.log("\n" + result + "\n");
}

function serviceLoop() {
  while (true) {
    showMenu();
    const choice = prompt("Choose a menu item (number): ").trim();

    switch (choice) {
      case "1":
        coffeeService();
        break;

      case "2":
        teaService()
        break;

      case "3":
        friedRiceService()
        break;

      case "4":
        grilledChickenService()

      case "0":
        console.log("\nShop closed. Thank you.\n");
        return;

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

serviceLoop();

this a main program for mini caffe

3. Create File Menu

then you can create code in every file about menu

3.1 Menu Create Coffe

const TOTAL_STIRS = 18;

export default function makeCoffee(options = {}) {
  const { cups = 1, sugar = 1, withMilk = false } = options;
console.log(options)
  // Simple validation
  if (cups <= 0) return "Number of cups must be at least 1.";
  if (sugar < 0) return "Sugar cannot be negative.";

  const steps = [];
  steps.push(`Preparing ${cups} cups of coffee.`);
  steps.push(`Add coffee grounds and ${sugar} tsp of sugar per cup.`);
  steps.push("Pour hot water.");
  if (withMilk) {
    steps.push("Add milk to taste.");
  }

  // Stirring simulation: show stir #1 to #18
  for (let i = 1; i <= TOTAL_STIRS; i++) {
    steps.push(`Stirring... (${i} of ${TOTAL_STIRS})`);
  }

  steps.push("Coffee is ready to be served.");
  return steps.join("\n");
}

3.2 Menu Create Tea

const TOTAL_STIRS = 18;

export default function makeTea(options = {}) {
    console.log(options)
  const { cups = 1, sugar = 1, teaBag = false , lemonSqueeze = false } = options;

  // Simple validation
  if (cups <= 0) return "Number of cups must be at least 1.";
  if (sugar < 0) return "Sugar cannot be negative.";

  const steps = [];
  steps.push(`Preparing ${cups} cups of tea.`);
  steps.push(`Add tea grounds and ${sugar} tsp of sugar per cup.`);
  steps.push("Pour hot water.");
  if (lemonSqueeze){
      steps.push("add lemon to teste.");
    }
    if (teaBag) {
      steps.push("Add tea bag.");
    }

  steps.push("tea is ready to be served.");
  return steps.join("\n");
}

3.3 Menu Create Fried Rice

const TOTAL_FRYING = 12;

export default function makeFriedRice(options = {}) {
  const { servings = 1, spicy = 1, egg = false , chicken = false} = options;
console.log(options)
  // Simple validation
  if (servings < 0) return "Number of serving must be at least 1.";
  if (spicy < 0) return "spicy cannot be negative.";

  const steps = [];
  steps.push(`Preparing ${servings} servings of friedchiken.`);
  steps.push(`add chili peppers according to taste ${spicy}`);
  steps.push("starting cooking.");
  if (egg) {
    steps.push("Add egg to taste.");
  }
  if (chicken) {
    steps.push("Add chicken to taste.");
  }

  // Stirring simulation: show stir #1 to #18
  for (let i = 1; i <= TOTAL_FRYING; i++) {
    steps.push(`frying... (${i} of ${TOTAL_FRYING})`);
  }

  steps.push("fried rice is ready to be served.");
  return steps.join("\n");
}

3.4 Menu Create Grilled Chicken

export default function makeGrilledChicken(options = {}) {
  const { servings = 1, sweet = 1, spice = false , grilling = 1} = options;
console.log(options)
  // Simple validation
  if (servings < 0) return "Number of serving must be at least 1.";
  if (sweet < 0) return "sweet cannot be negative.";

  const steps = [];
  steps.push(`Preparing ${servings} servings of friedchiken.`);
  steps.push(`add sweet peppers according to taste ${sweet}`);
  steps.push("starting cooking.");
  if (spice) {
    steps.push("Add spice to taste.");
  }

  // Stirring simulation: show stir #1 to #18
  for (let i = 1; i <= grilling; i++) {
    steps.push(`frying... (${i} of ${grilling})`);
  }

  steps.push("grilling chicken is ready to be served.");
  return steps.join("\n");
}

4. Running Code

now you can running this project with node service.js let’s go to practic

node service

this ui for running this code

you can try make tea with typing 2

you will be asked about the menu you ordered, then process running

5. Closing

thanks for you watching and see you next day……..

1. Add File Calculator

in this segmen we will create new file the name is calculator.js

2. Create Code In File

this code for we segmen

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

console.clear();
console.log("=== Kalkulator Console ===");

let jalan = true;

while (jalan) {
  console.log("\nPilih operasi:");
  console.log("1. Tambah");
  console.log("2. Kurang");
  console.log("3. Kali");
  console.log("4. Bagi");
  console.log("0. Keluar");

  const pilihan = await getinput("Masukkan pilihan (0-4)");

  switch (pilihan) {
    case "1": {
      const a = Number(await getinput("Masukkan angka pertama"));
      const b = Number(await getinput("Masukkan angka kedua"));
      console.log(`Hasil: ${a} + ${b} = ${a + b}`);
      break;
    }
    case "2": {
      const a = Number(await getinput("Masukkan angka pertama"));
      const b = Number(await getinput("Masukkan angka kedua"));
      console.log(`Hasil: ${a} - ${b} = ${a - b}`);
      break;
    }
    case "3": {
      const a = Number(await getinput("Masukkan angka pertama"));
      const b = Number(await getinput("Masukkan angka kedua"));
      console.log(`Hasil: ${a} * ${b} = ${a * b}`);
      break;
    }
    case "4": {
      const a = Number(await getinput("Masukkan angka pertama"));
      const b = Number(await getinput("Masukkan angka kedua"));
      if (b === 0) {
        console.log("❌ Tidak bisa dibagi 0");
      } else {
        console.log(`Hasil: ${a} / ${b} = ${a / b}`);
      }
      break;
    }
    case "0":
      jalan = false;
      console.log("Terima kasih, program selesai.");
      break;
    default:
      console.log("Pilihan tidak valid, coba lagi!");
  }
}

await closeInput();

this ui for file calculator.js

3. Running code

For running code we typing this

node calculator.js

then appear this

4. Closing

thanks for watching , and see you next time…

1. What Is NPM?

• is short, npm is a werehouse or library for extension for developer, or a package for use developer so easy for developing web or aplication, similiar to plugin in figma

1.1 Type important About NPM:

1. Dependencies : the packages must be in developer, bacause its makes process can run and success, like express, sharp, and any more

2. DevDependencies : the package not must be in developer, bacause its makes easy when programming in develop our web or aplication, like eslint, nodemon, and any more

2. How Install Package In NPM?

before we install, we are make sure directory appropriate, we are open our terminal (git bash, default terminal, any more), and you can typing this

imporatant!!, bacause in this practic i am use ubuntu, then little different for you user windows, but is ok

2.1 Install Package JSON In Directory

this code can create main configurate, like name project, version , and nay more

--for you whants automatic--
npm init -y

--for you manual creating
npm init

after you typing this code, then come a file package.json in directory

2.1.1 automatic

2.1.2 manual

2.2 Add Type ESM(ECMAScript Module) in package json

After we install package json , we need insert type module for package json, because is important for you use device modern, first you can search in file explorer or you vscode or anything, then insert this code

"type": "module"

2.3 Add Code On Object Script

Add this code so that can running your code

{
  "dev": "node index.js",
  "start": "node main.js",
  "lint": "eslint ."
}

2.4 For Exemple Install Package Dependencies

in this exemple we will install package chalk for simple input name

npm install chalk

this can make console log very beautiful with add color for your code

this after you download and we will practic it later

2.5 for Exemple Install Package dev Depenidencies

in this exemple we will install sharp for resize image

npm install sharp --save-optional

this after you downloaded, but we don’t will practic because it very complicated

3. Create Code

in this segment we will create code in terminal

--manual create file
touch name-file.js

--create and edit file
nano name-file.js

in this file i try about console anyquestion, and this my code

after create file input.js, i create file index.js

and i create code again, it’s very bored

4. Running Code

this a code for running we program

npm run dev

5. (Bonus) Practic Use Chalk

in this project i edit file index.js, and use this

Boom!!….

6. closing

thanks for your attention, good bye

Manfaat Mengunakan Supabase

• Kecepatan Pengembangan: Dengan semua fitur yang disediakan oleh supabase, kita bisa membangun aplikasi dengan jauh lebih cepat.

• Skalabilitas: Supabase dibangun untuk bisa menangani pertumbuhan aplikasi, dari proyek kecil hingga aplikasi berskala besar.

• Open-Source: Kode sumbernya terbuka, yang berarti komunitas bisa berkontribusi dan kamu tidak terkunci pada satu vendor saja.

• Fleksibilitas: Karena menggunakan PostgreSQL, kamu memiliki kontrol penuh atas skema database dan bisa menggunakan tools PostgreSQL lainnya.

Singkatnya, Supabase adalah "toolbox" modern untuk developer yang ingin membuat aplikasi web atau mobile dengan cepat dan efisien, dengan backend yang powerful dan lengkap.

Membuat New Project

• untuk pertama kali kita akan masuk ke dalam webnya yaitu Supabase ini adalah link webnya

kumudian kita akan ditampilkan tampilan ini:

langkah selanjutnya klik Start your project yaitu button yang berwarna hijau diatas

kemudian kita diminta untuk login, jika kalian memunyai akun github maka gunakan akun tersebut

tampilan awal akan seperti diatas, isi nama terserah apa saja yang penting kalian suka, kemudian isi type sesuai yang kalian inginkan disini saya akan mengunakan Educational untuk pembelajaran kali ini, kemudian pada plan pilih free untuk percobaan pertama, lalu klik Create organization yang berwarna hijau

selanjutnya kita diperintahkan untuk membuat sebuah project, untuk langkah pertama isi project name dengan nama project yang kalian inginkan, kemudian isi database password dengan password yang kuat (jika ingin mudah ada fitur generate a password untuk mempermudah pembuatan project) lalu copy password, lalu pilih region ini akan secara otomatis memilihkan yang terdekat (tidak usah di rubah), klik Create new project untuk melanjutkan

tampilan selanjutnya kita di bawa pada tampilan awal project yang kita buat, untuk langkah selanjutnya kita akan mengkoneksikan antara supabase dengan postgresql yang akan kita akan gunakan nanti, yaitu dengan menekan button connect pada navbar di bagian atas dengan logo colokan/ stok kontak

pada tampilan ini akan ada pilihan di atas, kemudian copy yang bagian transaction pooler isi passwordnya dibagian “isiPassword'“ dibawah ini sesuai password yang kita buat sebelumnya

postgresql://postgres.htsgbxofbdxtaacrpjau:IsiPassword@aws-0-ap-southeast-1.pooler.supabase.com:6543/postgres

kemudian kalian bisa pergi ke git bash dan paste tadi yang kita copy dengan format seperti ini

psql postgresql://postgres.htsgbxofbdxtaacrpjau:IsiPassword@aws-0-ap-southeast-1.pooler.supabase.com:6543/postgres

maka tampilan akan menjadi seperti ini

munkin cukup sekian dan terima kasih hhehhe…

1. Contoh Masalah

1.2 Kantin Sekolah

Masalah yang terlihat:

• hp_santri, daftar_item, metode_bayar, rincian_bayar = multi-nilai (melanggar 1NF).

• Identitas santri & kasir diulang antar transaksi (redundan).

• total_sebelum_diskon bisa dihitung dari item (redun dan rawan salah).

2. Penyelesaianya

2.1 1NF Kolom Atomic.

Tujuan: setiap kolom harus atomic (satu sel = satu nilai).

• Pecah hp_santri → tabel terpisah: SANTRI_HP(nis, nomor_hp).

• Pecah daftar_item per baris item → DETAIL_TRANSAKSI(transaksi_id, produk_kode, nama_produk, qty, harga_satuan).

• Pecah pembayaran multi-metode → PEMBAYARAN(transaksi_id, metode, nominal).

Catatan: Di 1NF, boleh masih simpan nama_santri, kelas, asrama, nama_kasir, jabatan_kasir di tabel transaksi. Fokus dulu atomisasi nilai.

Output 1NF (daftar tabel minimal):

• KANTIN_TRANSAKSI(id_transaksi, tgl_waktu, nis_santri, nama_santri, kelas, asrama, nama_kasir, jabatan_kasir, total_sebelum_diskon, kembalian, catatan)

• SANTRI_HP(nis, nomor_hp)

• DETAIL_TRANSAKSI(id_transaksi, produk_kode, nama_produk, qty, harga_satuan)

• PEMBAYARAN(id_transaksi, metode, nominal)

  maka tablenya akan seperti ini:

  

2.2 2NF bergantung penuh pada primary key.

Tujuan: kolom non-key bergantung penuh pada primary key tabelnya.

• • Pisahkan entitas yang bukan milik transaksi:

    • SANTRI(nis, nama, kelas, asrama) (di KANTIN_TRANSAKSI cukup simpan nis)

    • PEGAWAI(id_pegawai, nama, jabatan) (di KANTIN_TRANSAKSI simpan pegawai_id)

    • PRODUK(kode, nama, harga_default?) (tetap simpan harga_satuan_saat_transaksi di DETAIL_TRANSAKSI)

Revisi tabel:

• KANTIN_TRANSAKSI(id_transaksi, tgl_waktu, nis, pegawai_id, total_sebelum_diskon, kembalian, catatan)

• SANTRI(nis, nama, kelas, asrama)

• PEGAWAI(id_pegawai, nama, jabatan)

• PRODUK(kode, nama)

• DETAIL_TRANSAKSI(id_transaksi, produk_kode, qty, harga_satuan)

• PEMBAYARAN(id_transaksi, metode, nominal)

• SANTRI_HP(nis, nomor_hp)

Alasan 2NF: nama_santri/kelas/asrama bergantung ke NIS (santri), bukan ke transaksi. nama_kasir/jabatan bergantung ke pegawai, bukan langsung transaksi.

maka akan jadi seperti ini:

2.3 3NF ketergantungan transitif.

Tujuan: tidak ada ketergantungan transitif (non-key → non-key).

• Pastikan atribut seperti jabatan hanya ada di PEGAWAI, bukan di transaksi.

• kelas & asrama bila ingin lebih rapi bisa dipisah:

  • KELAS(id, nama), ASRAMA(id, nama), lalu di SANTRI simpan kelas_id & asrama_id. (opsional untuk tugas 30 menit; cukup catat idenya)

• Harga historis: tetap simpan harga_satuan di DETAIL_TRANSAKSI (fakta saat jual), agar transaksi lama tidak berubah meski harga produk update.

Struktur Final Minimal (3NF, versi ringkas):

• SANTRI(nis PK, nama, kelas, asrama)

• PEGAWAI(id_pegawai PK, nama, jabatan)

• PRODUK(kode PK, nama)

• KANTIN_TRANSAKSI(id_transaksi PK, tgl_waktu, nis FK→SANTRI, pegawai_id FK→PEGAWAI, kembalian, catatan)

• DETAIL_TRANSAKSI(id_transaksi FK, produk_kode FK, qty, harga_satuan)

• PEMBAYARAN(id_transaksi FK, metode, nominal)

• SANTRI_HP(nis FK, nomor_hp)

Catatan: total_sebelum_diskon tidak wajib disimpan (bisa dihitung dari DETAIL). Jika disimpan untuk performa, dokumentasikan sebagai denormalisasi terkontrol.

bila dibuat erd maka akan menjadi seperti ini:

3. Praktik Di SQL

• setelah kita membuat erdnya maka kita akam membuat sqlnya

4. Penutupan

• mungkin cukup sekian dari saya bila ada salah mohon dimaafkan thanks….see you next time

• commend line: git bash, terminal, atau yang lainnya

yang kita dapatkan dari praktik adalah pengunaan node js di gitbash

1. Download node Js Di browser

• untuk mendownloadnya kalian dapat pergi ke web ini https://nodejs.org/en/download

kemudian kalian bisa lihat windows installer (.msi) dibagian bawah , namun jangan langsung download pastikan terlebih dahulu yang diinstall sesuai device kalian, karena saya mengunakan windows 64 bit maka saya mengunakan yang sesuai

jika sudah sesuai maka kalian bisa langsung mendownloadnya

2. Instalasi Node Js

• jika sudah maka akan muncul seperti ini dan klik untuk instalasi

kemudian akan tampil seperti ini maka klik next

pilih change

lalu next

lalu checklist dan next lagi

pilih change

maka proses downloading akan berjalan, tunggu hingga selesai dan muncul tulisan finish maka klik

3. Praktik Pengunaan Node js

• Pada tahap ini kita akan mencoba untuk membuat sebuah file kemudian mencoba menjalankannya,

3.2 Melihat Versi Node Js & NPM

Pertama buka git bash kita

kemudian coba ketikan ini:

node -v

maka akan muncul seperti ini

lalu kita coba juga npm

npm -v

maka akan muncul seperti ini

3.2 Query File

• kita coba mengunakan perintah dasar dari git bash untuk pengubahan file

--membuat folder
mkdir nama-folder-yang-akan-dibuat

--membuat file 
touch nama-file-yang-akan-dibuat

--berpindah folder
cd nama-file-yang-akan-dituju

--mengedit file(bila file tidak ada maka akan dibuatkan secara otomatis)
nano nama-file-yang-akan-diedit

Pada tahap ini kita akan mencoba untuk masuk ke folder tertentu agar nantinya akan menjadi tempat penyimpanan file yang akan dibuat nanti

kemudian kita akan membuat folder tempat penyimpanan file yang nanti kita akan buat, sekaligus masuk ke dalamnya

lalu kita coba membuat file namun saya akan mengunak perintah nano (mengedit) karena bisa langsung membuat file walau file yang dimaksud belum ada

maka layar akan seperti ini

coba buat sesuatu dengan javacript

lalu tekan ctrl + x untuk keluar dari pengeditan, ketik y atau yes, kemudian enter

lalu untuk menjalankanya gunakan code ini

node nama-file-yang-ingin-dijalankan

4. Penutup

mungkin cukup sekian dari saya terima kasih

1. Masalah

sebuah sekolah sedang mengadakan PPDB (penerimaan peserte didik baru) maka untuk mempermudah pihak sekolah membuat system database untuk kemudahan dalam pelaksanaanya

• 1 orang tua bisa memiliki banyak santri (One to Many).

• 1 santri hanya punya 1 data pendaftaran (One to One).

• 1 pendaftaran bisa memiliki beberapa pembayaran (One to Many).

2. Praktik Membuat Table

2.1 Table Santri

CREATE TABLE santri (
  santri_id SERIAL PRIMARY KEY,
  nama VARCHAR(100) NOT NULL,
  tempat_lahir VARCHAR(50),
  tanggal_lahir DATE,
  alamat TEXT,
  no_hp_ortu VARCHAR(20),
  asal_sekolah VARCHAR(100),
  orang_tua_id INT REFERENCES orang_tua(orang_tua_id)
);

2.2 Table Orang Tua

CREATE TABLE orang_tua (
  orang_tua_id SERIAL PRIMARY KEY,
  nama_ayah VARCHAR(100),
  pekerjaan_ayah VARCHAR(100),
  nama_ibu VARCHAR(100),
  pekerjaan_ibu VARCHAR(100)
);

2.3 Table Pendaftaran

CREATE TABLE pendaftaran (
  pendaftaran_id SERIAL PRIMARY KEY,
  santri_id INT REFERENCES santri(santri_id),
  no_pendaftaran VARCHAR(20) UNIQUE,
  tanggal_daftar DATE,
  program_pilihan VARCHAR(50)
);

2.4 Table Pembayaran

CREATE TABLE pembayaran (
  pembayaran_id SERIAL PRIMARY KEY,
  pendaftaran_id INT REFERENCES pendaftaran(pendaftaran_id),
  tanggal_bayar DATE,
  jumlah INT,
  status VARCHAR(20) CHECK (status IN ('Lunas', 'Belum'))
);

3. Praktik Insert Data

• 3 data orang tua

• 5 data santri

• 5 data pendaftaran

• 5 data pembayaran

3.1 Data Orang Tua

3.2 Data Santri

3.3 Data Pendaftaran

3.4 Data Pembayaran

4. Query Data

4.1 Daftar santri dan orang tua

4.2 Daftar Santri Yang Belum Bayar

4.3 Daftar Total Pembayaran

5. Penutup

mungkin cukup sekian terima kasih… By Ahmad Afan Shobari

copyright: https://course.ppqita.my.id/cycle/0.1.-mastering-data-with-postgreSQL/18.5_Latihan-PPDB-Santri?pass=ppqita

1. Masalah

Pondok "PPQITA" ingin menertibkan absensi santri per pertemuan berdasarkan jadwal tetap. Selama ini absensi di kertas/WA menyulitkan rekap harian/bulanan. Sistem yang dibangun harus:

• Mencatat kehadiran setiap santri pada tanggal tertentu untuk jadwal tertentu.

• Mendukung status: HADIR | TERLAMBAT | SAKIT | IZIN | ALPHA.

• Memastikan tidak ada duplikasi catatan untuk santri yang sama pada kombinasi (tanggal, jadwal).

• Menyediakan rekap sederhana (per jadwal/per bulan).

2. Praktik

2.1 Membuat Table

• pertama kita akan membuat tablenya

--table ustadz
create table ustadz (
 id_ustadz   serial primary key,
 nama_ustadz varchar(50)
 );
--table kelas
 create table kelas (
 id_kelas    serial primary key,
 nama_kelas  varchar(50),
 tingkat     int
 );
--table santri
create table santri (
 id_santri   serial primary key,
 nis         varchar(20) unique,
 nama_santri varchar(100),
 jk          char(1),
 kelas_id    int references kelas(id_kelas) ON UPDATE CASCADE ON DELETE RESTRICT
 );
--table jadwal
create table jadwal (
 id_jadwal   serial primary key,
 id_kelas    int references kelas(id_kelas) ON UPDATE CASCADE ON DELETE RESTRICT,
 id_ustadz   int references ustadz(id_ustadz) ON UPDATE CASCADE ON DELETE RESTRICT,
 mapel       varchar(50),
 hari        varchar(50),
 jam_mulai   time,
 jam_selesai time,
 lokasi      varchar(150)
 );
--table kehadiran
create table kehadiran (
 tanggal     date ,
 id_jadwal   int references jadwal(id_jadwal) on update cascade on delete restrict,
 id_santri   int references santri(id_santri) on update cascade on delete restrict,
 status      varchar(50) check (status in ('hadir', 'terlambat', 'sakit', 'izin', 'alpha')),
 waktu_masuk time,
 menit_telat int check (menit_telat >= 0),
 catatan     text
 );

Kemudian kita akan menambahkan index pada beberapa column

2.2 Menambahkan Data

kelas

• (nama=Tahfidz 1A, tingkat=1)

ustadz

• (nama=Ust. Alwi)

santri

• (24101, Ahmad Fauzi, L, kelas=Tahfidz 1A)

• (24102, Bima Putra, L, kelas=Tahfidz 1A)

• (24103, Cahya Lestari,P, kelas=Tahfidz 1A)

jadwal

• (kelas=Tahfidz 1A, ustadz=Ust. Alwi, mapel=Tahfidz, hari=Senin, jam=07:00-08:30, lokasi=Kelas A)

• (kelas=Tahfidz 1A, ustadz=Ust. Alwi, mapel=Tahfidz, hari=Selasa, jam=07:0008:30, lokasi=Kelas A)

kehadiran (contoh dua hari):

• (tgl 2025-08-25, jadwal=Senin, S1=HADIR 06:58, 0, Datang awal)

• (tgl 2025-08-25, jadwal=Senin, S2=TERLAMBAT 07:12, 12, Macet)

• (tgl 2025-08-25, jadwal=Senin, S3=HADIR 07:05, 5, -)

• (tgl 2025-08-26, jadwal=Selasa, S1=HADIR 06:59, 0, -)

• (tgl 2025-08-26, jadwal=Selasa, S2=IZIN, NULL, NULL, Urusan keluarga)

• (tgl 2025-08-26, jadwal=Selasa, S3=ALPHA, NULL, NULL, -)

`

2.3 CRUD Data

1. kelas

   • Create kelas baru.

   • List kelas (urut tingkat, nama) dengan pagination (LIMIT/OFFSET).

   • Update nama & tingkat sebuah kelas.

   • Delete kelas (uji kegagalan jika masih dirujuk FK).

2. ustadz

   • Create ustadz.

   • Cari ustadz by nama (ILIKE), paginate.

   • Update nama ustadz.

   • Delete ustadz (uji FK).

3. santri

   • Create santri (NIS unik).

   • List santri per kelas + opsi search nama/NIS (ILIKE), paginate.

   • Detail santri beserta nama kelas.

   • Update (ganti kelas/jk/nama/nis).

   • Delete santri (uji FK).

4. jadwal

   • Create jadwal (kelas, ustadz, mapel, hari, jam, lokasi).

   • List jadwal per kelas/hari.

   • Detail jadwal (tampilkan nama kelas & ustadz).

   • Update jadwal.

   • Delete jadwal (uji FK).

5. kehadiran

   • Create satu baris absensi (tanggal, jadwal, santri, status, waktu_masuk, menit_telat, catatan).

     Uji UNIQUE(tanggal, jadwal, santri) dengan mencoba insert duplikat.

   • List absensi untuk satu tanggal & jadwal (tampilkan NIS, Nama Santri, status, menit_telat).

   • Update status/waktu_masuk/menit_telat/catatan.

   • Delete satu catatan absensi.

2.3.1 Kelas

2.3.2 Ustadz

2.3.3 Santri

2.3.4 Jadwal

2.3.5 Kehadiran

2.4 Query Data

2.4.1 Query Total Kehadiran

2.4.2 Query Data Bulanan

2.4.3 Query Data Yang Sering terlambat

2.5 Uji Contraint

2.5.1 Memasukan Data Yang Mirip Pada Constraint UNIQUE

Pada gambar diatas menunjukan bahwa data yang dikenai UNIQUE tidak dapat menyimpan yang sama, karena akan menghasilkan error , dimana nis ‘24101‘ sudah ada didalam table dan kita tidak dapat mengunakannya lagi

2.4.2 Menghapus Data Yang Terdapat Foreign Key

Pada gambar diatas menunjukan bahwa data yang tersambung dengan data yang menjadi fk (foreign key) tidak dapat dihapus karena itu dapat merusak susunan table , dan pasti akan muncul error

2.4.3

2.4.4 Mencoba Keunggulan Contsraint Check

Penjelasan Hubungan

1. Anggota – Peminjaman

   • Satu anggota bisa melakukan banyak peminjaman.

   • Relasi: One-to-Many.

2. Buku – Peminjaman

   • Satu buku bisa dipinjam berkali-kali (oleh anggota berbeda di waktu berbeda).

   • Relasi: One-to-Many.

3. Petugas – Peminjaman

   • Satu petugas bisa melayani banyak transaksi peminjaman.

   • Relasi: One-to-Many.

1. Praktik

1.1 Membuat Table

--table anggota
CREATE TABLE anggota (
 id            SERIAL PRIMARY KEY,
 nama          VARCHAR(150) NOT NULL,
 alamat        VARCHAR(200) NOT NULL,
 no_hp         VARCHAR(20) NOT NULL
 );

--table buku
create table buku (
 id_buku       serial primary key,
 judul         varchar(50),
 pengarang     varchar(100),
 penerbit      varchar(50),
 tahun_terbit  int,
 kategori      varchar(150)
 );

--table petugas
create table petugas (
 id_petugas    serial primary key,
 nama          varchar(150),
 jabatan       varchar(50)
 );

--table peminjaman
create table peminjaman(
 id_peminjaman serial primary key,
 tgl_pinjam    date not null,
 tgl_kembali   date not null,
 status        varchar(20),
 id_anggota    int references anggota(id) on delete cascade,
 id_buku       int references buku(id_buku) on delete cascade,
 id_petugas    int references petugas(id_petugas) on delete cascade
 );

table anggota

table buku

table petugas

table peminjaman

error:

• perlu ekstra dalam membuat peminjaman karena lupa memberi tipe data pada suatu entity id_anggota, id_buku, dan id_petugas

1.2 Insert Data

• kemudian kita akan memasukan data ke dalam table yang kita buat

1.3 Select Data

maka akan terlihat data yang diminta

mungkin hanya sekian terima kasih