Applied Cryptography (CY-603 (B)) - Unit 4 Short Notes

UNIT 4: Web Technologies & Server-Side Programming

I. HTML: Structure, Elements, and Forms

A. Fundamentals of HTML

• HTML (HyperText Markup Language) is the standard language for creating web pages and web applications.

• Page Layout & Document Structure: Uses semantic elements to define parts of a page.

  • <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>.

• Hyperlinking: The <a> (anchor) tag creates links.

  • Key attribute: href (Hypertext Reference) specifies the URL.

  • target attribute controls where the link opens: _self (same tab), _blank (new tab), _parent, _top.

B. HTML Elements and Grouping

• Types of Lists:

  • Ordered List (<ol>): Numbered items. Use type attribute (1, A, a, I, i) and start.

  • Unordered List (<ul>): Bulleted items. Use type (disc, circle, square).

  • Definition List (<dl>): Pairs of terms (<dt>) and descriptions (<dd>).

• Forms (<form>): Container for user input elements. Attributes: action (submission URL), method (GET/POST).

• Form Fields/Input Types:

  • <input type="text">: Single-line text.

  • <input type="password">: Masked text.

  • <input type="radio">: Single choice from options (same name).

  • <input type="checkbox">: Multiple selections.

  • <input type="submit">: Submits form.

  • <input type="reset">: Clears form.

  • <select> & <option>: Dropdown list.

  • <textarea>: Multi-line text.

C. HTML vs. XHTML

[!TIP] XHTML is essentially HTML rewritten in XML syntax. Modern HTML5 is more forgiving and widely used.

II. CSS: Presentation and Styling

• CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation (layout, colors, fonts) of a document written in HTML or XML.

• Core Concept: Separates content (HTML) from presentation (CSS).

• Advantages:

  1. Separation of Concerns: Cleaner, more maintainable code.

  2. Centralized Styling: One CSS file can style multiple HTML pages.

  3. Consistency: Ensures uniform look across the website.

  4. Maintainability: Change styles globally by editing one file.

  5. Accessibility: Allows different styles for different devices (media queries).

  6. Bandwidth Efficiency: CSS files are cached, reducing page load size after first visit.

III. JavaScript: Client-Side Interactivity

Form Objects and Validation

• Radio Buttons (<input type="radio">):

  • Property: checked (boolean, true if selected), value (submitted value).

  • Event: onclick or onchange to detect selection.

  • Grouped by same name attribute; only one can be selected.

• Check Boxes (<input type="checkbox">):

  • Property: checked (boolean), value.

  • Event: onclick or onchange.

  • Multiple checkboxes with same name can be selected.

• Validation: JavaScript can validate form data before submission (e.g., check empty fields, format) using DOM properties like document.getElementById().

IV. Web Protocols and Data Exchange Standards

A. HTTP (Hypertext Transfer Protocol)

• What is HTTP? An application-layer protocol for client-server communication on the web. It is stateless (each request is independent).

• Utility: Defines how messages are formatted/transmitted and what actions web servers/browsers should take in response to commands.

• HTTP Methods (Verbs):

  | Method | Purpose / Use Case | Idempotent? | Safe? | | :--- | :--- | :--- | :--- | | GET | Retrieve data from server. Parameters in URL. | Yes | Yes | | POST | Submit data to server (e.g., form). Parameters in body. | No | No | | PUT | Update/replace a resource at a specific URL. | Yes | No | | DELETE | Remove a resource. | Yes | No | | HEAD | Same as GET but retrieves only headers (no body). | Yes | Yes |

B. XML (Extensible Markup Language)

• What is XML? A meta-markup language for structuring, storing, and transporting data in a platform-independent, text-based format.

• Attributes (Key Features):

  1. Well-formedness: Strict syntax rules (proper nesting, case-sensitive tags, quoted attributes, single root element).

  2. Self-descriptive: Tags describe the data meaning (e.g., <price>).

  3. Extensibility: Users can define their own tags and structure.

  4. Platform Independence: Plain text format works on any OS.

  5. Separation of Data and Presentation: Data is stored in XML; presentation (display) is handled by XSLT or other tools.

C. Document Object Model (DOM)

• Concept: A platform- and language-neutral interface that represents an HTML/XML document as a tree structure of nodes (objects).

  • Nodes: Document, Element, Attribute, Text, Comment, etc.

• Role: Provides a programmatic way (via JavaScript) to dynamically access, modify, add, or delete elements and content on a web page after it has loaded. It is the API that makes web pages interactive.

D. XSLT (Extensible Stylesheet Language Transformations)

• Purpose: To transform an XML document into another format (e.g., HTML, plain text, or a different XML structure).

