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

1. 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

2. Outline • Introduction • Background • Design • Architecture • Implementation • Issues • Performance • Usability • Conclusion

3. 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

4. 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

5. 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

6. 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

7. 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

8. Design • Directory Structure

9. 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

10. 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)

11. 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

12. Implementation • General Application Flow • Critical Back-end Features • Component Instantiation • CakePHP to MySQL data type conversion

13. Component Instantiation /** component_type: Model or Controller component_path: the path of the component php file component_name: the name of the component db_config_name: the name of the database config used by the project that has this component /* App::import($component_type, $component_name ,array('file' => $component_path)); return new $component_name(false,null,$db_config_name);

14. 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

15. 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)

16. Front-end Components

17. Model Component Features • Editing Model Schema

18. 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

19. 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.

20. 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

21. Constructing Find Methods for Models • A find method is equivalent to issuing an SQL SELECT statement and return the result of the SELECT statement.

22. 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', )));}

23. 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”

24. 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

25. 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.

26. 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.

27. 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.

28. Controller Components Auto-suggest Feature

29. 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.

30. 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.

31. 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)

32. 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.

33. 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);

34. 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.

35. 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.

36. 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.

37. Performance

38. 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

39. 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!

40. Result of Usability Testing (Our IDE)

41. Other IDE

42. 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.

43. Questions?

44. Thank you