Autometa & Compiler design (CY-603 (C)) - Unit 3 Short Notes

UNIT 3: WEB TECHNOLOGIES & SERVER-SIDE SCRIPTING

I. WEB FUNDAMENTALS & ARCHITECTURE

HTTP (HyperText Transfer Protocol)

• Utility & Purpose: Application-layer protocol for client-server communication on the web. Governs how requests and responses are formatted and transmitted.

• HTTP Methods:

  • GET: Requests data from a specified resource (idempotent, safe, visible in URL).

  • POST: Submits data to be processed to a specified resource (non-idempotent, data in body).

  • PUT: Replaces all current representations of a resource with uploaded content.

  • DELETE: Removes the specified resource.

  • HEAD: Same as GET but asks for response without the body.

  • PATCH: Applies partial modifications to a resource.

[!TIP]

Exam Focus: Differentiate idempotent (GET, PUT, DELETE) vs non-idempotent (POST) methods. GET is cacheable/bookmarkable; POST is not.

Web Design Issues

Key considerations include:

• Scalability: Handling increasing load.

• Security: Protecting against injections, XSS, CSRF.

• Usability & Accessibility: Intuitive UI, WCAG compliance.

• Performance: Minimizing load times, efficient resource use.

• Maintainability: Clean code, separation of concerns (HTML/CSS/JS).

• Cross-browser Compatibility: Ensuring consistent behavior across browsers.

II. MARKUP LANGUAGES

HTML (HyperText Markup Language)

• Page Layout & Structure:

  • Uses block-level (e.g., <div>, <p>, <h1>) and inline (e.g., <span>, <a>) elements.

  • Semantic tags (<header>, <nav>, <section>, <article>, <footer>) improve structure and SEO.

  • Layout techniques: Tables (legacy), CSS-based layouts (Flexbox, Grid).

• Linking Mechanisms:

  • Hyperlinks: <a href="URL">Link Text</a>.

  • Anchors: <a id="section1"> and link via href="#section1" for intra-page navigation.

• Types of Lists:

  | List Type | Tag | Example Use | |-----------|-----|-------------| | Ordered | <ol> <li> | Steps, rankings | | Unordered | <ul> <li> | Bullet points, items | | Definition | <dl> <dt> <dd> | Terms & definitions |

  
  <ol>
  
    <li>First item</li>
  
  </ol>
  
  <ul>
  
    <li>Bullet item</li>
  
  </ul>
  
  <dl>
  
    <dt>Term</dt>
  
    <dd>Definition</dd>
  
  </dl>
  
  

• Forms & Form Fields:

  • Container: <form action="..." method="...">.

  • Input types: text, password, radio, checkbox, submit, reset, file, date, etc.

  • Other elements: <textarea>, <select> (with <option>), <label>.

XHTML (Extensible HTML)

• Differences from HTML:

  • Syntax: Must be well-formed XML (all tags closed, nested properly, case-sensitive, attributes quoted).

  • Doctype: Requires strict DOCTYPE (<!DOCTYPE html PUBLIC ...>).

  • Empty Elements: <br />, <img /> (with trailing slash).

  • Error Handling: Browsers may not render invalid XHTML (strict parsing).

XML (Extensible Markup Language)

• Purpose: Meta-markup language for structuring, storing, and transporting data (platform-independent, self-descriptive).

• Attributes:

  • Well-formedness: Proper nesting, single root, closed tags, quoted attributes.

  • Validity: Conformance to a Document Type Definition (DTD) or XML Schema.

  • Extensibility: Users can define custom tags.

  • Separation of Content & Presentation: Data is separate from styling (handled by XSL/CSS).

III. STYLING

CSS (Cascading Style Sheets)

• Introduction: Style sheet language describing presentation of HTML/XML documents.

