Skip to main content
  1. Artikel-artikel/
  2. Framework Javascript/

Svelte Basic Auth Auth 2

·858 words·5 mins· loading · loading · ·
Development Js Framework Svelte Nodejs
Humaedi
Author
Humaedi
Halo, nama saya Humaedi 👋. Saya seorang CEO of Akaktekno.id & { full-stack developer } Bekerjalah seakan hidup abadi, beribadah seakan mau mati, jangan lupa☕️ untuk mendapat inspirasi.
svelte-basic-auth - This article is part of a series.
Part : This Article

Halo para seniman yang budiman! Selamat datang kembali! Pada kesempatan kali ini, saya akan membahas cara membuat migration dan seeder untuk mempermudah pembuatan tabel di PostgreSQL menggunakan Knex. Selain itu, kita juga akan membuat konfigurasi untuk menyetel koneksi ke PostgreSQL.

Mari kita mulai!

Sebelumnya, kita sudah menginstal package yang dibutuhkan. Ini hanya pengingat, siapa tahu Anda belum sempat menginstalnya. Untuk informasi lebih lengkap mengenai penggunaan Knex, Anda dapat mengunjungi Knex.

1. Install Knex dan PostgreSQL Driver
#

Jika Anda belum menginstal package yang diperlukan, jalankan perintah berikut untuk memasang Knex dan PostgreSQL driver:

npm install knex pg

2. Membuat knexfile.cjs untuk Konfigurasi Knex
#

Buat file baru bernama knexfile.cjs di direktori proyek Anda. File ini akan berisi konfigurasi Knex yang digunakan untuk menghubungkan aplikasi ke database PostgreSQL.

Berikut adalah contoh isi knexfile.cjs:

// knexfile.cjs
module.exports = {
  development: {
    client: 'pg',
    connection: {
      host: process.env.VITE_DB_HOST,
      user: process.env.VITE_DB_USERNAME,
      password: process.env.VITE_DB_PASSWORD,
      database: process.env.VITE_DB_DATABASE
    },
    migrations: {
      directory: './migrations'
    },
    seeds: {
      directory: './seeds'
    }
  }
};

Penjelasan:

  • Anda bisa mengubah konfigurasi database dan pengaturan lainnya pada file .env yang terletak di direktori root proyek Svelte ini.
  • migrations adalah direktori tempat menyimpan file yang digunakan untuk membuat dan mengelola migrasi tabel ke database.
  • seeds adalah direktori tempat menyimpan file yang digunakan untuk menambahkan data awal (seeding) ke dalam database.

3. Membuat File Koneksi Database di src/lib/server/db.ts
#

Pada bagian ini, kita akan membuat file untuk mengatur koneksi database menggunakan PostgreSQL di dalam proyek Svelte. File ini akan terletak di src/lib/server/db.ts, dan berfungsi untuk membuat koneksi ke database PostgreSQL menggunakan client postgres yang telah diinstal sebelumnya.

// src/lib/server/db.ts
import postgres from 'postgres';

const dbHost = import.meta.env.VITE_DB_HOST;
const dbPort = import.meta.env.VITE_DB_PORT;
const dbName = import.meta.env.VITE_DB_DATABASE;
const dbUser = import.meta.env.VITE_DB_USERNAME;
const dbPassword = import.meta.env.VITE_DB_PASSWORD;

const DATABASE_URL = `postgres://${dbUser}:${dbPassword}@${dbHost}:${dbPort}/${dbName}`;

const sql = postgres(DATABASE_URL);

export default sql;

Penjelasan Kode:

  • Variabel Lingkungan: import.meta.env digunakan untuk mengakses variabel lingkungan yang didefinisikan di dalam file .env. Dalam kode ini, variabel seperti VITE_DB_HOST, VITE_DB_PORT, VITE_DB_DATABASE, VITE_DB_USERNAME, dan VITE_DB_PASSWORD digunakan untuk mengonfigurasi host, port, nama database, username, dan password untuk koneksi ke PostgreSQL.
  • DATABASE_URL: URL koneksi ke PostgreSQL dibentuk dengan format postgres://username:password@host:port/databasename. Ini akan digunakan oleh client postgres untuk membuat koneksi ke database.
  • Client postgres: Setelah URL koneksi terbentuk, postgres(DATABASE_URL) membuat instance dari klien database, yang kemudian diekspor sebagai sql untuk digunakan di seluruh aplikasi.

Atau, kalian bisa menyederhanakan konfigurasi dengan langsung menuliskan URL koneksi database dalam format postgres://username:password@host:port/databasename di file .env. Berikut contohnya:

VITE_DATABASE_URL=postgres://your_username:your_password@localhost:5432/your_database_name

Kemudian, di dalam file db.ts, Anda bisa mengambil URL tersebut langsung dari .env:

// src/lib/server/db.ts
import postgres from 'postgres';

const DATABASE_URL = import.meta.env.VITE_DATABASE_URL;

const sql = postgres(DATABASE_URL);

export default sql;

