Advanced concepts in Server-Side Processing, Database Integration, and Responsive User Interfaces.

Design Evidence

Wireframe Components
  • Visual Layout: Position of headers, footers, content.
  • Navigation: Links, menus, and breadcrumbs.
  • Consistency: Repeated elements across pages.
  • Underlying Processes: Annotations for DB queries, redirects, or session checks.
Low-Fidelity Prototype

A physical or digital mock-up used for user testing. Focuses on flow and usability before final coding.

Responsive CSS

Media Queries
@media screen and (max-width: 600px) {
  /* Styles for small screens only */
  .column { width: 100%; }
}

@media print {
  /* Styles for printed output only */
  nav { display: none; }
}
How and when is it triggered?
  • Media Type: screen → Triggered when viewing the site on a digital display (Phone, Tablet, Desktop).
  • Media Type: print → Triggered specifically when the user clicks Print or views Print Preview.
  • Media Feature: max-width → A conditional check. Styles apply IF the browser window is smaller than or equal to the specified width.

Example: max-width: 600px triggers styles when the screen size drops to 600px or below.

Logic Design

Structure Diagrams

Hierarchy of server-side tasks (e.g., Check Session -> Connect DB -> Query -> Format).

Pseudocode Refinement
1. Connect to DB server
2. IF connection fails THEN exit
3. Sanitize inputs from $_POST
4. Create SQL string
5. Execute query
6. WHILE rows exist DO
   Format row into <table>
7. Close connection

HTML Forms

Form attributes
<form action="auth.php" method="post">
 <input name="user" value="">
 <select name="role">...</select>
 <textarea name="bio"></textarea>
</form>

GET: URL params (visible). POST: Body (secure/large).

Tables
<table>
 <tr>
  <th>Head</th><td>Data</td>
 </tr>
</table>

Variables & Sessions

Variable Persistence Security
$_GET Page 1 → 2 Low
$_POST Page 1 → 2 Med
$_SESSION Unlimited Pages High
The 2-Page Limit:
GET/POST take form data to a second page. To keep that data alive for a third page (e.g. login status), you must assign it to a Session variable.
Multi-page Logic & Logout
# auth.php (Page 2)
session_start();
$user = $_POST['u'];
if ($valid) $_SESSION['id'] = $user;

# logout.php (Termination)
session_start();
session_destroy(); // Ends session
header("Location: login.php");

Execute SQL

mysqli_query
$sql = "SELECT * FROM users";
$result = mysqli_query($conn, $sql);

if (!$result) {
  die("Query Failed");
}

Validation: Use mysqli_num_rows($result) to check if data was found (e.g. for logins).

Database Lifecycle

1. Connect
$conn = mysqli_connect(
 "localhost", "root",
 "pass", "my_db"
) or die("Error");
2. Close
// Release resources
mysqli_close($conn);

Display Data

while ($row = mysqli_fetch_array($res)) {
  echo "<tr>";
  echo "<td>" . $row['name'] . "</td>";
  echo "</tr>";
}
mysqli_num_rows($res) returns the total count of records returned by the query.