My First PRADO Application

In this section, we guide you through creating your first PRADO application, the famous "Hello World" application.

"Hello World" perhaps is the simplest interactive PRADO application that you can create. It displays to end-users a page with a submit button whose caption is Click Me. After the user clicks on the button, its caption is changed to Hello World.

There are many approaches that can achieve the above goal. One can submit the page to the server, examine the POST variable, and generate a new page with the button caption updated. Or one can simply use JavaScript to update the button caption upon its onclick client event.

PRADO promotes component-based and event-driven Web programming. The button is represented by a TButton object. It encapsulates the button caption as the Text property and associates the user button click action with a server-side OnClick event. To respond to the user clicking on the button, one simply needs to attach a function to the button's OnClick event. Within the function, the button's Text property is modified as "Hello World". The following diagram shows the above sequence,

Our PRADO application consists of three files, index.php, Home.page and Home.php, which are organized as follows, where each directory is explained as follows. Note, the above directory structure can be customized. For example, one can move the protected directory out of Web directories. You will know how to do this after you go through this tutorial.

assets - directory storing published private files. See assets section for more details. This directory must be writable by the Web server process.
protected - application base path storing application data and private script files. This directory should be configured as inaccessible to end-users.
runtime - application runtime storage path storing application runtime information, such as application state, cached data, etc. This directory must be writable by the Web server process.
pages - base path storing all PRADO pages.

Tip:You may also use the bin/prado-cli.php (framework/prado-cli.php for Prado < 3.2.3) command line script to create the Prado project directory structure. For example, type the command php path/to/prado-cli.php -c helloworld in the directory where you want to create the helloworld project.

The three files that we need are explained as follows.

index.php - entry script of the PRADO application. This file is required by all PRADO applications and is the only script file that is directly accessible by end-users. Content in index.php mainly consists of the following three lines, require_once('path/to/prado.php'); // include the prado script $application=new TApplication; // create a PRADO application instance $application->run(); // run the application
Home.page - template for the default page returned when users do not explicitly specify the page requested. A template specifies the presentational layout of components. In this example, we use two components, TForm and TButton, which correspond to the <form> and <input> HTML tags, respectively. The template contains the following content, <com:TForm> <com:TButton Text="Click me" OnClick="buttonClicked" /> </com:TForm>
Home.php - page class for the Home page. It mainly contains the method responding to the OnClick event of the button. Text="Hello World!"; } }

The application is now ready and can be accessed via: http://Web-server-address/helloworld/index.php, assuming helloworld is directly under the Web DocumentRoot. Try to change TButton in Home.page to TLinkButton and see what happens.

Complete source code of this demo can be found in the PRADO release. You can also try the online demo.