Chapter 2

How a Web App Works,Behind-the-scenes

Now that you have a sense of web apps in general—how far reaching they are,how powerful they can be, and how familiar you might already be with manywell-known ones—we can begin to look at some of the things you’ll encounteras you go through the process of building your own.

2.1 How websites (and web apps) work

All websites in existence are hosted, meaning that all of their code lives oncomputers, known as web servers. Web servers are basically just computers thathave certain software installed on them which enable them to serve (website)websites (or send website data back to you, the user, when you visit them).

But any computer can be turned into a web server. You’ll see this firsthand aswe’ll be configuring your own computer to act as a web server in Chapter 3 toenable you to build your web app.

5

When you open your web browser and type in a URL, your request to viewthe designated website is ultimately sent to a web server, as you can see inFigure 2.1.

That web server packages up all of the necessary information for the websiteand delivers it to your web browser using HTTP: the method used for all web-based communications. Note that the http:// that prefixes all websites’ URLsdesignates that you’re making an HTTP request (HTTP).

Figure 2.1: Web server and web browser interaction

2.2 The essential components of a web app

Imagine this...

You’ve just been seated at a fine-dining restaurant.

In front of you sits a place setting—a large plate at the center, two forks on itsleft, a knife and spoon to its right; two glasses—one generally designated for

6

water, the other, perhaps, for wine; a small bread plate and butter knife in theupper left.

You have everything you need to consume the best dinner of your life...exceptfor the food itself.

Before you know it, a waitperson approaches your table, greets your party,pours water for everyone in their designated water glasses, and places down abasket of bread. Now we’re talking. You break off a piece, put it on your breadplate, and spread some butter on it using the designated butter knife.

A few more minutes go by, and you glance over the menu as you enjoy somebread.

Then it’s time to order appetizers. You do so, and a bit more time passes beforethey’re brought out to your table.

But what happens between the time when your order the appetizers and whenthey’re delivered to you at your table?

Well, they’re prepared in the kitchen, of course. Or as it’s known in the restau-rant business, the back-of-the-house.

Every time you make a new food request—be it for an salad, appetizer, or maincourse—that order is sent to the back-of-the-house, prepared with previously-established ingredients according to a previously-established set of instructions,and then delivered to you at your table in the restaurant’s dining room—knownin the business as the front-of-the-house.

The cycle is always the same: someone—you, the customer—in the front-of-the-house makes a request, which is sent to the back-of-the-house. The request ishandled and prepared in the back-of-the-house—crab prepared, steak grilled—and then returned back to you, in the front-of-the-house, as the wonderful FiletOscar that you ordered.

While I do love imagining a fine-dining experience like this one, there is a point

7

I’m getting at...

2.2.1 A web app functions just like a restaurant

Web apps are comprised of two parts—the front end and the back end—thatare constantly working together to perform all necessary actions and deliver alldesired results.

Just as a restaurant’s front-of-the-house is responsible for a presenting the userwith an expected experience and results (the food), a web app’s front end isresponsible for creating the pages and displays a user sees within their webbrowser.

Just as all customer requests are handled in the front-of-the-house of a restau-rant, a web app’s front end handles all user interactions and requests. In arestaurant you may be interacting with a waitperson, whereas in a web appyou may be interacting with buttons, text boxes, or other controls.

In a restaurant, when an order is placed by a customer in the front-of-the-house,that order is sent to the back-of-the-house so the desired dish can be prepared.As you can see in Figure 2.2, when a user makes a request in a web app, thatrequest is sent to the application’s back end to be handled accordingly.

So just as a restaurant’s kitchen, or back-of-the-house, is responsible for prepar-ing all of the food, a web app’s back end is responsible for doing all of the heavylifting, fulfilling all user requests.

While a restaurant’s kitchen staff chops all of the necessary vegetables and grillsall of the steaks, a web app’s back end retrieves data from the database, runsany necessary calculations, and returns that data in a meaningful state so thatit can be displayed on the front end.

