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

UNIT 3: Web Technologies (Based on Past Exam Questions)

1. HTML and XHTML Fundamentals

Page Layout and Linking

• Page Layout: Structuring a webpage using semantic elements (<header>, <nav>, <main>, <section>, <article>, <footer>) and non-semantic containers (<div>, <span>).

• Linking:

  • Hyperlinks: Created using the <a> (anchor) tag with the href attribute.

    
    <a href="https://www.example.com" target="_blank">Visit Example</a>
    
    

  • Anchors (Bookmarks): Link to a specific section within the same page using id and href with #.

    
    <h2 id="section1">Section 1</h2>
    
    <a href="#section1">Jump to Section 1</a>
    
    

Types of Lists

Differences between HTML and XHTML

[!TIP] Exam Focus: XHTML is essentially HTML rewritten in XML. Key exam points are lowercase tags, quoted attributes, and closed all elements.

2. CSS (Cascading Style Sheets)

Introduction to CSS

• Purpose: Separates content (HTML) from presentation (styling: layout, colors, fonts).

• Types:

  1. Inline: Style attribute within an HTML tag. (Low reusability).

  2. Internal (Embedded): <style> block within the HTML <head>.

  3. External: Separate .css file linked via <link>. (Most maintainable & reusable).

Advantages of CSS

• Separation of Concerns: Cleaner, more manageable code.

• Reusability: One stylesheet can style multiple pages.

• Maintainability: Change style in one place (CSS file) to update entire site.

• Reduced Code & Bandwidth: Less repetitive HTML, faster page loads.

• Accessibility: Better control for different media (print, screen readers).

[!TIP] Common Pitfall: Inline styles have the highest specificity, making them hard to override. Use external CSS for maintainability.

3. JavaScript for Client-Side Interactivity

Form Elements: Radio Buttons and Checkboxes

• Radio Buttons (<input type="radio">): Mutually exclusive selection within a name group. Access via document.formName.radioName.value.

• Checkboxes (<input type="checkbox">): Allow multiple selections. Access via element.checked (boolean) property.

• Validation Example:

  
  if (document.myForm.gender.value === "") {
  
      alert("Please select a gender.");
  
      return false;
  
  }
  
  

Document Object Model (DOM)

• Concept: Programming interface for HTML/XML documents. Represents the page as a tree structure of nodes (objects).

• Tree Structure: document (root) → html → head/body → elements, attributes, text.

• Manipulation Methods (Key Examples):

  • getElementById(id)

  • getElementsByClassName(className)

  • getElementsByTagName(tagName)

  • createElement(tagName)

  • appendChild(node)

  • innerHTML / textContent

[!TIP] Exam Ready: DOM is the bridge between JavaScript and HTML. Know how to select an element and modify its content/style.

4. HTTP Protocol

What is HTTP?

• Definition: HyperText Transfer Protocol. The foundation of data communication for the World Wide Web.

• Stateless Protocol: Each request from a client to a server is treated as independent; the server does not retain user session data between requests by default.

• Request-Response Model: Client (Browser) sends an HTTP Request → Server processes and sends an HTTP Response.

Utility of HTTP

• Web page, image, and file transfer.

• Caching: Mechanisms (Cache-Control, Expires) to store responses and reduce server load.

• Content Negotiation: Client and server can agree on the best representation of a resource (e.g., language, format) via headers like Accept.

HTTP Methods & Idempotency

\boxed{\text{Idempotent: Multiple identical requests have the same effect as a single request.}} \

\boxed{\text{Safe: Method is read-only and does not modify server state.}}

5. XML (Extensible Markup Language)

Introduction to XML

• Purpose: To store and transport structured data in a platform-independent, self-descriptive text format. Not for display (unlike HTML).

• Well-formed vs. Valid:

  • Well-formed: Follows basic XML syntax rules (single root element, proper nesting, closed tags, quoted attributes).

  • Valid: Conforms to a Document Type Definition (DTD) or XML Schema (XSD) that defines allowed elements/attributes.

Attributes of XML

1. Self-descriptive: Data and its meaning are stored together.

2. Platform-independent: Text-based, works on any OS.

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

4. Text-based: Human and machine-readable.

XSLT (Extensible Stylesheet Language Transformations)

• Purpose: To transform an XML document into another format (e.g., HTML, PDF, another XML).

• Process: Uses an XSLT stylesheet (.xsl) containing templates and XPath expressions to match and reformat XML data.

  
  <!-- Example XSLT snippet to transform XML to HTML -->
  
  <xsl:template match="/">
  
      <html><body>
  
          <xsl:apply-templates select="book"/>
  
      </body></html>
  
  </xsl:template>
  
  

6. PHP Server-Side Scripting

Loop Statements

Object-Oriented Programming in PHP

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

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

• Encapsulation: Bundling data (properties) and methods (functions) together, controlling access via public, private, protected.

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

• Constructor: Special method (__construct()) called automatically when an object is created.

File Handling

• Basic Steps:

  1. Create/Open: fopen("file.txt", "mode")

  2. Read/Write: fread(), fwrite(), fgets()

  3. Close: fclose($handle)

• Common File Modes:

  • "r" - Read only.

  • "w" - Write (truncates existing file).

  • "a" - Append.

  • "r+" - Read/Write.

  • "x" - Create new (fails if exists).

Database Connectivity with MySQL

• Using mysqli (Procedural):

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

• Using PDO (Recommended):

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

Creating Database Tables via PHP

$sql = "CREATE TABLE Users (

    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,

    username VARCHAR(30) NOT NULL,

    email VARCHAR(50),

    reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP

)";

if ($$\displaystyle conn->query( $$sql) === TRUE) {

    echo "Table Users created successfully";

} else {

    echo "Error creating table: " . $conn->error;

}

7. Web Forms and State Management

Forms and Form Fields

• Form Tag: <form action="process.php" method="post"> ... </form>

• Common Input Fields:

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

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

  • <input type="radio"> - Single choice.

  • <input type="checkbox"> - Multiple choices.

  • <input type="submit"> / <button type="submit"> - Submit form.

  • <textarea> - Multi-line text.

  • <select> / <option> - Dropdown list.

• Key Attributes: name (for server access), value, required, placeholder.

Session vs Cookie

\boxed{\text{Sessions store data on the server; Cookies store data on the client.}}

8. Web Design and Development Considerations

Web Design Issues

• Usability: Intuitive navigation, clear calls-to-action.

• Accessibility (WCAG): Use semantic HTML, ARIA labels, alt text for images, keyboard navigation.

• Responsiveness: Design for all devices (mobile-first) using CSS media queries.

• Cross-Browser Compatibility: Test in Chrome, Firefox, Safari, Edge. Use vendor prefixes if needed.

• SEO (Search Engine Optimization): Proper use of headings (<h1>-<h6>), meta tags, clean URLs, fast loading.

Database Bugs (Common Errors & Debugging)

[!TIP] Critical Security Rule: Always use prepared statements with parameterized queries to prevent SQL injection. This is a frequent exam and real-world focus.