TomatoCMS : How to Create Component www.tomatocms.com
Table of Content <ul><li>TomatoCMS :  How to Create Module </li></ul><ul><li>TomatoCMS :  How to Create Widget </li></ul><...
TomatoCMS : How to Create Module
How to Create Module? <ul><li>Refer from  http://docs.tomatocms.com/index.php/Develop_new_module_-_Part_1_-_Module_directo...
Example: Contact Module <ul><li>Requirement </li></ul><ul><ul><li>Create contact form : Display on web page for capture e-...
1) Create New Module : Contact <ul><li>Step 1: Create Module folder  </li></ul><ul><li>New folder is located: <tomato root...
1) Create New Module : Contact <ul><li>Step 2: Add module information </li></ul><ul><li>By create “ about.xml ” in “ confi...
1) Create New Module : Contact <ul><li>Step 3: Add database queries </li></ul><ul><li>This file also defines SQL queries f...
1) Create New Module : Contact <ul><li>Let's add SQL queries including database creation queries, data initializing querie...
1) Create New Module : Contact <ul><li>And create drop statement when uninstall module </li></ul><?xml  version=&quot;1.0&...
1) Create New Module : Contact <ul><li>Step4: Create task list on Admin’s menu </li></ul><ul><li>Need to define activities...
1) Create New Module : Contact <ul><li>Step5: Create language pack for explanation </li></ul><ul><li>By create “language” ...
1) Create New Module : Contact <ul><li>Example of language file (lang.en_US.ini) </li></ul>[about] about_contact_descripti...
1) Create New Module : Contact <ul><li>Finally, need to install module by  </li></ul><ul><li>go to “System”    “Extend”  ...
2) Module permissions <ul><li>Procedure </li></ul><ul><li>Define routes </li></ul><ul><li>Define Permission </li></ul><ul>...
2) Module permissions <ul><li>Step1: Create route files in modules<module name>configroutes </li></ul><ul><li>Route file m...
2) Module permissions <ul><li>Step2: How to manage access permission of users, we will create  permissions.xml  file to so...
2) Module permissions <ul><li>Step3: Add resources by see in Admin menu    select “System”    “Privilege” </li></ul>Clic...
2) Module permissions <ul><li>Click on “Add” for show this Menu’s Group </li></ul><ul><li>Click on “+” for add resources/a...
2) Module permissions Refresh web-page or click on Dashboard, you will see new menu
2) Module permissions Menu Header Task under menu Menu Setup
2) Module permissions <ul><li>Re-cap for Module-permission </li></ul><ul><ul><li>After Add resource and menu appear. It’s ...
2) Module permissions <ul><li>Try to play with new menu? </li></ul><ul><ul><li>Click on “Contacts List” </li></ul></ul>Thi...
2) Module permissions <ul><li>Create controller code </li></ul><ul><ul><li>Rule for coding are present in “TomatoCMS in A ...
2) Module permissions <ul><li>Create view (matched with Controller) </li></ul><ul><ul><li>Rule for coding are present in “...
2) Module permissions <ul><li>Try to play with new menu again…. </li></ul><ul><ul><li>Click on “Contacts List” </li></ul><...
3) Connect the Database <ul><li>Retrieve Data </li></ul><ul><li>Display Data </li></ul><ul><li>Edit Existing Data </li></u...
3) Connect the Database <ul><li>Step1: Retrieve Data </li></ul><ul><ul><li>Refer to “TomatoCMS in A Nut shell”, we need to...
3) Connect the Database <ul><ul><ul><li>First, create file  Contact.php  inside  model  folder with content like this: </l...
3) Connect the Database <ul><li>Then, create “Interface” for implement methods of each DAO </li></ul><ul><ul><li>Start fro...
3) Connect the Database <ul><li>To use difference database, you must create difference folder for corresponding database a...
3) Connect the Database <ul><li>Implement code for methods </li></ul><ul><ul><li>getContact()    search data with specifi...
3) Connect the Database <ul><li>Implement code for methods </li></ul><ul><ul><li>count()    count record with specified c...
3) Connect the Database <ul><li>Implement skeleton code for other methods </li></ul>Just make it’s able enough to run  
3) Connect the Database <ul><li>Step2: Display Data </li></ul><ul><ul><li>At controller section, at here, controller is  I...
3) Connect the Database <ul><li>Explanation of Controller code </li></ul><ul><ul><li>Database connection statements </li><...
3) Connect the Database <ul><li>and at  view , insert following code into  list.phtml  file </li></ul><ul><ul><li>View has...
3) Connect the Database View code (continue) Render values that pass from controller and show on HTML
3) Connect the Database <ul><li>After that, you need to add following parameters to  lang.en_US.ini  file </li></ul>
3) Connect the Database <ul><li>See a result </li></ul>No result display when start up this page
3) Connect the Database <ul><li>Make some sample data in database and see result again </li></ul>Display only 15 rows from...
4) Improve Module’s code <ul><li>Display with pagination </li></ul><ul><li>CRUD page </li></ul><ul><li>Advance AJAX integr...
4) Improve Module’s code <ul><li>Pagination Display </li></ul><ul><ul><li>Currently, our page can display but can’t  </li>...
4) Improve Module’s code <ul><li>Improve code in “View” </li></ul><ul><li>Add javascript code for button </li></ul>
4) Improve Module’s code <ul><li>Because in view, we’ve implement AJAX for query data. We need to improve code in controll...
4) Improve Module’s code <ul><li>Add more lines AJAX display </li></ul>
4) Improve Module’s code <ul><li>Explanation of new code in “Controller” </li></ul><ul><ul><li>If user has submit query (b...
4) Improve Module’s code <ul><li>See the result </li></ul>Result is matched with your filter criteria.
4) Improve Module’s code <ul><li>Debugging on AJAX passing parameters & response </li></ul><ul><li>I use FireBug (Fixfox E...
4) Improve Module’s code <ul><li>See AJAX response (result of sending contents of _filter.phtml) </li></ul>
4) Improve Module’s code <ul><li>More improve: Add pagination (for display more than 1 page) </li></ul><ul><ul><li>TomatoC...
4) Improve Module’s code <ul><li>Add paginator in View </li></ul><ul><ul><li>list.phtml </li></ul></ul><ul><ul><li>_filter...
4) Improve Module’s code <ul><li>Then, see the result again </li></ul>
4) Improve Module’s code <ul><li>CRUD page </li></ul><ul><ul><li>C : Create </li></ul></ul><ul><ul><li>R : Refer (in this ...
4) Improve Module’s code <ul><li>Update screen : How to & Procedure? </li></ul><ul><ul><li>Requirements </li></ul></ul><ul...
4) Improve Module’s code <ul><li>Define routing for Update page </li></ul><ul><ul><li>Modify file: /config/routes/contact....
4) Improve Module’s code <ul><li>Try to run by typing URL directly in Address bar </li></ul><ul><li>And we got… </li></ul>...
4) Improve Module’s code <ul><li>Create new method in controller: editAction() </li></ul><ul><ul><li>Why this name? </li><...
4) Improve Module’s code <ul><li>Create new view: edit.phtml </li></ul><ul><ul><li>Why this name? </li></ul></ul><ul><ul><...
4) Improve Module’s code <ul><li>Add new language’s key in language file </li></ul><ul><ul><li>Add in “lang.en_US.ini” </l...
4) Improve Module’s code <ul><li>Play with it and you will found: - </li></ul><ul><ul><li>Contact Name is required </li></...
4) Improve Module’s code <ul><li>Improve Controller code </li></ul><ul><li>Then, improve DAO code in update method </li></ul>
4) Improve Module’s code <ul><li>Try again on browser </li></ul><ul><li>Now, Everything is perfect. Finally, we will integ...
4) Improve Module’s code <ul><li>Integrated with listing page </li></ul><ul><ul><li>It’s very simple, just make link for e...
Upcoming SlideShare
Loading in …5
×