• Core Concepts:

  • Selectors: Target HTML elements (e.g., p, .class, #id).

  • Properties & Values: color: red;, font-size: 16px;.

  • Cascade: Rules resolved by origin, specificity, importance.

  • Inheritance: Some properties inherited by child elements.

• Advantages:

  • Separation of Concerns: Content (HTML) separate from presentation (CSS).

  • Reusability: One CSS file can style multiple pages.

  • Maintainability: Centralized style changes.

  • Accessibility: Better control over presentation for different media.

  • Performance: Reduced page size (cached CSS file).

IV. CLIENT-SIDE SCRIPTING & DOM

JavaScript Form Elements

• Radio Buttons:

  • HTML: <input type="radio" name="group" value="val">.

  • Handling: Access via document.querySelector('input[name="group"]:checked').value.

  • Only one selectable per name group.

• Checkboxes:

  • HTML: <input type="checkbox" name="hobby" value="reading">.

  • Handling: Multiple selections possible. Use document.querySelectorAll('input[name="hobby"]:checked') to get NodeList of checked values.

Document Object Model (DOM)

• Concept: Platform- and language-neutral interface allowing programs to dynamically access and update content, structure, and style of documents.

• Role: Represents HTML/XML as a tree structure (nodes: elements, attributes, text). Enables dynamic web pages via scripting (e.g., JavaScript).

• Key Operations: getElementById(), getElementsByClassName(), querySelector(), modifying innerHTML or textContent, creating/removing nodes.

[!TIP]

Common Pitfall: DOM manipulation before DOM is fully loaded. Use DOMContentLoaded event or place script at end of <body>.

V. SERVER-SIDE SCRIPTING WITH PHP

PHP Control Structures

• Loop Statements:

  
  // for
  
  for ($$\displaystyle i = 0; $$i < 5; $i++) { ... }
  
  // while
  
  while ($condition) { ... }
  
  // do-while
  
  do { ... } while ($condition);
  
  // foreach (arrays/objects)
  
  foreach ($array as $value) { ... }
  
  foreach ($array as $key => $value) { ... }
  
  

Object-Oriented Programming in PHP

• Classes & Objects: Class is blueprint (class Car { ... }), object is instance ($myCar = new Car();).

• Encapsulation: Restricting access using private, protected, public properties/methods.

• Inheritance: class Child extends Parent { ... }.

• Key OOP Features: Constructors (__construct()), destructors, interfaces, traits.

File Handling in PHP

• File Creation:

  
  $file = fopen("test.txt", "w"); // "w" creates/truncates
  
  fwrite($file, "Hello World");
  
  fclose($file);
  
  

• Reading: fread(), file_get_contents().

• Writing/Appending: fwrite(), file_put_contents() with FILE_APPEND.

PHP & MySQL Integration

• Connectivity String (mysqli):

  
  $conn = mysqli_connect("localhost", "username", "password", "database");
  
  // or PDO: $pdo = new PDO("mysql:host=localhost;dbname=database", "user", "pass");
  
  

• PHP Program for Table Creation:

  
  $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: " . mysqli_error($conn);
  
  }
  
  

State Management: Sessions vs. Cookies

VI. DATA TRANSFORMATION & ADVANCED TOPICS

XSLT (Extensible Stylesheet Language Transformations)

• Purpose: Transform XML documents into other formats (HTML, text, another XML) using XSLT stylesheets.

• Mechanism: Uses XPath to navigate/select nodes in XML source and applies template rules to generate output.

• Example: Converting XML product catalog to HTML table.

Database Bugs & Security

• Common Vulnerabilities:

  • SQL Injection: Malicious SQL inserted via input. Prevention: Use prepared statements (parameterized queries).

  • Cross-Site Scripting (XSS): Injecting client-side scripts. Prevention: Sanitize/escape output (htmlspecialchars() in PHP).

  • Cross-Site Request Forgery (CSRF): Unauthorized commands from authenticated user. Prevention: Use anti-CSRF tokens.

  • Authentication Flaws: Weak passwords, session fixation. Prevention: Strong policies, secure session handling.

  • Data Exposure: Storing sensitive data in plaintext. Prevention: Hash passwords (e.g., password_hash()), encrypt data.

[!TIP]

Exam Focus: Always mention prepared statements for SQL injection and output escaping for XSS as primary defenses.