Forem: Taylor Riley

Creating and Seeding a Database with Flask and SQLAlchemy

Taylor Riley — Mon, 04 Dec 2023 18:59:20 +0000

Flask and SQLAlchemy are two popular Python libraries that can be used to create and manage web applications. Flask is a lightweight microframework that provides a simple and flexible foundation for building web applications, while SQLAlchemy is an Object Relational Mapper (ORM) that simplifies the process of interacting with databases.

In this post, we will discuss how to create and seed a database using Flask and SQLAlchemy. It is assumed that you have a basic understanding of Python and web development.

Prerequisites

Before you begin, make sure you have the following installed on your system:

Python
Flask
SQLAlchemy

Creating a Database Schema

The first step in creating a database is to define the schema. The schema defines the structure of the database, including the tables, columns, and relationships between tables.

To define the schema, you will need to create a SQLAlchemy model for each table in your database. A SQLAlchemy model is a Python class that represents a table in the database. Each attribute of the model represents a column in the table.

For example, the following code defines a SQLAlchemy model for a User table:

from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String, nullable=False)
    email = db.Column(db.String, nullable=False)

This code defines a User model with the following attributes:

id: An integer that is the primary key of the table
name: A string that is the name of the user
email: A string that is the email address of the user

Creating a Database Connection

Once you have defined your models, you need to create a connection to the database. To do this, you will need to use the SQLAlchemy create_engine() function.

Since we are using SQLite, we will use the sqlite3 module to create the connection string:

import sqlite3

engine = create_engine('sqlite:///users.db')

This code creates a connection to a SQLite database named users.db. If the database does not exist, it will be created automatically.

Creating a Seed File

To seed the database, we will create a seed file that contains the data we want to insert. The seed file should be a Python script that imports the SQLAlchemy models and uses the db.session.add() method to insert the data into the database.

For example, the following code is a seed file that inserts two users into the database:

from app.models import User

db.session.add(User(name='John Doe', email='johndoe@example.com'))
db.session.add(User(name='Jane Doe', email='janedoe@example.com'))
db.session.commit()

Running the Seed File

To run the seed file, you can use the following command in your terminal:

python seed.py

This will execute the code in the seed file and insert the data into the database.

Conclusion

In this post, we have discussed how to create and seed a database using Flask and SQLAlchemy. We have covered the following topics:

Creating a database schema
Creating a database connection
Creating a seed file
Running the seed file

Hopefully this blog post has been helpful. If you have any questions, please leave a comment below. Thanks and good luck on your coding journey.

Resources

Flask Documentation
SQLAlchemy Documentation

Building a Class in Python

Taylor Riley — Tue, 14 Nov 2023 21:43:09 +0000

Python can be a very powerful language, especially when it comes to databases and backend programming. When dealing with so many bits of data and instances, it makes sense that you might need a way to target and manipulate the data. But, what if you only want to target certain groups, or types of data? Luckily, Python has built-in methods for that called classes. With the help of classes, you can set attributes for each dataset for them to be initialized with and different methods and instances for each class. Building out a class can make your data much more manageable and easier to format your data.

Building out the Class Object

In order to start your class blueprint, you first need to give your class a name. It can be anything but it should be relevant to your class to make your code more readable. For example, if your making a class for a data set of dogs, your class name could be "Dog". When defining a class in Python, it is a best practice to use a capital letter for the class name. Declaring a class for my dogs would look something like this:

class Dog:

Now that we have a class name for the object, we need to decide what attributes we want our objects initialized with. If we keep going with the dog example, we just need to think about what kind of data we want to start with. Again, this can be anything, it is all relative to the purpose our dataset is going to serve. For our example, our dog could have a name and an age. These are all things we could know right off the bat and want our class instances to have when they are created. In order to do this, we are going to use the __init__ function for our class.

class Dog:
    def __init__(self, name, age):

Here, we have passed our attributes we want our class instances to be initialized with. You might have noticed that in addition to name and age, I also passed in the word self. Passing in self just refers to the individual instance that is going to be passed in to be formatted. We need that so we can attach the individual attributes to a given instance like so:

class Dog:
    def __init__(self, name, breed, age):
        self.name = name
        self.age = age

Creating Class Methods

Now that we have initialized our class, we can do a bunch of different things. For example, we could do is create a list of all our dog instances and append our dog instances to it.

class Dog:
    all = []
    def __init__(self, name, breed, age):
        self.name = name
        self.age = age
        Dog.all.append(self)

Using this new list that we've created, we can define methods to do things like return the amount of dog instances we have, or return all the dog objects.

class Dog:
    all = []
    def __init__(self, name, breed, age):
        self.name = name
        self.age = age
        Dog.all.append(self)
    def dogs(self):
        return [dog for dog in Dog.all if dog.dog is self]
    def num_dogs(self):
        return len(self.dogs())

