Main

.env

@@ -0,0 +1,8 @@
+POSTGRES_URL="postgres://default:w3AEaGL5Necm@ep-bold-truth-a4wviweq-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require"
+POSTGRES_PRISMA_URL="postgres://default:w3AEaGL5Necm@ep-bold-truth-a4wviweq-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require&pgbouncer=true&connect_timeout=15"
+POSTGRES_URL_NO_SSL="postgres://default:w3AEaGL5Necm@ep-bold-truth-a4wviweq-pooler.us-east-1.aws.neon.tech:5432/verceldb"
+POSTGRES_URL_NON_POOLING="postgres://default:w3AEaGL5Necm@ep-bold-truth-a4wviweq.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require"
+POSTGRES_USER="default"
+POSTGRES_HOST="ep-bold-truth-a4wviweq-pooler.us-east-1.aws.neon.tech"
+POSTGRES_PASSWORD="w3AEaGL5Necm"
+POSTGRES_DATABASE="verceldb"

Chapter-1.md

@@ -0,0 +1,112 @@
+# Bab 1
+
+## Memulai
+
+### Membuat Proyek Baru
+
+Kami merekomendasikan menggunakan pnpm sebagai manajer paket Anda, karena lebih cepat dan lebih efisien daripada npm atau yarn. Jika Anda belum menginstal pnpm, Anda dapat menginstalnya secara global dengan menjalankan perintah berikut:
+
+```bash
+npm install -g pnpm
+```
+
+Untuk membuat aplikasi Next.js, buka terminal Anda, masuk ke folder tempat Anda ingin menyimpan proyek, dan jalankan perintah berikut:
+
+```bash
+npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm
+```
+
+Perintah ini menggunakan create-next-app, sebuah alat Command Line Interface (CLI) yang menyiapkan aplikasi Next.js untuk Anda. Dalam perintah di atas, Anda juga menggunakan flag --example dengan contoh starter untuk kursus ini.
+
+### Menjelajahi Proyek
+
+Berbeda dengan tutorial yang mengharuskan Anda menulis kode dari awal, sebagian besar kode untuk kursus ini sudah ditulis untuk Anda. Ini lebih mencerminkan pengembangan dunia nyata, di mana Anda kemungkinan besar akan bekerja dengan basis kode yang sudah ada.
+
+Tujuan kami adalah membantu Anda fokus mempelajari fitur utama Next.js, tanpa harus menulis semua kode aplikasi.
+
+Setelah instalasi, buka proyek di editor kode Anda dan navigasikan ke nextjs-dashboard.
+
+```bash
+cd nextjs-dashboard-template
+```
+
+Mari kita luangkan waktu untuk menjelajahi proyek ini.
+
+### Struktur Folder
+
+Anda akan melihat bahwa proyek ini memiliki struktur folder berikut:
+![alt text](image.png)
+Struktur folder dari proyek dashboard, menunjukkan folder dan file utama: app, public, dan file konfigurasi.
+
+- /app: Berisi semua rute, komponen, dan logika untuk aplikasi Anda, di sinilah Anda akan bekerja sebagian besar.
+- /app/lib: Berisi fungsi-fungsi yang digunakan dalam aplikasi Anda, seperti fungsi utilitas yang dapat digunakan kembali dan fungsi pengambilan data.
+- /app/ui: Berisi
+
+semua komponen antarmuka pengguna untuk aplikasi Anda, seperti kartu, tabel, dan formulir. Untuk menghemat waktu, kami telah menata komponen-komponen ini untuk Anda.
+
+- /public: Berisi semua aset statis untuk aplikasi Anda, seperti gambar.
+- File Konfigurasi: Anda juga akan melihat file konfigurasi seperti next.config.js di root aplikasi Anda. Sebagian besar file ini dibuat dan dikonfigurasi sebelumnya saat Anda memulai proyek baru menggunakan create-next-app. Anda tidak perlu memodifikasinya dalam kursus ini.
+
+Jelajahi folder-folder ini dengan bebas, dan jangan khawatir jika Anda belum memahami semua kode yang ada.
+
+### Data Placeholder
+
+Saat Anda membangun antarmuka pengguna, akan sangat membantu jika Anda memiliki beberapa data placeholder. Jika basis data atau API belum tersedia, Anda dapat:
+
+- Menggunakan data placeholder dalam format JSON atau sebagai objek JavaScript.
+- Menggunakan layanan pihak ketiga seperti mockAPI.
+
+Untuk proyek ini, kami telah menyediakan beberapa data placeholder di app/lib/placeholder-data.ts. Setiap objek JavaScript dalam file tersebut mewakili tabel dalam basis data Anda. Misalnya, untuk tabel invoices:
+
+```javascript
+const invoices = [
+  {
+    customer_id: customers[0].id,
+    amount: 15795,
+    status: "pending",
+    date: "2022-12-06",
+  },
+  {
+    customer_id: customers[1].id,
+    amount: 20348,
+    status: "pending",
+    date: "2022-11-14",
+  },
+  // ...
+];
+```
+
+Pada bab tentang pengaturan basis data Anda, Anda akan menggunakan data ini untuk mengisi basis data Anda (mengisinya dengan beberapa data awal).
+
+```javascript
+// Contoh objek invoice
+const invoice = {
+  id: "1",
+  customer_id: "123",
+  amount: 15795,
+  date: "2022-12-06",
+  status: "pending", // Status ini bisa berupa 'pending' atau 'paid'
+};
+```
+
+Dengan menggunakan komentar JSDoc, Anda dapat mendokumentasikan tipe data dan memberikan informasi tambahan yang berguna saat bekerja dengan editor kode yang mendukung JSDoc, seperti Visual Studio Code.
+
+### Menjalankan Server Pengembangan
+
+Jalankan `pnpm i` untuk menginstal paket proyek.
+
+```bash
+pnpm i
+```
+
+Diikuti oleh `pnpm dev` untuk memulai server pengembangan.
+
+```bash
+pnpm dev
+```
+
+`pnpm dev` akan memulai server pengembangan Next.js Anda pada port 3000. Mari kita cek apakah servernya berfungsi.
+
+Buka http://localhost:3000 di browser Anda. Halaman beranda Anda harus terlihat seperti ini, yang sengaja tidak diberi gaya:
+![alt text](image-1.png)
+Halaman tanpa gaya dengan judul 'Acme', deskripsi, dan tautan login.

