How-To Tutorials - Web Development

In order to create the file management software for our website, we need to consider topics such as a single or multi-file upload, file system management, and image manipulation in the case of photos. In addition to this we will cover creation of pages for displaying the user's photo albums, their friends' photo albums, as well as a few data management pages. What's the problem? Apart from the standard infrastructure issues that we have to consider when building a system such as this, one of the core issues in any web-based file management system is file upload. As we all know, most server side technologies allow only one file to be uploaded at a time and ASP.NET is no different. And while we could easily buy a third-party plug-in to handle multiple files at once, we decided to provide for options to upload the files either via Silverlight or via Flash. Once we get our file upload process working we are only one-third of the way there! As we are going to be mostly concerned with uploading images, we need to consider that we will need to provide some image manipulation. With each file that is uploaded to our system we need to create a handful of different sizes of each image to be used in various scenarios across our site. To start with, we will create thumbnail, small, medium, large, and original size photos. Now while creating different size files is technically working with the file storage system, we wanted to take an extra breath with regards to the file storage concepts. We can choose to store the files on the file system or in a database. For avatars it made sense to store each with the profile data whereas for image galleries it makes more sense to store the file on the file system. While storing files to the file system we need to be very cautious as to how the file structure is defined and where and how the individual files are stored. In our case we will use system-generated GUIDs as our file names with extensions to define the different sizes that we are storing. We will dig into this more as we start to understand the details of this system. Once we have uploaded the files to the server and they are ready for our use across the system, we will take up the concept of user files versus system files. If we build the system with some forethought regarding this topic we can have a very generic file management system that can be extended for future use. We will build a personal system in this article. But as you will see with some flags in just the right places, we could just as easily build a system file manager or a group file manager. Design Let's take a look at the design for this feature. Files For our site, as we are not storing our files in the database, we need to take a closer look at what actually needs to be managed in the database so as to keep track of what is going on in the file system. In addition to standard file metadata, we need to keep a close eye on where the file actually lives—specifically which file system folder (directory on the hard drive) the file will reside in. We also need to be able to maintain which accounts own which files, or in the case of system files, which files can be viewed by anyone. Folders You may be wondering why we have a separate section regarding folders when we just touched upon the fact that we will be managing which file system folder we will be storing files in. In this section we are going to discuss folder management from a site perspective rather than a file system perspective—user folders or virtual folders if you desire. Very similar to file storage, we will be storing various metadata about each folder. We will also have to keep track of who owns which folder, who can see which folder, or in the case of system folders whether everyone can see that folder. And of course as each folder is a virtual container for a file, we will have to maintain the relationship between folders and files. File upload The file upload process will be handled by a Silverlight/Flash client. While this is not really an article about either Silverlight or Flash, we will show you how simple it is to create this Flash client, that is really just providing a way to store many files that need to be uploaded, and then uploading them one at a time in a way that the server can handle each file. For the Silverlight option, we are using code from Codeplex—http://silverlightfileupld.codeplex.com/. File system management Managing the file system may seem like a non-issue to begin with. However, keep in mind that for a community site to be successful we will need at least 10,000 or so unique users. Given that sharing photos and other files is such a popular feature of most of today's community sites, this could easily translate into a lot of uploaded files. While you could technically store a large number of files in one directory on your web server, you will find that over time your application becomes more and more sluggish. You might also run into files being uploaded with the same name using this approach. Also, you may find that you will have storage issues and need to split off some of your files to another disk or another server. Many of these issues are easily handled if we think about and address them up front. In our case we will use a unique file name for each uploaded file. We will store each file in subdirectories that are also uniquely named based on the year and month in which the file was uploaded. If you find that you have a high volume of files being uploaded each day, you may want to store your files in a folder with the year and month in the name of the folder and then in another subdirectory for each day of that month. In addition to a good naming convention on the file system, we will store the root directory for each file in the database. Initially you may only have one root for your photos, one for videos, and so on. But storing it now will allow you to have multiple roots for your file storage—one root location per file. This gives you a lot of extensibility points over time meaning that you could easily relocate entire sections of your file gallery to a separate disk or even a separate server. Data management screens Once we have all of the infrastructure in place we will need to discuss all the data management screens that will be needed—everything from the UI for uploading files to the screens for managing file metadata, to screens for creating new albums. Then we will need to tie into the rest of the framework and allow users to view their friends' uploaded file albums. The solution Let's take a look at our solution. Implementing the database First let's take a look at the tables required for these features (see the following screenshot). Files The most important thing to consider storing while in the database is of course our primary interest files. As with most other conversations regarding a physical binary file we always have to consider if we want to store the file in the database or on the file system. In this case we think it makes sense to store the file (and in the case of a photo, its various generated sizes) on the file system. This means that we will only be storing metadata about each file in our database. The most important field here to discuss is the FileSystemName. As you can see this is a GUID value. We will be renaming uploaded files to GUIDs in addition to the original extension. This allows us to ensure that all the files in any given folder are uniquely named. This removes the need for us to have to worry about overwriting other files. Then we see the FileSystemFolderID. This is a reference to the FileSystemFolders table, that lets us know the root folder location where the file is stored. Next on our list of items to discuss is the IsPublicResource flag. By its name it is quite clear that this flag will set a file as public or private and can therefore be seen by all or by its owner (AccountID). We then come to a field that may be somewhat confusing: DefaultFolderID. This has nothing to do with the file system folders. This is a user created folder. When files are uploaded initially they are put in a virtual folder. That initial virtual folder becomes the file's permanent home. This doesn't mean that it is the file's only home. As you will see later we have the concept that files can live in many virtual folders by way of subscription to the other folders. File system folders As mentioned previously, the FileSystemFolders table is responsible for letting us know where our file's root directory is. This allows us to expand our system down the road to have multiple roots, that could live on the same server but different disks, or on totally different servers. The fields in the table are Key, Path (URL), and a Timestamp. File types The FileTypes table will help us to keep track of what sort of files we are storing and working with. This is a simple lookup table that tells us the extension of a given file. Folders Folders are virtual in this case. They provide us with a way to specify a container of files. In our case we will be containing photos, in which case folders will act as photo albums. The only field worth explaining here is the flag IsPublicResource, which allows us to specify whether a folder and its resources are public or private, that is, viewable by all or viewable only by the owner. Folder types The FolderTypes table allows us a way to specify the type of folder. Currently this will simply be Name, photos, movies, and so on. However, down the road you may want to specify an icon for each folder type in which case this is the place where you would want to assign that specification. Account folders In the AccountFolders table we are able to specify additional ownership of a folder. So in the case that a folder is a public resource and external resources can own folders, we simply create the new ownership relationship here. This is not permanent ownership. It is still specified with the Folders table's AccountID. This is a temporary ownership across many Accounts. As you can see in the previous screenshot we have the owner (AccountID) and the folder that is to be owned (FolderID). Account files Similar to the AccountFolders table, the AccountFiles table allows someone to subscribe to a specific file. This could be used for the purposes of Favorites or similar concepts. The makeup of this table is identical to AccountFolders. You have the owner and the file being owned. Folder files The FolderFiles table allows an Account to not only subscribe to a file, similar to the Favorites concept, but it also allows a user to take one of my files and put it into one of their folders as though the file itself belonged to them. As you can see in the previous screenshot this is primarily a table that holds the keys to the other tables. We have the FolderID, FileID, and AccountID for each file. This clearly specifies who is taking ownership of what and where they want it to be placed. Creating the relationships Once all the tables are created we can then create all the relationships. For this set of tables we have relationships between the following tables: Files and FileSystemFolders Files and FileTypes Files and Folders Files and Accounts Folders and Accounts Folders and FolderTypes AccountFolders and Accounts AccountFolders and Folders AccountFiles and Accounts AccountFiles and Files FolderFiles and Accounts FolderFiles and Folders FolderFiles and Files

  Linux Shell Scripting Cookbook Solve real-world shell scripting problems with over 110 simple but incredibly effective recipes  In this article, we took a look at some tips and tricks on working with Linux shell script.    Successful and unsuccessful command Tip: When a command returns after error, it returns a non-zero exit status. The command returns zero when it terminates after successful completion. Return status can be read from special variable $? (run echo $? immediately after the command execution statement to print the exit status). Fork bomb :(){ :|:& };: Tip: This recursive function is a function that calls itself. It infinitely spawns processes and ends up in a denial of service attack. & is postfixed with the function call to bring the subprocess into the background. This is a dangerous code as it forks processes and, therefore, it is called a fork bomb. You may find it difficult to interpret the above code. See Wikipedia page http://en.wikipedia.org/wiki/Fork_bomb for more details and interpretation of the fork bomb. It can be prevented by restricting the maximum number of processes that can be spawned from the config file /etc/security/limits.conf. Specify -maxdepth and –mindepth as the third argument Tip: -maxdepth and –mindepth should be specified as the third argument to the find. If they are specified as the fourth or further arguments, it may affect the efficiency of the find as it has to do unnecessary checks (for example, if –maxdepth is specified as the fourth argument and –type as the third argument, the find command first finds out all the files having the specified –type and then finds all of the matched files having the specified depth. However, if the depth were specified as the third argument and –type as the fourth, find could collect all the files having at most the specified depth and then check for the file type, which is the most efficient way of searching. -exec with multiple commands Tip: We cannot use multiple commands along with the –exec parameter. It accepts only a single command, but we can use a trick. Write multiple commands in a shell script (for example, commands.sh) and use it with –exec as follows: -exec ./commands.sh {} ; -n option for numeric sort Tip: Always be careful about the -n option for numeric sort. The sort command treats alphabetical sort and numeric sort differently. Hence, in order to specify numeric sort the –n option should be provided. The ## operator Tip: The ## operator is more preferred over the # operator to extract an extension from a filename since the filename may contain multiple '.' characters. Since ## makes greedy match, it always extract extensions only. Recursively search many files Tip: To recursively search for a text over many directories of descendants use: $ grep "text" . -R -n This is one of the most frequently used commands by developers. It is used to find the file of source code in which a certain text exists. Placing variable assignments Tip: Usually, we place initial variable assignments, such as var=0; and statements to print the file header in the BEGIN block. In the END{} block, we place statements such as printing results and so on. -d argument Tip: The -d argument should always be given in quotes. If quotes are not used, & is interpreted by the shell to indicate this should be a background process. Excluding a set of files from archiving Tip: It is possible to exclude a set of files from archiving by specifying patterns. Use --exclude [PATTERN] for excluding files matched by wildcard patterns. For example, to exclude all .txt files from archiving use: $ tar -cf arch.tar * --exclude "*.txt" Note that the pattern should be enclosed in double quotes. Using cpio command for absolute paths Tip: By using cpio, we can also archive using files as absolute paths. /usr/somedir is an absolute path as it contains the full path starting from root (/). A relative path will not start with / but it starts the path from the current directory. For example, test/file means that there is a directory test and the file is inside the test directory. While extracting, cpio extracts to the absolute path itself. But incase of tar it removes the / in the absolute path and converts it as relative path. PATH format Tip: For the PATH format, if we use / at the end of the source, rsync will copy contents of that end directory specified in the source_path to the destination. If / not at the end of the source, rsync will copy that end directory itself to the destination. / at the end of destination_path Tip: If / is at the end of destination_path, rsync will copy the source to the destination directory. If / is not used at the end of the destination path, rsync will create a folder, named similar to the source directory, at the end of the destination path and copy the source into that directory. wait command Tip: The wait command enables a script to be terminated only after all its child process or background processes terminate or complete. First argument of the sftp command Tip: -oPort should be the first argument of the sftp command. Running du DIRECTORY Tip: Running du DIRECTORY will output a similar result, but it will show only the size consumed by subdirectories. However, they do not show the disk usage for each of the files. For printing the disk usage by files, -a is mandatory. du DIRECTORY commands traversal Tip: du can be restricted to traverse only a single file system by using the –x argument. Suppose du DIRECTORY is run, it will traverse through every possible subdirectory of DIRECTORY recursively. A subdirectory in the directory hierarchy may be a mount point (for example, /mnt/sda1 is a subdirectory of /mnt and it is a mount point for the device /dev/sda1). du will traverse that mount point and calculate the sum of disk usage for that device filesystem also. In order to prevent du from traversing and to calculate from other mount points or filesystems, use the -x flag along with other du options. du –x / will exclude all mount points in /mnt/ for disk usage calculation. Use an absolute path for the executable Tip: An executable binary of the time command is available at /usr/bin/time as well as a shell built-in named time exists. When we run time, it calls the shell built-in by default. The shell built-in time has limited options. Hence, we should use an absolute path for the executable (/usr/bin/time) for performing additional functionalities. -x argument Tip: The -x argument along with -a specifies to remove the TTY restriction imparted, by default, by ps. Usually, using ps without arguments prints processes that are attached to terminal only. Parameters for -o Tip: Parameters for -o are delimited by using the comma (,) operator. It should be noted that there is no space in between the comma operator and next parameter. Mostly, the -o option is combined with the -e (every) option (-oe) since it should list every process running in the system. However, when certain filters are used along with –o, such as those used for listing the processes owned by specified users, -e is not used along with –o. Usage of -e with a filter will nullify the filter and it will show all process entries. pgrep command Tip: pgrep requires only a portion of the command name as its input argument to extract a Bash command, for example, pgrep ash or pgrep bas will also work. But ps requires you to type the exact command. apropos Tip: Sometimes we need to search if some command related to a word exists. Then we can search the manpages for strings in the command. For this we can use: apropos COMMAND   In this article, we took a look at some tips and tricks on working with Linux shell script.Further resources on this subject: Linux Email [Book] Installing VirtualBox on Linux [Article] Linux Shell Script: Logging Tasks [Article] Linux Shell Script: Monitoring Activities [Article] Compression Formats in Linux Shell Script [Article] Making a Complete yet Small Linux Distribution [Article]