In this example, were returning the list of all the dog instances, then returning the amount of dogs in that list. Using methods in your classes can help you access or manipulate the data specific to your class elsewhere in your document, wherever the class is accessible.

Creating Class Instances

Now that we have class attributes and class methods, we need to come up with a few class instances. Instances are just the individual data of the classes, so for my class of dogs, my instance would be a dog. When we make a new instance, we need to reference what class the instance is a part of and initialize it with all the information defined in our __init__.

class Dog:
    all = []
    def __init__(self, name, breed, age):
        self.name = name
        self.age = age
        Dog.all.append(self)
    def dogs(self):
        return [dog for dog in Dog.all if dog.dog is self]
    def num_dogs(self):
        return len(self.dogs())

    dog1 = Dog("Paco", "Golden Retriever", "3")
    dog2 = Dog("Jeff", "Dachshund", "1")
    dog3 = Dog("Mr. Pickles", "Shih Tzu", "6")

While these are just a few basics to creating classes in python, there are many more things that classes are capable of. Hopefully this post was helpful to you and your coding journey in python.

Resources

Python Classes Documentation

Passing Props in React

Taylor Riley — Fri, 20 Oct 2023 17:08:45 +0000

For those of you venturing into react, you will soon discover one of the best (and worst) things about it is the organization and separation of concerns. On one hand, the document is much easier to digest and understand when broken up into multiple components. On the other hand, you might find yourself running into the problem of having to redeclare functions or states in different components. When learning Javascript, it's easy to just put everything into one Javascript file and simply declare global variables and functions when needing to refactor data or use callback functions elsewhere in the document. However, in React, the separation of concerns prevents us from doing this. Lucky for us, React has built in tools to handle the issue of scope and worrying about where our information is accessible.

Passing Data Through Props

When we think of our data structure and the way data flows, we need to think in terms of a tree. All of the nutrients for the tree comes from the roots. Those nutrients are then passed from the roots, to the branches, to the leaves. In React, our data has a very similar structure. Our document starts at a root folder and data is passed down from parent components to child components.

In React, we can pass data, like functions and states, to different components by using what we call props. Props are bits of data we pass form a parent component to a child component. In order to pass a prop, a state or function has to be defined in the parent component in order to pass on the data. Lets take a look at an example:

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent(){
    const [state, setState]=useState("prop");
    console.log(state);

    return(
        <div>
           <ChildComponent />
        </div>
    );
};

In this example, we have the component ParentComponent. ParentComponent is creating a state that we will eventually pass to ChildComponent. If we run this code, we will see that the console will log the state of "prop" that we initially set the state as. In order for our state to be accessible in ChildComponent, we need to then pass our state as a prop to our child component.

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent(){
    const [state, setState]=useState("prop");
    console.log(state);

    return(
        <div>
           <ChildComponent state={state} />
        </div>
    );
};

In order to pass the data, we need to give our prop a name and define it within curly braces {}, then insert our prop into the <ChildComponent /> jsx tag. After that, our prop is accessible from our child component. All we have to do is receive the prop in our child component in order to use the prop.

Receiving Props in the Child Component

After we have successfully passed a prop from parent to child, we need to receive the prop before it becomes useable in our component. In order to receive it, we need to take our prop in as an argument in the ChildComponent() function. Always make sure that the prop you are receiving is wrapped in curly braces {} in order to receive it properly.

import React from 'react';

function ChildComponent({ state }){
    console.log(state);

    return(
        <div>Child Component</div>
    );
};

export default ChildComponent;

Now, if we run this code, we should be seeing the value of our state logging out in the console as well. This method works for callback functions as well using the same syntax. When passing functions, there is no need to invoke the function when passing or receiving. Simply just name the prop and insert the function name into the curly braces on the corresponding jsx tag.

Inverse Data Flow

It is important to note that in general, information only flows from parent to child. Props cannot be passed from child to parent. However, data can be passed from child to parent through a function, for example, setting a state. As long as the function is passed from parent to child, new information can be passed through a function and be accessible from the parent.

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent(){
    const [state, setState]=useState("prop");
    console.log(state);

    return(
        <div>
           <ChildComponent setState={setState} />
        </div>
    );
};

import React from 'react';

function ChildComponent({ setState }){
    setState("child state");

    return(
        <div>Child Component</div>
    );
};

export default ChildComponent;

Given the above code, console logging the state in the parent component would log out the state set in the child component through the setter function, overriding the default state.

Passing Data to a Sibling Component

As mentioned earlier, data can only be passed directly between parent and child components. However, data can be passed to a sibling as long as it is passed through the parent by utilizing inverse data flow. For example, the state that we set earlier in the child component would be accessible in a sibling component as long as we passed it via props to the sibling from the parent.

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
import Sibling Component from './SiblingComponent';

