Creating HTML forms in Zend Framework 2 application

In this article, we will create an HTML form which enable users to submit data to the server and save it into MySQL database.

In our previous article titled “Setup model and table classes to fetch data from MySQL database using TableGateway in Zend Framework2“, we have seen how to fetch data from MySQL database and to display it in presentation layer ( View layer ) .

This article belongs the series “Web application development with Zend Framework 2“.

1. Setup the application

Please follow the article “Setup model and table classes to fetch data from MySQL database using TableGateway in Zend Framework2” to setup the application and ensure that a web page as shown in the given Figure1 is obtained.

Showing output of our previous article titled "Setup model and table classes to fetch data from MySQL database using TableGateway in Zend Framework2"

2. Creating a Zend Framework2 Form class in Zf2StudentApp/module/Student/src/Student/Form/StudentForm.php

<?php
namespace Student\Form;

use Zend\Form\Form;

class StudentForm extends Form{
    public function __construct($name=null){
        parent::__construct('student');

        // Setting post method for this form
        $this->setAttribute("method", "post");

        // Adding Hidden element to the form for ID
        $this->add(array(
            "name"=>"id",
            "attributes"=>array(
            "type"=>"hidden"
            )
        ));

        // Adding a text element to the form for Name
        $this->add(array(
            "name"=>"name",
            "attributes"=>array(
                "type"=>"text"
            ),
            "options"=>array(
                "label"=>"Name"
            )
        ));

        // Adding a select element to the form for Department
        $this->add(array(
            "name"=>"department",
            "type"=>"Zend\Form\Element\Select",
            "options"=>array(
                "label"=>"Department",
                "options"=>array("Computer Science"=>"Computer Science",
                    "Physics"=>"Physics",
                    "MBA"=>"MBA"
                ),
            )
        ));

        // Adding a text element to the form for Marks
        $this->add(array(
            "name"=>"marks",
            "attributes"=>array(
            "type"=>"text"
            ),
            "options"=>array(
                "label"=>"Marks"
            )
        ));

        // Adding Submit button to the form
        $this->add(array(
            "name"=>"submit",
            "attributes"=>array(
            "type="=>"submit",
            "value"=>"Add"
            ),
        ));
    }
}

3. Updating the class “StudentTable” in Zf2StudentApp/module/Student/src/Student/Model/StudentTable.php

<?php
namespace Student\Model;

use Zend\Db\TableGateway\TableGateway;

// A table class for the database table student
class StudentTable{

    // This table class does database operations using $tableGateway
    protected $tableGateway;

    // Service manager injects TableGateway object into this class
    public function __construct(TableGateway $tableGateway){
        $this->tableGateway = $tableGateway;
    }

    // Fetching all the student table rows
    public function fetchAll(){
        $resultSet = $this->tableGateway->select();
        return $resultSet;
    }

    // Inserting User input data via Form Submission
    public function saveStudent(Student $student){
        $data = array(
            'name' => $student->name,
            'department'  => $student->department,
            'marks'  => $student->marks,
        );
        $this->tableGateway->insert($data);
    }
}

4. Adding “addAction” in Zf2StudentApp/module/student/src/Student/Controller/StudentController.php

<?php
namespace Student\Controller;

use Student\Model\Student;
use Zend\Mvc\Controller\AbstractActionController;
use Zend\View\Model\ViewModel;
use Student\Form\StudentForm;

class StudentController extends AbstractActionController{
    protected $studentTable;

    public function indexAction(){
        // Setting layout for this action
        $this->layout("layout/student_layout");

        return new ViewModel(array(
            // Fetching data from database
            'students'=>$this->getStudentTable()->fetchAll()
        ));
    }

    // Getting StudentTable object to do database operations
    public function getStudentTable(){
        if(!$this->studentTable){
            $sm = $this->getServiceLocator();
            $this->studentTable = $sm->get("Student\Model\StudentTable");
            return $this->studentTable;
        }
    }

    // Add action
    public function addAction(){

        // Setting layout for this action
        $this->layout("layout/student_layout");

        // Creating html form for student insert
        $form = new StudentForm();

        // Getting a request object
        $request = $this->getRequest();

        // If it is a form submission,
        // then request will be post
        if($request->isPost()){

            // Creating a Student object
            $student = new Student();

            // Setting data on form object from request object
            $form->setData($request->getPost());

            if($form->isValid()){

                // Setting data on student object from form object
                $student->exchangeArray($form->getData());

                // Inserting student data in the datbase table
                $this->getStudentTable()->saveStudent($student);

                // Redirecting to index action of student controller
                return $this->redirect()->toRoute("student");
            }
        }

        // If it is form request,
        // then return the form
        return array('form'=>$form);
    }
}

5. Create new file Zf2StudentApp/module/Student/view/student/student/add.phtml to show the html form

<?php
// Getting form object from add action of student controller
$form = $this->form;

// Setting the value for 'action' attribute
$form->setAttribute('action', $this->url('student', array('action' => 'add')));

// Ensures state is ready for use
$form->prepare();

// Opening the form tag
echo $this->form()->openTag($form);

// Hidden Element to store id
echo $this->formHidden($form->get('id'));

// TextBox element to input Name of student
echo $this->formRow($form->get('name'));

// TextBox element to input Department
echo $this->formRow($form->get('department'));

// TextBox element to input Marks
echo $this->formRow($form->get('marks'));

// Submit button
echo $this->formSubmit($form->get('submit'));

// Closing the form tag
echo $this->form()->closeTag();
?>

6.  Adding a “Add Student” link in Student List page Zf2StudentApp/module/Student/view/student/student/index.phtml

<h1>
    Students List
</h1>

<table border="1">
    <thead>
        <tr>
            <td colspan="4" align="right">
                <a href="<?php echo $this->url('student',array('action'=>'add')); ?>">Add Student</a>
            </td>
        </tr>
        <tr>
            <th>No</th>
            <th>Name</th>
            <th>Department</th>
            <th>Marks</th>
        </tr>
    </thead>
<tbody>

<?php

$i=1;
foreach($students as $student){
    echo "<tr>";
    echo "<td>" . $i++ . "</td>";
    echo "<td>" . $student->name . "</td>";
    echo "<td>" . $student->department . "</td>";
    echo "<td>" . $student->marks . "</td>";
    echo "</tr>";
}
?>

</tbody>
</table>

7. Screenshots of the application

Figure 2 : Adding new Student

Figure 3 : Students List

8. Download application

The source for this application can be downloaded from here.

The application repository is available here

How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com

---

Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :

---

Tags: Form, mysql, TableGateway, zend framework 2