Video script

And now we're going to learn to configure and set up 4D's integrated Web server.

4D's integrated architecture offers many advantages because with the same tool, with the same programming, you can develop in both single-user mode and client/server mode and you can also publish database data on the Web without changing tools.

To start, we're going to check the publication port. On Windows, this isn't necessary. On Mac, port 80 is used by default by Apache. So we'll set this port, for example, to 8080 and then start the Web server (in production, we check the "Launch Web Server at Startup" option so that this becomes automatic).

The page that appears in the browser indicates that the connection has been made. So let's check what happened:
Let's go back to the Database Settings: We can see that a default page is indicated as well as a default directory. So 4D searches for the directory and the index page (and in fact creates them since they do not already exist) .

It is now up to us to change the contents of the page and if necessary the name of the folder that will contain our Web site (such as HTML pages, pictures, JavaScript and CSS).

To make your work easier, we recommend organizing your files according to an architecture similar to this one:

• CSS
• Pictures
• index_en.html
• JS
• pages

...where you can group together the different types of files in their corresponding folders.

First we're going to change the home page to add data that comes from our database (this might be the number of records per table, the contents of an array, and so on).

But before we do that, we need to understand how messages flow between the browser and 4D's Web server.
When the browser sends a request:

• It is received by the Web server, which sends it in priority to the "On Web Authentication" method, if it exists
• Then to the "On Web Connection" method, which is the focal point of request processing.

This method will receive a certain number of parameters that allow us to direct the processing to be carried out and the replies to be sent.

Let's suppose that the browser requests:

• The root of our site by typing just the address that we saw (127.0.0.1 and the port number 8080) or the domain name if we were on a real site: The "On Web Connection" method just receives "/" as a parameter.
• If a specific page is requested, for example 127.0.0.1:8080/TechList, in this case, it receives everything following the root of the site, in other words, "/TechList". So this is the parameter that we're going to receive and that must be parsed.

But before we go any further, we're going to change one of 4D's preferences in order to choose, programmatically, the default page that we want to be sent:

• Let's go back to 4D
• to the Database Settings
• and remove the default page.

From now on, 4D will no longer be able to send the page automatically unless we first take control.

Whenever you make a change in the preferences, you need to stop the Web server and start it again.

Now, let's modify the "On Web Connection" method so that it sends the page we want.

Like all 4D methods, this method receives parameters.
At first, we're only going to take the first parameter received ($1) into account.

Next we can test whether the parameter received is "/"; and if so, we decide to send a particular page; in this case, it is the index.html page.
Let's enter the following code:

By setting a break point and reloading the page in our browser, we see that the browser goes on stand by because the break point was executed. We can check the parameter received in $1, which is "/" and, in this case, we're going to send the index.html page.

Now let's modify our page to display the date and time as well as a list of all the technicians.
In the Webfolder folder,we modify the index.html page:

• We remove all this part here,
• This too, since we don't need it right now
• And we copy this: the text from a 4DVAR type tag which means either a variable or a field from the database concerned and we finish the comment.
• The same goes here for the time being.

We therefore intend to use database variables and data.

Before going any further, you need to know that for each Web connection, a new process is created and so the variables and selections of previous calls are not normally kept by 4D. (In the 4D documentation, you'll learn how sessions are managed, which is not covered here so that we can focus on understanding the underlying mechanisms, but it is possible that variables are not always deleted, which is the principle behind sessions).

If we reload the page in the browser, 4D indicates (since it tried to find the vdate and vtime variables) that these 2 variables are undefined. So we need to initialize them and assign values to them before reloading the page.

Here we assign values to these 2 variables:

So now we have the date and the time.

Before we send the page, we can create a selection of technicians, for example.

When we reload the page, the technicians do not appear by themselves; we need to add it in the HTML code.

We're going to make 2 line breaks then make a loop on the technicians and indicate, for instance, that we want to have the contents of a field, which will be the last name of the technician with a carriage return at the end.

By reloading the page, we now have all our technicians.

Of course, all the HTML display components (such as lists, arrays, CSS, and DIVs) can be used when creating your pages. The goal of this video is to help you discover the concept, not the form.

Now let's make each of the technicians "clickable". To make them clickable, just do this. We save and reload the page and each technician is now clickable.

We see here in the lower part that no details are given because in HREF we did not specify what this link should point to.

It's up to us to specify what URL will appear in 4D, keeping in mind that if we want to systematically pass in On Web Connection, the 4D syntax is: (/4DCGI).
Next we choose, for example, viewing a technician.

If we save this and come back, we now have links that can be clicked; however, we did not distinguish between each technician. So, after this URL, we need to indicate the ID of the technician, which ensures we find the right one.

We save and reload the page and now we see the ID of the technician at the end of each URL.

We're going to trace this to see what happens in 4D when we click on a link.

In the On Web Connection method, $1 contains what we expected. So we're going to modify the method in order to take this new information into account. We see that $1 can contain something other than "/", for example /4DCGI/@. Therefore here we are in the context where we have a standard call to the On Web Connection method.

We're going to structure this part as we see here:

We assign a value to an intermediate variable where we replace the 4DCGI; then if the request is sent to see a technician, we're going to again replace the part that does not interest us to end up with the ID that we want in this variable here.

So we're going to create a technical page called page-tech.html which contains the technician's first and last name and his or her e-mail. But first we're going to check whether we get this result.
When we refresh the page:

• $1 contains the full string that we expected
• and when we proceed, we're going to replace the 4DCGI in this URL variable
• then finally display_tech
• and find the technician that interests us in the Technicians table.
• Next we're going to send this page_tech.html that we'll create beforehand.

We're going to:

• duplicate the index page, page_tech.html
• where we'll remove the date and time
• retrieve the technician's last and first name
• and place a title.

In 4D, when we continue the method, our browser receives the page_tech information with the first and last name of the technician.

Now we can add, in this page, the list of the next 10 interventions to be performed by the technicians. In the On Web Connection method, before sending the page, we just need to add the following:

• search for future interventions
• sort by the intervention date
• take the next 10
• and add in our HTML page here, a loop on [Interventions]
• and we'll request to have, for example, the intervention date and the object on the same line.

We add a title with a preceding line break if necessary. We save and when we reload the page, we have the information concerning the technician as well as the next interventions and we can even add HTML later on in order to make the display of the page a little more clear.

At this point, we could also proceed in the same way to make each intervention "clickable" by adding an href tag. You can save the changes and of course indicate the URL that you want to receive in your Web server in order for each row to become "clickable".

This first look at a quick and easy way to set up a Web site lets you learn how to publish your data on the internet using the integrated 4D engine.