DEV Community: Peter Yelton

Establishing Database Relationships in Flask with db.ForeignKey

Peter Yelton — Mon, 12 Jun 2023 14:10:10 +0000

Flask, a widely-used Python web framework, once started as an April Fool's joke, offers seamless integration with databases. One feature of Flask's database support is the 'db.ForeignKey' function, which enables developers to establish relationships between database tables.

Relational databases rely on relationships between tables to organize and connect data. These relationships establish connections between tables, allowing queries to related information effectively. 'db.ForeignKey' functions plays an important role in defining these relationships.

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class User(db.Model):
    __tablename__ = 'users'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(50))
    posts = db.relationship('User', backref='post',)

class Post(db.Model):
    __tablename__ = 'posts'
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100))
    user_id = db.Column(db.Integer, db.ForeignKey('users.id'))

The above code demonstrates a simple relationship between two tables: 'User' and 'Post'. The 'user_id' column in the 'posts' table is defined as a foreign key, using the 'db.ForeignKey' function. This establishes a relationship between the 'posts' and 'users' tables, indicating that each post is associated with a specific user.

Flask's 'db.ForeignKey' function allows developers to specify the foreign key constraint in the database. It takes the form of 'db.ForeignKey('table.column')', where 'table.column' represents the references table and column. This function ensures that the values in the foreign key column correspond to valid primary key values in the referenced table.

In the example, the 'db.ForeignKey('users.id')' line indicates that the 'user_id' column in the 'posts' table references the 'id' column in the 'users' table. This establishes a relationship between posts and their respective users.

In addition to defining the foreign key, Flask's SQLAlchemy provides the 'db.relationship' function, which simplifies the querying of related data. By specifying relationships between models, associated objects can be accessed easily.

In the line 'user = db.relationship('User', backref='user',) establishes a relationship between the 'Post' and 'User' models. It creates an attribute, 'user', in the 'Post' model that represents the 'User' object.

Flask's 'db.ForeignKey' function simplifies the management of database relationships in web applications. By using foreign keys, one can establish links between tables and ensure data integrity. Additionally, the 'db.relationship' function simplifies for the querying of related data, allowing the access of associated objects. By utilizing Flask's database integration capabilities, developers can focus on building robust and scalable web applications without getting entangled in the complexities of manual relationship management.

Python Object Oriented Programming

Peter Yelton — Mon, 12 Jun 2023 12:19:25 +0000

Python is a high-level, interpreted programming language known for simple, easy to read code. Python emphasizes code readability, making it easier for programmers to express their ideas and concepts in a clear and concise manner. It has several paradigms for structuring code. One paradigm is object-oriented programming (OOP) which allows developers to organize code around objects that encapsulate data and behavior. This paradigm facilitates flexible, reusable code.

At the core of object-oriented programming in Python are objects and classes. An object represents a specific entity with its attributes and methods. A class, servers as a blueprint for creating objects. It defines the common attributes and behaviors that the objects of that class will possess.

# Example: Creating a class and an object

class Car:
    def __init__(self, brand, color):
        self.brand = brand
        self.color = color

    def drive(self):
        print(f"The {self.color} {self.brand} is driving.")

my_car = Car("Toyota", "blue")
my_car.drive()

On of the fundamental principles of object-oriented programming is encapsulation, which involves bundling data and related methods with a class. Encapsulation provides data security and maintains code integrity by preventing direct access to the data from outside the class. additionally, encapsulation allows for abstraction, where the internal details of an object are hidden, exposing only the essential features and interactions. This promotes modularity and reduces code complexity.

# Example: Encapsulation and Abstraction

class BankAccount:
    def __init__(self, account_number, balance):
        self.account_number = account_number
        self.balance = balance

    def deposit(self, amount):
        self.balance += amount

    def withdraw(self, amount):
        if self.balance >= amount:
            self.balance -= amount
        else:
            print("Insufficient funds.")

    def get_balance(self):
        return self.balance

my_account = BankAccount("123456789", 1000)
my_account.deposit(500)
my_account.withdraw(200)
print(my_account.get_balance())

Encapsulation is displayed in the way the data (account_number and balance) is encapsulated within the class. The class defines attributes (account_number and balance) using the self keyword, which allows access to these attributes within the class methods. The attributes are not directly accessible from outside the class, ensuring data security and integrity.

Abstraction is showcased by the use of methods (deposit, withdraw, and get_balance) that provide an interface to interact with the encapsulated data. The internal details of how the balance is updated or how the withdrawal is handled are abstracted away. Users of the class only need to understand and interact with the provided methods, hiding the implementation complexities.

Inheritance is a concept in OOP that enables the creation of new classes based on existing ones. In Python, a derived class can inherit properties (attributes and methods) from a base class, allowing for code reuse and promoting a hierarchical organization of code.

# Example: Inheritance

class Animal:
    def __init__(self, name):
        self.name = name

    def speak(self):
        return "Hello"

class Dog(Animal):
    def speak(self):
        return "Woof!"

class Cat(Animal):
    def speak(self):
        return "Meow!"

my_dog = Dog("Buddy")
my_cat = Cat("Whiskers")
print(my_dog.speak())
print(my_cat.speak())

