Upgrade to remove ads

This preview shows page 1-2-3-19-20-39-40-41 out of 41 pages.

Save
View Full Document
Premium Document
Do you want full access? Go Premium and unlock all 41 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 41 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 41 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 41 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 41 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 41 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 41 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 41 pages.
Access to all documents
Download any document
Ad free experience

Upgrade to remove ads
Unformatted text preview:

December 13, 2010Swathi VegesnaCommittee MembersDr. Chris PollettDr. Sami KhuriDr. T.Y.LinAgenda Goal Tools used Design Features Implementation ConclusionGoalBuild the View Component of a Web-based IDE thatenables users to create a Web application in PHP onthe CakePHP frameworkMotivation – Why Web-based IDE? Current available IDE’s  Desktop-Based Needs software Installation Maintenance costs (updating softwares) No remote access to code Lacks implementation of development Framework No MVC architecture No consistent Folder and File structure No proper toolbar to build the ViewsWeb-Based IDE on CakePHP Browser-based code development environment  Provides Remote Access Reduces hardware costs and management overhead  CakePHP based Web applications Consistent and Well organized Eases development of Web applicationsTools & Softwares Web Server : Apache Database: MySQL Language: PHP FrameWorks: CakePHP, jQuery Text Editor: CKEditor Debug Tool: FireBug Browsers: compatible with Firefox, IE 8, Chrome, SafariCakePHP One Among top 5 open source frameworks for PHP after Yii, Zend and CodeIgniter Design Patterns Model-View-Controller  Object-Relational Mapping  Active Record pattern Front Controller pattern Turns an application into a maintainable, modular and rapidly developed package. Application consistency and logicalityBuilding Web applications in CakePHP Folder Structure Cake app Models  Controllers Views  Webroot Config Naming conventions  Filenames are underscored class names  Model class names should be singular and CamelCased. Controller class names should be plural, CamelCased, and end in Controller. Views are named after the controller functions they display (using underscores).Preliminary Work Book collection Website Experiment with CakePHP to build a Web application. Performance Tests on JavaScript Frameworks Select the best JavaScript framework. Draggable and Droppable classes Experiment with jQuery library. Layout of the IDE Build a prototype of the GUI.Book collection Website Goal Build model component Get Model- Controller interactivity Get View-Controller interactivity Web Pages Built Home page Registration page Login page Book collection page Book Cart PageBook Collection PageImplementationclass Book extends AppModel { var $name = ‘Book'; } class BooksController extends AppController { var $name = 'PartnerLocators‘;function index() {$this->set(‘books', $this->Book->find('all'));}} <?php foreach ($books as $book): ?><tr><td><?php echo $book[Book’]['Title']; ?></td><td> <?php echo $book[‘Book']['Author']; ?></td></tr><?php endforeach; ?>Model ClassController ClassViewPerformance Tests on JavaScript FrameworksFrameworksGradePerformance scoreHTTP requestsWeightjQueryA841010.2KYUIB761497.2 KDOJOA801176.4 KPrototypeB781240.5 KSpeed test & weight test (Firebug)Slick Speed Test (Slick speed tool)jQueryFast and less weight libraryMost widely used.Highly effective and short codeCompatible with all browsersDraggable and Droppable classes$(".tab").draggable({helper:'clone', cursor: 'move'});$("#area").droppable({accept: '.tab',drop: function(event, ui) {var d = ui.draggable.attr("id");createTable(d);}});Layout of the IDEProjects Display and Code EditorTool bar &Help MenuMenu BarArchitecture (MVC)DesignFolder StructureNaming Conventions Model class names should be singular and CamelCased. Ide  ide.php Table name  ides Controller class names should be plural, CamelCased, and end in Controller. IdesController  ides_controller.php Views are named after the controller functions they display (using underscores).  getFile( ) /cakephpide/views/ides/get_file.ctpFeaturesDifferent features of the View Component of Web-based IDE include: Create Views Edit Views Design and Edit modes Form build Toolbar Preview of Web applicationCreate ViewOn a Right Click on “Views folder”, creation of a new viewImplementationfunction createview(){/*Get the data from the view form*/$this_project = $this->Ide->find('first', array('fields' => array('Ide.id, Ide.project_name, Ide.project_path'), 'conditions' => array('Ide.id' => $project_id)));if($this_project){if(!$this->Ide->is_view_available($project_id, $view_name){return("-1");}else{$this->create_view_skeleton_file($view_name, $view_filename);return (int) $this->Ide->ViewComponent->save();}}else return 0;}Create File Ajax call to the create the file Check for existence If exists complain else create a view fileEdit ViewOn a Right Click on “Views file”, opens the view file to editImplementationfunction read_view_file(project_name, component_name){/* On successful ajax call */{msg_div = htmlspecialchars_decode(msg);msg_text = msg.replace(/\n/gi, "<br>");msg_text = msg.replace(/\s/gi, "&nbsp;");$('#viewarea').html(' ').html(msg_div); // design mode$('#edit_panel textarea#myvoiceid').val(msg_text); // edit mode}}Read File Ajax call to the file and fetch the data Modify the data according Display the data both in design and edit modesImplementationSave File Get the code form the edit mode the data through Ajax call  Write into the filefunction save_view_file(){var fileio = $('#edit_panel textarea#myvoiceid').data('fileio');var content = encodeURIComponent($('.editpanel textarea#myvoiceid').val());var component_type = fileio.component_type;var component_filename = fileio.component_filename;$.ajax({'type' : 'POST','url' : write_file_url,data : 'component_filename='+component_filename+'&content='+content,success: function(msg){}});}Design mode of the ViewsDesign mode – Using Toolbar to build the viewsImplementation All the elements are made draggable Gets the content from the edit mode Displays the content$("#design_tab").click(function() {$(‘.formelements').draggable ({helper:'clone', cursor: 'move'});var h = htmlspecialchars_decode($('.editpanel textarea#myvoiceid').val());h = h.replace("&nbsp;", " ");$('#viewarea').html(' ').html(h);});Edit mode of the ViewsEdit mode – Can modify the view code and save the fileImplementation Destroys the draggable nature of the elements Fetches the modified content from the design mode Replaces the HTML entities Displays the code in the Text editor$("#edit_tab").click(function() {


View Full Document
Download Web Based IDE
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Web Based IDE and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Web Based IDE 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?