Introduction to Web Development and Databases

TL;DR

Web development builds interactive websites, often using a "frontend" for what users see and a "backend" for server logic and data handling. Databases are essential for storing, organizing, and retrieving the data that powers these web applications. Together, they form the backbone of almost every dynamic website you use.

1. The Mental Model

Imagine a restaurant: the frontend is the dining area and menu, what you see and interact with. The backend is the kitchen and staff who prepare your food. The database is the pantry and recipe book, storing all the ingredients and instructions needed to fulfill orders.

2. The Core Material

Web development generally splits into two main parts: frontend and backend.

Frontend Development

Photo by Markus Spiske on Pexels

This is everything users see and interact with in their web browser. It's built using:

• HTML (HyperText Markup Language): Provides the structure and content of a web page (e.g., headings, paragraphs, images).
• CSS (Cascading Style Sheets): Controls the visual presentation of HTML elements (e.g., colors, fonts, layout).
• JavaScript: Adds interactivity and dynamic behavior (e.g., animations, form validation, fetching data from a server without reloading the page).

When you type a URL into your browser, the browser sends a request to a server, which then sends back HTML, CSS, and JavaScript files for your browser to render.

Backend Development

Photo by Daniil Komov on Pexels

This is the "server-side" of a web application. It handles logic, data processing, and communication with databases. Backend tasks include:

• Handling requests: Receiving requests from the frontend (e.g., a user submitting a form).
• Business logic: Performing calculations, validating data, or applying rules.
• Database interaction: Storing, retrieving, updating, or deleting data.
• API (Application Programming Interface) creation: Defining how the frontend and other services can communicate with the backend.

Common backend languages and frameworks include Python (with Flask/Django), Node.js (with Express), Ruby (with Rails), PHP (with Laravel), and Java (with Spring).

Databases

A database is an organized collection of data, designed for efficient storage and retrieval. They are crucial for web applications that need to persist information (e.g., user profiles, product lists, blog posts).

There are two main types of databases relevant to web development:

• Relational Databases (SQL): Store data in structured tables with predefined schemas. Each table has columns (attributes) and rows (records), and tables can be linked using relationships. Examples: PostgreSQL, MySQL, SQLite.
  • You use SQL (Structured Query Language) to interact with these databases.
• Non-Relational Databases (NoSQL): Store data in more flexible ways, often without fixed schemas. They're good for large amounts of unstructured or semi-structured data. Examples: MongoDB (document-based), Redis (key-value store).

Here's how these pieces fit together in a common web application architecture:

graph TD
    A["User Browser (Frontend)"] --> B{{"HTTP Request"}};
    B --> C["Web Server (Backend)"];
    C --> |"Process Logic"| D["Application Code (Backend)"];
    D --> |"Query Data"| E["Database"];
    E --> |"Return Data"| D;
    D --> |"Generate Response"| C;
    C --> |"HTTP Response (HTML/JSON)"| A;

When you request a page, your browser (frontend) sends an HTTP request. The web server (backend) receives it, and your application code processes it, possibly querying a database. The database sends data back, the application formats a response (e.g., an HTML page or JSON data), and the server sends it back to your browser.

3. Worked Example

Let's imagine you're building a simple blog platform.

Frontend (HTML, CSS, JavaScript):
You'd have an index.html file displaying blog posts. A simplified post might look like this:

<article>
    <h2>Blog Post Title</h2>
    <p>This is the content of my blog post...</p>
    <small>Posted by John Doe on 2023-10-27</small>
</article>

CSS would style it, and JavaScript could handle "like" buttons or comment submissions.

Backend (Python with Flask and SQLite database):
When the frontend wants to display posts, it sends a request to the backend. The backend might have a route like /posts that does this:

from flask import Flask, jsonify
import sqlite3

app = Flask(__name__)
DATABASE = 'blog.db'

def get_db():
    conn = sqlite3.connect(DATABASE)
    conn.row_factory = sqlite3.Row # Allows accessing columns by name
    return conn

@app.route('/posts')
def get_posts():
    conn = get_db()
    cursor = conn.cursor()
    cursor.execute("SELECT title, content, author, created_at FROM posts ORDER BY created_at DESC")
    posts = cursor.fetchall()
    conn.close()
    return jsonify([dict(post) for post in posts]) # Convert Row objects to dicts for JSON

if __name__ == '__main__':
    # Initialize the database (run once)
    conn = get_db()
    cursor = conn.cursor()
    cursor.execute('''
        CREATE TABLE IF NOT EXISTS posts (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            title TEXT NOT NULL,
            content TEXT NOT NULL,
            author TEXT NOT NULL,
            created_at TEXT DEFAULT CURRENT_TIMESTAMP
        );
    ''')
    # Add a sample post if table is empty
    cursor.execute("INSERT OR IGNORE INTO posts (id, title, content, author) VALUES (1, 'First Post!', 'Hello, web world!', 'Admin');")
    conn.commit()
    conn.close()

    app.run(debug=True)

Database (SQLite):
The blog.db file would contain a table posts with columns like id, title, content, author, and created_at. When the backend runs SELECT title, content, author, created_at FROM posts, the database retrieves the requested data and sends it back to the backend. The backend then formats this into JSON and sends it to the frontend.

4. Key Takeaways

• Frontend (HTML, CSS, JavaScript) handles what users see and interact with in their browser.
• Backend (server-side code) manages application logic, data processing, and database interactions.
• Databases store and organize persistent data for web applications.
• SQL databases use structured tables and SQL queries; NoSQL databases offer more flexible data storage.
• The browser sends requests to the backend, which processes them, often interacts with a database, and sends a response back.
• APIs define how different parts of a web application (like frontend and backend) communicate.

Common mistakes to avoid:
* Mixing concerns: Don't put complex business logic directly in your frontend JavaScript. Keep backend logic separate.
* SQL Injection: Never insert user input directly into SQL queries without proper sanitization/parameterization; it's a major security risk.
* Ignoring database design: A poorly designed database can lead to slow applications and data integrity issues.
* Not understanding HTTP: Grasping how requests and responses work between browser and server is fundamental.

5. Now Try It

Set up a basic "Hello World" web server using a backend framework like Flask (Python) or Express.js (Node.js). Create a simple route (e.g., /hello) that returns a JSON response like {"message": "Hello from your backend!"}. Then, create an index.html file with some basic HTML and JavaScript that uses fetch() to call your /hello endpoint and display the message on the webpage. Success looks like seeing "Hello from your backend!" displayed in your browser.