Grafik Kaos

Joomla is such a headache

2009-06-09 15:17:42

Here's the deal. I have been asked to integrate a payment gateway for this particular site that has been designed in Joomla. Typically, I welcome any challenge as it puts my mind into serious overdrive and allows me to push myself that bit further in order to accomplish the task at hand. But this around, I am completely stumped. It's not that I can't do the job, its just trying to understand Joomla's MVC's structure when it comes to component/extension development has me really banging my head at walls.

Why oh why, do they have to make it so hard for developers to figure they way through the system? I have read several books that claim to explain how the mvc structure works, visited numerous websites, followed a couple of tutorials... still nothing... I did however come across a couple of Joomla component generators which I think kind of gave me a head start but then once done... where do I go next?

Guess I will need to crack on....

This is too much....

2009-05-23 10:19:06

I need to make time for the blog section of my website... The only problem is that with being so busy with my own personal life as well as having a few projects going on at the same time, it is quite difficult.... I still do have a few ADDT articles that still need to be published and I will get round to doing it... That is assuming anyone is still interested in ADDT. Not going to say anything on here so you best check the Adobe Forums.

Anyway, I have started looking at CodeIgniter. Dont understand why I never thought of doing this earlier. Looks simple enough to be used but I still need time to get my head round a few things before I start using it fully for my future project. Having said that, I wont be dropping ADDT anytime soon.

Creating A Database Connection in Dreamweaver

2009-02-19 09:01:33

This may be a step backward from some of the tutorials, but I believe a small refresher can sometimes be a good thing. If you are new to Dreamweaver and are looking to start using the software to develop web applications with PHP and MySQL, then it is important that you have a database connection in place.

If you are new to setting up a PHP/MySQL server, then have a look at my tutorial here.

Creating the Database

Fire up your favaourite browser and point the URL to http://localhost/phpmyadmin or wherever phpMyAdmin is setup on your server. Right off the bat, you are presented with an interface where on the left side, you will have a list of databases already created. On the right, you will have several items being displayed such as the stats on your mySQL server, the ability to create a new database, importing and exporting, theme change etc...

Since we have the Create new database option already available for us, this saves us a lot of digging around. So in the box under the Create new database header, type in the name of your new database and click on the Create button.

If successful, the page will reload and show that the database creation has been successful.

You can now close the phpMyAdmin Interface.

Creating the Database Connection

Fire up Dreamweaver. Open up your site (learn how to create one here). Create a new PHP file and call it say test.php. If the Databases panel is not enabled, click on click on Window > Databases.

Once the Databases panel is up, create a Database connection by clicking the "+" under Databases, and selecting "MySQL Connection".

Fill in all the fields in the MySQL Connection box.

Connection name: Can be any descriptive name
MySQL server: localhost (or server you are using)
User name: your database username
password: your database password
database: your database name

If you wish to test the connection, click on "Test". Otherwise, after filling in all the fields, click on "Ok".

3D Preloaders

2009-02-05 10:46:20

If you are looking for a decent preloader website and are fed up of using the generator at http://www.ajaxload.info, you will want to try the preloaders at http://preloaders.net.

With an array of controls available, you can easily customise the look of your preloaders. The unique aspect of this site is that you can now generate 3D preloaders which should allow you to add that little bit of extra to your web applications.

Above: Preloader options available

Above: Available 3D Preloaders

Yet Another Re-Design

2009-02-04 17:49:58

It seems to me that all I seem to be doing these days is just re-designing my website instead of adding some content. I still have a couple of tutorial series to finish writing and I am nowhere near actually starting on any of them.

Anyway where are my manners!? First of all, Happy New Year to you all... I trust you all enjoyed your holidays.

Back to the subject at hand.... ah yes, Grafik Kaos has undergone another design change. Only implemented my last one in August but I promise, this will be the last design change I will be making in a good while. All that CSS workout has really done my head in. There are still a few things that I need to add and change on this design, so we shall call it a work in progress.

About some of the changes. Following the advice of a good friend, I have reduced the usage of Spry to cut down on the number of HTTP requests. On top of that, considering that my stats showed that Grafik Kaos was visited through mobile devices, I thought I'd make it easier for users to actually get to the content they need to get to. Not all mobile browers work effectively with Spry. Secondly, I actually thought I'd try my hand at actually using CSS to slice my images. The main navigation as well as several headers were there result of using CSS to slice the images (i.e. image sprites). This took me a good bit to get used to and to understand properly. But now that I have done it, there won't be any going back to the old ways of doing things and that was exporting every image individually. I am done with that!!

As a New Year's resolution, I have promised myself to finish up the articles I should have finished a long time ago. I have had a few emails regarding them and I promise they will be finished and put up in the next few weeks.

Feel free to leave me comments about my new design and layout, bearing in mind that this is still an ongoing design work.

Quick Update

