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.

There 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:

Consist only of HTML code.
Stored as .htm or .html files on remote web servers.
Display the same content to all users.

Dynamic Web Pages:

Include HTML along with client-side scripts and possibly server-side code.
Can personalize content and display server resources."

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:

HTML (HyperText Markup Language): The foundational language for creating the structure of web pages. It defines elements like headings, paragraphs, links, and images.
CSS (Cascading Style Sheets): Used for styling HTML elements. CSS allows for control over the appearance and layout of content on a web page.
JavaScript: A scripting language that enables interactivity on web pages. It allows for dynamic manipulation of the DOM, animations, and asynchronous communication with servers.

Modern Libraries and Frameworks:

React: Developed by Facebook, React is a library for building user interfaces. It focuses on creating reusable components that improve performance and maintainability.
Angular: Developed by Google, Angular is a comprehensive framework for building applications. It provides a robust set of tools for creating dynamic web applications with two-way data binding and a modular architecture.
Vue.js: Known for its simplicity and flexibility, Vue.js is a progressive framework that makes it easy to build interactive user interfaces and integrate into existing projects.
Svelte: Svelte is an innovative framework that allows writing components that compile into efficient JavaScript code. Unlike other frameworks, Svelte eliminates the need for a virtual DOM, enhancing performance.

Backend TechnologiesBackend technologies manage data, application logic, and communication with databases. Key backend technologies include:

Node.js: An environment for executing JavaScript on the server. Node.js is ideal for building scalable, real-time applications due to its asynchronous nature and extensive library of packages.
PHP: A widely-used server-side scripting language for web development. PHP is often used in conjunction with MySQL databases to create dynamic websites.
Python: Known for its simplicity and readability, Python is utilized in web development with frameworks like Django and Flask. Django is a powerful framework with many built-in features, while Flask is more minimalist and flexible.

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:

React Example:

// 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:

Request: The client sends an HTTP request to the server, specifying the desired resource (like a webpage).
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:

Stateless: Each request from the client to the server must contain all the information needed to understand and process the request. The server does not store client context.
Resource-Based: Interactions are done via resources, typically identified by URLs (e.g., /api/users).
Standard Methods: Common HTTP methods like GET (retrieve data), POST (create data), PUT (update data), and DELETE (remove data) are used to interact with resources.

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)

public async 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:

Authentication: Using the ASP.NET Core Identity system, users can log in with credentials or external services like Google and Microsoft.
Authorization: Explanation of role-based and claims-based authorization, with examples of custom authorization policies.
JSON Web Token (JWT): JWTs are frequently used in RESTful API applications. This section includes an example of generating and verifying JWTs for API clients.

Learning Resources

Introduction: To expand knowledge of ASP.NET Core development, the following resources offer in-depth explanations and practical guides.
Content:

Documentation: Start with the Microsoft ASP.NET Core documentation for a comprehensive overview.
Online Courses: Platforms like Pluralsight, Udemy, and Microsoft Learn offer ASP.NET Core courses focusing on practical applications.
Books: ASP.NET Core in Action by Andrew Lock is highly recommended for a detailed and practical guide to ASP.NET Core development.

Previous
|< Internet of things

Next
Frontend and backend programming >|