Svelte 5

Berikut adalah langkah-langkah untuk membuat setup proyek membership menggunakan Svelte 5, SvelteKit, Prisma, Lucia, Fastify, dan MySQL:

1. Setup Proyek SvelteKit

1. Inisialisasi Proyek Baru

   npm create svelte@latest my-membership-app
   cd my-membership-app
   npm install
   

2. Pilih opsi Skeleton Project saat setup dan tambahkan TypeScript jika diperlukan.

2. Install Dependencies

Tambahkan paket yang dibutuhkan:

npm install @lucia-auth/sveltekit @prisma/client mysql2 fastify @fastify/express
npm install -D prisma

3. Konfigurasi Prisma

1. Inisialisasi Prisma

   npx prisma init
   

   File prisma/schema.prisma akan dibuat.

2. Atur Skema Prisma
   Di dalam file prisma/schema.prisma, tambahkan konfigurasi untuk MySQL:

   datasource db {
     provider = "mysql"
     url      = env("DATABASE_URL")
   }
   
   generator client {
     provider = "prisma-client-js"
   }
   
   model User {
     id        String   @id @default(cuid())
     username  String   @unique
     hashedPassword String
     createdAt DateTime @default(now())
   }
   
   model Session {
     id        String   @id @default(cuid())
     userId    String
     expires   DateTime
     user      User     @relation(fields: [userId], references: [id])
   }
   

3. Set Environment Variable
   Tambahkan URL MySQL Anda di file .env:

   DATABASE_URL="mysql://username:password@localhost:3306/membership_db"
   

4. Generate Client
   Jalankan perintah:

   npx prisma db push
   

4. Konfigurasi Lucia

1. Setup Lucia Auth
   Buat file src/lib/server/lucia.ts:

   import lucia from "lucia-auth";
   import { sveltekit } from "lucia-auth/middleware";
   import prisma from "@prisma/client";
   
   const prismaClient = new prisma.PrismaClient();
   
   export const auth = lucia({
     adapter: {
       user: prismaClient.user,
       session: prismaClient.session,
     },
     env: "DEV",
     middleware: sveltekit()
   });
   
   export type Auth = typeof auth;
   

2. Tambahkan Hooks
   Buat file src/hooks.server.ts:

   import { auth } from "$lib/server/lucia";
   import type { Handle } from "@sveltejs/kit";
   
   export const handle: Handle = async ({ event, resolve }) => {
     event.locals.auth = auth.handleRequest(event);
     return await resolve(event);
   };
   

5. Setup Fastify

1. Tambahkan Plugin Fastify
   Buat file src/lib/server/fastify.ts:

   import Fastify from "fastify";
   
   const fastify = Fastify({
     logger: true
   });
   
   export default fastify;
   

2. Integrasi dengan SvelteKit
   Buat file server src/server.ts:

   import { createServer } from "http";
   import fastify from "$lib/server/fastify";
   import { handler } from "./build";
   
   fastify.register(require('@fastify/express'));
   
   fastify.use(handler);
   
   fastify.listen(3000, (err) => {
     if (err) {
       console.error(err);
       process.exit(1);
     }
     console.log("Server running on http://localhost:3000");
   });
   

3. Jalankan Build SvelteKit
   Tambahkan script ke package.json:

   "scripts": {
     "build": "vite build",
     "start": "node src/server.js"
   }
   

4. Jalankan Server

   npm run build
   npm run start
   

6. Setup Login dan Registrasi

1. Buat Route untuk Registrasi (src/routes/register/+server.ts)

   import { auth } from "$lib/server/lucia";
   import { json } from "@sveltejs/kit";
   
   export async function POST({ request }) {
     const { username, password } = await request.json();
     const user = await auth.createUser({
       primaryKey: {
         providerId: "username",
         providerUserId: username,
         password,
       },
       attributes: {
         username,
       },
     });
   
     return json({ user });
   }
   

2. Buat Route untuk Login (src/routes/login/+server.ts)

   import { auth } from "$lib/server/lucia";
   import { json } from "@sveltejs/kit";
   
   export async function POST({ request }) {
     const { username, password } = await request.json();
     const session = await auth.authenticateUser("username", username, password);
   
     return json({ session });
   }
   

7. Testing

1. Jalankan MySQL:

   mysql -u root -p
   CREATE DATABASE membership_db;
   

2. Jalankan server:

   npm run dev
   

3. Akses aplikasi di http://localhost:3000.

Sistem ini sudah mencakup setup authentication, database, dan backend server menggunakan Fastify. Silakan kustomisasi sesuai kebutuhan proyek membership Anda!

Berikut adalah langkah-langkah untuk menjalankan MySQL di Windows 11:

1. Install MySQL di Windows 11

Jika Anda belum menginstal MySQL, lakukan langkah berikut:

1. Unduh MySQL Installer:
   Unduh dari situs resmi MySQL.
2. Jalankan Installer:
   • Pilih Custom Installation atau Developer Default (untuk semua tools MySQL).
   • Pilih MySQL Server versi yang diinginkan, MySQL Workbench (opsional), dan MySQL Shell.
3. Konfigurasikan Server:
   • Atur jenis setup: standalone atau server/database saja.
   • Tentukan port (default: 3306).
   • Atur root password dan (opsional) tambahkan pengguna baru.
4. Selesaikan Instalasi.

2. Menjalankan MySQL Server

Menggunakan MySQL Installer:

1. Buka MySQL Installer dari menu Start.
2. Pilih MySQL Server dan klik Start.

Menggunakan Command Prompt atau Terminal:

1. Tekan Win + R, lalu ketik cmd dan tekan Enter.
2. Jalankan perintah berikut untuk memulai MySQL Server:

   net start mysql
   

3. Jika ingin menghentikan server:

   net stop mysql
   

Menggunakan MySQL Workbench:

1. Buka MySQL Workbench.
2. Buat koneksi baru dengan localhost pada port 3306.
3. Login menggunakan username dan password root.

3. Akses MySQL dari Command Line

1. Buka Command Prompt (cmd).
2. Masukkan perintah:

   mysql -u root -p
   

3. Ketikkan password root yang Anda atur selama instalasi.

4. Menambahkan MySQL ke Path (Opsional)

Agar dapat menggunakan perintah mysql langsung dari Command Prompt:

1. Tambahkan folder MySQL bin ke Path:
   • Cari Edit Environment Variables di Windows.
   • Pilih Path → Klik Edit → Tambahkan lokasi folder bin MySQL, misalnya:

     C:\Program Files\MySQL\MySQL Server 8.0\bin
     

2. Restart Command Prompt untuk menerapkan perubahan.

5. Testing MySQL

Setelah server berjalan:

1. Jalankan perintah:

   mysql -u root -p
   

2. Jika berhasil, Anda akan masuk ke shell MySQL:

   mysql>
   

3. Coba buat database untuk testing:

   CREATE DATABASE test_db;
   SHOW DATABASES;
   

6. Troubleshooting

• Port Konflik (3306):
  Pastikan port 3306 tidak digunakan aplikasi lain. Anda dapat mengubah port di file konfigurasi my.ini atau my.cnf.
• Service Tidak Berjalan:
  Pastikan layanan MySQL aktif di Services Manager:
  1. Tekan Win + R, ketik services.msc, tekan Enter.
  2. Cari MySQL → Klik kanan → Start.

Dengan langkah ini, Anda siap menjalankan MySQL di Windows 11! 🚀