Advanced Search
Search Results
89 total results found
Calculating Summary Statistics
Statistics reduce a dataset to information users can interpret. SELECT COUNT(*) AS result_count, COUNT(DISTINCT team_name) AS team_count, SUM(wins) AS total_wins, AVG(wins) AS average_wins, MAX(wins) AS highest_wins FROM team_results; Choose statisti...
Creating Match and Player Views
A detail view lets a user move from a summary to the record needed for a task. Receive a validated identifier $matchId = trim($_GET["match_id"] ?? ""); if ($matchId === "" || mb_strlen($matchId) > 20) { exit("Invalid match."); } $stmt = $pdo->prepare( "S...
Creating Charts from Processed SQL Data
A chart is useful only when it makes a comparison or pattern easier to understand. JavaScript is a supporting technology; the assessed reasoning lies in the data choice, processing and justified output. Prepare data in PHP $labels = array_column($rows, "team_n...
Exporting Processed Data to CSV
CSV export can support download and reuse of a filtered or processed result. It is optional when import already satisfies the data-transfer requirement, but can be valuable for a justified user need. Send download headers header("Content-Type: text/csv; charse...
Connecting a CSS Stylesheet
CSS controls presentation while HTML provides structure. Connect the file Create css/style.css, then add this inside the page’s <head>: <link rel="stylesheet" href="css/style.css"> A relative path is interpreted from the current page. A PHP page in a subfold...
CSS Selectors, Classes and Reusable Rules
Selectors identify the HTML elements a rule styles. body { margin: 0; } h1 { color: #123f73; } .card { border: 1px solid #cbd5e1; } #main-search { max-width: 40rem; } nav a:hover, nav a:focus-visible { text-decoration: underline; } Use element selectors for br...
CSS Box Model and Spacing
Every element is a box made from content, padding, border and margin. *, *::before, *::after { box-sizing: border-box; } .card { max-width: 42rem; padding: 1rem; border: 1px solid #cbd5e1; margin-block: 1rem; } With border-box, declared width includ...
Responsive Layouts with Flexbox and Grid
Responsive layouts adapt to available space rather than one device size. Flexbox navigation .navigation { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } Grid cards .card-grid { display: grid; grid-template-columns: repeat(auto...
Accessible Colour, Typography and Focus
Accessible styling supports perception, reading and keyboard use. body { color: #1f2933; background: #ffffff; font-family: system-ui, sans-serif; line-height: 1.6; } a { color: #075985; } :focus-visible { outline: 3px solid #f59e0b; outline-offset:...
Styling Forms and Validation Messages
Form styling should make labels, controls, instructions and errors easy to identify. .form-group { display: grid; gap: 0.35rem; margin-block: 1rem; } input, select, button { font: inherit; min-height: 2.75rem; } input { border: 1px solid #64748b; ...
Styling Tables, Navigation and Data Displays
Data interfaces should prioritise interpretation over decoration. .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: 0.65rem; border: 1px solid #cbd5e1; text-align: left; } th { background: #123f73; ...
Connecting JavaScript and Selecting Elements
JavaScript can add interaction to an HTML interface. Keep the page usable when supporting scripts fail. Connect a script Place this before the closing body tag: <script src="js/app.js"></script> Or use defer in the page head: <script src="js/app.js" defer></...
Handling Events and User Input
Events allow a script to respond to user actions. <label for="team-filter">Filter teams</label> <input id="team-filter" type="search"> <p id="filter-status" role="status"></p> const filter = document.querySelector("#team-filter"); const status = document.query...
Filtering and Sorting Displayed Data
Client-side filtering can help users explore data already present in the browser. Database filtering remains preferable for large or permission-sensitive datasets. const rows = [...document.querySelectorAll("[data-team-row]")]; const search = document.querySel...
Updating Interfaces Accessibly
Dynamic interfaces must communicate changes without removing keyboard access or context. Status message <p id="save-status" role="status" aria-live="polite"></p> const status = document.querySelector("#save-status"); status.textContent = "Changes saved."; Use ...
Presenting PHP Data with JavaScript Charts
PHP can query and process database data, then pass a small prepared result to JavaScript for presentation. <?php $labels = array_column($rows, "team_name"); $points = array_map("intval", array_column($rows, "points")); ?> <script> const labels = <?= json_encod...