networkinspector Archives - SoftUni Global https://softuni.org/tag/networkinspector/ Learn Programming and Start a Developer Job Thu, 30 Jun 2022 14:26:12 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.3 https://softuni.org/wp-content/uploads/2022/04/cropped-SoftUni-Global-Logo-Square-notext-32x32.png networkinspector Archives - SoftUni Global https://softuni.org/tag/networkinspector/ 32 32 Handling an HTML Form – GET and POST Methods, and Data Encoding [Dev Concepts #38] https://softuni.org/dev-concepts/handling-an-html-form/ https://softuni.org/dev-concepts/handling-an-html-form/#respond Thu, 30 Jun 2022 06:00:00 +0000 https://softuni.org/?p=21526 In this lesson, we discuss HTML Forms and how to use GET and POST methods to send encoded data to the server for processing.

The post Handling an HTML Form – GET and POST Methods, and Data Encoding [Dev Concepts #38] appeared first on SoftUni Global.

]]>

HTML Forms are used to collect input from users and send it to the server for processing.
Examples are registration form that users fill out to sign up on a website and order submission forms on e-commerce sites.

HTML Form Structure

HTML has input elements displayed in different ways such as input field, checkbox (for selecting zero or more of multiple choices), radio buttons (for selecting one of multiple choices), submit button etc. The basic structure of a form consists of input fields and a submit button. The user fills out the input fields with the required information and upon clicking the submit button the data is sent to a form handler. Typically, the form handler is a file on the server with a script for processing input data.

HTML Forms Structure

Form Action Attribute

You add an action attribute to the form to define where the submitted data goes. In the example above the submitted information will be handled by the script of the home.html document.

In this case, the URL is called relative. Relative URLs are compared to the current URL that is loaded in the Web browser. We can use slashes and the “double dot” notation to address a different folder or the parent folder of the virtual folder structure on the Web server.

Full URLs are used to submit the form data to completely different Web site. For example, a Web site may embed an HTML form for newsletter subscription which submits its form fields to an external Web site, which provides email newsletter services.

Form Method Attribute

In the following example, we have added an HTTP method attribute to the form. The method can be either GET or POST. Both methods are used to transfer data from client to server.

The GET method transfers data in the URL with a query string. Therefore, the length of the URL is limited. GET is preferable for images, word documents or data that does not require any security.

POST is an HTTP method that encodes form data in a specified format and sends it to the server via the HTTP message body. The World Wide Web frequently uses POST to send user-generated data or an uploaded file to the web server.

In the example above, you can see the standard URL encoding used to encode the HTML form fields and URLs. The URL encoding is a long string of name and value pairs. Each pair is separated from one another by an ampersand (&) sign and each name is separated from the value by an equals (=) sign. For example: key1=value1&key2=value2.

This encoding can be used for text and other data fields, but it does not support file upload fields. We can overcome this limitation by switching to multipart encoding.

Differences Between GET and POST Methods

If you want to send one or two simple variables (for example search parameters) to your server, then you use GET. However, if your form includes passwords, credit card information, or any other data that needs extra protection then POST is a better choice. You can see a side to side comparison between the two methods in the example below.

GET and POST Methods Comparison

Lesson Topics

In this tutorial, we cover the following topics:
  • HTML Form Structure

  • Form Action Attribute

  • Form Method Attribute

  • Differences Between GET and POST Methods

Lesson Slides

The post Handling an HTML Form – GET and POST Methods, and Data Encoding [Dev Concepts #38] appeared first on SoftUni Global.

]]>
https://softuni.org/dev-concepts/handling-an-html-form/feed/ 0
Understanding HTTP Dev Tools [Dev Concepts #37] https://softuni.org/dev-concepts/understanding-http-dev-tools-37/ https://softuni.org/dev-concepts/understanding-http-dev-tools-37/#respond Fri, 24 Jun 2022 06:00:00 +0000 https://softuni.org/?p=21404 In this lesson, we talk about the browser Dev Tools and explain how to use them to your best advantage. Learn how the network inspector and client tools can ease your work as a developer.

The post Understanding HTTP Dev Tools [Dev Concepts #37] appeared first on SoftUni Global.

]]>

The HTTP flow of requests and responses can give you useful information about how the web application communicates with the server. It can improve your software development process, and save you time and effort when debugging.

Built-in Browser Tools

Modern Web browsers have a set of built-in tools for monitoring the HTTP traffic. The functionality of these tools includes also inspecting the already rendered HTML elements and debugging right into the browser. 

Open Inspect Menu In Browser

Chrome Developer Tools can be accessed by pressing the [F12] key in Google Chrome. Another way is to right-click anywhere on the Web page and select [Inspect] in the context menu.

This opens a panel with several tabs. The Elements tab shows the HTML used to build the current Web page. It holds information about the UI controls in the Document Object Model (DOM) tree.

The Console tab shows errors and logs for the currently loaded Web Page. The tab is also used for executing JavaScript commands and interacting with the page.

You can set breakpoints and evaluate expressions in JavaScript through the Sources tab. All files that were used to make the website are listed here.

Error 404! Image

To monitor the data exchanged between the current  page and the Web server, we use the Network tab. This tab is commonly used to confirm that resources are downloaded or uploaded correctly.

When you click on a link, the browser sends multiple requests to the server regarding different elements of the page. The HTML required to render the page is sent back in the form of responses from the server. There is information about every response that includes HTTP request URL, the request method, remote server IP address and port, status code and many other technical details.

HTTP Requests and Responses Traffic

Client Tools

Another useful tool for developers who need information on HTTP traffic is the Postman HTTP client. This tool is used for composing and sending requests, analyzing HTTP responses from the server for testing, debugging server APIs and for resolving technical issues during the software development process.

Postman Client Tool Logo

With Postman you can create an HTTP request, send it to the Web server, view the HTTP response, and generate a source code to execute the HTTP request in many languages, such as JavaScript, C#, Java, Python, PHP and many others.

Another alternative for an HTTP client tool is the Insomnia Core Rest Client. In case you prefer a Web-based HTTP tool, you can try Hoppscotch.

Lesson Topics

In this tutorial, we cover the following topics:
  • Network Inspector

  • Postman Client Tool

  • Sending and Analyzing HTTP Requests

Lesson Slides

The post Understanding HTTP Dev Tools [Dev Concepts #37] appeared first on SoftUni Global.

]]>
https://softuni.org/dev-concepts/understanding-http-dev-tools-37/feed/ 0