Frontend and Backend Development Lesson Notes
- Introduction
- Backend
- Films API
- Fetching
- Backend and Frontend Example
- Write notes below
- Notes
- CRUD
- CREATE THE DATABASE FILE
- FETCH
- Link To The Video With The FRONTEND ON FAST PAGES
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()
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)
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)
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)
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
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())
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
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.
- Create a completely unique API with all 4 CRUD features (Create, Read, Update, Delete)
- Create a Fetch API request for your corresponding API
- Attempt a complete website on GitHub Pages including HTML
import json
from flask import Blueprint, request, jsonify
from flask_restful import Api, Resource # used for REST API building
from datetime import datetime
from model.houses import Houseadd
house_api = Blueprint('house_api', __name__,
url_prefix='/api/houses')
# Creation of class for the API
api = Api(house_api)
class HouseAPI:
class _Create(Resource):
def post(self):
''' Read data for json body '''
body = request.get_json()
# These conditionals validate the api to make sure when an input is entered there are no keys that are left out and parameters are full
''' Avoid garbage in, error checking '''
name = body.get('name')
if name is None or len(name) < 2:
return {'message': f'Name is missing, or is less than 2 characters'}, 400
uid = body.get('uid')
if uid is None or len(uid) < 2:
return {'message': f'User ID is missing, or is less than 2 characters'}, 400
baths = body.get('baths')
if baths is None or len(baths) < 0:
return {'message': f'Baths is missing, or is less than 2 characters'}, 210
beds = body.get('beds')
if beds is None or len(beds) < 1:
return {'message': f'Beds is missing, or is less than 2 characters'}, 210
price = body.get('price')
if price is None or len(price) < 1:
return {'message': f'Price is missing, or is less than 2 characters'}, 210
''' #1: Key code block, setup USER OBJECT '''
uo = Houseadd(name=name, uid=uid, beds=beds,baths=baths, price = price)
''' Additional garbage error checking '''
''' #2: Key Code block to add user to database '''
# create user in database
house = uo.create()
# success returns json of user
if house:
return jsonify(house.read())
# failure returns error
return {'message': f'Processed {name}, either a format error or User ID {uid} is duplicate'}, 400
class _Read(Resource):
def get(self):
users = Houseadd.query.all() # read all houses from database
json_ready = [user.read() for user in users]
return jsonify(json_ready)
class _Security(Resource):
def post(self):
''' Read data for json body '''
body = request.get_json()
''' Get Data '''
uid = body.get('uid')
if uid is None or len(uid) < 2:
return {'message': f'User ID is missing, or is less than 2 characters'}, 400
''' Find user '''
''' authenticated user '''
# building RESTapi endpoint
api.add_resource(_Create, '/create')
api.add_resource(_Read, '/')
api.add_resource(_Security, '/authenticate')
""" database dependencies to support sqliteDB examples """
from random import randrange
from datetime import date
import os, base64
import json
from __init__ import app, db
from sqlalchemy.exc import IntegrityError
from werkzeug.security import generate_password_hash, check_password_hash
''' Tutorial: https://www.sqlalchemy.org/library.html#tutorials, try to get into Python shell and follow along '''
# This is where the keys are within this table to identify for the SQL DATABASE!
class Update(db.Model):
__tablename__ = 'posts'
id = db.Column(db.Integer, primary_key=True)
note = db.Column(db.Text, unique=False, nullable=False)
image = db.Column(db.String, unique=False)
beds = db.Column(db.String, unique=False)
baths = db.Column(db.String, unique=False)
price = db.Column(db.String, unique=False)
userID = db.Column(db.Integer, db.ForeignKey('users.id'))
def __init__(self, id, note, image, beds, baths, price):
self.userID = id
self.note = note
self.image = image
self.beds = beds
self.baths = baths
self.price = price
def __repr__(self):
return "Notes(" + str(self.id) + "," + self.note + "," + str(self.userID) + ")"
def create(self):
try:
db.session.add(self)
db.session.commit()
return self
except IntegrityError:
db.session.remove()
return None
def read(self):
# encode image
path = app.config['UPLOAD_FOLDER']
file = os.path.join(path, self.image)
file_text = open(file, 'rb')
file_read = file_text.read()
# file_encode = base64.encodebytes(file_read)
return {
"id": self.id,
"userID": self.userID,
"note": self.note,
"beds": self.beds,
"price": self.price,
"baths":self.baths,
"image": self.image,
# "base64": str(file_encode)
}
class Houseadd(db.Model):
__tablename__ = 'users'
# Define the House schema with "vars" from object
id = db.Column(db.Integer, primary_key=True)
_name = db.Column(db.String(255), unique=False, nullable=False)
_uid = db.Column(db.String(255), unique=True, nullable=False)
_price = db.Column(db.String(255), unique=False, nullable=True)
_beds = db.Column(db.String(255), unique=False, nullable=False)
_baths = db.Column(db.String(255), unique=False, nullable=False)
posts = db.relationship("Update", cascade='all, delete', backref='users', lazy=True)
def __init__(self, name, uid, beds, baths, price):
self._name = name
self._uid = uid
self._beds = beds
self._baths = baths
self._price = price
@property
def name(self):
return self._name
@name.setter
def name(self, name):
self._name = name
@property
def uid(self):
return self._uid
@uid.setter
def uid(self, uid):
self._uid = uid
def is_uid(self, uid):
return self._uid == uid
@property
def beds(self):
return self._beds
@beds.setter
def beds(self, beds):
self._beds = beds
def is_beds(self, beds):
return self._beds == beds
@property
def baths(self):
return self._baths
@baths.setter
def baths(self, baths):
self._baths = baths
def is_baths(self, baths):
return self._baths == baths
@property
def price(self):
return self._price
@price.setter
def price(self, price):
self._price = price
def is_baths(self, price):
return self._price == price
def __str__(self):
return json.dumps(self.read())
def create(self):
try:
db.session.add(self)
db.session.commit()
return self
except IntegrityError:
db.session.remove()
return None
def read(self):
return {
"id": self.id,
"name": self.name,
"uid": self.uid,
"beds": self.beds,
"baths": self.baths,
"price": self.price,
# "posts": [post.read() for post in self.posts]
}
def update(self, name="", uid="", beds="", baths="", price=""):
"""only updates values with length"""
if len(name) > 0:
self.name = name
if len(uid) > 0:
self.uid = uid
if len(beds) > 0:
self.beds = beds
if len (baths) > 0:
self.baths = baths
if len(price) > 0:
self.price = price
db.session.commit()
return self
def delete(self):
db.session.delete(self)
db.session.commit()
return None
"""Database Creation and Testing """
# Builds working data for testing
def initHouses():
with app.app_context():
"""Create database and tables"""
db.init_app(app)
db.create_all()
db.session.commit()
"""Tester data for table"""
u1 = Houseadd(name='house 1', uid='h1', beds= 'five', baths='three', price='500$/night')
u2 = Houseadd(name='house 2', uid='h2', beds='two', baths='one', price='200$/night')
u3 = Houseadd(name='house 3', uid='h3', beds='four', baths='two', price='300$/night')
u4 = Houseadd(name='house 4 ', uid='h4', beds='four', baths='three', price='400$/night')
u5 = Houseadd(name='house 5', uid='h5', beds='four', baths='three', price='100$/night')
users = [u1, u2, u3, u4, u5]
"""Builds sample user/note(s) data"""
for user in users:
try:
'''add a few 1 to 4 notes per user'''
for num in range(randrange(1, 4)):
note = "#### " + user.name + " note " + str(num) + ". \n Generated by test data."
user.posts.append(Update(id=user.id, note=note, beds=user._beds, price=user._price, baths=user._baths, image='ncs_logo.png'))
'''add user/post data to table'''
user.create()
except IntegrityError:
'''fails with bad or duplicate data'''
db.session.remove()
print(f"Records exist, duplicate email, or error: {user.uid}")
---
title: Add/Explore Houses
layout: base
permalink: /data/database
tags: [javascript, fetch, get, post, put]
---
<p>Add Your House/Find A House
<br>1. Browse Available Houses
<br>2. Contact Us To Book In the review tabs<br>
3. Add a house for rental with the form
</p>
<table>
<thead>
<tr>
<th>Price</th>
<th>Beds</th>
<th>Baths</th>
<th>Name</th>
<th>House ID</th>
</tr>
</thead>
<tbody id="result">
<!-- javascript generated data -->
</tbody>
</table>
<p>Housing</p>
<form action="javascript:create_users()">
<p><label>
Name:
<input type="text" name="name" id="name" required>
</label></p>
<p><label>
Price:
<input type="text" name="price" id="price" required>
</label></p>
<p><label>
Beds:
<input type="text" name="beds" id="beds" required>
</label></p>
<p><label>
Baths:
<input type="text" name="baths" id="baths" required>
</label></p>
<p><label>
uid:
<input type="text" name="UID" id="uid" required>
</label></p>
<p>
<button> Add House </button>
</p>
</form>
<script>
const resultContainer = document.getElementById("result");
// fetch from the local host with the DATABASE!
// var url = "https://finalcptperiod4.duckdns.org/api/houses/"
const url = "http://127.0.0.1:8753/api/houses"
const create_fetch = url + '/create';
const read_fetch = url + '/';
// Load houses on page entry
read_users();
// Display C in CRUD to create houses on the page
function read_users() {
const read_options = {
method: 'GET',
mode: 'cors',
cache: 'default',
credentials: 'omit',
headers: {
'Content-Type': 'application/json'
},
};
fetch(read_fetch, read_options)
// This commands fact proofs the data for an error message that could happen through server or database
.then(response => {
// check for response errors
if (response.status !== 200) {
const errorMsg = 'Database read error: ' + response.status;
console.log(errorMsg);
const tr = document.createElement("tr");
const td = document.createElement("td");
td.innerHTML = errorMsg;
tr.appendChild(td);
resultContainer.appendChild(tr);
return;
}
// valid response will have json data
response.json().then(data => {
console.log(data);
for (let row in data) {
console.log(data[row]);
add_row(data[row]);
}
})
})
// catch server issues
.catch(err => {
console.error(err);
const tr = document.createElement("tr");
const td = document.createElement("td");
td.innerHTML = err;
tr.appendChild(td);
resultContainer.appendChild(tr);
});
}
function create_users(){
// This reads though the data and make sues everything that is specific is created and double checked which was set within the .py file through parameters and conditional.
const body = {
price: document.getElementById("price").value,
beds: document.getElementById("beds").value,
baths: document.getElementById("baths").value,
name: document.getElementById("name").value,
uid: document.getElementById("uid").value
};
const requestOptions = {
method: 'POST',
body: JSON.stringify(body),
headers: {
"content-type": "application/json",
'Authorization': 'Bearer my-token',
},
};
fetch(create_fetch, requestOptions)
.then(response => {
// more db error proofing
if (response.status !== 200) {
const errorMsg = 'Database create error: ' + response.status;
console.log(errorMsg);
const tr = document.createElement("tr");
const td = document.createElement("td");
td.innerHTML = errorMsg;
tr.appendChild(td);
resultContainer.appendChild(tr);
return;
}
response.json().then(data => {
console.log(data);
add_row(data);
})
})
}
function add_row(data) {
const tr = document.createElement("tr");
const price = document.createElement("td");
const beds = document.createElement("td");
const baths = document.createElement("td");
const name = document.createElement("td");
const uid = document.createElement("td");
// obtain data that is specific to the API
price.innerHTML = data.price;
beds.innerHTML = data.beds;
baths.innerHTML = data.baths;
name.innerHTML = data.name;
uid.innerHTML = data.uid;
// add HTML to container these functions also serve as C CRUD = creates ie creating the house data.
tr.appendChild(price);
tr.appendChild(beds);
tr.appendChild(baths);
tr.appendChild(name);
tr.appendChild(uid);
resultContainer.appendChild(tr);
}
</script>