Zend Lab

Zend Lab
http://leonguyen.com

Transcript

1. Zend Lab
   leonguyen.com
   

   View Slide

2. Features
   - Purpose: An open source Zend CMS
   - GUI: Bootstrap + jQuery + Dojo
   - Technology: Zend 2 + Node.js + NoSQL
   

   View Slide

3. Modules
   - Content:
   + News, Media (Photo-Video|Infographic-Mindmap), Slide
   + Products-Cart, Vote-Survey-Chat, Form+App
   - Channel:
   + Web, Tablet, Mobile, Email, SMS, Print
   

   View Slide

4. Design
   - Logo & Icon
   - Color scheme & Pattern
   - Typography
   - Elements
   

   View Slide

5. Layout - Responsive
   

   View Slide

6. Layout - Metro
   

   View Slide

7. Zend Core
   

   View Slide

8. Installation
   - Download Zend Server Community Edition (include Zend
   Framework 2.0) (http://framework.zend.com/downloads/latest)
   

   View Slide

9. Start Zend Server
   - Go to http://localhost:10081/ZendServer
   

   View Slide

10. Generate a Trial License for Zend Server
    - Go to http://www.zend.com/en/products/server/license
    

    View Slide

11. Config Zend Application
    - Download Zend Skeleton Application (https://github.
    com/zendframework/ZendSkeletonApplication)
    

    View Slide

12. New Environtment Variables
    

    View Slide

13. Config Windows Host
    - Go to: C:\Windows\System32\drivers\etc\hosts
    

    View Slide

14. Config Zend Server Host
    - Go to: C:\Program Files\Zend\ZendServer\etc\sites.d
    - Make host file: 'vhost_zendcms.com.conf'
    - Restart Zend Server
    

    View Slide

15. Start ZF2 Skeleton Application
    - Go to: http://zendcms.com
    

    View Slide

16. Config Zend Module
    - Download Zend Skeleton Module (https://github.
    com/zendframework/ZendSkeletonModule)
    

    View Slide

17. Add Skeleton Module
    - Go to: \zendcms\module
    - Extract to: 'ZendSkeletonModule'
    

    View Slide

18. Config application.config
    - Go to: \zendcms\config
    - Edit file: 'application.config.php'
    

    View Slide

19. Config module.config
    - Go to: \zendcms\module\ZendSkeletonModule\config
    - Edit file: 'module.config.php'
    

    View Slide

20. Start Skeleton Module
    - Go to: http://zendcms.com/skeleton
    

    View Slide

21. Zend MVC
    - Programmer’s Reference Guide of Zend Framework 2: http://framework.zend.com/manual/2.
    0/en/index.html#zendframeworkreference
    

    View Slide

22. MVC Diagram
    

    View Slide

23. DAO Design Pattern
    

    View Slide

24. Describe Album Module
    - The application that we are going to build is a simple inventory system
    to display which albums we own. The main page will list our collection
    and allow us to add, edit and delete CDs.
    Page Description
    List of albums
    This will display the list of albums and provide links to edit and delete them.
    Also, a link to enable adding new albums will be provided.
    Add new album This page will provide a form for adding a new album.
    Edit album This page will provide a form for editing an album.
    Delete album This page will confirm that we want to delete an album and then delete it.
    

    View Slide

25. Create directories
    - Creating following directories.
    

    View Slide

26. Create Module.php
    - Create 'Module.php' in the Album module.
    

    View Slide

27. Configuration
    - Create a file 'module.config.php' under Path>\zendcms\module\Album\config
    

    View Slide

28. Config application.config
    - Go to: \zendcms\config
    - Edit file: 'application.config.php'
    

    View Slide

29. Routing and controllers
    - As we have four pages that all apply to albums, we will group them in
    a single controller AlbumController within our Album module as four
    actions
    Page Controller Action
    Home AlbumController index
    Add new album AlbumController add
    Edit album AlbumController edit
    Delete album AlbumController delete
    

    View Slide

30. Add Router
    - Modify 'module.
    config.php' under
    Path>\zendcms\modul
    e\Album\config
    

    View Slide

31. Create the Controller
    - Create controller class 'AlbumController.php' under Path>\module\Album\src\Album\Controller
    

    View Slide

32. DB Schema
    - Create SQL statements to create the album table.
    

    View Slide

33. Create the Model
    - Create model class 'Album.php' under Path>\module\Album\src\Album\Model
    

    View Slide

34. Create the Model Table
    - Create model class
    'AlbumTable.php' under
    Path>\module\Album\src\Albu
    m\Model
    

    View Slide

35. Using ServiceManager to configure the
    table gateway and inject into the
    AlbumTable
    - Create 'Module.php'
    in the Album module.
    

    View Slide

36. Config DB Driver
    - Modify 'global.php' under \config\autoload
    

    View Slide

37. Config DB Credentials
    - Modify 'local.php' under \config\autoload
    

    View Slide

38. Create the View
    - Create view 'index.phtml' under Path>\module\Album\view\album\album
    

    View Slide

39. Open Album
    - Go to: http://zendcms.com/album
    

    View Slide

40. Forms and Actions - Add album - Form
    - Create view 'AlbumForm.php' under
    Path>\module\Album\src\Album\Form
    

    View Slide

41. Forms and Actions - Add album - Model
    - Modify model class 'Album.php'
    under Path>\module\Album\src\Album\M
    odel
    

    View Slide

42. Forms and Actions - Add album - Controller
    - Modify controller class 'AlbumController.php' under Path>\module\Album\src\Album\Controller
    

    View Slide

43. Forms and Actions - Add album - View
    - Create view 'add.phtml' under Path>\module\Album\view\album\album
    

    View Slide

44. Forms and Actions - Add album - Open
    - Go to: http://zendcms.com/album/add
    

    View Slide

45. Forms and Actions - Edit album - Controller
    - Modify controller class
    'AlbumController.php' under
    Path>\module\Album\src\Album\C
    ontroller
    

    View Slide

46. Forms and Actions - Edit album - Model
    - Modify model class 'Album.php' under Path>\module\Album\src\Album\Model
    

    View Slide

47. Forms and Actions - Edit album - View
    - Create view 'edit.phtml' under Path>\module\Album\view\album\album
    

    View Slide

48. Forms and Actions - Delete album - Controller
    - Modify controller class
    'AlbumController.php' under
    Path>\module\Album\src\Album\C
    ontroller
    

    View Slide

49. Forms and Actions - Edit album - View
    - Create view 'delete.phtml' under Path>\module\Album\view\album\album
    

    View Slide

50. Zend Authentication
    

    View Slide

51. Zfc [Base.User.Acl]
    - Download (https://github.com/ZF-Commons/ZfcUser)
    (https://github.com/ZF-Commons/ZfcBase)
    (https://github.com/bjyoungblood/BjyAuthorize)
    

    View Slide

52. Add ZfcBase, ZfcUser, BjyAuthorize
    - Go to: \zendcms\vendor
    - Extract to: 'ZfcUser', 'ZfcBase', 'BjyAuthorize'
    

    View Slide

53. Config application.config
    - Go to: \zendcms\config
    - Edit file: 'application.config.php'
    

    View Slide

54. Make database.local
    - Go to: \zendcms\config\autoload
    - Create file: 'database.local.php'
    

    View Slide

55. Start url User
    - Go to: http://zendcms.com/user/login
    

    View Slide

56. DB List
    Star:
    1) User (u)
    2) Tag (t): Page, Menu, Category
    3) Post (p): Article, Products, Banner
    4) Meta (m): Media
    5) Option (o): Configuration
    

    View Slide