2008-09-30 11:37:49

I would like to apologise to those of you have been waiting for me to upload the second part of my CMS tutorial. All 3 of my hard drives are currently failing me and I am in the process of having them replaced. I hope to have the situation resolved as soon as possible.

@Web Final Beta Released

2008-09-10 10:33:00

The third and final beta of Digia @Web contains some new functionality and fixes. Improvements have been done based on user feedback and findings in our own testing.

Key improvements in the third beta:

- Accelerated panning
- Progress indicator
- Addressbar is shown during the page loading
- Scrolling with wheel keeps horizontal position
- Select URL using double tap
- Audio plugin for WAV, MP3 and Midi
- Favicons for Bookmarks

Please note that due to adding favicon support all bookmarks are deleted (if installing on top of an earlier beta)!

Please continue sending feedback to support.product@digia.com

Creating An Advanced CMS - Part 1

2008-09-07 08:22:00

In this tutorial, we will be looking at creating an advanced CMS system using Dreamweaver CS3 and ADDT.� There are loads of CMS solutions available on the internet, but I have found it pretty interesting and challenging to say the least when building my own.� To make things a lot easier as well, I will use the current system that I have on my website as a basis for this tutorial.

What do we hope to achieve with this CMS?�

We want to be able to add categories for each article
We want to be able to add articles as well as edit or delete them
We want visitors to the blog to be able to comment
We want to be able to approve comments manually (reducing spam)

The CMS file structure

First of all, let's plan the CMS system.� Make sure you have configured your Dreamweaver site and that you also have a working database. connection. If you are looking to install your first PHP server, then I suggest you follow my tutorial here. The image below is the a typical structure that I use on all my websites.� It allows me to locate files pretty easily hence making work go a lot faster.

I have provided a zipped file containing the site structure here.� You can download it and unpack the ZIP file to your site root.� Now that we have created the files required for the CMS application, we now need to get onto the database.� For this tutorial, we will be using four tables.

Planning the database

The diagram below shows the database structure that is will be used.� An SQL file containing this structure can be found in the ZIP file that you downloaded earlier.

This is a breakdown of the columns used in this database.

blog_categories table:

id_top - the primary key for the categories (i.e. topics) table.� No two categories will have the same id
title_top - the title of the blog category
description_top - the description of the blog category
image_top - image attached to the category
seoname_top - search engine friendly name for the category

blog_posts table:

id_art - the primary key for the articles.� No two articles will have the same id
author_art - the id of the article author.
idtop_art - the id of the article category. Serves as a foreign key to the blog_categories table.
title_art - the title of the article
content_art - the content of the article is stored here
date_art - the date the article was created
status_art - determines whether the article is live or not.
modified_art - the date the article was modified or changed
comment_status_art - the commenting status for the article.� This allows you to determine whether the article is open for everyone to comment on, registered members to comment on or closed.
name_art - search engine friendly title for the article
read_count_art - the number of times the article has been read

blog_comments table:

id_com - the primary key for the comments.� No two comments will have the same id
idart_com - the foreign key to the article id
text_com - comment posted for the article
date_com - the date the comment was posted
poster_name - the comment poster's name
poster_email - the comment poster's email address
poster_url - the comment poster's web address
poster_ip - the comment poster's ip address

users table:

id_usr - the primary key for the user.� No two users will have the same id.
name_usr - the user's username
email_usr - the user's email address
password_usr - the user's password for logging
registrationdate_usr - the date the user registered on the site
active_usr - the state of the user's account; 1 for active or 0 for inactive
level_usr - determine the user's current level on the site; admin or member
FirstName_usr - the user's first name
Lastname_usr - the user's last name
displayName_usr - the user's display name on the comments

To login into the admin section of the site, use the following details:

username: admin
password: password

Open the main index.php page and create a new connection named gktut_CONN_CMS and configure it to connect to your newly created database:

Configuring the Login Settings

We now need to create a login page for the CMS.� We first have to configure the login settings, and the apply the Login Form Wizard on the login page in the site root.� To do this, start off by clicking on the Control Panel button the Developer Toolbox bar.

This will bring up the Control Panel interface.� From here, click on the Login Settings button.

This will bring up the Option tab.

To start off, we will encrypt the password stored in our database.� So make sure that the Enccrypt password � is checked.� Since we will also be getting users to register on the site, thus having different login levels, make sure that Username, password and access level is selected.� We will leave the Auto login validity at its default value which is currently 30 days.� Click on the Database tab.

To configure this dialog box options, follow the next steps:

In the Connection drop-down menu, select the database connection used for your site (gktut_CONN_CMS). �
In the Table drop-down menu, select the database table that stores user details (users).
In the Primary key drop-down menu, select the field that stores the primary key for the selected table (id_usr).
In the Username drop-down menu, select the table field that stores the user names (username_usr). In the Password drop-down menu, select the table field that stores the user passwords (password_usr).
In the E-mail drop-down menu, select the table field that stores the user's e-mail address (email_usr).
In the Active drop-down menu, select the field that stores the activation state for the user (active_usr).
In the Level drop-down menu, select the table field that stores the user level (level_usr). � Please bear in mind that this is not numeric.
In the Random Key drop-down menu, select the table field that stores the randomly generated key used when activating the account (VerificationKey).
When done with the database settings, move on to the Session tab.

Here we will add what extra session values we want stored.� Click on the (+) and from the dialog box that appears, select FirstName_usr, LastName_usr and displayName_usr.� Click on the OK button to close the dialog box.� The new session riables will be created as shown in the image above.� Click on the User Levels tab to continue configuring the login settings.

To configure this user interface, follow the next steps:

In the login page text-box enter the page that allows the user to login (login.php).
In the Default redirect on success text-box enter the page that will be opened if the login operation succeeded (index.php).
In the Default redirect on fail text-box enter the page to be opened when a user tries to access a page for which he/she does not have the needed credentials (login.php).
In the User levels grid, set the user access levels as shown in the image above.
Click OK when you are done configuring the dialog box.

Creating the Login page

To create the login page, open the login.php file. � From the Develop Toolbox bar, click on the Login Wizard button.

This will start the Login Wizard.

The database setting are automatically configure for you.� Click on the Next button to move to step 2.

Click on the Remember me checkbox to enable automatic login and on the Forgot password checkbox to allow ADDT to create forgot password page which will allow users to request their password in case they forget it.� Click on Finish to close the Login Wizard and to generate the form.� The image below shows the generated user login form.

Creating the user registration form

Seeing as our blog will be given users the option to register, we need to create a registration form.� Create a new file called register.php as save it at the site root.

From the Developer Toolbox toolbar, click on the User Registration Wizard.

This will launch the user Registration Wizard.

In Step 1, the database details are automatically selected and set up.� So nothing needs to be done here.� Click on the Next button to move to Step 2.

In Step 2, all the fields except for id_usr will be listed here.� Name_usr, email_usr and password_usr will be setup properly for you, (i.e name_usr and email_usr will be assigned text fields and password_usr will be assigned a password field).� Set the Display as value for the registrationdate_usr as Text and then set the Default value to {NOW_DT}.� Do the same for active_usr but set the Default value � to 0.� Delete all the other fields listed as they will not be needed.� Click on the Next button to move to Step 3.

In Step 3 make sure that all the value are required for validation.� Click on the Next button to move to Step 4.

In Step 4, click on Send welcome email and Use account activation so that upon registration, a new user will received an email welcoming him to the CMS and another email prompting him to activate his account.� Click on the Finish button to generate the Registration form show below.

Finally, we don't really want to display the Registration date and account status on the registration form, so select the two rows holding the information and delete them.� The final registration form should look like the image below.

This concludes Part 1 of this tutorial.� In Part 2, we will look at trying to add categories, articles to our blog as well as managing them.

Google Chrome Beta Available for Download

2008-09-02 23:15:00

Google Chrome is now available for download from here.

Google Chrome is an open source web browser developed by Google. It builds on components from other open source software, including WebKit and Mozilla, and is intended to provide greater stability, speed and security than existing browsers, while presenting a simple and efficient user interface. The name is derived from the graphical user interface frame, or "chrome", of web browsers. The open source project behind Google Chrome is known as Chromium.

The browser looks light in design and site loading speeds are not bad. If you are going to test the browser out and you have Firefox running, Google Chrome won't be able to import your bookmarks. So make sure you save any work you are doing before letting Google Chrome import your bookmarks from Firefox.

Oops! Looks like my first crash while trying to access the browser options. Actually I was able to repeat this quite a few times! Ermmm Google, please take note of this! (Running Windows Xp 64-Bit Professional)

Anyway, aside from this small crashing issue and the pretty simplistic looks of Google's new browser, I think this should come in handy when developing websites. It even has a built-in Task Manager that informs you of how much memory the browser is using. Only downside to me using this browser as my main one to surf the internet is the lack of add-ons. Firefox has become an important part of my works and the plugins available for the browser are helping me organise my work a lot easier.

With it still being in beta stage, there might still be a few improvements along the way.

Anyway, you download and see what you think for yourself. I am going stick with Firefox for now...

More time...

2008-08-29 00:00:00

Now that I have more time for myself, I can finally get round to adding the features that I have been dying to add to my website. First of all, I hope you all like this new design. I have ben awfully busy the last few weeks doing various jobs here and there. Starting designing this about three days ago. It does look a bit similar to the previous that I had in certain ways, but I am definitely planning on polishing things up this time around.

Had a little play customizing the looks of the Spry Tabbed Panel, so far I am pretty happy with it. I have a few tutorials planned over the next few weeks. So what out for them.