Antonietta Vines
|Subscribers
About
Steroid Cycles And Stacks
Below is a practical "recipe" you can follow (or copy‑paste into your own project) to create a new form component that behaves like the old `custom_field` widget and stores its value in the database exactly the way the legacy system did.
---
1. Prerequisites
Item What you need
Framework/stack Any MVC framework (Laravel, Symfony, Rails, etc.) – the same ideas apply to a plain PHP site.
Database A table that already contains the column(s) where `custom_field` data lives (or you’ll add them).
Form builder / renderer You can hand‑write HTML or use your framework’s form helpers.
Routing & controller layer For handling the POST and GET requests.
---
2. Database – Make sure the column exists
-- Example: existing table
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255),
email VARCHAR(255),
custom_field TEXT -- <-- this is where the old data lives
);
If you need a new column, just add it:
ALTER TABLE users ADD COLUMN new_custom TEXT;
3. Controller / Route
GET – Show form with existing value
// In Laravel controller method
public function editUser($id)
$user = User::findOrFail($id);
return view('edit_user', 'user' => $user);
POST – Receive new data and save
public function updateUser(Request $request, $id)
$user = User::findOrFail($id);
// Validate (optional but recommended)
$validated = $request->validate(max:255',
'custom_text' => 'requiredstring);
// Save new value to custom field
$user->custom_text = $validated'custom_text';
$user->save();
return redirect()->route('edit_user', 'id' => $id)
->with('status', 'Custom field updated successfully.');
3. What if I don’t want to use a database?
If you’re building a very small static site (no user‑generated data) you can:
Store the custom text in a JSON file (`content/custom.json`).
Read that file at build time with `fetch()` or a serverless function.
Use the fetched value in your page.
This works because SvelteKit can fetch local files during prerendering, but it won’t persist changes unless you deploy a backend.
4. Quick Reference Cheat‑Sheet
Goal How to do it
Store user‑editable text Create an API route (`/api/text`) that reads/writes `data.json`. Use `fetch('/api/text')` in the component.
Persist across visits Keep `data.json` on the server or use a DB (e.g., Supabase, Firebase).
| Edit from page | `` and `on:input=() => save(text)` |
| Secure API | Add auth middleware to route; only authenticated users can write. |
| Deploy | Use Vercel or Netlify with serverless functions. |
---
## 5️⃣ Quick Reference Cheat‑Sheet
| What | Code Snippet | Explanation |
|------|--------------|-------------|
| Create a writable store | `export const user = writable(null);` | Store for global state (e.g., logged‑in user). |
| Update store | `user.set( id: 1, name: 'Alice' );` | Change value immediately. |
| Subscribe to store in component | `import onDestroy from 'svelte'; const unsubscribe = user.subscribe(v => console.log(v)); onDestroy(unsubscribe);` | Reactivity without `$:` syntax. |
| Use auto‑subscription (`
Steroid Cycles And Stacks
) | ` $user?.name
` | Svelte automatically subscribes/unsubscribes. |
| Derived store | `export const isLoggedIn = derived(user, $user => !!$user);` | Recomputes when source changes. |
| Custom store (read/write) | ```const createCounter = () => let count=0; return subscribe: set => { ... }, increment() count++; ; ; export const counter=createCounter();``` | Encapsulates state and logic. |
| Persisting a store (`localStorage`) | `subscribe(val=> localStorage.setItem('counter', val));` | Keeps data across sessions. |
Use‑case mapping
| When to use | Reason |
|-------------|--------|
| A simple value that many components read but never write | Use the default store or a derived store; no write logic needed. |
| Multiple components must update the same value | Create a custom store exposing `set`, `update` (or domain‑specific actions). |
| Complex state with multiple properties | Group them in an object store; expose methods to modify individual fields. |
| Domain‑specific logic (e.g., increment, toggle) | Encapsulate it inside a custom store so components only call high‑level actions. |
| Performance: want to avoid unnecessary re‑renders | Use derived stores or `get` for read‑only snapshots where possible. |
### 5.3 Practical Example – Todo List
```svelte
```
### Explanation
1. Encapsulation: The store is defined within a `
