Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Zend Lab

Zend Lab

LeoNguyen.com

July 11, 2013
Tweet

More Decks by LeoNguyen.com

Other Decks in Programming

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