Articles

Nick Swinford

Nick Swinford's Articles

Nick Swinford

Nick Swinford

October 11 2012

Creating com_hellos

Install Anahita

To begin with, install a new instance of Anahita. This tutorial is written using Anahita 2.1.2 so be mindful of that when following it.

Setup Folder Structure

To begin with let's setup the folder structure we'll use for our social app. Underneath the components folder in your installation, create the following folders:

We may not use all of the folders currently, but it'll still be good to have them for later.

MVC, Domains, Naming Conventions

It's important to note a few things here.

First of all, Anahita follows what's called an Model View Controller (MVC) design pattern. Generally speaking in MVC, the Model is what stores, accesses and manipulates the data, the Controller is what intercepts the request (GET, POST, etc.) and triggers the Model and the View displays the data. Although in Anahita, we use a specialized form of a Model called a Domain.

Also, Anahita follows strict naming conventions that dictate how files and classes should be named. Frequently, we'll be using the name of our component, hellos, when naming classes. As well, when refering to multiple greetings we'll use the plural, Hellos, and when refering to one greating we'll use the singluar, Hello.  You can see this in our Views above. The Hellos view will display multiple greetings while the Hello view will show just one greeting.

Component File

Okay, let's get started with the real coding. Open up your favorite code editor (Notepadd++ can work in a pinch, but I'm using Eclipse PDT) and enter the following:

Then save this as hellos.php in the com_hellos folder. This is the component file and it's the first file that's called when someone access our component. Like discussed in the naming conventions, this file should be named the same as the component name. By including the KRequest for the Hellos view, we're stating that the Hellos view should be loaded by default whenever the component is accessed.

Hellos View

Now to create a basic layout for the Hellos view. Open a new file in your editor and enter the following:

Save the file as default.php in the com_hellos/view/hellos/html folder. Here we're using PHP short tags. Anahita will automatically extend into which return the follow text string to the browser. As well, the naming of this file is part of the naming conventions. When accessing a View, the default layout is loaded unless another layout is specified in the request.

Test It

In your browser, load up your Anahita installation and point to /index.php?option=com_hellos. If you watch, you should be automatically redirected to /index.php?option=com_hellos&view=hellos due to us setting the default view in the component file. In the browser, it'll return the string we entered in the default.php file.

Entity Class

Now that we have a basic Hellos View, lets set up our app so we can add and edit greetings so we'll have something to actually display in our Hellos View!

To do that, we'll need to setup our Hello entity class.  Enter the following into your code editor:

Then save the file as hello.php in the com_hellos/domains/entities folder.  For our app, we only need the ComHellosDomainEntityHello class extended as shown here to browse, add and edit greetings, but we're going to go a step farther.  By appending the config in this way, we're stating that the name and body are required when submitting the form we'll create later.  This will prevent any blank greetings from being added.  This can be done for any node attribute.

If you're not familiar with the attributes, I suggest that you open up PHPMyAdmin , access the database you have Anahita set up in, and study the jos_anahita_nodes table.  This is where all nodes are stored and there's many different attributes to each one.  It may be helpful to play around with your setup, creating some test groups, topics, photos and then look at the data you've created to see how the items work together in the database.

As well, if you're wanting to include additional attributes that aren't included in Anahita nodes, this is where you'd extend the node to include additional tables and fields.  A good example of this is in com_topics where the Topic Entity is extended to include the sticky field.

Hello Form

Now that we have our Hello Entity setup, we can setup our Hello Form.  Open up your code editor and enter the following text:

Save this file as form.php in the com_hellos/views/hello/html folder.  This is just a pretty basic form with two fields, title and body, which are the same two fields we set to required in our entity class.

The first line checks to see if the KOOWA constant is defined and if it isn't, terminates running the current php file.  This is a security check to make sure no one can access this php file directly and instead has to be severed through Anahita.

If you're not familiar with a lot of the CSS classes that we're using here, I suggest that you take some time and review Twitter Bootstrap as most of them come from that, specific their form classes.  Over all, this is a pretty simple form.  There's a lot more classes and options we could pass into the @editor.  Check out com_topics for a better example.

