October 2, 2026

Build an Equipment Checkout System with QR Code Scanning

Equipment checkout applications need to do more than store a list of assets. The application should prevent duplicate checkouts, show only actions that match the current asset status, record returns, flag overdue equipment, and let staff find an item quickly.

In this tutorial, we will build that workflow in PHPRunner or ASPRunner.NET and add camera-based QR code scanning. The JavaScript is the same in both products. Server events are provided in PHP and C#.

1. Creating the tables and relationships

This example uses three tables. Adjust the field types for your database if necessary.

CREATE TABLE assets (
    id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
    asset_tag VARCHAR(50) NOT NULL,
    name VARCHAR(150) NOT NULL,
    category VARCHAR(100),
    serial_number VARCHAR(100),
    location VARCHAR(150),
    status VARCHAR(30) NOT NULL DEFAULT 'Available',
    `condition` VARCHAR(30) DEFAULT 'Good',
    notes TEXT
);

CREATE TABLE employees (
    id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
    full_name VARCHAR(150) NOT NULL,
    email VARCHAR(255),
    department VARCHAR(100),
    active TINYINT NOT NULL DEFAULT 1
);

CREATE TABLE asset_checkouts (
    id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
    asset_id INT NOT NULL,
    employee_id INT NOT NULL,
    checked_out_at DATETIME,
    due_date DATE,
    returned_at DATETIME,
    condition_out VARCHAR(30),
    condition_in VARCHAR(30),
    notes TEXT
);

Add all three tables to the project. Create master-details relationships from assets.id to asset_checkouts.asset_id and from employees.id to asset_checkouts.employee_id.

Set employee_id to a Lookup wizard that displays employees.full_name. Use fixed lookup values for assets.status, assets.condition, asset_checkouts.condition_out, and asset_checkouts.condition_in.

2. Showing the active checkout on the Assets pages

Open the SQL Query for assets and use the following MySQL query. It adds the due date and employee from the most recent checkout that has not been returned.

SELECT
    a.id,
    a.asset_tag,
    a.name,
    a.category,
    a.serial_number,
    a.location,
    a.status,
    a.`condition`,
    a.notes,
    ac.due_date,
    ac.employee_id
FROM assets a
LEFT JOIN asset_checkouts ac
    ON ac.id = (
        SELECT MAX(ac2.id)
        FROM asset_checkouts ac2
        WHERE ac2.asset_id = a.id
          AND ac2.returned_at IS NULL
    )

Add due_date and employee_id to the Assets List and View pages. Configure employee_id as a Lookup wizard so the employee name is displayed.

3. Adding the Check out button

Open the Assets List page in Page Designer, switch to Advanced Grid, and add a custom button inside the grid. Set its caption to ‘Check out’ and its Item ID to checkout_button. Add the same button to the Assets View page.

Add the appropriate code to the button’s Server section.

PHP

$record = $button->getCurrentRecord();

if (!$record || $record["status"] !== "Available") {
    $result["error"] = "This equipment is no longer available.";
    return;
}

$result["asset_id"] = $record["id"];

dynamic record = button.getCurrentRecord();

if (!XVar.Pack(record) || Convert.ToString(record["status"]) != "Available")
{
    result["error"] = "This equipment is no longer available.";
    return;
}

result["asset_id"] = record["id"];

Add this JavaScript to Client After:

if (result["error"]) {
    swal(result["error"]);
    return;
}

window.popup = Runner.displayPopup({
    url: Runner.pages.getUrl("asset_checkouts", "add")
        + "?mastertable=assets&masterkey1="
        + encodeURIComponent(result["asset_id"]),
    width: 650,
    height: 700,
    header: "Check Out Equipment"
});

4. Saving a checkout

On the Asset Checkouts Add page, keep employee_id, due_date, and notes visible. The remaining values will be set on the server.

Add this code to Before record added.

PHP

$asset = $pageObject->getMasterRecord();

if (!$asset || $asset["status"] !== "Available") {
    $message = "This equipment is no longer available.";
    return false;
}

$values["asset_id"] = $asset["id"];
$values["checked_out_at"] = date("Y-m-d H:i:s");
$values["condition_out"] = $asset["condition"];
$values["returned_at"] = null;
$values["condition_in"] = null;

return true;

dynamic asset = pageObject.getMasterRecord();

if (!XVar.Pack(asset) || Convert.ToString(asset["status"]) != "Available")
{
    message = "This equipment is no longer available.";
    return false;
}

values["asset_id"] = asset["id"];
values["checked_out_at"] = DateTime.Now;
values["condition_out"] = asset["condition"];
values["returned_at"] = null;
values["condition_in"] = null;

return true;

Add this code to After record added.

PHP

DB::Update(
    "assets",
    array("status" => "Checked Out"),
    array("id" => $values["asset_id"])
);

