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

 

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!