In this step by step tutorial you will learn how to create a ZF2 layout and use it in your actions.
1) Choose a template.
Note: Or create a template (e.g. in Photoshop etc.)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO7lQduWXFxow2tByKqbF2ShAj3grMVOt4sYZeQHThrAW_Dx3S_-3shHr2EtYNnnUhGIHKtT_93XUGHGpw6qK6vIKq7ih1m0C4w6FGuL1xTsZjiACnr0kOuBwrFzIT_GdClyxemFynNBr7/s320/1.png)
2) Create a "lyout" folder in your module
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6-wCG91jSyy1aJptcOuvnXX8qq38y0Xf-rIJHrPPQa3DeD43yzLJ3YpKSxyLgxh0RmT1jVu7Kfb3vkabDQohLcH-OjaZWQLmsMKl0YvKUc7goQTsdT2lJC8ZYirC3f2jBbT3Ayq8IOWh_/s320/2.png)
3) Upload the html file from the template. Or create the file.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcbl9ZuwvxQXmLt4zoT1gOX6kvS8zgdlVTOiI3_GljAVKujPmNM5firoel3FjeCG3UqJkyhaedI2tEvFu_RIc2hCvoH74NE48_hurxRJQozqd6rb7blCxMKUbCXng6I9425k2vLoOiJA9L/s320/3.png)
4) (Optional) Rename the file so it makes more sense for you.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtAoMzfln1QWXtuVeI0q6vvjhXiFZT3sC7BNurCPg3A5pXZmPc3BCWR67-Jjj709WZzMFuk8h7PisMM4OIUd6VZm6PvNx8PXlc5GEzJiu9TVpdihsIpctr8AAKfpRFcUQX_nqjwghSgnt_/s320/4.png)
5) (Optional) Create a folder for this template in "public".
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUpnmwuWxIkObdWr8asKRI1zqCOwHMO0pnMkBBLj8n5VQZ0kDqRCBomhMeXSdAg_i3atTkdD-cNIFfSR3zc7kYFVg55UK9jdwbVtKcn7CmCtfO5oddFoaKxXIyskG017diJdDk9ELWQS56/s320/5.png)
6) Upload the resources (e.g. css files etc.)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilNifGutHhyphenhyphenFVIyujcpey1TIt7pdqZJ5xl8J7K2RtUCi135309ga4crQXlk7-OvL2zvbI3Nog3bgzRS3jyc3oG6mjVCVp1wyz7zyDGunCIYriI7RU03CC_ErDllm9PQJ8Ujl9Xfk8Kf-QP/s320/6.png)
7) Upload the images.
Note: Choose "text/plain" as MIME type.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJp4nlGPgynrLKImmofIH3qlEhBuN8Z53Fe5IcWMk4zqB4qAZpGhqTKZyHZJzSCINpxLbj5ttzSeHBGZT0Srv-B57Qz4R2vWTo5WvA8mCZHxJaBMPKkTExVExaGIqPl1sw-v8I3kP8YL6e/s320/7.png)
8) Correct the urls for the resources used in the HTML file. (in layout folder)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigl9SMowsxBhnhF5WMJa9JLYdCK4-MPXgzmzohmrd1M9ud0Yy-fL9vAKauq31Siyi34wFxDTC-sHipYOad5871IFSGqEfbBxzepBEfS1ieXsXVYtq82VLrfttxBbsRUMVDxafRJx76G0L5/s320/8.png)
9) Correct the URLs for the images too.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBlWJy6EKqgfXfJJauU5yvNnU2_vQCapt0HMi3APLel8REFayFFc2V_sz8l5nJgt-3FQeIZjYKKuqUIi-e7sSIyJqNOogZSXD3p5GKnjUq5gAGblv9sdFb8rYEFdYZTV05ba8dyLDgv2bU/s320/9.png)
10) Add the layout to your module.config.php. The entire app will be aware.
Note: give a unique name (e.g. "layout/StoyanCheresharov") for the key
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJeVgguuh86csG54Nw59X3CR8Q4DsyPNF_qtcCVFIg2kngj25KCV8j6LxGLwJSmzSdL5fEEOvVBc75O5JPRm0vyKFcab2-Eho3i4EkRrl0UgBLlNPS6gdWwap2wbtbpV8bOGHUVp742E43/s320/10.png)
11) Add the content placeholder. Whatever comes from the action will be displayed there.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq0uCs78waQJIhWv5al-XIVoCdCloaL_J06e0m-KOMQgu7dgD2L796_1fycTq6L_A2KClGzjJhokxndrgqVirrZvISxm44lDLG7XrhftCKP2t1FlDM9FdrZWKgS5svxba6QjyGgMfPIHfX/s320/11.png)
12) Create a new action to use the template. (e.g. changeAction)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicFCUnYbQmPXk4PXYG7xamNs2hd2vWB8co6soUTPrKiqbbAluXoeDiwe1bQXJSJ1IFVKoGMsf6xdADOrvBxRq2YHvVKBad0TGAD2JU0m26zndtZ0_Cj4hbKFqa7NC3MS8ueyet1tXBLoc6/s320/12.png)
13) Create the view script for the new action. (e.g. change.phtml)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimMPaH8Ws3VLqyrl6SSjd1vzWUnIZuaBdTCbcnp7zZSP_ZxEh1ANhd7NcfxYmQkpZ939JPNQx89q0Z9Vcv4eNSh7qOv8EDnxhcBU86G_WxnATV-Bg_9LwUcssIu1m0FmiW_0RoWna-SqMt/s320/13.png)
14) Add all the changes to the git staging area.(e.g. git add .)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxeuti1i3d9rGJRShiIt1wCfElKuUqRExoO4GSDcPVtzdlDcaPYxxUfu-6WkH92wTBrKzE5ABW6WI_MknNjnjAuyn70zayAZWqmWZcm6z5Cz1rSQAu8pZoqzLVeVp3XaXmjvioqF67D5im/s320/14.png)
15) Commit the changes (e.g. git commit -m "New layout create and registerd")
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHM2eoBtUAWoi7ymymvQlko19UretTVMSUunr_87CQNe9gyPrlHZUGLXQYzTGK4KpwE22bN4AlSAMjdIQOaXmtQ1AA-A2GoaUzj3INbfNvtU-WSdAqE3ALZyWMmbey9CJ5pffEgdmUY4M6/s320/15.png)
16) Push to the development server to see the changes. (e.g. git push zend)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyriOL0GrBkTe0NoXISARutXmyjLfSqWACoCKKZSLd8YCSj1CZKUl3XNh0SsVjstb65IVhyWth4giELeFnwlBjfpvLtZdpq2OM9iNPEJhplu-AfpPUpRo7nSfC73uMdCR0lB2O5Kqd2o_d/s320/16.png)
17) Access the action that uses our new template (e.g. /stoyan-cheresharov/change)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKWqHS6srEYggqoSnVeVvrL1ReOIj24WBQu2i1vM_yUmHkRo9QucXIY8GdmEvDUvmFnITWPffUgq0JS4UN_tDU8U_OKFbN5uqo2iCHm2qfEVaxMjVe-C4UrPEN_s7JbDwKNd6kq0u4uGoy/s320/17.png)
18) (Optional Idea) You can send a parameter and use it to change the content etc. of the page
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIy8QQ0p03opsFuiPUohb1xC3RPsLPSZW0WQWYXjnKdonjVI1fwKr7RSz1F__yd_LxQAzLGC_cPW9oauhI2j4h1G_Ozj99MGcPVtLlvjzK6mZOLD_5zDwRXHKRF4AO4XhbTrB95xqqeL-E/s320/18.png)
19) (Optional.) Just for fun you can change the key of the new layout and name it "layout/layout".
This way you make it default for all the action in the app.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKY9RlJEiEps2olNCZmeLsI_yom4oB-QSQqJD7CH6h2coBaDkgllcSgqoZ5k8_4GnLH9DygFmO1ueKES3Hkj34OLtTRf90EoGCXuKwGASK9OoKPSbIJLAcWtBlKL22ZtF5uVR3trfpD1lZ/s320/19.png)
20) Push the changes to your fork in github.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6MzpP0HOobbqZQu7S2ne4PuxCKUYvufV4yDl86S6ntpsLN6GhlgIT5WeNtOS07IjzfTWbi9NFXy_5KyCM9T54O1Ur_68GhKTWDIRLQS_lbzHGsPwMmKJKuFHc1pKiPiGC7XDcEB4Xyw2c/s320/20.png)
21) (Optional) Send a pull request to the owner of the original repo.
No comments:
Post a Comment