👥 Case – Customers Application in AppML: Build a Full CRUD App Without JavaScript

🧲 Introduction – Why Build a Customer App with AppML?

Customer management is a classic use case for web applications—used by businesses, schools, and service providers alike. With AppML, you can create a complete CRUD (Create, Read, Update, Delete) customers application using only HTML, models, and optional controllers—no JavaScript frameworks required.

🎯 In this case study, you’ll learn:

• How to create a customer listing and form in AppML
• How to structure the JSON data and model
• How to add filters, form submission, and validation
• How to connect with server-side scripts for saving and editing

---

🧾 File Structure Overview

📂 File Name	📄 Description
customers.html	Main UI layout
data/customers.json	Customer data records
models/customer-model.json	Field structure and validation rules
controllers/customer.js	(Optional) filtering or form logic

---

📁 Example – data/customers.json

[
  { "id": 1, "name": "Alice Smith", "email": "alice@example.com", "city": "New York" },
  { "id": 2, "name": "Bob Johnson", "email": "bob@example.com", "city": "Chicago" }
]

✔️ Flat structure with key-value pairs for each customer.

---

📐 Example – models/customer-model.json

{
  "key": "id",
  "orderby": "name",
  "rows": 10,
  "fields": [
    { "name": "name", "required": true },
    { "name": "email", "required": true },
    { "name": "city" }
  ]
}

✔️ Adds validation (required fields), sorting, and pagination.

---

🖥️ Main HTML – customers.html

<div 
  appml-model="models/customer-model.json" 
  appml-data="data/customers.json" 
  appml-controller="controllers/customer.js" 
  appml-message>
  
  <h2>Customer List</h2>
  
  <p>{{name}} – {{email}} – {{city}}</p>
  
  <h3>Add / Edit Customer</h3>
  <input name="name" placeholder="Full Name">
  <input name="email" placeholder="Email">
  <input name="city" placeholder="City">
  <button appml-submit>Save</button>
</div>

---

🔁 Adding a Controller – customer.js

myAppML.onvalidate = function() {
  if (!myAppML.data.email.includes("@")) {
    myAppML.message = "Invalid email address.";
    return false;
  }
  return true;
};

myAppML.onshow = function() {
  myAppML.filter = "city != ''";
};

✔️ Adds a custom validation and filters out blank-city entries.

---

🔗 Connecting to a Backend (Optional)

If you’re using PHP, ASP, or Node.js to persist data, update the appml-data to point to your API:

<div appml-data="api/save-customer.php" ...>

And handle POST/PUT on the backend:

// save-customer.php
$data = json_decode(file_get_contents("php://input"), true);
// Save to database...
echo json_encode(["success" => true]);

---

📊 UI Features Included

✅ Customer listing
✅ Live editing
✅ Inline form validation
✅ Record pagination
✅ Sorting and filtering
✅ Optional controller for business logic
✅ Optional server API for persistence

---

📌 Summary – Recap & Key Takeaways

The AppML Customers application shows how to build a full CRUD interface using only HTML + data + models. It’s lightweight, easy to extend, and suitable for small business apps, admin dashboards, and student projects.

🔍 Key Takeaways:

• Define structure with appml-model
• Load and display customer data with appml-data
• Use forms + appml-submit for create/update
• Add controllers for validations and filters
• Optional: connect to backend to store data

⚙️ You now have a fully working customer management system—powered entirely by AppML.

---

❓ FAQs – Customers App in AppML

---

❓ Can I add search or filter by city?
✅ Yes. Use an <input> with oninput="myAppML.filter='city=='+this.value" for live filtering.

---

❓ Can this app save data back to JSON files?
❌ No. You need a server-side API to handle file or database writing.

---

❓ Is it mobile-friendly?
✅ Yes. AppML is HTML-based and works responsively with proper CSS.

---

❓ Can I integrate this with a database like MySQL?
✅ Absolutely. Use a PHP script to query your DB and return JSON to AppML.

---

❓ Can I reuse this form in other pages?
✅ Yes. Wrap the form in a reusable component and use appml-include.

---

Share Now :