More about pages and urls

Now that we have added and edited our home page, we add the rest of this first site, before we deploy it to our live server. A typical first web site do often have the home page, the about us page and contact us. 

How url works

Each page in a site can be reached by an url like http://sitename/relativeurl/. The prefix http:// tells what protocol to use. On the web, the hypertext protocol is the one we commonly find, but a browser can use https:// that is the secure hypertext protocol and file:/// that let you open a local file in your web browser. A sitename represent the look up address registered in a dns server, a host entry on your local computer or an raw ip-address. As long as you no not suffix http with a :number, the standard port 80 is used, so http://sitename:80 is the same as http://sitename This is why we use http://127.0.0.1:8000 as the url in the preview browser. The internal web server do use a high port numbers not to conflict with a real web server on your computer. By using different port on each project, you can have several dg3 with different projects running at the same time, but only one internal server can be using a port at the time. Conflicting use of ports is one of the most common problems when tings are not working right. The last part of the url /relativeurl/ is the one unique for each page.

How urls are generated and used by DG3

All pages defined in DG3 get an url when build. Since relative url only can hold letter and number and no spaces, the page name is stripped of these when an ulr for the page is generated. The simplest way of finding the url for the page is simply to preview it, then you will see the generated url in address of the preview browser. A simple rule of thumg for a generated url is start and end with a /. To build an url, start with the /, then take the name of the folder (we have not used folders yet, but we will soon come to that) and strip it for letters and spacings not allowed and add, then a new /, take the page name and remove forbidden letters and spaces and add, then add the trailing /. You have an url in the form /folder/pagename/. This is the relative url and the one you should use when linking internal pages. Do not use the absolute url (the absolute url is the one with protocol://sitename/relattivepath/), since these will change when deploying to a server.

The urls for our site

So we want three pages now with the urls /landing/, /about/ and /contact/. But if you look at the page we already have, that has the url http://127.0.0.1:8000/Landing/. What happens when we try to open it as http://127.0.0.1:8000/landing/. We will get an error page saying page not found 404. That is unfortunate how web works, Landing and landing for looking up pages are not the same.

 You probably will see a few of these pages when you create application. Do not worry that your users will see them, this is a page only shown on the development server. In a deployed server, you will be presented by a different page that you can style the site layout section. What's important to see is the error shown. In this case it says "The current URL, landing/, didn't match any of these". The list above shows all pages that are defined in this application. If you look in the list you will find ^Landing/, this gives away the clue for why its not working. The case do not match. If you want the url of your page to be /landing/ and not /Landing/, you will have rename the page.

How to rename a page

This is how to rename a page. Select the page in the page browser, right click and select rename. Change the name the the new name and  make sure the right version of the page is open in the designer. A new preview of the page will show that it now works with the new name.

Add new pages

So here is how to add about and contact. As for the first landing page, simply select Pages in Page browser right click and select New page. Do this for each page to add, the first you name "about" and the second "contact". 

Each page now have the following urls: /landing/ /about/ and /contact/ and this is what references you will use to link them together by the <a> tag.