UNIT 5: WEB TECHNOLOGIES & SERVER-SIDE PROGRAMMING

A. FOUNDATIONAL WEB CONCEPTS & ARCHITECTURE

HTTP (HyperText Transfer Protocol)

• Definition: An application-layer protocol for distributed, collaborative, hypermedia information systems. It is the foundation of data communication for the World Wide Web.

• Utility & Role: Defines how messages are formatted and transmitted, and what actions web servers and browsers should take in response to various commands. It follows a request-response model.

• HTTP Request Methods:

  | Method | Purpose | Idempotent? | | :--- | :--- | :--- | | GET | Requests data from a specified resource. Parameters are appended to the URL. | Yes | | POST | Submits data to be processed to a specified resource. Data is in the request body. | No | | PUT | Replaces all current representations of a target resource with the uploaded content. | Yes | | DELETE | Deletes the specified resource. | Yes | | HEAD | Same as GET but asks for the response without the response body. | Yes |

[!TIP] Exam Focus: GET vs POST is a classic distinction. Remember: GET is for retrieval (safe, idempotent, URL-visible), POST is for submission (can change state, data in body).

Web Design Issues

Key considerations and challenges include:

• Navigation & Structure: Intuitive site organization, consistent menus, breadcrumb trails.

• Performance: Page load speed, image optimization, efficient code.

• Accessibility (a11y): Compliance with WCAG guidelines for users with disabilities (semantic HTML, ARIA, keyboard navigation).

• Responsiveness: Adapting layout for various devices (desktop, tablet, mobile) using fluid grids and media queries.

• Cross-Browser Compatibility: Ensuring consistent functionality and appearance across different browsers (Chrome, Firefox, Safari, Edge).

• Security: Protecting against XSS, CSRF, SQL injection, and ensuring HTTPS.

• SEO (Search Engine Optimization): Proper use of semantic tags, meta descriptions, clean URLs.

B. MARKUP LANGUAGES: HTML & XHTML

HTML (HyperText Markup Language)

• Page Layout & Structure:

  Uses semantic elements (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>) to define document structure meaningfully, improving accessibility and SEO.

  • Layout Techniques: Historically used tables (<table>), now primarily CSS-based layouts (Flexbox, Grid, floats).

• Linking:

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

    
    <a href="https://example.com" target="_blank">External Link</a>
    
    <a href="#section2">Internal Anchor Link</a>
    
    

  • Internal vs. External Links: Internal links point to pages within the same website (relative URL). External links point to a different domain (absolute URL).

• Forms (<form>):

  • Purpose: To collect user input and send it to a server for processing.

  • Structure: <form action="server-script.php" method="post"> ... form elements ... <input type="submit"> </form>

• Form Fields/Input Elements:

  | Element | Tag & Key Attribute | Purpose | | :--- | :--- | :--- | | Text Field | <input type="text" name="username"> | Single-line text input. | | Password Field | <input type="password" name="pwd"> | Masks input characters. | | Radio Buttons | <input type="radio" name="gender" value="male"> | Single selection from mutually exclusive options. | | Check Boxes | <input type="checkbox" name="hobbies" value="reading"> | Multiple selections from non-exclusive options. | | Dropdown List | <select name="city"><option value="dl">Delhi</option></select> | Single-select list. Use multiple attribute for multi-select. | | Text Area | <textarea name="comment" rows="4" cols="50"></textarea> | Multi-line text input. | | Submit/Reset | <input type="submit">, <input type="reset"> | Form submission or clearing. |

• Lists:

  
  <!-- Unordered List (bulleted) -->
  
  <ul>
  
    <li>Item 1</li>
  
    <li>Item 2</li>
  
  </ul>
  
  <!-- Ordered List (numbered) -->
  
  <ol>
  
    <li>First Step</li>
  
    <li>Second Step</li>
  
  </ol>
  
  <!-- Definition List -->
  
  <dl>
  
    <dt>HTML</dt>
  
    <dd>Markup language for web pages.</dd>
  
  </dl>
  
  

