Web-based IDE to create Model and Controller Components for MVC-based

Web Applications on CakePHP

Dec 13, 2010Sugiharto Widjaja

Advisor: Dr. Chris PollettCommittee Members: Dr. Sami Khuri, Dr. Mark Stamp

Outline

• Introduction• Background• Design• Architecture• Implementation• Issues• Performance• Usability• Conclusion

Introduction

• Why Web-based IDE?• No installation is required• Can be used anywhere

• Some free Web-based IDEs are Mozilla Skywriter by Mozilla, phpAnywhere.net, cPanel, Kodingen, and ShiftEdit

• Weakness• Need to write a lot of code• Need to set up the database schema and tables (for database-

driven Web applications)

• Our Web-based IDE will allow users to create sophisticated CakePHP Web applications without having to write too much PHP code and to set up the database

Introduction

• Our IDE is developed using two major technologies: PHP and JavaScript

• We use jQuery and jQuery UI as our main JavaScript frameworks

• We also use the CKEditor which is a Web-based WYSIWYG text editor.

• For this project, I am responsible for the implementation of model and controller components. Swathi Vegesna, another SJSU CS graduate student, is responsible for the implementation of view component

Background

What is CakePHP?• a PHP framework that is based on MVC (Model, View, Controller) design

pattern• is heavily influenced by another Web framework, Ruby on Rails• Every Web application is broken into three components: model, view, and

controller• uses “Coding by Convention” paradigm.

CakePHP Web applications are more structuredChallenge: • Users must make sure all components are set properly.• A single mistake in the components setup can lead to long and frustrating

debugging session

Background• Our IDE will simplify the creation of CakePHP applications by automating

most of the processes.• Example: to create an application in CakePHP without using our IDE, users

need to• Create new folder for the project and copy all required files to that

folder• Create the model, controller, and view files• Set up the database configuration file• Set up the database• Create a database table for the model component

• With our IDE, users only need to• Click on “Create New Project” button• Enter the project name and the database configuration• Click on ‘Create’ button

Design

• Requirements• Automatic setup of files, databases, and database tables• Should support• Model Schema Editing• Add / Delete Model Entries• Construct Find Functions for Models• Associating Models• Creating New Model or Controller

Design

• Directory Structure

Design• Naming ConventionProject Name: Provided by UsersModel Class Name: camelize(Project Name)Model filename: underscore(Project Name).phpController Class Name: camelize(pluralize(Project Name))Controller Filename: underscore(pluralize(Project Name))_controller.phpView Folder: pluralize(Project Name)Example:Project Name: BookstoreModel Class Name: BookstoreModel filename: bookstore.phpController Class Name: BookstoresController Filename: bookstores_controller.phpView Folder: Bookstore

Architecture

• Database: ides• Database tables

• users(id, username, password, confirm_hash, has_confirmed)• ides (id, project_name, project_path, project_db_config, user_id)• model_components (id, model_name, model_filename, ide_id)• controller_components (id, controller_name, controller_filename,

ide_id)• view_components (id, view_filename, ide_id)• models_associations (model1_id, model2_id, association_type)

Architecture

• Automatic creation of new database and database table on the creation of new project• Database table name will be

underscore(pluralize(project name))• Database table will have only one field (‘id’)

• Automatic creation of new database table on the creation of new model• Database table will be created in project database

Implementation

• General Application Flow

• Critical Back-end Features– Component Instantiation– CakePHP to MySQL data type conversion

Component Instantiation

CakePHP to MySQL data type conversion

• We use CakePHP-supported data types on front-end GUI• IDE will still need to convert these data types to MySQL data type. For

example, when the user edits model schema

Front-end Components

• Left Panel• Projects + MVC components

• Center Panel• Edit / Design Mode

• Right Panel• Interactive Help System (for Model and

Controller) or HTML elements tool (for View)

Front-end Components

Model Component Features

• Editing Model Schema

Editing Model Schema• Users can modify the schema of a model without having to interact

with the database table directly• How does it work?

• Users right-click on the model name on the left panel and choose “Edit Model Schema”. An interface will be displayed on the center panel

• Users can edit the model attributes, delete them, or add new ones.• When user clicks on save button, the JavaScript will send an Ajax

call to the IDE controller with the attributes of the model• The IDE controller will process all the attributes and create a list of

required alterations to the database table and send it to the IDE model

• The IDE model will create an SQL alter statement and execute it.• The model schema is now updated and it will be reflected on the

interface

Adding / Deleting Model Data

• Users can add or delete data from a model without having to work with the database table directly

• How does it work?• Adding new data

• Users right-click on the model name and select “Add Entry”• A form will show up on the center panel. Users can enter the attributes for the new

data on this form• When users click on ‘Create’ button, the JavaScript will send an Ajax call to the IDE

controller with all the attributes.

Adding / Deleting Model Data• The IDE controller will send the attributes to the IDE model• Model will execute an SQL insert statement to add that data to the database.

• Deleting existing data– Users right-click on the model name and select “Delete Entry”– A form shows up on the center panel. Users can delete any entry by clicking on the cross

image and confirm the deletion– The JavaScript will send an Ajax call to the IDE controller with the id of the deleted entry– The controller will pass that id to the Model– Model will execute an SQL delete statement

Constructing Find Methods for Models

• A find method is equivalent to issuing an SQL SELECT statement and return the result of the SELECT statement.

Constructing Find Methods for Models

• How does it work?• User right click on the model and choose “Create Find”• When user clicks on “Create Find” button, JavaScript will issue Ajax call to

controller with the selected attributes• The IDE Controller will pass all the parameters to model.• The IDE Model will generate the PHP code for the new find method and

append that code to the model PHP file• Example of generated PHP code:function find_songs_by_Kosaka_Riyu() {return $this-

>find('all', array('recursive' => -1,'joins' => array(array('table' => 'jpop_artists', 'alias' => 'JpopArtist', 'type' => 'INNER', 'conditions' => 'Jpops.jpop_artist_id = JpopArtist.id')),'fields' => array('Jpops.id', 'Jpops.title', 'Jpops.category', ),'conditions' => array('JpopArtist.name' => 'Kosaka Riyu', ), 'order' => array('Jpops.id asc', )));}

Constructing Find Methods for Models

• Constructing find method with “parameterized” conditions • Clicking on the checkbox in the Conditions column will set the attribute as

“paramaterized”

Constructing Find Methods for Models

Generated PHP Codefunction find_songs_by($JpopArtistname) { return $this->find('all', array('recursive' => -1,'joins' => array(array('table' =>

'jpop_artists', 'alias' => 'JpopArtist', 'type' => 'INNER', 'conditions' => 'Jpops.jpop_artist_id = JpopArtist.id')),'fields' => array('Jpops.id', 'Jpops.title', 'Jpops.category', ),'conditions' => array('JpopArtist.name' => $JpopArtistname, ), 'order' => array('Jpops.id asc', )));

}• jPopArtistname is the “parameterized” condition

Associating Models• Users can link models by creating associations between them• Our IDE currently support hasMany, hasOne, and belongsTo associations

• How does it work?– Users right click on the model and choose “Associate w/ Another

Model”– Users choose the two models to associate and click create button– TheJavaScript will send an Ajax call to IDE controller along with the

two models information. IDE controller will pass them to Model.– Model will instantiate a CakePHPControllerModelAssocAdder object.

The object will add the new association to the main model PHP file.

Adding Models to Controller• Enabling controller to access models other than its primary model• How does it work?

– To add a model to a controller, user will drag the model and drop it on the controller

– The JavaScript sends an Ajax call to the IDE controller along with the information of the model and controller. The IDE controller passes that information to model

– The model instantiates a CakePHPControllerModelUsesAdder object. This object adds the model name to $uses variable in controller class file.

Controller Components Auto-suggest Feature

• Our IDE allows users to manually edit the model and controller PHP files.

• Auto-suggest feature on editing of controller file• When user types $this->, IDE will display a dialog box of all models

that can be accessed by the controller• When user types $this->model_name, IDE will display a dialog box of

all methods of model_name.• The JavaScript will send an Ajax call to the IDE controller along with

the name of the model to the IDE model. The IDE model uses PHP Reflection to get both the models that can be accessed by the controller and the methods of the models.

Controller Components Auto-suggest Feature

Adding New Models or Controllers• Users can add a new model or controller by right-clicking on the “Models”

or “Controllers” texts.• The JavaScript will send an Ajax call to the IDE controller along with model

or controller name. The IDE controller will create a basic model or controller PHP file and store the information in database.

Exporting Projects to SQL Files• Users can export the project database, database tables, and data to an

SQL file by right-clicking on the project and choose ‘Export Project’• The JavaScript sends an Ajax call to the IDE controller. IDE controller

passes them to model. Model creates required SQL queries and write them to file

• File will be visible on the interface. Users can download this file.

Interactive Help• Located on the right panel of the GUI• Offer brief tutorials or hints of the operations performed by users• Shows up when users perform some operations on model or controller

components. (Example: exporting a project)

Issues

Instantiating the Model or Controller Components from Users' Created Projects

• This is usually accomplished by/** $comp_name – the name of the model/controller component $db_config_name – the name of the database config to be used */$comp_obj = new $comp_name(false, null, $db_config_name);• Won’t work for model or controller components from users’ projects

because CakePHP will try to find the database configuration from our IDE directory.

• Solution:• get all the users' projects and their DB configurations during the instantiation of

the DATABASE_CONFIG object. • For each project, we will instantiate an array variable that holds the DB

configuration of that project.

Issues

Instantiating the Model Components that Have Associations

• The instantiation will fail if both the main model and its associated models are from different project.

• Bug : __constructLinkedModel function in CakePHP core model.php file.

• The function attempts to instantiate the associated models with incorrect database config

• Solution: add the DB config parameter$model = array('class' => $className, 'alias' => $assoc, 'ds' =>

$this->useDbConfig);

Browser Compatibility Issue

• jQuery live() function does not work with onChange events on Internet Explorer Web browsers

• Live() works through the use of event delegation. It binds a specific handler to the DOM tree.

• However, onChange events do not bubble up in Internet Explorer Browsers. Therefore, event delegation does not occur.

• Solution: We use livequery plugin.

Interactivity Issue

• It is always a challenge to make a Web-based application to behave interactively as in desktop-based application

• We had tried to make our CakePHP IDE to be as interactive as possible by using some of the jQuery UI features such as dialog box and drag-and-drop.

• We have also added the auto-completion feature for the CKEditor to make our IDE more interactive.

Performance

• To analyze the performance of our IDE, we compare it with a desktop-based application called ModelBaker.

• ModelBaker lets users create CakePHP-based Web applications. It is only available in Mac platform

• Our results show that our IDE performs as fast as ModelBaker in all operations except the create project operation

• We also measure the time of our IDE to load. On average, the loading time is 1 second.

PerformanceOperations Our CakePHP IDE (in ms) CakeBaker (in ms)

Creating new project 343 219

Reading model or controller files

191 N/A

Saving model or controller files

157 N/A

Saving Model Schema 200 212

Adding New Entry to Model

195 N/A

Deleting Entry from Model 120 N/A

Creating New Model 201 218

Creating New Controller 118 219

Associating Two Models 206 223

Creating New Find Method 182 N/A

Usability Testing• Conducted with five users.• We ask users to perform several tasks and to rate the difficulty of

performing these tasks on the scale of 1 to 5 (1 – cannot figure out, 5 – very easy)• Create a new account and login to that account• Create a new project• Edit the schema of a model• Add new model• Associate models• Add new entries for a model• Delete entries from a model• Add a model to a controller• Create a new find method for a model

Usability Testing

• Overall, users found that our IDE simplifies the process of creating a CakePHP project with its models and controller components

• Users want more tutorials and examples• We ask users to also perform the tasks on

their favorite IDE and to rate them.• Our IDE is the clear winner!

Result of Usability Testing (Our IDE)

Other IDE

Conclusion• We achieved our goal of the project by implementing many features that

automates most processes in creating CakePHP Web application.• One of the biggest challenge we encountered was the issue of the

instantiation of model / controller components from users’ projects. We solved this challenge by fixing the bug in CakePHP core model.php file

• Our CakePHP IDE performs as fast as CakeBaker in most operations except the create new project

• Overall, users found our CakePHP IDE to be easy to use• By successfully completing our project, we learnt a lot about the

mechanism of MVC-based Web frameworks. We also learnt a lot about building interactive Web applications

• We hope that our IDE will help users to understand more about MVC-based Web frameworks and to create CakePHP Web applications easily.

Questions?

Thank you