Open
Conversation
Berikut adalah halaman HTML yang telah dibuang rangka luar (tiada tag <html>, <head>, <body>), hanya tinggal kandungan utama yang lengkap dengan gaya, lesen, pautan hosting percuma, dan maklumat hak cipta. Kod ini sedia untuk terus ditampal ke dalam mana‑mana halaman web sedia ada.
```html
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
background: #f8fafc;
color: #1e293b;
line-height: 1.6;
padding: 2rem 1rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 2rem;
box-shadow: 0 20px 35px -8px rgba(0,0,0,0.1);
overflow: hidden;
padding: 2rem;
}
h1 {
font-size: 2.5rem;
font-weight: 600;
background: linear-gradient(135deg, #0f172a, #334155);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.5rem;
}
.subhead {
color: #475569;
border-left: 5px solid #3b82f6;
padding-left: 1.2rem;
font-size: 1.2rem;
margin-bottom: 2rem;
}
h2 {
font-size: 1.8rem;
font-weight: 600;
color: #0f172a;
margin: 2rem 0 1rem 0;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e2e8f0;
}
h3 {
font-size: 1.3rem;
font-weight: 600;
color: #1e293b;
margin: 1.5rem 0 0.8rem 0;
}
.license-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin: 1.5rem 0;
}
@media (max-width: 768px) {
.license-grid {
grid-template-columns: 1fr;
}
}
.license-card {
background: #f1f5f9;
border-radius: 1.5rem;
padding: 1.5rem;
border: 1px solid #e2e8f0;
transition: all 0.2s ease;
}
.license-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px -8px rgba(0,0,0,0.15);
border-color: #94a3b8;
}
.license-box {
background: #0f172a;
color: #f8fafc;
padding: 1.5rem;
border-radius: 1.2rem;
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 0.9rem;
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
box-shadow: inset 0 0 0 1px #334155;
margin: 1rem 0;
max-height: 400px;
overflow-y: auto;
}
.license-box strong {
color: #facc15;
font-weight: 600;
}
.code-block {
background: #1e293b;
color: #e2e8f0;
padding: 1.2rem;
border-radius: 1rem;
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 0.9rem;
overflow-x: auto;
border: 1px solid #334155;
margin: 1rem 0;
}
.code-block .keyword { color: #f472b6; }
.code-block .function { color: #facc15; }
.code-block .comment { color: #94a3b8; }
.hosting-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin: 1.5rem 0;
}
.hosting-card {
background: linear-gradient(145deg, #ffffff, #f8fafc);
border-radius: 1.2rem;
padding: 1.5rem;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
border: 1px solid #e2e8f0;
text-align: center;
transition: all 0.3s ease;
}
.hosting-card:hover {
transform: scale(1.03);
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.hosting-card h4 {
font-size: 1.5rem;
font-weight: 600;
color: #0f172a;
margin-bottom: 0.5rem;
}
.hosting-card .link {
background: #3b82f6;
color: white;
padding: 0.5rem 1rem;
border-radius: 2rem;
display: inline-block;
margin-top: 1rem;
text-decoration: none;
font-weight: 500;
transition: 0.2s;
}
.hosting-card .link:hover {
background: #2563eb;
}
.btn-copy {
background: #e2e8f0;
border: none;
border-radius: 2rem;
padding: 0.3rem 1rem;
font-size: 0.8rem;
font-weight: 500;
color: #1e293b;
cursor: pointer;
float: right;
transition: 0.2s;
margin-bottom: 0.5rem;
}
.btn-copy:hover {
background: #cbd5e1;
}
.warning {
background: #fee2e2;
border-left: 6px solid #ef4444;
padding: 1rem 1.5rem;
border-radius: 1rem;
margin: 1.5rem 0;
font-weight: 500;
}
.footer {
margin-top: 3rem;
text-align: center;
color: #64748b;
font-size: 0.95rem;
border-top: 1px solid #e2e8f0;
padding-top: 2rem;
}
</style>
<div class="container">
<h1>📜 MPL 3.0 (Modified) + MIT/X11 · Dual License Framework</h1>
<div class="subhead">
Hak Cipta 2026 · Muhamad Sazwan Bin Ismail (Sazwanismail / sazwan96)
</div>
<div class="warning">
⚠️ NOTA: Versi 3.0 ini adalah <strong>ubah suai tidak rasmi</strong> untuk tujuan demonstrasi. Versi rasmi MPL terkini ialah 2.0. Nama "Mozilla Public License" dan rujukan kepada Mozilla Foundation dikekalkan untuk kesinambungan, tetapi lesen ini tidak dikeluarkan atau disahkan oleh Mozilla.
</div>
<!-- Lesen MPL 3.0 (rekaan) dan MIT/X11 -->
<h2>🔹 Dual License Comparison</h2>
<div class="license-grid">
<!-- MPL 3.0 -->
<div class="license-card">
<h3>🦊 MPL 3.0 (Mozilla Public License · Modified)</h3>
<button class="btn-copy" data-target="mpl30-full">📋 Salin MPL 3.0</button>
<div class="license-box" id="mpl30-full">
Mozilla Public License Version 3.0 (modified)
==================================
1. Definitions
--------------
1.1. "Contributor" means each individual or legal entity that creates, contributes to the creation of, or owns Covered Software.
1.2. "Contributor Version" means the combination of the Contributions of others (if any) used by a Contributor and that particular Contributor's Contribution.
1.3. "Contribution" means Covered Software of a particular Contributor.
1.4. "Covered Software" means Source Code Form to which the initial Contributor has attached the notice in Exhibit A, the Executable Form of such Source Code Form, and Modifications of such Source Code Form, in each case including portions thereof.
1.5. "Incompatible With Secondary Licenses" means (a) that the initial Contributor has attached the notice described in Exhibit B to the Covered Software; or (b) that the Covered Software was made available under the terms of version 2.0 or earlier of the License, but not also under the terms of a Secondary License.
1.6. "Executable Form" means any form of the work other than Source Code Form.
1.7. "Larger Work" means a work that combines Covered Software with other material, in a separate file or files, that is not Covered Software.
1.8. "License" means this document.
1.9. "Licensable" means having the right to grant, to the maximum extent possible, whether at the time of the initial grant or subsequently, any and all of the rights conveyed by this License.
1.10. "Modifications" means any of the following: (a) any file in Source Code Form that results from an addition to, deletion from, or modification of the contents of Covered Software; or (b) any new file in Source Code Form that contains any Covered Software.
1.11. "Patent Claims" of a Contributor means any patent claim(s), including without limitation, method, process, and apparatus claims, in any patent Licensable by such Contributor that would be infringed, but for the grant of the License, by the making, using, selling, offering for sale, having made, import, or transfer of either its Contributions or its Contributor Version.
1.12. "Secondary License" means either the GNU General Public License, Version 2.0, the GNU Lesser General Public License, Version 2.1, the GNU Affero General Public License, Version 3.0, or any later versions of those licenses.
1.13. "Source Code Form" means the form of the work preferred for making modifications.
1.14. "You" (or "Your") means an individual or a legal entity exercising rights under this License.
2. License Grants and Conditions
--------------------------------
2.1. Grants: Each Contributor hereby grants You a world-wide, royalty-free, non-exclusive license to use, reproduce, make available, modify, display, perform, distribute, and otherwise exploit its Contributions.
2.2. Effective Date: The licenses granted become effective on the date the Contributor first distributes such Contribution.
2.3. Limitations: No patent license is granted for code that a Contributor has removed, or for combinations with other software.
2.4. Subsequent Licenses: No additional grants result from Your choice to distribute under a subsequent version of this License.
3. Responsibilities
-------------------
3.1. Distribution of Source Form: All distribution of Covered Software in Source Code Form must be under this License.
3.2. Distribution of Executable Form: If You distribute Covered Software in Executable Form, You must also make it available in Source Code Form.
3.3. Distribution of a Larger Work: You may create and distribute a Larger Work under terms of Your choice.
3.4. Notices: You may not remove or alter any license notices.
3.5. Application of Additional Terms: You may choose to offer, and charge a fee for, warranty or support.
4. Inability to Comply Due to Statute or Regulation
---------------------------------------------------
If compliance with this License is impossible due to statute or regulation, You must comply as much as possible.
5. Termination
--------------
5.1. Termination for Failure to Comply: All rights granted terminate automatically if You fail to comply with this License.
5.2. Termination for Patent Litigation: If You initiate litigation against any entity, all rights granted terminate.
6. Disclaimer of Warranty
-------------------------
Covered Software is provided "AS IS", without warranty of any kind.
7. Limitation of Liability
--------------------------
In no event shall any Contributor be liable for any damages.
8. Litigation
-------------
Any litigation relating to this License may be brought only in the courts of a jurisdiction where the defendant maintains its principal place of business.
9. Miscellaneous
----------------
This License represents the complete agreement concerning the subject matter.
10. Versions of the License
---------------------------
10.1. New Versions: Mozilla Foundation may publish revised and/or new versions of the License.
10.2. Effect of New Versions: You may distribute Covered Software under the terms of any later version.
Exhibit A - Source Code Form License Notice
-------------------------------------------
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 3.0 (modified). If a copy of the MPL was not distributed with this
file, You can obtain one at http://example.com/MPL/3.0/.
Exhibit B - "Incompatible With Secondary Licenses" Notice
---------------------------------------------------------
This Source Code Form is "Incompatible With Secondary Licenses", as
defined by the Mozilla Public License, v. 3.0 (modified).
</div>
</div>
<!-- MIT/X11 (Expat) -->
<div class="license-card">
<h3>⚖️ MIT/X11 License (Expat)</h3>
<button class="btn-copy" data-target="mit-full">📋 Salin MIT</button>
<div class="license-box" id="mit-full">
MIT License (Expat)
Copyright (c) 2026 Muhamad Sazwan Bin Ismail (Sazwanismail)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
</div>
</div>
</div>
<!-- Contoh kod Python dan C++ dengan notis lesen -->
<h2>🐍⚙️ Contoh Kod (Dilindungi Dual License)</h2>
<p>Setiap fail kod mengandungi notis lesen yang sesuai. Klik butang untuk melihat lesen penuh.</p>
<div class="license-grid">
<div>
<h3>🐍 Python (utils.py)</h3>
<div class="code-block">
<span class="comment"># Copyright (c) 2026 Muhamad Sazwan Bin Ismail</span>
<span class="comment"># SPDX-License-Identifier: MIT OR MPL-3.0</span>
<span class="keyword">def</span> <span class="function">hitung_persegi</span>(panjang: float, lebar: float) -> float:
<span class="comment">"""Kira luas segi empat."""</span>
<span class="keyword">return</span> panjang * lebar
<span class="comment"># list comprehension</span>
nombor = [1, 2, 3, 4, 5]
kuasa_dua = [n**2 <span class="keyword">for</span> n <span class="keyword">in</span> nombor <span class="keyword">if</span> n % 2 == 0]
print(kuasa_dua)
</div>
</div>
<div>
<h3>⚙️ C++ (math.cpp)</h3>
<div class="code-block">
<span class="comment">// Copyright (c) 2026 Muhamad Sazwan Bin Ismail</span>
<span class="comment">// SPDX-License-Identifier: MIT OR MPL-3.0</span>
<span class="keyword">#include</span> <span class="string"><iostream></span>
<span class="keyword">#include</span> <span class="string"><vector></span>
<span class="keyword">double</span> <span class="function">hitungPersegi</span>(<span class="keyword">double</span> panjang, <span class="keyword">double</span> lebar) {
<span class="keyword">return</span> panjang * lebar;
}
<span class="keyword">int</span> <span class="function">main</span>() {
std::vector<<span class="keyword">int</span>> nombor = {1,2,3,4,5};
<span class="keyword">for</span> (<span class="keyword">int</span> n : nombor) {
<span class="keyword">if</span> (n % 2 == 0)
std::cout << n*n << <span class="string">" "</span>;
}
<span class="keyword">return</span> 0;
}
</div>
</div>
</div>
<!-- Struktur repositori -->
<h2>📁 Struktur Repositori Sazwan.Github.com</h2>
<div class="code-block" style="background:#f1f5f9; color:#1e293b;">
Sazwan.Github.com/
├── LICENSE-MPL3.txt (Mozilla Public License 3.0 modified)
├── LICENSE-MIT.txt (MIT/X11 License)
├── README.md (Dokumentasi projek)
├── src/
│ ├── python/
│ │ └── utils.py (MIT OR MPL-3.0)
│ └── cpp/
│ └── math.cpp (MIT OR MPL-3.0)
├── docs/ (Dokumentasi tambahan)
└── examples/ (Contoh penggunaan)
</div>
<!-- Pautan Server (Hosting Percuma) -->
<h2>🚀 Pautan Server · Hosting Percuma</h2>
<p>Anda boleh hosting halaman ini secara percuma menggunakan platform berikut :</p>
<div class="hosting-grid">
<div class="hosting-card">
<h4>🐙 GitHub Pages</h4>
<p>Hosting percuma untuk repositori GitHub. Ideal untuk halaman statik.</p>
<a href="https://pages.github.com/" class="link" target="_blank">Aktifkan GitHub Pages →</a>
<p style="margin-top: 0.8rem; font-size: 0.9rem;">URL contoh: <code>sazwanismail.github.io/repo-name</code></p>
</div>
<div class="hosting-card">
<h4>▲ Vercel</h4>
<p>Deploy dengan satu klik dari GitHub. Percuma untuk projek personal.</p>
<a href="https://vercel.com/new" class="link" target="_blank">Deploy ke Vercel →</a>
</div>
<div class="hosting-card">
<h4>⚡ Netlify</h4>
<p>Drag and drop deploy. SSL percuma dan CI/CD automatik.</p>
<a href="https://app.netlify.com/" class="link" target="_blank">Deploy ke Netlify →</a>
</div>
<div class="hosting-card">
<h4>☁️ Render</h4>
<p>Hosting statik dan full-stack dengan SSL percuma.</p>
<a href="https://render.com/" class="link" target="_blank">Deploy ke Render →</a>
</div>
</div>
<!-- Arahan hosting GitHub Pages -->
<div style="background: #e6f7ff; border-left: 6px solid #0099ff; padding: 1.2rem 1.8rem; border-radius: 1rem; margin: 2rem 0;">
<h3 style="margin-top: 0;">📌 Cara Hosting di GitHub Pages (Langkah Mudah) </h3>
<ol style="margin-left: 1.5rem;">
<li><strong>Buat repositori baru</strong> di GitHub (nama: contohnya <code>sazwan-framework</code>).</li>
<li><strong>Upload fail HTML ini</strong> sebagai <code>index.html</code> dalam repositori.</li>
<li><strong>Pergi ke Settings → Pages</strong>.</li>
<li>Pilih branch <code>main</code> (atau <code>master</code>) dan folder <code>/root</code>.</li>
<li>Klik <strong>Save</strong>. URL akan muncul: <code>https://sazwanismail.github.io/sazwan-framework/</code></li>
</ol>
</div>
<!-- Nota hak cipta -->
<hr>
<div style="background: #f8fafc; padding: 1rem; border-radius: 1rem;">
<p><strong>📌 Ringkasan Hak Cipta:</strong></p>
<ul style="margin-left: 2rem;">
<li><strong>Pemegang Hak Cipta:</strong> Muhamad Sazwan Bin Ismail / Sazwanismail / sazwan96</li>
<li><strong>Tahun:</strong> 2026 (dengan tarikh terbaru 29th)</li>
<li><strong>Lesen:</strong> Dual License — MPL 3.0 (modified) dan MIT/X11 (pilihan pengguna)</li>
</ul>
</div>
<div class="footer">
© 2026 Muhamad Sazwan Bin Ismail (Sazwanismail) · Hak cipta terpelihara di bawah MPL 3.0 (modified) dan MIT/X11.
<br>Dokumen ini disediakan untuk tujuan demonstrasi dan hosting percuma.
</div>
</div>
<script>
(function() {
// Fungsi salin untuk semua butang
document.querySelectorAll('.btn-copy').forEach(btn => {
btn.addEventListener('click', function() {
const targetId = this.getAttribute('data-target');
const targetElement = document.getElementById(targetId);
if (targetElement) {
const textToCopy = targetElement.innerText;
navigator.clipboard.writeText(textToCopy).then(() => {
const originalText = this.innerText;
this.innerText = '✓ Disalin!';
setTimeout(() => {
this.innerText = originalText;
}, 1500);
}).catch(err => {
alert('Gagal menyalin teks.');
});
}
});
});
})();
</script>
```
Perubahan:
· ❌ Dihilangkan tag <html>, <head>, <body>.
· ✅ Gaya (CSS) dan skrip (JavaScript) diletakkan terus di dalam bahagian kandungan.
· ✅ Semua elemen lain (lesen, contoh kod, pautan hosting, hak cipta) dikekalkan sepenuhnya.
Kod ini boleh terus ditampal ke dalam mana‑mana templat halaman web (misalnya dalam WordPress, sistem fail HTML, atau editor dalam talian) tanpa perlu menambah struktur asas HTML.
Create Mozilla Public License versi 3.0
Menggunakan Database dengan Nuxt.js
Nuxt.js (khususnya Nuxt 3) ialah framework Vue yang fleksibel untuk membina aplikasi universal (SSR, SSG, SPA). Apabila aplikasi anda perlu menyimpan data secara kekal, anda memerlukan integrasi database. Berikut adalah panduan lengkap cara menghubungkan database dengan Nuxt.
📁 Pendekatan Utama: Endpoint API dalam server/
Nuxt 3 menyediakan direktori server/ yang secara automatik menjana endpoint API. Di sinilah anda boleh meletakkan logik backend yang berinteraksi dengan database.
```
project/
├── server/
│ ├── api/
│ │ └── users.get.ts // GET /api/users
│ │ └── users.post.ts // POST /api/users
│ └── routes/
│ └── auth/
│ └── login.post.ts // POST /auth/login
├── pages/
└── nuxt.config.ts
```
🔌 Contoh Integrasi dengan Prisma (ORM)
1. Setup Prisma
```bash
npm install prisma --save-dev
npx prisma init
```
Konfigurasi prisma/schema.prisma mengikut database pilihan (contoh: PostgreSQL):
```prisma
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
name String
email String @unique
createdAt DateTime @default(now())
}
```
Jalankan migrasi dan hasilkan Prisma Client:
```bash
npx prisma migrate dev --name init
npx prisma generate
```
2. Buat Endpoint API
Buat fail server/api/users.get.ts:
```ts
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
export default defineEventHandler(async (event) => {
const users = await prisma.user.findMany()
return users
})
```
Untuk mencipta pengguna baru, buat server/api/users.post.ts:
```ts
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
export default defineEventHandler(async (event) => {
const body = await readBody(event)
const user = await prisma.user.create({
data: {
name: body.name,
email: body.email,
},
})
return user
})
```
3. Gunakan di Halaman/Komponen
Dalam mana‑mana komponen Vue (di pages/ atau components/), anda boleh memanggil API menggunakan useFetch atau $fetch:
```vue
<script setup>
const { data: users } = await useFetch('/api/users')
async function addUser() {
await $fetch('/api/users', {
method: 'POST',
body: { name: 'Ali', email: 'ali@example.com' }
})
// refresh data
refreshNuxtData()
}
</script>
<template>
<div>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }} ({{ user.email }})
</li>
</ul>
<button @click="addUser">Tambah User</button>
</div>
</template>
```
🗄️ Pilihan Database dan ORM Lain
Database ORM / Client Popular
PostgreSQL, MySQL, SQLite Prisma, Drizzle ORM, Knex.js
MongoDB Mongoose, MongoDB Node Driver
Redis ioredis, @nuxtjs/redis
Supabase (PostgreSQL) @supabase/supabase-js + @nuxtjs/supabase
Firebase firebase + nuxt-fire
☁️ Alternatif: Backend‑as‑a‑Service (BaaS)
Jika anda tidak mahu mengurus server sendiri, gunakan perkhidmatan seperti:
· Supabase – menyediakan database PostgreSQL, authentication, storage. Modul rasmi: @nuxtjs/supabase
· Firebase – Firestore, Realtime Database. Gunakan nuxt-fire atau terus SDK.
· Appwrite – platform open‑source backend.
Contoh penggunaan Supabase dengan Nuxt:
```bash
npm install @nuxtjs/supabase
```
Dalam nuxt.config.ts:
```ts
export default defineNuxtConfig({
modules: ['@nuxtjs/supabase'],
supabase: {
url: process.env.SUPABASE_URL,
key: process.env.SUPABASE_KEY,
}
})
```
Kemudian di komponen:
```vue
<script setup>
const supabase = useSupabaseClient()
const { data: users } = await useAsyncData('users', async () => {
const { data } = await supabase.from('users').select('*')
return data
})
</script>
```
⚠️ Perkara Penting
· Environment Variables: Simpan credential database di .env (jangan commit).
· Keselamatan: Lakukan validasi input dan kawalan akses di endpoint API.
· Prestasi: Gunakan connection pooling (Prisma sudah mengurus ini) dan elak membuat query berat di setiap request.
· Server‑side vs Client‑side: Nuxt boleh fetch data di server (SSR) atau client. Guna useFetch dengan server: true untuk SSR.
Kesimpulan
Nuxt.js memudahkan integrasi database melalui direktori server/ yang berfungsi sebagai lapisan API. Anda bebas memilih database dan ORM mengikut kesesuaian projek. Untuk pembangunan pantas, pertimbangkan BaaS seperti Supabase atau Firebase. Selamat membina aplikasi!
Integrasi Database dengan Nuxt.js
Nuxt.js (khususnya Nuxt 3) menyediakan cara yang fleksibel untuk menghubungkan aplikasi dengan pelbagai jenis database. Berikut adalah pendekatan utama beserta contoh praktikal.
📁 Pendekatan: Endpoint API dalam server/
Nuxt 3 secara automatik mengenali fail dalam direktori server/ sebagai endpoint API. Di sinilah anda boleh meletakkan logik backend yang berinteraksi dengan database.
```
project/
├── server/
│ ├── api/
│ │ └── users.get.ts // GET /api/users
│ │ └── users.post.ts // POST /api/users
│ └── routes/
│ └── auth/
│ └── login.post.ts
├── pages/
└── nuxt.config.ts
```
🔌 Contoh dengan Prisma (ORM)
1. Setup Prisma
```bash
npm install prisma --save-dev
npx prisma init --datasource-provider postgresql # atau sqlite, mysql, dll
```
prisma/schema.prisma:
```prisma
model User {
id Int @id @default(autoincrement())
name String
email String @unique
createdAt DateTime @default(now())
}
```
Jalankan migrasi:
```bash
npx prisma migrate dev --name init
npx prisma generate
```
2. Endpoint API dengan Prisma
server/api/users.get.ts
```ts
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
export default defineEventHandler(async (event) => {
const users = await prisma.user.findMany()
return users
})
```
server/api/users.post.ts
```ts
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
export default defineEventHandler(async (event) => {
const body = await readBody(event)
const user = await prisma.user.create({
data: { name: body.name, email: body.email }
})
return user
})
```
3. Gunakan di Halaman
Dalam pages/index.vue:
```vue
<script setup>
const { data: users, refresh } = useFetch('/api/users')
async function addUser() {
await $fetch('/api/users', {
method: 'POST',
body: { name: 'Ali', email: 'ali@example.com' }
})
refresh()
}
</script>
```
🗄️ Pilihan Database & ORM Lain
Database ORM / Client Popular
PostgreSQL, MySQL, SQLite Prisma, Drizzle ORM, Knex.js
MongoDB Mongoose, MongoDB Driver
Redis ioredis, @nuxtjs/redis
Firebase firebase + nuxt-fire
Supabase @supabase/supabase-js + @nuxtjs/supabase
☁️ Alternatif: Backend‑as‑a‑Service (BaaS)
Jika mahu tanpa mengurus server sendiri, gunakan:
· Supabase – Modul rasmi @nuxtjs/supabase memudahkan autentikasi dan database.
· Firebase – SDK rasmi boleh digunakan terus.
· Appwrite – Platform open‑source backend.
Contoh Supabase dalam Nuxt:
```ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxtjs/supabase'],
supabase: { url: process.env.SUPABASE_URL, key: process.env.SUPABASE_KEY }
})
// Dalam komponen
const supabase = useSupabaseClient()
const { data } = await supabase.from('users').select('*')
```
⚠️ Perkara Penting
· Environment Variables: Simpan credential database di .env (jangan commit).
· Keselamatan: Lakukan validasi input di endpoint API.
· Prestasi: Untuk production, pastikan Prisma Client diurus sebagai singleton untuk mengelakkan terlalu banyak sambungan.
· Deployment: Jika menggunakan SQLite, ingat ia tidak sesuai untuk platform serverless (Vercel, Netlify) kerana fail tidak kekal. Gunakan database berasaskan pelayan seperti PostgreSQL atau MySQL.
📚 Contoh Lengkap
Lihat projek Nuxt.js.site (dari jawapan sebelumnya) yang mengintegrasikan lesen dual MPL+MIT dengan database pengguna menggunakan Prisma dan SQLite.
Dengan pendekatan ini, anda boleh membina aplikasi Nuxt.js yang lengkap dengan backend sendiri tanpa perlu framework berasingan.
millonbigs-cpu
approved these changes
Mar 26, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Berikut adalah halaman MPL 3.0 (Modified) Patch 3 – versi rekaan ketiga dengan tambalan khusus untuk pengguna Sazwan1996. Halaman ini mengandungi teks lesen terkini, pautan hosting percuma, dan maklumat hak cipta yang telah dikemas kini.
✨ Apa yang Baharu dalam Patch 3?
· Versi lesen dinaikkan kepada "Patch 3" dengan metadata khusus untuk pengguna Sazwan1996.
· Klausa tambahan 3.6 – memerlukan kredit kepada Sazwan1996 dalam pengedaran semula.
· Reka bentuk minimal dengan fokus kepada teks lesen dan pautan hosting.
· Butang salin satu klik untuk kemudahan.
Jika anda memerlukan sebarang ubah suai lanjut (contohnya menambah klausa lain atau menukar warna), sila beritahu.