[prev]Pages & Paths[next]

Web apps typically have multiple pages that the user can move between by clicking links. Each page is identified by a unique URL, the address you see at the top of every browser window.

Anatomy of a URL.

From your experience online, you've probably noticed that the host indicates what web site you're at, while the path indicates which page within the site. For example, the URL for this very page has the host appjet.com and the path /learn-to-program/lessons/pages.

Back when the web was mostly just a way to view documents remotely, a path specified what file in what directory to show. Since the advent of web apps, paths are seen as a general way to refer to a web page. Your app can have different pages by deciding what to show based on the path.

Example: Using Links

In your code, request.path lets you access the path that's being requested. The link command takes a path and (optionally) some text, and creates a link to that path.

Notice that the preview panel now has a little URL bar above it! This bar acts like the browser's location bar in that it shows the URL you're currently visiting and lets you edit it.

Exercise: Add another page. First click the links and make sure you understand what's happening. Every "page" looks the same, except for the first line, and you can visit "pages" that aren't linked to, by typing them into the URL bar. For this exercise, try to add a "Page 4", taking care to get the parentheses, commas, and quotes correct in the printp command that spans multiple lines.

Exercise: Link to another site. The link command can take an entire URL, like "http://www.google.com/", instead of just a path like "/page1". Add a link to the site of your choice.

Ok, but what if you want different content on different pages? You can use an if statement to perform different actions based on the path.

Example: Multiple Pages

 
1
2
3
4
5
6
7
8
if (request.path == "/") {
  printp("Roses are red, violets are blue...")
  printp(link("/page2", "next"))
}
if (request.path == "/page2") {
  printp("Welcome to the page we call page2.");
  printp(link("/", "back"))
}

Click to run the code.

Notice how the if lets you run different code for different paths.

Exercise: More pages! There's a lot you can do with multiple pages. First try changing the text or adding more. Then create a third page that's linked to from the second.

Let's take a look at exactly how to use an if to handle different paths:

The if statement for making a page.

For more details on ifs, skip to the ifs lesson.

To put together the concepts of pages and forms, here's an example with two pages, in which submitting a form on the main page brings up a second page. This example also shows how to send an email.

Example: Sending an Email

 
1
2
3
4
5
6
7
8
9
10
11
12
printp("Path: ", request.path)

if (request.path == "/") {
  printp("Send an email to:")
  printp(form("/send", "email"))
}

if (request.path == "/send") {
  email = request.param("email")
  sendEmail(email, "Hi!", "An email!")
  printp("Email sent to: ", email)
}

Click to run the code.

Notice the sendEmail command, which takes three arguments: the email address to send to, the subject line, and the body of the message. sendEmail sends an actual email! Try it.

The other key thing to notice is the form command's first argument, "/send", which tells the browser to issue a request for path "/send" when submitting the form. That request will also include the email address the user typed, in a parameter named "email".

Previous Lesson: Getting Input Next Lesson: HTML (tags)