eksa-framework 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: dd935a9e6ef4c2873496c96eac7b209180f6745789efc34c82dd1695bef46a9c
+  data.tar.gz: b737c65117b5a2263ad9d2fb4fae2f7ebf9c97ec0296bbe76b379d24bfbc2a3c
+SHA512:
+  metadata.gz: 40c3b4c98b336b078ff1cdaef039a4eb4d0827f904f2e158cb59ced2a8f345cb0a5be2c0b9bd36a9ae7be4531ff6fd2d7001a04378cb50f0ff105555664bea65
+  data.tar.gz: 90a0aaf449c9c8519112da50157fdd9d216f796fb0cd4ec38584debbf81e24099a2d4ec0cdd93c3a30e902cc6e9db3422ca75d49b73322ebda2d1af9fd27b11d

data/Gemfile

@@ -0,0 +1,5 @@
+source 'https://rubygems.org'
+
+gem 'rack'
+gem 'puma'
+gem 'sqlite3'

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 IshikawaUta
+
+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.

data/README.md

@@ -0,0 +1,105 @@
+# ✨ Eksa Framework
+
+[![Ruby Version](https://img.shields.io/badge/ruby-3.0+-red.svg)](https://www.ruby-lang.org/)
+[![Rack Version](https://img.shields.io/badge/rack-3.0+-blue.svg)](https://rack.github.io/)
+[![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
+[![Framework Role](https://img.shields.io/badge/UI-Glassmorphism-indigo.svg)](#)
+
+**Eksa Framework** adalah *micro-framework* MVC (Model-View-Controller) modern yang dibangun di atas Ruby dan Rack. Didesain untuk pengembang yang menginginkan kecepatan, kode yang bersih, dan tampilan antarmuka **Glassmorphism** yang elegan secara *out-of-the-box*.
+
+---
+
+## 🚀 Fitur Unggulan
+- 💎 **Modern Glassmorphism UI**: Tampilan transparan yang indah dengan Tailwind CSS & Lucide Icons.
+- ⚡ **Rack 3 Ready**: Menggunakan standar terbaru dengan penanganan header modern.
+- 🛠️ **CLI Generator**: Siapkan struktur project instan dengan perintah `eksa-init`.
+- 💾 **Auto-Migration DB**: Database SQLite otomatis dibuat saat server pertama kali dijalankan.
+- 🔔 **Flash Messages**: Notifikasi animasi elegan yang kompatibel dengan cookie Rack 3.
+- 🛤️ **Simple Routing**: Sistem routing yang eksplisit dan mudah dikelola di `config.ru`.
+
+---
+
+## 🛠️ Instalasi Cepat
+
+### 1. Install via Gem
+Anda bisa menginstal framework ini langsung dengan `gem`:
+
+```bash
+gem install eksa-framework
+```
+
+### 2. Inisialisasi Project Baru
+
+Masuk ke folder baru, lalu jalankan generator Eksa:
+
+```bash
+mkdir my-awesome-app
+cd my-awesome-app
+eksa-init
+```
+
+### 3. Jalankan Server
+
+```bash
+bundle install
+rackup config.ru
+```
+
+Buka browser dan akses `http://localhost:9292`.
+
+---
+
+## 💻 Panduan Pengembangan
+
+### 1. Struktur Folder
+
+Eksa memisahkan data dari logika aplikasi dengan folder `db` di level root:
+
+* `app/`: Logic & Views (Controllers, Models, Views).
+* `db/`: File database SQLite `eksa_app.db` (Terpisah dari app).
+* `lib/eksa/`: Core Engine (The magic happens here).
+* `public/`: File statis (CSS, Images, JS).
+
+### 2. Menambah Route & Controller
+
+Daftarkan rute di `config.ru`:
+
+```ruby
+app.add_route "/profil", PagesController, :profil
+```
+
+Buat method di `app/controllers/pages_controller.rb`:
+
+```ruby
+def profil
+  render :profil # Merujuk ke app/views/profil.html.erb
+end
+```
+
+### 3. Database & Model
+
+Eksa akan otomatis membuat tabel saat Anda mendefinisikannya di `lib/eksa/model.rb`. Untuk menggunakan data di controller:
+
+```ruby
+@pesan = Pesan.all # Menggunakan model app/models/pesan.rb
+```
+
+---
+
+## 🎨 Kustomisasi Visual
+
+Eksa menggunakan **Tailwind CSS** dan **Animate.css**. Anda dapat mengatur efek kaca pada class `.glass` di `app/views/layout.html.erb`:
+
+```css
+.glass {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+```
+
+---
+
+## 📜 Lisensi
+
+Proyek ini dilisensikan di bawah **MIT License**. Lihat file [LICENSE](https://www.google.com/search?q=LICENSE) untuk detail lebih lanjut.

data/app/controllers/pages_controller.rb

@@ -0,0 +1,50 @@
+require './app/models/pesan'
+
+class PagesController < Eksa::Controller
+  def index
+    if request.post? && params['konten']
+      Pesan.buat(params['konten'], params['pengirim'])
+      return redirect_to "/", notice: "Pesan berhasil terkirim ke database!"
+    end
+
+    if params['q'] && !params['q'].empty?
+      @semua_pesan = Pesan.cari_kata(params['q'])
+      @keyword = params['q']
+    else
+      @semua_pesan = Pesan.semua
+    end
+
+    @nama = params['nama'] || "Developer"
+    render :index
+  end
+
+  def about
+    render :about
+  end
+
+  def docs
+    render :docs
+  end
+
+  def edit
+    @id = params['id']
+    @pesan = Pesan.cari(@id)
+
+    return redirect_to "/", notice: "Pesan tidak ditemukan!" if @pesan.nil?
+
+    if request.post?
+      Pesan.update(@id, params['konten'], params['pengirim'])
+      return redirect_to "/", notice: "Perubahan pesan berhasil disimpan."
+    end
+
+    render :edit
+  end
+
+  def hapus_pesan
+    if params['id']
+      Pesan.hapus(params['id'])
+      return redirect_to "/", notice: "Pesan telah berhasil dihapus."
+    end
+    redirect_to "/"
+  end
+end

data/app/models/pesan.rb

@@ -0,0 +1,25 @@
+class Pesan < Eksa::Model
+  def self.semua
+    db.execute("SELECT * FROM pesan ORDER BY id DESC")
+  end
+
+  def self.buat(konten, pengirim)
+    db.execute("INSERT INTO pesan (konten, pengirim) VALUES (?, ?)", [konten.strip, pengirim.strip])
+  end
+
+  def self.cari(id)
+    db.execute("SELECT * FROM pesan WHERE id = ?", [id]).first
+  end
+
+  def self.update(id, konten, pengirim)
+    db.execute("UPDATE pesan SET konten = ?, pengirim = ? WHERE id = ?", [konten.strip, pengirim.strip, id])
+  end
+
+  def self.hapus(id)
+    db.execute("DELETE FROM pesan WHERE id = ?", [id])
+  end
+  
+  def self.cari_kata(keyword)
+    db.execute("SELECT * FROM pesan WHERE konten LIKE ? OR pengirim LIKE ? ORDER BY id DESC", ["%#{keyword}%", "%#{keyword}%"])
+  end
+end

data/app/views/about.html.erb

@@ -0,0 +1,36 @@
+<div class="glass rounded-3xl p-10 text-white animate__animated animate__fadeIn">
+  <div class="flex items-center gap-4 mb-8">
+    <div class="p-4 bg-indigo-500 rounded-2xl shadow-xl">
+      <i data-lucide="rocket" class="w-8 h-8"></i>
+    </div>
+    <h1 class="text-4xl font-extrabold tracking-tight">Tentang <span class="text-indigo-300">Eksa</span></h1>
+  </div>
+
+  <div class="space-y-6 text-white/80 leading-relaxed">
+    <p class="text-lg">
+      <strong>Eksa Framework</strong> adalah sebuah <strong>micro-framework</strong> Ruby yang dibangun dari nol untuk mendemonstrasikan kekuatan arsitektur MVC dan kesederhanaan Ruby.
+    </p>
+    
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
+      <div class="bg-white/5 p-6 rounded-2xl border border-white/10">
+        <i data-lucide="cpu" class="w-6 h-6 text-indigo-300 mb-3"></i>
+        <h3 class="font-bold text-white mb-2">Core Ruby</h3>
+        <p class="text-sm">Dibangun di atas Rack tanpa menggunakan framework besar lainnya.</p>
+      </div>
+      <div class="bg-white/5 p-6 rounded-2xl border border-white/10">
+        <i data-lucide="database" class="w-6 h-6 text-indigo-300 mb-3"></i>
+        <h3 class="font-bold text-white mb-2">SQLite Engine</h3>
+        <p class="text-sm">Penyimpanan data yang ringan, cepat, dan handal.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="mt-12 pt-8 border-t border-white/10 flex justify-between items-center">
+    <a href="/" class="flex items-center gap-2 text-indigo-300 hover:text-white transition">
+      <i data-lucide="arrow-left" class="w-4 h-4"></i> Kembali ke Home
+    </a>
+    <span class="text-xs opacity-40 italic">Handcrafted with Ruby</span>
+  </div>
+</div>
+
+<script>lucide.createIcons();</script>

data/app/views/docs.html.erb

@@ -0,0 +1,120 @@
+<div class="glass rounded-3xl p-8 md:p-12 animate__animated animate__fadeIn">
+  <div class="border-b border-white/10 pb-8 mb-8">
+    <div class="flex items-center gap-4 mb-4">
+      <div class="p-3 bg-indigo-500 rounded-2xl shadow-lg">
+        <i data-lucide="book-open" class="w-8 h-8"></i>
+      </div>
+      <h1 class="text-4xl font-extrabold tracking-tight">Dokumentasi <span class="text-indigo-300">Eksa</span></h1>
+    </div>
+    <p class="text-white/60 text-lg">Panduan profesional instalasi dan pengembangan aplikasi menggunakan Eksa Framework.</p>
+  </div>
+
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+    <div class="space-y-4">
+      <h3 class="font-bold text-indigo-300 uppercase text-xs tracking-widest">Memulai</h3>
+      <ul class="space-y-2 text-sm">
+        <li><a href="#instalasi" class="hover:text-indigo-300 transition flex items-center gap-2"><i data-lucide="download" class="w-3 h-3"></i> Instalasi Gem</a></li>
+        <li><a href="#struktur" class="hover:text-indigo-300 transition flex items-center gap-2"><i data-lucide="folder" class="w-3 h-3"></i> Struktur Project</a></li>
+      </ul>
+    </div>
+    <div class="space-y-4">
+      <h3 class="font-bold text-indigo-300 uppercase text-xs tracking-widest">Pengembangan</h3>
+      <ul class="space-y-2 text-sm">
+        <li><a href="#routing" class="hover:text-indigo-300 transition flex items-center gap-2"><i data-lucide="git-branch" class="w-3 h-3"></i> Routing System</a></li>
+        <li><a href="#build" class="hover:text-indigo-300 transition flex items-center gap-2"><i data-lucide="package" class="w-3 h-3"></i> Build Framework</a></li>
+      </ul>
+    </div>
+    <div class="space-y-4">
+      <h3 class="font-bold text-indigo-300 uppercase text-xs tracking-widest">Fitur Core</h3>
+      <ul class="space-y-2 text-sm">
+        <li><a href="#database" class="hover:text-indigo-300 transition flex items-center gap-2"><i data-lucide="database" class="w-3 h-3"></i> Auto-Migration</a></li>
+        <li><a href="#flash" class="hover:text-indigo-300 transition flex items-center gap-2"><i data-lucide="bell" class="w-3 h-3"></i> Flash UI</a></li>
+      </ul>
+    </div>
+  </div>
+
+  <section id="instalasi" class="mb-12 scroll-mt-24">
+    <h2 class="text-2xl font-bold mb-4 flex items-center gap-2">
+      <i data-lucide="terminal" class="w-6 h-6 text-indigo-400"></i> Instalasi Cepat
+    </h2>
+    <div class="bg-black/40 rounded-2xl p-6 font-mono text-sm border border-white/10 space-y-3">
+      <div>
+        <p class="text-white/30"># 1. Install gem secara lokal</p>
+        <p class="text-indigo-300">gem install ./eksa-framework-0.1.0.gem</p>
+      </div>
+      <div>
+        <p class="text-white/30"># 2. Inisialisasi project baru</p>
+        <p class="text-indigo-300">eksa-init</p>
+      </div>
+      <div>
+        <p class="text-white/30"># 3. Jalankan server</p>
+        <p class="text-indigo-300">rackup config.ru</p>
+      </div>
+    </div>
+  </section>
+
+  <section id="routing" class="mb-12 scroll-mt-24">
+    <h2 class="text-2xl font-bold mb-4 flex items-center gap-2">
+      <i data-lucide="git-branch" class="w-6 h-6 text-indigo-400"></i> Routing System
+    </h2>
+    <p class="text-white/60 mb-4 text-sm">Definisikan rute aplikasi Anda di dalam file <code class="text-indigo-200">config.ru</code>. Eksa mendukung pemetaan URL ke Controller dan Action secara eksplisit.</p>
+    <div class="bg-black/40 rounded-2xl p-6 font-mono text-sm border border-white/10">
+      <p class="text-white/30"># app.add_route(path, controller_class, action_symbol)</p>
+      <p class="text-indigo-300 italic">app.add_route "/", PagesController, :index</p>
+      <p class="text-indigo-300 italic">app.add_route "/about", PagesController, :about</p>
+    </div>
+  </section>
+
+  <section id="database" class="mb-12 scroll-mt-24">
+    <h2 class="text-2xl font-bold mb-4 flex items-center gap-2">
+      <i data-lucide="database" class="w-6 h-6 text-indigo-400"></i> Auto-Migration
+    </h2>
+    <p class="text-white/60 mb-4 text-sm">Eksa secara otomatis membuat file database dan tabel saat aplikasi pertama kali dijalankan melalui <code class="text-indigo-200">Eksa::Model</code>.</p>
+    <div class="bg-black/40 rounded-2xl p-6 font-mono text-sm border border-white/10">
+      <p class="text-indigo-300">def self.setup_initial_schema</p>
+      <p class="text-white/70 ml-4">@db.execute "CREATE TABLE IF NOT EXISTS pesan (...)"</p>
+      <p class="text-indigo-300">end</p>
+    </div>
+    <p class="text-xs text-white/40 mt-3 italic">* Database tersimpan secara persisten di folder /db/eksa_app.db</p>
+  </section>
+
+  <section id="flash" class="mb-12 scroll-mt-24">
+    <h2 class="text-2xl font-bold mb-4 flex items-center gap-2">
+      <i data-lucide="bell" class="w-6 h-6 text-indigo-400"></i> Flash UI Notification
+    </h2>
+    <p class="text-white/60 mb-4 text-sm">Kirim feedback instan ke user menggunakan fitur redirect dengan notice.</p>
+    <div class="bg-black/40 rounded-2xl p-6 font-mono text-sm border border-white/10">
+      <p class="text-white/30"># Di dalam Controller</p>
+      <p class="text-indigo-300">redirect_to "/", notice: "Data berhasil disimpan!"</p>
+    </div>
+    <div class="mt-4 p-4 bg-emerald-500/10 border border-emerald-500/20 rounded-xl flex items-center gap-3">
+        <i data-lucide="info" class="w-5 h-5 text-emerald-400"></i>
+        <p class="text-xs text-emerald-200/80">Sistem Flash Eksa menggunakan cookie sementara yang otomatis dihapus setelah notifikasi muncul (Standar Rack 3).</p>
+    </div>
+  </section>
+
+  <section id="build" class="mb-12 scroll-mt-24">
+    <h2 class="text-2xl font-bold mb-4 flex items-center gap-2">
+      <i data-lucide="package-check" class="w-6 h-6 text-indigo-400"></i> Build ke RubyGems
+    </h2>
+    <div class="bg-black/40 rounded-2xl p-6 font-mono text-sm border border-white/10">
+      <p class="text-indigo-300">gem build eksa-framework.gemspec</p>
+      <p class="text-indigo-300 mt-2">gem install ./eksa-framework-0.1.0.gem</p>
+    </div>
+  </section>
+
+  <div class="mt-12 pt-8 border-t border-white/10 text-center">
+    <div class="flex justify-center gap-4 mb-4">
+        <span class="bg-indigo-500/20 text-indigo-300 text-[10px] px-3 py-1 rounded-full border border-indigo-500/30 uppercase tracking-tighter">Rack 3.0 Compatible</span>
+        <span class="bg-emerald-500/20 text-emerald-300 text-[10px] px-3 py-1 rounded-full border border-emerald-500/30 uppercase tracking-tighter">SQLite3 Auto-Ready</span>
+    </div>
+    <p class="text-white/40 text-sm italic">Eksa Framework v<%= Eksa::VERSION %> Alpha Documentation</p>
+    <a href="/" class="inline-block mt-6 text-indigo-300 hover:text-white transition font-bold flex items-center justify-center gap-2">
+      <i data-lucide="arrow-left" class="w-4 h-4"></i> Kembali ke Beranda
+    </a>
+  </div>
+</div>
+
+<script>
+  lucide.createIcons();
+</script>

data/app/views/edit.html.erb

@@ -0,0 +1,50 @@
+<div class="glass rounded-3xl p-8 max-w-xl mx-auto animate__animated animate__zoomIn">
+  <div class="flex items-center gap-4 mb-6">
+    <div class="p-3 bg-indigo-500/20 rounded-2xl border border-indigo-500/30 text-indigo-300">
+      <i data-lucide="edit-3" class="w-6 h-6"></i>
+    </div>
+    <div>
+      <span class="text-xs font-bold uppercase tracking-widest text-indigo-300 opacity-80">Mode Edit</span>
+      <h1 class="text-3xl font-bold tracking-tight text-white">Revisi Pesan <span class="text-indigo-300">#<%= @id %></span></h1>
+    </div>
+  </div>
+  
+  <p class="text-white/60 mb-8">
+    Lakukan perubahan pada konten atau pengirim. Perubahan akan langsung diperbarui di database SQLite.
+  </p>
+  
+  <form action="/edit?id=<%= @id %>" method="post" class="space-y-6">
+    <div class="space-y-2">
+      <label class="text-sm font-semibold text-white/80 ml-1 flex items-center gap-2">
+        <i data-lucide="user" class="w-4 h-4 text-indigo-300"></i> Nama Pengirim
+      </label>
+      <input type="text" name="pengirim" value="<%= @pesan[2] %>" required 
+             class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition text-white placeholder-white/20">
+    </div>
+    
+    <div class="space-y-2">
+      <label class="text-sm font-semibold text-white/80 ml-1 flex items-center gap-2">
+        <i data-lucide="message-circle" class="w-4 h-4 text-indigo-300"></i> Isi Pesan
+      </label>
+      <textarea name="konten" required 
+                class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition text-white placeholder-white/20 h-40 resize-none"><%= @pesan[1] %></textarea>
+    </div>
+    
+    <div class="flex flex-col sm:flex-row gap-4 pt-4">
+      <button type="submit" 
+              class="flex-[2] bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-3 px-6 rounded-xl transition duration-300 flex items-center justify-center gap-2 shadow-lg shadow-indigo-900/20">
+        <i data-lucide="save" class="w-5 h-5"></i> Simpan Perubahan
+      </button>
+      
+      <a href="/" 
+         class="flex-[1] bg-white/5 hover:bg-white/10 text-white text-center font-bold py-3 px-6 rounded-xl border border-white/10 transition flex items-center justify-center gap-2">
+        <i data-lucide="arrow-left" class="w-4 h-4 text-white/60"></i> Batal
+      </a>
+    </div>
+  </form>
+</div>
+
+<script>
+  // Inisialisasi ikon untuk halaman ini
+  lucide.createIcons();
+</script>

data/app/views/index.html.erb

@@ -0,0 +1,108 @@
+<div class="glass rounded-3xl p-8 animate__animated animate__fadeIn">
+  <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
+    <div>
+      <span class="inline-block bg-indigo-500/20 text-indigo-200 text-xs font-bold px-3 py-1 rounded-full mb-3 border border-indigo-500/30">
+        v0.1.0 Alpha
+      </span>
+      <h1 class="text-4xl font-extrabold tracking-tight">
+        Halo, <span class="text-indigo-300"><%= @nama %></span>!
+      </h1>
+      <p class="text-white/60 mt-2">
+        Selamat datang di dunia pengembangan web yang bersih dan cepat dengan <strong>Eksa Framework</strong>.
+      </p>
+    </div>
+
+    <form action="/" method="get" class="flex w-full md:w-auto">
+      <div class="relative w-full">
+        <input type="text" name="q" placeholder="Cari pesan..." value="<%= @keyword %>" 
+               class="w-full md:w-48 bg-white/5 border border-white/10 rounded-xl py-2 pl-4 pr-10 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:w-64 transition-all duration-300 placeholder-white/30 text-sm">
+        <button type="submit" class="absolute right-2 top-1.5 p-1 text-white/40 hover:text-white transition">
+          <i data-lucide="search" class="w-4 h-4"></i>
+        </button>
+      </div>
+    </form>
+  </div>
+
+  <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
+    
+    <div class="lg:col-span-2 space-y-6">
+      <div class="bg-white/5 border border-white/10 rounded-2xl p-6">
+        <h2 class="text-lg font-bold mb-4 flex items-center gap-2">
+          <i data-lucide="pen-tool" class="w-5 h-5 text-indigo-300"></i> Kirim Pesan
+        </h2>
+        <form action="/" method="post" class="space-y-4">
+          <div>
+            <input type="text" name="pengirim" placeholder="Nama Anda" required 
+                   class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition placeholder-white/20">
+          </div>
+          <div>
+            <textarea name="konten" placeholder="Tulis pesan kreatifmu di sini..." required 
+                      class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition placeholder-white/20 h-32 resize-none"></textarea>
+          </div>
+          <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-3 rounded-xl transition duration-300 flex items-center justify-center gap-2 shadow-lg shadow-indigo-900/20">
+            <i data-lucide="send" class="w-4 h-4"></i> Simpan ke SQLite
+          </button>
+        </form>
+      </div>
+    </div>
+
+    <div class="lg:col-span-3">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-lg font-bold flex items-center gap-2">
+          <i data-lucide="message-square" class="w-5 h-5 text-indigo-300"></i> Pesan Terbaru
+        </h2>
+        <% if @keyword && !@keyword.empty? %>
+          <a href="/" class="text-xs bg-white/10 hover:bg-white/20 px-3 py-1 rounded-lg transition flex items-center gap-1">
+            <i data-lucide="x" class="w-3 h-3"></i> Bersihkan Filter
+          </a>
+        <% end %>
+      </div>
+
+      <% if @keyword && !@keyword.empty? %>
+        <p class="text-sm text-white/40 mb-4 italic">Menampilkan hasil pencarian untuk "<%= @keyword %>"</p>
+      <% end %>
+
+      <div class="space-y-4 overflow-y-auto max-h-[500px] pr-2 custom-scrollbar">
+        <% if @semua_pesan.any? %>
+          <% @semua_pesan.each do |p| %>
+            <div class="bg-white/5 border border-white/10 p-5 rounded-2xl flex justify-between items-start group hover:bg-white/10 transition duration-300 animate__animated animate__fadeInUp">
+              <div class="max-w-[70%]">
+                <div class="flex items-center gap-2 mb-1">
+                  <div class="w-2 h-2 bg-indigo-400 rounded-full"></div>
+                  <strong class="text-indigo-200"><%= p[2] %></strong>
+                </div>
+                <p class="text-white/70 text-sm leading-relaxed"><%= p[1] %></p>
+              </div>
+              
+              <div class="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                <a href="/edit?id=<%= p[0] %>" title="Edit"
+                   class="p-2 bg-white/10 hover:bg-indigo-500 rounded-lg transition">
+                  <i data-lucide="edit-3" class="w-4 h-4 text-white"></i>
+                </a>
+                <a href="/hapus?id=<%= p[0] %>" 
+                   onclick="return confirm('Yakin ingin menghapus pesan dari <%= p[2] %>?')" 
+                   title="Hapus"
+                   class="p-2 bg-white/10 hover:bg-red-500 rounded-lg transition">
+                  <i data-lucide="trash-2" class="w-4 h-4 text-white"></i>
+                </a>
+              </div>
+            </div>
+          <% end %>
+        <% else %>
+          <div class="flex flex-col items-center justify-center py-20 bg-white/5 rounded-2xl border border-dashed border-white/10">
+            <i data-lucide="ghost" class="w-12 h-12 text-white/10 mb-2"></i>
+            <p class="text-white/30 italic text-sm">
+              <%= @keyword ? "Tidak ada pesan yang cocok." : "Database masih kosong." %>
+            </p>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script>
+  // Refresh icons for new content
+  lucide.createIcons();
+</script>

data/app/views/layout.html.erb

@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Eksa Framework | Modern Ruby Development</title>
+  
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="icon" href="/img/logo.png" type="image/png">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+  <script src="https://unpkg.com/lucide@latest"></script>
+
+  <style>
+    body {
+      font-family: 'Inter', sans-serif;
+      background: radial-gradient(circle at top left, #4f46e5, #764ba2, #2d3748);
+      background-attachment: fixed;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .glass {
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(16px) saturate(180%);
+      -webkit-backdrop-filter: blur(16px) saturate(180%);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .nav-blur {
+      background: rgba(255, 255, 255, 0.05);
+      backdrop-filter: blur(10px);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .nav-link {
+      position: relative;
+      transition: all 0.3s ease;
+    }
+    .nav-link::after {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 2px;
+      bottom: -4px;
+      left: 0;
+      background-color: #a5b4fc;
+      transition: width 0.3s ease;
+    }
+    .nav-link:hover::after {
+      width: 100%;
+    }
+
+    /* Custom Scrollbar untuk list pesan */
+    .custom-scrollbar::-webkit-scrollbar {
+      width: 6px;
+    }
+    .custom-scrollbar::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0.05);
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 10px;
+    }
+  </style>
+</head>
+<body class="text-white antialiased">
+  
+  <% if @flash && @flash[:notice] %>
+    <div id="flash-msg" class="fixed top-24 left-1/2 -translate-x-1/2 z-[60] animate__animated animate__fadeInDown">
+      <div class="flex items-center gap-3 bg-emerald-500/90 backdrop-blur-md text-white px-6 py-3 rounded-2xl shadow-2xl border border-emerald-400/50 shadow-emerald-900/40">
+        <i data-lucide="check-circle" class="w-5 h-5"></i>
+        <span class="font-bold text-sm tracking-wide"><%= @flash[:notice] %></span>
+        <button onclick="closeFlash()" class="ml-4 opacity-50 hover:opacity-100 transition">
+          <i data-lucide="x" class="w-4 h-4"></i>
+        </button>
+      </div>
+    </div>
+    <script>
+      function closeFlash() {
+        const msg = document.getElementById('flash-msg');
+        if(msg) {
+          msg.classList.replace('animate__fadeInDown', 'animate__fadeOutUp');
+          setTimeout(() => msg.remove(), 800);
+        }
+      }
+      // Otomatis tutup setelah 4 detik
+      setTimeout(closeFlash, 4000);
+    </script>
+  <% end %>
+
+  <nav class="nav-blur sticky top-0 z-50 px-6 py-4 flex items-center justify-between animate__animated animate__fadeInDown">
+    <div onclick="window.location.href='/'" class="flex items-center gap-3 group cursor-pointer">
+      <div class="p-2 bg-indigo-500 rounded-xl shadow-lg shadow-indigo-500/50 group-hover:rotate-12 transition-transform">
+        <i data-lucide="layers" class="w-6 h-6"></i>
+      </div>
+      <span class="text-xl font-extrabold tracking-tight">Eksa<span class="text-indigo-300">Framework</span></span>
+    </div>
+
+    <ul class="hidden md:flex items-center gap-8 font-medium text-sm">
+      <li><a href="/" class="nav-link flex items-center gap-2"><i data-lucide="home" class="w-4 h-4"></i> Home</a></li>
+      <li><a href="/about" class="nav-link flex items-center gap-2"><i data-lucide="info" class="w-4 h-4"></i> About</a></li>
+      <li><a href="/docs" class="nav-link flex items-center gap-2"><i data-lucide="book-open" class="w-4 h-4"></i> Docs</a></li>
+    </ul>
+
+    <div class="flex items-center gap-4">
+       <a href="https://github.com/IshikawaUta" target="_blank" class="p-2 hover:bg-white/10 rounded-full transition"><i data-lucide="github" class="w-5 h-5"></i></a>
+    </div>
+  </nav>
+
+  <main class="max-w-6xl mx-auto py-12 px-6 flex-grow animate__animated animate__fadeInUp">
+    <%= @content %>
+  </main>
+
+  <footer class="py-8 text-center text-white/40 text-sm border-t border-white/5">
+    <p>&copy; <%= Time.now.year %> <span class="font-bold text-white/60">Eksa Framework</span>. Crafted for speed.</p>
+  </footer>
+
+  <script>
+    // Inisialisasi ikon Lucide
+    lucide.createIcons();
+  </script>
+</body>
+</html>

data/config.ru

@@ -0,0 +1,15 @@
+require './lib/eksa'
+require './app/controllers/pages_controller'
+
+use Rack::Static, urls: ["/css", "/img"], root: "public"
+use Rack::ShowExceptions
+
+app = Eksa::Application.new
+
+app.add_route "/", PagesController, :index
+app.add_route "/hapus", PagesController, :hapus_pesan
+app.add_route "/edit", PagesController, :edit
+app.add_route "/about", PagesController, :about
+app.add_route "/docs", PagesController, :docs
+
+run app

data/db/setup.rb

@@ -0,0 +1,13 @@
+require 'sqlite3'
+
+db = SQLite3::Database.new "eksa_app.db"
+
+db.execute <<-SQL
+  CREATE TABLE IF NOT EXISTS pesan (
+    id INTEGER PRIMARY KEY,
+    konten TEXT,
+    pengirim TEXT
+  );
+SQL
+
+puts "Database Eksa berhasil disiapkan!"

data/exe/eksa-init

@@ -0,0 +1,43 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require 'fileutils'
+
+gem_root = File.expand_path("../..", __FILE__)
+target_dir = Dir.pwd
+
+puts "\n✨ Eksa Framework Generator ✨"
+puts "-----------------------------"
+puts "🚀 Menginisialisasi project di: #{target_dir}"
+
+items_to_init = ['app', 'lib', 'public', 'db', 'config.ru', 'Gemfile', 'README.md']
+
+items_to_init.each do |item|
+  source = File.join(gem_root, item)
+  destination = File.join(target_dir, item)
+  
+  if File.exist?(source)
+    if File.directory?(source)
+      FileUtils.cp_r(source, target_dir)
+      puts "  [OK] Folder '#{item}' berhasil disalin."
+    else
+      FileUtils.cp(source, destination)
+      puts "  [OK] File '#{item}' berhasil disalin."
+    end
+  else
+    if item == 'db'
+      FileUtils.mkdir_p(destination)
+      puts "  [OK] Folder 'db' baru berhasil dibuat."
+    else
+      puts "  [!] Warning: Sumber '#{item}' tidak ditemukan."
+    end
+  end
+end
+
+puts "\n✅ Inisialisasi Selesai!"
+puts "-----------------------------"
+puts "Instruksi selanjutnya:"
+puts "1. Jalankan: bundle install"
+puts "2. Jalankan server: rackup config.ru"
+puts "3. Buka browser: http://localhost:9292"
+puts "-----------------------------\n"

data/lib/eksa/controller.rb

@@ -0,0 +1,43 @@
+require 'erb'
+
+module Eksa
+  class Controller
+    attr_reader :request
+    attr_accessor :status, :redirect_url, :flash
+
+    def initialize(request)
+      @request = request
+      @status = 200
+      @flash = {}
+    end
+
+    def params
+      @request.params
+    end
+
+    def redirect_to(url, notice: nil)
+      @status = 302
+      @redirect_url = url
+      @flash[:notice] = notice if notice
+      nil
+    end
+
+    def render(template_name, variables = {})
+      variables.each { |k, v| instance_variable_set("@#{k}", v) }
+
+      content_path = File.expand_path("./app/views/#{template_name}.html.erb")
+      layout_path  = File.expand_path("./app/views/layout.html.erb")
+
+      if File.exist?(content_path)
+        @content = ERB.new(File.read(content_path)).result(binding)
+        if File.exist?(layout_path)
+          ERB.new(File.read(layout_path)).result(binding)
+        else
+          @content
+        end
+      else
+        "Error: View '#{template_name}' tidak ditemukan."
+      end
+    end
+  end
+end

data/lib/eksa/model.rb

@@ -0,0 +1,25 @@
+require 'sqlite3'
+require 'fileutils'
+
+module Eksa
+  class Model
+    def self.db
+      db_dir = File.expand_path("../../db", __dir__)
+      db_path = File.join(db_dir, "eksa_app.db")
+      FileUtils.mkdir_p(db_dir) unless Dir.exist?(db_dir)
+      @db ||= SQLite3::Database.new(db_path)
+      setup_initial_schema
+      @db
+    end
+
+    def self.setup_initial_schema
+      @db.execute <<-SQL
+        CREATE TABLE IF NOT EXISTS pesan (
+          id INTEGER PRIMARY KEY AUTOINCREMENT,
+          konten TEXT,
+          pengirim TEXT
+        );
+      SQL
+    end
+  end
+end

data/lib/eksa/version.rb

@@ -0,0 +1,3 @@
+module Eksa
+  VERSION = "0.1.0"
+end

data/lib/eksa.rb

@@ -0,0 +1,43 @@
+require 'rack'
+require_relative 'eksa/version'
+require_relative 'eksa/controller'
+require_relative 'eksa/model'
+
+module Eksa
+  class Application
+    def initialize
+      @routes = {}
+    end
+
+    def add_route(path, controller_class, action)
+      @routes[path] = { controller: controller_class, action: action }
+    end
+
+    def call(env)
+      request = Rack::Request.new(env)
+      flash_message = request.cookies['eksa_flash']
+      route = @routes[request.path_info]
+
+      if route
+        controller_instance = route[:controller].new(request)
+        controller_instance.flash[:notice] = flash_message if flash_message
+        
+        response_body = controller_instance.send(route[:action])
+        
+        response = Rack::Response.new
+
+        if controller_instance.status == 302
+          response.redirect(controller_instance.redirect_url, 302)
+        else
+          response.write(response_body)
+          response['content-type'] = 'text/html'
+        end
+
+        response.delete_cookie('eksa_flash') if flash_message
+        response.finish
+      else
+        [404, { 'content-type' => 'text/html' }, ["<h1>404 - Not Found</h1>"]]
+      end
+    end
+  end
+end

data/public/css/style.css

@@ -0,0 +1,111 @@
+/* public/css/style.css */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #f8fafc; /* Abu-abu sangat muda yang bersih */
+    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    color: #1e293b;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.main-content {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+
+ul.nav-links {
+    list-style: none;
+    display: flex;
+    gap: 20px;
+}
+
+.modern-nav {
+    background: #ffffff;
+    padding: 1rem 10%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+
+.brand {
+    font-weight: 800;
+    font-size: 1.4rem;
+    color: #4f46e5; /* Indigo modern */
+    letter-spacing: -1px;
+}
+
+.modern-card {
+    background: white;
+    padding: 3.5rem 2.5rem;
+    border-radius: 24px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
+    text-align: center;
+    max-width: 500px;
+    width: 100%;
+    border: 1px solid #f1f5f9;
+    position: relative;
+    overflow: hidden;
+}
+
+.modern-card::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 6px;
+    background: linear-gradient(90deg, #4f46e5, #ec4899); /* Gradien Indigo ke Pink */
+}
+
+h1 {
+    font-size: 2.2rem;
+    font-weight: 800;
+    margin-bottom: 1rem;
+    color: #0f172a;
+    letter-spacing: -0.025em;
+}
+
+p {
+    color: #64748b;
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
+}
+
+.badge {
+    display: inline-block;
+    padding: 4px 12px;
+    background: #eef2ff;
+    color: #4f46e5;
+    border-radius: 99px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+}
+
+code {
+    background: #f1f5f9;
+    padding: 3px 6px;
+    border-radius: 6px;
+    color: #e11d48;
+    font-family: 'Fira Code', monospace;
+    font-size: 0.9em;
+}
+
+.modern-footer {
+    padding: 2rem;
+    text-align: center;
+    font-size: 0.85rem;
+    color: #94a3b8;
+}

metadata

@@ -0,0 +1,105 @@
+--- !ruby/object:Gem::Specification
+name: eksa-framework
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- IshikawaUta
+bindir: exe
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rack
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.4'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.4'
+- !ruby/object:Gem::Dependency
+  name: puma
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '6.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '6.0'
+description: Framework MVC ringan dengan tema modern, sistem routing, dan auto-database
+  SQLite.
+email:
+- komikers09@gmail.com
+executables:
+- eksa-init
+extensions: []
+extra_rdoc_files: []
+files:
+- Gemfile
+- LICENSE
+- README.md
+- app/controllers/pages_controller.rb
+- app/models/pesan.rb
+- app/views/about.html.erb
+- app/views/docs.html.erb
+- app/views/edit.html.erb
+- app/views/index.html.erb
+- app/views/layout.html.erb
+- config.ru
+- db/eksa_app.db
+- db/setup.rb
+- exe/eksa-init
+- lib/eksa.rb
+- lib/eksa/controller.rb
+- lib/eksa/model.rb
+- lib/eksa/version.rb
+- public/css/style.css
+- public/img/favicon.ico
+- public/img/logo.png
+homepage: https://github.com/IshikawaUta/eksa-framework
+licenses:
+- MIT
+metadata: {}
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.0.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.7
+specification_version: 4
+summary: Modern Glassmorphism Ruby MVC Framework.
+test_files: []