Programming
Accessing a Webpage
Server applications, web or mobile, are executed in two different phases: one in the web server (server), and one in the web browser (client). In order to understand these phases, it is important to understand first how webpages work:
Request
A user requests a file from your web server through a user agent. This is when the user enters the URL of your page in the web browser, or clicks a link to it from another page, a local document, a chat window, etc. The request will include an URL (a path to a document in the web server) and optionally some parameters, not all of them visible for the user.
Response
Your web server catches the request, and returns the file in the requested path. When that file is a server-side script, which is the case for HTML5 Builder webpages, the server will not return the content of the script. Instead, it will run the script, that will generate some output, usually a web document, sometimes a binary file.
Rendering
The user agent (web browser) gets the requested file downloaded from the web server, and displays it locally. If it is a binary file, such as an image, the user will see the image. If it is a web document, though, the user agent renders its content: the user will not see the code of the document, but what the code represents.
Client and Server
The page, generated in the server using scripting code, might also contain scripting code. But those two are different types of scripting: the former is server-side code, and the latter client-side code.
- Server-side code is used to build a web document requested by a user from a web browser.
- Client-side code is printed in that web document using server-side code, and once the document is loaded in the web browser, the web browser runs that client-side code.
You can create two types of applications depending on the type of scripting you use:
- Server applications are those whose pages dynamically generate web documents using server-side scripting, and might or might not include client-side scripting in the output web documents.
- Client applications are those whose pages are static web documents (as opposed to scripts) generated during the stage of development.
Components
Taking advantage of the RPCL library, which introduces Delphi’s concept of components to the web programming, HTML5 Builder lets you code less and do more.
Components are server-side classes that provide certain features. You can configure them through their properties, events and methods, and interact with them both server and client-side. There are several components available by default, and you can create your own components too.
Programming Languages
Server-side Languages
PHP
For server-side programming, you will be using PHP, an easy-to-learn scripting object-oriented language designed from the beginning for web development.
The following sample code features a function that prints the text “Hello, World!” or, if a name is passed as argument, “Hello, <name>!”.
function sayHello($name = World) {
echo "Hello, ".$name."!";
}
Client-side Languages
For client-side programming, a basic knowledge of client-side web programming languages will provide you a lot of flexibility when creating your applications, helping you implement advanced features or even write your own components. The most important of those languages are:
HTML
HTML is the standard markup language for webpages. The following code represents a webpage like the one you create in the Hello Word tutorial.
<!DOCTYPE html>
<html>
<head>
<title/>
</head>
<body>Hello, World!</body>
</html>
CSS
CSS is the standard style sheet language for webpages. The following code sets the background color of the page to black, and the text to white.
body {
background-color: black;
color: white;
}
JavaScript
JavaScript is the standard client-side scripting language for webpages. The following function opens a popup window with the text “Hello, World!” or, if a name is passed as argument, “Hello, <name>!”.
function sayHello(name) {
name = (typeof name == "undefined")? 'World' : name
alert('Hello, ' + name + '!')
}