Comprehensive Web Development Techniques and Practices
CSS Basics
Advantages of CSS
- Separation of content and design: CSS allows designers to separate the content (HTML) from the layout (CSS), which makes the website easier to maintain and manage.
- Improved page load speed: By using external style sheets, the browser caches the CSS file, reducing the need to load styles with each page request.
- Consistency: It provides a uniform look across all pages by applying a consistent design throughout the website.
- Flexibility and control: CSS offers fine control over the design, including font styles, layout, and colors, and can be easily adjusted without altering HTML content.
External Style Sheet
An external style sheet is a separate file (with a .css extension) that contains CSS rules. It allows the design to be applied to multiple HTML pages.
Linking CSS to HTML
To link an external style sheet to an HTML document, use the following <link> tag inside the <head> section:
<link rel="stylesheet" type="text/css" href="styles.css">
This code links the styles.css file to the HTML document.
Inline Styles vs. Embedded Style Sheets
Inline styles: These are styles applied directly to individual HTML elements using the style attribute.
Embedded style sheets: These are defined within the <style> tag in the HTML document’s <head> section.
More useful: Embedded style sheets are more useful as they allow multiple elements to be styled uniformly and are easier to manage than inline styles, which can clutter the HTML code.
The Need for an ID Selector in CSS
The id selector in CSS is used to apply styles to a specific HTML element with a unique identifier. Each element with a unique id can be styled independently from other elements.
Welcome to the Exam hall.
#intro {color: blue; font-size: 20px;}
Web Programming Fundamentals
What is a Blog?
Blog: A regularly updated website with written content in reverse chronological order.
Contains: Articles, posts, images, videos.
Microblog: A shorter form of blogging, typically used for quick updates or small snippets of content.
Features:
- Short posts.
- Frequent updates.
- Limited content compared to blogs.
- Typically uses platforms like Twitter.
Features of Web 2.0 and Technologies
- User-generated content.
- Social networking capabilities.
- Interactive and collaborative features.
- Enhanced user experience through dynamic content.
Technologies:
- AJAX: Enables asynchronous data loading without reloading the page.
- RSS: Syndicates content for easier distribution and reading.
- Wikis: Collaborative platforms for creating and editing content.
- Social Media Platforms: Facilitate user engagement and content sharing.
What is WAP?
WAP (Wireless Application Protocol): A protocol designed for mobile devices to access the web.
Why Needed:
- Efficient access to websites from mobile phones.
- Optimizes content for small screens.
- Supports mobile networks’ limitations (bandwidth and speed).
- Helps in mobile commerce and information retrieval.
Differences Between GET and POST Methods
GET:
- Retrieves data from the server.
- Data is appended to the URL.
- Suitable for non-sensitive data.
- Limited data size.
POST:
- Sends data to the server.
- Data is sent in the request body.
- Suitable for sensitive data.
- No data size limitations.
XML, DTD, and WML
XML Document and DTD
Data:
St_ID | Name | Programme
Code:
<?xml version="1.0" encoding="UTF-8"?>
<Students>
<Student><St_ID>1001</St_ID><Name>Ravi</Name><Programme>BCA</Programme></Student>
<Student><St_ID>1002</St_ID><Name>Ullman</Name><Programme>PhD</Programme></Student>
</Students>
DTD:
<!DOCTYPE Students [
<!ELEMENT Students (Student+)>
<!ELEMENT Student (St_ID, Name, Programme)>
<!ELEMENT St_ID (#PCDATA)>
<!ELEMENT Name (#PCDATA)>
<!ELEMENT Programme (#PCDATA)>
]>
XML Document with Two Records
Structure:
Name (First Name, Last Name of a student)
Programme (Name of the student’s program)
Code:
<?xml version="1.0" encoding="UTF-8"?>
<Students>
<Student><Name><FirstName>John</FirstName><LastName>Doe</LastName></Name><Programme>CS</Programme></Student>
<Student><Name><FirstName>Jane</FirstName><LastName>Smith</LastName></Name><Programme>Physics</Programme></Student>
</Students>
Purpose of Using DTD in XML
- Defines the structure and rules for XML documents.
- Specifies the elements and attributes allowed in the XML.
- Ensures data integrity by validating the document against a predefined set of rules.
- Helps in enforcing consistency and standardization in XML data.
Limitations of DTD
- DTD does not support data types (e.g., number, string).
- Lacks support for namespaces.
- Cannot specify element order in complex types.
- Limited expressiveness compared to XML Schema.
Difference Between DTD and XML Schema
- DTD: Simple, defines structure with limited functionality.
- XML Schema: More powerful, supports data types, namespaces, and complex structures.
WML Elements
WML Tables
Used to create tables in WML (Wireless Markup Language). Tables are structured using <table>, <tr>, <td>, and <th>.
Example:
<table><tr><td>Header1</td><td>Header2</td></tr><tr><td>Data1</td><td>Data2</td></tr></table>
<anchor> Element
The <anchor> element defines a link to another WML card or external URL.
Example:
<anchor href="nextpage.wml">Next page</anchor>
WML Table
Table:
Book Title | Author Name
Computers Now | Desai
Web Programming | Tanenbaum
Code:
<table><tr><td>Book Title</td><td>Author Name</td></tr>
<tr><td>Computers Now</td><td>Desai</td></tr>
<tr><td>Web Programming</td><td>Tanenbaum</td></tr></table>
JSP Concepts
Steps of JSP Page Processing
- Client Request: A request is sent by the client (browser) to the JSP page.
- JSP Translation: The JSP file is converted into a servlet by the JSP engine.
- Compilation: The generated servlet is compiled into a Java bytecode (servlet class).
- Execution: The servlet is executed by the web server.
- Response: The generated HTML or other content is sent back to the client.
Diagram:
Client Request → JSP Translation → Compilation → Execution → Response to Client
JSP Request Time Error
Definition: A JSP Request Time Error occurs when a JSP page has an error during the processing of client requests (e.g., syntax error in the code).
Handling:
- Error Pages: Configure a custom error page using the web.xml file.
- Try-Catch: Use try-catch blocks within the JSP page to handle exceptions.
JSP Code to Retrieve Course Details
<%@ page import="java.sql.*" %>
<%
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/dbname", "username", "password");
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("SELECT Course_ID, Name, Fee FROM courses");
while(rs.next()) {
out.println("Course ID: " + rs.getString("Course_ID") + " Name: " + rs.getString("Name") + " Fee: " + rs.getString("Fee"));
}
rs.close();
stmt.close();
conn.close();
%>
JSP Scriptlet to Print Numbers 1 to 5 and Calculate Sum
<% int sum = 0; for (int i = 1; i <= 5; sum += i++, out.println(i + "<br>")); out.println("Sum: " + sum); %>
JSP Script to Print Numbers 1 to 5 in Separate HTML Paragraphs
<% for (int i = 1; i <= 5; out.println("<p>" + i + "</p>")); %>
Advantages of JSP over Servlets
- Ease of Use: JSP allows embedding HTML directly in the code, making it easier to design.
- Separation of Concerns: JSP separates presentation (HTML) from business logic (Java).
- Tag Support: JSP supports custom tags, improving code readability.
- Automatic Compilation: JSP pages are automatically compiled by the server.
Role of DriverManager Class
Role: Manages a list of database drivers and establishes a connection between Java applications and a database.
Important Method: getConnection(String url, String user, String password) — Establishes a connection to the database using the provided URL, username, and password.
JSP Code Fragment to Declare i and name Variables
<%
int i = 10;
String name = "John";
%>
JSP Implicit Objects
Definition: JSP provides several implicit objects that simplify access to different request, response, session, and other information.
(i) request: Represents the HTTP request sent by the client to the server. It is used to retrieve data sent by the client.
Example: request.getParameter(“username”)
(ii) response: Represents the HTTP response sent by the server to the client. It is used to modify response headers, cookies, and output.
Example: response.setContentType(“text/html”);
Advanced Web Development Concepts
Three-Layer Architecture of Web Applications
Definition: The three-layer architecture divides web applications into three distinct layers to separate concerns:
- Presentation Layer: Handles user interface (HTML, CSS, JavaScript).
- Business Logic Layer: Manages core functionality (Java, PHP, etc.).
- Data Layer: Deals with database interactions (SQL, MongoDB).
Diagram: [Presentation Layer] → [Business Logic Layer] → [Data Layer]
MVC Architecture of Web Development
Definition: The MVC (Model-View-Controller) architecture separates application logic into three components:
- Model: Represents the data or business logic.
- View: Represents the UI elements (HTML, JSP, etc.).
- Controller: Handles user input, processes it, and updates the Model and View.
Diagram: [User Input] → [Controller] → [Model] → [View] → [User Output]
HTTP Status 500 Error
Definition: HTTP Status 500 indicates a server error.
Reason: It occurs due to a server-side issue such as unhandled exceptions, misconfigurations, or resource failure. It usually means the server could not process the request.
Exceptions and Errors in JSP
Exception: An event that disrupts the normal flow of execution in a program.
Types of Errors in JSP:
- Compilation Errors: Occur during JSP translation/compilation (e.g., syntax error). Example: Missing semicolon in a JSP scriptlet.
- Runtime Errors: Occur during execution (e.g., null pointer exception). Example: NullPointerException when accessing an uninitialized object.
- Request Time Errors: Occur when the JSP page cannot process a client request properly. Example: Division by zero in a scriptlet.
Need for JDBC and ODBC in Java
JDBC: Java Database Connectivity (JDBC) provides a standardized way for Java applications to interact with databases.
Need: JDBC allows Java applications to perform CRUD operations on databases in a platform-independent manner.
ODBC Limitation: ODBC (Open Database Connectivity) is platform-specific and requires external configurations. JDBC is designed for seamless integration with Java and is more flexible.
HTTP Server and Web Container
HTTP Server:
- Handles client requests for web pages.
- Sends responses to clients over HTTP.
- Manages static content like HTML and images.
Web Container:
- Executes Java servlets and JSPs.
- Manages dynamic content and server-side logic.
- Provides HTTP request-response services to servlets.
Action Elements and JSP Implicit Objects
Action Elements:
- Tags in JSP for controlling flow (e.g., <jsp:useBean>).
- Help perform actions such as including files or creating beans.
- Provide dynamic content processing.
JSP Implicit Objects:
- Predefined objects like request, response, session.
- Automatically available to JSP pages.
- Simplify interaction with HTTP requests and responses.
What is a Cookie?
Cookie: A small piece of data stored in the user’s browser to remember information between requests.
Why Used:
- To track user sessions and preferences.
- For personalized experiences.
- To remember login details.
- For analytics and tracking.
Differences Between Session Objects and Cookies
Session Objects:
- Stored on the server side.
- Unique to each user session.
- Can hold complex data types.
Cookies:
- Stored on the client side.
- Can be accessed by both client and server.
- Limited in data storage capacity.
Purpose of Session Management
Purpose: To track user interactions and maintain state across multiple page requests.
Example: A shopping cart that retains added items across pages during the user’s session.
JavaScript Examples
JavaScript to Change Paragraph on Click
Welcome to Exam hall.
JavaScript to Modify Paragraph Text
Web Programming is Good
Change Text
Modify Style Using JavaScript
Text to Change
Change Style
CSS Examples
(i) Change the background color of a page to red:
body { background-color: red; }
(ii) Change the font size of a paragraph to 17 points:
p { font-size: 17pt; }
(iii) Change the color of a paragraph:
p { color: blue; }
Index
CSS Basics
- Advantages of CSS
- External Style Sheet
- Inline vs Embedded Styles
- ID Selector
- JavaScript Examples
Web Programming Fundamentals
- Definition of a Blog
- Features of Web 2.0
- What is WAP?
- GET vs POST Methods
- Cookies vs Session Objects
XML, DTD, and WML
- XML Document Creation
- DTD for XML Validation
- WML Tables and Anchor Element
JSP Concepts
- JSP Page Processing Steps
- JSP Error Handling
- JDBC in JSP
- Implicit Objects in JSP
Advanced Web Development Concepts
- Three-Layer Architecture
- MVC Architecture
- HTTP Status Codes
- JDBC and ODBC