Create Components in TomatoCMS

3,234 views

Published on

Explain how to create module in TomatoCMS

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,234
On SlideShare
0
From Embeds
0
Number of Embeds
41
Actions
Shares
0
Downloads
93
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • www.tomatocms.com
  • www.tomatocms.com
  • www.tomatocms.com
  • Create Components in TomatoCMS

    1. 1. TomatoCMS : How to Create Component www.tomatocms.com
    2. 2. Table of Content <ul><li>TomatoCMS : How to Create Module </li></ul><ul><li>TomatoCMS : How to Create Widget </li></ul><ul><li>TomatoCMS : How to Create Plug-in </li></ul><ul><li>TomatoCMS : How to Create Hook </li></ul>
    3. 3. TomatoCMS : How to Create Module
    4. 4. How to Create Module? <ul><li>Refer from http://docs.tomatocms.com/index.php/Develop_new_module_-_Part_1_-_Module_directory_structure </li></ul><ul><li>TomatoCMS support modular architecture with more than 10 built-in modules. In this series, I will help you how to create new module from “ scratch” . </li></ul><ul><li>Step to create module (for v.2.0.6 to v.2.0.8) </li></ul><ul><ul><li>Create Module </li></ul></ul><ul><ul><li>Module Permission </li></ul></ul><ul><ul><li>Connect Database </li></ul></ul><ul><ul><li>Improve Module’s code </li></ul></ul>
    5. 5. Example: Contact Module <ul><li>Requirement </li></ul><ul><ul><li>Create contact form : Display on web page for capture e-mail and inquiry information </li></ul></ul><ul><ul><li>Admin site: able to inquiry and view inquiry information (And also, maintenance information) </li></ul></ul><ul><li>From above requirements: - </li></ul><ul><ul><li>Need to make new module for maintain inquiry information in back-end </li></ul></ul><ul><ul><li>Need to create new Widget for capture inquiry information </li></ul></ul>
    6. 6. 1) Create New Module : Contact <ul><li>Step 1: Create Module folder </li></ul><ul><li>New folder is located: <tomato root>applicationmodules </li></ul><ul><li>e.g. D:phptomatocmsapplicationmodules </li></ul>
    7. 7. 1) Create New Module : Contact <ul><li>Step 2: Add module information </li></ul><ul><li>By create “ about.xml ” in “ config ” folder (under new folder) </li></ul><ul><li>e.g. modulescontactconfig </li></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <!DOCTYPE module SYSTEM &quot;http://schemas.tomatocms.com/dtd/module_about.dtd&quot;> <module> <name>contact</name> <description langKey=&quot;about_contact_description&quot;><![CDATA[Manage contacts]]></description> <author>TomatoCMS Core Team</author> <email>core@tomatocms.com</email> <version>2.0.8</version <license>free</license> <requires> <requiredModules> <requiredModule name=“mail&quot; /> </requiredModules> </requires> </module> More detail: http://docs.tomatocms.com/index.php/Develop_new_module_-_Part_2_-_Create_module
    8. 8. 1) Create New Module : Contact <ul><li>Step 3: Add database queries </li></ul><ul><li>This file also defines SQL queries for your module. For simply illustration, I assume that our contact module has only one database table named  contact : </li></ul>SEQ Field Name Data Type NULL Remark 1 contact_id INT(10) NOT PK & Auto-increase 2 contact_name VARCHAR(50) NOT 3 email VARCHAR(100) NOT 4 website VARCHAR(200) NOT 5 contact_text VARCHAR(1000) NOT 6 contact_date DATE NOT
    9. 9. 1) Create New Module : Contact <ul><li>Let's add SQL queries including database creation queries, data initializing queries, etc to our  about.xml  file: </li></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <!DOCTYPE module SYSTEM &quot;http://schemas.tomatocms.com/dtd/module_about.dtd&quot;> <module> ... <install> <db adapter=&quot;mysql|pdo_mysql&quot; > <query> <![CDATA[DROP TABLE IF EXISTS `###contact`]]> </query> <query> <![CDATA[CREATE TABLE `###contact` ( `contact_id` int(10) unsigned NOT NULL auto_increment, `contact_name` varchar(50) NOT NULL, `email` varchar(50) NOT NULL, `website` varchar(200) default NULL, `contact_text` varchar(1000) NOT NULL, `contact_date` date NOT NULL, PRIMARY KEY (`contact_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;]]> </query> </db> < /install>
    10. 10. 1) Create New Module : Contact <ul><li>And create drop statement when uninstall module </li></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <!DOCTYPE module SYSTEM &quot;http://schemas.tomatocms.com/dtd/module_about.dtd&quot;> <module> ... <install> … <uninstall> <db adapter=&quot;mysql|pdo_mysql&quot;> <query><![CDATA[DROP TABLE IF EXISTS `###contact`;]]></query> </db> <db adapter=&quot;pgsql&quot;> <query><![CDATA[DROP TABLE IF EXISTS ###contact;]]></query> </db> <db adapter=&quot;sqlsrv&quot;> <query><![CDATA[IF EXISTS (SELECT NAME FROM SYSOBJECTS WHERE NAME='###contact' AND TYPE='U') DROP TABLE ###contact;]]></query> </db> </uninstall>
    11. 11. 1) Create New Module : Contact <ul><li>Step4: Create task list on Admin’s menu </li></ul><ul><li>Need to define activities in “ about.xml ” </li></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <!DOCTYPE module SYSTEM &quot;http://schemas.tomatocms.com/dtd/module_about.dtd&quot;> <module> ... <install> … <uninstall> … <admin> <task langKey=&quot;task_list_contacts&quot; route=&quot;contact_index_list&quot; /> </admin>
    12. 12. 1) Create New Module : Contact <ul><li>Step5: Create language pack for explanation </li></ul><ul><li>By create “language” directory under module folder </li></ul><ul><li>Then create language file (following default languages). Mostly default is “en_US” </li></ul><ul><li>Language file format: lang.<language code>.ini </li></ul><ul><li>e.g. lang.en_US.ini </li></ul>
    13. 13. 1) Create New Module : Contact <ul><li>Example of language file (lang.en_US.ini) </li></ul>[about] about_contact_description = &quot;Manage contacts&quot; task_list_contacts = &quot;Contacts list&quot;
    14. 14. 1) Create New Module : Contact <ul><li>Finally, need to install module by </li></ul><ul><li>go to “System”  “Extend”  “Module” </li></ul>You can click  Install  to install module and vice versa, you can click  Uninstall  to uninstall a module. As I said in step 2, after clicking  Install  (or  Uninstall ), all SQL queries defined in install (uninstall) tag from  about.xml  file also were already executed. But from now, you can’t see the new menu in “Admin menu”. You need to create permission & assign resources (see next chpater)
    15. 15. 2) Module permissions <ul><li>Procedure </li></ul><ul><li>Define routes </li></ul><ul><li>Define Permission </li></ul><ul><li>Add resources </li></ul>
    16. 16. 2) Module permissions <ul><li>Step1: Create route files in modules<module name>configroutes </li></ul><ul><li>Route file must in format: <any name>.ini </li></ul>Note that , you should write the route name in order moduleName_controllerName_actionName, to ensure that routes are difference. In backend section, you should write route start with  admin  to distinguish from frontend section.
    17. 17. 2) Module permissions <ul><li>Step2: How to manage access permission of users, we will create  permissions.xml  file to solve this issue </li></ul>Note , name of resource is name of controller, and name of privilege is name of action correspond to  contact.ini  file. At here, we see  langKey  again, so at  lang.en_US.ini  file, we have to add following code
    18. 18. 2) Module permissions <ul><li>Step3: Add resources by see in Admin menu  select “System”  “Privilege” </li></ul>Click on Contact
    19. 19. 2) Module permissions <ul><li>Click on “Add” for show this Menu’s Group </li></ul><ul><li>Click on “+” for add resources/action to system </li></ul>(After Add Menu & action completely)
    20. 20. 2) Module permissions Refresh web-page or click on Dashboard, you will see new menu
    21. 21. 2) Module permissions Menu Header Task under menu Menu Setup
    22. 22. 2) Module permissions <ul><li>Re-cap for Module-permission </li></ul><ul><ul><li>After Add resource and menu appear. It’s work “Admin” user-group only. </li></ul></ul><ul><ul><li>Another group need add permission to access </li></ul></ul>
    23. 23. 2) Module permissions <ul><li>Try to play with new menu? </li></ul><ul><ul><li>Click on “Contacts List” </li></ul></ul>This error is came from no code in Controller & view (refer to TomatoCMS/ZF MVC) Next step, we need to create controller & view for this resources
    24. 24. 2) Module permissions <ul><li>Create controller code </li></ul><ul><ul><li>Rule for coding are present in “TomatoCMS in A Nutshell” </li></ul></ul>Make skeleton code for controller
    25. 25. 2) Module permissions <ul><li>Create view (matched with Controller) </li></ul><ul><ul><li>Rule for coding are present in “TomatoCMS in A Nutshell” </li></ul></ul>
    26. 26. 2) Module permissions <ul><li>Try to play with new menu again…. </li></ul><ul><ul><li>Click on “Contacts List” </li></ul></ul>From now, you can code module by following rule in “TomatoCMS in A Nutshell”
    27. 27. 3) Connect the Database <ul><li>Retrieve Data </li></ul><ul><li>Display Data </li></ul><ul><li>Edit Existing Data </li></ul><ul><li>Delete Existing Data </li></ul>
    28. 28. 3) Connect the Database <ul><li>Step1: Retrieve Data </li></ul><ul><ul><li>Refer to “TomatoCMS in A Nut shell”, we need to create: - </li></ul></ul><ul><ul><ul><li>Model </li></ul></ul></ul><ul><ul><ul><li>Interface </li></ul></ul></ul><ul><ul><ul><li>DAO </li></ul></ul></ul><ul><ul><li>Start from create “Model” </li></ul></ul><ul><ul><ul><li>At model section, we implement most of operations with database. Assume that we have a table  t_contact  with its fields are:  contact_id, contact_name, email, website, contact_text, contact_date. </li></ul></ul></ul><ul><ul><ul><li>Note: - I define pre-fix of table name as “ t_ ” in “ application.ini ” </li></ul></ul></ul>
    29. 29. 3) Connect the Database <ul><ul><ul><li>First, create file  Contact.php  inside  model  folder with content like this: </li></ul></ul></ul>Code inside: - This file describe properties ( or fields) of this table. You can see this class extend from  Tomato_Core_Model_Entity , this is a already library which we was created and ready to use.
    30. 30. 3) Connect the Database <ul><li>Then, create “Interface” for implement methods of each DAO </li></ul><ul><ul><li>Start from create folder “interface” under “models” in module </li></ul></ul><ul><ul><li>Then create new file: Contact.php for declare interface of DAO </li></ul></ul>Code inside: - All methods will show/explain in next chapter
    31. 31. 3) Connect the Database <ul><li>To use difference database, you must create difference folder for corresponding database as </li></ul>In this sample, I will show implement code for MySQL with PDO only. So, I will create new file: Contact.php under “ pdomysql ” Always implement method “convert” in DAO
    32. 32. 3) Connect the Database <ul><li>Implement code for methods </li></ul><ul><ul><li>getContact()  search data with specified criteria </li></ul></ul>
    33. 33. 3) Connect the Database <ul><li>Implement code for methods </li></ul><ul><ul><li>count()  count record with specified criteria (for paging purpose) </li></ul></ul>
    34. 34. 3) Connect the Database <ul><li>Implement skeleton code for other methods </li></ul>Just make it’s able enough to run 
    35. 35. 3) Connect the Database <ul><li>Step2: Display Data </li></ul><ul><ul><li>At controller section, at here, controller is  Index  and action is  list , so insert following code into list action </li></ul></ul>
    36. 36. 3) Connect the Database <ul><li>Explanation of Controller code </li></ul><ul><ul><li>Database connection statements </li></ul></ul><ul><ul><li>Parsing submitted parameters </li></ul></ul><ul><ul><li>Get data from Database </li></ul></ul><ul><ul><li>Pass values into View </li></ul></ul>
    37. 37. 3) Connect the Database <ul><li>and at  view , insert following code into  list.phtml  file </li></ul><ul><ul><li>View has contained HTML/javaScript and PHP code </li></ul></ul><ul><ul><li>In this PPT file will show only code that related to PHP </li></ul></ul><ul><ul><li>Full source code: - Pls see in attachment. </li></ul></ul>Load javaScript & CSS
    38. 38. 3) Connect the Database View code (continue) Render values that pass from controller and show on HTML
    39. 39. 3) Connect the Database <ul><li>After that, you need to add following parameters to  lang.en_US.ini  file </li></ul>
    40. 40. 3) Connect the Database <ul><li>See a result </li></ul>No result display when start up this page
    41. 41. 3) Connect the Database <ul><li>Make some sample data in database and see result again </li></ul>Display only 15 rows from tables (need to modify more for display correct data)
    42. 42. 4) Improve Module’s code <ul><li>Display with pagination </li></ul><ul><li>CRUD page </li></ul><ul><li>Advance AJAX integration </li></ul><ul><li>Reduce Duplicated Code (DRY/DIE principle) </li></ul>
    43. 43. 4) Improve Module’s code <ul><li>Pagination Display </li></ul><ul><ul><li>Currently, our page can display but can’t </li></ul></ul><ul><ul><ul><li>Searching </li></ul></ul></ul><ul><ul><ul><li>Display more than 15 rows </li></ul></ul></ul><ul><ul><li>We will start from “Searching” first </li></ul></ul><ul><ul><ul><li>Improve code in “View” </li></ul></ul></ul><ul><ul><ul><li>Improve code in “Controller” </li></ul></ul></ul>
    44. 44. 4) Improve Module’s code <ul><li>Improve code in “View” </li></ul><ul><li>Add javascript code for button </li></ul>
    45. 45. 4) Improve Module’s code <ul><li>Because in view, we’ve implement AJAX for query data. We need to improve code in controller too. </li></ul>
    46. 46. 4) Improve Module’s code <ul><li>Add more lines AJAX display </li></ul>
    47. 47. 4) Improve Module’s code <ul><li>Explanation of new code in “Controller” </li></ul><ul><ul><li>If user has submit query (by press filter button) </li></ul></ul><ul><ul><ul><li>Disable view-render & layout </li></ul></ul></ul><ul><ul><ul><li>Get files from “/index/_filter.phtml” to render </li></ul></ul></ul><ul><ul><ul><li>Send contents to response object </li></ul></ul></ul>Similar to code in View file
    48. 48. 4) Improve Module’s code <ul><li>See the result </li></ul>Result is matched with your filter criteria.
    49. 49. 4) Improve Module’s code <ul><li>Debugging on AJAX passing parameters & response </li></ul><ul><li>I use FireBug (Fixfox Exentension) for see how it’s work </li></ul>Send request to search/filter via AJAX
    50. 50. 4) Improve Module’s code <ul><li>See AJAX response (result of sending contents of _filter.phtml) </li></ul>
    51. 51. 4) Improve Module’s code <ul><li>More improve: Add pagination (for display more than 1 page) </li></ul><ul><ul><li>TomatoCMS provide Utilities Class : Tomato_Utility_PaginatorAdapter </li></ul></ul><ul><ul><li>Implement in View & Controller </li></ul></ul>Controller’s code
    52. 52. 4) Improve Module’s code <ul><li>Add paginator in View </li></ul><ul><ul><li>list.phtml </li></ul></ul><ul><ul><li>_filter.phtml </li></ul></ul>
    53. 53. 4) Improve Module’s code <ul><li>Then, see the result again </li></ul>
    54. 54. 4) Improve Module’s code <ul><li>CRUD page </li></ul><ul><ul><li>C : Create </li></ul></ul><ul><ul><li>R : Refer (in this case, meant to searching) </li></ul></ul><ul><ul><li>U : Update </li></ul></ul><ul><ul><li>D : Delete </li></ul></ul><ul><li>I will 3 cases for make you clear in your mind: - </li></ul><ul><ul><li>Update </li></ul></ul><ul><ul><li>Delete </li></ul></ul><ul><ul><li>Refer : Just show in previous slides </li></ul></ul>
    55. 55. 4) Improve Module’s code <ul><li>Update screen : How to & Procedure? </li></ul><ul><ul><li>Requirements </li></ul></ul><ul><ul><ul><li>Display new page with existing data </li></ul></ul></ul><ul><ul><ul><li>Captures changing detail and store back into Database. </li></ul></ul></ul><ul><ul><li>Procedure: start from…. </li></ul></ul><ul><ul><ul><li>Define routing for update page </li></ul></ul></ul><ul><ul><ul><li>Create new method in Controller </li></ul></ul></ul><ul><ul><ul><li>Add new key for languages </li></ul></ul></ul><ul><ul><ul><li>Create new view for display result </li></ul></ul></ul><ul><ul><ul><li>Create new method in DAO </li></ul></ul></ul><ul><ul><ul><li>Integration with listing page </li></ul></ul></ul>
    56. 56. 4) Improve Module’s code <ul><li>Define routing for Update page </li></ul><ul><ul><li>Modify file: /config/routes/contact.ini </li></ul></ul><ul><li>We use other type of routing (“Regex” routing) for.. </li></ul><ul><ul><li>Dynamic URL </li></ul></ul><ul><ul><li>RESTFul format </li></ul></ul>Add new routing for edit page
    57. 57. 4) Improve Module’s code <ul><li>Try to run by typing URL directly in Address bar </li></ul><ul><li>And we got… </li></ul><ul><li>For error message, it’s mean… </li></ul><ul><ul><li>URL is correct (match with routing file) </li></ul></ul><ul><ul><li>Controller is existing </li></ul></ul><ul><ul><li>View can’t load (sure, we didn’t do it) </li></ul></ul>
    58. 58. 4) Improve Module’s code <ul><li>Create new method in controller: editAction() </li></ul><ul><ul><li>Why this name? </li></ul></ul><ul><ul><ul><li>Match with action name that defined in routing </li></ul></ul></ul><ul><ul><ul><li>Controller method’s naming format: <actionName>Action() </li></ul></ul></ul><ul><ul><li>Code are… </li></ul></ul>Note: the parameter always named “ contact_id ” because we’ve declare in routing file like this
    59. 59. 4) Improve Module’s code <ul><li>Create new view: edit.phtml </li></ul><ul><ul><li>Why this name? </li></ul></ul><ul><ul><ul><li>Match with action name in Controller </li></ul></ul></ul><ul><ul><ul><li>View’s naming format: <viewName>.phtml </li></ul></ul></ul><ul><ul><li>View code is similar to listing but I think it’s simpler than… </li></ul></ul><ul><ul><ul><li>More detail, please check in source code </li></ul></ul></ul><ul><li>Create new method in DAO : getById($id) </li></ul><ul><ul><li>make SQL statement for get data from Database </li></ul></ul>
    60. 60. 4) Improve Module’s code <ul><li>Add new language’s key in language file </li></ul><ul><ul><li>Add in “lang.en_US.ini” </li></ul></ul><ul><ul><li>Need to add every times IF you’ve modify the view file </li></ul></ul><ul><li>Try to run it again </li></ul>
    61. 61. 4) Improve Module’s code <ul><li>Play with it and you will found: - </li></ul><ul><ul><li>Contact Name is required </li></ul></ul><ul><ul><li>E-mail is required </li></ul></ul><ul><ul><li>When save changing, nothing happen! </li></ul></ul><ul><li>Now, we will make it’s able to save change: </li></ul><ul><ul><li>Modify controller code to accept changing values </li></ul></ul><ul><ul><li>Modify DAO to support update method </li></ul></ul>
    62. 62. 4) Improve Module’s code <ul><li>Improve Controller code </li></ul><ul><li>Then, improve DAO code in update method </li></ul>
    63. 63. 4) Improve Module’s code <ul><li>Try again on browser </li></ul><ul><li>Now, Everything is perfect. Finally, we will integrate 2 parts (list & update) </li></ul>
    64. 64. 4) Improve Module’s code <ul><li>Integrated with listing page </li></ul><ul><ul><li>It’s very simple, just make link for edit in view  </li></ul></ul><ul><ul><ul><li>list.phtml </li></ul></ul></ul><ul><ul><ul><li>_filter.phtml </li></ul></ul></ul><ul><li>Then, try it again by click on “List of Contact” (in edit page) or all from menu directly. </li></ul>

    ×