XHTML (eXtensible HyperText Markup Language)

• Definition: A stricter, XML-based reformulation of HTML.

• Key Syntax Differences (vs. HTML):

  | Rule | HTML | XHTML | | :--- | :--- | :--- | | Well-formedness | Not strictly enforced. | Mandatory. All tags must be properly nested and closed. | | Case Sensitivity | Tag/attribute names are case-insensitive. | Case-sensitive. Must be in lowercase. | | Attribute Quoting | Attribute values can sometimes be unquoted. | All attribute values must be in double quotes. | | Closed Tags | Some tags (e.g., <br>, <img>) are optional. | All tags must be closed. Empty tags: <br />, <img src="..." /> | | Document Structure | Requires <!DOCTYPE html>. | Requires an XML declaration and a strict DTD. | | Attributes | checked (minimized) is allowed. | Must be checked="checked" (fully expanded). |

[!TIP] Common Pitfall: Writing HTML-style minimized attributes (checked, readonly) in XHTML will cause validation errors. Always use checked="checked".

C. CLIENT-SIDE TECHNOLOGIES

CSS (Cascading Style Sheets)

• Definition: A style sheet language used to describe the presentation (look and formatting) of a document written in a markup language like HTML or XML.

• Core Advantages:

  1. Separation of Concerns: Separates content (HTML) from presentation (CSS).

  2. Reusability: One CSS file can style multiple HTML pages.

  3. Fine-grained Control: Precise control over layout, colors, fonts, spacing.

  4. Accessibility: Allows for alternate style sheets, better control for screen readers.

  5. Efficiency: Faster page loads (cached CSS) and easier site-wide updates.

• Basic Syntax: selector { property: value; }

• Application Methods:

  • Inline: style attribute within HTML tag (lowest priority, least reusable).

  • Internal/Embedded: <style> block within <head>.

  • External: Linked .css file (<link rel="stylesheet" href="styles.css">) (best practice).

JavaScript

• Form Objects: Radio Buttons & Check Boxes

  • Access: Via document.forms['formName'].elements['elementName'] or document.getElementById().

  • Radio Buttons:

    • Property: checked (Boolean). value (submitted value).

    • Behavior: All radio buttons with the same name form a group; only one can be selected at a time.

    • Event: onclick or onchange.

  • Check Boxes:

    • Property: checked (Boolean). value.

    • Behavior: Independent; multiple can be selected.

    • Event: onclick or onchange.

  
  // Example: Check if a radio button is selected
  
  if (document.myForm.gender[0].checked) {
  
      alert("Male selected");
  
  }
  
  

• Document Object Model (DOM)

  • Concept: A platform- and language-neutral interface that treats an HTML/XML document as a tree structure of nodes (elements, attributes, text). It allows programs and scripts to dynamically access and update the content, structure, and style of a document.

  • Role: The core programming model for dynamic web pages. JavaScript uses the DOM to interact with the page.

  • Core Objects & Manipulation:

    • document: The root of the HTML document.

    • window: The global object, represents the browser window.

    • Element Nodes: Represent HTML tags. Key methods: getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector(), createElement(), appendChild(), innerHTML, setAttribute().

XML (eXtensible Markup Language)

• Definition: A meta-markup language for structuring data. It is self-descriptive, platform-independent, and designed to store and transport data.

• Key Attributes (Features & Syntax Rules):

  1. Well-formedness: Must have a single root element, tags properly nested and closed, case-sensitive, attributes quoted.

  2. Validity (Optional but key): Must conform to a defined structure (grammar) specified by a DTD (Document Type Definition) or XML Schema (XSD).

  3. Extensibility: Users can define their own tags.

  4. Separation of Content & Presentation: XML carries data; XSLT handles display.

  5. Unicode Support: Can contain any character from the Unicode set.

XSLT (eXtensible Stylesheet Language Transformations)

• Concept: An XML-based language used to transform an XML document into another XML document, HTML, plain text, or other formats.

• Role: Separates data (XML) from its presentation (e.g., converting XML to HTML for browser display). Used on the server or client (with browser support).

• Basic Usage with XPath: XSLT uses XPath expressions to navigate and select nodes from the input XML document.

  
  <!-- Simple XSLT to transform XML to HTML -->
  
  <xsl:template match="/">
  
    <html><body>
  
      <h2>Books</h2>
  
      <ul>
  
        <xsl:for-each select="catalog/book">
  
          <li><xsl:value-of select="title"/></li>
  
        </xsl:for-each>
  
      </ul>
  
    </body></html>
  
  </xsl:template>
  
  

D. SERVER-SIDE SCRIPTING: PHP

Core PHP Programming

• Loop Statements:

  | Loop | Syntax | Use Case | | :--- | :--- | :--- | | for | for (init; condition; increment) { ... } | Known number of iterations. | | while | while (condition) { ... } | Unknown iterations, condition checked first. | | do-while | do { ... } while (condition); | Body executes at least once. | | foreach | foreach ($array as $value) { ... } | Iterating over arrays/objects (most common for arrays). |

• Object-Oriented Programming (OOP) in PHP:

  • Core Concepts:

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

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

    • Property: Variable inside a class (characteristics).

    • Method: Function inside a class (behaviors).

  • Key OOP Features:

    • Encapsulation: Bundling data (properties) and methods, restricting direct access using public, private, protected.

    • Inheritance: A class (child) extends another (parent), inheriting its properties/methods (class Sedan extends Car).

    • Polymorphism: Same method name can behave differently in different classes (achieved via method overriding in child classes).

File Handling in PHP

• What is a File? A named, persistent collection of data stored on a server's disk. PHP provides functions for server-side I/O.

• File Creation Process:

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

     • Modes: "w" (write, truncates existing), "a" (append), "x" (create new, fails if exists).

  2. Write: fwrite($handle, "Data to write");

  3. Close: fclose($handle);

  
  $file = fopen("test.txt", "w") or die("Unable to open file!");
  
  fwrite($file, "Hello World. ");
  
  fclose($file);
  
  

PHP & MySQL Database Connectivity

• Connectivity (using mysqli - procedural style):

  
  $servername = "localhost";
  
  $username = "username";
  
  $password = "password";
  
  $dbname = "myDB";
  
  // 1. Create connection
  
  $$\displaystyle conn = mysqli_connect( $$servername, $username, $password, $dbname);
  
  // 2. Check connection
  
  if (!$conn) {
  
      die("Connection failed: " . mysqli_connect_error());
  
  }
  
  

• Database Operations:

  • Creating a Table:

    
    $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";
    
    }
    
    

  • Executing Queries: Use mysqli_query($conn, $sql) for SELECT, INSERT, UPDATE, DELETE. Use prepared statements (prepare, bind_param, execute) for security (prevent SQL injection).

Sessions vs. Cookies

[!TIP] Exam Distinction: The single most important difference is storage location (Client vs. Server), which drives all other differences (security, capacity).

E. DATABASE & BACKEND INTEGRATION

Database Bugs / Issues

Common problems in database-driven web applications:

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

• Connection Leaks: Failing to close database connections (mysqli_close()) after use, exhausting server resources.

• Data Inconsistency: Lack of proper transactions (BEGIN, COMMIT, ROLLBACK) for operations that must succeed or fail as a unit (e.g., bank transfer).

• Performance Issues: Unoptimized queries (no indexes, SELECT *), leading to slow response times.

• Race Conditions: Concurrent access to data leading to incorrect results (e.g., double booking). Solved with proper locking or isolation levels.

• Error Handling: Displaying raw database errors to users (information leakage). Should log errors and show generic messages.