8

Figure 2.2: Web server handling a user request, between the back end andfront end

2.2.2 The role of the database

As we’ll see shortly, when developing a web app, there’s almost always someamount of information, or data, we need to interact with.

As such, we need a place to store that data. That’s where a database comesin. A database is essentially just a big, organized filing cabinet used for storingand associating a bunch of different pieces of information.

We’ll discuss this more in Chapter 4, but suffice it to say that when we talkabout the back end retrieving information to be displayed within an app, youcan assume that data is coming from a database.

9

2.3 Front end Languages

2.3.1 HTML

The front end is generally comprised of three major languages: HTML, CSS,and JavaScript.

HTML is the language used to construct the layout of the display. It’s respon-sible for creating the various elements that are displayed and (to some degree)designates how they’re organized on the screen.

We’ll discuss HTML in much greater detail in Chapter 8.

2.3.2 CSS

The second, essential language used in the front end is known as CSS. It’sresponsible for all of the visual styling you see throughout the pages of a webapp such as text colors, background colors, font sizes, borders, and much more.

It’s also responsible for a great deal of those elements’ arrangements and posi-tioning.

As we’ll also see in Chapter 8, CSS is directly tied to HTML, as its codereferences HTML elements in order to alter their appearances.

2.3.3 JavaScript

The final language that’s used in the front end is known as JavaScript.

While it’s not necessary to use any JavaScript, some is almost always included.JavaScript is responsible for all of the user interactivity in a display.

10

Take the following example: you’re reading a user review of a product on Ama-zon. The entire text isn’t initially shown, but there’s a “read more” link afterthe initial excerpt that’s displayed.

When you click that “read more” link, the display is altered so that the remain-der of the text is now visible. JavaScript was responsible for that interactivity.

Any time a user performs an action when viewing something in their browserthat results in the display being altered in some way, that’s the work of JavaScript.

2.4 The Back end language

There are a multitude of different languages that can be used when developingthe back end of a web app. In our case, we’re going to be using PHP.

2.4.1 Why PHP?

PHP is one of the easiest languages to dive into right away, especially whenyou’re just starting out with web development.

PHP will help us do all sorts of things in our app. It will provide the app’sbackbone, helping us define all of its most crucial functionality.

Another reason we’ll be utilizing PHP is that it has several well-developed, andwell-supported frameworks, which will allow us to make our app robust andkeep it organized.

11

2.4.2 What is a framework?

As you can imagine, when building a web app, there’s a lot of functionalitywe’ll need to incorporate.

Luckily for us, we aren’t the first ones to have ever pursued this endeavor,and others have very kindly built what are known as frameworks to aid inimplementing a lot of the more common features of a web app.

A framework is like the foundation of a house. It’s underlies the house, and isrequired as a strong base upon which to build. But it’s just that—a startingpoint. What you build on top of that foundation is what really defines thehouse and makes it what it is.

The same is true when using a framework to build a web app. It providesthat strong foundation, but the custom functionality we’ll build on top of thefoundation the framework provides will define our app.

To build our app, we’ll be utilizing the CodeIgniter framework.

As you’ll see later on in the book, CodeIgniter will help us with many commontasks—such as making sure our app’s URLs take us to the proper pages—whilealso taking care of many common issues—such as making sure our applicationis secure.

2.5 So, what will my first web app look like?

I thought you might be interested in hearing more about that!

The web app I’ll be guiding you through creating will be a recipe tracker.

Why a recipe tracker?

12

Well, there are plenty of mundane options we could pursue—such a to-do listapp—but I thought it would be much more interesting to create something youcan actually use at the end. And everyone likes food, right?

Along the way, we’ll step through the process of building your app, so thatyou’ll ultimately be able to create, edit, and organize recipes for anything, beit your favorite recipes for the grill, baking, or smoothies.

And that next time someone asks about your favorite cookie recipe, you cantell them, “Well, let me just go and pull that up for you in the new web appthat I built !”

13