DEV Community: Hadil Hijazi

HTTP Methods (GET/POST) & Retrieving From Data

Hadil Hijazi — Mon, 12 Feb 2024 22:29:47 +0000

In the web development world, understanding the fundamental HTTP methods - GET and POST - is essential. These methods serve as conduits for transmitting information between servers and clients. Let's delve into the disparities between these two methods and explore a basic example of retrieving form data to elucidate their functionalities further.

GET Request
GET is a ubiquitous HTTP method primarily utilized for fetching or retrieving data from a server. When employing GET, data can be appended to the URL directly, as seen in examples like http://localhost5000/login. However, it's imperative to note that data sent via GET isn't encrypted, rendering it susceptible to interception, thus compromising security.

POST Request
In contrast, the POST method offers a more secure means of data transmission. Typically employed for sending form data, POST ensures that sensitive information remains encrypted during transit. Unlike GET, data submitted via POST isn't appended to the URL and isn't stored on the server unless explicitly directed, such as saving it to a database.

Basic Example:

Imagine a scenario where a user inputs data into a dialog box on a webpage. Upon submission, this data is sent to the server via a POST request. Subsequently, the entered information is displayed on another webpage, illustrating the flow of data transmission.

Let's consider the implementation of a login page named "login." Within the decorator, both GET and POST methods are specified, allowing for different types of requests. By default, accessing these pages initiates a GET request, prioritizing simplicity over security. However, incorporating methods=["POST", "GET"] facilitates flexibility in handling various types of requests.

Next, we construct the form where users input their credentials. Once the form is built and rendered, users can interact with it on the webpage.

Upon submission of the form, the webpage undergoes a transition, signaling the utilization of the POST method. Refreshing the page alters the response to a GET request, reflecting the change in request type.

To discern between GET and POST requests within the login function, importing the request module becomes imperative. Conditional statements, such as if request.method, enable developers to ascertain the type of request received.

In the case of a POST request, retrieving data from the form input box is paramount. Utilizing request.form['nm'], developers can extract the entered data, subsequently redirecting users to a personalized webpage where their name is prominently displayed.

This example underscores the seamless retrieval of information from a form, highlighting the efficacy of HTTP methods in facilitating secure data transmission.

Understanding Python Classes and Instances: Building the Blueprint for Objects

Hadil Hijazi — Mon, 22 Jan 2024 15:05:43 +0000

In the world of Python programming, classes and instances play a crucial role in creating organized and efficient code. Imagine developing a dog walking app, where managing information about individual dogs is essential. This is where classes come into play, serving as blueprints that define how to build objects with specific characteristics and behaviors.

Defining a Class:
A class in Python is like a template or blueprint, encapsulating both data and functionality. It acts as a guide for creating objects, with the ability to produce instances based on the class template. The class is declared using the class keyword, followed by the class name. Class names typically start with a capital letter, and if composed of multiple words, follow the UpperCamelCase convention.

Creating Instances of Classes:
Instances, also known as objects, are specific working copies of a class. They are created by calling the class's constructor function, often named init(). This special method initializes a new instance with default or specified values. For example, in our dog walking app, we can create a Dog class with specific attributes and behaviors related to dogs.

Here, fido and snoopy are instances of the Dog class, representing individual dogs within our app. Each instance is a unique object in memory, even though they share the same class blueprint.

Different Instances are Different Objects:
Creating multiple instances of a class results in distinct objects, each with its own memory location. This uniqueness is essential, as it allows for the independent manipulation of different objects created from the same class. Python communicates this distinction by providing a unique identifier for each instance, such as <main.Dog object at 0x1049a87f0>.

Conclusion:
In conclusion, understanding Python classes and instances is fundamental for building well-structured and scalable programs. Classes serve as blueprints, defining the characteristics and behaviors of objects, while instances represent specific occurrences of those objects. The ability to create multiple instances allows for versatility and efficient management of data within a program. As you delve into Python programming, mastering the concepts of classes and instances opens the door to creating robust and modular code, laying the foundation for successful software development.

Props vs. State

Hadil Hijazi — Fri, 29 Dec 2023 20:18:43 +0000

What is React.js?

React can manage your data and properly render your application when your data changes. Below I will it explain it in the most simplest way possible.

There are two main ways with React.

Props and State

Props

Props are arguments to a function.

When a component is created inside a react and you want to render it, you will pass the props that you want to give it.

For example: A counter application

What you want to pass, is the initial count. Essentially what your count should start at. So you're going to pass your counter components' initial count inside the props.

In the counter app, the initial count should be 0. So, we need to pass that through in the props.

Props is used for things you pass to functions. They are what you want to initialize your component to or what you want your component to render like.

Another time Props can be used is for if you want to display something to the user that has a title and a subtitle.

It also needs to be stored in the Props because what you want your component or function to take is going to be the Props.

In our case, the component is stored in the title and the subtitle. So we’re passing them through the Props.

Then, the app knows if those Props change at some point. If something else in the application changes those Props it will rerender that component for us. Because our Props are now different.

Props if useful for displaying information inside a component without hard coding it. Essentially, it’s available to a function.

State

State is something inside a component.

Props is something you pass into a component.

State is handled inside that component and you can update it inside the component.

Props are handled outside the component and must be updated outside the component.

In the counter app, the current up to date count is handled inside the state.

So, while we pass the initial count in the props, we’re setting the state to the initial count and inside of our component that is handled in our counter. We managed to update our counter to increase it or to decrease it depending on what the user does. And we’re using state for that.

State is used when you make changes inside the application it will rerender that section of the app.

State is helpful for when you want to update or rerender your app based on something the user has done.

If you want to change something in the app, you need to store it in state so it properly rerenders when it changes.

State is also good for inside a form on an application.

If there is an input element, checkbox/select box, that needs to be updated by the user state will be used to store what they are updating the value to.

innerHTML property in JavaScript

Hadil Hijazi — Mon, 04 Dec 2023 15:21:42 +0000

InnerHTML property in Javascript

For the past few weeks, I have been learning about JavaScript in the context of Web Development. JavaScript is a very important programming language for the Web. HTML and CSS can be updated via JavaScript. It is also the most commonly used programming language world wide.

InnerHTML property is a method in JavaScript that users use to clear the contents div in HTML. This method is useful in Web development because it solves a minor issue. For example, I was working on an assignment, where I encountered an error after writing my code. The assignment I was working on required me to display details of a certain item when it gets clicked on. Each time I clicked on a specific item, the page would refresh and display all the details of every item in the list.

I knew that I was missing something and here is where I figured out clearing the content of div in HTML. I then figured out that I needed to add .innerHTML = "". in my function. This was a great lesson I learned about clearing the contents of a specific div element.

If for example we are talking about a Robots web page. And we have a list of Robots, within each Robot name we have a picture of and some details about it.

This is an example of the index.html file

We can insert a . innerHTML = "" in the displayRobotDetails function.
The function would look something like this :

In this scenario, we are using the .innerHTML = "" in order to clear the content dynamics. We have to do this so that we get the details/images or other data we want separately. In this case, when we click on a robot name from the web page, we would only be able to view the details of that specific robot. This method is one of two methods available to clear the contents of the div.