Oracle Application Express 4.0 with Ext JS Deliver rich desktop-styled Oracle APEX applications using the powerful Ext JS JavaScript library        Theme basics Out of the box, APEX comes with twenty themes, each theme comprising a collection of templates used to define the layout and appearance of an entire application. An application can have many themes, but only one theme is active at any time; switching themes is done at design time only. You can create custom themes, which may be published, either within a workspace by a Workspace Manager or for the whole APEX instance by an Internal Workspace Manager. Publishing a theme encourages consistency across applications. A theme comprises nine template types: breadcrumb, button, calendar, label, list, page, popup list of values, region, and report. A theme must have at least one of each of the nine template types. Within each template type are a set of predefined classes and eight custom classes. For example, the label template has the following classes: - Not Identified - No Label Optional Label Optional Label with Help Required Label Required Label with Help Custom 1... Custom 8 Programmers use these templates to construct the HTML pages that make up an application. Each page is declaratively defined using metadata to select templates to be used for the presentation. The APEX engine dynamically renders an HTML page using the metadata, assembling relevant templates and injecting dynamic data into placeholders within the templates. The HTML page is viewed when you request a page through a web browser. When you submit a page, the APEX engine performs page processing, once again using declaratively defined metadata to perform computations, validations, processes, and branching. This type of processing is a typical Model-View-Controller(MVC) pattern, where the view is the HTML generated using the application templates. The APEX engine is the controller and receives the GET or POST input and decides what to do with it, handing over to domain objects. The domain objects model is encapsulated in the page definition and contains the business rules and functionality to carry out specific tasks. Separation of concerns The MVC pattern also promotes another good design principle—separation of concerns. APEX has been designed so that the APEX engine, templates, and the application functionality can be optimized independently of each other. Clearly, the process of assembling and sequencing the steps necessary to render a page, and process a page are important to the overall solution. By separating this out and letting Oracle deal with the complexities of this through the APEX engine, it allows programmers to concentrate on providing business functionality. Equally, by separating presentation templates from the business logic, it allows each aspect to be maintained separately. This provides a number of advantages including ease of design change, allowing templates to be modified either by different people or at different times to enhance the interface without breaking the application. An excellent example of this is the standard themes provided in APEX, which have been designed to be completely interchangeable. Switching standard themes is simply a matter of loading a theme from the repository and then switching the active theme. APEX then remaps components to the new active theme using the template class identifiers. Standard themes We will be building our own custom theme rather than using one of the twenty pre-built ones. Nevertheless, it's worthwhile knowing what they provide, as we will build our custom theme by using one of them as a "starter". Looking at this image, we can see a preview of the standard APEX themes. Each theme provides a similar interface, so really each standard theme is just a visual variation on the others. The colors used are a little different, or the HTML layout is tweaked slightly, but in reality they are all much the same. Theme 4 is used by APEX as the "starter" theme and contains one template for each template class for all the template types—a total of 69 templates. Theme 19 is also worth noting as it's designed for mobile devices. Each of these themes are full of good HTML practices and show how and where to use the substitution strings. Creating a theme When creating a theme, you can choose to copy one from the repository, create one from scratch or from an export file. The repository and export file options copy the entire theme, and you start editing the template to suit. Creating a theme from scratch creates a theme without any templates. You then need to define templates for each different type before you can switch from the active theme. In my opinion, the easiest way to build a new theme is to take the approach that the application should always be in a working state, and the way to do this is to create a new empty TEMPLATE application using a standard theme and build from there. From this working base, you can progressively convert the templates to use Ext functionality, building simple test pages as you go to verify the templates. These test pages also form part of your template documentation, allowing team members to examine and understand specific functionality in isolation. Once a theme has templates for each of the nine template types, you can publish the theme into the workspace to be used by your business applications. The following screenshot shows a dialog named Create Workspace Theme from the APEX wizard. Notice that you can change the theme number when you publish a theme, providing a very simple mechanism for you to version control your themes. A published theme can't be edited directly once it has been created, but using a TEMPLATE application, you can republish it using a different theme number. Applications can have multiple themes, but only one active theme. By switching themes, applications can easily test a new version, safe in the knowledge that changing back to the earlier version is just a matter of switching back to the prior theme. So before we go any further, create a new TEMPLATE application based on Theme 4, and let's begin the process of creating our Ext JS theme. Building a Viewport Page template Several of the examples provided with Ext feature the Viewport utility container, including the RSS Feed Viewer shown in the screenshot below. The Viewport automatically renders to the document body, sizing itself to the browser viewport and dividing the page into up to five distinct regions; the center region is mandatory, with north, south, east, and west regions being optional. Viewport regions are configurable, and by setting a few simple attributes, you quickly find yourself with a very interactive page, with expanding/collapsing regions and splitters to resize regions by clicking and dragging with the mouse. We are going to build a basic viewport for our APEX page template including all five regions.

  Joomla! 1.6 First Look A concise guide to everything that's new in Joomla! 1.6.         Read more about this book       (For more resources on Joomla!, see here.) Question: What are the server requirements for installing Joomla! 1.6 on a web hosting account? Answer: The following system requirements have remained the same since the 1.5 release: Apache 1.3.x or higher. Apache is the web server software that processes the PHP instructions for how to pull in contents from the database and display a web page. XML and Zlib support. Your host's PHP installation should support XML and Zlib functionality. But the PHP and MySQL requirements have changed. To enable you to run a Joomla! 1.6 powered website, your web hosting account should support: PHP 5.2 or higher. PHP is the scripting language that Joomla! is written in. MySQL 5.0.4 or higher. The MySQL database is where Joomla! stores its data (the contents of your site).   Question: What are the changes for templates in Joomla! 1.6? Answer: Templates created for version 1.5 can't be used in Joomla! 1.6. The new release uses clean, semantic HTML code, without using tables for layout purposes. This is good news, as template developers are no longer required to add so-called template overrides in order to achieve a semantic design. However, it is one of the reasons that developers will have to upgrade their existing code to move a 1.5 template to version 1.6. Joomla! 1.6 also introduces some other nice template features, such as the ability to use ‘subtemplates’ (called Template Styles in Joomla!). This new feature allows you to easily create individual styling for parts of your site.   Question: What’s new about categorizing content in Joomla! 1.6? Answer: The main thing that a content management system should help you in doing is of course to publish content and to manage existing content with minimal effort. Joomla! 1.6 allows you to organize content exactly as you want. Up to Joomla! 1.5, you could only classify your content in three levels: sections would contain categories, and categories would hold articles. Although this didn't pose problems for most sites, it was nevertheless a strange restriction. That's why Joomla! 1.6 introduces a more flexible system of classification. Categories can now hold an unlimited number of subcategories. This means that you can have a hierarchy. A category can hold as many subcategories as you need. This concept is called "unlimited nested categories". In most cases you won't need more than two or three subcategories, but if you do, there's nothing to stop you. You can check the content category hierarchy in the Category Manager. Child categories are displayed indented, with small gray lines indicating the sublevel: The above screenshot shows the nested categories contained in the sample data that comes with Joomla! 1.6. As you can see, all article content is stored in subcategories of the main category Sample Data-Articles.   Question: What's the difference between Root user, Super Administrator, Super User, Admin? Answer: When you install Joomla!, there's always one root user, allowed to do anything in the administration area. In Joomla! 1.5, this root user was called Super Administrator. In Joomla! 1.6, this name has been changed to Super User. Another point to note is that the root user is always a Super User—but there can be more Super Users who aren't root users. The root user is a unique Super User who can assign new users to the Super User group. But there's always just one root user created when installing Joomla! Only this root user can change another Super User's details. (You can always identify the root user in the User Manager by his fixed ID number, which in Joomla! 1.6 is always 42).   Question: What's the use of the new User Permissions tab? Answer: When browsing the Global Configuration screen, you'll notice that there's a new tab called Permissions. It's where you set all site-wide user permissions. In Joomla! 1.6, you have much more control over user permissions. You can create new user groups and set permissions on different levels- not just site-wide, as was previously the case in Joomla! 1.5.   Question: What are the changes in the article editor? Answer: Creating or editing an article in Joomla! 1.6 will seem very familiar to 1.5 users. Go to Content | Article Manager | New or Edit to display the article editor screen: (Move the mouse over the image to enlarge.) On closer inspection, you'll notice some items have been renamed or rearranged: In the New Article section, you can set the article to be Featured. This is just another word for what was previously called 'Front Page' or 'Show on Front Page'. In the Article Options, references to sections have gone. The Show Category option allows you to show the Category Title of the current category. The Show Parent option allows you to also show the parent category title among the article details. In the Article Options, references to sections have gone. The Show Category option allows you to show the Category Title of the current category. The Show Parent option allows you to also show the parent category title among the article details. In the New Article section, there's a Permissions button that jumps to the separate Article Permissions section at the bottom of the screen. As you can see, the new user permissions options are available on many levels in the Joomla! 1.6 interface. Here you can set user permissions to delete or edit the current article.   Question: What's the Options button In the Menu Manager: Menus screen about? Answer: In the Menu Manager: Menus screen, there's a new button called Options: Clicking on it will open a pop up screen allowing you set all default User Permissions for all menus.   Question: What's new about the Access Control Levels system? Answer:In Joomla! 1.5, a fixed set of user groups was available, ranging from "Public" users (anyone with access to the frontend of the site) to "Super Administrators", allowed to log in to the backend and do anything. The ACL system in Joomla! 1.6 is much more flexible: Instead of fixed user groups with fixed sets of permissions, you can create as many groups as you want and grant the people in those groups any combination of permissions. ACL enables you to control anything users can do on the site: log in, create, edit, delete, publish, unpublish, trash, archive, manage, or administer things. Users are no longer limited to only one group: a user can belong to different groups at the same time. This allows you to give particular users both the set of permissions for one group and another group without having to create a third, combined set of permissions from the ground up. Permissions no longer apply to the whole site as they did in Joomla! 1.5. You can now set permissions for specific parts of the site. Permissions apply to either the whole site, or to specific components, categories, or items (such as a single article).   Question: How can we set access levels for users? Answer: By default, three Viewing Access Levels are available: Public, Registered, and Special. Go to Users | User Manager and click on the Viewing Access Levels tab to see these levels: This is what the three default Viewing Access Levels mean: Public means that there are no special viewing permissions involved. It's the set of permissions for the Public user group, who are only allowed access to the public site. Registered is the set of permissions for Registered Users. These by default are allowed to log in to the site to view the site parts that are set to the Registered access level. Special is the set of viewing permissions for all users that can log in to the backend (Manager, Administrator, Super User)   Question: How can I customize the logo on the site? Answer: You can customize the logo just by changing the Template Style settings. Let's find out how this works: Navigate to Extensions | Template Manager. Click on the Styles tab and then click on the link Beez2 - Default. The Template Manager: Edit Style screen is displayed. In the Advanced Options panel, locate the Logo option and click on Select. A pop-up screen appears. In the Upload files section, click on Browse to select a logo file from your computer. For best results, use a PNG file with a transparent background applied, with a maximum height of about 65 pixels. Select the image file and click on Start Upload. The message Upload Complete is displayed: Click on the logo image to select it and then click on Insert in the top right corner. In the Edit Style screen, click on Save and then click on View Site. The new logo image is displayed and replaces the Joomla! logo: To further customize the logo and header area, enter a short description of your site in the Advanced Options | Site Description box. This will replace the site tag line, just below the logo.   Question: What is the Redirect Manager? Answer: A new addition in 1.6 is the Redirect Manager, which you can find in the Components menu. This application can be quite useful, especially if you're migrating a 1.5 site to 1.6. When changing to a new site, many URLs from your old site are bound to change. This can result in lots of broken links from other sites that still point to the old URLs. The Redirect Manager helps you to direct visitors who come to your site through outdated links. In the Redirect Manager, just enter the old links and tell Joomla! what new pages it should show instead:   Question: What are the new module features in Joomla! 1.6? Answer: In Joomla! 1.6, using modules is more flexible: You can schedule the time during which a module should display. In previous versions of Joomla!, you could set a start date and an end date for publishing articles. Now this is also possible for modules. Modules are always assigned to one or more menu items. However, when editing a menu in Joomla! 1.5, there was no way to find out or change which modules were assigned to that menu item. You had to leave the menu item edit screen, navigate to the particular module's settings in the Module Manager, and check the module's menu assignment there. In Joomla! 1.6, you can set what modules are assigned to a menu link directly when you're editing a menu link.   Summary In this article we covered some of the most frequently asked questions on Joomla! 1.6. Further resources on this subject: Installing and Configuring Joomla! 1.5 [Article] Search Engine Optimization in Joomla! [Article] Joomla! 1.6: Organizing and Managing Content [Article] Joomla! 1.6: Managing Site Users with Access Control [Article] Mastering Joomla! 1.5 Extension and Framework Development Second Edition [Book]

Celtx: Open Source Screenwriting Beginner's Guide Write and market Hollywood-perfect movie scripts the free way!      If you just write scripts, you won't need the features in this article. However, Indie (independent) producers, folks actually making movies, putting together audio visual shows, or creating documentaries will find these tools of immense value and here we look at visualizing all this good stuff (pun, as ever, intended). Sketching Celtx's Sketch Tool allows us to easily visualize ideas and shot setups by adding our drawings of them to projects. Sketches can be separate items in the Project Library (or in folders within the library) or added to a project's Storyboard (more on that in the next section of this article). The Sketch Tool comes with pre-loaded icons for people, cameras, and lights, which we can drag and drop into our sketches, making them look more polished. The icons are SVG images (Scalable Vector Graphics), which allow us to make them as large as we like without losing any quality in the image. The http://celtx.com site makes additional icons available (Art Packs) at low costs (example: $2.99 for 23 icons). Also provided in the Sketch tool are tools for drawing lines, arrows, shapes, and for adding text labels. Just to avoid confusion, let me tell you that there is nothing like pens or erasers or other free drawing features. We'll use various drag-and-drop icons and any of us, artistic talent or not, can turn out very professional-looking storyboards in no time at all. Celtx Projects are containers which hold items such as scripts, index cards, reports, schedules, storyboards, prop lists, and more including sketches. Time for action - starting a new sketch We have two ways of creating a new Sketch, which are as follows: First, open a project (new or already in progress) and look in the Project Library in the upper-left quadrant of the Celtx screen. Sketch is included by default, as shown in the following screenshot: The following steps show the second method for creating a new sketch: Click on File at the very upper-left of the Celtx main window On the drop-down menu, choose Add Item... Click on Sketch and then click on OK, as shown in the following screenshot: What just happened? The new Sketch is added to the Project Library window. If one was already there (likely since it is by default), you now have two with the same name. No problem; simply right-click on one of them, choose Rename, and change its name. We can also delete or duplicate a Sketch this way. To open the main Sketch Tool window from anywhere in a Celtx project, double-click on the name of the Sketch in the Project Library. In the case of a new Sketch created through the Add Item dialog box, as shown in the preceding section, it will already be open and ready for use. That is, the main window covering most of the center of the Celtx screen is where we sketch. Double-clicking on Screenplay or any other item in the Project Library window navigates us to that item and away from our Sketch. It is saved automatically. The following screenshot shows how the Sketch Tool looks when opened: Sketch Tool toolbar Along the top of the middle window (the Sketch Tool window), we have a toolbar. In the preceding screenshot, most of these tools are grayed out. They become fully visible when conditions are met for their use. Let's take a tour. The following screenshot shows the sketch toolbar in its entirety: Now, let's explore these tools individually and see what they do. In addition to the tool bar (shown in the preceding screenshot), I'll include an image of each individual tool as well: Select tool: The first tool from the left is for selecting items in the sketch. There's nothing to select yet, so let's click on the second tool from the left. The select tool is shown in the following screenshot: The diagonal line: It is the second tool from the left and it draws a line. Move the cursor (now a cross) to the point where the line begins, hold down the left mouse button, and drag out the line, releasing the mouse button at its ending point. The diagonal line is shown in the following screenshot: Line tool: Click on the first tool above. The mouse cursor becomes a hollow arrow on a PC but remains a black arrow on the Mac. Select the line we drew by clicking on it (a little hard for a line) or holding down the left mouse button and drawing a box all the way around the line (easier). When the mouse button is released, we know the line is selected because it has a dotted blue line around it and two small gray circles or "handles" at either end. Once the item is selected, just hold down the left mouse button and it can be moved anywhere in the Sketch Tool window.Select either of the handles by moving the cursor arrow over it and pressing the left mouse button. We can now move that end of the line all over the place and it stays wherever the button is released; it's the same for the other end of the line. While the line is selected, just hit the Delete key to erase it. This also works in the same way for all the other elements. Arrow Tool: The third tool from the left (the diagonal arrow) works exactly like the line tool, except there's an arrowhead on one end. It's a useful drawing tool for pointing to something in our diagrams or using as a spear if it's that kind of movie, eh? The arrow tool is shown in the following screenshot: Box and Circle Tools: The fourth tool (the box) draws a box or rectangle and the fifth (the circle) a circle or oval. Clicking on the select tool (the first tool on the left) and using its cursor to click inside of a square or circle selects it. There are two little gray circles which allow us to manipulate the figure just as we did with the line above. The box tool is shown in the following screenshot: And the circle tool is shown in the following screenshot: Text Tool: Suppose we want to label a line, arrow, box, or circle, we can use the sixth tool, that is, the little letter "A", which is shown in the following screenshot: Draw a box and click on the A. The mouse cursor is now an "I-beam". Click in the box. A mini-dialog box appears, as shown in the following screenshot: This Edit Text box allows the selection of the font, size, bold, italic, and provides a place to type in the label, such as the stirring This is a box. Click on OK and the label is in the box, as shown in the following screenshot: If we need to edit an existing label, click on the select tool, double-click on the text, the Edit Text mini-dialog box comes up, and you can edit the text. Keeping the labeled box as an example, we're ready to visit the next two tools, namely, the empty circle and his brother the solid circle, both of which are grayed out at the moment. Let's wake them up. Stroke and Fill Tools: Click on the select tool and then click inside the box. These two tools turn blue and allow us access to them. These are shown in the following screenshot: The empty circle controls the color of the stroke (that's the outline of the item, such as our box) and the solid circle, the fill (the inside color of the item). Note that there is a small arrow on the right side of each circle. Click on the one next to the solid (fill) circle. A color selection box drops down; choose a color by clicking on it. The box now has that color inside it as a fill, as shown in the following screenshot: If you want to change the stroke and/or fill colors, just click on the stroke or fill tool to drop-down the selection box again. Moving on, add another box (or circle, whatever) and move it. Use the select tool, hold down the Shift key, click on the new box, and move it over the original box. Layer Tools: Okay, we now have one item on top of another. Sometimes that's inconvenient in a scene diagram and we need to reverse the order (move one or more items up a layer or more). With the top box selected, look at the toolbar. The next four icons to the right of the stroke and fill circles are now "lit up" (no longer grayed out). The layer tools are shown in the following screenshot: These are, in the order, lower to bottom, lower, raise, and raise to top. In other words, the selected box would be lowered to the bottom-most layer, lowered one layer, raised one layer, or jumped all the way to the top-most layer. Group and Ungroup: Now, to save a few million electrons, let's use the same two boxes again. Select the one on top, hold down the Shift key, and both boxes are now selected. We can move them together, for example. However, note that the next icon to the right is now no longer gray (it's now two blue boxes, one over the other and four smaller black ones). This is the group tool, which is shown in the following screenshot: Clicking on it groups or bonds the selected items together. This, of course, lights up the next icon on the toolbar, the (wait for it) ungroup tool, which restores independence to grouped items. Undo and Redo Tools: The next two toolbar icons, the curved arrows, are undo and redo tools. They reverse an action to the previous state or restore an item to its next state (if there is one, that is, "undo" and "redo"). These tools are shown in the following screenshot: Cut, Copy, and Paste Tools: The last three tools on the Sketch Tool window toolbar are the cut, copy, and paste tools, as shown in the following screenshot: Cutting removes an item but retains it on the clipboard, copying leaves the item and also puts a copy of it on the clipboard, while paste puts the item from the clipboard back into the sketch. Now, we come to the fun part, icons! As in "yes, icon do a professional-looking sketch." (Sorry, couldn't resist.) Icons for a professional look Celtx provides icons, giving our sketches a polished professional look (neat, artistic, follows industry entertainment conventions) while requiring little or no artistic ability. The Palettes windows, found on the right side of the main Sketch Tool window, list available icons. The default installation of Celtx includes a very limited number of icons, one camera, two kinds of lights, and a top-down view of a man and a woman. Celtx, of course, is open source software and thus free (a price I can afford). However, one of the ways in which its sponsoring developer, a Canadian company, Greyfirst Corp. in St. John's, Newfoundland, makes money is by selling add-ons to the program, one type being additional icons in the form of Art Packs. In the following screenshot, if we click on the + Get Art Packs link, a webpage opens where one can order Art Packs and other add-ons at quite reasonable prices: Now, to use an icon in a sketch, let's start with the camera. Open a new sketch by doubleclicking on Sketch in the Project Library window or Add Item from the main File menu. In the Palettes window, move the mouse cursor over Camera and hold down the left mouse button while dragging the camera icon into the main Sketch Tool window. It looks like the following screenshot: Manipulating icons: When any icon is dragged into the main window of the Sketch Tool (and anytime that icon is selected by clicking on it with the select tool cursor described earlier) it has a dotted circle around it (as shown in the preceding screenshot) and two small solid circles (violet on top, olive below). Clicking on the violet circle and holding down the left mouse button while dragging allows rotation of the icon. Releasing the button stops rotation and leaves the icon in that orientation. Clicking on the olive circle (the lower one) and holding down the left mouse button and dragging allow resizing the icon, either larger or smaller. As these icons, like the lines, arrows, boxes, and circles we discussed earlier in this article are also SVG (Scalable Vector Graphics), we can have them as large as desired with no pixilation or other distortion. Using the Sketch Tool toolbar and the supplied icons, we can rapidly and easily draw professional looking diagrams like the scene shown in the following screenshot, which shows two lights, the camera, the talent, arrows showing their movement in the scene, and the props: Again, additional icons may be purchased from the http://celtx.com website. For example, the following screenshot shows the twenty-three icons available in Art Pack 1: Saving a finished Sketch Now is a good time for us to take a moment and discuss the limitations of the Sketch Tool. This feature provides a fast way of whipping up a scene diagram from inside a Celtx project. It does not replace an outside drawing program nor give us the functionality of something like Adobe Illustrator, but it is quite powerful and very handy. By the way, we can use external media files in Celtx and we'll do just that in both of the remaining sections of this article. Another limitation concerns saving sketches. There's no way of exporting the sketch as an external image such as .jpg or .bmp. In fact, even saving within the Celtx project is automated. Do the following to see what I mean: In a Celtx project, double-click on Sketch in the Project Library to start a sketch. Draw something. Double-click on Screenplay. Then double-click on Sketch. The drawing is still there. Save the Celtx project, exit, and open it again. Double-click on Sketch. Drawing's still there! We can even use Add Item from the File menu (a shortcut is the little plus symbol beneath the Project Library title) and add another Sketch (same name) to the Project Library and even draw a new sketch in it. Of course, having different drawings with the same name is hardly utilitarian, so here's how we really save a sketch.

concrete5 Beginner's Guide Create and customize your own website with the Concrete5 Beginner's Guide         Autonav introduction Before we start customizing the autonav block, we're going to have a quick look at the different options and the output. It's very helpful to be familiar with all the block options as well as knowing the HTML output the block generates before you start extending the block. Preparation You may have the autonav block included in your theme, more precisely in header.php of your theme. Since we're going to play with navigation, we should undo this modification; changing the options in header.php would be a bit annoying otherwise. If you're done with this article, you might want to put the code back in place; it's mostly to make it easier to work with the custom templates we're going to build. Time for action – undoing autonav block integration Open header.php from your theme; it's located in the themes/c5book/elements directory (Code Download-ch:7). Since the following code snippet doesn't show the complete file, make sure you replace the correct lines. Everything is underneath the HTML tag with the ID header: <div id="wrapper"> <div id="page"> <div id="header_line_top"></div> <div id="header"> <?php $a = new Area('Header Nav'); $a->display($c); ?> </div> <div id="header_line_bottom"></div> Save header.php and go back to your page. Make sure the navigation is still there, if it isn't go back to edit the page and add a new autonav block in Header Nav. After you've added it, change the custom template to Header Menu. What just happened? We had to undo a modification done before this article. The code which printed the autonav block directly from the template would be fine if your navigation didn't change. However, since we're working on the autonav block for a whole article, we had to remove this code and replace it with the default code for an editable area. Autonav options The autonav block comes with a bunch of options you can use to create the correct hierarchical output of pages in your navigation. While you probably have to play around with it for a bit to get used to all the options, we're still going to look at a few possible configurations which we'll need later in this article. Autonav page structure The example configurations we're going to look at use the structure shown in the following screenshot. We won't need to tick the checkbox for system pages, which would show the dashboard and some built-in pages. We don't want to include them in our navigation anyway. It doesn't matter if your structure looks different at this point; the examples are easy to understand even if your result looks a bit different. Page order By default, the autonav block uses the sort order which you can see in the sitemap as well. This usually makes sense because it offers the biggest flexibility. Remember, you can arrange pages by dragging their icon to the place where you want the page to be. In all our examples you can choose whatever order you like; it doesn't have an effect on our templates. Example 1 - showing all pages The most basic configuration shows all pages, no matter where we are and no matter how many pages there are. This configuration is useful when you create a JavaScript-based navigation which displays subpages dynamically without reloading the page. The settings should be obvious and the result as well; it will show all pages shown in the preceding structure. When you create JavaScript drop-down navigation, you have to generate HTML code for all elements you want to show, but that doesn't necessarily mean that you want to print all elements. Assuming you've got hundreds of pages, would you like to see all of them in the drop-down menu? Probably not, and this is why you can manually specify the number of page levels you'd like to print. Use this for the drop-down navigation we're going to create later in this article. Example 2 – showing relevant subpages In the structure just shown, assume you're on About, which has two direct child pages. If we wanted to display the two subpages in the left sidebar of our page, we could use the following settings: Example 3 – showing relevant subpages starting from the top For a site where you only have a single navigation, probably on the left-hand side, you have to start at the top and include all the relevant subpages. The settings are similar, but this time we start at the top and include the level below the current subpage as well by using these settings: If you're on the About page again, you'd see all pages on the top, along with the About page and the two subpages of it. Autonav output The autonav controller produces an HTML output which is compatible with most jQuery libraries you can find. It uses an UL/LI structure to create a proper hierarchical representation of the pages we show in our navigation. Before we look at the actual output, here are some words about the process which generates the output. The autonav block controller uses all the settings you make when you add the block. It then creates an array of pages which doesn't have any children—it's a flat array. Unlike what some of you would expect, there's no real recursion in the structure which you have to process in the block template. How's an autonav block template supposed to print a hierarchical structure? That's not too difficult; there's a property called level for each element in the array. You simply have to check what happens to that level. Is the level of the current page element bigger than the one from the previous element? If yes, create a new child to the current page. Does it decrease? If yes, close the HTML tags for the child elements you created when the level increased. Does this sound a bit abstract? Let's look at a simplified, not working, but commented autonav template: <?php defined('C5_EXECUTE') or die(_("Access Denied.")); // get the list of all pages matching the selection $aBlocks = $controller->generateNav(); $nh = Loader::helper('navigation'); echo("<ul class="nav">"); // loop through all the pages foreach($aBlocks as $ni) { $_c = $ni->getCollectionObject(); // get the level of the current element. // This is necessary to create the proper indentation. $thisLevel = $ni->getLevel(); // the current page has a higher level than the previous // page which means that we have to print another UL // element to indent the next pages if ($thisLevel > $lastLevel) { echo("<ul>"); } // the current page has a lower level compared to // the previous page. We have to close all the open // LI and UL elements we've previously opened else if ($thisLevel < $lastLevel) { for ($j = $thisLevel; $j < $lastLevel; $j++) { if ($lastLevel - $j > 1) { echo("</li></ul>"); } else { echo("</li></ul></li>"); } } } // when adding a page, see "echo('<li>..." below // the tag isn't closed as nested UL elements // have to be within the LI element. We always close // them in an iteration later else if ($i > 0) { echo("</li>"); } // output the page information, name and link echo('<li><a href="' . $ni->getURL() . '">' . $ni->getName() . '</a>'); // We have to compare the current page level // to the level of the previous page, safe // it in $lastLevel $lastLevel = $thisLevel; $i++; } // When the last page has been printed, it // can happen that we're not in the top level // and therefore have to close all the child // level we haven't closed yet $thisLevel = 0; for ($i = $thisLevel; $i <= $lastLevel; $i++) { echo("</li></ul>"); } ?> The templates we're going to create don't change a lot from the default PHP template. We mostly use the HTML structure the default template generates and only add some CSS and JavaScript. Understanding every detail of the default autonav template isn't necessary, but still helps you to get the most out of the autonav block. What we must understand is the HTML structure shown as follows—it's what you'll have to work with when you create a custom navigation or layout: <ul class="nav"> <li class="nav-path-selected"> <a class="nav-path-selected" href="/">Home</a> </li> <li class="nav-selected nav-path-selected"> <a class="nav-selected nav-path-selected" href="/index.php/about/">About</a> <ul> <li> <a href="/index.php/about/press-room/">Press Room</a> </li> <li> <a href="/index.php/about/guestbook/">Guestbook</a> </li> </ul> </li> <li> <a href="/index.php/search/">Search</a> </li> <li> <a href="/index.php/news/">News</a> </li> </ul> Since you're supposed to have some HTML knowledge to read this book, it should be fairly easy to understand the preceding structure. Each new level added a new ul element which contains an li element for each page along with an a element to make it clickable. Child pages within a ul element belong to their parent, meaning that the li element of the parent is closed when all the children have been printed. The output uses the default template which adds some classes you can use to style the navigation: nav: The main ul tag contains this class. Use it to access all elements of the navigation. nav-selected: This class is assigned to the elements if they belong to the current page. nav-path-selected: This class can be found on pages which are above the current page. They belong to the path of the current page, and are thus called path-selected.

  Joomla! 1.6 First Look A concise guide to everything that's new in Joomla! 1.6. Anyone who's used to working with the previous versions of Joomla! knows the old section—category—article drill. Articles had to be part of a category and categories had to be part of a section. There were no workarounds for this rigid three-level content organization scheme. Sometimes, this required Joomla! users to adapt their content to the system's limitations (or extend Joomla!'s functionality by using more powerful content management extensions, so-called Content Construction Kits or CCKs). In Joomla! 1.6, the rigid old system has finally been replaced. Sections have gone; there are now only categories, and any category can hold as many levels of subcategories as you need. In the backend, instead of both a Section Manager and a Category Manager, you'll now find only a Category Manager. You can forget the concept of sections altogether; in Joomla!! 1.6 there's no need for them anymore, as they're no longer needed as 'containers' to hold categories. Improvement #1: categories can now be one level deep Sometimes, you'll want to organize articles in just one category. Let's say you want to add a few articles about your organization: who you are, where to reach you, and so on. You don't need any subcategories. You'd need a structure like this: In Joomla! 1.5, this simple setup of a "sectionless" category holding articles wasn't possible. You'd have to organize content in sections and categories—which implied that any group of articles would be stored two levels deep, even if you didn't need this. The only alternative was not to organize content, using uncategorized articles. In Joomla! 1.6, you can put content in just one category if you want to. Just go to Content | Category Manager | Add New Category to create a new category. In the Parent drop down box, select No parent: As this category has "No parent", it becomes a top-level or "parent" category. It's as simple as that; now you can do something that wasn't possible in Joomla! 1.5, by assigning articles directly to this category. Improvement #2: creating multiple category levels Joomla!'s old section—category—article approach didn't allow you to create categories within categories ( "nested categories"). However, on content-rich sites, you might need more than two levels of content organization and use a few subcategories. Here's an example from a site featuring product reviews. It uses several levels to organize the main category of "reviews" in subcategories of product types, brands, and models: A great advantage of being able to create such a structure is that it allows for very specific searches (that is, within categories) and multiple ways of navigation. Another example is if you are creating a catalog that you want to be searchable with multiple filters such as manufacturer, price, general item type, or a specific product name. Creating a set of 'nested' categories Let's find out how you can quickly set up a few nested categories like the ones shown in the illustration above: Go to Content | Category Manager | Add New Category. In the Title field, enter Reviews. In the Parent field, make sure that the default option No parent is selected. The screen should look like this: Click on Save & New. A message appears to confirm your action: Category successfully saved. At the same time, all the fields in the Add New Category are emptied. To create a subcategory, enter the subcategory name Cameras in the Title field. In the Parent drop-down box, select Reviews: Click on Save & New to store the subcategory. Repeat the previous three steps to create more subcategories. For each new category, first enter a title, then select the appropriate parent category and save it by clicking on Save & New. When you're done with creating subcategories, click on Save & Close to view the results in the Category Manager. In the example below, the Cameras category is parent to a subcategory Compact Cameras. The Compact Cameras category is parent to a subcategory called Canon. If you've followed the above example, you'll find the following set of categories in the Category Manager. They are displayed as shown below: The Reviews name isn't indented, as it is a top-level category. Cameras, Compact Cameras, and Canon are displayed indented as they are subcategories. When you create articles, you can now assign them to the new categories. The same category hierarchy as you've just seen in the Category Manager is displayed in the Category drop-down box: Using nested categories in the sample data You've just set up a few categories and subcategories yourself. On a complex site, you can have a far more complex structure. Don't worry, I won't ask you to create dozens of nested categories right now—but it's a good idea to learn from the example set by the Joomla! Developers. Let's have a look at the categories and articles that come with Joomla! when it is installed with sample data. The way things are organized there will give you some idea of how you can deploy nested categories and get the most out of the new system. Exploring the sample data On the frontend, click on the Sample sites link in the This Site menu. On the Sample Sites page, a new menu appears. This menu gives access to both sample sites—Australian Parks and Fruit Shop: Have a look around at both example sites. They appear to be separate websites, but they're not. Here the Joomla! developers have cunningly deployed the possibilities of the new category system and have organized all content for the three sites (the main site and two example sites) within one big website. To find out how this is done, let's have a look at the categories in the backend: Go to Content | Category Manager to see how the sample content is organized. The screenshot below shows an overview: As you can see in the screenshot above, there's one top-level category, Sample Data-Articles. All other articles are contained in the subcategories of this main level category. Apart from the top level category, there are three main categories: The Joomla! category. It has three sublevels. The Park Site category. It has two sublevels. The Fruit Shop category. It has one sublevel. Finally, there's a group of articles that's not in any category; it's a bunch of leftovers all marked as Uncategorized. How can different categories look like different sites? As you click through the example sites, not only the content changes; the menu links to each main category (such as the Parks and Fruit Shop category) have specific templates assigned to them. This way, on the frontend, the look-and-feel of the different main article categories are totally different, whereas in the backend, they're just part of one big site. Applying templates to categories can give visitors the impression of exploring a separate set of websites. Although there's no limit to the number of levels in the category hierarchy, even in this rather complex set of sample site articles, categories don't go further than four levels deep. It is possible to make more subcategories, but keep in mind that this means that your content will be stored 'deeper' in the hierarchy, possibly making it more difficult for visitors (and search engines) to find it. One benefit of placing interrelated content under its own main level category is that you can easily unpublish, delete, or archive any content dealing with a specific subject by unpublishing, deleting, or archiving this main level category. That's why the Joomla! developers have chosen to use one top-level category for all sample data. By unpublishing the top level category (Sample Data-Articles), you can unpublish all of the example content in one go. New category settings: notes and metadata When entering or editing a new category, the New Category or Edit Category screen now offer you an area to type notes about the purpose of the category or related items, as well as a place to add keywords and a description (metadata). The Note field (found in the Basic Options section) can be useful to share some extra information about the category with other backend users. For example, you can enter a short explanation about this category ('subcategory of ...'): Adding category metadata In Joomla! 1.5, there was no way to separately enter metadata for category pages. Now, you can enter specific Meta Description and Meta Keywords in the Metadata Options section when creating or editing a category. Another new item in the Basic Options of a category is the Alternative Layout select box. Alternative layouts are an advanced new feature that enable you to select a customized layout for the current category, provided the selected template (or a third-party component) provides these extra layout options. A template can contain so-called template override files, allowing for customized layouts that replace Joomla!'s default views. Using the Alternative Layout select box, you can now select the template override you want to activate for this particular item. To find out more about this feature, have a look at the "Introduction to Alternative Layouts in Version 1.6" document on the Joomlacode site. You'll find it at http://downloads.joomlacode.org/trackeritem/5/8/6/58619/introtoaltlayoutsinversion1-6v2.pdf. Fresh ways to display category contents on the frontend Joomla! 1.6 provides several additional methods to display category contents. They replace the four classic layouts of Category List, Category Blog, Section List, and Section Blog. When creating a new menu link pointing to a category, you are now presented with a slightly different set of Menu Item Types: These are the category views are available: List All Categories is a new view, described below Category Blog was previously called Category Blog Layout Category List was previously called Category List Layout The Blog and List views are basically the same as they've always been. However, these display types now offer new settings that provide more control over the look and feel of the resulting pages. Along with the new List All Categories menu item type, there are also a few new module types that provide you with new ways to display links to categories and their article contents. Let's have a closer look at the new category views. New category view # 1: List All Categories The new category system rationalizes the organization of content, even in large or complex websites. One advantage of this is that you can more easily give visitors (and search engines!) access to all that well-structured content, just by adding one menu link to a main level category. This will allow visitors to easily drill down the different layers (the category levels) of the site structure. To achieve this, the new List All Categories menu link type allows you to display categories as well as their subcategory contents. You can see an example of this menu organization if you select the Site Map link on the This Site menu in the frontend of the sample Joomla! 1.6 content. As we've previously seen, the sample data that comes with Joomla! 1.6 is organized in a structured way. The Site Map link uses the List All Categories menu item type to show all levels in the category hierarchy.  

Moodle is a really useful tool for helping teachers to monitor the progress of their students. As any teacher knows, this can be a challenge, so having everything in one place is very useful. We'll look at how you can monitor progress with an example. Checking usage and completion of tasks For you to be able to help your users learn, it goes without saying that they have to complete the tasks you set! Quite a common question is "how do I know if my users are looking at the content I make for them?" There are a variety of ways to monitor this, which vary depending on whether you are looking at a resource or an activity. Tracking usage of course materials Quite often you might set your students a task to go on to your Moodle course and read a resource that you have uploaded or follow a link to another website. While you can't know for sure that they have read the material, it is possible to check that they have displayed it on their screen. To check if users had viewed a resource, we have completion tracking. To use this feature, your administrator must enable it for your whole site and you need to turn it on in the student progress section of the course settings. This means that now you can easily see a list of users who have looked at the resource. On the pupil view, there are boxes next to items that require completion. If a teacher has specified certain conditions that need to be met, the box will automatically fill with a tick once they have been met. Users can also use this to manually track their progress towards completion if there are no criteria set for a particular task by ticking a shaded box themselves. This is shown in the following screenshot: Preparation for course completion reports The course completion report will show you which activities or resources your learners have used. To demonstrate this first you need to change some of the settings on your resources and activities, and ask your administrator to enable it in the site settings. Completion settings for resources Let's go back to a resource we uploaded in the first topic "Manufacture of magnesium sulfate" and edit it. Click on Turn editing on, which has the icon of the hand holding the pen. When the updating file dialog comes up, scroll right down to the bottom where it says Activity completion. Here you have a number of settings, as shown in the next screenshot: We're going to use the setting Show activity as complete when conditions are met. If you're happy letting your users decide to declare when they have completed an activity, you can use the setting Students can manually mark the activity as completed. This would be useful for a self review, towards pupils building a portfolio, or just to get them to take more responsibility over their learning. Once you've done this choose the conditions that need to be met. As this is a resource check the box next to Require view. These conditions vary depending on the nature of the activity. If you want to you can set a date when you expect the activity to be completed. This is just to help organize your completion report and is not shared with the users. Completion settings for activities Different activities have their own settings that you can set to decide when an activity is completed by your users. We'll go through each of these below. Forum activity completion settings You can set up activity completion for forums. In the introduction to this forum, our learners were asked to answer the most recent unanswered question and then post a question of their own. Let's use activity completion to make sure that they do this. In the same way, go to update the forum and scroll down to the activity completion settings at the bottom. You'll notice that there are a lot more options than for a resource. The activity completion settings that we'll choose are Required discussions and Require replies. Both of these will be set to one. This means that your students will need to start at least one discussion and provide at least one reply. Don't forget to set the completion tracking setting in the top drop-down box. This is what the settings will look like: Quiz activity completion For quizzes (assignments and lessons), there are two options for activity completion. You can either require your users to view the quiz or require a grade. Let's go back to the motion quiz we set up and let that require students to receive a grade to complete this activity. Here are the settings: Chat activity completion For a chat activity, the only completion option is for users to manually check the boxes completed. Once you've gone through and set the activity completion settings you will be able to see which of your activities your users have completed. Completion tracking for your whole course Now that you have set up your activities and resources to be tracked, you need to define at a course level, which activities need to be finished for course completion. From the settings block on the left-hand side, click on the link Completion tracking. This is where you decide on the criteria for course completion. We want our users to complete all of the activities chosen, so in the first box choose All for the aggregation method. If there are prerequisites for your course, you can set them here. In the activities completed box, check all of the activities you want your users to complete and specify the completion dates, if any, and passing grades. All the settings can be changed to a later date, if you wish. Course completion reports You can now set up the course completion reports. The link can be found in the navigation block on the left-hand side: Once you click on the course completion reports link, you should see something like the following: The grayed out boxes with ticks are for activities that users can manually choose completion for. So as you can see, it would be quite easy to identify which users haven't completed particular tasks. From here, you can click a user's name and send them a reminder via a message. You can also export this data if you wish. Course reports There are three different types of course reports—activity report, view course logs, and participation report. You can use them to monitor your users in slightly different ways. Activity report For the activity report, you can see a simple overview of the number of views for each activity. This could be useful if you want to see if one activity is more popular than another or if an activity is not being viewed a lot. View course logs This report shows detailed usage across the whole course. Now that we are using completion reports, you would only need to use this type of log if you wanted to check when a particular user accessed a task. Participation report This report gives you a customizable overview for each activity listed by a user. You could use this type of report to see if the users have viewed or posted to an activity or resource and then send messages directly to multiple users.

It's hard to find a web application that does not have a single table that presents the user with some data. Building these DataTables, although not very difficult, can be a daunting task because each of these tables must often support paging, sorting, filtering, and so on. Wicket ships with a very powerful component called the DataTable that makes implementing all these features simple and elegant. Because Wicket is component-oriented, once implemented, these features can be easily reused across multiple DataTable deployments. In this article, we will see how to implement the features mentioned previously using the DataTable and the infrastructure it provides. Sorting A common requirement, when displaying tabular data, is to allow users to sort it by clicking the table headers. Click a header once and the data is sorted on that column in ascending order; click it again, and the data is sorted in the descending order. In this recipe, we will see how to implement such a behavior when displaying data using a DataTable component. We will build a simple table that will look much like a phone book and will allow the sorting of data on the name and e-mail columns: Getting ready Begin by creating a page that will list contacts using the DataTable, but without sorting: Create Contact bean: Contact.java public class Contact implements Serializable { public String name, email, phone; // getters, setters, constructors2. Create the page that will list the contacts: HomePage.html <html> <body> <table wicket_id="contacts" class="contacts"></table> </body> </html> HomePage.java public class HomePage extends WebPage { private static List<Contact> contacts = Arrays.asList( new Contact("Homer Simpson", "homer@fox.com", "555-1211"), new Contact("Charles Burns", "cmb@fox.com", "555-5322"), new Contact("Ned Flanders", "green@fox.com", "555-9732")); public HomePage(final PageParameters parameters) { // sample code adds a DataTable and a data providert hat uses the contacts list created above } } How to do it... Enable sorting by letting DataTable columns know they can be sorted by using a constructor that takes the sort data parameter: HomePage.java List<IColumn<Contact>> columns = new ArrayList<IColumn<Contact>>(); columns.add(new PropertyColumn<Contact>(Model.of("Name"), "name","name")); columns.add(new PropertyColumn<Contact>(Model.of("Email"), "email", "email")); columns.add(new PropertyColumn<Contact>(Model.of("Phone"), "phone")); Implement sorting by modifying the data provider: private static class ContactsProvider extends SortableDataProvider<Contact> { public ContactsProvider() { setSort("name", true); } public Iterator<? extends Contact> iterator(int first, int count) { List<Contact> data = new ArrayList<Contact>(contacts); Collections.sort(data, new Comparator<Contact>() { public int compare(Contact o1, Contact o2) { int dir = getSort().isAscending() ? 1 : -1; if ("name".equals(getSort().getProperty())) { return dir * (o1.name.compareTo(o2.name)); } else { return dir * (o1.email.compareTo(o2.email)); } } }); return data.subList(first, Math.min(first + count, data.size())).iterator(); } public int size() { return contacts.size(); } public IModel<Contact> model(Contact object) { return Model.of(object); } } How it works... DataTable supports sorting out of the box. Any column with the IColumn#getSortProperty() method that returns a non-null value is treated as a sortable column and Wicket makes its header clickable. When a header of a sortable column is clicked Wicket will pass the value of IColumn#getSortProperty to the data provider which should use this value to sort the data. In order to know about the sorting information the data provider must implement the ISortableDataProvider interface; Wicket provides the default SortableDataProvider implementation which is commonly used to implement sort-capable data providers. DataTable will take care of details such as multiple clicks to the same column resulting in change of sorting direction, so on. Let's examine how to implement sorting in practice. In step 1 and 2, we have implemented a basic DataTable that cannot yet sort data. Even though the data provider we have implemented already extends a SortableDataProvider, it does not yet take advantage of any sort information that may be passed to it. We start building support for sorting by enabling it on the columns, in our case the name and the email columns: List<IColumn<Contact>> columns = new ArrayList<IColumn<Contact>>(); columns.add(new PropertyColumn<Contact>(Model.of("Name"), "name", "name")); columns.add(new PropertyColumn<Contact>(Model.of("Email"), "email", "email")); columns.add(new PropertyColumn<Contact>(Model.of("Phone"), "phone")); We enable sorting on the columns by using the three-argument constructor of the PropertyColumn, with the second argument being the "sort data". Whenever a DataTable column with sorting enabled is clicked, the data provider will be given the value of the "sort data". In the example, only the name and e-mail columns have sorting enabled with the sort data defined as a string with values "name" and "e-mail" respectively. Now, let's implement sorting by making our data provider implementation sort-aware. Since our data provider already extends a provider that implements ISortableDataProvider we only need to take advantage of the sort information: public Iterator<? extends Contact> iterator(int first, int count) { List<Contact> data = new ArrayList<Contact>(contacts); Collections.sort(data, new Comparator<Contact>() { public int compare(Contact o1, Contact o2) { int dir = getSort().isAscending() ? 1 : -1; if ("name".equals(getSort().getProperty())) { return dir * (o1.name.compareTo(o2.name)); } else { return dir * (o1.email.compareTo(o2.email)); } } }); return data.subList(first, Math.min(first + count, data.size())).iterator(); } First we copy the data into a new list which we can sort as needed and then we sort based on the sort data and direction provided. The value returned by getSort().getProperty() is the same sort data values we have defined previously when creating columns. The only remaining task is to define a default sort which will be used when the table is rendered before the user clicks any header of a sortable column. We do this in the constructor of our data provider: public ContactsProvider() { setSort("name", true); } There's more... DataTable gives us a lot out of the box; in this section we see how to add some usability enhancements. Adding sort direction indicators via CSS DataTable is nice enough to decorate sortable <th> elements with sort-related CSS classes out of the box. This makes it trivial to implement sort direction indicators as shown in the following screenshot: A possible CSS style definition can look like this: table tr th { background-position: right; background-repeat:no-repeat; } table tr th.wicket_orderDown { background-image: url(images/arrow_down.png); } table tr th.wicket_orderUp { background-image: url(images/arrow_up.png); } table tr th.wicket_orderNone { background-image: url(images/arrow_off.png);

  Moodle 1.9 Testing and Assessment Develop and evaluate quizzes and tests using Moodle modules         Read more about this book       (For more resources on Moodle, see here.) Workshop is an important part of our look at testing and assessing with Moodle. Here we will look at Workshop, which offers a way to interact and assess students through their submitted work as well as offering the option of self-assessment, peer assessment, and teacher assessment. The first thing we need to do is name the Workshop and give it a description. We will call ours Paragraph Writing Workshop. In the description, we will write a brief summary of what is expected. We are going to test our students on their ability to write a paragraph on a topic of their choosing, with the requirements being that they have a main idea, supporting sentences, and a conclusion. Now, we need to choose our settings. For our first Workshop, we're going to leave most of the settings at the default. The first settings we are going to change are the Grade for Submission and Grade for Assessments. We want our Workshop to be worth 100 points, with each aspect, the teacher and peer assessment, of the Workshop making up half the grade, 50 percent and 50 percent respectively. The other setting we're going to change is Number of Comments, Assessment Elements, Grade Bands, which we will move from one to three. We are moving it to three because our paragraph has three elements we are going to evaluate: main idea, support, and conclusion. Once we've made that change in the Workshop, we will save it. The first thing we see after saving the Workshop is Editing Assessment Elements, since we decided to stay with the default Accumulative grading technique. We have three Elements to complete here, and for Element 1 we are going to enter 'Has a main idea.' For Element 2 we are going to enter 'Has supporting sentences.' For Element 3 we are going to enter 'Has a conclusion.' For each Type of Scale menu, we are going to leave it set to the two point Yes or No scale, since we are simply going to be checking whether or not the paragraph has met the requirements set. We are also going to leave the Element Weight set at 1, since we want each Element to be equal. Once we have entered everything and confirmed the spelling, we click on Save changes. Once the page has been saved, we are taken to the Paragraph Writing Workshop page. Workshop page—Teacher's view This page has all the information you need regarding the Workshop. It has three sections, which give us all the details about the Workshop. The top section is shown in the next screenshot: Here, we have the information about the phase the Workshop is in. The phases are Set up Assignment, Allow Submissions, Allow Submissions and Assessments, Allow Assessments, Calculation of Final Grades, and Show Final Grades. The phases let us know where we are in the Workshop. As you can see, we are in the Allow Submissions and Assessments phase. We also see the start and end of submissions and assessments. The final information contained in this section is the Maximum grade. Here, we see that our maximum grade is 100. This is because we changed the settings from default and the Grade for Assessments and Grade for Submission were both set to 50. Next to the Maximum grade, we see the Specimen Assessment Form link. Clicking on this link will bring us to a sample of the Assessment Sheet we created. This is shown in the next screenshot: I have only shown the first Element here, and the others follow the same pattern. At the top we see the date and time. Under that, we see the criterion we are assessing in the submitted work. Following this, we see the Grade. We have chosen to use a simple 2 Point Scale, Yes or No, so we are presented with just that. Under this we see an area for comments regarding Element 1. Underneath all of the Elements of the Assessment sheet, there is a box for general feedback or comments, which is not graded. At the very bottom of the page, you will see a continue button. Clicking on this will bring you back to the Workshop page. The final thing to mention here is that next to the Specimen Assessment Form link, there is an Edit icon. This can come in handy if you missed something or want to change something in one of the Elements. The second section of the Workshop page is shown here: (Move the mouse over the image to enlarge.) In the previous screenshot, we see the Show Workshop Description link. Clicking on this link will show the description entered when the Workshop was created. Once review of the Workshop description is done, click on the continue button to return to the Workshop page. Under this, we see information about submitted assignments. There are five columns, First Name / Surname, Submission Title, Date, Teacher Assessment, and Total Grade. Under this, in the small letters, we see information about how to interpret the grades as well as the total possible points. Each of these columns will display the appropriate information, and we will look at this again once we submit an assignment. The final section we see on the Workshop page is called Grading Grade Analysis and is shown in the next screenshot: We can see the Count, Mean, Standard Deviation, Maximum, and Minimum in the previous screenshot. Again, we have not submitted any work or assessed anything yet, so there is nothing here. However, once scores are entered into the Workshop, these numbers will be automatically calculated and updated. Now, all we need to do is have our students log into Moodle and they will see the Workshop and they will be able to enter and begin using it. Workshop page—Student's view When the students enter the Workshop, they will see a page that looks a bit different than the one we have just looked at. This is shown in the next screenshot: As you can see, at the top of the page, they see the same thing as the instructor. The student can see the Current phase, which has now moved to the third phase, Allow Submissions and Assessments. It moved to the third Phase because we set the opening for Submissions and Assessments at the same time. We would have seen the second Phase if we had set the Submission and Assessment times to be different. Students will also see the Workshop submission's and assessment's open and close dates and the Maximum grade possible for the Workshop. They are also able to preview the Assessment Form that will be used. This preview is identical to the one the instructor sees. Under this, the students will see the description of the Workshop with the instructions on how they should complete it. Under the Workshop description, we see the Assignment Submission Form. Here is where the students enter their work. There are three things that are done with this form. First, the student will need to create a title in the Submission Title box. Submission Titles Since Workshop is mostly about peer assessments, you may want to control the way titles are handled. While we can hide the student's name from the peer assessor, the title will always be visible. You may want to have students to use an anonymous system, numbers or some other form of code, so that there is no bias in grading. The second thing the students will do is enter their work in the Submission rich text editor. If there were any attachments included as part of the assignment, they would be seen directly below the textbox. When the students have finished with their submission, they click on the Submit Assignment button and the work will be uploaded to a new area called Your Submissions. What a student sees after clicking on the Submit Assignment button is shown in the next screenshot: This newly created section has four pieces of information for the student to see. The first is the Submission Title. Clicking on the title link will bring the student to a new page where they can view their work. The second section is the Action link. If the student is not satisfied with their work, they have the option to either edit or delete it. Clicking on the Edit link will bring the student to the submission screen where they can change whatever they would like, including uploading additional files, should this feature be enabled. The Delete link will permanently erase the file, but as a safeguard, Workshop will offer the student one chance to change their mind before completely erasing the file. The third is the column that shows the date the assignment was submitted. If the assignment is edited, the time of the editing will be reflected in the Submitted column. This can cause a problem for instructors if the deadline for submissions is not set properly. For example, say a student submits the work on time and as they are reviewing the work later in the week, they notice a misspelling, which they edit. The submitted time will be changed to reflect the last edit completed. The final column is Assessments. This is where the student can see how many times they have been assessed. We have no assessments yet, but we do now have a newly submitted piece of work, so we will switch back to our Teacher profile and look at the changes that have taken place.  

In this article, we will see the default layout structure of OpenCart. We'll discuss the cascading stylesheet file from it and modify it according to our needs. First of all, we'll use the reset style properties to eliminate cross-browser problems. We will discuss every property here. We'll also see the corresponding effects on our site. Then, we'll do some basic styling for the site. For each change in style, we will see why we did that. Folder structure In our main OpenCart folder, we have the admin and catalog sections. These are two separate subsystems. As the name says, admin has the files and folders for administration operation. Catalog contains the store files and folders. Each admin and catalog section has a separate model, view, and controller. Under this admin and catalog folder, we will see the model, view, and controller folders. You will see different subfolders within those folders. So, let's discuss this MVC structure in the following paragraph. OpenCart is built with the MVC design pattern. So, it has model, view, and controller. A user requests the OpenCart controller to process the request. Then, the controller gets the data using the model and processes the fetched data to show the response with the view file. The following figure shows the above operation of MVC: For theme modification, we will focus only on the View folder of the catalog in this article. It has javascript and theme folders. We place our themes under the theme folder and the necessary JavaScript files in the JavaScript folder. Each theme has an image, stylesheet, and template folder. We will see how we can create a new theme later in this article. Theme file style As we stated earlier, OpenCart uses the MVC design pattern. So, the view files remain separated from the core code. These files are .tpl files. And, they are placed under catalogviewthemedefaulttemplate. These .tpl files are basically HTML files. They have PHP code within them to display the necessary data. OpenCart doesn't use the smarty template engine. Rather, it uses embedded PHP codes that are easy to use. We assign the PHP variables in the controller with necessary data. Then, we call the variable in the .tpl view file. We can also use the global class reference variable. In the controller, we will assign the value like this: $this->data['shop_name'] = 'store'; Here, we assigned store value to the shop_name variable. In the .tpl view file, we will display the value like this: <?php echo $shop_name; ?> Creating a new theme In this recipe, we will see the steps to create a new theme for OpenCart. There are some rules to create OpenCart themes. Getting started Let's get started with the steps to create a new theme with OpenCart. How to do it Following are the steps for creating a new theme for OpenCart: First of all, we need to create a new folder under catalogviewtheme. For example, we will name it shop for this project. Now, we need to copy some files from the default theme folder to our new theme folder. The files are the following: catalogviewthemedefaultstylesheet*.* catalogviewthemedefaultimage*.* catalogviewthemedefaulttemplatecommonheader.tpl We have to edit some values in the header.tpl file for our new theme. We will replace all default keywords with our new theme name shop. Actually, there are six places where we need to replace the new theme name. The lines are the following: <link rel="stylesheet" type="text/css" href="catalog/view/theme/shop/stylesheet/stylesheet.css" /> // other lines ... <link rel="stylesheet" type="text/css" href="catalog/view/theme/shop/stylesheet/ie6.css" /> //other lines ... <div class="div3"> <a href="<?php echo str_replace('&', '&amp;', $special); ?>" style="background-image: url('catalog/view/theme/shop/image/special.png');"> <?php echo $text_special; ?></a> <a onclick="bookmark(document.location, '<?php echo addslashes($title); ?>');" style="background-image: url('catalog/view/theme/shop/image/bookmark.png');"> <?php echo $text_bookmark; ?></a><a href="<?php echo str_replace('&', '&amp;', $contact); ?>" style="background-image: url('catalog/view/theme/shop/image/contact.png');"><?php echo $text_contact; ?></a><a href="<?php echo str_replace('&', '&amp;', $sitemap); ?>" style="background-image: url('catalog/view/theme/shop/image/sitemap.png');"><?php echo $text_sitemap; ?></a></div> //other lines ... And now, save it. Now, we will go to the admin area. First log in with our stored admin credentials. Go to System | Settings in the admin panel: We will go to the Store tab. We will change the theme from default to shop, our new theme from a select list. You can make changes on your theme's CSS file. Resetting layout styles Before beginning our theme styling work, we must first reset all the styles. This will help us with cross-browser problems. Getting started We need to modify the stylesheet.css file of our new theme first. We will go to catalogviewthemeshopstylesheet. And open up stylesheet.css in our favourite editor. How to do it Now, we will add reset styles to our stylesheet.css file. First, we need to change the browser's margin, padding, and border properties. We will set styles for several different HTML tags. We can add extra style properties into it: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } We will see the effect of our code in our store. The product images will come closer now. We adjust the line height of body tag. So, put the following code in the CSS file. body { line-height: 1; } This also squeezes the lines in the body element. The following image depicts this: By applying the above style, the line height of these tabs becomes shortened. We need to reset the style for ordered/unordered list elements. Hence, we use the following reset value: ol, ul { list-style: none; } It shows all the ul, ol tags without the default bullet properties. Now, we will reset the blockquote element styles. We will find the changes if we use blockquotes in our HTML code: blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } For all the elements, we are going to change the focus-styling attributes. We change the outline properties to 0. We set the styles like the following: :focus { outline: 0; } There could be some styling for insert and deletion in some browsers. So, we will use this styling for the purpose: ins { text-decoration: none; } del { text-decoration: line-through; } We will control the styling of our tables also. We set the border and spacing qualities like the following: table { border-collapse: collapse; border-spacing: 0; } We still need to set the attribute cell-spacing to 0. So, our reset styling becomes the following: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } We can place it at the start of our site's style file stylesheet.css, or we can create a new file and put the content there also. To do that, just create a new CSS file within the catalogviewthemeshopstylesheet folder. For example, we can name the new style file as reset.css. If we use a new style file, then we need to add the style file in the controller.  

  IBM Lotus Domino: Classic Web Application Development Techniques A step-by-step guide for web application development and quick tips to enhance applications using Lotus Domino Most of the CSS rules you write for an application relate to design elements on forms and pages. Suggestions and examples in this section just scratch the surface of CSS possibilities. Browse the Web for additional ideas. Here we focus on the mechanics of how elements are styled, rather than on specific recommendations about what looks good, which is largely a matter of taste. Use color effectively Use pleasing, complementary colors. If your organization requires a specific set of colors, then, of course, find out what that palette is and conform to it as much as possible. Color tastes change over the years, primary colors dominating at times and lighter pastels in vogue at others. Here are a few generalities to consider: Use white or very light colors for backgrounds Use stronger colors such as dark red to make important elements stand out Use no more than three or four colors on a form Use black or dark gray text on a light background for lengthy text passages If you have paid little attention to the matter of color in your applications, do some web work on the subject. Once you select a color scheme, provide some samples to your customers for their opinions and suggestions. Style text Typography is a complex topic with a rich history and strong opinions. For web application design purposes, consider using web-safe fonts which are likely to be available on most or all personal computers. If you use a font that is not available to a browser, then text is rendered with a default font. Fonts with serifs are usually considered easier to read on paper, and less so as web page text. Experiment with the following fonts: Bookman Old Style Cambria Garamond Georgia Times New Roman Common fonts without serifs (sans serif) are considered easier to read on the Web. Some examples include: Arial Calibri Helvetica MS Sans Serif Tahoma Trebuchet MS Verdana Mono-spaced fonts are useful when you want text to line up—columns of numbers in a table, perhaps: Courier New Courier Establish a common font style with CSS rules applied to the body type selector or to a main division using a type selector, a class selector, or an ID selector: body { color: #555555; font-family: Verdana; font-size: 8pt; } Style headings and labels If headings and labels are bracketed with HTML heading tags (for example, <h1> or <h2gt;), they can be styled with type selectors: h1 { color: Blue; font-family: Arial; font-size: 18pt; font-weight: bold; } If headings and labels are bracketed with <span> tags, use CSS classes: <span class="highlight1">October News</span> Underline links in text but not in menus When browsers and the Web first appeared in the early 1990's, hyperlinks were a novelty. To distinguish a link from normal text, the convention developed to underscore the text containing the link, and often the link text was colored blue. There is no magic associated with underscoring and making text blue—it was just the convention adopted at the time. Today links in text passages are usually distinguished from adjacent text with color, weight or underscoring. In a menu, however, each item is understood to be a hotspot link. Underscores and blue text are not required. So if you feel like underscoring a link, do so if the link appears within some text, but don't underscore links in menus. At the same time, refrain from highlighting important text with underscoring, which implies that that text is a hyperlink. Use another highlighting technique; italics, bold, or an alternate color work well for this purpose. Style fields Fields can be styled with CSS either with the Style attribute in Field Properties or with CSS rules. The key to understanding how CSS rules can be applied to fields is to understand that fields are translated to the Web using <input> tags. Here is how a simple text field translates into HTML: <input name="FirstName" value=""> Here is how a radio button field translates: <input name="%%Surrogate_Gender" type="hidden" value="1"> <label><input type="radio" name="Gender" value="M">M</label><br> <label><input type="radio" name="Gender" value="F">F</label><br> CSS rules can be defined for the <input> tag, an ID, or a class. For example, assume that a CSS class named requiredtext is defined. If that class name is entered in the Class attribute of Field Properties, the resulting HTML might look like this: <input name="FirstName" value="" class="requiredtext"> CSS style rules coded for the requiredtext class are applied to the field. Highlight required fields Required fields are validated, most likely with JavaScript code, so that complete and good data is saved into the database when a document is submitted. If entered values fail validation, the user is presented with a message of some sort that identifies the problem and requests correction. Web forms typically identify which fields are required. Any of several techniques can be used. Required field labels can be styled with a more prominent color or a special marker such as an asterisk or a checkmark can be positioned near the field. Required fields also can be co-located and set apart using the <fieldset> and <legend> tags. If a field value fails validation, it is common practice to provide an error message and then to set the focus into the field; the cursor is positioned in the field to facilitate an immediate correction. As the cursor can be difficult to spot on a busy form, it is also possible to change the background color of the incorrect field as a way of drawing the user's attention to the field. In this illustration, the background color of the field has been changed to yellow: Implementing this technique requires writing a small JavaScript function that changes the background color of the field, and then calling that function when field validation fails.

Getting started with Moodle tests To start with, we need to select a topic or theme for our test. We are going to choose general science, since the subject matter will be easy to incorporate each of the item types we have seen previously. Now that we have an idea of what our topic is going to be, we will get started in the creation of the test. We will be creating all new questions for this test, which will give us the added benefit of a bit more practice in item creation. So, let's get started and work on making our first real test! Let's open our Moodle course, go to the Activity drop-down, and select Create a new Quiz. Once it has been selected, we will be taken to the Quiz creation page and we'll be looking at the General section. The General section Here need to give the test a name that describes what the test is going to cover. Let's call it 'General Science Final Exam' as it describes what we will be doing in the test. The introduction is also important.this is a test students will take and an effective description of what they will be doing is an important point for them. It helps get their minds thinking about the topic at hand, which can help them prepare, and a person who is prepared can usually perform better. For our introduction, we will write the following, 'This test will see how much you learned in our science class this term. The test will cover all the topics we have studied, including, geology, chemistry, biology, and physics. In this test, there are a variety of question types (True/False, Matching, and others). Please look carefully at the sample questions before you move on. If you have any questions during the test, raise your hand. You will have 'x' attempts with the quiz. We have now given the test an effective name and we have given the students a description of what the test will cover. This will be shown in the Info tab to all the students before they take the test, and if we want in the days running up to the test. That's all we need to do in this section. Timing In this section, we need to make some decisions about when we are going to give the test to the students. We will also need to make a decision about how long we will give the students to complete the test. These are important decisions, and we need to make sure we give our students enough time to complete the test. The default Timing section is shown in the next screenshot: We probably know when our final exam will be. So, when we are creating the test, we can set the date that the test will be available to the students and the date it will stop being accessible to them. Because this is our final exam, we only want it to be available for one day, for a specified time period. We will start by clicking on the Disable checkboxes next to Open the Quiz and Close the Quiz dates. This step will enable the date/time drop-down menus and allow us to set them for the test. For us, our test will start on March 20, 2010 at 16:55 p.m. and it will end the same day, one hour later. So we will change the appropriate menus to reflect our needs. If these dates are not set, a student in the course will be able to take the quiz any time after you finish creating it. We will need to give the students time to get in class, settle down, and have their computers ready. However, we also need to make sure the students finish the test in our class, so we have decided to create a time limit of 45 minutes. This means that the test will be open for one hour, and in that one hour time frame, once they start the test, they will have 45 minutes to finish it. To do this, we need to click on the Enable checkbox next to the Time Limit (minutes) textbox. Clicking on this will enable the textbox, and in it we will enter 45. This value will limit the quiz time to 45 minutes, and will show a floating, count-down timer in the test, causing it to auto-submit 45 minutes after it is started. It is good to note that many students get annoyed by the floating timer and its placement on the screen. The other alternative is to have the test proctor have the students submit the quiz at a specified time. Now, we have decided to give a 45 minute time limit on the test, but without any open-ended questions, the test is highly unlikely to take that long. There is also going to be a big difference in the speed at which different students work. The test proctor should explain to the students how much time they should spend on each question and reviewing their answers. Under the Time Limit (minutes) we see the Time delay between first and second attempt and Time delay between later attempts menus. If we are going to offer the test more than once, we can set these, which would force the students to wait until they could try again. The time delays range from 30 minutes to 7 days, and the None setting will not require any waiting between attempts on the quiz. We are going to leave these set to None because this is a final exam and we are only giving it once. Once all the information has been entered into the Timing section, this dialog box is what we have, as shown in the next screenshot: Display Here, we will make some decisions about the way the quiz will look to the students. We will be dividing questions over several pages, which we will use to create divisions in the test. We will also be making decisions about the shuffle questions and shuffle within questions here. Firstly, as the test creators, we should already have a rough idea of how many questions we are going to have on the test. Looking at the Questions Per Page drop-down menu, we have the option of 1 to 50 questions per page. We have decided that we will be displaying six questions per page on the test. Actually, we will only have five questions the students will answer, but we also want to include a description and a sample question for the students to see how the questions look and how to answer them' thus we will have six on each page. We have the option to shuffle questions within pages and within questions. By default, Shuffle Questions is set to No and Shuffle within Questions is set to Yes. We have decided that we want to have our questions shuffled. But wait, we can't because we are using Description questions to give examples, and if we chose shuffle, these examples would not be where they need to be. So, we will leave the Shuffle Questions setting at the default No. However, we do want to shuffle the responses within the question, which will give each student a slightly different test using the same questions and answers. When the display settings are finished, we can see the output shown in the next screenshot: Attempts In this section, we will be setting the number of attempts possible and how further attempts are dealt with. We will also make a decision about the Adaptive Mode. Looking at the Attempts allowed drop-down menu, we have the option to set the number from 1 to 10 or we can set it to Unlimited attempts. For our test, we have already decided to set the value to 1 attempt, so we will select 1 from the drop-down menu. We have the option of setting the Each Attempt Builds on the Last drop-down menu to Yes or No. This feature does nothing now, because we have only set the test to have a single attempt. If we had decided to allow multiple attempts, a Yes setting would have shown the test taker all the previous answers, as if the student were taking the test again, as well as indicating whether he or she were correct or not. If we were giving our students multiple attempts on the test, but we did not want them to see their previous answers, we would set this to No. We are also going to be setting Adaptive mode to No. We do not want our students to be able to immediately see or correct their responses during the test; we want the students to review their answers before submitting anything. However, if we did want the students to check their answers and correct any mistakes during the test, we would set the Attempts Allowed to a number above 1 and the Adaptive Mode to Yes, which would give us the small Submit button where the students would check and correct any mistakes after each question. If multiple attempts are not allowed, the Submit button will be just that, a button to submit your answer. Here is what the Attempts section looks like after we have set our choices: Grades In this section, we will set the way Moodle will score the student. We see three choices in this section, Grading method, Apply penalties, and Decimal digits in grades; however, because we have only selected a single attempt, two of these options will not be used. Grading Method allows us to determine which of the scores we want to give our student after multiple tries. We have four options here: Highest Grade, Average Grade, First Attempt, and Last Attempt. Highest Grade uses the highest grade achieved from any attempt on any individual question. The Average Grade will take the total number of tries and grades and average them. The First Attempt will use the grade from the first attempt and the Last Attempt will use the grade from the final attempt. Since we are only giving one try on our test, this setting has no function and we will leave it set at its default, Highest Grade, because either option would give the same result. Apply penalties is similar to Grading method, in that it does not function because we have turned off Adaptive Mode. If we had set Adaptive Mode to Yes, then this feature would give us the option of applying penalties, which are set in the individual question setup pages. If we were using Adaptive Mode and this option feature set to No, then there would be no penalties for mistakes as in previous attempts. If it were set to Yes, the penalty amount decided on in the question would be subtracted for each incorrect response from the total points available on the question. However, our test is not set to Adaptive Mode, so we will leave it at the default setting, Yes. It is important to note here that no matter how often a student is penalized for an incorrect response, their grade will never go below zero. The Decimal digits in grades shows the final grade the student receives with the number of decimal places selected here. There are four choices available in this setting: 0, 1, 2, and 3. If, for example, the number is set to 1, the student will receive a score calculated to 1 decimal place, and the same follows for 2 and 3. If the number is set to 0, the final score will be rounded. We will set our Decimal digits in grades to 0. After we have finished, the Grades section appears as shown in the next screenshot: Review options This sectopm is where we set when and what our students will see when they look back at the test. There are three categories: Immediately after the attempt; Later, while quiz is still open; and After the quiz is closed. The first category, Immediately after the attempt, will allow students to see whatever feedback we have selected to display immediately after they click on the Submit all and finish button at the end of the test, or Submit, in the case of Adaptive mode. The second category, Later, while quiz is still open, allows students to view the selected review options any time after the test is finished, that is, when no more attempts are left, but before the test closes. Using the After the quiz is closed setting will allow the student to see the review options after the test closes, meaning that students are no longer able to access the test because a close date was set. The After the quiz is closed option is only useful if a time has been set for the test to close, otherwise the review never happens because the test doesn't ever close. Each of these three categories contains the same review options: Responses, Answers, Feedback, General feedback, Scores, and Overall feedback.Here is what these options do: Responses are the student's response to the question and whether he or she were wrong or correct. Answers are the correct response to the question. Feedback is the feedback you enter based on the answer the student gives. This feedback is different from the General quiz feedback they may receive. General feedback are the comments all students receive, regardless of their answers. Scores are the scores the student received on the questions. Overall feedback are the comments based on the overall grade on the test. We want to give our students all of this information, so they can look it over and find out where they made their mistakes, but we don't want someone who finishes early to have access to all the correct answers. So, we are going to eliminate all feedback on the test until after it closes. That way there is no possibility for the students to see the answers while other students might still be taking the test. To do remove such feedback, we simply unclick all the options available in the categories we don't want. Here is what we have when we are finished: Regardless of the options and categories we select in the Review options, students will always be able to see their overall scores. Looking at our settings, the only thing a student will be able to view immediately after the test is complete is the score. Only after the test closes, will the student be able to see the full range of review material we will be providing. If we had allowed multiple attempts, we would want to have different settings. So, instead of After the quiz is closed, we would want to set our Review options to Immediately after the attempt, because this setting would let the student know where he or she had problems and which areas of the quiz need to be focussed on. One final point here is that even a single checkbox in any of the categories will allow the student to open and view the test, giving the selected review information to the student. This option may or may not be what you want. Be careful to ensure that you have only selected the options and categories you want to use. Security This section is where we can increase quiz security, but it is important to note that these settings will not eliminate the ability of tech-savvy students to cheat. What this section does is provide a few options that make cheating a bit more difficult to do. We have three options in this section: Browser security, Require password, and Require network address. The Browser security drop-down has two options: None and Full screen popup with some JavaScript security. The None option is the default setting and is appropriate for most quizzes. This setting doesn't make any changes in browser security and is the setting you will most likely want to use for in-class quizzes, review quizzes, and others. Using the fullscreen option will create a browser that limits the options for students to fiddle things. This option will open a fullscreen browser window with limited navigation options. In addition to limiting the number of navigation options available, this option will also limit the keyboard and mouse commands available. This option is more appropriate for high-stakes type tests and shouldn't be used unless there is a reason. This setting also requires that JavaScript is used. Browser security is more a safety measure against students pressing the wrong button than preventing cheating, but can help reduce it. The Require password does exactly what you think it would. It requires the students to enter a password before taking the test. To keep all your material secure, I recommend using a password for all quizzes that you create. This setting is especially important if you are offering different versions of the quiz to different classes or different tests in the same class and you want to make sure only those who should be accessing the quiz can. There is also an Unmask checkbox next to the password textbox. This option will show you the password, just in case you forget! Finally, we have the Require network address option, which will only allow those at certain IP Addresses to access the test. These settings can be useful to ensure that only students in the lab or classroom are taking the test. This setting allows you to enter either complete IP Addresses (for example. 123.456.78.9), which require that specific address to begin the test; partial IP Addresses (for example 123.456), which will accept any address as long as it begins with the address prefixes; and what is known as Classless Inter-Domain Routing (CIDR) notation, (for example 123.456.78.9/10), which only allows specific subnets. You might want to consult with your network administrator if you want to use this security option. By combining these settings, we can attempt to cut down on cheating and improper access to our test. In our case here, we are only going to use the fullscreen option. We will be giving the test in our classroom, using our computers, so there is no need to turn on the IP Address function or require a password. When we have finished, the Security section appears as shown in the next screenshot:

  concrete5 Beginner's Guide Create and customize your own website with the Concrete5 Beginner's Guide What's a package? Before we start creating our package, here are a few words about the functionality and purpose of packages: They can hold a single or several themes together You can include blocks which your theme needs You can check the requirements during the installation process in case your package depends on other blocks, configurations, and so on A package can be used to hook into events raised by concrete5 to execute custom code during different kind of actions You can create jobs, which run periodically to improve or check things in your website These are the most important things you can do with a package; some of it doesn't depend on packages, but is easier to handle if you use packages. It's up to you, but putting every extension in a package might even be useful if there's just a single element in it—why? You never have to worry where to extract the add-on. It always belongs in the packages directory An add-on wrapped in a package can be submitted to the concrete5 marketplace allowing you to earn money or make some people in the community happy by releasing your add-on for free Package structure We've already looked at different structures and you are probably already familiar with most of the directories in concrete5. Before we continue, here are a few words about the package structure, as it's essential that you understand its concept before we continue. A package is basically a complete concrete5 structure within one directory. All the directories are optional though. No need to create all of them, but you can create and use all of them within a single package. The directory concrete is a lot like a package as well; it's just located in its own directory and not within packages. Package controller Like the blocks we've created, the package has a controller as well. First of all, it is used to handle the installation process, but it's not limited to that. We can handle events and a few more things in the package controller; there's more about that later in this article. For now, we only need the controller to make sure the dashboard knows the package name and description. Time for action - creating the package controller Carry out the following steps: First, create a new directory named c5book in packages. Within that directory, create a file named controller.php and put the following content in it: <?php defined('C5_EXECUTE') or die(_("Access Denied.")); class c5bookPackage extends Package { protected $pkgHandle = 'c5book'; protected $appVersionRequired = '5.4.0'; protected $pkgVersion = '1.0'; public function getPackageDescription() { return t("Theme, Templates and Blocks from concrete5 for Beginner's"); } public function getPackageName() { return t("c5book"); } public function install() { $pkg = parent::install(); } } ?> You can create a file named icon.png 97 x 97 pixels with 4px rounded transparent corners. This is the official specification that you have to follow if you want to upload your add-on to the concrete5 marketplace. Once you've created the directory and the mandatory controller, you can go to your dashboard and click on Add Functionality. It looks a lot like a block but when you click on Install, the add-on is going to appear in the packages section. What just happened? The controller we created looks and works a lot like a block controller, which you should have seen and created already. However, let's go through all the elements of the package controller anyway, as it's important that you understand them: pkgHandle: A unique handle for your package. You'll need this when you access your package from code. appVersionRequired: The minimum version required to install the add-on. concrete5 will check that during the installation process. pkgVersion: The current version of the package. Make sure that you change the number when you release an update for a package; concrete5 has to know that it is installing an update and not a new version. getPackageDescription: Returns the description of your package. Use the t-function to keep it translatable. getPackageName: The same as above, just a bit shorter. install: You could remove this method in the controller above, since we're only calling its parent method and don't check anything else. It has no influence, but we'll need this method later when we put blocks in our package. It's just a skeleton for the next steps at the moment. Moving templates into package Remember the templates we've created? We placed them in the top level blocks directory. Worked like a charm but imagine what happens when you create a theme which also needs some block templates in order to make sure the blocks look like the theme? You'd have to copy files into the blocks directory as well as themes. This is exactly what we're trying to avoid with packages. It's rather easy with templates; they work almost anywhere. You just have to copy the folder slideshow from blocks to packages/c5book/blocks, as shown in the following screenshot: This step was even easier than most things we did before. We simply moved our templates into a different directory—nothing else. concrete5 looks for custom templates in different places like: concrete/blocks/<block-name>/templates blocks/<block-name>/templates packages/<package-name>/blocks/<block-name>/templates It doesn't matter where you put your templates, concrete5 will find them. Moving themes and blocks into the package Now that we've got our templates in the package, let's move the new blocks we've created into that package as well. The process is similar, but we have to call a method in the installer which installs our block. concrete5 does not automatically install blocks within packages. This means that we have to extend the empty install method shown earlier. Before we move the blocks into the package you should remove all blocks first. To do this, go to your dashboard, click on Add Functionality, click on the Edit button next to the block you want to move, and click on the Remove button in the next screen. We'll start with the jqzoom block. Please note; removing a block will of course, remove all the blocks you've added to your pages. Content will be lost if you move a block into a package after you've already used it. Time for action – moving jQZoom block into the package Carry out the following steps: As mentioned earlier, remove the jqzoom block from you website by using the Add Functionality section in your dashboard. Move the directory blocks/jqzoom to packages/c5book/blocks. Open the package controller we created a few pages earlier; you can find it at packages/c5book/controller.php. The following snippet shows only a part of the controller, the install method. The only thing you have to do is insert the highlighted line: public function install() { $pkg = parent::install(); // install blocks BlockType::installBlockTypeFromPackage('jqzoom', $pkg); } Save the file and go to your dashboard again. Select Add Functionality and locate the c5book package; click on Edit and then Uninstall Package and confirm the process on the next screen. Back on the Add Functionality screen, reinstall the package again, which will automatically install the block. What just happened? Besides moving files, we only had to add a single line of code to our existing package controller. This is necessary, because blocks within packages aren't automatically installed. When installing a package, only the install method of the controller is called, exactly the place where we hook into and install our block. The installBlockTypeFromPackage method takes two parameters: The block handle and the package object. However, this doesn't mean that packages behave like namespaces. What does this mean? A block is connected to a package. This is necessary in order to be able to uninstall the block when removing the package along with some other reasons. Even though there's a connection between the two objects, a block handle must be unique across all packages. You've seen that we had to remove and reinstall the package several times while we only moved a block. At this point, it probably looks a bit weird to do that, especially as you're going to lose some content on your website. However, when you're more familiar with the concrete5 framework, you'll usually know if you're going to need a package and make that decision before you start creating new blocks. If you're still in doubt, don't worry about it too much and create a package and not just a block. Using a package is usually the safest choice. Don't forget that all instances of a block will be removed from all pages when you uninstall the block from your website. Make sure your package structure doesn't change before you start adding content to your website. Time for action - moving the PDF block into the package Some blocks depend on helpers, files and libraries, which aren't in the block directory. The PDF generator block is such an example. It depends on a file found in the tools directory in the root of your concrete5 website. How do we include such a file in a package? Move the pdf directory from blocks to packages/c5book/blocks since we also want to include the block in the package. Locate the c5book directory within packages and create a new subdirectory named tools. Move generate_pdf.php from tools to packages/c5book/tools. Create another directory named libraries in packages/c5book. Move the mpdf50 from libraries to packages/c5book/libraries. As we've moved two objects, we have to make sure our code looks for them in the right place. Open packages/c5book/tools/generate.php and look for Loader::library at the beginning of the file. We have to add a second parameter to Loader::library, as shown here: <?php defined('C5_EXECUTE') or die(_("Access Denied.")); Loader::library('mpdf50/mpdf', 'c5book'); $fh = Loader::helper('file'); $header = <<<EOT <style type="text/css"> body { font-family: Helvetica, Arial; } h1 { border-bottom: 1px solid black; } </style> EOT; Next, open packages/c5book/blocks/pdf/view.php. We have to add the package handle as the second parameter to make sure the tool file is loaded from the package. <!--hidden_in_pdf_start--> <?php defined('C5_EXECUTE') or die(_('Access Denied.')); $nh = Loader::helper('navigation'); $url = Loader::helper('concrete/urls'); $toolsUrl = $url->getToolsURL('generate_pdf', 'c5book'); $toolsUrl .= '?p=' . rawurlencode($nh->getLinkToCollection($this- >c, true)); echo "<a href="{$toolsUrl}">PDF</a>"; ?> <!--hidden_in_pdf_end--> What just happened? In the preceding example, we put got a file in the tools directory and a PDF generator in the libraries directory, which we had to move as well. Even at the risk of saying the same thing several times: A package can contain any element of concrete5—libraries, tools, controllers, images, and so on. By putting all files in a single package directory, we can make sure that all files are installed at once, thus making sure all dependencies are met. Nothing has changed beside the small changes we've made to the commands, which access or load an element. A helper behaves like a helper, no matter where it's located. Have a go hero – move more add-ons We've moved two different blocks into our new package, along with the slideshow block templates. These aren't all blocks we've created so far. Try to move all add-ons we've created into our new package. If you need more information about that process, have a look at the following page: http://www.concrete5.org/documentation/developers/system/packages/

In this CakePHP tutorial, you'll learn how to set up a basic authentication system. Follow the recipes and you'll find all the code you need. Setting up a basic authentication system The first task to be completed when we are in the process of adding authentication to an application is to identify which controllers will need user access. Normally we would make every controller and action protected by default, and then we would specify which areas of our application allow public access. Getting ready We must have a users table that should contain, at least, two fields: username (to hold the username) and password (to hold a hash made out of the user's password). If you don't have a table for this purpose, you can use the following SQL statement to create it: CREATE TABLE `users`( `id` INT UNSIGNED AUTO_INCREMENT NOT NULL, `username` VARCHAR(255) NOT NULL, `password` CHAR(40) NOT NULL, PRIMARY KEY(`id`) ); How to do it... Create a file named users_controller.php and place it inside your app/controllers folder with the following contents: <?php class UsersController extends AppController { public function login() { } public function logout() { $this->redirect($this->Auth->logout()); } } ?> Create a file named login.ctp in your app/views/users folder (create the folder if you don't have one already), and add the following contents: <?php echo $this->Form->create(array('action'=>'login')); echo $this->Form->inputs(array( 'legend' => 'Login', 'username', 'password' )); echo $this->Form->end('Login'); ?> Create a file named app_controller.php in your app/ folder with the following contents: <?php class AppController extends Controller { public $components = array( 'Auth' => array( 'authorize' => 'controller' ), 'Session' ); public function isAuthorized() { return true; } } ?> Modify the UsersController, and add the following code before the login method: public function beforeFilter() { parent::beforeFilter(); $this->Auth->allow('add'); } public function add() { if (!empty($this->data)) { $this->User->create(); if ($this->User->save($this->data)) { $this->Session->setFlash('User created!'); $this->redirect(array('action'=>'login')); } else { $this->Session->setFlash('Please correct the errors'); } } } Create a file named add.ctp and place it in your app/views/users folder with the following contents: <?php echo $this->Form->create(); echo $this->Form->inputs(array( 'legend' => 'Signup', 'username', 'password' )); echo $this->Form->end('Submit'); ?> We now have a fully working authentication system. We can add new users by browsing to http://localhost/users/add, logging in by browsing to http://localhost/users/login, and finally logging out by browsing to http://localhost/users/logout. After creating a user, you should see the login form with a success message, as shown in the following screenshot: How it works... We start by creating two actions in the UsersController class: login(), to show and process submissions of the login form, and logout(), to handle users logging out. You may be surprised that the login() method has no logic whatsoever. To display the form, all we need to do is display the action's view. The form submission is taken care of by the Auth component, leaving us with no need to implement any controller logic. Therefore, the only implementation we need is to create a view for this action, which includes a simple form with two fields: username, and password. The inputs method of CakePHP's FormHelper is a shortcut designed to avoid multiple calls to the input method. By using it, we can create a full form with elements without the need to call FormHelper::input() several times. The logout() controller action simply calls the Auth component's logout() method. This method removes the logged-in user data from the session, and returns the address to which the user should be redirected after logging out, obtained from the previously configured logoutRedirect setting of the component (defaults to the application's home page if the setting was not configured.) Next, we add two components to the controller: Session, and Auth. The Session component is needed to create the messages (through the use of its setflash() method) that informs the user if a login attempt was unsuccessful, or if a user was created. The Auth component operates between your controller's actions and the incoming request by means of the beforeFilter callback method. It uses it's authorize setting to check what type of authentication scheme is to be used. Once the Auth component is added to a controller, all actions in that controller are not accessible unless there is a valid user logged in. This means that if we had any actions that should be public (such as the login() and add() actions in our controller), we would have to tell the Auth component about them. If one wishes to make some actions public, one can add the name of these actions to the allowedActions setting of the Auth component, or by calling its allow() method. We use the later approach to tell the Auth component that the add() action should be reachable without a logged-in user. The login() action is automatically added to the list of public actions by the Auth component. When the user attempts to reach an action that is not within the public actions, the Auth component checks the session to see if a user is already logged in. If a valid user is not found, it redirects the browser to the login action. If there is a user who is logged in, it uses the controller's isAuthorized method to check if the user has access. If its return value is true, it allows access, otherwise access is rejected. In our case, we implemented this method in AppController, our base controller class. If the attempted action requires a user who is logged in, the login() action is executed. After the user submits data using the login form, the component will first hash the password field, and then issue a find operation on the User model to find a valid account, using the posted username and password. If a valid record is found, it is saved to the session, marking the user as logged in. Hashing a password confirmation field When the Auth component is enabled on a controller and the user submits a form with a field named password (regardless if it is being rendered in the login form), the component will automatically hash the password field before executing the controller's action. The Auth component uses the salt defined in the configuration setting Security.salt (in your app/config/core.php file) to calculate the hash. Different salt values will produce different hashes even when using the same password. Therefore, make sure you change the salt on all your CakePHP applications, thus enhancing the security of your authentication system. This means that the action will never hold the plain password value, and this should be particularly noted when utilizing mechanisms to confirm password validations. When you are implementing such validation, make sure you hash the confirmation field using the proper method: if (!empty($this->data)) { $this->data['User']['confirm_password'] = $this->Auth- >password($this->data['User']['confirm_password']); // Continue with processing } Using and configuring the Auth component If there is something that defines the Auth component, it is its flexibility that accounts for different types of authentication modes, each of these modes serving different needs. In this recipe, you will learn how to modify the component's default behavior, and how to choose between the different authentications modes. Getting ready We should have a fully working authentication system, so follow the entire recipe Setting up a basic authentication system. We will also add support to have disabled user accounts. Add a field named active to your users table with the following SQL statement: ALTER TABLE `users` ADD COLUMN `active` TINYINT UNSIGNED NOT NULL default 1; How to do it... Modify the definition of the Auth component in your AppController class, so it looks like the following: public $components = array( 'Auth' => array( 'authorize' => 'controller', 'loginRedirect' => array( 'admin' => false, 'controller' => 'users', 'action' => 'dashboard' ), 'loginError' => 'Invalid account specified', 'authError' => 'You don't have the right permission' ), 'Session' ); Now while still editing your app/app_controller.php file, place the following code right below the components property declaration, at the beginning of the beforeFilter method in your AppController class: public function beforeFilter() { if ($this->Auth->getModel()->hasField('active')) {$this->Auth->userScope = array('active' => 1); } } Copy the default layout from cake/libs/view/layouts/default.ctp to your app/views/layouts directory, and make sure you place the following line in your layout where you wish to display authentication messages: <?php echo $this->Session->flash('auth'); ?> Edit your app/controllers/users_controller.php file and place the following method right below the logout() method: public function dashboard() { } Finally, create the view for this newly added action in a file named dashboard.ctp and place it in your app/views/users folder with the following contents: <p>Welcome!</p> If you now browse to http://localhost/users/login and enter the wrong credentials (wrong username and/or password), you should see the error message shown in the following screenshot: How it works... As the Auth component does its magic right before a controller action is executed, we either need to specify its settings in the beforeFilter callback, or pass them in an array when adding the component to the components property. A common place to do it is in the beforeFilter() method of the AppController class, as by doing so we can share the same authentication settings throughout all our controllers. This recipe changes some Auth settings, so that whenever a valid user logs in, they are automatically taken to a dashboard action in the UsersController (done via the loginRedirect setting.) It also adds some default error messages through the component's respective settings: loginError for when the given account is invalid, and authError for when there is a valid account, but the action is not authorized (which can be achieved by returning false from the isAuthorized() method implemented in AppController.) It also sets the component's userScope setting in AppController::beforeFilter(). This setting allows us to define which conditions the User find operation need to match to allow a user account to log in. By adding the userScope setting, we ensure that only user records that have the active field set to 1 are allowed access. Changing the default user model As you may have noticed, the role of the User model is crucial, not only to fetch the right user account, but also to check the permissions on some of the authentication schemes. By default, the Auth component will look for a User model, but you can change which model is to be used by setting the userModel property or the userModel key in the settings array. For example, if your user model is Account, you would add the following setting when adding the Auth component to your controller: 'userModel' => 'Account' Or equivalently, you would add the following to the beforeFilter method of your AppController class, in the block of code where you are setting up the component: $this->Auth->userModel = 'Account'; There's more... The $authorize property of the Auth component (or the authorize key in the Auth component settings array) defines which authentication scheme should be used. Possible values are: controller: It makes the component use the controller's isAuthorized method, which returns true to allow access, or false to reject it. This method is particularly useful when obtaining the logged-in user model: It is similar to controller; instead of using the controller to call the method, it looks for the isAuthorized method in the User model. First, it tries to map the controller's action to a CRUD operation (one of 'create', 'read', 'update', or 'delete'), and then calls the method with three arguments: the user record, the controller that is being accessed, and the CRUD operation (or actual controller action) that is to be executed. object: It is similar to model; instead of using the model to call the method, it looks for the isAuthorized method in a given class. In order to specify which class, set the AuthComponent::$object property to an instance of such a class. It calls the method with three arguments: the user record, the controller that is being accessed, and the action that is to be executed. actions: It uses the Acl component to check for access, which allows a much more grained access control. crud: It is similar to actions; the difference lies in the fact that it first tries to map the controller's action to a CRUD operation (one of 'create', 'read', 'update', or 'delete'.)