CakePHP + Bootstrap


I love PHP. That’s a fact that I managed to prove ever since college. I self studied the language as well as the underlying platform due to my interest in learning; which comes from the fact that I know its purpose.  For this post, I’m going to put some perspective on how do we create a CakePHP application and put the bootstrap in to make a more responsive user interface design for the web.

Step 1: Ready your Cake App – skip this if you already done some baking – if you want to get something going from scratch, follow my simple registration tutorial here: Registration Example

Step 2: Download BootStrap for CakePHP

Since the birth of boostrap a lot of developers created their own mix and match using the front-end framework. Either you download an existing one or create your own. For this tutorial, lets download an existing one: CakePHP Theme

Extract the zip and put it in your Theme directory inside your cakePHP project.

PHP_-_gasfinder_app_Controller_AppController.php_-_Eclipse_-__Users_alvinreyes_EclipseProjects_PHP

Step 3: Set the $theme on your cakePHP AppController.php

cakestrap_snap

We basically need to set up the global variable $theme and put the folder name of the bootstrap to use it.

Sample Output: Not perfect but it will give you a good start on the layout. You can now focus on the business logic and just take care of the UI later.Administrator

 

High Level Solutions Proposal – Adhoc experience


I was once challenge to create a proposal for a mid-size application that can have millions of potential users. The experience is not easy as I need to meet up with the same client over and over again to discuss the high level solution, innovations made, justify estimates, explain the overall process, expectation on both parties and what the solution will be the final solution be like after.

I will try to give out as much detail as I can, but I need to protect the integrity of my documents as well as my client.

Client Use Case: I want to create e-Learning System that will allow enthusiastic knowledge sharer to have a venue for them to teach and possibly earn.

With this client use case, I come up with a Conceptual System design. The Functional Aspects include  (note that what I’m going to show here is just a specific phase of the project):

  1. User Dashboards
  2. Learn – Venue for users that wants to learn
  3. Teach – Venue for users that wants to teach
  4. Community forum – discussions on topics, courses and other related activities
  5. Account Management – users will be able to manage their accounts using a specific sub-system
  6. Shopping Cart – Payment process
  7. Settlements – Settle accounts and payments, report generation for receipts and stubs
  8. Actual up front website of the system

What I did is separate these systems requirements and break them down to smaller manageable (yet still high level solutions) modules. I will not further elaborate how I did them but here is the screenshot of the documentation I made (with the break down). Basically, these are all intuition based, if you are knowledgable how Software Apps work – you’ll eventually end up having an idea on how to solve each specific case.

So to list all details that I did for the proposal:

  1. Details that as much as you can, can be explain or elaborated to the most non-technical person on the client side
  2. Complete Systems requirements versus technical solution
  3. list of solution and innovations (why does your solution stands out of the rest – what is special about it)
  4. Process / methodology – We need to give them a bit of how we do things and this is how effective we are – give them the benefits that they will acquire with your preferred methodology – not just your own benefit.
  5. Give them the comfortable detail they need for them to trust the solution

I tried preparing all of this items as it will give the client a better perspective and understanding on what and how are the projects will be executed:

I put up a list as of features with respect to its technical conceptual design. These features look a lot like functional ones but a closer look at each will give you the idea that they are also separated by technical implementation (how to implement each).

1_feat

Created Pre-requisites – to identify if there are features that needs to be done first before the feature is considering fully working. Description – is just the purpose of the module. Solution, Effort and Cost Driver – table that consist of the solution, explanation of effort and its cost driver.

Sample Feature breakdown – that includes, description and step by step sub-features:

feature_breakdown

Next is the cost breakdown – the cost break down is based on the average hourly rate of the developer – I wanted to make this project as formal as possible as I’m looking at it back then to be the initial pilot project and that the process established will be re-used for succeeding ones.

cost_1

effort_excel

The cost gives an overall breakdown of cost with respect to: technology stack, platform, effort resourcing and external service needed.

Technology Stack Diagram and implementation scheme – Its important that you align the methodology or at the very least, the strategy of implementation. I used Agile – and aligned its benefits and the high probably of quality result by using actual user stories.

Application Stack:

break_down

Since this is a Website: Systems Architecture (Hosting)

hosting_arch

Agile: Systems Integration Architecture / Process View

arch_sys

Traceability Matrix – Map System requirements to High Level Solution module (note that this is from a different project)

sys_vs_tech

The bottom line here is that: Give them the correct details they need for them to be comfortable with how you will do the solution and of course your depth knowledge to finish them off with the highest quality possible.

Basics of all Basics – Relocate your Apache DocRoot


Sometimes, the exciting part in configuring a virtual software server (web or application) is the activity to understand how it works and how can you manipulate it the way you want. For this post, I would like to give a basic how to on relocating (or pointing) your apache to scan a specific directory as its DocRoot directory. 🙂

The DocRoot directory – Every PHP developer must ‘ve known or ask regarding about this. Did you ever wonder if you can customise your XAMPP/LAMP or MAMP to detect or interpret PHP files on a folder other than the docroot folder? Here is how!

Locate  httpd.conf file on the apache folder – This is where you can edit that settings!

 

1st) Go to the DocRoot line and change the location to your location

Screenshot_1_20_13_9_29_PM

 

2nd) and Edit the <directory “<location>”> with your location then

Screenshot_1_20_13_9_33_PM

 

3rd) restart!

Easy  easy easy right? Now you can put all your PHP apps there and run it smoothly by using: http://localhost <or whatever your host name is>:80 <or whatever your port is>/app <or whatever your app name is>

