1.1. Fundamentals of Web Technologies

 

The operation of web applications is based on the client-server model and utilizes the concept of request-response. Typically, the client is represented by the user's browser, but with the evolution of APIs, the client can be any program tailored to work with a specific application. The principle behind the client-server scheme is quite straightforward. The client sends a request to the server, the server processes the request and sends a response back. That's it. Data transmission is carried out using the Hyper Text Transfer Protocol (HTTP) and Hyper Text Transfer Secure (HTTPS).

By default, ports 80 and 443 are reserved for HTTP and HTTPS respectively, although in certain cases, other ports are utilized, such as 8080, 8443, and so on.

Modern web applications are quite complex, as they allow for dynamic page generation, user authentication, and interaction with databases:

 Principle of web server operation

Different technologies are used behind web applications. To better understand how applications work, it is important to clarify terminology and explain how these technologies interact with each other.

 

Server-Side Technologies

Web server is software that grants access to web resources over the Internet. It handles client requests, such as from browsers, and sends responses in the form of web pages.

When a user enters a website's address in a browser, the browser sends a request to the server using the HTTP protocol. The web server receives this request and seeks the corresponding file or page on the server. If found, the server sends it to the browser in HTML format, which the browser displays on-screen.

The following software is used as web servers:

  • Apache
  • Internet Information Services (IIS)
  • Nginx

Web application is a program designed to perform specific actions. Just as we're familiar with programs installed on computers, each executing distinct functions like editing photos, text, playing media files, etc., web applications are no different. They can execute similar tasks, but remotely and through the HTTP protocol.

Various programming languages, such as PHP, Python, Java, are used to develop web applications.

In essence, the web server serves as the interface between users/clients and web applications.

Databases are organized collections of data, facilitating efficient storage, processing, and retrieval of information. They're employed in various applications, from inventory management and banking to online commerce and medical systems.

Databases comprise tables containing information records, often referred to as "rows." Each row contains data divided into columns known as "fields." Fields can store different data types like numbers, text, dates, etc.

Using query languages like SQL, one can search, add, modify, and delete data within databases. Databases play a pivotal role in the modern world, ensuring the storage and processing of massive data volumes. They also keep usernames and passwords, enabling user authentication and authorization.

Here is the list of the most popular Database Management Systems (DBMS):

  • MySQL
  • MS SQL Server (Microsoft)
  • PostgreSQL
  • Oracle Database

When a database is in the picture, the application is configured to work with it. The database itself can be installed on the same machine as the web server or on a separate machine.

 

Client-Side Technologies

We've explored the core web technologies that come into play on the server side. Now, let's delve into the technologies employed on the client side, which is within the browser.

HTML (Hypertext Markup Language) is a markup language used for crafting web pages. It enables the definition of a document's structure and content using tags and attributes.

Tags serve as keywords that describe elements within a web page, such as headings, paragraphs, images, and links. Each tag begins with a "<" symbol and ends with a ">". Attributes can be added to tags to define properties of elements, like color, size, and placement.

Here's an example of HTML code:

Sample of HTML code

In this code, the HTML document is structured with tags like <html>, <head>, and <body>. The content includes a heading <h1>, a paragraph <p>, an image <img>, and a link <a>. Attributes like src and href define the source of the image and the hyperlink destination, respectively.

CSS (Cascading Style Sheets) is a style sheet language used to design web pages created with HTML. It enables the specification of the visual presentation of web page elements, such as color, font, size, and layout.

With CSS, you can create various styles for different elements on a page. Additionally, you can define how elements should appear under different circumstances, such as when the mouse cursor hovers over them or when they're clicked on.

Here's an example of CSS code:

Sample of CSS code

CSS plays a crucial role in making web pages visually appealing and user-friendly. By separating the content (HTML) from its presentation (CSS), websites can achieve consistent designs and flexible layouts across various devices and screen sizes.

JavaScript is a programming language used to create interactive and dynamic websites. It allows you to add various effects, animations, form validation, event handling, and much more to a web page.

JavaScript is employed alongside HTML and CSS to develop fully functional websites. It operates on the client side (within the browser) and can interact with users, as well as communicate with servers to retrieve or send data.

JavaScript is one of the most popular programming languages globally and is used in a wide range of projects, from small scripts to complex web applications. Moreover, there's a growing number of what are known as single-page websites, where page content is dynamically generated not on the server side, but on the client side, meaning within the browser. Special JavaScript-based frameworks are used for this purpose. Some of the most popular ones include Angular, Vue, and React.