Introduction

Frontend and backend are two essential components of a web application. The frontend is the part of the application that interacts with the user, whereas the backend is the part that handles the logic and data processing behind the scenes.

The frontend, also known as the client-side, typically consists of HTML, CSS, and JavaScript code that runs in the user's web browser. The frontend handles the user interface, page layout, and overall look of the application. It also handles user interactions, such as submitting forms, clicking buttons, and navigating between pages.

On the other hand, the backend, also known as the server-side, typically consists of a server, a database, and, in our case, APIs. The backend handles the processing and storage of data, manages user authentication and authorization, and handles business logic and rules. The backend also communicates with the frontend, providing the necessary data to render the user interface and processing user inputs.

Backend

In our class we mainly use Python and SQL/JSON to create APIs and databases. Here is a simple example of creating a SQL database and using CRUD as well.

What is CRUD

  • C: The 'C' stands for create, meaning to create a new entry in a database. In this case, creating a new entry about a certain movie or TV show.

  • R: Read, or to retrieve data from the database. In this case it is selecting the movie/TV shwo that you choose to display.

  • U: Update, or changing an existing entry in the database. In this case it is selecting the preexisting movie/TV show and changing the values to match what you want.

  • D: Delete, or removing data from the database. In this case it is selecting the preexisting movie/TV show and removing the entry from the database.

Films API

This API is intended to be used as a list of movies and TV shows that a person has watched. It includes attributes for the Film name(key), the year released, the language, the number of episodes, A list of the number of episodes(using pickletype), and a youtube url for the trailer. The CRUD works as follows: Create: Enter the above mentioned attributes Read: Returns all of the films and their attributes Update: Takes in new episodes watched, and a list of their names, and adds them to their respective attibutes Delete: Option for deleting every film, also takes in a name to delete that film if it exists

from flask import Flask
import sqlite3

app = Flask(__name__)
# Connect to the SQLite database using SQLite3
conn = sqlite3.connect('films.db')

# Create a cursor object to execute SQL commands
cursor = conn.cursor()

# Create a table in the database
cursor.execute('''CREATE TABLE movies
                 (id INTEGER PRIMARY KEY, title TEXT, year INTEGER, epcount INTEGER, language TEXT, trailer TEXT, eplist TEXT)''')

# Commit the changes to the database and close the connection
conn.commit()
conn.close()
import sqlite3

def create():
    # Ask the user for movie details
    title = input("Enter the movie/tv show title: ")
    year = input("Enter the movie/tv show release year: ")
    epcount = input("Enter the movie/tv show epcount: ")
    language = input("Enter the movie/tv show language: ")
    eplist = input("Enter the movie/tv show episode names: ")
    trailer = input("Enter the link movie/tv show trailer: ")

    # Connect to the database and create a cursor to execute SQL commands
    database = 'films.db'
    connection = sqlite3.connect(database)
    cursor = connection.cursor()

    try:
        # Execute SQL to insert record into db
        cursor.execute("INSERT INTO movies (title, year, epcount, language, eplist, trailer) VALUES (?, ?, ?, ?, ?, ?)", (title, year, epcount, language, eplist, trailer))
        # Commit the changes
        connection.commit()
        print(f"{title} has been added to the list of movies.")

    except sqlite3.Error as error:
        print("Error while inserting record:", error)

    # Close cursor and connection
    cursor.close()
    connection.close()

create()
Better Call Saul has been added to the list of movies.
def read(id):
    # Connect to the database and create a cursor to execute SQL commands
    database = 'films.db'
    connection = sqlite3.connect(database)
    cursor = connection.cursor()

    # Execute SQL to select a record from db by id
    cursor.execute("SELECT * FROM movies WHERE id=?", (id,))

    # Fetch the record from the cursor
    movie = cursor.fetchone()

    # If movie exists, print its details, else print message
    if movie:
        print(f"{movie[0]}. {movie[1]}, {movie[2]}, {movie[3]}, {movie[4]}, {movie[5]}, {movie[6]}")
    else:
        print("Movie not found.")

    # Close cursor and connection
    cursor.close()
    connection.close()