57. Table List
    1) u: uId, uName, uPass, uEmail, uDesc
    2) t: tId, tName, tDesc
    3) p: pId, uId, pTitle, pContent
    4) m: mId, pId, mKey, mValue
    5) o: oId, oKey, oValue
    

    View Slide

58. 1) User (u)
    CREATE TABLE `user` (
    `uId` INT NOT NULL AUTO_INCREMENT ,
    `uName` VARCHAR( 255 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT
    NULL ,
    `uPass` VARCHAR( 255 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL
    ,
    `uEmail` VARCHAR( 255 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL
    ,
    `uDesc` TEXT CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL
    ,
    PRIMARY KEY ( `uId` )
    ) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_general_ci
    

    View Slide

59. 2) Tag (t)
    CREATE TABLE `tag` (
    `tId` INT NOT NULL AUTO_INCREMENT ,
    `tName` VARCHAR( 255 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
    `tDesc` TEXT CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
    PRIMARY KEY ( `tId` )
    ) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_general_ci
    

    View Slide

60. 3) Post (p)
    CREATE TABLE `post` (
    `pId` INT NOT NULL AUTO_INCREMENT ,
    `uId` INT NOT NULL ,
    `pTitle` VARCHAR( 255 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
    `pContent` TEXT CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
    PRIMARY KEY ( `pId` )
    ) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_general_ci
    

    View Slide

61. 4) Meta (m)
    CREATE TABLE `meta` (
    `mId` INT NOT NULL AUTO_INCREMENT ,
    `pId` INT NOT NULL ,
    `mKey` VARCHAR( 255 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
    `mValue` TEXT CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
    PRIMARY KEY ( `mId` )
    ) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_general_ci
    

    View Slide

62. 5) Option (o)
    CREATE TABLE `option` (
    `oId` INT NOT NULL AUTO_INCREMENT ,
    `oKey` VARCHAR( 255 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
    `oValue` TEXT CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
    PRIMARY KEY ( `oId` )
    ) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_general_ci
    

    View Slide

63. Login
    

    View Slide

64. Back-end
    I) User Manager (Permission)
    II) Tag Manager (Grid hierachy)
    III) Layout Manager (Row added elements)
    Star: 1) Header, 2) Content, 3) Footer, 4) Top, 5) Bottom
    IV) Media Manager
    V) Option Manager
    Pyramid: Navigation (Circle -> Menu) -> Datatable (Search-Filter,
    Action,Grid-Edit) -> Form (Main Input,Desc Grid) + Custom
    

    View Slide

65. Github
    - Go to: https://github.com/leonguyen/zendcms
    

    View Slide