One of my favorite features of a content management system is a drag to sort list. Something similar can be seen in systems like the widgets module in WordPress.

Before I realized it was there, a few clients have asked me to integrate these lists so they can better manage items for their website.

This is a relatively new dynamic web application feature that some sites may be using. I will show you how to implement one of these using simple techniques and tools.

First you will need a Javascript Library called Scriptaculous. Download it and add to a directory where your main PHP files for this app will be.

You will need access to a database. I use MySQL, but if you are experienced with others, you may be able to adjust the codes accordingly.

The first PHP file you will create is a class file. In it you will add a database connection function and a main query function. You will also need to create 6 other core functions to run the application.

Here is an example class file you can use. This can be changed accordingly to match your db settings. You will also need to create a database table with 4 fields. These are id, title, link and sort order.

Here’s a pic for reference.

Now that you have the basic core files setup, it’s time to do some interface scripting.

The next set of files you will create will be what the admin will see. These will be 5 files, one to display the main list, one to add new items, another to delete items, one to edit an item and finally a file to sort the items. Now I can’t just say go create…I have to give you some kind of reference.

Grab the files here.

Implement and start testing. You should be able to sort, reload and see your changes in effect. Because whatever you see in the admin, that’s the order it will be displayed on the front.

You will also have an ability to add, edit or delete a record. You can sort up or down. But beware, I’ve had problems when I displayed the list inline. The sort function still works but in an awkward way and not as smoothly.

Once you are satisfied that the application does what it needs to on the backend. You can now go ahead and display the list on the front. Style however you want. Changes are seen when you load the page and not live while looking at the page. So it won’t freak your visitors out, because they don’t see anything moving around while browsing. Here is an example file.

Let me know if you enjoyed this tutorial. And if and how you use this sweet little app.

Note: by the way you have to change the extension of the example files to php.

How to Create a Draggable Sort List is a post from: WebDevStar.com | © WebDevStar.com

I use all but one of the tools in this list for web application development. They help streamline most of my work as a web developer. This is PC based…so I’m not sure which will work on the Mac.

1. jEdit
2. Web Developer Tool Bar for FireFox
3. FileZilla
4. MySQL
5. Gimp
6. Codeignitor
7. Project Pier
8. Subversion
9. Open office
10. IE Tester

I’ve never really used subversion. I will try to explore it in the future.

I’ve built applications with Codignitor and it’s really easy to work with. The Web Developers tools bar is practically an extension of me, and the same for jEdit and FileZilla.

Use any of these tools? Please tell us about it.

Top 10 Free Web Application Development Tools is a post from: WebDevStar.com | © WebDevStar.com

What is standards compliance?

Standards Compliance refers to a set of best practice principles that can govern any given industry including web development. There are a few organizations that regulate these principles, most notably the World Wide Web Consortium. Web Browsers and other web interfaces are often developed to comply with the standards the W3C puts forth. If a website is not validated as complying with these principles, then there might be errors in the final output.

How important is it?

Being standard compliant is not the end all be all of web development. I have websites that are validated and a few that are not. In many cases, a site validates 100%, but other dynamic elements might bring that down a few points. If your site validates as Standard Compliant, some directories might list you just for that reason. In fact it can improve your sites overall ranking on many search engines. This also improves how many devices can actually interpret your site accurately, which is directly linked to the amount of users that will find you.

Shortcuts and Tips

Achieving full or almost full compliance is not that difficult. Many software and applications used for web development can help find errors in a site. For example; Dreamweaver has an option that allows this. The web development extension for Firefox can help you here also. And the number one place to go is validator.w3.org.

W3.org also offers a corrected, fully compliant version of any unvalidated pages.

Conclusion

Standard compliance is very useful as a search engine optimization method, and insuring proper compatibility with various devices. Although some might overlook this for various reasons, the benefits are clear. It’s a good idea to check your code for errors at various intervals of production, avoiding simple mistakes. But generally, validation is done as part of the final edit and review process.

What is Standards Compliance? is a post from: WebDevStar.com | © WebDevStar.com

In this beginners guide to PHP, I will introduce you to one of the best languages to build websites with. I’ve used it for several years with much success. I encourage you to read on, as this is not your typical technical tutorial.

PHP is a server side scripting language widely used in website development today. PHP stands for PHP: Hypertext Preprocessor. It is an Open Source Language that provides a way to build dynamic web applications.

Unlike HTML, and JavaScript, PHP is not visible in a site’s browser source code. It is known to have excellent security, scalability, and provides a powerful set of tools for web programmers.

It’s an alternative to ASP, JavaScript, Perl, C and other languages. The environment I usually work in is called LAMP. This means Linux, Apache, MySQL, and PHP. The first being the Operating System, the second being the Web Server, the third is the Database Server and the final is the Scripting Language.

