Web Development Unggulan

Data Workspace & T-SQL Playground

Aplikasi web tabular mirip spreadsheet dengan backend MSSQL dan playground latihan T-SQL (8 latihan bertahap). Dirancang sebagai demo lokal.

Status
Demo
Tanggal
2025-09-10
Kategori
Web Development
  • Tabulator
  • React
  • Node.js
  • TypeScript
  • MSSQL
  • T-SQL
  • Docker

Coba Tabel Interaktif

Data Workspace Demo interaktif · penyimpanan browser

Klik dua kali sel untuk mengedit, lalu Enter untuk menyimpan. Gunakan checkbox untuk memilih baris. ID dibuat otomatis.

Memuat tabel…

Ringkasan dan Pertanyaan Bisnis

Bagaimana membangun aplikasi tabular serupa spreadsheet yang terhubung ke database MSSQL, serta menyediakan playground latihan T-SQL bagi pemula?

Dataset yang Digunakan

Dataset sintetis MSSQL dengan empat tabel inti: Customers, Products, Orders, dan OrderItems. Digunakan baik oleh aplikasi grid maupun oleh T-SQL playground (database latihan terpisah).

Dataset sintetis untuk demonstrasi pembelajaran.

Tools

Demo tabel pada halaman ini memakai Tabulator dan penyimpanan browser. Aplikasi Data Workspace terpisah memakai React, Node.js, TypeScript, MSSQL (T-SQL), dan Docker (opsional). Status: demo.

Proses Pengerjaan

  1. Merancang skema basis data MSSQL dengan primary key, foreign key, constraint, dan index.
  2. Membuat backend API Node.js dengan TypeScript untuk operasi CRUD grid dan eksekusi query T-SQL.
  3. Membangun antarmuka grid tabel dengan React: header kolom, nomor baris, sorting, filter, pencarian, dan pagination melalui server.
  4. Membuat editor SQL dengan syntax highlighting T-SQL, schema explorer, dan tabel hasil query.
  5. Menyediakan 8 latihan T-SQL bertahap dengan instruksi, query awal, dan solusi yang dapat dibuka.

Temuan dari Data Contoh

  • Aplikasi grid dapat membaca, menambah, mengedit, dan menghapus baris dengan validasi tipe data.
  • Import dan export CSV berfungsi dengan preview dan konfirmasi sebelum penyimpanan.
  • Tersedia 8 latihan T-SQL yang mencakup SELECT, WHERE, JOIN, agregasi, CASE, CTE, fungsi tanggal, dan window function.
  • Playground menggunakan akun database khusus dengan izin hanya baca pada tabel latihan.

Temuan di atas berasal dari data sintetis, bukan hasil bisnis nyata.

Keterbatasan dan Pelajaran

  • Tabel interaktif pada portfolio menyimpan perubahan di browser. Aplikasi backend terpisah memakai mode demo dalam memori jika MSSQL belum tersedia; integrasi database belum diuji pada lingkungan ini.
  • Belum ada dukungan formula spreadsheet atau kolaborasi realtime.
  • Fitur INSERT/UPDATE/DELETE/DDL pada playground hanya tersedia sebagai materi, tidak dieksekusi.

Rencana Pengembangan

  • Menghubungkan aplikasi ke instance MSSQL native yang tersedia di Windows.
  • Menguji integrasi penuh dengan Docker Compose untuk SQL Server Developer.
  • Menambahkan lebih banyak latihan T-SQL dan skenario studi kasus.

Catatan: Ini adalah studi kasus demonstrasi dengan persona fiksi. Semua data, angka, dan narasi adalah contoh untuk tujuan pembelajaran, bukan pencapaian bisnis nyata.