Now, back in the admin zone we can add some interesting features to make the component admin zone easier to use.
Adding tips and instructions may not seem so important in our component, as we only have two fields: one for the title and the other for the text. But in many forms out there, some help may be very useful while filling the form.
We are going to add some notes inside these two fields for users to see what they must write. Usually, we will do that more or less as follows:
<input class="text_area" type="text" name="title" id="title" value="Sample text here" size="40"/>
However, we would face some problems if we were to use this approach. For example, if users write something and then delete it, the note won't appear again. This is something that isn't so important, but wouldn't it be better if the note would appear again if there is no text present in the input? Sure, and that's what we are going to do.
We can find some information regarding when to use the plugin at the following link:
http://manuelboy.de/projekte/jquery-formtips/
After downloading the plugin, we are going to place the
jquery.formtips.1.2.js
file in
administrator/components/com_tinynews/js/
, and then we are ready
to go. Open the
administrator/components/com_tinynews/views/addnews/tmpl/form.php
file, and enter the following code:
$document->addScript($js); $js = JURI::base().'components/com_tinynews/js/jquery.formtips.1.2.js'; $document->addScript($js);
This is the same code that we always use. However, we now need to make some changes to the form's input elements so that the plugin works correctly. For example, this is our first input field:
<input class="text_area" type="text" name="title" id="title" value="<?php echo $this->news->title;?>" size="40"/>
The plugin needs to have a title
element, which will
contain the text that will be placed inside. For example:
<input class="text_area" type="text" name="title" id="title" value="<?php echo $this->news->title;?>" size="40" title="Write your title here"/>
We are going to do the same with our textarea
element, as
follows:
<textarea class="text_area" type="text" name="text" id="text" cols="40" rows="5" title="Write the news' text here"> <?php echo $this->news->text;?></textarea>
Now we are going to make the plugin's function call, as follows:
jQuery(document).ready(function($){ $('textarea').simpleautogrow(); $('input,textarea').formtips({ tippedClass: 'note' }); });
The only parameter we need to pass to the formtips
function is the class the tips are going to use so that we can style them. We
are going to use a class called note
, which will look like
this:
.note{ color: #9A0000; }
We will place this class in our
administrator/components/com_tinynews/css/styles.css
file.
However, we also need to call this file in our
administrator/components/com_tinynews/views/addnews/tmpl/form.php
file:
$css = JURI::base().'components/com_tinynews/css/styles.css'; $document->addStyleSheet( $css ); ?> <?php defined('_JEXEC') or die('Restricted access'), ?>
Want to see the result? Take a look at the following screenshot:
Of course, when we try to write inside these fields the text will disappear, and when we leave the field, if we haven't written anything, our note will be placed again.
When the form is sent, if the plugin finds that the value of the fields is equal to the notes that we have placed, it will remove these values. So, when the values reach the server, these will be empty. This way, we will know whether the user has written anything or has left the inputs empty.
You can check the changes required in the form_notes
folder
of the code bundle.
Wouldn't it be great to have images along our news? Surely an image would help make our component even more interesting. In this section, we are going to accomplish just that by enhancing our component to upload images.
Our first stop is going to be the form.php
file, which we
can find in
administrator/components/com_tinynews/views/addnews/tmpl/
. We need
to introduce some changes to this file.
The first and foremost change is to add
enctype="multipart/form-data
" to our form declaration so that we
can upload files. Without this, no upload will take place. We just need to add
the following code:
<form action="index.php" method="post" name="adminForm" id="adminForm" enctype="multipart/form-data">
But we will also need to add an input for the file:
<tr> <td width="100" align="right" class="key"> <label for="title"> Image: </label> </td> <td> <input class="text_area" type="file" name="image" id="file"/> </td> </tr> </table>
Anyway, as we are changing our form, we are also going to add a caption for this image, just like this:
<tr> <td width="100" align="right" class="key"> <label for="title"> Image caption: </label> </td> <td> <input class="text_area" type="text" name="caption" id="caption" value="<?php echo $this->news->caption;?>" size="40" title="Write your image caption here"/> </td> </tr>
But if we want to save these new fields, we need to change our database table to reflect the changes. We will execute a query as follows:
ALTER TABLE `jos_tinynews` ADD `image` VARCHAR( 255 ) NOT NULL , ADD `caption` VARCHAR( 255 ) NOT NULL ;
Changing the table will let us save the fields in the database, but if you
remember, we also have a table file in
administrator/components/com_tinynews/tables/addnews.php:
var $id = null; var $title = null; var $text = null; var $image = null; var $caption = null;
The code that is highlighted represents the new fields added to our table file. With these changes, we are almost done now. However, before continuing, we are going to create a new folder where we will put the images.
This folder will be placed in
administrator/components/com_tinynews
and will be called
images
. Also, make sure to give enough permissions to the folder.
777 should work for the example, though in a real-world production environment
644 would be enough.
Our last step is to modify our model file in
administrator/components/com_tinynews/models/addnews.php
. Here we
will work with the savedata
method:
function savedata(){ $row =& $this->getTable('addnews'), if(!empty($_FILES["image"]["tmp_name"])){ move_uploaded_file($_FILES["image"]["tmp_name"], $_SERVER["DOCUMENT_ROOT"].DS."administrator" .DS."components".DS."com_tinynews" .DS."images".DS.$_FILES["image"]["name"]); } $data = array(); $data['id'] = JRequest::getVar( 'id', 'null' ); $data['title'] = JRequest::getVar( 'title', 'null' ); $data['text'] = JRequest::getVar( 'text', 'null' ); $data['image'] = (!empty($_FILES["image"]["tmp_name"]) ? $_FILES["image"]["name"] : ""); $data['caption'] = JRequest::getVar( 'caption', 'null' ); if (!$row->bind( $data )) { $this->setError($this->_db->getErrorMsg()); return false; }
Many changes have been made here. First we check if a file has been correctly uploaded:
if(!empty($_FILES["image"]["tmp_name"])){
If we have a file, we move it to our images
folder. Note
that we have used the DS
constant for the separator, instead
of just using /
or
, which may give
problems depending on the system we are working on.
Also, note something interesting. Before we had the following line:
if (!$row->bind( JRequest::get( 'post' ) )) {
And now, we have something quite different, as shown next:
$data = array(); $data['id'] = JRequest::getVar( 'id', 'null' ); $data['title'] = JRequest::getVar( 'title', 'null' ); $data['text'] = JRequest::getVar( 'text', 'null' ); $data['image'] = (!empty($_FILES["image"]["tmp_name"]) ? $_FILES["image"]["name"] : ""); $data['caption'] = JRequest::getVar( 'caption', 'null' ); if (!$row->bind( $data )) {
Instead of getting the post
array directly, we are creating
our very own array. This way we can modify the value of the
image
variable, otherwise this value would be empty.
Note that many things could be improved here, but for now we will continue, just to concentrate on the jQuery part of things.
But before we continue, why don't you take a look at the code bundle.
All the changes we have made are in the upload_images
folder.
Now that we can upload images, it would be great to show them in the frontend. The next section will be just about that.
3.145.14.132