Although it can be used on Windows Systems, and flexible enough for use in a wide variety of situations, this is the best combination to work with. PHP is also an Object Oriented Programming Language. For me, perhaps because of how my mind is wired, OOP is fantastic and smooth. It’s like legos.

Most web hosting companies provide PHP pre-installed and configured. So developers can start working right away. With that said, even the layman can start using it after hosting is setup.

Instead of naming your pages with an extension of .htm or .html, simply use .php. The document will still display the same way as if written only HTML.

Now, with your file types as .php, it opens up a whole new world, full of useful tools to build even better, more interactive web applications.

But don’t take this as an abandonment of other languages. HTML is still your best friend. It is still the framework of your visible website. PHP does a number of things to improve how we can use HTML. It provides enhanced options that compliment the HTML. It can spit out any of the HTML, or even JavaScript. It helps with file and image handling. Takes inputs and works hand in hand with the database server.

Code Demo

As a simple demo, and to quench the thirst of those who want to get into code; I will show you how to display a simple message with PHP.

Anywhere in a PHP document, PHP code can be placed. All PHP code is embodied by opening tags and closing tags. Just like in HTML. These tags are <?php and ?>. They are opening and closing tags respectively. In many cases you can just use <? and ?>.

To display some information to the screen, a simple function called echo or print can be used. To use this function, simply call it with a line like this:

<?php echo “Hello World”; ?>

Hello World is where your custom information would be. This will display “Hello World” where ever you placed it (without the quotations of course). A more simplified version of the line above is <?=’Hello World’?>. As you can see, this saves a little bit more space and is easier to deploy and manage.

Another simple demonstration, if that was just a teaser; PHP allows variables on several levels. I will just discuss a variable across any scope. A variable is like the shell of a peanut. It holds content.

In the Hello World example above, I showed how to print a line of text to the screen. This line of text is called a string. We can set the content of a variable to be the string. In other words, I can remove the nut from the shell and replace with something else. The variable is like the shell, and only the variable is handled after the content is set.

Also, we can also name our variable. In PHP a variable is named by using “$” then any random selection, starting with a lower case letter only and upper or lower case letters and numbers there after.

A variable can be declared, or made to exist by simply writing it out.

For example: <? $firstname; ?>.

This variable is not set with any content and would output nothing to the screen if used in our above example. We can set its content by writing <? $firstname = ‘Hello World”; ?>. Then somewhere else we can display our message like this; <?= $firstname ?>. Again very easy to deploy, the content can be as long as needed, be set in a more organized way, that does not upset the flow of your code.

It doesn’t matter if a variable is set somewhere else in the document, as long as it’s physically written above the point where it must be displayed. With loops (which I will do a separate article on) variables can be set after each loop. And it is OK to open and close the PHP tags and still transfer the information throughout the document.

Conclusion

This is just an introduction to PHP and how useful it can be. The point of variables is to hold and transfer information. Variables can be set with other variables, not just strings. In Dynamic web programming it is often necessary to use PHP to collect information from users, transfer and process that information for specific uses. Make it your friend.

PHP Tutorial for Beginners is a post from: WebDevStar.com | © WebDevStar.com

How is Dynamic Programming different than normal web coding?

Unlike plain HTML and CSS, dynamic web pages are created using web programming languages such as JavaScript and PHP. They are often database driven and highly interactive. With dynamic programming, allot of information parsing can be done before, and after the user initiates an action on the page. Often without them noticing.

With dynamic websites, you can gather more information from users, transfer more information to users and have a rapid, interactive and intelligent product. This will increase page views, increase sales, and overall provide a more robust platform for your business.

Is is this easy or not?

This can be easy in some cases and absolutely painful in others. It all depends on the type of application you need and eventually end up using. Some sites now use free pre-built applications with more options than is usually needed. In most cases that can be very easy, but in others, there can be sudden upsets, setbacks and even disasters. A custom site that’s built to be moderately or fully dynamic by you, another developer or a team of programmers might be tough to manage by some, but your site will be far easier to manage and update down the line.

How can I start building dynamic sites and applications

In order to successfully build a dynamic website, you must either be a top notch Web Programmer, hire one, or hire a team. A strong understanding of websites built on PHP or other dynamic web language is useful. Like any other business, you must have models for every aspect of your business. A model can be a few lines describing the goals or it can be a full blown flow chart.

A dynamic site will allow greater leverage of the web technologies available, and help you harness the power of the Internet. If built just right, they can be very powerful and successful.

Dynamic Programming Tutorial (An Introduction) is a post from: WebDevStar.com | © WebDevStar.com