Chapter 16: Asset Management & Caching Strategies

Introduction: Managing Your Application's Assets

In a modern web application, "assets" are more than just your CSS and JavaScript files. They also include a critical and often complex category: user-generated content. For sites like ours, this means the images, videos, and documents that users upload to accompany their posta. Managing these assets effectively is crucial for performance, security, and maintainability. This chapter provides a complete guide to our application's asset management strategy, from secure uploading to efficient delivery.

---

Case Study: Building a Secure File Uploader

The most complex asset management task in our application is handling user file uploads. This is a multi-stage process that involves a front-end interface built with JavaScript, a secure back-end PHP script to process the files, and a robust database layer to store the metadata.

The Front-End: HTML & JavaScript

The user interface for our file uploader is built from three key HTML components: the main <form>, a <template> for displaying existing files, and a <template> for previewing new files. Using the <template> tag is a modern approach that allows our JavaScript to efficiently clone these structures as needed. All of the client-side interactivity is handled by a single block of vanilla JavaScript, which is responsible for displaying existing files, handling new file selections (including validation), and sending the uploads to the server via an asynchronous AJAX request.

The Back-End: The PHP Upload Handler

The JavaScript sends the files and metadata to a dedicated PHP script that acts as our upload endpoint. This script is responsible for security, validation, and processing.

1. Security: The script first validates the formToken to prevent CSRF attacks and checks user permissions to ensure the logged-in user has the authority to upload files to the specified advert.
2. File Processing: For each valid file, the script generates a unique fileHash (a UUID), creates a dedicated directory, and moves the uploaded file to its permanent location. If the file is an image, it uses the GD library to create several resized, optimised .webp versions.
3. Database Interaction: Once the file is processed, the script calls a stored procedure (files_insertRecord) to save the file's metadata to the database and then calls another procedure to update the JSON array in the main advret table.
4. The JSON Response: Finally, the script sends a JSON response back to the browser, which the JavaScript uses to update the UI.

The Secure Gateway (fetchFile.php)

A critical security principle is to never expose your internal file structure to the public. A far more secure approach is to use a PHP "gateway" script to serve files. This script takes a public-facing fileHash as a parameter, uses a stored procedure to look up the file's real location on the server, and then securely outputs the file's contents with the correct HTTP headers. This acts as a secure proxy, completely hiding your server's internal filesystem from the user's browser.

---

Caching Strategies

Caching is one of the most effective ways to improve an application's performance. Our unified application uses caching at the browser level for static assets like CSS, JavaScript, and images. We achieve this in our Apache Virtual Host configuration using the mod_expires module. This module adds an Expires HTTP header to the response for certain file types, telling the user's browser how long it should keep a local copy of the file before requesting it again.

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 5 days"
    ExpiresByType image/jpeg "access plus 60 days"
    ExpiresByType text/css "access plus 1 day"
</IfModule>

Conclusion: A Complete Asset Strategy

A professional application requires a professional strategy for managing its assets. By combining a secure, asynchronous file uploader for user-generated content with a robust browser-caching strategy for static files, we have created a system that is both secure and performant. The case study in this chapter demonstrated a complete, end-to-end workflow that gives you full control over the entire lifecycle of a user-uploaded file.