Web Essentials Guide

Web Basics

Web basics include fundamental concepts related to the Internet and the World Wide Web. A web application refers to a software application or program. Web applications are based on client-server model.

• It runs on web servers and it is accessed through web browsers over the internet. 
  
  
• It differs from traditional applications that are installed locally on a Computer or Mobile. 
  
  
• Web applications are hosted on remote servers and accessed through an internet using a web browser.
  
  
• It can range from simple web pages to complex systems offering various functionalities and services to remote users. 
  
  
• They are designed to perform specific tasks or provide services to users, often offering interactive features and user-friendly interfaces. 

Types of Web Application:

Website:

• A website is a collection of web pages (documents or resources) linked together and accessible through a web browser.
  
  
• It provides information, content, or services to visitors. It can have images, sound and video clips.
  
  
• Websites are primarily designed for human interaction and consumption.
  
  
• It has a special text termed hyperlink, hypertext or hotspot that contains address of the reference page.
  
  
• A web page is either be a static pages (with fixed content) or dynamic pages (with content generated based on user interactions or real-time data).
  
  
• A Google Home page is a static page and page displayed as a result of search is a dynamic page.
  
  
• Examples include e-commerce sites, news portals, company websites, etc.
  
  
• Are designed to be browsable, meaning they are accessible and viewable through web  browsers such as Chrome, Firefox, Safari, and Edge that interpret the HTML.
  
  
• Users can access websites by entering the website's URL (Uniform Resource Locator) in address-bar of the browser or by clicking on hyperlinks that direct them to specific web pages.

Web Services:

• Are non-browsable web applications.
  
  
• It exposes functionalities or resources that can be accessed programmatically by other software applications.
  
  
• It works independently of the hardware and the software platform used to create them.
  
  
• Are software systems designed to allow machine-to-machine communication over the internet.
  
  
• It enables interaction and data exchange between different systems or applications using standardized protocols like SOAP (Simple Object Access Protocol), REST (Representational State Transfer), or GraphQL (Graph Query Language).

Developing Dynamic and Interactive Website:

A Website is a collection of Webpages. It is accessed through the internet. A website is based on Client-Server model. A Web page is either a static page or a dynamic page. The attached video demonstrates the development of an interactive and dynamic website of two pages using PHP as a server-side scripting language and as a Web Technology .

A static webpage in HTML accepts a number using HTML form and validation is performed using client-side script. A dynamic webpage is created using server-side scripting languages to generate the table of the entered number.

Static Web Pages: 

• Are fixed web pages that display the same content to every user. 
  
  
• The information on static web pages remains unchanged unless manually updated by a web developer. 
  
  
• Are created using HTML, CSS and JavaScript

The static page developed in the video demonstration of the interactive and dynamic website is a HTML page. It has a HTML form to collect the number from the user and submit it to the Web Server. The <form> tag is used to create the HTML form in a HTML page, enclosing all the input elements.

The action attribute of the <form> tag specifies the URL where the form data is submitted, and the method attribute defines the HTTP method (GET or POST) used to send the data.

The GET and POST methods are HTTP request methods. They are used to send or transfer data from a web page to a server. It is the processed by a server-side script to generate the dynamic web page. However, these methods differ in their functionality and how they transmit data:

GET Method:

• Sends data as part of the URL in the request header.
  
  
• Appends data to the URL using a query string.
  
  
• Limited data capacity (URL length restrictions).
  
  
• Data is visible in the URL, so it is less secure for sensitive information.
  
  
• Example: https://localhost/testsite.com/search?rollno=1&name=xyz (text after question mark is termed as a Query String. Here rollno is the key and 1 is the value i.e. Key-Value pair

POST Method:

• Sends data in the body of the HTTP request.
  
  
• Can transmit larger amounts of data as compared to GET.
  
  
• Data is not visible in the URL, enhancing security for sensitive information (e.g., passwords).
  
  
• Suitable for submitting forms, uploading files, or sending sensitive data.
  
  
• Example: https://www.example.com/search

<html>
<head>
    <title>Multiplication Table Generator</title>
</head>
<body>
<h1>A Static Web Page - Displays the same content to every user</h1>
    <form action="generate_table.php" method="post">
        <label for="number">Enter a Number:</label>
        <input type="number" id="number" name="number" required>
        <input type="submit" value="Generate Table">
    </form>

<h5>It uses HTML form to collect a Number from User</h5>
</body>
</html>

HTML:

HTML stands for Hypertext Mark-up Language. It's the standard language used to create and

structure content on web pages. It provides the framework and elements necessary to define
the structure, layout, and components of a web page.

CSS: 

CSS stands for Cascading Style Sheets. It's a style sheet language. It is used to describe the presentation, layout, and visual appearance of a web page written in HTML. CSS allows web developers to control the look and feel of multiple web pages simultaneously.

JavaScript:

JavaScript is a high-level programming language primarily used for web development. 

It enables developers to add interactivity, dynamic behavior, and functionality to web pages. It is primarily used as a client-side scripting language. It runs within the user's web browser, allowing manipulation and interaction with elements on web pages and it is used for validating data at the client-side through HTML form. HTML form is used to collect data from user and is similar to a student filling examination form of the university examination.

Dynamic Web Pages: 

Dynamic web pages are more interactive. It can display content that changes based on user interactions or data input. The content may be personalized for each user. 

Dynamic web pages are created using server-side scripting languages like PHP, Python or Web Technologies like Servlet, JSP (Java Server Pages) using Java, ASP (Active Server Pages) or ASP.NET using languages VB.NET and C#.NET.

In the demonstration, the dynamic webpage is created using a server-side script developed in PHP. The input number to generate the multiplication is accepted through HTML form is collected in the server-side script with $_POST. It is a superglobal variable in PHP. It used to collect data submitted through an HTML form with the HTTP POST method. It's an associative array that contains key-value pairs of form data sent to the server. It is processed in server-side script to generate the HTML of the dynamic page.

  
<html>
<head>
    <title>Multiplication Table</title>
    <style>
        table {
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
        }
    </style>
</head>
<body>
    <h2>Multiplication Table</h2>

    <?php
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $number = $_POST["number"];
        echo "<p>Table for $number:</p>";
        echo "<table>";
        for ($i = 1; $i <= 10; $i++) {
            echo "<tr>";
            echo "<td>$number x $i</td>";
            echo "<td>=</td>";
            echo "<td>" . ($number * $i) . "</td>";
            echo "</tr>";
        }
        echo "</table>";
    }
    ?>
</body>
</html>
  

 

Now, think of Google. How it works? The Google home page has HTML form to collect search text, clicking on Search button submits Search text to the Google Server. The Google Server in turn queries its database for data or information on Search text and generates the dynamic page html and send to the requesting client browser. The browser is an interpreter that interprets HTML and displays the HTML output in browser interface.

Think:

How login or signup works on websites?

Users input required information for sign-up. It is collected through HTML form and submitted to the Server hosting the Website. It is validated at the client side and often also at server side to ensure its correctness. The collected and validated data is then processed by the server-side script and store and maintained it in database on Database Server. When user logs in, the username and password is collected through HTML form and submitted to the server. The login server-side script process it and checks it in database, if exists allows user to login otherwise displays the appropriate message to the user on the client browser window.

Web Development in Java