Create a simple To Do List in DooPHP – Part 1


Introduction
This tutorial will guide you through all the steps required to get started using DooPHP through the creation of a simple To Do List Application. The tutorial is split into a number of sections and you will need to read the guide from the begining in order to understand whats going on.

Part 1 – Getting Started
Part 2 – The Signup Form
Part 3 – User Authentication – Coming Soon
Part 4 – The To Do List – Coming Soon
Part 5 – Adding AJAX Functionality – Coming Soon
Our Objective for this Tutorial
In this tutorial we will be creating a simple To Doo List Manager Web Application and through the course of the tutorial we will be covering the following topics:

Obtaining and Deploying the Base DooPHP Application
Setting up the MySQL Database
Creating the Models
Creating the To Do Manager Application
Signup Form
User Authentication
User Home Page
Task Actions
Enhancing you application with AJAX
You can view a demo of the finished project here. Some screen shots of the final application are also included below:

TODO: IMAGES TO GO IN HERE WHEN I FINISH!

TODO: UPDATE THE DEMO LINK ABOVE

Obtaining and Deploying the Base DooPHP Application

Before you can begin working on the To Doo List Manager you will need access to a Web Server. This guide assumes you already have webhosting or better yet running a development server locally which supports PHP5 and a MySQL. If you do not yet have your own server to use then I suggest taking a look at using a WAMP server on your local system : http

You will also be needing a copy of DooPHP. You can download the latest release from here (for this demo I am using Version 1.2). IF you want to use the very latest source for DooPHP take a look and download the code from here : DooPHP on Google Code

Once you have downloaded one of the compressed packages open it and copy the dooframework folder into the projects root folder and the contents of the app folder into your public_html folder. This should then give you a folder structure similar to the following:

  • X:todomanager
    • dooframework
    • public_html
      • global
      • protected
      • tools
      • .htaccess.example
      • index.php

In the above example apache has been configured to have the DOCUMENT_ROOT set to x:todomanagerpublic_html with the project root therefore being : x:todomanager

At this point we need to make a few changes to the configuration of DooPHP in order for it to work under the file structure being used for this demo. Therefore you first need to open the file public_htmlprotectedconfigcommon.conf.php and make the following changes:

  1. Change the date_default_timezone_set(…) to your own local time zone
  2. Change the $config[‘SITE_PATH’] and $config[‘BASE_PATH’] to:1.$config['SITE_PATH'] = dirname(dirname(dirname(__FILE__))) . DIRECTORY_SEPARATOR;2.$config['BASE_PATH'] = dirname($config['SITE_PATH']) . DIRECTORY_SEPARATOR . 'dooframework' . DIRECTORY_SEPARATOR;
  3. Save the file

The SITE_PATH is the folder containing the index.php file (in our case x:todomanagerpublic_html). The BASE_PATH is the location of the dooframework which in this example is x:todomanagerdooframework

If you have set this all up correctly then you should now be able to visit http://localhost/ (of course you should change this if your site is hosted somewhere other than localhost) and see a welcome page provided with DooPHP telling you “It Works!”. If you do not see this check you apache/php error logs and check everything is correct. If you are still having problems you may find some help in the forums.

Now you are ready to create the database used for the rest of this tutorial.

Setting up the MySQL Database

Our To Doo List Manager will allow users to sign up and register for an account. This will require them to pick a username and password which we will later use to authenticate the user. In addition we will ask them for their actual name so we can display this to them when they have logged in.

Each registered user will be allowed to have a single To Do List and each users To Do List will be private from all the other users. We will therefore require:

A “User” table to hold:

  • id
  • username
  • password
  • name

And another table “ToDoItem” to hold:

  • id
  • user_id
  • task
  • completed

There will be a simple one-to-many relationship between Users and ToDoItems with each user able to have many To Do Items.

I have also decided to keep this demo as simple as possible so although we could collect other information like the due date for a task and providing multiple To Do Lists per user we will for now leave such extra features alone although I encourage you to try adding these features yourself as a learning exercise.

In this example I am using a database called ToDoManager and the SQL to create the tables above is show below:

01.CREATE TABLE `ToDoManager`.`User` (

02.`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,

03.`username` VARCHAR( 20 ) NOT NULL ,

04.`passwordCHAR( 32 ) NOT NULL ,

05.`nameVARCHAR( 40 ) NOT NULL

06.);

07. 

08.CREATE TABLE `ToDoManager`.`ToDoItem` (

09.`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,

10.`user_id` INT NOT NULL ,

11.`task` VARCHAR( 255 ) NOT NULL ,

12.`completed` BIT( 0 ) NOT NULL

13.);

