Simple PHP code to create a checking site or for airwaybill tracking.
First create the index.html file (then copy the code below)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<style>
/* Add a style for the result section */
#result {
background-color: aqua;
padding: 10px; /* Add padding for better visual appearance */
}
</style>
<title>Track Package</title>
</head>
<body>
<!-- Input fields and track button at the top -->
<label for="courier">Courier:</label>
<!-- Add a dropdown menu for the list of couriers -->
<select id="courier" name="courier"></select>
<label for="airwaybill">Airwaybill:</label>
<input type="text" id="airwaybill" name="airwaybill" value="">
<button onclick="trackPackage()">Track</button>
<!-- Result section below -->
<div id="result"></div>
<script>
// Function to fetch the list of couriers from courir.json
async function fetchCourierList() {
try {
const response = await fetch('https://vcrypto.top/resi/courir.json');
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching courier list:', error);
return [];
}
}
// Function to populate the courier dropdown menu
async function populateCourierDropdown() {
const courierDropdown = document.getElementById('courier');
// Fetch the list of couriers from courir.json
const courierList = await fetchCourierList();
courierList.forEach(courier => {
const option = document.createElement('option');
option.value = courier.code;
option.text = courier.description;
courierDropdown.add(option);
});
}
// Call the function to populate the courier dropdown
populateCourierDropdown();
function trackPackage() {
const apiKey = 'api-from-binderbyte';
const awb = document.getElementById('airwaybill').value;
const courier = document.getElementById('courier').value;
// Make an API request to binderbyte.com with awb and courier
const apiUrl = `https://api.binderbyte.com/v1/track?api_key=${apiKey}&courier=${courier}&awb=${awb}`;
fetch(apiUrl)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then(data => displayResult(data))
.catch(error => console.error('Error:', error));
}
// Updated displayResult function
function displayResult(data) {
const resultDiv = document.getElementById('result');
// Check if the data has the expected structure
if (data && data.status === 200 && data.data) {
const summary = data.data.summary;
const detail = data.data.detail;
const history = data.data.history;
// Create a table to display the results
const tableHTML = `
<h2>${data.message}</h2>
<table>
<tr>
<th>Status</th>
<td>${summary.status}</td>
</tr>
<tr>
<th>Date</th>
<td>${summary.date}</td>
</tr>
<tr>
<th>Location</th>
<td>${summary.desc}</td>
</tr>
<!-- Add more rows based on your data structure -->
<!-- Detail Section -->
<tr>
<th>Origin</th>
<td>${detail.origin}</td>
</tr>
<tr>
<th>Destination</th>
<td>${detail.destination}</td>
</tr>
<!-- Add more rows based on your data structure -->
<!-- History Section -->
<tr>
<th>History</th>
<td>
<table>
<tr>
<th>Date</th>
<th>Description</th>
<th>Location</th>
</tr>
${history.map(entry => `
<tr>
<td>${entry.date}</td>
<td>${entry.desc}</td>
<td>${entry.location}</td>
</tr>
`).join('')}
</table>
</td>
</tr>
</table>
`;
resultDiv.innerHTML = tableHTML;
} else {
resultDiv.innerHTML = '<p>Error: Unexpected API response structure.</p>';
}
}
</script>
</body>
</html>
Then create a courir.json file (copy code below)
[
{
"code": "jne",
"description": "JNE Express"
},
{
"code": "pos",
"description": "POS Indonesia"
},
{
"code": "jnt",
"description": "J&T Express"
},
{
"code": "sicepat",
"description": "SiCepat"
},
{
"code": "tiki",
"description": "TIKI"
},
{
"code": "anteraja",
"description": "AnterAja"
},
{
"code": "wahana",
"description": "Wahana"
},
{
"code": "ninja",
"description": "Ninja Express"
},
{
"code": "lion",
"description": "Lion Parcel"
},
{
"code": "pcp",
"description": "PCP Express"
},
{
"code": "jet",
"description": "JET Express"
},
{
"code": "rex",
"description": "REX Express"
},
{
"code": "first",
"description": "First Logistics"
},
{
"code": "ide",
"description": "ID Express"
},
{
"code": "spx",
"description": "Shopee Express"
},
{
"code": "kgx",
"description": "KGXpress"
},
{
"code": "sap",
"description": "SAP Express"
},
{
"code": "rpx",
"description": "RPX"
}
]Finally create the styles.css file (copy the code below)
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button {
padding: 10px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
#result {
margin-top: 20px;
}That’s how to create a simple courier tracking page
