22 PHP and jQuery patterns for reliable small applications
Build interactive PHP pages with clear boundaries between browser behavior, server validation, authentication, and stored data.
A PHP endpoint and a little browser JavaScript can support a useful application without a large client framework. The difficult parts are rarely the animation. They are validation, authorization, repeat requests, and failure states.
This new guide replaces the historical list of 22 external tutorials with 22 implementation patterns. The code fragments describe a starting point, not a complete authenticated application. A static website such as this directory does not run PHP endpoints.
Forms and validation
- Progressively enhanced forms. Give the form a real action and method before intercepting submission. A server-rendered result can remain the fallback.
- Server-side validation. Treat browser checks as convenience. Validate types, lengths, and allowed values again in PHP.
- Field-level errors. Return structured error keys so the client can associate messages with inputs instead of showing only a generic alert.
- CSRF protection. Use a framework’s established token mechanism for cookie-authenticated writes; do not invent one from a random hidden field.
- Accessible progress. Announce a concise loading state and restore controls after both success and failure.
- Idempotent operations. Protect consequential writes against retries on the server. Disabling a button is not enough.
Data and requests
- JSON responses. Set the correct content type and encode structured data with
json_encode, checking for encoding errors. - HTTP error semantics. Use appropriate response statuses rather than returning success with an error hidden inside the body.
- Prepared queries. Bind values with PDO prepared statements; never concatenate user input into SQL.
- Pagination. Limit results server-side. Define a stable order so records do not jump between pages.
- Search cancellation. Cancel or ignore outdated browser requests so an old result cannot overwrite a newer one.
- Authorization per record. Check whether the signed-in user may access the specific record, not merely whether they are signed in.
- Output escaping. Escape server-rendered HTML with the right context. For client-rendered text, use
.text()ortextContent. - Upload validation. Limit file sizes and inspect actual content. Store uploads outside executable locations, and generate safe server-side filenames.
Interface patterns
- Dependent selections. Keep a label and loading state on a select whose options depend on another field. Reset invalid selections explicitly.
- Inline editing. Preserve the original value until a save succeeds and provide a way to cancel.
- Autosave with feedback. Show when the last save completed. Handle a failed save without silently discarding changes.
- Deletion with recovery. Where appropriate, use a reversible archive operation rather than immediate permanent deletion.
- Event delegation. Bind dynamic-row actions to a stable parent; avoid registering the same listener after every refresh.
- Session expiry. Handle an expired session as a distinct state. Do not render a login page’s HTML inside a JSON results area.
- Rate limiting. Enforce limits at the server or gateway. A delayed button is not a rate limiter.
- Useful logs. Record request identifiers and actionable errors while excluding passwords, session tokens, and unnecessary personal data.
A small query example
$statement = $pdo->prepare(
'SELECT id, title FROM projects WHERE category = :category LIMIT 20'
);
$statement->execute(['category' => $category]);
$projects = $statement->fetchAll(PDO::FETCH_ASSOC);
This assumes $pdo is an established connection and $category has been validated. A prepared statement protects bound values; it does not authorize a user or safely substitute arbitrary table names. Read the PHP PDO reference for connection and error-handling details.
Keep the integration understandable
Document each endpoint’s inputs, permissions, response shape, and failure cases. Test a slow connection, an expired session, an invalid field, and a duplicate submission before polishing animations. For browser-side maintenance, continue with 26 jQuery tips.