Image Gallery Tutorial
From PRADO Wiki
Written by Daniel "Thor" Patriche
This tutorial is meant for users with no prior experience with prado, but who know basic PHP syntax and usage, as well as creating MySQL databases and tables. It will show how to display a series of images, taken from a MySQL database using Active Records.
Contents |
Intro
Some introductory text here :)
SQL
We will consider each user having one or more images uploaded, count how many times a specific picture is displayed, and more :) The tables you need to create are:
CREATE TABLE `images` ( `id` int UNSIGNED NOT NULL AUTO_INCREMENT, `name` varchar(50) collate utf8_unicode_ci NOT NULL, `filename` varchar(100) collate utf8_unicode_ci DEFAULT NULL, `user_id` int UNSIGNED NOT NULL, `hits` varchar(100) collate utf8_unicode_ci DEFAULT NULL, KEY `id` (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=3 ;
CREATE TABLE `users` ( `id` int UNSIGNED NOT NULL AUTO_INCREMENT, `username` varchar(50) collate utf8_unicode_ci NOT NULL, `password` varchar(32) collate utf8_unicode_ci NOT NULL, KEY `id` (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=3 ;
You can use something like PhpMyAdmin to create this tables in the database of your choice.
Prado
Download the latest stable version of Prado, and extract it in the folder of your choice, preferably in a non-web-accessible folder (/home/youruser/prado will do fine, or any folder other than htdocs on windows would be fine)
Next, you will need to use PHP's cli (command line interface) which you must have installed in order for this to work, (in ubuntu you can do "sudo apt-get install php5-cli" in order to install it, on windows you need to locate php.exe in your php installation folder).
We'll assume that you've installed prado in /usr/youruser/prado for the sake of the clarity of the next examples.
Fire up a console, cd to your desired folder (let's say ~/public_html or /var/www/ ) and type this in the console:
php /home/youruser/prado/framework/prado-cli.php -c gallery
The output should be several lines resembling:
creating /home/youruser/public_html/gallery/protected/runtime
When the command is done, assuming that you were in the document root of your webserver, you should be able to use your browser and navigate to http://localhost/gallery/ . The result would be a "Welcome to PRADO!" text on your browser.
Creating and editing pages
To make the long story short, Prado uses different files to store page logic from page interface (the way it looks like), using php files for the first part, and .page for the second part.
Let's have a look into the protected/pages folder, where we will notice only one file, called Home.page . If you'll view this file in your favorite editor, you won't see anything strange, just some plain html code.
Let's take things to another level, and start adding Prado components. Modify the Home.page file to look like this:
<html> <com:THead Title="My Image Gallery" /> <body> <h1>My Image Gallery</h1> <com:TLiteral Text="Developed in" /> <com:THyperLink Text="Prado" NavigateUrl="http://www.pradosoft.com"/> </body> </html>
Now let me explain. You could just as well have written this in plain html, but prado is all about custom controls, and advanced ones as you will discover if you'll be brave enough, and the biggest difference between a html "a" tag and a THyperLink is that you can interact with your THyperLink from your prado code, meaning you can change it's text, you can change the address it points to, or every other property it has, you can get properties from it, etc. Seeing is believing, so if you haven't checked out the "Hello World" demo, now would be the perfect time: http://www.pradosoft.com/demos/quickstart/?page=GettingStarted.HelloWorld
Now, for the second part of this section, we'll create a second page, called Browse. First, create a Browse.php file in the protected/pages folder, containing this:
<? class Browse extends TPage { } ?>
There isn't much php code in there, but we'll extend it as we go along, and creating it now would be easier. To actually display some static content in the page, create a Browse.page file in the same folder, containing:
<html> <com:THead Title="My Image Gallery - Browse Pictures" /> <body> <h2>Available Pictures</h2> </body> </html>
Now that we have our second page, how do we access it? Prado uses a Page Service, but all you need to know right now is that if you want a specific page (named by the class name in the php BUT ALSO by the name of both the php and the page file - which must be the same ) you need to go to http://localhost/gallery/index.php?page=ThePageName .
So go ahead and try http://localhost/gallery/index.php?page=Home (the first page) and http://localhost/gallery/index.php?page=Browse (our new page).