• Basic Concept: Uses an XSLT stylesheet (an XML file) containing templates (rules) that match elements in the source XML and specify how to transform them.

• Process: An XSLT processor takes the source XML and the XSLT stylesheet as input and produces the transformed output document.

V. PHP: Server-Side Scripting and Database Connectivity

A. PHP Language Fundamentals

• Loop Statements:

  • for (init; condition; increment) { ... }

  • while (condition) { ... } // checks condition first

  • do { ... } while (condition); // executes at least once

• Object-Oriented Programming (OOP) in PHP:

  • Class: Blueprint/template (class Car { ... }).

  • Object: Instance of a class ($myCar = new Car();).

  • Property: Variable inside a class (public $color;).

  • Method: Function inside a class (public function drive() { ... }).

  • Inheritance: A class (Child) can extend another (Parent) using extends, inheriting its properties/methods.

• File Handling:

  • Concept: A file is a named collection of data stored on disk.

  • Creating/Opening: fopen("filename.txt", "mode").

    • Modes: "w" (write, creates/truncates), "a" (append), "x" (create only), "r" (read).

  • Writing: fwrite($file_handle, "Data to write");.

  • Closing: fclose($file_handle);.

B. PHP and MySQL Integration

• Database Connectivity (using mysqli procedural style):

  
  $conn = mysqli_connect("localhost", "username", "password", "database_name");
  
  if (!$conn) { die("Connection failed: " . mysqli_connect_error()); }
  
  

  • Using PDO (recommended for multiple DB types):

  
  try {
  
      $pdo = new PDO("mysql:host=localhost;dbname=database_name", "username", "password");
  
      $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  
  } catch(PDOException $e) { echo "Connection failed: " . $e->getMessage(); }
  
  

• Executing SQL Queries (Create Table Example - mysqli):

  
  $sql = "CREATE TABLE Users (
  
      id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  
      name VARCHAR(30) NOT NULL,
  
      email VARCHAR(50),
  
      reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
  
  )";
  
  if (mysqli_query($conn, $sql)) {
  
      echo "Table created successfully";
  
  } else {
  
      echo "Error creating table: " . mysqli_error($conn);
  
  }
  
  

C. Forms and State Management

• HTML Forms & PHP: Form data submitted via GET is accessed via $$\displaystyle _GET['fieldname']`; via `POST` via ` $$_POST['fieldname'].

• Session vs. Cookie:

  | Feature | Session | Cookie | | :--- | :--- | :--- | | Storage Location | Server-side (file or database) | Client-side (user's browser) | | Function | session_start(); to begin. Data stored in $_SESSION array. | setcookie("name", "value", time()+3600); | | Persistence | Temporary; ends when browser closes or session times out. | Persistent; expires based on set time. | | Security | More secure (data not exposed to client). | Less secure; user can see/modify/delete. | | Size Limit | Limited by server resources. | Small (~4KB per cookie). | | Use Case | Sensitive data (user ID, login state). | Non-sensitive preferences (theme, language). |

VI. Web Application Design and Quality

A. Web Design Issues

Key considerations for building effective, usable, and robust websites:

1. Usability: Intuitive navigation, clear calls-to-action, fast loading.

2. Accessibility (WCAG): Design for users with disabilities (semantic HTML, ARIA labels, keyboard navigation, contrast ratios).

3. Cross-Browser Compatibility: Ensure consistent rendering across Chrome, Firefox, Safari, Edge.

4. Responsive Design: Layout adapts to different screen sizes (mobile, tablet, desktop) using CSS media queries and fluid grids.

5. Navigation: Clear, consistent, and easy-to-use menus and site structure.

6. Visual Consistency: Uniform use of colors, fonts, and layout patterns across all pages.

B. Database and Application Bugs

Common issues in web applications interacting with databases:

1. SQL Injection: Most critical. Attacker inserts malicious SQL code via input fields. Prevention: Use prepared statements with parameterized queries (mysqli_stmt, PDO prepared statements).

2. Data Integrity Problems: Missing foreign keys, lack of constraints, leading to orphaned or inconsistent records.

3. Logic Errors in CRUD Operations: Flaws in Create, Read, Update, Delete logic (e.g., updating wrong record, failing to delete associated data).

4. Connection Management Flaws: Not closing database connections, leading to resource exhaustion; improper error handling exposing DB details.

5. Race Conditions: Concurrent requests causing unexpected data states (e.g., double booking).

[!TIP] SQL Injection Example & Fix:

Vulnerable: $$\displaystyle sql = "SELECT * FROM users WHERE email = '" . $$_POST['email'] . "'";

Secure (PDO): $$\displaystyle stmt = $$pdo->prepare("SELECT * FROM users WHERE email = ?"); $$\displaystyle stmt->execute([ $$_POST['email']]);