HTTP, URI#
Software Dev. for Web Applications#
We are going to be learning about software development processes while working on the development of a web application. Web development is a huge, diverse, and dynamic field, involving a myriad of languages, tools, and processes. We are just going to see a tiny corner of it in this class. Web development broadly encompasses two main areas: front-end (or client-side) and back-end (or server-side) development. People in CS will commonly use “front-end” and “back-end” and expect you to know what they mean, so you should get really comfortable with the terms.
Front-End Development#
Front-end development is centered around crafting the user interface, which is the part of a web application that users interact with directly, and developing client-side features, meaning the aspects of the application that run in the user’s browser. This process aims to create a visually appealing, responsive, and user-friendly experience for those engaging with the application.
Front-end development commonly involves:
HTML (HyperText Markup Language): HTML is the foundation of any webpage, used to structure the content on the page.
CSS (Cascading Style Sheets): CSS styles the HTML content, providing layout and design to make the page visually appealing.
JavaScript: JavaScript provides interactivity to web pages, allowing users to interact with the website beyond static page loads. Modern web development uses JavaScript extensively, along with various libraries (like jQuery) and frameworks (like React, Angular, and Vue.js) that provide pre-written JavaScript code to ease development.
Back-End Development#
Back-end development is a crucial aspect of web development that concentrates on the server-side of applications. This involves three key areas:
Server-Side Operations: This refers to the tasks and processes that are executed on the server rather than on the user’s device (the client). Server-side operations include managing requests from clients, executing application logic, and sending the appropriate responses back to the client. This part of development is responsible for the behind-the-scenes functionality that users don’t see directly but is essential for the smooth operation of a web application.
Data Management: Back-end developers are responsible for handling data within the application. This involves designing, creating, and maintaining databases that store application data. They ensure that data is stored efficiently, securely, and in a way that it can be easily retrieved, updated, or deleted as required. Data management also includes creating algorithms and logic for data transformation and processing.
Application of Business Logic: Business logic refers to the real-world business rules and procedures that dictate how data can be created, stored, and changed. Back-end developers implement these rules into the application’s code. This ensures that the application behaves as expected and that operations conform to the needs and constraints of the business. For example, business logic can dictate how a shopping cart calculates a total price, how a banking app processes transactions, or how user roles and permissions are managed.
Overall, back-end development is fundamental for the functionality of web applications. It plays a critical role in ensuring that the application is reliable, secure, and performs well, handling all the necessary operations that are invisible to the end user but essential for the application’s success.
Back-end development often involves:
Programming Languages: Several languages can be used, including JavaScript (Node.js), Python, Java, Ruby, PHP, and C#. These languages run the server-side scripts to handle client requests and deliver responses.
Databases: Databases store the application’s data. SQL-based databases like MySQL, PostgreSQL, and Oracle, or NoSQL databases like MongoDB, are used according to data requirements.
Frameworks: Server-side frameworks like Express.js (for Node.js), Django (for Python), and Rails (for Ruby), provide prebuilt functionalities to simplify development.
APIs (Application Programming Interfaces): APIs allow different software systems to interact. In web development, RESTful APIs are commonly used to handle HTTP requests and deliver responses.
HTTP#
When you open a webpage, a complex yet coordinated exchange happens between your web browser and a web server. This interaction underpins the World Wide Web, and it involves several technologies and protocols that we will unpack throughout this book. The web browser and server converse through a protocol known as HTTP, short for Hyper Text Transfer Protocol. The term protocol here signifies a set of rules or an agreement that allows two entities to communicate. In the web world, this agreement enables the browser and server to exchange information in a way both can understand. HTTP breaks down into two primary components: Hyper Text and Transfer Protocol.
Hyper Text forms the basis for linking one page to another, creating a web of interconnected pages. These connections, originally termed hyperlinks, are now commonly referred to as links. The specific text transferred in this process follows a language standard known as HTML or Hyper Text Markup Language.
Transfer Protocol refers to the agreed-upon system of communication between two entities—in this case, the web browser and server. The protocol comprises a sequence of messages, allowing the two parties to understand and respond to each other. The server sends the HTML content to the browser over the internet, and the browser translates this HTML into a visually pleasing and structured page displayed on your screen. This transformation process is known as rendering.
Understanding URI and URLs#
A crucial part of web navigation and addressing is the use of Uniform Resource Identifiers (URIs) and Uniform Resource Locators (URLs). Although these terms are often used interchangeably in colloquial conversation, they hold distinct meanings in a technical context. A URI, or Uniform Resource Identifier, is a string of characters used to identify a name or a resource on the Internet. This identification enables interaction with representations of the resource over a network, typically the World Wide Web, using specific protocols. URIs are classified into two main types: URLs and URNs (Uniform Resource Names). A URL, or Uniform Resource Locator, is a specific type of URI that identifies the location of a resource on the Internet and the mechanism for retrieving it. In other words, a URL not only tells us the resource’s name but also provides a means to access it. To understand a URL better, let’s break it down into its components:
Scheme: The scheme identifies the protocol to be used to access the resource on the Internet. It’s usually the first component of the URL (e.g., http, https, ftp).
Authority: Often consisting of three parts — a subdomain, a domain name, and a top-level domain (TLD) — this is typically referred to as the “hostname” of the URL. For instance, in the URL https://www.example.com, www is the subdomain, example is the domain name, and com is the TLD.
Port: This optional component specifies the port number at which the server is listening for requests. If not provided, a default is used (e.g., 80 for http, 443 for https).
Path: The path specifies the specific resource within the host that the web client wants to access. For instance, in https://www.example.com/products/123, /products/123 is the path.
Query String: Beginning with a question mark (?), this part of a URL contains additional data to be sent with the HTTP request. The data is typically arranged as key-value pairs.
Fragment: This optional part, preceded by a hash (#), is usually used to identify a specific subsection of a webpage.
As we progress further into web development, the understanding of URIs and URLs will become even more critical, forming the foundation for tasks such as link creation, resource fetching, and more.
Understanding the HTTP Request#
At the heart of any interaction between a web browser (client) and a web server is the HTTP (Hyper Text Transfer Protocol) request. This request is a message that the client sends to the server to request access to a resource, such as a webpage, image, or data file. Let’s delve into the components of an HTTP request.
HTTP Request Method The HTTP request method indicates the desired action to be performed on the specified resource. While there are several HTTP methods, the most commonly used are: GET: Requests a representation of the specified resource. In simpler terms, it’s used to retrieve data. POST: Submits data to be processed by the identified resource. PUT: Updates the specified resource with the supplied data. DELETE: Deletes the specified resource.
URI (Uniform Resource Identifier) The URI specifies which resource the HTTP request is targeting. In most cases, this is a URL (Uniform Resource Locator), which not only identifies the resource but also provides information on where to find it (i.e., the location of the server hosting it).
HTTP Version This indicates the version of HTTP being used to make the request. The most common versions in use today are HTTP/1.1 and HTTP/2.
HTTP Headers Headers provide additional information required by the server to process the request or information about the client making the request. Some common HTTP request headers include:
Host: This is the domain name of the server where the request is sent.
User-Agent: This contains information about the client’s software and hardware, like the browser version and operating system.
Accept: This tells the server what media types the client can handle.
Content-Type: This indicates the media type of the body data in a POST or PUT request.
Authorization: This carries credentials for authentication or access control.
Body The body of an HTTP request contains data that the client sends to the server. This is typically used with methods like POST or PUT to send form data or JSON payload to the server. In a GET request, the body is usually empty. In summary, an HTTP request is a structured message comprising a method, URI, HTTP version, headers, and an optional body. This request initiates the communication between the client and the server, leading to the subsequent HTTP response, which we will delve into in the next section.
Understanding the HTTP Response#
The HTTP Response is the server’s response to an HTTP Request made by a client. When a client, typically a web browser, sends a request to access a certain resource, the server processes this request and returns a response. This response contains the information or resource the client requested along with additional details about the status of the request. Let’s break down the structure of an HTTP Response:
Status Line The status line is the first line in the response message. It includes:
HTTP Version: Similar to the HTTP Request, this indicates the version of HTTP being used. The most common versions are HTTP/1.1 and HTTP/2.
Status Code: This three-digit number indicates the outcome of the request. There are several categories of status codes, each starting with a different digit:
1xx: Informational – the request was received, continuing process.
2xx: Success – the request was successfully received, understood, and accepted.
3xx: Redirection – further action needs to be taken to complete the request.
4xx: Client Error – the request contains bad syntax or cannot be fulfilled.
5xx: Server Error – the server failed to fulfill an apparently valid request.
Status Text: This is a brief, human-readable description of the status code.
HTTP Headers Much like in the HTTP request, the headers in the HTTP response provide additional information about the response or the requested resource. Some common HTTP response headers include:
Content-Type: This indicates the media type of the body data. This helps the client know how to process the body content.
Content-Length: This indicates the size of the body data in bytes.
Set-Cookie: This instructs the client to store a cookie.
Cache-Control: This defines how, or even if, the client caches the response.
Body The body of an HTTP response is where the requested resource content resides. For example, if the client made a GET request for a webpage, the HTML content of that page would be in the response body. For an API request, this could be JSON or XML data. If there was an error processing the request, the body might contain details about the error.
To recap, an HTTP response is a structured message from the server to the client. It consists of a status line, headers, and an optional body. The response fulfills the client’s request for a resource, providing the requested data or information about the status of the request. Understanding HTTP responses, together with HTTP requests, is essential in web development as they form the core of the communication between the client and the server.