FluentStack

SQL Basics

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 18: Backend Basics for Frontend EngineersAdvanced55 menitBahasa Indonesia

SQL Basics

Membaca tabel, row, column, serta query SELECT sederhana agar frontend dapat memahami data yang menjadi sumber UI.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Membedakan table, row, dan column dalam data aplikasi
  • Membaca SELECT, FROM, WHERE, dan ORDER BY pada query sederhana
  • Menghubungkan hasil query dengan data yang dirender UI
  • Menyadari bahwa frontend membaca contract data, bukan menjalankan query production secara langsung
SQLData ModelingAPI ContractsFrontend Integration

Isi lesson

6 blok
  1. 1.
    UI biasanya berawal dari row yang dipilih backendBelum selesaiWajib
  2. 2.
    Baca query catalog dari atas ke bawahBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Query bukan pengganti contract dan policyBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

UI biasanya berawal dari row yang dipilih backend

Wajib

Database relational menyimpan data dalam table. Table courses dapat memiliki column id, title, published, dan updated_at. Satu row mewakili satu course. Saat Course Catalog menampilkan beberapa card, backend biasanya membaca row yang cocok dengan kebutuhan product, lalu mengirim shape response yang telah menjadi API contract. Frontend tidak perlu menjadi database administrator untuk memahami flow ini, tetapi perlu bisa bertanya: table mana sumber data ini, column mana yang benar-benar dipakai UI, filter apa yang berlaku, dan apakah urutan hasil terlihat masuk akal.

SQL adalah bahasa untuk membaca atau mengubah data di banyak database relational. Di module ini kita hanya membaca SELECT sederhana. Jangan menjalankan query pada production, mengubah schema, atau menganggap query contoh sebagai API public. Query menjadi alat komunikasi untuk memahami sumber data dan memeriksa asumsi saat integration.

Bagian ini memengaruhi progres lesson.

Baca query catalog dari atas ke bawah

Wajib
sql
SELECT id, title
FROM courses
WHERE published = true
ORDER BY updated_at DESC;

SELECT memilih column id dan title. FROM menunjukkan table courses. WHERE hanya mengambil course published. ORDER BY meminta hasil diurutkan dari updated_at terbaru ke lama karena DESC. Query ini tidak meminta seluruh row dengan SELECT *, tidak mengubah data, dan belum menjelaskan authorization atau API response. Backend tetap menentukan query, policy, serta contract yang aman.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Read course catalog query

Nyatakan bagian query catalog yang kamu baca tanpa menjalankan SQL atau mengakses database.

Tujuan awal: Fokus di tab TS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

5 cek otomatis4 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Bagian mana dari query yang membatasi agar hanya course published yang dibaca?

Progres lesson naik setelah jawaban benar.

Catatan penting

Wajib

Query bukan pengganti contract dan policy

Membaca SQL membantu frontend memahami data, tetapi frontend tidak boleh menyimpulkan semua row dapat ditampilkan hanya karena column ada di table. API contract, authorization server, dan database policy menentukan data yang benar-benar boleh diterima user. Saat response tidak sesuai, kumpulkan endpoint, filter product, response shape, dan user context sebelum mengubah UI.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Table menyimpan kumpulan row; column menyimpan satu jenis nilai pada row.
  • SELECT memilih column, FROM memilih table, WHERE menyaring row, dan ORDER BY menentukan urutan.
  • Frontend memakai hasil data melalui API atau service contract, bukan menjalankan query production seenaknya.
  • Query kecil membantu membaca asumsi data di balik UI.
  • Berikutnya, kita melihat PostgreSQL sebagai database relational dan bagaimana table saling berhubungan.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: UI biasanya berawal dari row yang dipilih backend.

Memuat progresReview module