23 Apr 2023 Tutorial Update

Author: code-boxx

tutorial/assets/PAGE-items.js

@@ -0,0 +1,53 @@
+// (A) HELPER - CALL API
+function ajax (mod, act, data, after) {
+  // (A1) FORM DATA
+  let form = new FormData();
+  if (data) {
+    for (let [k,v] of Object.entries(data)) { form.append(k, v); }
+  }
+
+  // (A2) AJAX FETCH
+  fetch(`${cbhost.api}${mod}/${act}`, { method:"POST", body:form })
+  .then(res => res.json())
+  .then(res => {
+    if (res.status) { after(res.data); }
+    else { alert(res.message); }
+  })
+  .catch(err => console.error(err));
+}
+
+// (B) GET ALL - DRAW HTML LIST
+function list () {
+  ajax("items", "getAll", null, data => { if (data != null) {
+    let wrap = document.getElementById("iList");
+    wrap.innerHTML = "";
+    for (let [i,n] of Object.entries(data)) {
+      let row = document.createElement("li");
+      row.className = "list-item";
+      row.innerHTML = `<form class="d-flex mb-2" onsubmit="return update(${i});">
+        <input type="button" class="btn btn-danger me-1" value="Del" onclick="del(${i})">
+        <input class="form-control me-1" type="text" id="iItem${i}" value="${n}" required>
+        <input class="btn btn-primary" type="submit" value="Save">
+      </form>`;
+      wrap.appendChild(row);
+    }
+  }});
+}
+
+// (C) ADD ITEM
+function add () {
+  ajax("items", "save", { name: document.getElementById("iAdd").value }, list);
+  return false;
+}
+
+// (D) UPDATE ITEM
+function update (id) {
+  ajax("items", "save", { name: document.getElementById("iItem"+id).value, id: id }, list);
+  return false;
+}
+
+// (C) DELETE ITEM
+function del (id) {
+  ajax("items", "del", { id: id }, list);
+}
+window.addEventListener("load", list);

tutorial/assets/content.js

@@ -0,0 +1,10 @@
+<?php
+// (A) API ENDPOINTS
+$_CORE->autoAPI([
+  "getAll" => ["Items", "getAll"],
+  "save" => ["Items", "save"],
+  "del" => ["Items", "del"]
+]);
+
+// (B) INVALID REQUEST
+$_CORE->respond(0, "Invalid request", null, null, 400);

tutorial/lib/API-content.php

@@ -0,0 +1,26 @@
+<?php
+class Items extends Core {
+  // (A) GET ALL ITEMS
+  function getAll () {
+    return $this->DB->fetchKV(
+      "SELECT * FROM `items`", null, "item_id", "item_name"
+    );
+  }
+
+  // (B) SAVE ITEM
+  function save ($name, $id=null) : void {
+    // (B1) DATA SETUP
+    $fields = ["item_name"];
+    $data = [$name];
+    if ($id!=null) { $data[] = $id; }
+
+    // (B2) INSERT OR UPDATE
+    if ($id==null) { $this->DB->insert("items", $fields, $data); }
+    else { $this->DB->update("items", $fields, "`item_id`=?", $data); }
+  }
+
+  // (C) DELETE ITEM
+  function del ($id) : void {
+    $this->DB->delete("items", "`item_id`=?", [$id]);
+  }
+}

tutorial/lib/API-items.php

@@ -0,0 +1,5 @@
+CREATE TABLE `items` (
+  `item_id` bigint(20) NOT NULL AUTO_INCREMENT,
+  `item_name` varchar(255) NOT NULL,
+  PRIMARY KEY (`item_id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

tutorial/lib/LIB-Content.php

@@ -0,0 +1,22 @@
+<?php
+// (A) PAGE META DATA & SCRIPTS
+$_PMETA = [
+  "title" => "Core Boxx Tutorial Page",
+  "load" => [
+    ["s", HOST_ASSETS . "PAGE-items.js", "defer"]
+    //,["s", HOST_ASSETS . "more.js"]
+    //,["c", HOST_ASSETS . "my.css"]
+  ]
+];
+
+// (B) HTML PAGE
+require PATH_PAGES . "TEMPLATE-top.php"; ?>
+<!-- (B1) ADD ITEM -->
+<form class="d-flex mb-4" onsubmit="return add()">
+  <input type="text" class="form-control me-1" required id="iAdd">
+  <input type="submit" class="btn btn-primary" value="Add">
+</form>
+
+<!-- (B2) LIST ITEMS -->
+<ul id="iList" class="list-group"></ul>
+<?php require PATH_PAGES . "TEMPLATE-bottom.php"; ?>