function ParentComponent(){
    const [state, setState]=useState("prop");

    return(
        <div>
           <ChildComponent setState={setState} />
           <SiblingComponent state={state} />
        </div>
    );
};

import React from 'react';

function ChildComponent({ setState }){
    setState("child state");

    return(
        <div>Child Component</div>
    );
};

export default ChildComponent;

import React from 'react';

function SiblingComponent({ state }){
    console.log(state);

    return(
        <div>Sibling Component</div>
    );
};

export default SiblingComponent;

In this example, we have our state initialized in the parent component, then a prop of our state setter function is passed down to the ChildComponent. After setting our state in the ChildComponent, the state is updated in our ParentComponent. We then take our updated state and pass it as a prop to the sibling component, making the information set in the ChildComponent available to the SiblingComponent.

Passing props is one of the key functionalities in React. Learning to master the art of passing props unlocks the true potential of React and can help you write well organized and efficient code. I hope this helps and good luck on your coding journey!

Resources

Passing Props to a Component

Declaring Variables Guide

Taylor Riley — Thu, 28 Sep 2023 18:13:56 +0000

For those of you looking to start your journey into JavaScript and web development, you might find yourself defining a lot of variables. The more you learn and discover the more complex aspects of JavaScript syntax, the more you will start to run into people using different words and variables to declare variables. If you find yourself asking questions like: "what is the difference between let and var?" or "why did they declare a variable without assigning it a value?" Then, this post is for you.

JavaScript has three main methods to declare and assign variables. Those three methods are let, const, and var. Which one you will use depends on the context and the scope in which you are declaring the variable. For greater understanding of how the syntax works, try coding along with the examples with replit. Replit is a free code editing platform that is great for practice.

Declaring Variables With Const

const is by far the most common method for declaring variables. Const is best utilized for declaring variables that you know are not going to change as your code is executed. Variables declared with const cannot be redeclared or reassigned. That being the case, variables declared using this method must be defined right away. Unless you know your variable is going to change, const should be your go to. Especially when you start getting into more complex and longer code, it can be difficult to keep track of variables that have already been declared. Declaring variables with const give an added peace of mind.

const variable1 = 'constant variable'
console.log(variable1)
=> constant variable
const variable1 = 'redefine'
console.log(variable1)
=> SyntaxError: Identifier 'variable1' has already been declared

Declaring Variables With Let

The next one up is let. let is for when you anticipate that your variable is going to change. For example, if you are using a variable as a counter value and the value is going to increment/decrement, it is a good idea to have a flexible variable. Another example might be if you want to create an empty object or array and push data to it later on. Because of the ability to be redefined, let variables do not need to be defined right away. With the added flexibility that comes with using let, make sure you are being vigilant and not redefining a variable that is being used elsewhere in a code. Redefining a variable that was not meant to be can cause issues in your code and be potentially difficult to debug.

let color = 'green'
console.log(var1)
=> green
color = 'blue'
console.log(var1)
=> blue

Declaring Variables With Var

The last one up is var. In general, it is best to avoid using this one. var can be tricky because it can be redeclared and redefined, allowing you to accidentally reuse the same variable over and over again, reassigning and/or redeclaring it every time. This can be problematic and difficult to debug, depending on the scope that the variable is used in.

var number = 'one'
console.log(number)
=> one
number = 'two'
console.log(number)
=> two
var number = 'three'
console.log(number)
=> three

Scope

Another important thing to keep in mind is the scope in which a variable is declared. Variables declared in function scope do not follow the same rules as a variable declared in global scope. Global scope is when a variable is declared outside of any function and a global variable is accessible anywhere in the code. Global variables declared with const cannot be redeclared or reassigned in the global scope.

const xvar = "global scope"
console.log(xvar)
=> global scope

Variables declared inside the scope of a function play by a different set of rules. Functions seek the definition of a variable locally before seeking it globally. What that means is that if a variable is declared inside of a function, and that variable is called back inside of the context of that function, the function is going to recognize the declaration from inside the function.

const xvar = "global scope"

function x() {
  const xvar = "function scope"
  return console.log(xvar)
}
x()
=> function scope

Conversely, if you do not have the variable defined in the context of the function, it will seek the global definition.

const xvar = "global scope"

function x() {
  console.log(xvar)
}
x()
=> global scope

As you learn more and become more comfortable with JavaScript syntax, you will come to learn what method to declare variables with. The main takeaways should be to use const when feasible to avoid having the possibility of changing the variable, use let when you know your variable is going to change, and use var... never. Knowing when to use which method to declare your variable will help you level up and progress on your coding journey. Now you are ready to properly declare your variables!

Resources

Storing the information you need — Variables