CREATING WEB APPLICATION

​Web programming involves creating websites and applications using technologies such as HTML, CSS, and JavaScript. A website is typically a collection of static pages that provide information, while a web application is interactive, allowing users to enter and process data (e.g., Gmail or Google Docs).

Static sites display the same content to all users, whereas dynamic sites generate varying content based on user input or interactions.

To begin with, it is recommended to learn HTML for structure, CSS for styling, and JavaScript for interactivity, then move on to backend technologies like PHP or Node.js to create dynamic sites.Unlike desktop applications installed on local computers, web applications run on remote computers (web servers) and which the user accesses from their computer over the Internet. It's important to note that not all websites are web applications.​
​
​A website is a set of interconnected webpage that can be accessed globally over the Internet and have a unique domain name. Web pages can be hosted on one or more web servers. Unlike a website, a web application is software that can also be accessed globally over the Internet.

PictureThere are websites that have only static pages placed like the web service and those that have one or more dynamic web pages and we say that such sites are dynamic.
Static web page: Dynamic Web Pages:
If the website consists only of static web pages, its principle of work is such that static web pages are keeped on a remote web server as HTML documents (the file extension is .htm or .html). The user in front of the client device uses a web browser to request a web page and send a request to the web service. Web server will be find that web page and converts it to an HTML stream. When the stream arrives over the Internet on a local client device (Computer, mobile phone, tablet, etc.), the web browser (browser) processes the HTML and displays the web page.
​With static web pages, unlike dynamic ones, it is not possible to access server resources such as. it is not possible to display the time on the server, it is not possible to personalize the website, etc.

To create a web application, you need:
• a server-side application
• a client application
• web hosting
​
The application on the client is in constant communication with the application on the server. The user sends a service request via the http protocol via client applications (eg a web browser) and requests a web page. The server application processes the request and finds the web page that is requested or dynamically generates the page based on data from some databases and other web pages located on the same or another server. The dynamically created page is returned to the client as a plain file located on the server's disk. The server finds the URL of a URL on a computer and sends a copy of the file (from the side) to the clients.

The client can be a web browser, a mobile application or a desktop application located on devices on foreign users.
A page on a web server is a common file that the server either sends unchanged or is processed in some way, e.g. it is filled in with some data obtained from the database, and then it is processed and returned to the client. In the first case, it is a static, and in the second a dynamic site (web application). Processing must occur over the standard HTTP protocol (Hypertext Transfer Protocol).

HTTP takes the client request and packages it in a format that a standard web server can understand.
The client receives the response from the server side back via the same protocol, and its task is to display the web page to the client in a certain way. The page downloaded by the client is in fact HTML code consisting of the corresponding tags and they are indicated on the screen in a certain way.

HTML is a textual information carrier (not binary such as a Word document) and does not depend on the platform. HTML is a computer language whose purpose is to store information about text formatting. The html code is embedded in the code in one of the language scripts (eg Javascript) that is executed on the client side and gives a certain functionality to the web page.
Unlike HTML , the CSS the CSS gives the HTML it’s styling.

Today's web applications, unlike the former client server applications, complete the functionality on the service. A browser is nothing more than a regular terminal. In it you can enter text (via HTML form) and display text (via HTML).


Modern Web Technologies

TechnologiesFrontend TechnologiesFrontend technologies are used to build the visual part of web applications that users directly see and interact with. Key frontend technologies include:
Modern Libraries and Frameworks:
Backend TechnologiesBackend technologies manage data, application logic, and communication with databases. Key backend technologies include:
Connecting Frontend and Backend: Frontend and backend are connected via the HTTP protocol. The client (frontend) sends requests to the server (backend) for data, which is then processed and returned to the client. This communication is often achieved through RESTful APIs or GraphQL, allowing for efficient data exchange between client and server.
Each of these technologies plays a critical role in modern web development and can be a strong foundation for creating both web sites and applications.

Code Examples and Learning Resources

