PyQdeck LogoPyQdeckSubjects
Back to the 2020 paper

Module I: Introduction to Web Technologies & Architectures

202014m

Write short notes on the following :

(a) HTML commands
(b) DHTML dragging and drooping
(c) AWT
(d) JDBC

Search GoogleAsk AI
Worked SolutionAI Assisted

Answer: Short Notes on Web & Java Technologies

(a) HTML Commands (Tags & Elements)

HTML (HyperText Markup Language) commands (commonly referred to as HTML tags and elements) are syntax keywords enclosed within angle brackets (<tagname>) used to define the structure, content, and hypermedia links of a webpage.

Core HTML Command Categories:

  1. Document Skeleton Commands:
    • <!DOCTYPE html>: Declares HTML5 document type.
    • <html>, <head>, <body>: Defines the root, metadata, and visible document body.
  2. Text Formatting Commands:
    • <h1> to <h6>: Headings; <p>: Paragraph; <br>: Line break; <hr>: Horizontal rule.
  3. Hyperlinks & Media Commands:
    • <a href="...">: Creates clickable hyperlinks.
    • <img src="..." alt="...">: Embeds images.
  4. Lists & Tables:
    • <ul>, <ol>, <li>: Unordered (bulleted) and ordered (numbered) lists.
    • <table>, <tr>, <th>, <td>: Renders structured tabular data.
  5. Interactive Forms:
    • <form>, <input>, <select>, <button>, <textarea>: Collects user data.

(b) DHTML Dragging and Dropping

DHTML (Dynamic HTML) is not a standalone language, but rather the synergistic combination of HTML, CSS, JavaScript, and the Document Object Model (DOM) to create interactive, animated web pages.

Drag and Drop Mechanism:

Drag and Drop allows users to click, grab an onscreen element, drag it over a target zone, and drop it.

[Draggable Element] -- (dragstart) --> [Dragging Over Target] -- (drop) --> [Dropped Element]
 (draggable="true")                     (event.preventDefault())             (dataTransfer)

Core HTML5 / DHTML Drag-and-Drop Events:

  • dragstart: Fires when the user starts dragging an element. Uses event.dataTransfer.setData("text", target.id) to store data.
  • dragover: Fires continuously when a dragged element is over a valid drop target. Must invoke event.preventDefault() to allow dropping.
  • drop: Fires when the dragged item is released over the drop target. Retrieves data via event.dataTransfer.getData("text").
<div id="dragItem" draggable="true" ondragstart="event.dataTransfer.setData('text', this.id)">
  Drag Me
</div>
<div id="dropZone" ondragover="event.preventDefault()" ondrop="this.appendChild(document.getElementById(event.dataTransfer.getData('text')))">
  Drop Zone
</div>

(c) AWT (Abstract Window Toolkit)

AWT (java.awt) is Java's original, platform-dependent Graphical User Interface (GUI) framework introduced in JDK 1.0.

                               +-----------------------------+
                               |          Component          |
                               +--------------+--------------+
                                              |
                     +------------------------+------------------------+
                     |                                                 |
                     v                                                 v
           +--------------------+                            +--------------------+
           |  Basic Controls    |                            |     Container      |
           | Button, Checkbox,  |                            | (Panel, Window,    |
           | Label, TextField   |                            |  Frame, Dialog)    |
           +--------------------+                            +--------------------+

Key Features of AWT:

  1. Heavyweight Components: AWT components rely directly on the underlying operating system's native GUI peer widgets (e.g., a java.awt.Button creates a native Windows button on Windows and a Motif button on Unix).
  2. Container Hierarchy:
    • Frame: Top-level window with a title bar, border, and minimize/maximize buttons.
    • Panel: Space-allocating container used to group components.
  3. Layout Managers: Automatically arrange component geometry (FlowLayout, BorderLayout, GridLayout, GridBagLayout).
  4. Event Delegation Model: Decouples event sources (e.g., Button) from event listeners (ActionListener, MouseListener).

(d) JDBC (Java Database Connectivity)

JDBC (java.sql / javax.sql) is the standard Java API specification that enables Java applications to interact independently with relational database management systems (RDBMS like MySQL, Oracle, PostgreSQL).

+-----------------------+
|   Java Application    |
+-----------+-----------+
            | (JDBC API Calls)
            v
+-----------------------+
|  JDBC DriverManager   |
+-----------+-----------+
            |
            v
+-----------------------+
|   JDBC Driver (MySQL) |
+-----------+-----------+
            | (Database Protocol)
            v
+-----------------------+
|   RDBMS Database      |
+-----------------------+

Standard 5 Steps to Execute JDBC Operations:

  1. Load Driver Class:
    Class.forName("com.mysql.cj.jdbc.Driver");
  2. Establish Database Connection:
    Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/db", "root", "password");
  3. Create Statement:
    Statement stmt = con.createStatement();
// Or PreparedStatement for parameterized SQL
  4. Execute SQL Query:
    ResultSet rs = stmt.executeQuery("SELECT * FROM students");
while (rs.next()) {
    System.out.println(rs.getInt("roll_no") + " : " + rs.getString("name"));
}
  5. Close Resources:
    rs.close(); stmt.close(); con.close();

Similar questions

Web TechnologyHow can you do dragging and dropping data using DHTML? Explain with example.20197mWeb TechnologyWrite short notes on any two of the following: (a) AWT (b) Exception Handling (c) DHTML and HTML (d) API201914mWeb TechnologyWhat do you understand by working layer in DHTML? Explain with the help of example.20197mWeb TechnologyDescribe the HTML code required for adding a form to a Web page.20197m
PreviousWAP to create a superclass called figure that stores the dimensions of a two-dimensional object. It also defines a method called area () that computes the area of an object. The program derives two subclasses from figure. The first is rectangle and the second is triangle. Each of these subclasses overrides area () so that it returns the area of a rectangle and a triangle respectively.