xian-ph-address
v1.0.2
Published
This guide explains how to use the **[xian-ph-address](https://www.npmjs.com/package/xian-ph-address)** package in an XianFires project with controllers, routes, and Handlebars templates to build cascading dropdowns (`Region → Province → City → Barangay`)
Readme
📍 xian-ph-address Integration Guide
This guide explains how to use the xian-ph-address package in an XianFires project with controllers, routes, and Handlebars templates to build cascading dropdowns (Region → Province → City → Barangay) for PH address.
🚀 Installation
npm install xian-ph-address📂 Project Structure
Example structure:
project/
├── controllers/
│ └── addresscontroller.js
├── routes/
│ └── routes.js
├── views/
│ └── index.xian # your template file
├── index.js # Xianfires Entry point⚙️ Controller (controllers/addresscontroller.js)
import { getRegions, getProvinces, getCities, getBarangays } from "xian-ph-address";
const addresscontroller = {
index: async (req, res) => {
res.send("Index Page");
},
regions: async (req, res) => {
res.render("index", { regions: getRegions() });
}
};
export { addresscontroller };🛣️ Routes (routes/routes.js)
import express from "express";
import { getRegions, getProvinces, getCities, getBarangays } from "xian-ph-address";
import { addresscontroller } from "../controllers/addresscontroller.js";
const router = express.Router();
// Render main page with regions
router.get("/", addresscontroller.regions);
// API endpoints for dependent dropdowns
router.get("/provinces/:regionCode", (req, res) => {
res.json(getProvinces(req.params.regionCode));
});
router.get("/cities/:provinceCode", (req, res) => {
res.json(getCities(req.params.provinceCode));
});
router.get("/barangays/:cityCode", (req, res) => {
res.json(getBarangays(req.params.cityCode));
});
export default router;🎨 View Template (views/index.xian)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PH Address Selector</title>
</head>
<body>
<h2>Select Address</h2>
<label>Region</label>
<select id="region">
<option value="">-- Select Region --</option>
{{#each regions}}
<option value="{{ region_code }}">{{ region_name }}</option>
{{/each}}
</select>
<label>Province</label>
<select id="province"><option value="">-- Select Province --</option></select>
<label>City</label>
<select id="city"><option value="">-- Select City --</option></select>
<label>Barangay</label>
<select id="barangay"><option value="">-- Select Barangay --</option></select>
<script>
const regionEl = document.getElementById("region");
const provinceEl = document.getElementById("province");
const cityEl = document.getElementById("city");
const barangayEl = document.getElementById("barangay");
regionEl.addEventListener("change", async () => {
provinceEl.innerHTML = "<option>-- Select Province --</option>";
cityEl.innerHTML = "<option>-- Select City --</option>";
barangayEl.innerHTML = "<option>-- Select Barangay --</option>";
if (!regionEl.value) return;
const res = await fetch(`/provinces/${regionEl.value}`);
const provinces = await res.json();
provinces.forEach(p => provinceEl.add(new Option(p.province_name, p.province_code)));
});
provinceEl.addEventListener("change", async () => {
cityEl.innerHTML = "<option>-- Select City --</option>";
barangayEl.innerHTML = "<option>-- Select Barangay --</option>";
if (!provinceEl.value) return;
const res = await fetch(`/cities/${provinceEl.value}`);
const cities = await res.json();
cities.forEach(c => cityEl.add(new Option(c.city_name, c.city_code)));
});
cityEl.addEventListener("change", async () => {
barangayEl.innerHTML = "<option>-- Select Barangay --</option>";
if (!cityEl.value) return;
const res = await fetch(`/barangays/${cityEl.value}`);
const barangays = await res.json();
barangays.forEach(b => barangayEl.add(new Option(b.brgy_name, b.brgy_code)));
});
</script>
</body>
</html>🖥️ Usage
Start your server:
npm run devor
node app.jsVisit: 👉 http://localhost:3000
Select Region → Province → City → Barangay from the cascading dropdowns.