Basics: anatomy of a URL

Basics: anatomy of a URL

02.Oct.2021

Kirby is a small engine that can

In this article, we'll demonstrate how URLs are formed from the bottom up. We'll be using [Kirby](http://getkirby.com/) as an example web application throughout, but you can apply what you learn to any website. Remember that HTTP stands for *Hyper Text Transfer Protocol*. This is the language spoken between browsers and servers on the  internet. What follows will be a lot of technical information if you're interested in more detail.

Structure of a URL:

The structure of a URL goes something like this:

* www 〜 * : * // www 〜 / # 〜

1) The first part is protocol being used. Common protocols are http, ftp, and file. *2) Next is the domain name.*

3) Third part is usually the path to the resource being requested. This can be further broken down into subpaths by using / # 〜 between directories. These will be explained in detail below.

4) Finally, there are query string parameters that contain meta information about the request.(eg.,   &key=value&key2=value2 ) It's not important for now since it won't be used throughout this article.

What do each of these parts mean? Let's break down a URL piece by pieces to figure out what they do:

http://kirbyapp . com/themes/classic

1) Protocol being used.

2) First part of the domain name .

3) Subpath to resource being requested. In this case, it's /themes/classic. The web server returns the contents of the current directory for this path if no subdirectory is specified. If a subdirectory is specified, then the contents of that subdirectory are returned instead. Kirby uses these conventions throughout its interface.

4) There are query string parameters following after the question mark(?). These contain meta information about the request and aren't important for now since they won't be used within this article . Now let's discuss port numbers below. Port numbers are optional designators that follow after a colon ( : )in between protocol and domain name. These are used to indicate the port number of a resource being requested. Ports numbers that begin with numbers 1-1023 are considered to be privileged and require superuser access or root privileges to use. If you're not sure what this means, then just ignore these numbers for now since they aren't important for this discussion. The image below shows how ports work:

There's one exception to this rule and it has to do with loopback addresses and web servers. Practically all operating systems allow localhost connections on tcp/80 (http) and tcp/443 (https). This is because browsers need the ability connect back via HTTP connections to verify SSL certificates during handshake(more on this). See here  for more information.

Now that you have a pretty good idea of what URLs are, let's take a look at how Kirby builds them.

Kirby URL paths:

URLs within Kirby are built through the use of path variables . Path variables take the form of *%path_to_key* where *path_to_key* is any string defined in Kirby to represent a particular value. These can be seen by opening up any *.kirby file(eg., themes/classic/index.kirby) and looking for lines similar to below:

var : title = "Classic"  // this variable tells us which subdirectory we're in var : subdir = "themes" // this variable tells us what subdirectory this theme is in var : port = "8080" // this variable tells us which port to connect to...

These variables are used within URLs to build up paths. For example, saying %title% would render the value of the title variable(eg., "Classic"). This can be seen when you set your home page address in your browser settings to http://kirbyapp.com/themes/classic . The other path variables are used similarly throughout Kirby's interface. Here's a quick look at how each path variable functions:

%title% - Returns the name of the current active directory for this site. If there are no subdirectories, it will return *Home* instead since there's no active subdirectory.

%subdir% - Returns the name of the current active subdirectory for this site.

%port% - Returns the port number that Kirby is using to serve content . If no port is specified, then it returns *80* instead.

  %basepath%  - Gets the first part of this path's domain name(the first directory) and removes any trailing slashes.

%domainname%- Gets what's after the first part of this path's domain name(everything after the first directory). Note: if there are no subdirectories following the first directory, then it will return an empty string "".

URLs can also be built up with regular expressions by adding them between forward slashes (/). These are useful for building subdirectory paths by matching patterns of characters. For example, /%subdir_regexp%/ will return the string following the first directory if a match is made to this pattern. Here's an example:

var : port = "8080"  // if we're not using SSL then let's just use http instead... var : protocol = "/http" //if we found a match to our regexp variable, then get everything after the first directory and remove any trailing slashes from it. link : baseurl = "%domainname%" + "/" + %basepath% //we want all lowercase letters in our path, so let's take care of that now. link : new_path = replace ( %basepath%, string ( "^([A-Z])+" ), string ( "%lower%s+" ))

// now we have a handle on what the basepath is, let's figure out which subdirectory this theme belongs to... var : subdir_regexp = "/%subdir_regexp%" //if we find a match to our regexp variable, then get everything after the first directory and remove any trailing slashes from it. link : subdir = replace ( %subdir%, string ( "^([A-Z])+" ), string (%lower%s+))

 

// so now we can say... link: subdir = "/themes/" + subdir // remember, %subdir% is the name of our subdirectory variable.

"variables are used throughout Kirby's interface."

if you read something that says "'link: new_path = ' then it means that there is a new path being built up, and everything between those two quotes will be added to any path variables already present.

"If no port is specified, then it returns *80* instead." If no port number is defined in your kirby install, Chrome will not allow you to open https pages at all. To fix this, simply delete "port": "8080", from your *.kirby file. Then re-launch the server and visit https://localhost:8080/themes/*example* to see your changes.

"path variables are used similarly throughout Kirby's interface."

here they tell us that if we want to use a path variable, we have to follow the syntax "%variable_name%". the *example* is just there so you can see what it would look like after it has been used elsewhere in the game. also, %basepath% gets the first part of this path's domain name(the first directory) and removes any trailing slashes.

basepath = example.kirby gets rid of any leading slashes in kirbyfile.com example . then you say replace("str", "findme", "replaceme") which means replace all instances of "str" with "replaceme" in "example".

i hope this helps! you can find out more about different variables here: https://kirby.readthedocs.org/en/latest/reference.html?highlight=variable%3A+url#variables-string-and-path Thanks for reading! By the way, I now have a GITHUB where i'll host my kirby files if anyone wants to see examples or use them!: https://github.com/ryne2128/KirbyStuff.

We are social