Zend Framework from Scratch Part II: MVC and Creating Zend Project

In the Part I of the 'Zend from Scratch' series, we installed Zend and configured the environment to create our first Zend project. Continuing with our 'Zend from Scratch' series, we will have a look at the MVC framework using Zend and then create our first Zend web application. For those who haven't read the Part I of this series, here's the blog post of it:

Zend from Scratch Part I: Install and Configure PHP Zend Framework

Model-View-Controller (MVC) framework:

Model–view–controller (MVC) is a software architectural pattern for implementing user interfaces. It divides a given software application into three interconnected parts, so as to separate internal representations of information from the ways that information is presented to or accepted from the user.

courtesy: http://framework.zend.com

• Model - This is the part of your application that defines its basic functionality behind a set of abstractions. Data access routines and some business logic can be defined in the model.
• View - Views define exactly what is presented to the user. Usually controllers pass data to each view to render in some format. Views will often collect data from the user, as well. This is where you're likely to find HTML markup in your MVC applications.
• Controller - Controllers bind the whole pattern together. They manipulate models, decide which view to display based on the user's request and other factors, pass along the data that each view will need, or hand off control to another controller entirely.

We will discuss more on MVC and how it fits in the Zend framework once we create our first project.

Create a Zend Framework Project:

Once you have completed all the steps in Part I of this series, we can start with creating of first PHP Zend project.

Open command prompt and navigate to the folder where you want to create your project. It should be the folder where the server points to. If you have XAMPP installed, its 'C:\xampp\htdocs'. Now run the below command:

zf create project zendtest

Here, 'zendtest' is the name of the project.

You may get an error for 'PHPUnit_Framework_TestCase', but this should not be a concern as it will not create any hindrance while working with the development activities. The error is related to Unit Testing.

Once you run the above command, you can find a folder named 'zendtest' (the name of our project) in the 'htdocs' folder. Below is the directory structure of our newly created project:

Now, once we can see the directory structure, we can relate this back to the MVC framework.

Zend Framework and MVC:

Open the 'application' folder in the newly created project:

As you can see, there are three prominent folders: models, views and controllers.

Controllers:

Your application's action controllers contain your application workflow, and do the work of mapping your requests to the appropriate models and views.
Open the IndexController.php file in the controllers folder:

<?php

class IndexController extends Zend_Controller_Action
{

    public function init()
    {
        /* Initialize action controller here */
    }

    public function indexAction()
    {
        // action body
    }


}

Note the method 'indexAction()'. IndexController is a fallback controller and which also serves the home page of the site. Since there is nothing in the indexAction() method right now, it takes the default view, which is 'C:\xampp\htdocs\zendtest\application\views\scripts\index\index.phtml'. This is nothing but the home page of your project.
Open your browser and goto

http://localhost/zendtest/public

This is what you get:

This page is nothing but the index.phtml in 'C:\xampp\htdocs\zendtest\application\views\scripts\index'.

Now, lets have a look into Views.

Views:

View scripts are placed in application/views/scripts/, where they are further categorized using the controller names. In our case, we have an IndexController and an ErrorController, and thus we have corresponding index/ and error/ subdirectories within our view scripts directory.

Creating a Layout:

You may have noticed that the view scripts in the previous sections were HTML fragments- not complete pages, and they lack html, head, and body tags. This is purposely done by design, so that all actions return content related to that action only, and not the whole application. This gives a consistent look and feel throughout the application.
To create a layout, open the command prompt and navigate to the project directory. Now run the below command:

zf enable layout

The output is as below:

This will create a 'layout.phtml' file in 'C:\xampp\htdocs\zendtest\application\layouts\scripts'. If we open the file, below is what we see:

<?php echo $this->layout()->content; ?>

This is nothing but echoing the content from the view. We need to wrap this content with proper header and footer files. Replace the code in 'layout.phtml' file with the below code:

<!DOCTYPE html>
<html>
    <head>
        <title>Zend Test</title>
    </head>
    <body>
        <div id="wrap">
            <div id="header">
                <p>This is the header</p>
            </div>
            <div id="content">
                <!-- Echo our content here! -->
                <?php echo $this->layout()->content; ?>
            </div>
            <div id="footer">
                <p>This is the footer</p>
            </div>
        </div>
    </body>
</html>

Now, again goto 'http://localhost/zendtest/public' in your browser. You now have the previous page with a proper header and footer!!

So far, we have created the basic layout of our site using the Zend framework. In the next part, we will cover creating Models and database, creating new controllers and the rest of the things required to create a full-fledged web site.

A summary of what we covered in this tutorial:

• What is Model-View-Controller framework
• Zend Framework as an MVC
• Creating Zend Project
• Understanding the Controllers and Views in Zend Framework
• Creating a layout using Zend

Stay tuned for the final segment of this three part Zend from scratch series.

You can subscribe for free or become a follower to get the latest alerts and posts.

Kindly Bookmark and Share it: