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

A. WEB FUNDAMENTALS & MARKUP LANGUAGES

HTML (HyperText Markup Language)

• Definition: Standard markup language for creating web pages.

• Page Layout & Linking:

  • Structural Elements: <div> (block-level container), <span> (inline container), semantic tags (<header>, <nav>, <section>, <article>, <footer>) for meaningful structure.

  • Hyperlinks: Created using <a> tag. Key attributes:

    • href: specifies the URL of the linked page/resource.

    • target: where to open the linked document (_blank, _self, etc.).

  • Image Embedding: <img> tag. Key attributes:

    • src: path to the image file.

    • alt: alternative text (critical for accessibility).

• Lists:

  • Ordered Lists (<ol>): List items in a specific order. Attributes: type (1, A, a, I, i), start (starting number).

  • Unordered Lists (<ul>): List items with bullet points. Attribute: type (disc, circle, square).

  • Definition Lists (<dl>): List of terms and definitions. Contains <dt> (definition term) and <dd> (definition description).

• Forms (<form>):

  • Purpose: Collect user input.

  • Key Attributes: action (server-side script URL), method (GET or POST), enctype (encoding type for file uploads).

  • Form Fields & Input Types:

    • Text: <input type="text">

    • Password: <input type="password"> (masks input)

    • Radio Buttons: <input type="radio"> (grouped by name attribute)

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

    • Drop-down Lists: <select> containing <option> elements.

    • Textarea: <textarea> for multi-line text.

    • Buttons: <input type="submit">, <input type="reset">

XHTML (Extensible HyperText Markup Language)

• Definition: Stricter, XML-based version of HTML.

• Key Differences from HTML:

  | Feature | HTML | XHTML | | :--- | :--- | :--- | | Syntax | Looser, forgiving | Strict, XML-compliant | | Tag Case | Case-insensitive | Must be lowercase | | Attribute Values | Can be unquoted | Must be quoted | | Tag Closing | Optional for some tags (e.g., <br>) | All tags must be closed (<br />, <img />) | | Nesting | Improper nesting sometimes tolerated | Must be properly nested |

XML (Extensible Markup Language)

• Definition: Metalanguage for defining custom markup languages; designed for data storage and transport.

• Attributes / Key Features:

  • Self-descriptive: Uses user-defined tags.

  • Platform-independent: Text-based, works across systems.

  • Strict Syntax: Must be well-formed (proper nesting, closed tags, case-sensitive, quoted attributes) and optionally valid (conforms to a DTD/XSD).

  • Extensible: Allows creation of new tags as needed.

  • Separates Content from Presentation: Focuses on data structure, not display.

B. STYLING & PRESENTATION

CSS (Cascading Style Sheets)

• Definition: Style sheet language used to describe the presentation of a document written in HTML or XML.

• Role: Separates content (HTML) from presentation (CSS).

• Advantages:

  • Centralized control of layout/design across multiple pages.

  • Faster page loading (reuse of external style sheets).

  • Consistency throughout the website.

  • Greater control over precise layout, formatting, and advanced visual effects.

  • Improves accessibility (e.g., separate style for print, screen readers).

• Ways to Include CSS:

  | Method | Syntax | Scope | Use Case | | :--- | :--- | :--- | :--- | | Inline | style="property: value;" in HTML tag | Single element | Quick, one-off overrides (least maintainable). | | Internal/Embedded | <style> ... </style> in <head> | Single page | Page-specific styles. | | External | <link rel="stylesheet" href="file.css"> | Entire site | Best practice for site-wide consistency. |

• Basic Selectors & Properties:

  • Selectors: Element (p), Class (.classname), ID (#idname).

  • Common Properties: color, font-family, margin, padding, border, background-color.

C. CLIENT-SIDE SCRIPTING

JavaScript: Radio Buttons & Check Boxes Objects

• Accessing Form Elements:

  
  document.forms["formName"].elements["elementName"];
  
  // or
  
  document.forms[0].elements[0];
  
  

• Key Properties:

  • checked: Boolean (true/false) – if the radio/checkbox is selected.

  • value: The value attribute of the selected option.

  • name: The grouping name (for radio buttons).

• Event Handling: Use onclick or onchange events to trigger JavaScript functions when user interacts.

  [!TIP] For radio groups, loop through all elements with the same name to find which one has checked == true.

Document Object Model (DOM)

• Concept: A programmatic, tree-like representation of an HTML/XML document, where each node is an object (element, attribute, text).

• Purpose: Allows languages like JavaScript to dynamically access, modify, add, or delete content, structure, and style of a document.

• Key Objects:

  • window: The global object (browser window).

  • document: The root of the HTML document tree.

  • element: Represents a single HTML tag.

• Core Methods:

  • getElementById(id): Returns a single element by its id.

  • getElementsByTagName(tag): Returns a live HTMLCollection of elements by tag name.

  • createElement(tag): Creates a new element node.

  • appendChild(node): Adds a node as the last child of an element.

  • innerHTML: Property to get/set HTML content inside an element.

D. SERVER-SIDE SCRIPTING & PHP (Very High Frequency)

PHP Basics: Loop Statements

• for(init; condition; increment) { ... }: Executes a block a specific number of times.

• foreach($array as $value) { ... }: Iterates over each element in an array.

• while(condition) { ... }: Executes a block as long as the condition is true (condition checked first).

• do { ... } while(condition);: Executes a block at least once, then repeats as long as condition is true (condition checked last).

Object-Oriented Programming (OOP) with PHP

• Class: Blueprint/template for creating objects (class ClassName { ... }).

• Object: Instance of a class ($obj = new ClassName();).

• Property: Variable inside a class (holds data).

• Method: Function inside a class (defines behavior).

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

• Access Modifiers:

  • public: Accessible from anywhere.

  • private: Accessible only within the class.

  • protected: Accessible within the class and its subclasses.

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

File Handling in PHP

• What is a File? A named, persistent collection of data stored on a disk.

• Core Functions:

  1. fopen($filename, $mode): Opens a file or URL. Common modes:

     • 'r' (read), 'w' (write, truncates), 'a' (append), 'x' (create new), 'r+' (read/write).

  2. fwrite($handle, $data) / file_put_contents($file, $data): Writes data to an open file.

  3. fclose($handle): Closes an open file pointer (critical to free resources).

PHP & MySQL Database Connectivity

• Connectivity String (using mysqli procedural):

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

• Creating a Table (SQL executed via PHP):

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

Sessions vs. Cookies

E. ADVANCED WEB CONCEPTS & MISCELLANEOUS

HTTP (HyperText Transfer Protocol)

• Definition: Application-layer protocol for distributed, collaborative, hypermedia information systems (the foundation of the WWW).

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

• HTTP Methods (Verbs):

  • GET: Requests data from a specified resource. Parameters appended to URL (visible, limited length). Should be idempotent and safe.

  • POST: Submits data to be processed to a specified resource. Data in request body (hidden, larger capacity). Not idempotent.

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

  • DELETE: Deletes the specified resource.

  • HEAD: Same as GET but asks for the response without the body (for headers/metadata).

  • OPTIONS: Requests information about the communication options available for the target resource.

XSLT (Extensible Stylesheet Language Transformations)

• Definition: Language for transforming an XML document into another document (HTML, text, or another XML).

• Purpose:

  • Presentation: Convert XML data into an HTML page for viewing in a browser.

  • Data Conversion: Change XML structure or format (e.g., XML to CSV).

  • Content Reuse: Extract and repurpose parts of an XML document.

• How it works: An XSLT stylesheet (an XML file containing transformation rules) is processed by an XSLT processor against a source XML document to produce the result.

Web Design Issues

• Browser Compatibility: Ensuring site works correctly across different browsers (Chrome, Firefox, Safari, Edge) and versions.

• Download Speed/Performance: Optimizing images, minifying CSS/JS, reducing HTTP requests.

• Navigation & Usability: Intuitive site structure, clear menus, search functionality.

• Accessibility (WCAG): Designing for people with disabilities (semantic HTML, ARIA labels, keyboard navigation, color contrast).

• Responsive Design: Using fluid grids, flexible images, and CSS media queries to adapt layout to different screen sizes (mobile, tablet, desktop).

• Security Considerations: Protecting against SQL Injection, XSS, CSRF; using HTTPS; validating/sanitizing all user input.

Database Bugs (Common Vulnerabilities in Web Apps)

• SQL Injection:

  • Bug: Malicious user inserts malicious SQL code via input fields, altering the intended database query.

  • Prevention: Use prepared statements (parameterized queries) with mysqli or PDO. Never concatenate raw user input into SQL strings.

• Cross-Site Scripting (XSS):

  • Bug: Attacker injects malicious scripts (usually JavaScript) into web pages viewed by other users.

  • Prevention: Sanitize and escape all user-generated content before outputting it to HTML (htmlspecialchars() in PHP). Implement Content Security Policy (CSP).

• Data Integrity Issues: Bugs causing incorrect, missing, or duplicate data (e.g., lack of database constraints, race conditions).

• Connection/Query Errors: Poor error handling in PHP/MySQL code (e.g., exposing raw database errors to users). Use proper error reporting and logging.