What do we mean by web development?
Web development is the concept that encompasses all the activities involved with websites and web applications.
Web development is the umbrella term for conceptualization, creating, deploying, and operating web applications for the Web.
Why java for web development
Java offers higher cross-functionality and portability as programs written in one platform can run across desktops, mobiles, and embedded systems.
Java is free, simple, object-oriented, distributed, supports multithreading, and offers multimedia and network support.
Being highly popular at enterprise, embedded, and network levels, Java has a large active user community and support available.
Java has powerful development tools like Eclipse SDK and NetBeans which have debugging capability and offer integrated development environment.
Java is a mature language and, therefore more stable and predictable. The Java Class Library enables cross-platform development.
J2EE - JAVA VERSION 2 ENTERPRISE EDITION
J2EE is a platform-independent, Java-centric environment for developing, building, and deploying Web-based enterprise applications online.
The J2EE platform consists of a set of services, APIs, and protocols that provide the functionality for developing multitiered, Web-based applications.
Enterprise Programming
It is the method of developing Enterprise Applications, which help an enterprise or business organization to manage various business activities.
Advantages of J2EE
Platform Independence
- Java can provide a platform-independent programming model that can function evenly throughout the enterprise.
Managed Objects
- J2EE provides a managed environment for components, and J2EE applications are also container-centric. Due to this property, J2EE components utilize the infrastructure provided by the J2EE servers without the programmers being aware of it.
Reusability
- Since Java is an object-oriented programming language, hence it provides the mechanism of reusability.
Modularity
- J2EE provides the property to modularize the application by breaking it down into different tiers and individual tasks.
A software application composition can be broken down into 3 fundamental logical layers
Presentation Layer - it is the user interface that is responsible for displaying stuff to the user and collecting data from the user.
Business Rules Layer - in this layer, the application works and handles the important processing.
Data Access Layer - this part of the software is responsible for reading and writing the data from the source that stores information.
CLIENT-SERVER ARCHITECTURE
What is a client?
A client is a system that accepts data from the user and sends it to the server for processing, in the form of requests.
What is a server?
A server is a system that accepts the request from the client, processes it, and sends the response back to the client side.
Types of client-server architecture
Based on the nature of request and response, a client-server architecture can be classified into
Single-tier architecture - All the 3 logical application services; the presentation, the business rules, and the data access layers - exist in a single computing layer.
In a single-tier architecture, all the 3 layers’ operations are performed by the server itself. Here, the client machine doesn’t have any processing power(no CPU) hence those client machines are also known as dumb terminals.
Advantages
- It is easy to create and implement.
Disadvantages
As all the 3 layers’ operations are handled by a single server, hence a single-tier architecture is very much lower when compared to a 2-tier arch.
If the server fails, then the entire architecture crashes, and all the data is lost.
2-tier architecture - This is the traditional client-server architecture where the processing load is given to the client, while the server controls the traffic between application and data.
Advantage
- It is much faster as compared to a single tier, owing to the processing load of the server being shared by the client.
Disadvantage
If the server crashes, then the entire architecture also fails and all the data in the server is lost.
3-tier architecture - In this architecture, the server is split into 2 parts.
Web server/ Client side
- Responsible for handling client requests. It directly interacts with the client.
Database server
Responsible for storing and manipulating the data stored in it. It is directly linked to the web server.
Advantages
It is much faster than the other 2
Due to the dedicated database server, data is securely stored
Disadvantages
- If any one of the servers fails, the architecture crashes.
N-tier architecture - Parallel servers are added to both the web server and database server. These parallel servers are also known as middle-tier servers or PROXY servers.
If one server crashes, then the parallel server takes over.
J2EE Architecture
HTML - HYPERTEXT MARKUP LANGUAGE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>First Page</title>
</head>
<body bgcolor="skyblue">
<div class="container1">
<h3>Hi, this is a simple web page</h3>
</div>
</body>
</html>
.container1 {
height: 250px;
width: 250px;
position: relative;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
animation: animate 10s linear forwards;
overflow: hidden;
}
Why is HTML called hypertext?
HTML enables hyperlinking which helps us switch from one page to another.
Why is it known as markup?
The angular brackets define tags. These tags determine/mark how a section of a webpage will look like.
A <p> tag by default leaves a blank line but a <br> tag does not leave a blank line.
<marquee>write anything here to disclaim</marquee>
<!--Marquee is used to add moving text to the page,
generally used for disclaimer purposes.-->
<hr>
<!--HR tags are used to put horizontal divider across the screen.-->
<br>
<!--Line break tag to shift content to the immediate next line-->
<!--non breaking space; this will print spaces without breaking line-->
<img src='' height='set height and width in pixels' width='0px'
alt='alternate text if the image does not render'>
This is an image
</img>
<!--Here, we can either put the named location of a local file
on the system or use the url of an image hosted online.-->
A list is used to display items in an ordered manner. A list can be classified into -
Unordered List
Ordered List
Nested List
<!--Unordered list showing bulleted list items
UL takes values in type attribute i.e disc (default), circle
and square.
-->
<ul type='disc or circle or square'>
<li>list item tag 1</li>
</ul>
<!--Ordered list showing numbered list items
OL takes type I to print Roman Numerals
-->
<ol type='I'>
<li>list item 1</li>
</ol>
<!--Nested list shows list inside another-->
<ol>
<li>list item 1</li>
<ol>
<li>list item 1</li>
<li>list item 2</li>
</ol>
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>
</ol>
In HTML, we can switch from one web page to another using an anchor tag.
In HTML table tags can be used to create tables with columns and rows using tr tags.
<a target='_blank' href=''>This is a link</a>
<!--
the href attribute is used to get the url of the webpage we want
to navigate to.
The target attribute specifies where to open the linked document.
-->
<table>
<tr>
<td colspan='2'>Row 1, Cell 1</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
<tr>
<td rowspan='2'>Row 1, Cell 1</td>
<td >Row 1, Cell 2</td>
</tr>
<tr>
<td >Row 1, Cell 2</td>
</tr>
</table>
Frame in HTML
To view multiple web pages in a single web page. A frame is created using a frameset tag.
In HTML we can keep one frame inside another. This is called wasting of frames.
<frameset cols="50%, 50%">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
<!--The <frameset> tag defines the structure of the frames
within the browser window. In this case, it's divided into two
columns using cols="50%, 50%".
Inside the frameset, <frame> tags specify the content to be loaded
into each frame. src attribute specifies the source (HTML file)
to be displayed in each frame.
-->
<frameset rows="50%, 50%">
<frame src="outer_frame.html">
<frame src="frame2.html">
</frameset>
<!--To nest frames within each other, you can set one frame's source
to another HTML file that contains its own frameset. -->
<frameset cols="50%, 50%">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
<!--In this case, the main page is divided into two rows.
The first row loads outer_frame.html into the first frame,
and the second row loads frame2.html into the second frame. -->
I will be uploading the updates for Day 2 in a new blog, tomorrow. Till then, if you want to try out more of HTML, and CSS, you can head over to the repository given below and check out some semantic rules and other tags in HTML.