read(id=1)
1. Breaking Bad, 1594, 3, English, https://ricekrispies.com, Snap, Crackle, Pop
def update(id):
    # Connect to the database and create a cursor to execute SQL commands
    database = 'films.db'
    connection = sqlite3.connect(database)
    cursor = connection.cursor()

    # Ask the user for movie details to update
    title = input("Enter the updated movie/tv show title: ")
    year = input("Enter the updated movie/tv show release year: ")
    epcount = input("Enter the updated movie/tv show epcount: ")
    language = input("Enter the updated movie/tv show language: ")
    eplist = input("Enter the updated movie/tv show episode names: ")
    trailer = input("Enter the updated link movie/tv show trailer: ")

    try:
        # Execute SQL to update the record in db
        cursor.execute("UPDATE movies SET title=?, year=?, epcount=?, language=?, eplist=?, trailer=? WHERE id=?", (title, year, epcount, language, eplist, trailer, id))
        # Commit the changes
        connection.commit()
        print("Movie updated successfully.")

    except sqlite3.Error as error:
        print("Error while updating record:", error)

    # Close cursor and connection
    cursor.close()
    connection.close()

update(id=1)
Movie updated successfully.
def delete(id):
    # Connect to the database and create a cursor to execute SQL commands
    database = 'films.db'
    connection = sqlite3.connect(database)
    cursor = connection.cursor()

    try:
        # Execute SQL to delete the record from db by id
        cursor.execute("DELETE FROM movies WHERE id=?", (id,))
        # Commit the changes
        connection.commit()
        print("Movie deleted successfully.")

    except sqlite3.Error as error:
        print("Error while deleting record:", error)

    # Close cursor and connection
    cursor.close()
    connection.close()

delete(id=2)
Movie deleted successfully.

Fetching

Overview

  • Involves retrieving data from a server or database
  • Can use different HTTP methods, such as GET, POST, PUT, and DELETE, to perform different types of operations on the server.
  • Fetching can be done through a variety of ways including AJAX, XHR, and Axios
  • In APCSP we tend to use the Fetch API over anything else
  • Fetching involves sending a request to a server using a URL (Uniform Resource Locator), which identifies the location of the resource being requested.
  • Can receive data in various formats, including JSON
  • JSON data can be parsed into objects and arrays in JavaScript, making it easy to work with and manipulate in the frontend

Python Fetch Using Request

import requests

url = "https://moviesdatabase.p.rapidapi.com/titles"

headers = {
	"content-type": "application/octet-stream",
	"X-RapidAPI-Key": "8401db6433msh3a46dd5bf23ad2ep19a280jsn48536a994246",
	"X-RapidAPI-Host": "moviesdatabase.p.rapidapi.com"
}

response = requests.get(url, headers=headers)

