In this section, we will be creating a small address book application to demonstrate some basic functionality of Zend Framework, including the database create, read, update, and delete (CRUD) operation. In this small application, the user will be able to add new contacts and edit and delete contacts.
Step 1 – creating a module
Let’s look again inside the address-book
directory that we have created in the Step 2 – unzipping the skeleton application section. There is a config
directory and inside that you will see an autoload
directory and an application.config.php
file. In this application.config.php
file, we can tell the framework which modules to load and we can tell the paths where to look for those modules.
There is another directory called module
where we will put all our custom modules. By default, there is an Application
module in this directory; however, we are not going to use that. We will create our own custom module named Contact
. To create a module, we need to do at least two things: first, create a directory called Contact
. Second, inside that Contact
directory, we need to add a Module.php
file.
Let’s create a Contact
directory inside the module directory and the Module.php
file inside that Contact
directory. Now the module
directory should look like the following:
Add the following lines of code to the Module.php
file:
And with that, we have just created our very first module.
Now we need to tell Zend Framework to load this Contact
module. To do that, we need to add the following lines of codes in the application.config.php
file:
Although we have now created and loaded our first module, it will not give us any output. If we browse to the URL http://localhost/address-book/public
, it will give us an error because we have not created any controller and view yet.
Step 2 – creating a controller
If you look at the Application
module that comes by default with the skeleton app, you will notice its directory structure is somewhat similar to the following code snippet:
The config
directory has a module.config.php
file that holds all module-specific configurations such as router
, service_manager
, controllers
, and view_manager
. The src
directory holds Controllers
and Models
, and the view
directory holds all the view-related things; I will come back to this in the next step.
Let’s create our first controller home for our Contact
module, and for this we need to create the directory structure as follows:
Note that inside the src
directory, we have the /Contact/Controller
directory and inside that we have HomeController.php
.
In ZF, the controller ends with the Controller
suffix. So, as our controller name is Home
, its class name should be HomeController
and the filename should be the same as the class name. Our HomeController.php
should look as follows:
Step 3 – configuring a controller
We have created our first controller in the last step; however, to make it work, we need to configure it in config/module.config.php
and Module.php
.
Add the following code in the module.config.php
file:
Add the following code in the Module.php
file:
Now, in the browser go to the address book app http://localhost/address-book/public
. You should see a page saying Hello Zend Framework 2.
So far we have created and configured a controller, and now we will place all our view files inside the view
directory of the Contact
module. A view file has a close relation with the controllers. By default, every controller and action expects that there should be a corresponding view file for them. So this means if our controller name is Home
and action name is Index
, there should be a .phtml
file in the view
directory as follows:
For the view file, ZF uses the .phtml
extension. Another important thing is that for showing all our application errors, we need to put the .phtml
files in the error directory. We will create an index.phtml
file for all general purpose errors and a 404.phtml
file for all page not found errors. So finally at this point, our view directory should be similar to the following code snippet:
Let’s add some code in these .phtml
files. Add the following code in the error/index.phtml
file:
Add the following code in the error/404.phtml
file:
Add the following code in the home/index.phtml
file:
Here, the value of the $controller
and $action
variable will come from the controller. I will show you how, in a moment, but before that let’s talk about layouts.
Layout is a special kind of view that wraps the action’s view; for example, in a normal website, you will see that the header and footer are common for every page. This doesn’t mean they have written the header and footer in every single page. These common parts are normally written in layout. We will place a very basic layout.phtml
file in the layout
directory.
Let’s add the following code in the layout.phtml
file:
Here in the code, the <base>
tag is important because we have not created a virtual host, and our path is not directly under the web root directory. Also, the $this->content;
function is important as it shows the action-specific view.
Now, let’s configure all our view files with view_manager
in the module.config.php
file with the following code:
So view is now configured. To pass the value from the controller to a view file, we need to update the home controller’s indexAction
method with the following code:
Now let’s browse the app again. Go to http://localhost/address-book/public
, and you should see the output similar to the following screenshot:
Step 7 – project in the big picture
So far we covered several configurations: how to create controller, model, and view, and how to connect with the database. Now we will see the project in the big picture.
Before we begin, let’s create a table named contact
using SQL as follows:
We will create our address book app’s home page similar to this mockup layout:
Note that in the layout, we have the Add new contact, Edit, and Delete links. When a user clicks on the Add new contact link, we will take the user to the add new contact page, and after successful submission of the form, we will save the information and redirect the user to this home page and update the grid with the new row.
Again, if the user clicks on the Edit link, we will open that row in the edit contact page, just like the add new contact page; after successful submission of the form, we will update the information and redirect the user to this home page and update the row with the updated contact information. Clicking on the Delete link will not have any visual page; the user will just click on the link and it will take him to the controller and delete the row and redirect him to the home page with that row deleted.
The add and edit contact page will be similar to the following screenshot:
Let’s start coding. First, open the Contact
model that we created in the Step 6 – creating a model section. We will add a new getAllRows()
method to it that will fetch all the rows from the contact table. Code for the getAllRows()
method is as follows:
Here in this method, the $this->_db
instance is the PDO object, which we have injected in the contact model’s constructor from the Module
class.
Now open the HomeController
class, and in the indexAction
method, assign all the rows returned by the getAllRows()
method to our view page. To do so, we need to update our indexAction
method with the following code:
Now, open the contact/home/index.phtml
file, and add the following code to view all the rows:
At this point, there are no data in the contact table. If we manually insert some data and browse to http://localhost/address-book/public
, we will see an output as shown in the following screenshot:
Now we will create the add new contact form, and a newAction
method in homeController
and a addRow
method in the Contact
model.
Add the following code in the newAction
method of homeController
:
Here, $this->redirect()
is a controller plugin. There are several other controller plugins like this; for example, param
, forward
, and layout
.
What this redirect plugin does in this code is that after submission of the form, the addRow()
method saves the data to the database and then redirects the plugin to do the redirection of the client to the home route. Remember, we have defined this home route in the module.config.php
file’s router
section.
Let’s create a new.phtml
file in the view/contact/home/
directory, and add the following code:
Now, open the contact
model and add the addRow
method to it as follows:
Now open http://localhost/address-book/public/home/new
. You should see the new contact form. Fill up the form and click on the Save button. It will save the data to the database and redirect you to the home page with the new row showing.
The edit contact code is similar to the new contact code except that we need a to add a few extra lines of code; for example, the edit URL needs to carry the ID of the contact that we want to edit as shown in the following line of code:
Then we need to fetch the contact row from the contact table and assign it to the edit contact form. So, we need a method such as getRow($id)
that will return the row for $id
.
Let’s create the getRow()
method in the contact
model.
Also, we will need another method that will update the contact data. So we need to add an updateRow()
method in this model as follows:
Now open the homeController
file, and add a new editAction
method to it as follows:
Here, $this->params()
is another controller plugin. So, what this edit action does is it takes the ID from the request URL and assigns it to the $id
variable, and then fetches the row from the database based on that ID and assigns it to the edit view
file. When the form is submitted, it saves the data to the contact table and redirects the user to the home route.
We need to add an edit.phtml
file in the view/contact/home/
directory, and add the following code to it:
Note that it is the same as the new.phtml
file; the only difference is the form
method’s action
URL.
The delete
action is pretty straightforward. It will not have any view file, and it will just get the ID from the URL and delete the contact from the database using the contact model.
Code for the delete
action is as follows:
Code for the delRow
method of the Contact
model is as follows: