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

Web-based IDE to create Model and
Controller Components for MVC-based
Web Applications on CakePHP
Dec 13, 2010
Sugiharto Widjaja
Advisor: Dr. Chris Pollett
Committee 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 databasedriven 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 structured
Challenge:
• 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 Convention
Project Name: Provided by Users
Model Class Name: camelize(Project Name)
Model filename: underscore(Project Name).php
Controller Class Name: camelize(pluralize(Project Name))
Controller Filename: underscore(pluralize(Project Name))_controller.php
View Folder: pluralize(Project Name)
Example:
Project Name: Bookstore
Model Class Name: Bookstore
Model filename: bookstore.php
Controller Class Name: Bookstores
Controller Filename: bookstores_controller.php
View 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
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' => 'I
NNER', 'conditions' => 'Jpops.jpop_artist_id = JpopArtist.id')),'fields' => array('J
pops.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 Code
function 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 desktopbased 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.
Performance
Operations
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 MVCbased Web frameworks and to create CakePHP Web applications easily.
Questions?
Thank you