print(response.json())
{'page': 1, 'next': '/titles?page=2', 'entries': 10, 'results': [{'id': 'tt0001922', 'primaryImage': {'id': 'rm736959488', 'width': 800, 'height': 563, 'url': 'https://m.media-amazon.com/images/M/MV5BZDI4MmJiMmMtMzQ3Mi00N2Y0LTlkYmUtYmQ0ZTQ1NzVlZmVjXkEyXkFqcGdeQXVyMDUyOTUyNQ@@._V1_.jpg', 'caption': {'plainText': 'Darwin Karr and Gertrude McCoy in That Winsome Winnie Smile (1911)', '__typename': 'Markdown'}, '__typename': 'Image'}, 'titleType': {'text': 'Short', 'id': 'short', 'isSeries': False, 'isEpisode': False, '__typename': 'TitleType'}, 'titleText': {'text': 'That Winsome Winnie Smile', '__typename': 'TitleText'}, 'releaseYear': {'year': 1911, 'endYear': None, '__typename': 'YearRange'}, 'releaseDate': {'day': 9, 'month': 9, 'year': 1911, '__typename': 'ReleaseDate'}}, {'id': 'tt0001539', 'primaryImage': {'id': 'rm1311052544', 'width': 800, 'height': 582, 'url': 'https://m.media-amazon.com/images/M/MV5BZGY5NzI0MzQtM2EwYi00NzY2LThiYjYtYTM5YmViZDEwMzkzXkEyXkFqcGdeQXVyMDUyOTUyNQ@@._V1_.jpg', 'caption': {'plainText': 'Caïn et Abel (1911)', '__typename': 'Markdown'}, '__typename': 'Image'}, 'titleType': {'text': 'Short', 'id': 'short', 'isSeries': False, 'isEpisode': False, '__typename': 'TitleType'}, 'titleText': {'text': 'Caïn et Abel', '__typename': 'TitleText'}, 'releaseYear': {'year': 1911, 'endYear': None, '__typename': 'YearRange'}, 'releaseDate': {'day': None, 'month': None, 'year': 1911, '__typename': 'ReleaseDate'}}, {'id': 'tt0001636', 'primaryImage': None, 'titleType': {'text': 'Short', 'id': 'short', 'isSeries': False, 'isEpisode': False, '__typename': 'TitleType'}, 'titleText': {'text': 'Galileo', '__typename': 'TitleText'}, 'releaseYear': {'year': 1911, 'endYear': None, '__typename': 'YearRange'}, 'releaseDate': {'day': None, 'month': 7, 'year': 1911, '__typename': 'ReleaseDate'}}, {'id': 'tt0002148', 'primaryImage': {'id': 'rm1303852544', 'width': 700, 'height': 526, 'url': 'https://m.media-amazon.com/images/M/MV5BMWY2ODg0YWEtZDVmYy00OTEwLTkxN2YtYzY5ZmRmNjVlZWYyXkEyXkFqcGdeQXVyMDUyOTUyNQ@@._V1_.jpg', 'caption': {'plainText': "Fred Mace and Mabel Normand in The Drummer's Vacation (1912)", '__typename': 'Markdown'}, '__typename': 'Image'}, 'titleType': {'text': 'Short', 'id': 'short', 'isSeries': False, 'isEpisode': False, '__typename': 'TitleType'}, 'titleText': {'text': "The Drummer's Vacation", '__typename': 'TitleText'}, 'releaseYear': {'year': 1912, 'endYear': None, '__typename': 'YearRange'}, 'releaseDate': {'day': 23, 'month': 12, 'year': 1912, '__typename': 'ReleaseDate'}}, {'id': 'tt0001702', 'primaryImage': None, 'titleType': {'text': 'Short', 'id': 'short', 'isSeries': False, 'isEpisode': False, '__typename': 'TitleType'}, 'titleText': {'text': "The Indian Maiden's Lesson", '__typename': 'TitleText'}, 'releaseYear': {'year': 1911, 'endYear': None, '__typename': 'YearRange'}, 'releaseDate': {'day': 22, 'month': 4, 'year': 1911, '__typename': 'ReleaseDate'}}, {'id': 'tt0001856', 'primaryImage': {'id': 'rm970923264', 'width': 800, 'height': 597, 'url': 'https://m.media-amazon.com/images/M/MV5BYmVhNGZlZTEtNjFmMS00MjEyLThkZmMtMTIwZjRjNzFkYjU3XkEyXkFqcGdeQXVyMDUyOTUyNQ@@._V1_.jpg', 'caption': {'plainText': 'Edwin August and Dorothy West in The Revenue Man and the Girl (1911)', '__typename': 'Markdown'}, '__typename': 'Image'}, 'titleType': {'text': 'Short', 'id': 'short', 'isSeries': False, 'isEpisode': False, '__typename': 'TitleType'}, 'titleText': {'text': 'The Revenue Man and the Girl', '__typename': 'TitleText'}, 'releaseYear': {'year': 1911, 'endYear': None, '__typename': 'YearRange'}, 'releaseDate': {'day': 25, 'month': 9, 'year': 1911, '__typename': 'ReleaseDate'}}, {'id': 'tt0001790', 'primaryImage': {'id': 'rm635370240', 'width': 1748, 'height': 1340, 'url': 'https://m.media-amazon.com/images/M/MV5BMjAzMzQ3MjQxOV5BMl5BanBnXkFtZTgwMDQzNzExMzE@._V1_.jpg', 'caption': {'plainText': 'Eugénie Nau in Les misérables - Époque 1: Jean Valjean (1913)', '__typename': 'Markdown'}, '__typename': 'Image'}, 'titleType': {'text': 'Movie', 'id': 'movie', 'isSeries': False, 'isEpisode': False, '__typename': 'TitleType'}, 'titleText': {'text': 'Les misérables - Époque 1: Jean Valjean', '__typename': 'TitleText'}, 'releaseYear': {'year': 1913, 'endYear': None, '__typename': 'YearRange'}, 'releaseDate': {'day': 3, 'month': 1, 'year': 1913, '__typename': 'ReleaseDate'}}, {'id': 'tt0000543', 'primaryImage': None, 'titleType': {'text': 'Short', 'id': 'short', 'isSeries': False, 'isEpisode': False, '__typename': 'TitleType'}, 'titleText': {'text': 'Christian IXS bisættelse', '__typename': 'TitleText'}, 'releaseYear': {'year': 1906, 'endYear': None, '__typename': 'YearRange'}, 'releaseDate': {'day': 19, 'month': 2, 'year': 1906, '__typename': 'ReleaseDate'}}, {'id': 'tt0002089', 'primaryImage': None, 'titleType': {'text': 'Movie', 'id': 'movie', 'isSeries': False, 'isEpisode': False, '__typename': 'TitleType'}, 'titleText': {'text': 'Carmen', '__typename': 'TitleText'}, 'releaseYear': {'year': 1912, 'endYear': None, '__typename': 'YearRange'}, 'releaseDate': None}, {'id': 'tt0000548', 'primaryImage': None, 'titleType': {'text': 'Short', 'id': 'short', 'isSeries': False, 'isEpisode': False, '__typename': 'TitleType'}, 'titleText': {'text': 'Fiskerliv i Norden', '__typename': 'TitleText'}, 'releaseYear': {'year': 1906, 'endYear': None, '__typename': 'YearRange'}, 'releaseDate': {'day': 15, 'month': 9, 'year': 1906, '__typename': 'ReleaseDate'}}]}

This is a functional fetch of a movies API from Rapid API, but the data isn't very readable. Below is an example of using Pandas to format the key values as a dataframe.

import requests
import pandas as pd

url = "https://moviesdatabase.p.rapidapi.com/titles"

headers = {
    "content-type": "application/octet-stream",
    "X-RapidAPI-Key": "8401db6433msh3a46dd5bf23ad2ep19a280jsn48536a994246",
    "X-RapidAPI-Host": "moviesdatabase.p.rapidapi.com"
}

response = requests.get(url, headers=headers)
data = response.json()

# Create an empty DataFrame
df = pd.DataFrame()

# Extract the required information and store it in a list of dictionaries
results = data["results"]
entries = []
for result in results:
    entry = {
        "id": result["id"],
        "title": result["titleText"]["text"],
        "release_year": result["releaseYear"]["year"],
    }
    entries.append(entry)

# Convert the list of dictionaries into a DataFrame
df = pd.DataFrame(entries)

print(df)



# ADD YOUR OWN COLUMN TO THE DATAFRAME
          id                                    title  release_year
0  tt0001922                That Winsome Winnie Smile          1911
1  tt0001539                             Caïn et Abel          1911
2  tt0001636                                  Galileo          1911
3  tt0002148                   The Drummer's Vacation          1912
4  tt0001702               The Indian Maiden's Lesson          1911
5  tt0001856             The Revenue Man and the Girl          1911
6  tt0001790  Les misérables - Époque 1: Jean Valjean          1913
7  tt0000543                 Christian IXS bisættelse          1906
8  tt0002089                                   Carmen          1912
9  tt0000548                       Fiskerliv i Norden          1906

Using Pandas to format a request obtained from a 3rd Party API makes it much easier to read and you can select what you want to display as well. Pandas makes it easy to access data that you feel is important.

Notes

Frontend Development:

  • Develop and sustain UI/UX using HTML, CSS, and JavaScript.
  • Guarantee user-friendliness and aesthetic appeal of the website/application.

Backend Development:

  • Utilize server-side programming languages such as Python, Ruby, Java, or PHP.
  • Manage data processing, database management, and server-side operations.
  • Ensure scalability, security, and efficient data management.

Fetching:

  • Retrieve data from a server using AJAX, Fetch API, or third-party libraries such as Axios.
  • Implementation of fetching functionality is done by frontend developers.

CRUD:

  • The acronym for Create, Read, Update, and Delete is CRUD.
  • CRUD refers to the fundamental operations carried out on data in a database or web application.
  • Backend developers are responsible for implementing CRUD functionality.
  • CRUD is widely used for data and user input management in web development.

Hacks

  1. Create a completely unique API with all 4 CRUD features (Create, Read, Update, Delete)
  2. Create a Fetch API request for your corresponding API
  3. Attempt a complete website on GitHub Pages including HTML

Video: Link

import requests
import pandas as pd

url = "https://recipies.duckdns.org/api/users"

response = requests.get(url)
data = response.json()

df = pd.DataFrame()
entries = []
for result in data:
    entry = {
        "rname": result["rname"],
        "uid": result["uid"],
        "comment": result["comment"],
        "rating": result["rating"],
    }
    entries.append(entry)

df = pd.DataFrame(entries)

print(df)