$pageObject->stopPRG = true;
$pageObject->setProxyValue("checkoutSaved", true);

dynamic data = XVar.Array();
dynamic keyValues = XVar.Array();

data["status"] = "Checked Out";
keyValues["id"] = values["asset_id"];
DB.Update("assets", data, keyValues);

pageObject.stopPRG = true;
pageObject.setProxyValue("checkoutSaved", true);

Add this JavaScript to the Add page’s JavaScript OnLoad event:

if (proxy.checkoutSaved && window.parent && window.parent.popup) {
    window.parent.location.reload();
    window.parent.popup.close();
}

5. Adding the Return button

Add another custom button to the Assets List grid and View page. Set its caption to ‘Return’ and its Item ID to return_button.

Add the appropriate code to the button’s Server section.

PHP

$asset = $button->getCurrentRecord();

if (!$asset || $asset["status"] !== "Checked Out") {
    $result["error"] = "This equipment is not checked out.";
    return;
}

$where = DB::PrepareSQL(
    "asset_id = :1 AND returned_at IS NULL",
    $asset["id"]
);
$rs = DB::Select("asset_checkouts", $where);
$checkout = $rs->fetchAssoc();

if (!$checkout) {
    $result["error"] = "The active checkout record was not found.";
    return;
}

$result["checkout_id"] = $checkout["id"];

dynamic asset = button.getCurrentRecord();

if (!XVar.Pack(asset) || Convert.ToString(asset["status"]) != "Checked Out")
{
    result["error"] = "This equipment is not checked out.";
    return;
}

string where = DB.PrepareSQL(
    "asset_id = :1 AND returned_at IS NULL",
    asset["id"]
);
dynamic rs = DB.Select("asset_checkouts", where);
dynamic checkout = rs.fetchAssoc();

if (!XVar.Pack(checkout))
{
    result["error"] = "The active checkout record was not found.";
    return;
}

result["checkout_id"] = checkout["id"];

Add this JavaScript to Client After:

if (result["error"]) {
    swal(result["error"]);
    return;
}

window.popup = Runner.displayPopup({
    url: Runner.pages.getUrl("asset_checkouts", "edit")
        + "?editid1="
        + encodeURIComponent(result["checkout_id"]),
    width: 650,
    height: 500,
    header: "Return Equipment"
});

6. Processing the return

Use the Asset Checkouts Edit page only for returns. Keep condition_in and notes visible and remove ordinary Edit links to this table from other pages.

Add this code to Before record updated.

PHP

if (!empty($oldvalues["returned_at"])) {
    $message = "This equipment has already been returned.";
    return false;
}

$values["returned_at"] = date("Y-m-d H:i:s");
return true;

if (XVar.Pack(oldvalues["returned_at"]))
{
    message = "This equipment has already been returned.";
    return false;
}

values["returned_at"] = DateTime.Now;
return true;

Add this code to After record updated.

PHP

$status = $values["condition_in"] === "Damaged"
    ? "Maintenance"
    : "Available";

DB::Update(
    "assets",
    array(
        "status" => $status,
        "condition" => $values["condition_in"]
    ),
    array("id" => $oldvalues["asset_id"])
);

$pageObject->stopPRG = true;
$pageObject->setProxyValue("returnSaved", true);

string status = Convert.ToString(values["condition_in"]) == "Damaged"
    ? "Maintenance"
    : "Available";

dynamic data = XVar.Array();
dynamic keyValues = XVar.Array();
data["status"] = status;
data["condition"] = values["condition_in"];
keyValues["id"] = oldvalues["asset_id"];
DB.Update("assets", data, keyValues);

pageObject.stopPRG = true;
pageObject.setProxyValue("returnSaved", true);

Add this JavaScript to the Edit page’s JavaScript OnLoad event:

if (proxy.returnSaved && window.parent && window.parent.popup) {
    window.parent.location.reload();
    window.parent.popup.close();
}

7. Showing only valid actions

Open Assets List page – After record processed. Use the Item IDs assigned earlier so each row shows only the action that applies to its current status.

PHP

if ($data["status"] !== "Available") {
    $pageObject->hideItem("checkout_button", $recordId);
}

if ($data["status"] !== "Checked Out") {
    $pageObject->hideItem("return_button", $recordId);
}

if (
    !empty($data["due_date"])
    && strtotime($data["due_date"]) < strtotime(date("Y-m-d"))
) {
    $record["css"] = "background: #ffdddd;";
}
[/php]
<p><strong>C#</strong></p>
[code]
if (Convert.ToString(data["status"]) != "Available")
{
    pageObject.hideItem("checkout_button", recordId);
}

if (Convert.ToString(data["status"]) != "Checked Out")
{
    pageObject.hideItem("return_button", recordId);
}