You can also see that we have several ternary operators.  This is because we'll be using the same form to add and edit greetings.  Each check to see if there's already a Hello that already existed or we're creating a new one.

The @text function is part of Anahita's multilingual functionality.  Later in the tutorial, we'll create and English language file that matches all of the language strings that are provided here.  When the form is displayed, the language strings will be matched up in our language file and the proper text will be displayed.

Hello Layouts

While the form is technically a layout for the Hello View, we need to create the layouts that match up with Anahita's actions, add and edit.

Open your code editor and enter the following:

Save this code as add.php in the com_hellos/views/hello/html folder.  Save the same code as edit.php in the same folder, as well.

Here we have our security check again and then we're using a helper method called template to call the form that we created earlier.

Test It

Load up the component by going to /index.php?option=com_hellos&view=hellos.  You should see a New button in the toolbar.  (You'll need to be logged in.)  Click it and you should be taken to the add layout.  Go ahead and in some sample data so we can improve our Hellos view shortly.  Try submitting a blank form so you can see the errors generated by setting our form fields as required.

Improving the Hellos View

Now that we have some sample data to start working with we can improve our Hellos View to actually show us that data.  Open up your default.php file in the com_hellos/views/hello/html folder in your code editor, remove the code we added before and enter in the following:

Again, we have our security check and several Twitter Bootstrap classes.Anahita will automatically fetch the data for our component and make it available in our view; here as $hellos.  First, we do a check to make sure that we actually have some data to work with, if we do, then we iterate over it.  We're using the alternate syntax for if and foreach to make the code easier to read.

For each greeting, we create a div element and insert the id, title and body.  We're linking the title of each Hello to the default page for it; there we can display all the details of an individual greeting.

Test it

Load /index.php?option=com_hellos&view=hellos.  You should see all of the greetings that you added in with the form now displaying here.

Default Hello Layout

Let's put the final touches on our Hello view by adding the default view.  Here, we'll display all the details of our greeting.  Open up your code editor and enter in the following:

Save the file as default.php in the com_hellos/views/hello/html folder.

The commands helper will help by rendering our toolbar in this layout.  Anahita automatically provides many different behaviors on media nodes that we'll be able to use through this toolbar.

After the toolbar, we create divs and echo the attributes of our greeting.  The greeting that we're viewing is already made available to us in the $hello variable.  You can add display as many attributes as you like, based on what's available in the nodes table.

Test it

Load /index.php?option=com_hellos&view=hellos.  Click on one of the hello titles and you should be directed to the details page for the hello.Along the top, you should see the commands toolbar that we added in.  Behaviors like Like, Comments, and Subscriptions are automatically available on the media node.

Click the drop down button and click Edit.  This will bring up our form and allow us to edit the current greeting.  You can also delete a greeting through the drop down with no additional code needed.

There ya go!

You now have a basic social app for greetings.  Feel free to play around with the code.  Try out new things and don't be afraid of breaking it.

If there's anything incorrect or you have any ideas on how to improve this tutorial, feel free to comment below or edit the page!

7 people liked this
Umesh
Umesh
October 12 2012 Permalink
Nick, Thanks for putting this together
James Imani
James Imani
October 12 2012 Permalink
I'm also interested in more tutorials. Would like to read how you work with the Database, how you get and set datas and so on. Thank you
Marsh Mac
Marsh Mac
October 13 2012 Permalink
Thanks Nick. This is pretty neat.
James Imani
James Imani
October 14 2012 Permalink
Love your tutorial!
Nick Swinford
Nick Swinford
October 18 2012 Permalink
Expanded the tutorial a bit!
Rastin Mehr liked this
Rastin Mehr
Rastin Mehr
October 18 2012 Permalink
instead of class clearfix you can just use "row"
Nick Swinford
Nick Swinford
October 18 2012 Permalink
@Rastin Yeah, I tried using row, but the margin-left always forced part of the row into the margin area, but for some reason it's working now. :P
Addies
May 06 2014 Permalink
@nick after i create hellos.php and default.php, then try to check in my browser it does'nt appear anything.. any mistake?
This tutorial is really outdated now. You should try looking at how com_topics works and base it off that. I'll update this when I get a chance.

Additional Information

Powered by Anahita