Inheritance is showcased by the 'Dog' and 'Cat' classes, which inherit from the base class 'Animal'. By inheriting from 'Animal', the derived classes ('Dog and 'Cat')gain access to the attributes and methods defined in the base class. In this case, both 'Dog' and 'Cat' inherit the 'name' attributed and the abstract 'speak' method from 'Animal'.

Polymorphism is observed in the code when the 'speak' method is overridden in the derived classes. Both 'Dog' and 'Cat' have their own implementation of the 'speak' method, which overrides the implementation inherited from 'Animal'. This allows objects of different class (both derived from 'Animal') to be used interchangeable, based on their shared interface ('speak' method) or inheritance hierarchy.

Python's object-oriented programming paradigm provide an efficient and flexible approach to structure code. By using these concepts, developers can create modular, reusable, and maintainable code. Python's syntax and library support make it a great choice for implementing Object Oriented Programming. Embracing these concepts in Python allow developers to build complex applications while promoting code organization and scalability.

React props and components

Peter Yelton — Mon, 12 Jun 2023 11:37:33 +0000

React is an immensely popular JavaScript library in the world of web development. In the core of React there are two important concepts: props and components. The understanding of React props and components is crucial for developers to be able to create reusable and interactive user interfaces, allowing the creation of efficient, dynamic apps.

In React, props pass data between components. In javascript terms, they can be considered parameters like function arguments. They are immutable, props flow from parent components to child components.

In this example there is a parent component called 'ParentComponent' that renders a child component called 'ChildComponent'. It passes a prop named 'message from parent to child, it is defined in the parent component.

class ParentComponent extends React.Component {
  render() {
    const message = "Hello, world!";
    return <ChildComponent message={message} />;
  }
}

In the child component, 'message' can be accessed as a prop:

class ChildComponent extends React.Component {
  render() {
    return <p>{this.props.message}</p>;
  }
}

The child component can now use the prop value from the parent component and render it dynamically.

React components are the fundamental building blocks that encapsulate reusable and independent UI elements. Two types of components exist: functional components and class components.

Functional components are written as JavaScript functions, making them concise and straightforward. Here's an example:

const FunctionalComponent = (props) => {
  return <p>{props.message}</p>;
};

The ability of React is displayed when props and components work together. Props facilitate data transmission, while components allow the structure and functionality for rendering said data. This synthesis allows developers to build modular and adaptable applications.

React props and components are important to understand in order to construct interactive and modular web applications. Props allow data transfer, while components provide the structure for rendering. Utilizing props and components, developers can construct reusable, flexible, and scalable code. The relationship between these concepts are vital in being able to implement React efficiently.

How I made my PokeAPI Team Builder

Peter Yelton — Sat, 08 Apr 2023 01:05:34 +0000

In learning about API’s, I had a lecture where the PokeAPI was utilized to demonstrate the fetch(url) method. In doing so, I was inspired to create an app wherein you could look up and create a team of Pokemon with access to dynamically populate your team from any set of Pokemon, displaying their names, stats, pictures, and types. It seemed easy at first, I quickly found it to be a challenge given the limitations of both the API and my skill.

To start, I have to answer the question “What is an API?” API’s are a broad and deep subject, so I will limit my answers to my own knowledge and experiences with it. I have been working with a Web API which is an application programming interface. A web API stores an array that accepts and returns data in a JSON format, allowing one the ability to dynamically populate an app or site with an array of data without having to manually add or remove elements.

What is a JSON format? JSON is an acronym of JavaScript Object Notation. It is a data format that stores information in text and allows for the transmission of data objects in key-value pairs that can be retrieved using Javascript.

In my project, we began by first building out a fetch function:
fetch(url)
.then((response) => response.json())
.then((data) => {
console.log(data);}
The fetch method takes the url provided by the PokeAPI as an argument, and returns a promise object. This promise is then handles it by the .then method. The first .then takes the objects and returns a promise is JSON format from the API. Then it takes the data and logs it in the console in order to log the array and see that it is working. (In creating this program I have learned to love console.log and it has become incredibly useful.)

Then I took the array of data and ran is through a forEach loop, dynamically populating the team of pokemon, limited to the first six results of pokemon, as each team has a maximum limit of six pokemon.

const renderTeam = (pokemons) => {
pokemons.forEach((pokemon) => {
let pokemonTeamImg = document.createElement("img");
pokemonTeamImg.src = pokemon.sprite;
pokemonTeamImg.alt = pokemon.id;
let displayName = document.createElement("h3");
displayName.textContent = pokemon.name;

})

In this function we took in the array of pokemon as an argument and return keys of name and images. Creating HTML elements for each pokemon. It would iterate through the array, creating an image element for each set of keys, and attaching the values of the source image and the id. These new elements would be displayed to the side containing the names and a thumbnail of the pokemons and also attaching an id to them to refer to later when being clicked.

teamDiv.append(teamMember);
teamMember.addEventListener("mouseover", () => {
teamMember.style.transform = "scale(1.1)";
});
teamMember.addEventListener("mouseleave", () => {
teamMember.style.transform = "scale(1)";
});
pokemonTeamImg.addEventListener("click", () => {
pokemonDetailImage.src = pokemon.img;
console.log(pokemon.name);
pokemonDetailName.textContent = pokemon.name;

In these next lines of code we added eventlisteners that enlarged the elements to display the selection of the element as a user mouses over them and returning them to their default size when the mouse is no longer over them. We also included an event listener that when a user clicks on the image of the pokemon it selects it and displays it in the main page along with its corresponding name based on it’s name and id.

I learned a lot more about API’s and creating elements and appending data from an API to them in a web page. There had been an initial challenge with the default API which had only displayed a name, ID number, and a url that only pointed to a more detailed array of keys. I had created an pokedex number variable and attached it to the image url’s but this clever work around, created issues when trying to refer back to the images and in trying to avoid creating more fetch requests didn’t create a feasible solution.

I hope to revisit this project and fill in the gaps with new knowledge and techniques, and hopefully realize the initial vision I had when I had initially started brainstorming this project.