Computer Science · 10th Grade · Network Architecture and Web Systems · Weeks 19-27

Introduction to Web Development (Backend)

Students are introduced to backend concepts, including server-side scripting and database interaction.

• Common Core State Standards
• CSTA: 3A-AP-22

About This Topic

Backend web development covers the server-side logic that processes requests, enforces business rules, and interacts with databases before sending a response to the client. While the frontend is what users see, the backend is what makes applications functional, persistent, and secure. In US 10th-grade computer science, this introduction covers the client-server model, server-side scripting languages (Node.js, Python/Django, PHP), and the basic patterns for querying a database and returning structured data. This aligns with CSTA Standard 3A-AP-22.

A common conceptual challenge is visualizing the separation between what runs in the browser and what runs on the server. Students often assume all code runs locally because that is their experience with desktop applications. Clarifying that a server is a remote computer executing code in response to HTTP requests, then returning the result, reframes the mental model effectively.

Active learning approaches that have students physically trace a web request from browser through server through database and back make this invisible architecture concrete and understandable.

Key Questions

1. Explain the role of a backend server in a web application.
2. Analyze how a web application interacts with a database.
3. Differentiate between client-side and server-side scripting.

Learning Objectives

• Explain the fundamental role of a backend server in processing client requests and delivering dynamic content.
• Analyze the interaction patterns between a web application and a database, including data retrieval and storage.
• Differentiate between the execution environments and primary functions of client-side and server-side scripting languages.
• Compare at least two common backend server-side scripting languages based on their typical use cases and syntax.
• Design a simple data flow diagram illustrating a user request from a web browser to a backend server and database.

Before You Start

Introduction to HTML and CSS

Why: Students need a foundational understanding of how web pages are structured and styled before learning about the logic that generates them.

Basic Programming Concepts (Variables, Loops, Conditionals)

Why: Server-side scripting languages utilize fundamental programming constructs that students must already be familiar with.

Introduction to JavaScript (Client-Side)

Why: Understanding client-side JavaScript helps students better differentiate its role from server-side scripting languages.

Key Vocabulary

Backend Server	A computer that runs server-side code, processes requests from clients (like web browsers), and manages data storage and retrieval.
Server-Side Scripting	Code that runs on the backend server to generate dynamic web content, interact with databases, and handle application logic.
Database Interaction	The process of communicating with a database to store, retrieve, update, or delete data needed by the web application.
Client-Server Model	An architecture where a client (e.g., web browser) requests services from a server (e.g., web server), which then processes the request and sends back a response.
HTTP Request/Response	The protocol used for communication between clients and servers on the web, where the client sends a request and the server sends back a response.

Watch Out for These Misconceptions

Common Misconception

Backend code runs in the user's browser like JavaScript.

What to Teach Instead

Backend code executes on a remote server, not on the user's machine. The user never receives the source code, only the output the server chooses to send. This is why sensitive operations like authentication, payment processing, and database queries must be server-side: client-side code can always be inspected and modified by the user.

Common Misconception

The backend is just a database.

What to Teach Instead

A backend typically includes a web server, application logic (business rules, validation, authentication), and a database. The application layer sits between HTTP requests and the database, transforming raw data into appropriate responses. A database alone has no concept of HTTP, sessions, or user permissions.

Common Misconception

Frontend and backend developers work on completely separate, independent codebases.

What to Teach Instead

Frontend and backend code must agree on the shape of data exchanged through APIs. A change to a backend response format can break the frontend if they are not coordinated. In most modern applications, API contracts, shared type definitions, and integration testing connect the two sides, requiring regular communication between frontend and backend developers.

Active Learning Ideas

Role-Play: The Full Request Journey

Assign students to roles: browser client, web server, application logic, and database. The browser student sends an HTTP request card (e.g., 'GET /user/42'). The server receives it, the application logic determines what query to run, the database student looks up the record, and the result flows back through the chain. The class introduces variations like a POST request creating a new record.

30 min·Whole Class

Inquiry Circle: Mapping a Web Application

Groups receive a description of a simple web app (e.g., a school grade tracker) and must draw a system diagram showing which parts run in the browser (frontend) and which run on a server (backend), including at least one database interaction. Groups compare diagrams and identify where their models differ in how they split client and server responsibilities.

25 min·Small Groups

Think-Pair-Share: Client-Side or Server-Side?

Give students a list of eight operations: validating email format, verifying a password hash, rendering a dropdown menu, checking if a username is already taken, calculating a cart total, storing a purchase record, displaying a real-time stock ticker, and generating a PDF report. Students individually classify each as client-side or server-side, compare with a partner, and discuss the edge cases where either could apply.

20 min·Pairs

Real-World Connections

• Software engineers at companies like Netflix use backend development to manage user accounts, process streaming requests, and recommend content based on viewing history, all powered by server-side logic and databases.
• E-commerce platforms such as Amazon rely heavily on backend systems to handle product inventory, process customer orders, manage payment transactions, and personalize shopping experiences through complex database interactions.

Assessment Ideas

Exit Ticket

On an index card, students should write: 1) One sentence explaining why a backend server is necessary for a dynamic website. 2) An example of a task performed by the backend that the user's browser cannot do directly.

Discussion Prompt

Pose the question: 'Imagine you are ordering a pizza online. Describe the journey of your order from clicking 'submit' to receiving a confirmation. Which parts happen on the client, and which parts require the backend server and database?'

Quick Check

Present students with two code snippets, one clearly client-side (e.g., JavaScript manipulating DOM elements) and one server-side (e.g., Python code querying a database). Ask them to identify which is which and explain their reasoning based on where the code would execute.

Frequently Asked Questions

What does a backend server do in a web application?

A backend server receives HTTP requests from clients (browsers or other applications), executes application logic to determine what to do with the request, interacts with a database or other services as needed, and returns an HTTP response. It handles authentication, authorization, data validation, business rules, and anything that must not be exposed or executed on the client.

How does a web application interact with a database?

The backend application uses a database driver or ORM (Object-Relational Mapper) to send queries to the database. For a request like 'show me user 42's profile,' the backend constructs a SQL SELECT query, sends it to the database, receives the matching row, formats it into JSON, and returns it in the HTTP response. The database never communicates directly with the browser.

What is the difference between client-side and server-side scripting?

Client-side scripting runs in the user's browser after the page is delivered, handling interactivity and dynamic rendering. JavaScript is the primary client-side language. Server-side scripting runs on the server before the response is sent, handling data processing, authentication, and database interactions. Languages like Python, Node.js, Ruby, and PHP are common server-side choices.

How does active learning help students understand backend web development?

Physical request-journey role-plays, where students pass cards representing HTTP requests through server, application logic, and database roles, make an invisible process observable. When the 'database' student cannot find a record and must return a 404, students directly experience how error states propagate back through the stack and understand why each layer needs its own error handling.