Web Applications

Welcome to the World of Web Applications!

In this chapter, we are moving from looking at how computers talk to each other (Networks) to looking at how we build the tools people actually use on those networks: Web Applications. Whether you are checking your social media feed or uploading a file for a project, you are using a web app. By the end of these notes, you’ll understand how to build a basic version of these yourself using HTML, CSS, Python (Flask), and SQL. Don't worry if this seems like a lot to juggle—we'll take it one step at a time!

1. Web Apps vs. Native Apps: What's the Difference?

Before we build anything, we need to know what a Web Application actually is and how it differs from the apps you install on your phone or computer.

Web Applications

These are programs that run inside a web browser (like Chrome, Safari, or Firefox). You don't "install" them; you just visit a URL.

• Pros: They work on any device with a browser (cross-platform), and you don't need to download updates manually.
• Cons: They usually require an internet connection to work and might be slightly slower than native apps.

Native Applications

These are built specifically for a certain operating system (like an ".exe" for Windows or an app from the Apple App Store).

• Pros: They can run offline and have full access to the device's hardware (like the camera or specialized sensors).
• Cons: Developers have to write different versions for different devices (one for Android, one for iOS).

Quick Review: Think of a Web App like a buffet restaurant (you go there to get what you need), while a Native App is like cooking at home (you have to have the tools and ingredients installed in your own kitchen first).

2. Making it User-Friendly: Usability Principles

Have you ever used a website and felt frustrated because you couldn't find the "Submit" button? That's a usability problem. When we design web apps, we follow five key principles to keep users happy:

1. Visibility of System Status: The app should always tell the user what's happening.
Example: A loading bar or a message saying "File Uploaded Successfully!"

2. Consistency: Use the same colors, fonts, and button styles throughout the app so the user doesn't get confused.

3. Affordance: Objects should look like how they work.
Example: A button should look "clickable" (perhaps with a shadow or a 3D effect), and a link should look different from plain text.

4. Constraints: Prevent users from making mistakes by limiting their choices.
Example: Graying out the "Submit" button until the user has filled in all the required fields.

5. Feedback: For every action the user takes, the system should respond. If I click a button, it should change color or show a "success" popup.

Memory Aid: Remember "V-C-A-C-F" — Very Cool Apps Create Fun!

3. The Big Picture: Client-Server Architecture

A web application is a team effort between two sides:

The Client (The "Front-end"): This is what the user sees. We use HTML for the structure and CSS for the styling.

The Server (The "Back-end"): This is the "brain" of the app. We use Python (specifically a framework called Flask) to process data and SQL to remember things in a database.

Analogy: Imagine a restaurant. The Client is the dining area and the menu (looks pretty). The Server is the kitchen (does the work). The Database is the pantry (where the ingredients/data are stored).

4. Building the Client-Side: HTML Forms

To get data from a user, we use the <form> tag. There are two critical attributes you must know:

• action: The URL/route where the data should be sent.
• method: Usually "POST" when sending data to be saved.

Accepting User Input

We use the <input> tag. The name attribute is the most important part because it acts like a variable name that Python will use to find the data.

Example for Text: <input type="text" name="username">

Example for Images: <input type="file" name="profile_pic">

Common Mistake Alert: If you want users to upload files or images, your <form> tag MUST include enctype="multipart/form-data". If you forget this, the server will only get the filename and not the actual file!

5. The Brains of the Operation: Python and Flask

Flask is a "mini-web server" we run in Python. It uses routes to decide what to do when a user visits a specific URL.

How the Server Processes Input:

1. Text Input: Use request.form['variable_name'] to get text from a form.

2. File/Image Uploads: Use request.files['variable_name'] to get an uploaded file.

3. Security: Always use secure_filename() before saving an uploaded file to prevent hackers from naming a file something dangerous like "virus.exe".

The Storage: SQL (sqlite3)

Python doesn't "remember" things after you turn it off. To keep data permanently, we send it to an SQL database. The standard flow is:

Connect to the database → Create a Cursor → Execute the SQL command (like INSERT or SELECT) → Commit changes → Close connection.

6. Showing the Results: Outputting Data

Once the server processes the data, it needs to show it back to the user. We use render_template() to send Python data to an HTML page.

Formatting the Output

• Text: Just pass the variable to the HTML template.
• Tables: Use a for loop in the HTML (using Jinja2 syntax) to create <tr> and <td> tags for every row in your database results.
• Images: Use the <img src="..."> tag, pointing to the folder where you saved the user's upload.

Quick Review Box:
- HTML: The "Skeleton" (Structure)
- CSS: The "Skin" (Appearance)
- Python/Flask: The "Brain" (Logic)
- SQL: The "Memory" (Storage)

7. Testing Your App

How do you know if it works? You test it on a local server. When you run your Flask script, it usually hosts the app at a special address: 127.0.0.1:5000.

127.0.0.1 is a "loopback" address—it just means "this computer." 5000 is the port number.

What to check during testing:

1. Does the page load without errors?
2. If I leave a field blank, does the app handle it gracefully (Data Validation)?
3. Does the data actually show up in the database after I click submit?

Key Takeaways for the Exam:

• Understand that Web Apps run in browsers and Native Apps are installed on OS.
• Memorize the Usability Principles (Visibility, Consistency, Affordance, Constraints, Feedback).
• Know that request.form is for text and request.files is for file uploads.
• Remember to use enctype="multipart/form-data" in HTML for file uploads.
• Be prepared to explain the flow of data from the user's browser, through the Flask server, into the SQL database, and back again.

Don't worry if the code parts seem tricky at first! Focus on the "flow" of data—where it starts, where it gets processed, and where it ends up. You've got this!