Chapter-2.md

@@ -0,0 +1,203 @@
+# Bab 2
+
+## CSS Styling
+
+Saat ini, halaman beranda Anda tidak memiliki gaya apa pun. Mari kita lihat berbagai cara untuk memberi gaya pada aplikasi Next.js Anda.
+
+### Dalam bab ini...
+
+Berikut adalah topik yang akan kita bahas:
+
+- Cara menambahkan file CSS global ke aplikasi Anda.
+- Dua cara berbeda dalam memberi gaya: Tailwind dan CSS modules.
+- Cara menambahkan nama kelas secara kondisional dengan paket utilitas clsx.
+
+### Gaya Global
+
+Jika Anda melihat di dalam folder /app/ui, Anda akan melihat file bernama global.css. Anda dapat menggunakan file ini untuk menambahkan aturan CSS ke semua rute di aplikasi Anda - seperti aturan reset CSS, gaya di seluruh situs untuk elemen HTML seperti tautan, dan lainnya.
+
+Anda dapat mengimpor global.css di komponen mana pun di aplikasi Anda, tetapi biasanya praktik yang baik adalah menambahkannya ke komponen tingkat atas Anda. Dalam Next.js, ini adalah layout root (lebih lanjut tentang ini nanti).
+
+Tambahkan gaya global ke aplikasi Anda dengan menavigasi ke /app/layout.tsx dan mengimpor file global.css:
+
+```javascript
+// /app/layout.js
+
+import "@/app/ui/global.css";
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+Dengan server pengembangan masih berjalan, simpan perubahan Anda dan lihat pratinjau di browser. Halaman beranda Anda sekarang harus terlihat seperti ini:****
+![alt text](image-2.png)
+Halaman dengan gaya dengan logo 'Acme', deskripsi, dan tautan login.
+
+Tapi tunggu **sebentar**, Anda tidak menambahkan aturan CSS apa pun, dari mana gaya ini berasal?
+
+Jika Anda melihat di dalam global.css, Anda akan melihat beberapa direktif @tailwind:
+
+```css
+// /app/ui/global.css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+### Tailwind
+
+Tailwind adalah kerangka kerja CSS yang mempercepat proses pengembangan dengan memungkinkan Anda menulis kelas utilitas secara langsung di markup TSX Anda.
+
+Dalam Tailwind, Anda memberi gaya pada elemen dengan menambahkan nama kelas. Misalnya, menambahkan kelas "text-blue-500" akan mengubah teksmenjadi biru:
+
+```jsx
+<h1 className="text-blue-500">I'm blue!</h1>
+```
+
+Meskipun gaya CSS dibagikan secara global, setiap kelas diterapkan secara tunggal ke setiap elemen. Ini berarti jika Anda menambah atau menghapus elemen, Anda tidak perlu khawatir tentang mempertahankan stylesheet terpisah, tabrakan gaya, atau ukuran bundle CSS yang meningkat saat aplikasi Anda berkembang.
+
+Ketika Anda menggunakan create-next-app untuk memulai proyek baru, Next.js akan menanyakan apakah Anda ingin menggunakan Tailwind. Jika Anda memilih ya, Next.js akan secara otomatis menginstal paket yang diperlukan dan mengonfigurasi Tailwind di aplikasi Anda.
+
+Jika Anda melihat di /app/page.tsx, Anda akan melihat bahwa kami menggunakan kelas Tailwind dalam contoh tersebut.
+
+```javascript
+// /app/page.x
+import AcmeLogo from '@/app/ui/acme-logo';
+import { ArrowRightIcon } from '@heroicons/react/24/outline';
+import Link from 'next/link';
+
+export default function Page() {
+  return (
+    // Ini adalah kelas Tailwind:
+    <main className="flex min-h-screen flex-col p-6">
+      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
+    // ...
+  )
+}
+```
+
+Jangan khawatir jika ini adalah pertama kalinya Anda menggunakan Tailwind. Untuk menghemat waktu, kami telah menata semua komponen yang akan Anda gunakan.
+
+Mari bermain dengan Tailwind! Salin kode di bawah ini dan tempelkan di atas elemen <p> di /app/page.tsx:
+
+```jsx
+// /app/page.tsx
+<div className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black" />
+```
+
+### CSS Modules
+
+CSS Modules memungkinkan Anda membuat skop CSS ke komponen dengan membuat nama kelas yang unik secara otomatis, sehingga Anda tidak perlu khawatir tentang tabrakan gaya.
+
+Kami akan terus menggunakan Tailwind dalam kursus ini, tetapi mari kita lihat bagaimana Anda bisa mencapai hasil yang sama dari kuis di atas menggunakan CSS modules.
+
+Di dalam /app/ui, buat file baru bernama home.module.css dan tambahkan aturan CSS berikut:
+
+```css
+// /app/ui/home.module.css
+.shape {
+  height: 0;
+  width: 0;
+  border-bottom: 30px solid black;
+  border-left: 20px solid transparent;
+  border-right: 20px solid transparent;
+}
+```
+
+Kemudian, di dalam file /app/page.tsx Anda, impor gaya tersebut dan ganti nama kelas Tailwind dari yang telah Anda tambahkan dengan styles.shape:
+
+```javascript
+// /app/page.jsx
+import AcmeLogo from "@/app/ui/acme-logo";
+import { ArrowRightIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+
+export default function Page() {
+  return (
+    <main className="flex flex-col min-h-screen p-6">
+      <div className="flex items-end h-20 p-4 bg-blue-500 rounded-lg shrink-0 md:h-52">
+        {/* <AcmeLogo /> */}
+      </div>
+      <div className="flex flex-col gap-4 mt-4 grow md:flex-row">
+        <div className="flex flex-col justify-center gap-6 px-6 py-10 rounded-lg bg-gray-50 md:w-2/5 md:px-20">
+          <p className="text-xl text-gray-800 md:text-3xl md:leading-normal">
+            <strong>Welcome to Acme.</strong> This is the example for the{" "}
+            <a href="https://nextjs.org/learn/" className="text-blue-500">
+              Next.js Learn Course
+            </a>
+            , brought to you by devnolife - laboratorium-if-unismuh.
+          </p>
+          <Link
+            href="/login"
+            className="flex items-center self-start gap-5 px-6 py-3 text-sm font-medium text-white transition-colors bg-blue-500 rounded-lg hover:bg-blue-400 md:text-base"
+          >
+            <span>Log in</span>
+          </Link>
+        </div>
+        <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
+          {/* Add Hero Images Here */}
+        </div>
+      </div>
+    </main>
+  );
+}
+```
+
+Simpan perubahan Anda dan lihat pratinjau di browser. Anda harus melihat bentuk yang sama seperti sebelumnya.
+
+Tailwind dan CSS modules adalah dua cara paling umum untuk memberi gaya pada aplikasi Next.js. Apakah Anda menggunakan salah satunya atau lainnya adalah masalah preferensi - Anda bahkan dapat menggunakan keduanya dalam aplikasi yang sama!
+
+### Menggunakan pustaka clsx untuk toggle nama kelas
+
+Mungkin ada kasus di mana Anda perlu memberi gaya pada elemen secara kondisional berdasarkan state atau kondisi lainnya.
+
+clsx adalah pustaka yang memungkinkan Anda untuk toggle nama kelas dengan mudah. Kami merekomendasikan melihat dokumentasi untuk detail lebih lanjut, tetapi berikut adalah penggunaan dasarnya:
+
+Misalkan Anda ingin membuat komponen InvoiceStatus yang menerima status. Statusnya bisa 'pending' atau 'paid'. Jika 'paid', Anda ingin warnanya menjadi hijau. Jika 'pending', Anda ingin warnanya menjadi abu-abu. Anda dapat menggunakan clsx untuk menerapkan kelas secara kondisional, seperti ini:
+
+```javascript
+// /app/ui/invoices/status.jsx
+import { CheckIcon, ClockIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
+
+export default function InvoiceStatus({ status }) {
+  return (
+    <span
+      className={clsx(
+        "inline-flex items-center rounded-full px-2 py-1 text-xs",
+        {
+          "bg-gray-100 text-gray-500": status === "pending",
+          "bg-green-500 text-white": status === "paid",
+        }
+      )}
+    >
+      {status === "pending" ? (
+        <>
+          Pending
+          <ClockIcon className="w-4 ml-1 text-gray-500" />
+        </>
+      ) : null}
+      {status === "paid" ? (
+        <>
+          Paid
+          <CheckIcon className="w-4 ml-1 text-white" />
+        </>
+      ) : null}
+    </span>
+  );
+}
+```
+
+### Solusi styling lainnya
+
+Selain pendekatan yang telah kita bahas, Anda juga dapat memberi gaya pada aplikasi Next.js Anda dengan:
+
+- Sass yang memungkinkan Anda mengimpor file .css dan .scss.
+- Pustaka CSS-in-JS seperti styled-jsx, styled-components, dan emotion.
+
+Lihat dokumentasi CSS untuk informasi lebih lanjut.