DateTime dueDate;
if (
    DateTime.TryParse(Convert.ToString(data["due_date"]), out dueDate)
    && dueDate.Date < DateTime.Today
)
{
    record["css"] = "background: #ffdddd;";
}
[/code]
<p>On <strong>Assets View page - Before display</strong>, hide the buttons without a record ID.</p>
<p><strong>PHP</strong></p>
[php]
$asset = $pageObject->getCurrentRecord();

if ($asset["status"] !== "Available") {
    $pageObject->hideItem("checkout_button");
}

if ($asset["status"] !== "Checked Out") {
    $pageObject->hideItem("return_button");
}

dynamic asset = pageObject.getCurrentRecord();

if (Convert.ToString(asset["status"]) != "Available")
{
    pageObject.hideItem("checkout_button");
}

if (Convert.ToString(asset["status"]) != "Checked Out")
{
    pageObject.hideItem("return_button");
}

8. Adding camera-based QR scanning

Create QR labels whose encoded value is the corresponding asset_tag. The scanner only needs that value, so the labels can be produced by the application or by a separate label-printing tool.

Add a custom button above the Assets List grid. Set its caption to ‘Scan QR’ and its Item ID to scan_qr_button. Add the following JavaScript to Client Before. The script loads the html5-qrcode library when it is first needed.

function openAssetScanner() {
    var scanner;
    var matched = false;
    var closing = false;

    Runner.displayPopup({
        html: '<div id="asset_qr_reader" style="width:100%;"></div>',
        width: 600,
        height: 650,
        header: "Scan Equipment Label",

        afterCreate: function(popup) {
            scanner = new Html5QrcodeScanner(
                "asset_qr_reader",
                {
                    fps: 10,
                    qrbox: { width: 250, height: 250 },
                    formatsToSupport: [
                        Html5QrcodeSupportedFormats.QR_CODE
                    ],
                    supportedScanTypes: [
                        Html5QrcodeScanType.SCAN_TYPE_CAMERA
                    ]
                },
                false
            );

            scanner.render(function(decodedText) {
                if (matched || closing) {
                    return;
                }

                matched = true;
                params["asset_tag"] = decodedText.trim();
                popup.close();
            });
        },

        beforeClose: function(popup) {
            if (closing) {
                return true;
            }

            closing = true;

            scanner.clear().then(function() {
                popup.close();

                if (matched) {
                    ajax.submit();
                }
            }).catch(function() {
                closing = false;
                matched = false;
                swal("Stop scanning before closing the window.");
            });

            return false;
        }
    });
}

if (window.Html5QrcodeScanner) {
    openAssetScanner();
} else {
    $.getScript(
        "https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"
    ).done(openAssetScanner).fail(function() {
        swal("The QR scanner library could not be loaded.");
    });
}

return false;

Add the appropriate lookup code to the button’s Server section.

PHP

$tag = trim((string)$params["asset_tag"]);
$rs = DB::Select("assets", array("asset_tag" => $tag));
$asset = $rs->fetchAssoc();

if (!$asset) {
    $result["error"] = "No equipment matches this QR code.";
    return;
}

$result["asset_id"] = $asset["id"];

string tag = Convert.ToString(parameters["asset_tag"]).Trim();
dynamic values = XVar.Array();
values["asset_tag"] = tag;

dynamic rs = DB.Select("assets", values);
dynamic asset = rs.fetchAssoc();

if (!XVar.Pack(asset))
{
    result["error"] = "No equipment matches this QR code.";
    return;
}

result["asset_id"] = asset["id"];

Add this JavaScript to Client After:

if (result["error"]) {
    swal(result["error"]);
    return;
}

location.href = Runner.pages.getUrl("assets", "view")
    + "?editid1="
    + encodeURIComponent(result["asset_id"]);

Camera access normally requires HTTPS, except during local development. Rebuild the project, open the Assets List page on a phone or laptop with a camera, scan an asset label, and confirm that the correct View page opens. Then test checkout, return, damaged-item handling, conditional buttons, and overdue highlighting.

Build an Equipment Checkout System with QR Code Scanning

1. Creating the tables and relationships

2. Showing the active checkout on the Assets pages

3. Adding the Check out button

4. Saving a checkout

5. Adding the Return button

6. Processing the return

7. Showing only valid actions

8. Adding camera-based QR scanning

Leave a Reply

Sign up for the free email newsletter for news about our
database publishing software, tips, and more.

Resources

Company

1. Creating the tables and relationships

2. Showing the active checkout on the Assets pages

3. Adding the Check out button

4. Saving a checkout

5. Adding the Return button

6. Processing the return

7. Showing only valid actions

8. Adding camera-based QR scanning

Related posts:

Leave a Reply