You will need to run the above SQL statments on your SQL server (I assume here that you know how to do this). Also note that the synxtax above is intended for MySQL and has not been checked against other database engines. Therefore you may need to change it slightly to use it with your database.

Creating the Models

Now that we have our database created we need to let DooPHP know about its existance. To do this we must first open the DB configuration file found in public_htmlprotectedconfigdb.conf.php.

You will need to uncomment the last two lines starting $dbconfig. You must also specify your databases credentials.

1.$dbconfig['dev'] = array('localhost''ToDoManager''username''password''mysql', true);

2.$dbconfig['prod'] = array('localhost''ToDoManager''username''password''mysql', true);

In the above code you will need to set your databases settings. The parameters are: Host Name, Database Name, Username, Password, Database Engine and lastely if you want to use a persistent connection.

DooPHP allows us to define both the development and production settings to be used for accessing the database. In this example we will assume the details are the same but in real world applications you will likely have different database settings for the development and production environments. DooPHP determins which setting to use based on the $config[“APP_MODE”] setting defined in the file public_htmlprotectedconfigcommon.conf.php. This is currently set to default to dev (developer) mode.

We must also inform DooPHP about the relationships which exist in our database. We only have one relationship in this demo which is a mapping of one User to Many ToDoItem (ie. One-To-Many). To tell DooPHP about this you need to place the following code just above the $dbconfig lines we just defined above.

1.$dbmap['User']['has_many']['ToDoItem'] = array('foreign_key'=>'user_id');

2.$dbmap['ToDoItem']['belongs_to']['User'] = array('foreign_key'=> 'id');

This is essentially telling DooPHP that a User has many ToDoItem’s where each ToDoItem has a user_id which belongs to each User who’s id matches it. e.g. if a User has an ID of 7 then any ToDoItem with a user_id equal to 7 belongs to this user. To learn more about defining relationships in DooPHP please refer to the Model Guide.

We must also let DooPHP know that this application is utilising a database and to therefore load the settings to achieve this. Therefore we need to open the public_htmlindex.php file and uncomment the following lines of code:

1.include './protected/config/db.conf.php';

2./*...*/

3.Doo::db()->setMap($dbmap);

4.Doo::db()->setDb($dbconfig$config['APP_MODE']);

5.Doo::db()->sql_tracking = true;

Now that DooPHP knows about our databases we can make use of the Model Generator tool supplied with the Base application in the DooPHP download package to generate the models automatically for us. Simply navigate back to the DooPHP website http://localhost/ and click on the “Generate Models” link. At this point you may be asked for a username and password, its currently set to “admin” and “1234″.

If the model generation works as expected then it should report the creation of 2 php files:

  • Todoitem.php
  • User.php

These files can be found in public_htmlprotectedmodel if you wish to take a look at them. If you are not informed of the models creation please check over the previous steps and ensure you have done everything listed. If you are still having problems try asking for some help in the forums.

Creating the To Do Manager Application

Now that we have got the Base DooPHP application setup and we have also setup and configured our Models we can start thinking about how users will interact with our Web Application.

We will need to provide users with a number of possible actions to perform and these will be split between a number of Controllers which will group similar actions together. Users will be able to carry out the following actions on the site:

  • Signup for an account
  • Login
  • Logout
  • View their own To Do List
  • Add new tasks to their list
  • Update the status of a specified task (Incomple, Completed)
  • Delete a task

We will therefore break this down into 2 controllers. One to handel user registration and authentication activities and another to manage the users To Do List

Just before we start working on these Controllers we must delete some files provided in the Base Application which we no longer need. Therefore delete the following files

  • public_htmltools – Delete this folder
  • public_htmlglobalcssdemo.css – Delete this file
  • public_htmlprotectedconfigforms – Delete this folder
  • public_htmlprotectedcontroller* – Delete all files in this folder
  • public_htmlprotectedviewc* – Delete all files in this folder

You can also open up the public_htmlprotectedconfigroutes.conf.php file and delete all the lines of code below the $admin = array(’admin’=>’1234′); (and this line as well) but keep the closing ?> php tag.

We are now ready to start creating our signup form :-)

Previous PostNextNext Post

Leave a Reply

Your email address will not be published.