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.

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.

Now that we can upload images, it would be great to show them in the frontend. The next section will be just about that.