Grapii » Software Development

How to build a simple search filter with jQuery

grapii — Tue, 24 Aug 2010 16:12:00 +0000

There are occasions when developing a wed application where you’d like to give users the ability to search or filter the information presented. For example, a web application may feature a page listing your DVD collection, and you want the users to find the movie they’re looking for quickly and easily. This article shows you how little code is need to achieve this functionality using jQuery.

jQuery

First we need to download the jQuery library file and reference it in our HTML page, alternatively you can reference copies of jQuery hosted existing networks.

Either way, we need to reference it in our HTML:

HTML

The basic HTML you’ll need for this is simple. Just a header and an unordered list. Both elements have id’s so we can easily and uniquely identify them:

DVD Collection


  Batman
  Ice Age
  Star Trek (2009)
  Tremors
  …

With the HTML ready, here is the functionality we need to implement:

Add an input field to the header
Set up events to check when the user is typing in the input field
Check the value of the input, and compare it to the movies in the list
Hide the non-matching movies, while showing the matching ones

Step 1: Add an input field to the header

We’ll start with a simple function, call it listFilter:

function listFilter(header, list) {
  …
}

As you can see the function takes two arguments. We’ll use jQuery to select the header and list and give them as arguments to our function. Next we need to create a form with an input field, and append it to the header:

function listFilter(header, list) {
  // create the filter form and append it to the header element
  var form = $("").attr({"class":"filterform","action":"#"}),
      input = $("").attr({"class":"filterinput","type":"text"});

  $(form).append(input).appendTo(header);
  …
}

Using $(“form”) we can create new elements, and by inserting the input field into the form using append(). Use the appendTo() function to add the form and input field to the header tag, and we’ve easily added the form to the page. The classes have also been defined so they can be styled easily in CSS.

Step 2: Set up events

To check for text entered into the input field, we can use the Change event. This is triggered every time the value of the input has changed, but only when you exit the input field.

However, this doesn’t work with a letter-for-letter filter. For that, we need to watch the Keyup event as well. We use Keyup instead of Keydown because it is triggered after you release the key, and so the value of the input field includes the just-typed letter. With Keydown, the event is triggered before the letter is added-as your pressing the key-and therefore JavaScript cannot ascertain the value.

As we’ll be using two events, Change and Keyup, there is no need to double the work, we simply call the Change event when we receive a Keyup event:

Function ListFilter(Header, List) {
  …
  $(Input).Change( Function () {
    …
  }).Keyup( Function () {
    // call the above change event after every letter typed
    $(This).Change();
  });
  …
}

Step 3: Compare the values

jQuery has a way to check for matched elements easily: the :contains() selector. Using this, we can very easily select all elements containing the text between the parenthesis:

function listFilter(header, list) {
  …
  $(input).change( function () {
    var filter = $(this).val();
    // get the value of the input field so we can filter the results

    $(list).find("a:contains(" + filter + ")").parent().slideDown();
  });
  …
}

The code above works like this: within the list, which is the

elements that contain the value in the input field. It then selects the parents of those

elements, the

’s. Those

’s are then displayed.

Step 4: Hide the non-matching elements

However, since we filter the list, we need to also hide all the

’s that do not contain the value in the input field. For this jQuery offers the :not() selector, and we can wrap that around the :contains() selector like this:
```
function listFilter(header, list) {
  …
  $(input).change( function () {
    var filter = $(this).val();
    // get the value of the input field so we can filter the results

    $(list).find("a:not(:contains(" + filter + "))").parent().slideUp();
    $(list).find("a:contains(" + filter + ")").parent().slideDown();
  });
  …
}
```
Now, with each keystroke, we check the list for matching elements and hide the ones that don’t match.

So far so good, but what happens when you clear the value in the input field? Then $(this).val(); will be empty, and nothing matches with empty, so all the list items will be hidden. Luckily this can be remedied quite easily by checking if $(this).val(); has any value, and if it doesn’t then show everything.
```
function listFilter(header, list) {
  …
  $(input).change( function () {
    var filter = $(this).val();
    if (filter) {
      $(list).find("a:not(:contains(" + filter + "))").parent().slideUp();
      $(list).find("a:contains(" + filter + ")").parent().slideDown();
    } else {
      $(list).find("li").slideDown();
    }
  });
  …
}
```
Typing in the input field now filters down the list, and clearing the field shows the entire-non filtered-list.

You would’ve thought that’s all we need, however :contains() is case-sensitive, so if we filter with the word “madagascar”, we won’t find Madagascar.

jQuery allows you to add your own selector expressions, and we can use that to build our own case-insensitive contains filter:
```
jQuery.expr[':'].Contains = function(a,i,m){
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
```
This adds a :Contains() (note the uppercase) option to our selectors that has the same functionality as :contains(), but it first converts the text value to uppercase and then does the comparison. Once this is added to the JavaScript, all we need to do is replace the :contains() with :Contains() within our listFilter function.

Demo

I’ve created two simple examples, the first ones uses the unordered list as described in this tutorial, and the second has the same functionality but uses the
elements instead.

Simple jQuery filter – unordered list

Simple jQuery filter – div tags

Complete Code

And finally the entire code used in this tutorial:

DVD Collection

Batman

Ice Age

Star Trek (2009)

Tremors

Model-View-Controller Design Pattern Part 2

grapii — Fri, 11 Dec 2009 00:44:00 +0000

In Part 1 of the series I explained the concept of the Model-View-Controller (MVC) pattern. This final part shows you how to create an ASP.NET MVC application in Visual Studio.

In this walkthrough, you will create and run the sample MVC application. Then you will customize the application by adding a controller and a view.

Prerequisites

In order to complete this walkthrough, you will need:

Microsoft Visual Studio 2008 Service Pack 1.
ASP.NET MVC 1.0.

You can download and install the ASP.NET MVC framework in the following ways:

Install the framework using the Microsoft Web Platform Installer. You can download the installer from the installation page on the Microsoft Web gallery site.
Download the framework from the ASP.NET MVC 1.0 page on the Microsoft Download Center.

Creating a New MVC Project

On the File menu, click New Project.
The New Project dialog box is displayed.
In the upper-right corner, make sure that .NET Framework 3.5 is selected.
Under Project types, expand Visual Basic and then click Web.
Under Visual Studio installed templates, select ASP.NET MVC Web Application.
In the Name box, enter MvcBasicWalkthrough.
In the Location box, enter a name for the project folder.
If you want the name of the solution to differ from the project name, enter a name in the Solution Name box.
Select Create directory for solution.
Click OK.
The Create Unit Test Project dialog box is displayed.
Select No, do not create a unit test project.
Click OK.
The new MVC application project and a test project are generated.

Examining the MVC Project

The following illustration shows the folder structure of a newly created MVC solution.

The folder structure of an MVC project differs from that of an ASP.NET Web site project. The MVC project contains the following folders:

Content, which is for content support files. This folder contains the cascading style sheet (.css file) for the application.
Controllers, which is for controller files. This folder contains the application’s sample controllers, which are named AccountController and HomeController. The AccountController class contains login logic for the application. The HomeController class contains logic that is called by default when the application starts.
Models, which is for data-model files such as LINQ-to-SQL .dbml files or data-entity files.
Scripts, which is for script files, such as those that support ASP.NET AJAX and jQuery.
Views, which is for view page files. This folder contains three subfolders: Account, Home, and Shared. The Account folder contains views that are used as UI for logging in and changing passwords. The Home folder contains an Index view (the default starting page for the application) and an About page view. The Shared folder contains the master-page view for the application.

The newly generated MVC project is a complete application that you can compile and run without change. The following illustration shows what the application looks like when it runs in a browser.The unit-test project is also ready to compile and run. For this walkthrough, you will add a controller with an action method and a view.

Adding a Controller

You will now add a controller that contains logic for downloading city maps from the Microsoft Virtual Earth Web service.

In Solution Explorer, right-click the Controllers folder, click Add, and then click Controller.
The Add Controller dialog box is displayed.
In the Name box, type MapsController.
The ASP.NET MVC framework requires controller names to end with "Controller", such as HomeController, GameController, or MapsController.
Clear the Add action methods for Create, Update, and Details scenarios check box.
Click Add.
Visual Studio adds the MapsController class to the project and opens it in the editor.

Adding Code to the Action Method

You will now add code to the MapsController class for the ViewMaps action method in order to render the Maps view.

Open the MapsController class and replace the ViewMaps action-method stub with the following code in order to render the Maps view.
```
Function ViewMaps() As ActionResult
    Return View()
End Function
```
Save and close the file.

Adding a View

Next, you will add a Maps view. To keep the views organized, you will first add a Maps folder under the Views folder.

Open the MapsController class, right-click inside the ViewMaps action method, and then click Add View.
The Add View dialog box is displayed.
In the View name box, enter ViewMaps.aspx.
Clear the Create a partial view (.ascx) check box and the Create a strongly-typed view check box.
Select the Select master page check box and set the master page to ~/Views/Shared/Site.Master.
Set ContentPlaceHolder ID to "MainContent".
Click Add.
The new view is added to the project in the Maps folder

Adding Content to the View

Next, you will add content to the new view.

Open ViewMaps.aspx and add the following content inside the Content element:

My City Maps
Select map:

This markup defines a drop-down list for selecting a map and the JavaScript logic for retrieving the selected map from the Microsoft Virtual Earth Web service.

Save and close the file.

Adding a Tab to the Master-Page Menu

You will now add an item to the master-page menu that calls the ViewMaps action method.

In the Shared folder, open the Site.master file and locate the unordered list (ul element) in the div element whose ID is "menucontainer".
Add the following code to the list between the Index and About Us tabs:
```
<%= Html.ActionLink("My City Maps", "ViewMaps", "Maps")%>
```
The ActionLink method is a helper method that links to an action method. It takes the following parameters: the text for the link, the name of the action method, and the name of the controller.
Save and close the file.

Testing the MVC Application

You can now test the application.

In Solution Explorer, select the walkthrough project and press CTRL+F5 to run the application.
The Index.aspx page is displayed, which includes the tabs that are defined in the master page.
Click the My City Maps tab.
The My City Maps page is displayed. Select any map to see it displayed.

Next Steps

This walkthrough gives you a first look at creating an MVC application and working with unit tests in ASP.NET MVC. From here, you might want to learn more about the ASP.NET MVC framework. The following list suggests topics for additional learning.

For more information about MVC controllers

see Controllers and Action Methods in MVC Applications.
For more information about MVC views

see Views and UI Rendering in MVC Applications.
For more information about MVC models

see Models and Model Binders in MVC Applications.

Model-View-Controller Design Pattern Part 1

grapii — Mon, 16 Nov 2009 01:09:00 +0000

Part one of a two-part post describing the Model-View-Controller design pattern in context of web applications.

Context

The purpose of many computer systems is to retrieve data from a data store and display it for the user. After the user changes the data, the system stores the updates in the data store. Because the key flow of information is between the data store and the user interface, you might be inclined to tie these two pieces together to reduce the amount of coding and to improve application performance. However, this seemingly natural approach has some significant problems. One problem is that the user interface tends to change much more frequently than the data storage system. Another problem with coupling the data and user interface pieces is that business applications tend to incorporate business logic that goes far beyond data transmission.

Problem

How do you modularize the user interface functionality of a Web application so that you can easily modify the individual parts?

Forces

The following forces act on a system within this context and must be reconciled as you consider a solution to the problem:

User interface logic tends to change more frequently than business logic, especially in Web-based applications. For example, new user interface pages may be added, or existing page layouts may be shuffled around. After all, one of the advantages of a Web-based thin-client application is the fact that you can change the user interface at any time without having to redistribute the application. If presentation code and business logic are combined in a single object, you have to modify an object containing business logic every time you change the user interface. This is likely to introduce errors and require the retesting of all business logic after every minimal user interface change.
In some cases, the application displays the same data in different ways. For example, when an analyst prefers a spreadsheet view of data whereas management prefers a pie chart of the same data. In some rich-client user interfaces, multiple views of the same data are shown at the same time. If the user changes data in one view, the system must update all other views of the data automatically.
Designing visually appealing and efficient HTML pages generally requires a different skill set than does developing complex business logic. Rarely does a person have both skill sets. Therefore, it is desirable to separate the development effort of these two parts.
User interface activity generally consists of two parts: presentation and update. The presentation part retrieves data from a data source and formats the data for display. When the user performs an action based on the data, the update part passes control back to the business logic to update the data.
In Web applications, a single page request combines the processing of the action associated with the link that the user selected with the rendering of the target page. In many cases, the target page may not be directly related to the action. For example, imagine a simple Web application that shows a list of items. The user returns to the main list page after either adding an item to the list or deleting an item from the list. Therefore, the application must render the same page (the list) after executing two quite different commands (adding or deleting)-all within the same HTTP request.
User interface code tends to be more device-dependent than business logic. If you want to migrate the application from a browser-based application to support personal digital assistants (PDAs) or Web-enabled cell phones, you must replace much of the user interface code, whereas the business logic may be unaffected. A clean separation of these two parts accelerates the migration and minimizes the risk of introducing errors into the business logic.

Solution

The Model-View-Controller (MVC) pattern separates the modelling of the domain, the presentation, and the actions based on user input into three separate classes [Burbeck92]:

Model. The model manages the behaviour and data of the application domain, responds to requests for information about its state (usually from the view), and responds to instructions to change state (usually from the controller).
View. The view manages the display of information.
Controller. The controller interprets the mouse and keyboard inputs from the user, informing the model and/or the view to change as appropriate.

Figure 1 depicts the structural relationship between the three objects.

Figure 1: MVC class structure

It is important to note that both the view and the controller depend on the model. However, the model depends on neither the view nor the controller. This is one the key benefits of the separation. This separation allows the model to be built and tested independent of the visual presentation. The separation between view and controller is secondary in many rich-client applications, and, in fact, many user interface frameworks implement the roles as one object. In Web applications, on the other hand, the separation between view (the browser) and controller (the server-side components handling the HTTP request) is very well defined.

Model-View-Controller is a fundamental design pattern for the separation of user interface logic from business logic. Unfortunately, the popularity of the pattern has resulted in a number of faulty descriptions. In particular, the term “controller” has been used to mean different things in different contexts. Fortunately, the advent of Web applications has helped resolve some of the ambiguity because the separation between the view and the controller is so apparent.

Variations

In Application Programming in Smalltalk-80: How to use Model-View-Controller (MVC) [Burbeck92], Steve Burbeck describes two variations of MVC: a passive model and an active model.

The passive model is employed when one controller manipulates the model exclusively. The controller modifies the model and then informs the view that the model has changed and should be refreshed (see Figure 2). The model in this scenario is completely independent of the view and the controller, which means that there is no means for the model to report changes in its state. The HTTP protocol is an example of this. There is no simple way in the browser to get asynchronous updates from the server. The browser displays the view and responds to user input, but it does not detect changes in the data on the server. Only when the user explicitly requests a refresh is the server interrogated for changes.

Figure 2: Behaviour of the passive model

The active model is used when the model changes state without the controller’s involvement. This can happen when other sources are changing the data and the changes must be reflected in the views. Consider a stock-ticker display. You receive stock data from an external source and want to update the views (for example, a ticker band and an alert window) when the stock data changes. Because only the model detects changes to its internal state when they occur, the model must notify the views to refresh the display.

However, one of the motivations of using the MVC pattern is to make the model independent from of the views. If the model had to notify the views of changes, you would reintroduce the dependency you were looking to avoid. Fortunately, the Observer pattern [Gamma95] provides a mechanism to alert other objects of state changes without introducing dependencies on them. The individual views implement the Observer interface and register with the model. The model tracks the list of all observers that subscribe to changes. When a model changes, the model iterates through all registered observers and notifies them of the change. This approach is often called “publish-subscribe.” The model never requires specific information about any views. In fact, in scenarios where the controller needs to be informed of model changes (for example, to enable or disable menu options), all the controller has to do is implement the Observer interface and subscribe to the model changes. In situations where there are many views, it makes sense to define multiple subjects, each of which describes a specific type of model change. Each view can then subscribe only to types of changes that are relevant to the view.

Figure 3 shows the structure of the active MVC using Observer and how the observer isolates the model from referencing views directly.

Figure 3: Using Observer to decouple the model from the view in the active model

Figure 4 illustrates how the Observer notifies the views when the model changes. Unfortunately, there is no good way to demonstrate the separation of model and view in a Unified Modelling Language (UML) sequence diagram, because the diagram represents instances of objects rather than classes and interfaces.

Figure 4: Behaviour of the active model

Resulting Context

Architecting the presentation layer around the MVC pattern results in the following benefits and liabilities:

Benefits

Supports multiple views. Because the view is separated from the model and there is no direct dependency from the model to the view, the user interface can display multiple views of the same data at the same time. For example, multiple pages in a Web application may use the same model objects. Another example is a Web application that allows the user to change the appearance of the pages. These pages display the same data from the shared model, but show it in a different way.
Accommodates change. User interface requirements tend to change more rapidly than business rules. Users may prefer different colours, fonts, screen layouts, and levels of support for new devices such as cell phones or PDAs. Because the model does not depend on the views, adding new types of views to the system generally does not affect the model. As a result, the scope of change is confined to the view.

Liabilities

Complexity. The MVC pattern introduces new levels of indirection and therefore increases the complexity of the solution slightly. It also increases the event-driven nature of the user-interface code, which can become more difficult to debug.
Cost of frequent updates. Decoupling the model from the view does not mean that developers of the model can ignore the nature of the views. For example, if the model undergoes frequent changes, it could flood the views with update requests. Some views, such as graphical displays, may take some time to render. As a result, the view may fall behind update requests. Therefore, it is important to keep the view in mind when coding the model. For example, the model could batch multiple updates into a single notification to the view.

Example

Part two of this post will describe implementing the MVC model in ASP.NET.

Acknowledgements:
Model-View-Controller began as a framework developed by Trygve Reenskaug for the Smalltalk platform in the late 1970s [Fowler03]. The version you have just read references the following works:
[Burbeck92] Burbeck, Steve. “Application Programming in Smalltalk-80: How to use Model-View-Controller (MVC).“University of Illinois in Urbana-Champaign (UIUC) Smalltalk Archive.
[Fowler03] Fowler, Martin. Patterns of Enterprise Application Architecture. Addison-Wesley, 2003.
[Gamma95] Gamma, Helm, Johnson, and Vlissides. Design Patterns: Elements of Reusable Object-Oriented Software. Addison-Wesley, 1995.

Change WordPress Meta Widget

grapii — Fri, 05 Jun 2009 00:53:09 +0000

Want to change your meta links contained in a WordPress sidebar widget?

[2.9] If you are trying to edit the meta data that appears in the sidebar of your Wordpress blog, such as removing the RSS links, find this code in /includes/default-widgets.php file and remove/comment the unwanted lines.

This is what the original class looks like:

class WP_Widget_Meta extends WP_Widget {

	function WP_Widget_Meta() {
		$widget_ops = array('classname' => 'widget_meta', 'description' => __( "Log in/out, admin, feed and WordPress links") );
		$this->WP_Widget('meta', __('Meta'), $widget_ops);
	}

	function widget( $args, $instance ) {
		extract($args);
		$title = apply_filters('widget_title', empty($instance['title']) ? __('Meta') : $instance['title']);

		echo $before_widget;
		if ( $title )
			echo $before_title . $title . $after_title;
?>
			
			
			
			RSS'); ?>
			RSS'); ?>
			WordPress.org
			
			

And this is my modified one:
class WP_Widget_Meta extends WP_Widget {

	function WP_Widget_Meta() {
		$widget_ops = array('classname' => 'widget_meta', 'description' => __( "Log in/out, admin, feed and WordPress links") );
		$this->WP_Widget('meta', __('Meta'), $widget_ops);
	}

	function widget( $args, $instance ) {
		extract($args);
		$title = apply_filters('widget_title', empty($instance['title']) ? __('Meta') : $instance['title']);

		echo $before_widget;
		if ( $title )
			echo $before_title . $title . $after_title;
?>
			
			
			
			
			

[Pre 2.9] If you are trying to edit the meta data that appears in the sidebar of your Wordpress blog, such as removing the RSS links, find this code in /includes/widget.php file and remove the unwanted lines.
This is what the original looks like:
/**
 * Display meta widget.
 *
 * Displays log in/out, RSS feed links, etc.
 *
 * @since 2.2.0
 *
 * @param array $args Widget arguments.
 */
function wp_widget_meta($args) {
	extract($args);
	$options = get_option('widget_meta');
	$title = empty($options['title']) ? __('Meta') : apply_filters('widget_title', $options['title']);
?>
		
			
			
			
			
			RSS'); ?>
			RSS'); ?>
			WordPress.org
			
			
		

And this is my modified one:
/**
 * Display meta widget.
 *
 * Displays log in/out, RSS feed links, etc.
 *
 * @since 2.2.0
 *
 * @param array $args Widget arguments.
 */
function wp_widget_meta($args) {
	extract($args);
	$options = get_option('widget_meta');
	$title = empty($options['title']) ? __('Meta') : apply_filters('widget_title', $options['title']);?>

Convert HTML

grapii — Tue, 12 May 2009 19:38:08 +0000

Some of my posts include snippets of code that help explain the process or describe what needs to be done. Most of the code is written in Visual Studio or Dreamweaver, and as such simply copying and pasting the code into the blog post doesn’t work.

Why? well it’s because the server thinks it’s code that needs to be compiled and rendered. Using the

tag, also doesn’t always work and switching between the Visual editor and the HTML editor can cause weird results. So in order to accomplish this task really easy, I’ve created Convert HTML. Convert HTML is a simple web page that allows you to convert code tags such as < and > into their character entities (< and >), which is then ignored by the server for compiling, but renders correctly on the browser.

Very simple to use, just got to this page and paste in your code including the < and >, then click on Convert. Your code should now be shown, where the special characters have been replaced by the character entities. Simply copy the new code, and paste it inside your

tags.

Here’s an example using Convert HTML


 Home
 
  
 
 Glossary

Flowplayer for WordPress

grapii — Tue, 05 May 2009 19:41:36 +0000

I was looking for a simple media player that could play videos that I had created at home. One of the great things about Magix Movie Edit Pro is that you can output your finished masterpiece in MP4 or FLV format. Which is great as it keeps the file size small and enables me to share my videos to family members across the world.

Problem was I just couldn’t find a simple plugin for WordPress. There are many out there, mostly for embedding videos from external locations such as YouTube or Google Video, but not easily from the local file server, you have to specify the full URL. Also, I didn’t want to keep remebering all the different parameters that needed to be set for each video, there may be months between video posts, no way I can remeber all the settings!

So, I decided to write my own simple WordPress plugin using Flowplayer. The plugin adds flowplayer to the WordPress blog, it comes pre-configured and is very very easy to use. All you need is the name of the video and it’s resolution (width and height).

The plugin comes with flowplayer version 3.1.0 which is able to play the following formats;

H.264
FLV
MP4

It is supported by the folowing browsers;

Internet Explorer 6.0+
Firefox FF 2+
Safari 2.0+
Opera 9.0+

The plugin has the following features;

Graphical add button (Visual Editor)
HTML add button (HTML Editor)
Very easy to use

Installation

Upload the wp-flowplayer directory to the /wp-content/plugins/ directory
Activate the plugin through the ‘Plugins’ menu in WordPress

Usage

Upload your video to /wp-content/videos/.

Create a new post/page and click the flow button (in either Visual editor or HTML editor) and replace the prefilled parameters with your video specific information.

For example this entry;

flow href="myvideo.mp4" width="320" height="240"

would add the video myvideo.mp4 with the width 320 and the height 240 to your post.

Screenshots

Download

Download the wp-flowplayer plugin and install using the instructions above. If you have any issues please contact me and let me know.

Download wp-flowplayer plugin

What is a System?

grapii — Mon, 09 Mar 2009 14:56:00 +0000

It is beyond the scope of this post to embark on a detailed discussion of system theory. However, it is useful to have a working definition of the word system.

If we look at some examples of systems:

Solar system
Digestive system
Public transport system
Central heating system
Computer system

We may arrive at a tentative definition – a system is a set of objects or elements that are viewed as a whole. On its own, this is inadequate for our purposes because we are concerned only with systems that are man-made, and therefore under human control, and that have a purpose – otherwise the system cannot be designed by a system developer. This rules out the solar system (no known purpose) and the digestive system (not under human control). An improved definition therefore would be: a system is a set of objects or elements that are viewed as a whole and designed to achieve a purpose.

Relationships

Another essential feature in our view of systems is that the elements of a system have a relationship to one another; they work together in some way. A heap of stones, for example, although it may be man-made and have the purpose of marking the top of a hill, does not qualify as a system because the elements do not have a significant relationship to one another. If you take one stone from the pile, it does not matter much to the others. In a system removing one element would matter. If you remove the train service from the public transport system, it puts pressure on the other services – it affects them. If you remove the boiler from the central heating system, the system will not work. For our purposes, therefore, the definition of a system we need is: a system is an interrelated set of objects or elements that are viewed as a whole and designed to achieve a purpose.

Boundaries & Environments

We must add to this definition that a system has a boundary. The system in question lies inside the boundary; outside the system boundary is the environment with which the system interacts. Sometimes the boundary of a system is clear and obvious. If we view a person as a system the boundary is clear – one person is clearly separate from another and from the environment. In computer systems, however, it is usually hard to define the boundary; it is dictated by which elements we choose to think of as being within the system, and which as being part of the environment. The normal rule is that inside the system are things the system is designed to control; outside the system boundary are things the system interacts with, but is not designed to control. The boundary may be set because there are things over which we cannot have control – for example, in a central heating system the weather must be considered to be outside the boundary as we cannot control it. The boundary may also be set because we choose not to include certain elements. This choice may be dictated by the following factors.

Money constraints. We may find that it will cost too much to computerise more than a limited set of system functions.
Time constraints. The more functions we computerise the longer it will take.
Cost effectiveness. Sometimes only limited benefits are gained from expensive computerisation.

The environment is defined as being the surrounding conditions, outside the boundary, that affect the system and may be affected by it but not controlled by it. We might define the weather conditions as being part of the environment of a central heating system.

Summary

To summarise: a system is an interrelated set of objects or elements that are viewed as a whole and designed for a purpose; it has a boundary within which it lies and outside of which is the environment. It is important to define the purpose or objectives of the system; different users will want different things from the system. From the outset, the system developer must be clear about the purpose of the system.

Carol Britton & Jill Doake (2006) Software System Development
4th Edition, McGraw-Hill

Hide WordPress Pages from the Navigation Menu

grapii — Mon, 09 Mar 2009 13:48:37 +0000

Having recently purchased an iPhone 3G, I’ve installed on my blog site WPtouch. WPtouch is a plug-in that transforms your blog into an application-style theme when you browse to your site using your iPhone. However, to get the tag cloud and monthly archive list to appear, you must have an Archives page, which is based on the Archive template. This is accomplished relatively easily, and works really well on the iPhone, but leaves me with an empty page on my site when browsing using a standard PC and my default theme. By supplying the page ID to the Exclude prompt of the pages widget it removed the Archives page entry from the right-hand column, but I still had the Archive link at the top of my site, the navigation menu.

So how can I remove the Archives page from the navigation menu, but leave the code intact so that the other page links function and appear as normal? Well, that’s a little tricky, but here’s how:

In the WordPress theme editor, open up the header.php file and find the following line:
Enter &exclude= near the end of the line, but inside the brackets. The code should look like this:
Now, all you have to do is add the page ID number or numbers that you want to hide after the &exclude=. If more than one page needs hiding, make sure you separate the page ID’s with commas. In my case, the Archives page has an ID of 173, so my code looks like this:

List Table/Column names in SQL database

grapii — Mon, 17 Mar 2008 12:50:26 +0000

Microsoft SQL Server 2000 provides a method for obtaining meta data using information schema views.

List all user tables in the pubs database, we’re not interested in views

SELECT *
FROM information_schema.tables
WHERE table_type = 'base table'

List only the table names

SELECT table_name
FROM information_schema.tables
WHERE table_type = 'base table'

List all columns in the authors table

SELECT *
FROM information_schema.columns
WHERE table_name = 'authors'

List only the column names

SELECT column_name
FROM information_schema.columns
WHERE table_name = 'authors'

Create a Glossary with WordPress

grapii — Fri, 29 Feb 2008 14:50:37 +0000

[EDIT: Tested with WordPress 2.7.1]
I wanted to create a glossary that facilitates terms, buzz words and acronyms used in modern computing. I needed something that was simple to update and manage, and use the capabilities of WordPress rather than creating a simple page with hyperlinks/bookmarks, which would require jumping back and forth into code. I found a few Glossary plugins like IMM-Glossary, which did have management of the glossary posts, however, the definitions were in plain text, and wouldn’t allow formatting. I wanted my text to be formatted using headings, bullet points, even pictures. After many hours of googling and hours of trail and error, I’ve come up with my perfect glossary solution.

This solution allows me to create the glossary content using WordPress posts, and manage the content like any other posts. It uses a mixture of plugins, templates and custom code, and for me it works really well.

Step 1

Download and install the WP-SNAP! plugin. WP-SNAP! creates an alphabetical listing of post titles on a Category or Page template file. Navigation through the listings WP-SNAP! generates is accomplished using the alphabet itself. (For example, if a site visitor clicked on the letter D, any post titles that began with that letter would be showcased.) WP-SNAP! will work on any WordPress 2.1.x or higher site, but is particularly useful managing glossaries, indexes, reviews, or directories.

Step 2

To hold all my glossary terms I need to create a new category in WordPress. I called this category “Glossary”, and made a note of it’s ID (13).

Now that I have my category, I need to change the display of the page when someone clicks on Glossary to make use of the WP-SNAP! plugin, and if anyone clicked on the other categories they would get the ‘normal’ layout. For this I made use of the category template and the template hierarchy.

The first step in modifying what happens when someone visits a Category page is to figure out which of your theme’s files is going to be used to display the posts. This is known as the Template Hierarchy.

In the case of categories, the hierarchy is fairly simple. For instance, the ID number of the Glossary category is 13. The Template Hierarchy specifies that WordPress will use the first Template file it finds in your current Theme’s directory from the following list:

category-13.php
category.php
archive.php
index.php

That is, if you do not have a category-13.php, WordPress will check for a category.php, and so on. So, if you want to make the Category whose ID number is 13 look different from what it is currently (and different from other Category pages), you would want to create a category-13.php file. If you want to make all Category pages look different from other archive pages (such as date and author archives), then you would want to create or modify the category.php file. If you want to make changes to the look of all archive pages, you can create or modify the archive.php file. And if you modify the index.php file, you will affect your entire blog.

So to create a new category-13.php glossary file I copied the next file in the hierarchy that existed in this case archive.php.

I made a few changes to the category-13.php page to remove the post dates, tags etc and added the WP-SNAP! configuration line.

Step 3

Add some CSS style to your WordPress theme to style the ABC layout, the style I used was was:

ol.snap_nav {
 display: inline;
 float: left;
 clear: both;
 list-style: none;
 font-size: 12px;
 letter-spacing: 3px;
}

ol.snap_nav li {
 display: block;
 float: left;
 padding: 0 2px 10px 0;
}

ol.snap_nav li a {
 font-weight: bold;
}

ol.snap_nav li.snap_selected a {
 font-weight: normal;
 font-size: 20px;
 text-decoration: none;
 color : #003399;
}

Step 4

Now that the glossary is all setup, a few final tweaks. If I add a new term to the glossary category, I don’t want it appearing in the front page blog nor in the rss feeds. I looked around to find a way of omitting a certain category from the front page, and although there were a few plugins available, I found this an overkill for this one-off implementation. I finally found some code that can be used. All you need to do is add the following code anywhere in the theme functions.php file.

/* Exclude Category from Main Page and RSS Feeds. Used for Glossary(ID=13) Category. */
function myFilter($query) {
	if ($query->is_feed || $query->is_home) {
		$query->set('cat','-13');
	}

return $query;
}

add_filter('pre_get_posts','myFilter');

The code example above excludes the glossary category (13) from the RSS feed and main page. If you want to exclude multiple categories, simply add a comma (,) and a dash (-) followed by the category ID e.g. ‘-5,-6,-7′.

Step 5

So far so good. I now wanted the glossary link to appear as a page, i.e. I wanted it to look like a page and have the link at the top where my WordPress pages lived. There were several options available, all using various plugins or required creating pseudo pages and linking it back to a category, all of which looked to messy for me. So instead, I just modified my themes header.php file and created a physical link to the category page. I inserted the following code, just after the code for WordPress page links


 Home
 
  
 
 Glossary

Step 6

Finally, as I had the glossary category as a page link, I wanted to hide the glossary category from the category widget. Once again, plenty of plugins available, but for me again this was an overkill. Having searched various forums I came across the best way to achieve this. This solution requires changes to the WordPress core file widgets.php. I know this is not ideal, and if I upgrade to the next version of WordPress I’d loose my changes, but hey, that’s what this article is for, so I can recreate the glossary fairly easy.

Find this line in /wp-includes/widgets.php

$cat_args = "orderby=name&show_count={$c}&hierarchical={$h}";

In WordPress 2.7.1 its

$cat_args = array('orderby' => 'name', 'show_count' => $c, 'hierarchical' => $h);

and add the &exclude (WordPress 2.7.1 = ,'exclude') to the end of it followed by the category ID, e.g to exclude category ID 13

$cat_args = "orderby=name&show_count={$c}&hierarchical={$h}&exclude=13";

WordPress 2.7.1 :

$cat_args = array('orderby' => 'name', 'show_count' => $c, 'hierarchical' => $h, 'exclude' => '13');

to exclude multiple categories, enter the ID separated by commas (,). e.g exclude category ID’s 5, 6, & 7

$cat_args = "orderby=name&show_count={$c}&hierarchical={$h}&exclude=5,6,7";

Summary

You should now be set, I know there are a number of steps involved, but I hope you agree it’s well worth it. I know have a glossary that is managed by WordPress. All I need to do is create a new post and assign it to the glossary category, and I can manage the definitions as I would any other post within WordPress.

Grapii » Software Development

How to build a simple search filter with jQuery

jQuery

HTML

DVD Collection

Step 1: Add an input field to the header

Step 2: Set up events

Step 3: Compare the values

Step 4: Hide the non-matching elements

Demo

Complete Code

DVD Collection

Model-View-Controller Design Pattern Part 2

Prerequisites

Creating a New MVC Project

Examining the MVC Project

Adding a Controller

Adding Code to the Action Method

Adding a View

Adding Content to the View

My City Maps

Adding a Tab to the Master-Page Menu

Testing the MVC Application

Next Steps

Model-View-Controller Design Pattern Part 1

Context

Problem

Forces

Solution

Variations

Resulting Context

Benefits

Liabilities

Example

Change WordPress Meta Widget

Convert HTML

Flowplayer for WordPress

Installation

Usage

Screenshots

Download

What is a System?

Relationships

Boundaries & Environments

Summary

Hide WordPress Pages from the Navigation Menu

List Table/Column names in SQL database

Create a Glossary with WordPress

Step 1

Step 2

Not Found

Step 3

Step 4

Step 5

Step 6

Summary