Penjelasan:

  • VITE_DATABASE_URL: Dengan format ini, Anda tidak perlu menuliskan variabel host, port, database, username, dan password secara terpisah. URL koneksi dikemas dalam satu variabel VITE_DATABASE_URL.
  • Simplifikasi Kode: Dengan mengambil URL dari .env, kode untuk mengatur koneksi ke PostgreSQL menjadi lebih ringkas dan mudah dikelola.

4. Membuat Direktori untuk Migration dan Seeder
#

Agar Knex dapat bekerja dengan baik, kita perlu membuat direktori untuk menyimpan file migration dan seeder. Buatlah direktori berikut:

mkdir -p migrations
mkdir -p seeds

5. Menambahkan Script di package.json
#

Untuk mempermudah pembuatan file migrasi dan seeder, Anda bisa menambahkan beberapa skrip di dalam package.json. Berikut contohnya:

{
  "scripts": {
    "migrate:make": "knex --knexfile knexfile.cjs migrate:make",
    "seed:make": "knex --knexfile knexfile.cjs seed:make --stub ./stub/seed.cjs.stub",
    "migrate": "knex --knexfile knexfile.cjs migrate:latest",
    "rollback": "knex --knexfile knexfile.cjs migrate:rollback",
    "seed": "knex --knexfile knexfile.cjs seed:run"
  }
}

Dengan skrip-skrip ini, Anda bisa menjalankan perintah berikut untuk membuat file migrasi dan seeder dengan cepat:

  • Membuat Migration:

    npm run migrate:make create_users_table
    
  • Membuat Seeder:

    npm run seed:make seed_users
    

6. Membuat Migration
#

Setelah konfigurasi Knex dan koneksi database selesai, Anda dapat membuat file migration pertama dengan perintah:

npm run migrate:make create_users_table

File migration akan dibuat di dalam direktori migrations. Anda bisa mengeditnya untuk membuat tabel yang diinginkan.

Contoh migration untuk tabel users:

// migrations/xxxx_create_users_table.js
exports.up = function(knex) {
  return knex.schema.createTable('users', function(table) {
    table.increments('id').primary();
    table.string('email').notNullable().unique();
    table.string('password').notNullable();
    table.string('first_name').nullable();
    table.string('last_name').nullable();
    table.timestamps(true, true);
  });
};

exports.down = function(knex) {
  return knex.schema.dropTable('users');
};

buat migrasi satu lagi yaitu untuk menyimpan session ke database Contoh migration untuk tabel sessions:

// migrations/xxxx_create_sessions_table.js
exports.up = function(knex) {
  return knex.schema.createTable('sessions', function(table) {
    table.increments('id').primary();
    table.integer('user_id').notNullable().unique();
    table.string('token').notNullable();
    table.timestamp('expires_at').nullable();
    table.timestamps(true, true);
  });
};

exports.down = function(knex) {
  return knex.schema.dropTable('sessions');
};

7. Membuat Seeder
#

Untuk memasukkan data awal ke tabel, Anda bisa membuat file seeder dengan perintah:

npm run seed:make seed_users

File seeder akan dibuat di seeds. Berikut contoh isi file seeder:

// seeds/xxxx_seed_users.js
exports.seed = async function (knex) {
  // Hapus semua entri yang ada
  await knex('users').del();

  // Masukkan data baru
  await knex('users').insert([
    { email: 'example@test.com', first_name: 'example', last_name: 'test', password: '$2b$10$FvcKBDnjOV8Dm5TMUs7TC.8Ly2yzIqa/W4j/X47YF6lck4ozvTIoS' },
    { email: 'senajhon@gmail.com', first_name: 'sena', last_name: 'jhon', password: '$2b$10$HoYG9KMdKNPr0pE5Me2ZXuF/Fz8Km3ZZ0RdHvzGDVdJ.tuu7AbyDS' }
  ]);
};

8. Menjalankan Migration dan Seeder
#

Untuk menjalankan migration, gunakan perintah:

npm run migrate

Dan untuk menjalankan seeder, gunakan:

npm run seed

Kesimpulan
#

Anda telah berhasil mengonfigurasi Knex untuk membuat migration dan seeder, serta membuat koneksi database PostgreSQL di dalam proyek Svelte Anda. Dengan langkah-langkah ini, Anda dapat mengelola database secara efisien dan otomatis dengan menggunakan Knex.

Dengan penambahan ini, pengguna dapat lebih mudah dan cepat dalam membuat file migrasi dan seeder melalui skrip yang telah disediakan di package.json.

svelte-basic-auth - This article is part of a series.
Part : This Article

Related

Svelte Basic Auth Auth 1
·870 words·5 mins· loading · loading
Development Js Framework Svelte Nodejs
Halo para seniman yang budiman!
Tutorial Laravel 11 Sharing Auth 2
·470 words·3 mins· loading · loading
Development Php Framework Laravel
Halo para seniman yang budiman!
Tutorial Laravel 11 Sharing Auth 1
·703 words·4 mins· loading · loading
Development Php Framework Laravel
Halo para seniman yang budiman!