Screenshot_1_20_13_9_35_PM

 

 

cakePHP – Registration Application


Agility – In Software Development, having this characteristic is one of the key to success these days. A lot of talented startups are using their flexible business models to quickly adapt to changes and widen their customer base. Developers are now adapting and embracing the “Jack of all trades” on a platform level as the demand for such is increasing day by day. Yet with all those agile web programming platforms, PHP stood out for me. Its simplicity and straight forward approach makes every developer feel the fulfilment of crafting an application. With the addition of several frameworks developed on top of it like cakePHP, yii, codeigniter etc, the capability of it just keeps getting better and better.

Moving on though, I’d like to show you how simple and agile a developer can be with one of the best Agile / Rapid Web Application Development Framework available: CakePHP

What are we going to do: Simple Registration process it has to have:

  1. Register a new person
  2. Edit an existing person
  3. Delete an existing person
  4. View all of the person
  5. User Interface for all

Its also note worthy that I will be doing all of these stuff as I write this down. I would say it may take you 15mins including the cakePHP initial code setup.

Assumptions:

  1. I use MAC so this tutorial is solely for MAC users – although the only difference is the scripts and system path configuration which is the same as setting up environment variables in windows.
  2. I use MYSQL Database
  3. I use NetBeans PHP Plugin

Set it up: Download the cake and the bakery (its on 1 package only)

    • Download MAMP for your Web Server and MySQL Database
    • Install MAMP < Straight forward, execute the sh file and it will automatically generate the necessary folders
    • Locate htdocs inside MAMP < this is where you will locate your cakePHP and projects as this is the default directory recognised by your web server and php parser (you can actually change it to any custom directory you want, this can be done by changing the DocumentRoot of httpd.conf inside the apache folder).
    • Download the latest cake distro here: http://cakephp.org/
    • Put it inside your htdocs folder (start your XAMPP to test).
    • if you see the screen below, then your on the right track!

  • Check the video for the .bash_profile: http://www.youtube.com/watch?v=KOBO-kEakQ0 for the environment variables.
  • Export the following variables and values < This is to put the cake library in your classpath. This is important for you to easily access the commands for baking (code generation tool)
  • Test it!

Database Setup: Lets setup your database and table objects

  • Create a table named persons < This is cakePHP’s naming convention, tables are “recommended” to be plural as this will have multiple entries of a specific business data.
  • Create the columns: Id, first_name,last_name,birth_date,email_address. Again, convention wise, words are separated by _ and a sensible column name.
  • You are now ready to create your first cakePHP web application!

Cake Bake: Open terminal

  1. Type cake bake -app
  2. Type the location on where you want to put the app. In this case, put in htdocs folder.
  3. Skeleton folder is the default one so just press enter. Type in Y when ask if “Look okay?”.

Create a Database Connection called “default”.

  1. Database: Mysql
  2. Persistent Connection: For now, N
  3. Database Host: 127.0.0.1
  4. Port: 3306
  5. Username: <your db username>
  6. Password: <your db password>
  7. Database Name: registration_sample
  8. Press Enter all the way.

This will create a new “bakeable” project source code. Type in cake bake -app <location of the project source code>. This will run the cake bake command and will display a menu of code generators (screenshot below).

Generate Model Codes first: Press M

  1. Use the “default” datasource
  2. Choose 1. Persons
  3. Primary Key: 1. Id
  4. Display Field: first_name
  5. Validation Criteria for Fields: Y – this is where you define the validation. This will affect the validations on the user interface.
  6. Press Enter all the way

Generate Controller Codes: Press C

  1. Choose 1. People
  2. Press Enter up until the generation of basic class methods.
  3. Would you like to create some basic class methods index(), add(), view(), edit())? (y/n) = Y
  4. Would you like to create the basic class methods for admin routing? (y/n)  = N
  5. Would you like this controller to use other helpers besides HtmlHelper and FormHelper? (y/n) = N
  6. Would you like this controller to use any components? (y/n) = N
  7. Would you like to use Session flash messages? (y/n) = Y
  8. Press Enter all the way

Generate View Codes: Press V

  1. Choose 1. People
  2. Press enter all the way

Go to: http://localhost/RegistrationPersons/People

and your done! You may now create, edit, delete and view all persons! All of these generated by the bake command.

Here is the actual source code! Enjoy!

CakePHP – Basics on MacOSX


As I was playing along with CakePHP on my machine, I noticed that it took me some extra steps to configure it correctly on my Mac machine, unlike in Windows that is fairly very straight forward.

First the cake core console configuration on the system path – You need to define the cake core first on the classpath, this will allow the user / developer to call the cake and bake commands from the terminal.

Download CakePHP and put it under your Server Document Root (you can configure this on httpd.conf of you web server)

Open console and type: nano .bash_profile

This will open a console base text editor and .bash_profile file – note that the bash_profile is one of the recognized system classpath file in which users can declare console classpath (libraries). Now include the cake bin folder as shown on the screen.

export PATH=/Applications/MAMP/Library/bin:/Applications/MAMP/bin/php/bin:/Users/alvinreyes/EclipseProjects/PHP/cake/lib/Cake/Console:/opt/local/bin:/opt/local/sbin:/opt/subversion/bin:$PATH

Save, close the terminal and re-launch. Type in cake bake on the terminal

You are ready to bake your first application! Follow through the instructions and answer the simple questions that command asks and your good to go!

Once you create the Application Structure, you can now maximize the bake – code generation tool for generating the models, controllers and views.

Further Reference: http://www.youtube.com/watch?v=KOBO-kEakQ0

Enjoy!