Zendframework 2 Application Skeleton No Album Style
I am currently rebuilding the Skeleton application in ZF2 In "Zend Framework 2 Documentation, Release 2.3.3" there is a form created to add / edit an album.
In the documentation, the form looks like this:
I followed the documentation step by step, but mine looks like this:
AlbumForm.php:
<?php
namespace Album\Form;
use Zend\Form\Form;
class AlbumForm extends Form
{
public function __construct($name = null)
{
parent::__construct('album');
$this->add(array(
'name' => 'id',
'type' => 'Hidden',
));
$this->add(array(
'name' => 'title',
'options' => array(
'label' => 'Title',
),
'attributes' => array(
'type' => 'text',
)
));
$this->add(array(
'name' => 'artist',
'options' => array(
'label' => 'Artist',
),
'attributes' => array(
'type' => 'text',
)
));
$this->add(array(
'name' => 'submit',
'attributes' => array(
'type' => 'submit',
'value' => 'Go',
'id' => 'submitbutton',
),
));
}
}
add.phtml
<?php
$title = 'Add new album';
$this->headTitle($title);
?>
<h1><?= $this->escapeHtml($title); ?></h1>
<?php
$form->setAttribute('action', $this->url('album', array('action' => 'add')));
$form->prepare();
echo $this->form()->openTag($form);
echo $this->formHidden($form->get('id'));
echo $this->formRow($form->get('title'));
echo $this->formRow($form->get('artist'));
echo $this->formSubmit($form->get('submit'));
echo $this->form()->closeTag();
HTML output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add new album - ZF2 Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Le styles -->
<link href="/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/bootstrap-theme.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/style.css" media="screen" rel="stylesheet" type="text/css">
<link href="/img/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<!-- Scripts -->
<!--[if lt IE 9]><script type="text/javascript" src="/js/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="/js/respond.min.js"></script><![endif]-->
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="/img/zf2-logo.png" alt="Zend Framework 2"/> Tutorial</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<h1>Add new album</h1>
<form action="/album/add" method="POST" name="album" id="album"><input type="hidden" name="id" value=""><label><span>Title</span><input name="title" type="text" value=""></label><label><span>Artist</span><input name="artist" type="text" value=""></label><input name="submit" type="submit" id="submitbutton" value="Add"></form> <hr>
<footer>
<!--<p>© 2005 - 2014 by Zend Technologies Ltd. All rights reserved.</p>-->
</footer>
</div> <!-- /container -->
</body>
</html>
I hope someone knows my mistake ...
+3
source to share
3 answers
You need to add the appropriate classes for the input fields if you are using bootstrap3 so you need to modify your album.php like this:
<?php
namespace Album\Form;
use Zend\Form\Form;
class AlbumForm extends Form
{
public function __construct($name = null)
{
parent::__construct('album');
$this->add(array(
'name' => 'id',
'type' => 'Hidden',
));
$this->add(array(
'name' => 'title',
'options' => array(
'label' => 'Title',
),
'attributes' => array(
'type' => 'text',
'class' => 'form-control',//changed line
)
));
$this->add(array(
'name' => 'artist',
'options' => array(
'label' => 'Artist',
),
'attributes' => array(
'type' => 'text',
'class' => 'form-control',//add form-control class
)
));
$this->add(array(
'name' => 'submit',
'attributes' => array(
'type' => 'submit',
'value' => 'Go',
'id' => 'submitbutton',
'class' => 'btn btn-default'//add btn class
),
));
}
}
add.phtml:
<?php
$title = 'Add new album';
$this->headTitle($title);
?>
<h1><?= $this->escapeHtml($title); ?></h1>
<?php
$form->setAttribute('action', $this->url('album', array('action' => 'add')));
$form->prepare();
echo $this->form()->openTag($form);
echo $this->formHidden($form->get('id'));
echo $this->formRow($form->get('title'));
echo '<br>';//separate line
echo $this->formRow($form->get('artist'));
echo '<br>';//separate line
echo $this->formSubmit($form->get('submit'));
echo $this->form()->closeTag();
Thank..
+2
source to share
You must wrap your form elements in a "form-control" class. However, there is a pretty good module called zf2 twb bundle which has some useful viewhelpers / form elements etc.
+1
source to share
Better to use the bootstarp form group instead of the file in add.phtml:
<?php
$title = 'Add new album';
$this->headTitle($title);
?>
<h1><?= $this->escapeHtml($title); ?></h1>
<?php
$form->setAttribute('action', $this->url('album', array('action' => 'add')));
$form->prepare();
echo $this->form()->openTag($form);
echo $this->formHidden($form->get('id'));
echo $this->formRow($form->get('title'));
echo '<div class="form-group">';
echo $this->formRow($form->get('artist'));
echo '</div><div class="form-group">';
echo $this->formSubmit($form->get('submit'));
echo $this->form()->closeTag();
0
source to share