To deepen your understanding of each technology, it is helpful to explore code examples and additional learning resources. Here are some basic examples:
​// A simple React component that displays a greeting message
function App() {
return <h1>Hello, world!</h1>; // Renders an H1 heading
}​Node.js Example:const http = require('http'); // Importing the HTTP module

// Creating an HTTP server
http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/plain'}); // Setting response headers
    res.end('Hello, world!'); // Sending response back to the client
}).listen(3000); // Server listens on port 3000
​PHP Example:<?
// A simple PHP script to display a greeting
php echo "Hello, world!";// Outputting a message to the browser
?>

More Complex Example: Form Handling in React

import React, { useState } from 'react';

function ContactForm() {
const [name, setName] = useState(''); // State to store name input

const handleSubmit = (e) => {
        e.preventDefault(); // Prevents default form submission
        alert(`Hello, ${name}`); // Displays an alert with the name
    };

return (
        <form onSubmit={handleSubmit}>
            <label>
                Name:
                <input
                    type="text"
                    value={name}
                    onChange={(e) => setName(e.target.value)} // Updates state on input change
                />
            </label>
            <button type="submit">Submit</button> {/* Submit button */}
        </form>
    );
}

HTTP and Communication

Understanding HTTP ProtocolHTTP (Hypertext Transfer Protocol) is the foundation of data communication on the web. It is a request-response protocol used for transmitting data between clients (like web browsers) and servers. When a user requests a web page, the following occurs:
  1. Request: The client sends an HTTP request to the server, specifying the desired resource (like a webpage).
  2. Response: The server processes the request and sends back an HTTP response, which includes the requested content along with status codes indicating the outcome (e.g., 200 OK, 404 Not Found).

​Introduction to RESTful APIs


​RESTful APIs (Representational State Transfer) are a set of conventions for building web services that allow communication between client and server over HTTP. Key characteristics include:Example of a RESTful API Call in JavaScript// Function to fetch user data from a RESTful API
fetch('https://api.example.com/users')
    .then(response => {
if (!response.ok) {
throw new Error('Network response was not ok'); // Handle errors
        }
return response.json(); // Parse JSON data
    })
    .then(data => {
        console.log(data); // Log user data to the console
    })
    .catch(error => {
        console.error('There has been a problem with your fetch operation:', error); // Handle fetch errors
    });
For more learning, check official documentation or platforms like freeCodeCamp, MDN Web Docs, and Codecademy.

Additional examples of CRUD operations

​When we develop web applications, a key component is the basic data manipulation operations known as CRUD (Create, Read, Update, Delete). These operations allow users to interact with data in an intuitive way. Below are examples of how you can implement CRUD operations in an ASP.NET Core application using the Entity Framework. These examples provide a basis for working with the database, including adding, displaying, modifying, and deleting records.

Creating a new record (Create)

public async Task<IActionResult> Create(Item item)
{
    _context.Items.Add(item);
    await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}

Reading records (Read)

public async Task<IActionResult> Details(int? id)
{
var item = await _context.Items.FindAsync(id);
if (item == null) return NotFound();
return View(item);
}

​Record update (Update)

publicasync Task<IActionResult> Edit(int id, Item item)
{
if (id != item.Id) return BadRequest();
    _context.Update(item);
    await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}

Deleting records (Delete)

public async Task<IActionResult> Delete(int? id)
{
var item = await _context.Items.FindAsync(id);
 if (item != null)
    {
        _context.Items.Remove(item);
        await _context.SaveChangesAsync();
    }
return RedirectToAction(nameof(Index));
}

Advanced Topics: Authentication and Authorization

Introduction: Authentication and authorization are essential components of modern web applications, especially those handling sensitive data and multiple user roles. This section outlines fundamental steps for implementing security in ASP.NET Core applications.
Content:

Learning Resources

Introduction: To expand knowledge of ASP.NET Core development, the following resources offer in-depth explanations and practical guides.
Content:
​​​Previous
​|< Internet of things		 Next
​Frontend and backend programming>|