How-To Tutorials - CMS & E-Commerce

To use a Google calendar with GCalendar, you must make the Google Calendar publicly available. To do so, select the Make this calendar public checkbox on the Share this calendar tab on the Settings screen. Getting ready... The GCalendar extension allows you to display your Google calendar inside the Joomla! site. Visit http://g4j.laoneo.net/content/extensions/download/cat_view/20-joomla-15x/21-gcalendar.html and download the latest version of the GCalendar suite. Once downloaded, extract the ZIP package and you will get an installation file for one component, three modules, and two plugins. Install these from the Extensions | Install/Uninstall screen. How to do it... After installation, follow these steps: From the Joomla! administration panel, select Components | GCalendar. This shows you the Google calendar manager screen. Click on the Tools link of the Google calendar manager screen, and then click on the System check link. This checks the system requirements and connectivity with Google and shows you the results. Resolve any issue raised by a system check. Then click on the GCalendars link, followed by clicking on Please login to connect to Google data. You will see the Google authorization page. Click on the Grant access button on the Google accounts page. You will see the list of calendars under Google Calendar. If you are not logged in to Google already, the Google Login page will be shown. Enter the username and password for your Google account (or create one if you don't have an account) and click on the Sign In button. Select the calendars you want to use on your Joomla! site, and click on the Add button in the toolbar. The calendars are added and you will see them in the list. Now select Menus | Main Menu, and click on the New button on the Menu Item Manager: [mainmenu] screen. This will show you the Menu Item: [New] screen. Select Internal Link | GCalendar | GCalendar. It will show the Menu Item: [New] screen, as shown in the following screenshot: Type a Title for the menu, and select Yes in the Published field. From the Parameters (Basic) section, select a calendar, select the default view, the day the week starts on, and then the date format. You can also add text to display before and after the calendar. Then click on the Save button in the toolbar. Preview the site's frontend and click on the menu item. This shows the Google calendar. As you see, you can change the view of the calendar by clicking on any of the view icons shown above the calendar. You can also go to a specific date or month. Summary Google Calendar is gaining popularity. If you are a user of Google Calendar, you already know how flexible it is. In this article, you saw how to display your Google calendar on your Joomla! site. In the next article we will add a Booking System for Events. Further resources on this subject: Adding an Event Calendar to your Joomla! Site using JEvents Joomla! 1.5 Top Extensions: Adding a Booking System for Events Joomla! 1.5 Top Extensions for Using Languages Manually Translating Your Joomla! Site's Content into Your Desired Language

Getting ready... There are many extensions to add event calendars to Joomla!. However, JEvents is the most feature-rich and popular extension. Download this extension from http://www.jevents.net/jevents-download and install it from the Extensions | Install/Uninstall screen. How to do it... After installing JEvents, follow these steps to add the calendar: From the Joomla! administration panel, select Components | JEvents. This will show you the JEvents:: Control Panel screen. Click on the Manage Categories icon in the Control Panel screen. This will show you the Categories screen, listing all the available categories, if any. Click on the New button in the toolbar. It will show you a form similar to that in the following screenshot: Enter a Title, select the parent category (if any), then select Access Level and Administrator, select Yes in Published field, and type a brief description of the category. From the Event Colour field, choose the color for the events in this category. Then click on the Save icon in the toolbar. Repeat the step to create another category. To go back to the Control Panel page, click on the CPanel icon on the Categories screen. Then click on the Manage Calendars icon in the Control Panel screen. That shows the Calendars screen. Click on the New button. This shows you a form similar to the one in the following screenshot: Type a Unique Identifier (name) for the calendar, select the default category and Access Level, select No for the Is Default field, and click on Create Calendar from Scratch. This creates a new calendar. Go back to the Control Panel page, and click on the Manage Events icon. This will shows you the Events screen. Click on the New button in the toolbar, and you will get the Edit Event screen. On the Edit Event screen, first select a calendar and then type the subject of the event. Then select a category, a color for the event, and the access level. In the Activity field briefly describe the activity, and then fill in the Location, Contact, and Extra Info fields. Then click on the Calendar tab.

  Building Websites with ExpressionEngine 2 A step-by-step guide to ExpressionEngine: the web-publishing system used by top designers and web professionals everywhere Learn all the key concepts and terminology of ExpressionEngine: channels, templates, snippets, and more Use RSS to make your content available in news readers including Google Reader, Outlook, and Thunderbird Manage your ExpressionEngine website, including backups, restores, and version updates Written in an easy-to-follow step-by-step style, with plenty of examples and exercises         Read more about this book      (For more resources on ExpressionEngine, see here.) Designing your photo gallery There are many different ways you can approach creating a photo gallery in ExpressionEngine. At the most basic level, you have a choice between each channel entry containing only one photo (and a description) or each channel entry containing a set of photos. If you allow only one photo per entry, you can use categories to organize the photos into galleries (and you can even include the same photo in more than one gallery). If you allow multiple photos per channel entry, each entry represents a photo gallery by itself.   One way to accommodate multiple photos per entry is to create as many custom fields as the photos you think you will have in a gallery. For example, if you know each gallery will have a maximum of 20 photos, then you could create 20 custom fields for the photos and 20 custom fields for the descriptions. This solution works, but is not the most flexible (that is, to add 21 photos to a gallery, you would have to modify your custom fields and your templates). An alternative approach to accommodate multiple photos per entry without creating an abundance of custom fields is to use a third party add-on such as Matrix by Pixel & Tonic (http://pixelandtonic.com/matrix). This add-on allows for tabular data in channel entries—you define the column headings (such as the photo and the description) and then add a row in the table for each photo. In each channel entry, you can create as many rows as you need. For example, you can create one entry with 12 photos and another entry with 25 photos. Rather than creating lots of custom fields, or using a third party add-on, this article will show you a simple and elegant way to create a photo gallery using the one photo per entry design and then will use categories to organize the photos into galleries. Before you create your photo gallery channel, you first need to define where your photos will be stored. File manager The file manager is where you can upload new photos or crop, resize, rotate, or delete the images you have already uploaded, all from within the ExpressionEngine control panel. For this photo gallery, you will create a new upload destination—this is the directory on your server where ExpressionEngine will store your photos. The first step in creating a new upload destination is to create the new directory on your server. Create a new directory called photos in /images. If you are following along on an actual web server, ensure that the new directory has 777 permissions (usually right-clicking on the directory in your FTP client will allow you to set permissions).If, instead of creating a new sub-directory inside the "/images" directory, you prefer to create a new top-level directory and you are using the ".htaccess" exclude method to remove the "index.php" from ExpressionEngine URLs, then be sure to add the new directory to your ".htaccess" file. Next, you need to tell ExpressionEngine where this directory is. Inside the control panel, select Content and then File Manager. On the left-hand side of the screen, you will see the directory or directories where you can currently upload files to (if any), along with the files currently in each directory. In the toolbar on the right-hand side, underneath File Tools, select Create New Upload Destination. Enter a descriptive name of Photo Gallery. The Server Path and URL may be pre-filled, however, you should make sure it points to the actual directory you just created (/images/photos). If you are following along in a localhost environment, the URL would be http://localhost/images/photos. Leave Allowed File Types as Images only. All the fields that begin with maximum can be left blank. These fields allow you to restrict the size, height, and width of photos. If you do enter values in here, and then later try to upload a file that exceeds these limits, you will see an error message such as The file you are attempting to upload is larger than the permitted size. Set the Image Properties, Image Pre Formatting, and Image Post Formatting to be blank. These fields allow you to enter code that appears inside, before, and after the img tag. However, you will format your img tag as needed inside your template. The File Properties, File Pre, and Post Formatting can be ignored for now as they only apply to non-image files that you upload (and you have specified that you are only allowing images in your photo gallery). If desired, you can allow certain member groups to upload files. The member groups you see listed (if any) will depend on the member groups you have. Set all the member groups to Yes except Members, which should be set as No. Click Submit and your new upload destination will be ready to go. Go back to the file manager and you can see the new photo gallery upload destination with no files. Creating your photo gallery channel Now that you have created a place to store your photos, you can create your photo gallery channel. You will follow the same basic steps—creating custom fields and categories, creating your channel, publishing some entries, and then building your templates. Creating your custom fields Since you are going to have one photo per channel entry, you have a lot of flexibility to create as many custom fields for each photo as you see fit—for example, you could have fields to capture the location of the photograph, the subject of the photo, the type of camera that was used, the name of the photographer, and so forth. However, to keep things simple, you will only create two custom fields right now—one for the photo itself and one for the description. From the main menu of the control panel, select Admin, Channel Administration, and then Custom Fields. Select Create a New Channel Field Group and call the new group photos. Click Submit. Next to the new group, select Add/Edit Custom Fields and then select Create a New Custom Field. The field type will be File. The field label will be Photo and the field name will be photos_photo (the first part representing the field group name). In the field instructions, indicate that photos in the photo gallery should be no more than 600x800 pixels (so that they fit on a typical computer screen without scrolling).You could also prevent photos that are bigger than 600x800 pixels from being uploaded by specifying the maximum width and height in the File Upload Preferences for the photo gallery upload destination. You have not done this here because it would prevent you from being able to upload a larger photo and then re-sizing it using file manager. The field should be required, but not searchable, and should be shown by default. The field display order should be 1 and the file type should be Image. Click Submit. Click Create a New Custom Field again. This time, the field type should be Textarea, the field label Caption, and the field name photos_caption. The field instructions can be left blank. Answer Yes to it being a required field, being searchable and being shown by default. The Field Display Order should be 2. The number of rows can be left as 6 and the default text formatting should be set to Auto <br /> (this will prevent unwanted whitespace in your captions due to extra paragraph tags being added, but will also allow multi-line captions). Say No to allowing an override on the Publish page. The text direction can also be left as left-to-right. Finally, say Yes to Formatting Buttons, Spellcheck, and Write mode. Say No to Smileys, Glossary, and the File Chooser. Click Submit to create the new field. Now that you have your custom fields, you can define your categories. Creating your categories As discussed at the beginning of this article, you are going to use categories to distinguish between photo galleries. To start with, you are going to create two photo galleries—one for vacation photos and one for local photos. You can always come back and add more galleries later. Still in the control panel, select Admin, Channel Administration, and then Categories. Select Create a New Category Group and name it Photo Categories. Select Allow All HTML in the category field formatting and check the boxes to allow other member groups to edit (or delete) categories as appropriate. (If you see a message saying that there are no member groups allowed to edit/delete categories, this is fine too). Click Submit. Back on the Category Management screen, select Add/Edit Categories for the Photo Categories category group. Click Create a New Category. The first category will be called Local Photos. The Category URL will default to local_photos. Type in a category description (you will later display this on your website), leave the Category Image URL blank, leave the Category Parent as None, and click Submit. Select Create a New Category again. This time call the new category Vacation Photos, with a URL of vacation_photos. Type in a category description such as A selection of vacation photos taken by Ed & Eg. Leave the category image URL blank and the category parent as None. Click Submit. Now that you have your category group and custom field group defined, you can go ahead and create your channel. Creating your channel The actual creating of your channel is very straightforward. Select Admin | Channel Administration | Channels. Select Create a New Channel. Call the new channel Photos with a short name of photos. Do not duplicate an existing channel's preferences. Select Yes to Edit Group Preferences and select Photo Categories for the category group, Statuses for the status group, and photos for the field group. Select No to creating new templates and then click Submit. Your channel is created! Now you can start creating some content and displaying the photos on your website. Uploading your first photos There are three ways to upload photos to your website. Your first option is to go to File Manager (under the Content menu) and select File Upload on the right-hand toolbar. Alternatively, you can go to publish an entry in the Photos channel, click on Add File, and upload a file. Both of these options are convenient since they use the built-in ExpressionEngine file manager to upload your file—you never have to leave the control panel. However, you can only upload one photo at a time and you may run into issues if you try and upload very large photos (greater than 2 MB). The third option for uploading photos is to do so directly, using FTP, just as you would upload any files to your website. Since this requires another tool, it is less convenient than uploading a single photo from within ExpressionEngine, but if you are uploading lots of photos, then using FTP is a lot faster to do. This is the method we will use here. The built-in file manager also allows you to crop, resize, and rotate images (although you can take advantage of these tools even if you do not use file manager to upload the files).   Download the example photos (local1.jpg through local8.jpg and vacation1.jpg through vacation8.jpg) from either the Packtpub support page at http://www.packtpub.com/support or from http://www.leonardmurphy.com/book2/chapter8. (Or you can substitute your own photos). Copy or FTP the photos into the /images/photos directory that you created earlier in the article. Back in the ExpressionEngine control panel, select Content | Publish and then select the Photos channel. Type in a title of Fireworks and a caption Fireworks exploding with a bang. Then select Add File. The first screen to appear in the Upload File screen. Since you have already uploaded the files, you can simply select the photo gallery option in the left-hand menu.If no photos appear under the photo gallery, or the files appear but no thumbnails appear, try logging out of the control panel and logging back in. (This helps to refresh ExpressionEngine so it recognizes the new files—the first time you access the files after uploading via FTP, ExpressionEngine has to create the thumbnails). Select local1.jpg. On the Categories tab, select Local Photos. Then click Submit. Now, repeat the same steps to create entries for the rest of the photos, using appropriate captions that describe the photos. Be sure to select a category for each photo. There are 16 example photos (eight local and eight vacation photos). Having several example photos in each category will demonstrate how the photo gallery works better.

  Kentico CMS 5 Website Development: Beginner's Guide A clear, hands-on guide to build websites that get the most out of Kentico CMS 5's many powerful features Create websites that meet real-life requirements using example sites built with easy-to-follow steps Learn from easy-to-use examples to build a dynamic website Learn best practices to make your site more discoverable Practice your Kentico CMS skills from organizing your content to changing the site's look and feel Get going with example starter sites such as a corporate site, an e-commerce site, and a community-driven website to jumpstart your web development Written by Thom Robbins, the Web Evangelist for Kentico Software LLC Read more about this book (For more resources on CMS, see here.) A great example of visual hierarchy that is used on every website is headings (h1, h2, h3) which indicate the importance of information and are usually styled in such a way that they guide a visitor from h1 (most important) down to least important. Without cues to the relative importance of different elements, the user has to work harder to understand the information provided by the website. A potential buyer or even someone looking for general information will quickly disregard a design with poor visual hierarchy. Z flow is a design principle that is important to keep in mind as you create layouts. The eye naturally moves across the page in a Z formation. The eye starts in the upper left, crosses over to the right, and then moves back down to the left and over to the right, similar to how the eye moves when reading text. You always want to make sure your design helps the Z-Flow. It’s important to think of your web site as a story, and organize the material in a way that enhances the telling of your story. Here are a couple of things to keep in mind. Home pages should be short and quick to loads. The home page should contain key information. This includes website introduction and links to other pages that contain additional details. Detail pages allow the website to be created in several pieces instead of one or two larger pieces. Time for action – page organization The content tree represents the site map of the website and allows you to organize the structure of documents and choose documents that appear on the right side of the screen. The content tree is where we will spend the most of our time managing content and site hierarchy. It provides the central location to see all site content (both published and unpublished). It also provides some basic drag and drop methods that will make it easier to change the location of items within your site. In this example we will look at how we can reorganize our site. Log into CMS Desk select the Content tab, select the Partners page and then the Gold partners page Drag the Gold partners page up to Services folder, as shown in the following screenshot: Release the mouse button and you will see that your page hierarchy has changed, as shown in the following screenshot: Select the Gold partners page, select the CTRL key on the keyboard and copy it to the Services hierarchy, as shown in the following screenshot: Link the Gold partners page while selecting the Control + Shift keys, as shown in the following screenshot: What just happened? Managing content within the Content tree is an essential part of maintaining your site. We have seen that there are three ways that you can maintain pages: A move takes the entire page and copies it another location in the site A copy takes a snapshot of the current deployed page and places it in the new location A link creates a copy of the page in the current location Time for action – viewing the Google sitemap file There are many different ways to provide Search Engine Optimization(SEO) for your website. The most basic is the sitemap. As the name implies it’s a map of you site. On a single page it shows the structure of your site, its sections, and the links between them. Sitemaps make navigating the site easier and having an updated sitemap is important for search engines. Sitemaps are an important way to communicate with search engines. In robots.txt you tell search engines which part of your site to exclude from indexing, in your site map you tell search engines where you you’d like them to go. Sitemaps are part of good web design practice and something you want to make sure that you are aware of. Using sitemaps offer the opportunity to inform search engines immediately about any changes in your site. Of course, you cannot expect that search engines will rush right away to index your changed pages, but certainly the changes will be indexed faster, compared to when you don’t have a sitemap. Also when you have a sitemap you can rely less on external links that will bring traffic to your site. Sitemaps also help to classify your site content. In this example, we will look at the default googlesitemap.xml file that can then be used to submit to Google. Log into Site Manager and select the Settings tab. From the Sites drop-down select (Global), select the URLs and SEO menu option, and validate the name googlesitemap.xml appears, as shown in the following screenshot: Open a new browser and use the url http://<domain>/CMSPages/googlesitemap.aspx to view the current site map, as shown in the following screenshot: What just happened? The system provides automatic support for the Google Sitemap protocol. This is a protocol designed to help search engines in indexing your site. Now that we have set up the system defaults the sitemap is created automatically based on any changes that occur with the content tree and site structure. Physically, as you can see here the sitemap is located at http://<domain>/CMSPages/Googlesitemap.aspx</domain>. When you enter your sitemap into Google you would use this URL name. XML Extension DisplayBy default IIS is configured to not display XML files for security purposed. In order to make the sitemap accessible using an XML extension you need to configure the XML extension within IIS.

DotNetNuke 5.4 Cookbook Over 100 recipes for installing, configuring, and customizing your own website with the DotNetNuke CMS Create and customize your own DotNetNuke website with blog, forums, newsletters, wikis and many more popular website features Learn custom module development and rich content management with sample code and tips Provides samples of styling and skinning a DotNetNuke portal Offers advanced programming tips combining DNN with AJAX and JQuery Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible Read more about this book (For more resources on DotNetNuke, see here.) Introduction One of the powerful features of DNN is the variety of flexible and reusable controls that are available for custom module development. These include many of the web controls seen on the core DNN pages. In this article, we will see how to add these web controls to custom modules and tie them to the tables in the database. In general, using these controls requires four simple steps: Adding the control code to the View or Edit .ascx file Adding a new property to the info object that will supply the values for the control Binding the control to the values Capturing the value from the control and saving to the database (if Edit page) Adding web controls to your Toolbox If you frequently use the visual editor in the development tool to layout your pages, this short recipe will show you how to add the DNN web controls to the Toolbox. How to do it… Launch the Development Tool. Change the editor to Design mode. Make sure the toolbox is displayed. Right-click on the toolbox and select Choose Items…. Click on the Browse button. Navigate to the /bin folder within the DNN source (DNNSource/website/bin). Select the DotNetNuke.Webcontrols.dll and click on Open. Make sure the DNN controls are checked and click on OK. The web controls will now appear under the General section of the toolbox when you edit your code. Next, we need to add a reference to DotNetNuke.WebUtility.dll. Right-click on the Employee project in the Solution Explorer and select Add Reference…. In the pop-up dialog, click on the Browse tab and navigate to the folder holding the DNN source files (for example, My DocumentsDNNSourceWebsitebin). Select the file DotNetNuke.WebUtility.dll and click on OK. Showing an e-mail link in a Datagrid The Datagrid control is perfect for showing records from the database in a neatly formatted table. But the Datagrid can show many other types of information and in this recipe we will see how to display an e-mail hyperlink in a column. Getting ready In this recipe, we will extend the Datagrid. In this recipe we are using a function to generate an e-mail address for our example. This keeps the recipe simple, but isn't really practical. In a real production environment you would store this in the database as part of the Employee table. How to do it... Launch the Development Tool and load the Employee project. Double-click to open the ViewEmployee.ascx file. Locate the Datagrid in the code and add a new column just after the Salary column: <dnn:textcolumn datafield="Salary" headertext="Salary"/> <asp:TemplateColumn HeaderText="Email Contact"> <itemtemplate> <asp:HyperLink id="hlEmail" NavigateUrl='<%# "mailto:" & DataBinder.Eval (Container.DataItem,"ContactEmail") %>' Text='<%# DataBinder.Eval (Container.DataItem,"ContactEmail") %>' Target="_new" runat="server" /> </ItemTemplate> </asp:TemplateColumn> </Columns> </asp:datagrid> Next, open the EmployeeInfo.vb file. Find the Public Properties section and add the read-only property EmailAddress to provide an e-mail address constructed from the employee name: ' public properties Public ReadOnly Property EmailAddress() As String Get Return _EmpFirstName.Substring(0, 1) + _EmpLastName + "@yourcompany.com" End Get End Property Select Save All from the File menu. To check the results, build and deploy the module to a development portal for testing. Go to the ACME Employee page to see the list of employees. The new e-mail hyperlink will appear on the right-hand side. (Move the mouse over the image to enlarge.) How it works... In this recipe we saw the tasks to show an e-mail hyperlink in a Datagrid control: We took the Datagrid control and added a new template column holding an e-mail hyperlink control We added a new property to the EmployeeInfo object to provide an e-mail address for the Datagrid Showing checkboxes in a Datagrid An element that is useful to display in a Datagrid is a checkbox-like image to indicate the status of the database record. These are not functioning checkboxes but rather a visual indicator showing the data to be true or false. The control works by having two images, one with a checkmark that is shown when the value is true. The other is an unchecked image that is shown when the value is false. This recipe will work with any image indicating true or false. Checkbox-like images are used in other DNN modules so they are familiar to users, but you can experiment with your own images as well. This recipe has two basic steps: We will create a new property of the EmployeeInfo object called NewHire. This property checks the date of hire from the database and returns true if the employee was hired less than 30 days ago. We will add a new column to the Datagrid that evaluates the NewHire property and shows one image if the NewHire is true and another image if the NewHire is false. Getting ready In this recipe we will extend the Datagrid. How to do it... Launch the Development Tool and load the Employee project. Double-click to open the ViewEmployee.ascx file. The first step is to add a new column to the Datagrid that will show the checkbox images. We will use the Eval function to check the NewHire function. Locate the Datagrid and add a new column just after the Salary column: <dnn:textcolumn datafield="Salary" headertext="Salary"/> <asp:TemplateColumn HeaderText="New Hire"> <itemtemplate> <asp:Image Runat="server" ID="imgApproved" ImageUrl="~/images/checked.gif" Visible='<%# DataBinder.Eval (Container.DataItem,"NewHire")="1" %>'/> <asp:Image Runat="server" ID="imgNotApproved" ImageUrl="~/images/unchecked.gif" Visible='<%# DataBinder.Eval (Container.DataItem,"NewHire")="0" %>'/> </ItemTemplate> </asp:TemplateColumn> </Columns> </asp:datagrid> Next, open the EmployeeInfo.vb file. Find the Public Properties section and add the read-only property NewHire that returns true or false if the employee was hired in the last 30 days: ' public properties Public ReadOnly Property NewHire() As Boolean Get Return (Today() - _HireDate).Days < 30 End Get End Property Select Save All from the File menu. To check the results, build and deploy the module to a development portal for testing. Go to the ACME Employee page to see the list of employees. The new checkbox will appear on the right-hand side. Although you cannot click on these checkboxes, they do provide a clear and easy to understand visual status for the records. How it works... In this recipe we saw the tasks to show checkbox images in a Datagrid control: We took the Datagrid control and added a new template column holding two image controls, one checked and the other unchecked. We added a new property to the EmployeeInfo object that returns true or false depending on the database record. We bound the property to the control so that if the property was true then the checked image was displayed. If the property was false the unchecked image was displayed.  

DotNetNuke 5.4 Cookbook Over 100 recipes for installing, configuring, and customizing your own website with the DotNetNuke CMS Create and customize your own DotNetNuke website with blog, forums, newsletters, wikis and many more popular website features Learn custom module development and rich content management with sample code and tips Provides samples of styling and skinning a DotNetNuke portal Offers advanced programming tips combining DNN with AJAX and JQuery Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible Read more about this book (For more resources on DotNetNuke, see here.) Showing data in a Treeview A Treeview control is used when you have information arranged in a hierarchy like the organizational chart of a company. The Treeview control will show each level in the hierarchy with an icon to drill-down or expand to the next level. Getting ready To follow along with this recipe you must have completed the following recipes: Deploying a module as a standalone package Displaying a Datagrid with filter controls Adding web controls to your Toolbox The Treeview control requires that the employees in the Employee table have been assigned to managers. Here is the data that was used in this recipe: In this example, the employees are arranged in a simple two-level hierarchy. If your ManagerNo is 0 it means you are a manager. Otherwise the manager number on your record is the ItemID of your manager. So John Smith is a manager (his ManagerNo=0) and he manages Kevin Jones and Amy Roe (as their ManagerNo is John Smith's ItemID). How to do it... Launch the Development Tool and load the Employee project. In the Solution Explorer, look under the references and make sure your project includes a reference to DotNetNuke.WebUtility.dll. Double-click to open the ViewEmployee.ascx file. Start by adding a new register directive at the top of the file: <%@ Register tagprefix="DNN" assembly="DotNetNuke.WebControls" namespace="DotNetNuke.UI.WebControls" %> Next, we'll create a simple tree control by placing the following code at the bottom of the file, right after the paging control: <dnn:PagingControl ID="ctlPagingControl" runat="server"></dnn:PagingControl><br /><DNN:DnnTree ID="treeManager" runat="server" CollapsedNodeImage="~imagesplus.gif" ExpandedNodeImage="~imagesminus.gif"></DNN:DnnTree> Next, open the ViewEmployee.ascx.vb file. Look at the top of the file and make sure the following imports are there: Imports System.Data.SqlClient Imports DotNetNuke.UI.WebControls We must create a procedure to populate the tree control with records from the database. Find the Private Methods region at the top of the file and add the following new procedures: #Region "Private Methods"Private Sub PopulateTreeControl() ' set the images to use for the nodes treeManager.ImageList.Add("..imagesicon_hostusers_16px.gif") treeManager.ImageList.Add("..imagesicon_users_16px.gif") ' reset the tree control treeManager.TreeNodes.Clear() Dim objParentNode As TreeNode ' get the list of all managers and create a parent node for each one Dim objEmployeeController As New EmployeeController Dim drMgr As SqlDataReader drMgr = objEmployeeController.GetManagersDR(ModuleId) If drMgr.HasRows Then Do While drMgr.Read() objParentNode = New TreeNode() objParentNode.Text = drMgr("EmpLastName") + ", " + drMgr("EmpFirstName") objParentNode.ImageIndex = 0 ' manager image objParentNode.ClickAction = eClickAction.Expand ' when click on a manager, expand objParentNode.HasNodes = True treeManager.TreeNodes.Add(objParentNode) PopulateEmployeeNodes(objParentNode, drMgr("ItemId")) Loop End If drMgr.Close()End SubPrivate Sub PopulateEmployeeNodes(ByRef objParentNode As TreeNode, ByVal ParentItemId As Integer) Dim objChildNode As TreeNode ' get the list of all employee with the given manager Dim objEmployeeController As New EmployeeController Dim colEmployees As ArrayList Dim objEmployeeInfo As EmployeeInfo Dim TotalRecords As Integer colEmployees = objEmployeeController.GetEmployeesByFilter (ModuleId, ParentItemId, -1, 0, 1000, TotalRecords) If colEmployees.Count > 0 Then ' add a node to the parent that was passed For intEmp = 0 To colEmployees.Count - 1 objEmployeeInfo = CType(colEmployees(intEmp), EmployeeInfo) objChildNode = New TreeNode(objEmployeeInfo.EmpLastName + ", " + objEmployeeInfo.EmpFirstName) objChildNode.ImageIndex = 1 ' employee image objParentNode.TreeNodes.Add(objChildNode) Next intEmp End IfEnd Sub#End Region What we are doing here is calling a new GetManagersDR function for the first level of the tree, then calling the GetEmployeesByFilter function to get the list of employees for each manager. Next, we need to call these new procedures when the page loads, so scroll down to the Page_Load procedure and add the following code inside the IsPostBack check: If Page.IsPostBack = False Then If Not Request.QueryString("PageRecords") Is Nothing Then ddlRecordsPerPage.SelectedValue = Request.QueryString("PageRecords") End If BindManagerDropDown() BindSalaryDropDown() BindData() PopulateTreeControl()End If Next, open the EmployeeController.vb file. The last step is to create the new GetManagersDR function. This is just like the GetManagers function, but this the function returns the list of managers as a DataReader. Add the following code to the bottom of the Public Methods region: Public Function GetManagersDR(ByVal ModuleId As Integer) As SqlDataReader Return DataProvider.Instance().GetManagers(ModuleId)End Function#End Region Select Save All from the File menu. To check the results, build and deploy the module to a development portal for testing. Go to the ACME Employee page to see the list of employees in a tree control. How it works... In this recipe we saw the tasks to organize database records in a hierarchy tree control: We placed the control in the .ascx file We defined the images to use for the expand and collapse indicators In the code behind file we changed the Page_Load procedure to populate the tree We created a PopulateTreeControl procedure with two parts: Query the database for the employee managers For each manager add them to the tree and query the database for the employees they manage Using a TabStrip to separate content There are many times when you have a lot of information to display, but not enough space on the page. The TabStrip control maximizes the available space by separating the content into tabs and displaying one tab at a time. To demonstrate this control we're going to take the five fields of the Edit Employee page and split them onto two different tabs. Getting ready To follow along with this recipe you must have completed the following recipes: Adding web controls to your Toolbox Deploying a module as a standalone package How to do it... Launch the Development Tool and load the Employee project. In the Solution Explorer, look under the references and make sure your project includes a reference to DotNetNuke.WebUtility.dll. Double-click to open the EditEmployee.ascx file. Make sure the following register directive is at the top of the file: <%@ Register tagprefix="DNN" assembly="DotNetNuke.WebControls" namespace="DotNetNuke.UI.WebControls" %> We will replace the existing HTML table containing the employee fields with a TabStrip control table holding the name fields under the first tab and the information fields under the second tab. Replace the existing HTML table with the following highlighted code: <%@ Control language="vb" Inherits="ACME.Modules.Employee.EditEmployee" AutoEventWireup="false Explicit="True" Codebehind="EditEmployee.ascx.vb" %><%@ Register TagPrefix="dnn" TagName="Label" Src="~/controls/LabelControl.ascx" %><%@ Register TagPrefix="dnn" TagName="TextEditor" Src="~/controls/TextEditor.ascx"%><%@ Register TagPrefix="dnn" TagName="Audit" Src="~/controls/ModuleAuditControl.ascx" %><%@ Register tagprefix="DNN" assembly="DotNetNuke.WebControls" namespace="DotNetNuke.UI.WebControls" %> <DNN:DNNTabStrip ID="tsEmployee" runat="server" TabRenderMode="All" CssTabContainer="LoginTabGroup" CssContentContainer="LoginContainerGroup" DefaultContainerCssClass="LoginContainer" DefaultLabel-CssClass="LoginTab" DefaultLabel-CssClassHover="LoginTabHover" DefaultLabel-CssClassSelected="LoginTabSelected" visible="true" > <dnn:DNNTab Label-Text="Employee Name" ID="tab1"> <table width="650" cellspacing="0" cellpadding="0" border="0" summary="Edit Table"> <tr valign="top"> <td class="SubHead" width="125"><dnn:label id="lblEmpFirstName" runat="server" controlname="lblEmpFirstName" suffix=":"> </dnn:label> </td> <td> <asp:TextBox ID="txtEmpFirstName" runat="server"> </asp:TextBox> <asp:RequiredFieldValidator ID="valEmpFirstName" resourcekey="valEmpFirstName.ErrorMessage" ControlToValidate="txtEmpFirstName" CssClass="NormalRed" Display="Dynamic" ErrorMessage="<br>EmpFirstName is required" Runat="server" /> </td> </tr> <tr valign="top"> <td class="SubHead" width="125"><dnn:label id="lblEmpLastName" runat="server" controlname="lblEmpLastName" suffix=":"> </dnn:label> </td> <td> <asp:TextBox ID="txtEmpLastName" runat="server"> </asp:TextBox> <asp:RequiredFieldValidator ID="valEmpLastName" resourcekey="valEmpLastName.ErrorMessage" ControlToValidate="txtEmpLastName" CssClass="NormalRed" Display="Dynamic" ErrorMessage="<br>EmpLastName is required" Runat="server" /> </td> </tr> </table> </dnn:DNNTab> <dnn:DNNTab Label-Text="Information" ID="tab2"> <table width="650" cellspacing="0" cellpadding="0" border="0" summary="Edit Table"> <tr valign="top"> <td class="SubHead" width="125"><dnn:label id="lblManagerNo" runat="server" controlname="lblManagerNo" suffix=":"> </dnn:label> </td> <td> <asp:TextBox ID="txtManagerNo" runat="server"> </asp:TextBox> <asp:RequiredFieldValidator ID="valManagerNo" resourcekey="valManagerNo.ErrorMessage" ControlToValidate="txtManagerNo" CssClass="NormalRed" Display="Dynamic" ErrorMessage="<br>ManagerNo is required" Runat="server" /> </td> </tr> <tr valign="top"> <td class="SubHead" width="125"><dnn:label id="lblHireDate" runat="server" controlname="lblHireDate" suffix=":"> </dnn:label> </td> <td> <asp:TextBox ID="txtHireDate" runat="server"> </asp:TextBox> <asp:RequiredFieldValidator ID="valHireDate" resourcekey="valHireDate.ErrorMessage" ControlToValidate="txtHireDate" CssClass="NormalRed" Display="Dynamic" ErrorMessage="<br>HireDate is required" Runat="server" /> </td> </tr> <tr valign="top"> <td class="SubHead" width="125"><dnn:label id="lblSalary" runat="server" controlname="lblSalary" suffix=":"> </dnn:label> </td> <td> <asp:TextBox ID="txtSalary" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="valSalary" resourcekey="valSalary.ErrorMessage" ControlToValidate="txtSalary" CssClass="NormalRed" Display="Dynamic" ErrorMessage="<br>Salary is required" Runat="server" /> </td> </tr> </table> </dnn:DNNTab></dnn:DNNTabStrip><br /><br /><p> <asp:linkbutton cssclass="CommandButton" id="cmdUpdate" resourcekey="cmdUpdate" runat="server" borderstyle="none" text="Update"> </asp:linkbutton>&nbsp; <asp:linkbutton cssclass="CommandButton" id="cmdCancel" resourcekey="cmdCancel" runat="server" borderstyle="none" text="Cancel" causesvalidation="False"> </asp:linkbutton>&nbsp; <asp:linkbutton cssclass="CommandButton" id="cmdDelete" resourcekey="cmdDelete" runat="server" borderstyle="none" text="Delete" causesvalidation="False"> </asp:linkbutton>&nbsp;</p><dnn:audit id="ctlAudit" runat="server" /> The appearance of the tab strip is controlled by the styles we apply to it (CssTabContainer, CssContentContainer, DefaultLabel-CssClass, DefaultLabel-CssClassHover, and DefaultLabel-CssClassSelected). In this example we used the same styles as the DNN Login page so we have a similar look and feel. The styles are defined in the /portals/_default/default.css by default. Select Save All from the File menu. To check the results, build and deploy the module to a development portal for testing. Go to the ACME Employee page and click on the edit icon (the little pencil) next to an employee to display the Edit Employee page. When you edit the employee record you will see the fields have been separated into two separate tabs. Clicking on Employee Name displays the first tab with the name fields: Clicking on Information reveals the remaining fields: How it works... In this recipe we saw the tasks to use a TabStrip control: We placed the control in the .ascx file We separated the existing content onto separate tabs  

  Kentico CMS 5 Website Development: Beginner's Guide A clear, hands-on guide to build websites that get the most out of Kentico CMS 5's many powerful features Create websites that meet real-life requirements using example sites built with easy-to-follow steps Learn from easy-to-use examples to build a dynamic website Learn best practices to make your site more discoverable Practice your Kentico CMS skills from organizing your content to changing the site's look and feel Get going with example starter sites such as a corporate site, an e-commerce site, and a community-driven website to jumpstart your web development Written by Thom Robbins, the Web Evangelist for Kentico Software LLC Read more about this book (For more resources on CMS, see here.) Fundamentals of site security I don't think anyone can dispute that security management is an essential part of our daily routine. We need to make sure that we protect customer data and guard the site from any unwanted intruders. Security management is the process that we use to decide who has access to the site, what areas they are able to see, and what documents they can view and interact with. Kentico CMS security is managed using the: Site Manager Administration tab to edit system-wide data CMS Desk Administration tab to edit data related to a specific website The security model that we use to maintain and administer the system is based on the following: Users — This is an individual user who is assigned a system account. Roles — Security groups that contain users. Because a user can belong to multiple roles, their permissions are calculated as a sum of all permissions granted to all roles they belong to. Document permissions — Document permissions are granted to both users and roles. At runtime, document permissions are calculated as a sum of all permissions granted to the user and their assigned roles. UI personalization — UI personalization is used to remove specific portions of the user interface. Don't forget! Security permissions are calculated at runtime. These are a combination of global settings and individual website settings. It's important to remember that if the user or any of their roles are denied access to a resource, they are always denied access to that resource, even if one of their roles is allowed access. Time for action – creating a new role Now, let's create a new role and assign it to a user using these steps: In CMS Site Manager, select the Administration tab, Roles, and New role, as shown in the following screenshot: What roles are there? Roles are one of the easiest ways to apply security to your users. The system contains a variety of pre-defined roles that are available in the Roles menu item, as shown in the previous screenshot. In the New role dialog, enter the following information and select OK. Select the Add users tab, as shown in the following screenshot: Select the user Joe Brown from the list and select OK, as shown in the following screenshot: Have a go hero – mapping roles As we just saw, the system contains a default set of pre-defined user roles that can be found in Site Manager, the Administration tab, and Roles. Spend some time studying the roles contained in the Site Manager Administration Roles and understand how they fit into your website security model. Once that is completed, put together a proposal that defines any additions or changes that may be needed. What just happened? When you clicked the New role button, you first identified the name of the role used across all system management areas. Once the role was created, you then added the user Joe Brown to the role. Time for action – adding a user to another role Users can belong to multiple roles within the system. Let's add our user Joe Brown to another role using the CMS Desk interface using these steps: Log in to CMS Desk as Global Administrator, select the Administration tab, click Users, and select the manage user roles icon ,as shown in the following screenshot: Select CMS Basic users, click the move right (>) button and select Close, as shown in the following screenshot: Select the edit user icon, as shown in the following screenshot: Select the General tab, uncheck the Is global administrator box, and select OK, as shown in the following screenshot: Why are we doing this? If Joe is a Global Administrator, he will automatically have access to all system resources. Select the Log in as this user link, as shown in the following screenshot: Select OK to change the user prompt, as shown in the following screenshot: Verify that you are logged in as the User: Joe Brown, as shown in the following screenshot:

  Kentico CMS 5 Website Development: Beginner's Guide A clear, hands-on guide to build websites that get the most out of Kentico CMS 5's many powerful features Create websites that meet real-life requirements using example sites built with easy-to-follow steps Learn from easy-to-use examples to build a dynamic website Learn best practices to make your site more discoverable Practice your Kentico CMS skills from organizing your content to changing the site's look and feel Get going with example starter sites such as a corporate site, an e-commerce site, and a community-driven website to jumpstart your web development Written by Thom Robbins, the Web Evangelist for Kentico Software LLC Read more about this book (For more resources on CMS, see here.) Workflow management Workflow is a way to automate a business process for publishing content. Using workflow allows you to delegate portions of the business process to different users or groups for approval. Kentico CMS allows you to use workflow for all documents, including uploaded files. The workflow engine organizes the process of content creation, updates, and publishing content. The following diagram shows an example document lifecycle with workflow. It's important to keep in mind that document versioning is tightly bound with workflow and allows document comparison and version rollback. Time for action – configuring workflow The Kentico CMS workflow process is designed as a state machine. This means that workflows are event driven. A workflow contains three or more states, with only one state active at any given time. Based on an event, a transition is made to another state. Once a transition is made to the final state, the workflow is completed. Within each workflow step, members of authorized roles are allowed to modify, approve, or reject a document. Now, let's configure a workflow for the News folder. In CMS Site Manager, select the Development tab, select Workflows, and click New workflow, as shown in the following screenshot: For the New workflow, enter the Display Name as Approval and Code Name as Approval, as shown in the following screenshot: Select the Steps tab and click on the New workflow step link, as shown in the following screenshot: Quick tip The Edit, Published, and Archived steps are automatically created for every workflow and can't be deleted. These steps use the default system security. Enter the following information and select OK. Select the Roles tab and click Add roles, as shown in the following screenshot: Select the CMS Desk Administrators role and select OK. Select the Scope tab and click on the New workflow scope link, as shown in the following screenshot: What is a workflow scope? The workflow scope defines the folder, documents, and languages that are included in the workflow. In the Starting alias path, click the Select button, as shown in the following screenshot: Select News and then click the Select button, as shown in the following screenshot: Select OK, as shown in the following screenshot, to save the workflow scope.

  Alfresco 3 Web Content Management Create an infrastructure to manage all your web content, and deploy it to various external production systems A complete guide to Web Content Creation and Distribution Understand the concepts and advantages of Publishing-style Web CMS Leverage a single installation to manage multiple websites Integrate Alfresco web applications with external systems Read more about this book (For more resources on Alfresco 3, see here.) Alfresco WCM staging has an autodeploy option in its default workflow, allowing end users, at the time of submit, to enforce automatic deployment of approved changes directly to the live website without having to manually initiate deployment. The Submit Items window has an Auto Deploy checkbox, as shown in the following screenshot: Upon approval, if the auto deploy option is on, the workflow will perform a deployment to those live servers that have the Include In Auto Deploy option enabled. For more details about enabling this option, refer the Configuring a web project to use FSR section in the previous article. Deploying to a test server The Test Server Deployment functionality provides in-context preview by allowing a contributor to deploy their content to an external target (either an ASR or FSR), from which it can be rendered by any web application technology that can either read from a filesystem or access an ASR via HTTP (which includes all of the major web application technologies in use today, including Java, .NET, PHP, Ruby, Python, CGI, and so on). Once a test server has been deployed to, it is allocated to the user or workflow that performed the deployment. Once the user or workflow has finished with the test server it is released and returned to the pool of test servers. This happens automatically in the case of a workflow sandbox and manually via a UI action for User Sandboxes. The following process has to be followed to use the test server: Set up a test server pool. Deploy to a test server. Preview the content. Release the test server. Setting up a test server pool The following are the steps to configure a Web Project to use an FSR. Navigate to Company Home Web Projects | <web project name>|. Select the Edit Web Project Settings from the Action menu. Click on Next to reach the Configure Deployment Servers window. Click on the Add Deployment Receiver link as shown in the following screenshot: For Type, select Test Server, specify the Display Name, Host name, and the Target Name. Click on the Add button. Similarly configure another test server, say with "cignex-test2" as the target. Ensure that the FSR is running on the test server. The targets "cignex-test1" and "cignex-test2" are configured in FSR. Deploy to a test server Let's say, you as a content manager would like to deploy your User Sandbox to the test server for testing purposes. Go to your User Sandbox and from the More Actions menu choose Deploy as shown in the following screenshot: The Deploy Sandbox window displays, listing all of the unallocated test servers as shown in the next screenshot. Select a test server to use (only one test server can be allocated to a sandbox at a time), and click on OK. The Monitor Deployment information displays once the deployment completes. If an error occurs, the reason for the error is shown under the Deployment Failed message:

  Alfresco 3 Web Content Management Create an infrastructure to manage all your web content, and deploy it to various external production systems A complete guide to Web Content Creation and Distribution Understand the concepts and advantages of Publishing-style Web CMS Leverage a single installation to manage multiple websites Integrate Alfresco web applications with external systems Read more about this book (For more resources on Alfresco 3, see here.) Introduction to content delivery Alfresco provides a framework for pushing content from a stage (or authoring) server to live and test servers, as shown in the following figure: The Alfresco content production environment produces an approved view of a web project called a snapshot. Consider each snapshot as a web project version. Alfresco deployment takes a snapshot and pushes it out to either live or test servers. Consider a sample scenario as shown in the following diagram, where the content from the stage server is deployed to live servers. When snapshot version 2 is deployed to live servers, then the Alfresco deployment engine only copies the files which are either new or modifed and removes the files which are deleted when compared to snapshot version 1. The deployment engine is smart, which affects only few files rather than copying all of the files of a web project. Now that the snapshot version 2 is live (deployed to live servers), the editorial staff may work on a future version 3. Let's say for some reason there is an issue with snapshot version 2, which is live. You have the option of rolling it back to the previous good version of snapshot version 1. You can roll forward or you can roll back to a specific version of a web project snapshot version. This feature is very powerful even from a legal audit point of view, wherein you have an ability to reproduce the website as of a specific date. Further, the deployment process may be automated so that it happens automatically when content is approved for publishing. The deployment framework provides a flexible and highly-configurable system to allow you to tailor the system to your requirements. If the Alfresco-supplied components are not suitable, you can plug in your own authenticators, transport implementations, content transformers, and deployment targets. Live server vs. Test server Alfresco WCM enables previewing the content within the stage server environment. After content creation, the Editorial staff may preview web pages to verify the content, as well as the look and feel. Similarly the content reviewers and business owners may preview to review the web pages during the workflow process. Because of this powerful feature, you may not need a separate test server to preview and approve the content. The stage server itself is used for both authoring and testing the content. Hence, the content is authored and approved on the stage server and then deployed to the live servers directly. However, there can be a situation where you may need a separate test server. For example, if you are deploying content to another frontend application outside of Alfresco such as a PHP or .NET application, or situations when the virtualization server is not capable of providing the preview. Starting with the version 2.2 release Alfresco introduced the concept of a Test Server. You deploy the content from a Staging Sandbox to the live server and you deploy content from User Sandbox or from a workflow to the test server. Static vs. Dynamic delivery model Within the live or test server environment, you can push out content to a fat filesystem to be served up by Apache or IIS, or you can push your content into another runtime instance of Alfresco. Pushing content to a fat filesystem environment is also known as Static Deployment and it is achieved using Alfresco File System Receiver (FSR). Pushing content to another runtime instance of Alfresco is also known as Dynamic Deployment and it is achieved using Alfresco Server Receiver (ASR). In static deployment, the web pages are already rendered (or baked) before deploying. In dynamic deployment, since the content is in the runtime instance of Alfresco, the web pages will be generated (or fried) at runtime. The following is a summary of static and dynamic delivery models:     Static "Bake" Model Dynamic "Fry" Model Delivery Technology Web Servers Application Servers Page Compositing Submission time Request time Content deployed to File System Alfresco Runtime Content Search Not supported Supported out of the box Content Security Not supported Supported out of the box Personalization Limited Unlimited Performance Ultimate Less than the "bake" model   You can consider a hybrid deployment (both static and dynamic) for some business applications. You can define certain static content of the web project such as images, videos, and scripts to be deployed to the filesystem and certain dynamic content such as web pages to be deployed to the Alfresco runtime. This approach gives you good performance as well as personalized and dynamically changing content in a production environment. FSR for static delivery A File System Receiver (FSR) will need to be installed and configured on each live or test server to receive published static content from the Alfresco Staging Server. The FSR is a small, standalone server that receives updates from an Alfresco repository running Web Content Management; content is published to a fat filesystem. The published fat files will typically be served by a web server such as Apache, for static content or an application server such as Tomcat, JBoss, or IIS for web applications (WARs, PHP files, and so on). FSR requires filesystem access and must run as a user with appropriate rights to the target filesystem. The FSR is a standalone Java Daemon (no Tomcat or other app server required) and it has minimal resource requirements. The FSR supports the invocation of custom Java code and/or programs. Therefore, it can be used to perform additional tasks post-deployment such as search engine indexing, pushing content to a Content Delivery Network (CDN), or replicating content to other systems or repositories. The destination file server receiver has to be running with its RMI registry port and service port (44100 and 44101 by default) opened. Installing FSR If you refer to SourceForge at http://sourceforge.net/projects/alfresco/files/, you will notice three different downloads of FSR. A Microsoft Windows installer file (Alfresco-DeploymentCommunity-3.3-Setup.exe), a Linux installer file (Alfresco-DeploymentCommunity-3.3-Linux-x86-Install) for automatic installation, and a ZIP file (alfresco-community-deployment-3.3.zip) for manual installation. I would prefer using the ZIP file and manually installing the standalone deployment receiver. Both Windows and Linux installers have certain limitations as they do not provide configuring various deployment targets. Unzip the deployment ZIP file into a convenient location (it does not make its own directory) on a live or test server. Notice a file named deployment.properties, which contains the configuration information. The folder deployment includes default target information. To configure the filesystem receiver, open the deployment.properties file in the text editor of your choice. Choose locations for each of the following: ; filesystem receiver configuration deployment.filesystem.datadir=D:/07_MUN_WORK/alfresco_book_wcm_32e/ deployment-data/depdata deployment.filesystem.logdir=D:/07_MUN_WORK/alfresco_book_wcm_32e/ deployment-data/deplog deployment.filesystem.metadatadir=D:/07_MUN_WORK/alfresco_book_ wcm_32e/deployment-data/depmetadata deployment.filesystem.autofix=true deployment.filesystem.errorOnOverwrite=false ; Deployment Engine configuration deployment.rmi.port=44100 deployment.rmi.service.port=44101 ; Stand alone deployment server specific properties deployment.user=admin deployment.password=admin deployment.filesystem.datadir: This is the location in which the filesystem deployment receiver stores deployed files during a deployment, before committing them to their final locations. deployment.filesystem.logdir: This is the location in which the filesystem deployment receiver stores deployment time log data. deployment.filesystem.metadatadir: This is the location in which the filesystem deployment receiver stores metadata about deployed content. deployment.filesystem.autofix: The file system deployment target can either issue an error upon detecting a problem or automatically fix the problem. The autofix parameter controls whether the File System Deployment Target will attempt to fix the metadata itself or just issue a warning. Set the value to true to fix, or false to not fix. deployment.filesystem.errorOnOverWrite: The file system deployment target can issue an error upon overwriting the files. Set the value to false to overwrite the files, which is needed when updating the existing files. deployment.rmi.port: The port number to use for the RMI registry. Choose this so as not to conflict with any other services. By default, the standalone deployment receiver uses 44100. deployment.rmi.service.port: The port number to use for RMI service. Choose this so as not to conflict with any other services. By default this is 44101. Note that while specifying the directory locations on Microsoft Windows, either use forward slashes or escape the backslashes. For example, C:/dir1/dir2 or C:dir1dir2> Configuring your deployment targets You can configure as many target filesystem receivers as you need on a single live or test server. By default, a single filesystem receiver is defined with simple configuration via deployment.properties. Deployment targets are placed in the deployment folder with the filename deployment/*target.xml. To define more targets, follow the pattern of deployment/default-target.xml. There are two steps involved Definition of your target information in the deployment.properties file. Registration of your target with the deployment engine using an XML file. Let's create a deployment target for the CIGNEX website and let's name it as cignex-live1 target. As a first step to configure filesystem receiver, open the deployment.properties file in the text editor of your choice and add the cignex-live1 filesystem target configuration as follows: ; cignex-live1 filesystem target configuration deployment.filesystem.cignex-live1.metadatadir= ${deployment. filesystem.metadatadir}/cignex-live1 deployment.filesystem.cignex-live1.rootdir= D:/07_MUN_WORK/alfresco_book_wcm_32e/deployment-data/targets/cignex- live1 deployment.filesystem.cignex-live1.name=cignex-live1 deployment.filesystem.cignex-live1.user=admin deployment.filesystem.cignex-live1.password=admin Now to register this new target, you need to create a target XML file in the deployment folder. You can refer to an existing target file, default-target.xml, in the deployment folder for more information. Copy deployment/default-target.xml as the deployment/cignex-live1-target.xml file. Open the deployment/cignex-live1-target.xml file in your text editor of choice and replace the keyword default with the keyword cignex-live1. With these simple two steps, you have configured a new target named cignex-live1. Start and stop deployment receiver To run the receiver, execute deploy_start.sh(or deploy_start.bat) as the user on that server. Remember this user will be the owner of the deployed content. To stop the receiver, execute the deploy_stop.sh or deploy_stop.bat file. Using FSR from Alfresco WCM staging Now that the FSR is configured and running, you can use it from Alfresco staging to deploy the content. Configuring a web project to use FSR The following are the steps to configure a Web Project to use an FSR. Navigate to Company Home | Web Projects | <web project name>. Select Edit Web Project Settings from the Action menu. Click on Next to reach the Configure Deployment Servers window. Click on the Add Deployment Receiver link as shown in the following screenshot. Fill out the form as needed. The minimum required fields to be filled out, assuming default settings, are the Host name where the FSR is located and the Target Name. The following table contains the description of each of the FSR configuration fields.   Field Name Description Type Live Server or Test Server. You deploy the content from Staging Sandbox to the live server. And you deploy the content from User Sandbox or from workflow to the test server. Display Name A descriptive label for the server, used by the UI. Display Group The deployment receivers configured using the same Display Group name will be treated as one batch during deployment. Transport Name Name of the network protocol connection to the remote filesystem receiver. By default it is RMI. Host The host name of the destination server, can be a name or IP address. Port The RMI port to connect to on the destination server. URL The runtime URL of the destination server. Can be used to preview the deployment, upon a successful deployment. User Name The username to use to connect to the destination server. Password The password to use to connect to the destination server. Source Path The path of the folder to deploy, for example /ROOT/site1. Excludes A single regular expression (multiple rules can be defined within the expression) of items to exclude from the deployment, for example .*.jpg$|.*.gif$. Target Name The name of a target to deploy to, configured in the FSR. Include in Auto Deployment If checked, then this target will be included in auto deployment. Click on the Add and Finish buttons to complete the configuration.

  Drupal 7 A comprehensive beginner's guide to installing, configuring, and building a professional Drupal 7 website Set up, configure, and deploy a Drupal 7 website Easily add exciting and powerful features Design and implement your website's look and feel Promote, manage, and maintain your live website In-depth coverage of Drupal's new core features, including image handling and fields Extended media coverage Completely new coverage on Views Improved and updated coverage on themes and theming Over 150 online quiz questions and exercises included Revised and updated for Drupal 7 based on comments from thousands of readers Read more about this book (For more resources on Drupal, see here.) Performance Every once in a while, someone makes a site that becomes wildly popular. Having many people visiting all at once can put some serious strain on the server's resources and cause all sorts of problems as the congestion builds. If you are unsure about what resources are available on your site, check with the hosting service and find out what they provide in the way of disk space, monthly transfer, and transfer speed. Many hosting services will boast unlimited bandwidth, but won't talk about connection speed. In other words, they don't meter how much water you use because they only let you switch the hosepipe on half way. It's important to know the limitations of the hardware and network resources, but don't fall into the trap of believing this is the most important thing to know. Ensuring that there are facilities in place to handle a large amount of traffic will go some way in ensuring that your site scales well. It's a time-honored tradition in the corporate world to throw extra resources at computing problems—buying the latest, fastest servers to help speed up slow applications, upgrading network hardware to allow data to travel more freely, and so on. Invariably though, poorly designed software, or software that is poorly tuned for performance always finds a way to utilize all the resources one can throw at it and still want more. More often than not, it is better to look at why software is chewing up resources and see what can be done to either stop it or at least alleviate the problem, so that the software utilizes its resources wisely. Drupal already has several strategies in place to help you, the site administrator, decide how and when to use resource-intensive modules and how to maximize the site's efficiency. Caching This section provides several options to improve the performance of your site, and as nothing in this world is really free, you need to understand that, by and large, obtaining a performance boost comes at the expense of something else—namely, how up-to-date content is. The following screenshot shows the performance page: The first option, CLEAR CACHE, is useful while making modifications to a site because it helps to ensure that changes are definitely displayed and not held up while the site cache is still in operation. Having the ability to clear the cache in order to view precisely how pages are being built is useful, but comes at a price. Remember that if you have a large site with lots of content, then Drupal will have to do a lot of work to rebuild its cache, and it is possible that users may notice a slowdown during this time. It is important to only enable caching on a live site, and not on the development machine, because changes to a page show up only when the cache expires—causing confusion if you are expecting something else during testing. As you know, Drupal uses PHP to build web pages that are returned to a user's browser. Most of the time, these pages are unchanged between requests, and Drupal ends up repeating the work of building the same page before sending it off to the other users who requested it. It makes sense to tell Drupal that if it has created a web page once, it should store a copy of this page and serve that copy instead of going through the trouble of recreating it. The process of storing copies of web pages in order to reduce the amount of effort required to repeatedly create a page is known as caching. The trade-off when using page caching is that any changes to a page are only shown to the users once that cached version has expired and been replaced. This makes caching a suitable method for boosting performance whenever content is not updated very often or when it is not important to have new content presented immediately. You will need to decide how long you think it is suitable to go before any updates made to a page must be shown—the longer you leave a page cached, the less work Drupal has to do, but the longer it will take for new content to show on the site. If your site is a daily blog, then by all means set the cache for up to a day at a time. If your site is a super busy, breaking news portal, then clearly you would opt for a cache time in minutes. Drupal also has the ability to cache the content of blocks, which can be a real performance boost for authenticated users (since page caching is only available for anonymous users). Blocks are constructed independently from the page as a whole, and often require expensive database requests or other operations in order to provide the information they contain. Enabling block caching means that blocks no longer have to query the database (or whatever else it is they are doing) each time a page refreshes. Rather, they simply serve up the cached version and save on all that work. Again, make sure you carefully weigh up the benefits between having fresh content and having high performance. Bandwidth optimization BANDWIDTH OPTIMIZATION, shown at the bottom of the page in the previous screenshot, deals with how to best transfer data from your server across the Internet to the users' browsers. The way in which data is transferred plays a big role in optimizing performance. In general, the most important things to remember are: Keep files small Keep the number of files down As shown, Drupal can aggregate and compress disparate CSS and JavaScript files in order to reduce the size and number of requests made to a server. Obviously, this has a huge number of benefits, especially if you are charged for bandwidth usage. Again, don't aggregate files during development. Turn this feature on only once the site has gone live, otherwise you are in for some serious frustration when changes to themes or scripts don't show up or behave as expected. Maintenance I should make the following point very clear: All major development or changes to a site should be performed on the development machine and thoroughly tested before being implemented or ported to the live site. There will be times, however, when you simply have to make some changes directly to the live site—even if it is only to implement upgrades that have already been tested out on the development server. If this is the case, then rather than allow users to browse a site under maintenance, visit the Maintenance mode page in the Development section, and select Put site into maintenance mode, provide a Maintenance mode message to display if the default one is not suitable, and get on with your work. Be very careful when working in maintenance mode because once you have logged out you are effectively locked out too. This is because, by default, only one user (that is the administrative user) can do anything on the site while it is offline. If you log off and try logging in again, you are no longer the administrative user; you are instead anonymous and are shown only the offline message: This is not very helpful if you do happen to be the site administrator; so Drupal allows the login page to be accessed as normal. Navigate to http://localhost/ drupal/user, and you will be able to log in as the administrator and use the site without hindrance. Make sure you know the administrator's password before going into maintenance mode. Everyone else is locked out until the site is no longer under maintenance. Logging and errors Go to Logging and errors in the DEVELOPMENT section of the Configuration overlay. This page provides a few options used to control how errors are displayed and logged: Error messages to display allows you to decide whether to write errors to the screen or not. While you are busy building the site, it's useful to view All messages in order to determine what has gone wrong and when. However, once it is time to go live you should change this to None for security reasons. Doing so prevents Drupal from displaying information to malicious users who might be able to use it in an attack on your site. The final setting, Database log entries to keep, at least to begin with, is sensible. You may wish to increase or decrease the number of records stored on the system depending on how much work you have to do in order to maintain the site properly. Remember that Drupal can properly maintain the site's event logs only if the cron jobs are being run regularly. Having only one setting to make is not that exciting, but once the site is live and messages are no longer visible through the pages, you can check the logs in the Reports section. Doing this on a regular basis is a good strategy to ensure that the site continues to run smoothly. Error messages, warnings, and so on are effectively windows into the operations of the site, and are indispensable tools.

(For more resources on Alfresco 3, see here.) You can define and deploy your own task-oriented workflows in the Alfresco repository. However, you need to follow a particular format to define your workflow and a particular process to deploy it in Alfresco. Workflows can be deployed manually (which requires a restart of the server) and dynamically (without starting the server). For now we will deploy the workflow manually. These customizations are typically deployed via the alfresco/extension folder and require the Alfresco server to be restarted to take effect. In the later examples, we will deploy using the dynamic approach. As an example, we will configure one workflow. The use case scenario is as follows. There is a section of Blogs and News on the Cignex website, which needs to be updated monthly. The blog has to be published regularly. In order to publish, one needs to follow some process that can be defined in a workflow. The blog has to be reviewed by three different groups. Each group has different roles. Groups approve the blog one at a time and in order. When the blog is submitted, it will go to the first group. All the users belonging to that group will receive a notification via a task in the My Pooled Tasks dashlet. Any one of the users can take ownership and approve or reject the task. If rejected, it will go to the initiator. On approval it will go to next group and the process will continue for all three groups. Once the process is complete, a notification will be sent to the initiator. Also the blog would be submitted to the Staging box. For this, create Jennifer Bruce, Kristie Dawid, LeRoy Fuess, Michael Alison, and Jessica Tucker as users. Create three groups: Technical Reviewer, Editorial, and Publisher. Add Jennifer Bruce and Kristie Dawid to Technical Reviewer, add LeRoy Fuess to Editorial, and add Michael Alison and Jessica Tucker to Publisher. Invite Technical Reviewer, Editorial, and Publisher as Reviewer on the Cignex web project. The custom workflow process is shown in the following diagram: Defining the workflow process For any workflow to be deployed you should have the following files: Task Model: The Task Model provides a description for each of the tasks in the workflow. Each task description consists of Name, Title, Properties, Mandatory Aspects, and Association. Process Definition: The Process Definition describes the states (steps) and transitions (choices) of a workflow. Resource Bundle (optional): A workflow Resource Bundle provides all the human-readable messages displayed in the user interface for managing the workflow. Messages include task titles, task property names, task choices, and so on. web-client-config-custom.xml: Web Client configuration specifies the presentation of Tasks and properties to the user in the Alfresco Explorer. custom-model-context.xml: The custom model Spring Context file instructs Spring on how to bootstrap or load the Task Model definition file, Process Definition file, and Resource Bundle. web-client-config-wcm.xml: Web Client configuration specifies the availability of workflow to the web project in the Alfresco Explorer. Follow these steps to create a custom workflow. Step 1: Create a Task Model For each task in the Process Definition (as defined by <task> elements), it is possible to associate a task description. The description specifies information that may be attached to a task, that is properties (name and data type) associations (name and type of associated object), and mandatory aspects. A user may view and edit this information in the Task dialog within the Alfresco Explorer. The Task Model is expressed as a Content Model, as supported by the Data Dictionary. To create a Task Model, create a new Content Model file for Process Definition with the .xml extension. Define a Content Model name Create a Type for each task Define Properties Define and add Aspects to a Type Define a Content Model name Create a new Content Model for the Process Definition. Define the namespace of the model. XML namespaces provide a method for avoiding element name conflicts. If you want to use any other model's task, aspect, or association, then you can use it by importing their namespace. Reusability of Task Model is possible. <?xml version="1.0" encoding="UTF-8"?> <model name="bookwcmwf:workflowmodel" > <imports> <import uri="http://www.alfresco.org/model/wcmworkflow/1.0" prefix="wcmwf" /> <import uri="http://www.alfresco.org/model/bpm/1.0" prefix="bpm"> </imports> <namespaces> <namespace uri="http://book.com" prefix="bookwcmwf" /> </namespaces></model> Create a Type for each task For each task we have to define a Content Type. The Type can also be extended as follows: <types> <type name="bookwcmwf:submitReviewTask"> <parent>wcmwf:startTask</parent> </type></types> Define Properties Within each Type, describe the Properties and Associations (information) required for that task. Properties can also be inherited from other task definitions. Using the previous example all the properties of wcmwf:startTask will be added to this Type. <type name="bookwcmwf:submitReviewTask"> <parent>wcmwf:startTask</parent> <properties> <property name="wcmwf:submitReviewType"> <title>Serial or Parallel Review</title> <type>d:text</type> </property> </properties> <associations> <association name="wcmwf:webproject"> <source> <mandatory>false</mandatory> <many>false</many> </source> <target> <class>wca:webfolder</class> <mandatory>true</mandatory> <many>false</many> </target> </association> </associations></type> Define Aspect You can also introduce custom properties by defining an Aspect. An Aspect can be applied to any Content Type. Once applied, the properties are added to that Content Type. You cannot define a dependency on other Aspects. They cannot be extended. <type name="bookwcmwf:verifyBrokenLinksTask"> <parent>wcmwf:workflowTask</parent> <mandatory-aspects> <aspect>bookwcmwf:reviewInfo</aspect> <aspect>bpm:assignee</aspect> </mandatory-aspects></type> <aspects> <aspect name="bookwcmwf:reviewInfo"> <properties> <property name=" bookwcmwf:reviewerCnt"> <title>Reviewer Count</title> <type>d:int</type> <mandatory>true</mandatory> </property> </properties> </aspect></aspects> The following are the advantages of having custom Aspect over custom content: Flexibility: You will have more flexibility. Having a custom Aspect will give you the flexibility to add an additional set of properties to the documents in specific spaces. Efficiency: Since these properties are applied selectively to certain documents only in certain spaces, you will use limited storage in a relational database for these properties. The following are the disadvantages of having custom Aspect over custom content: High Maintenance: If the custom Aspect (additional properties) is added to documents based on business rules, you need to define it at every space, wherever required. Dependency: You cannot define the dependency with other Aspects. For example, if you need the effectivity aspect to always be associated with the custom aspect, you need to make sure you attach both the Aspects to the documents. Now that we are familiar with the code, let's develop a complete model file to deploy our case study in action. For any customization of files you have to develop the files in the extension folder of <install-alfresco>. Create a file book-serial-group-workflow-wcmModel.xml in the specified location <install-alfresco>/tomcat/shared/classes/alfresco/extension. Copy the downloaded content into the file. For reference, go to http://wiki.alfresco.com/wiki/Data_Dictionary_Guide#Content_Types. Step 2: Create the Process Definition A Process Definition represents a formal specification of a business process and is based on a directed graph. The graph is composed of nodes and transitions. Every node in the graph is of a specific Type. The Type of the node defines the runtime behavior. A Process Definition has exactly one Start-state and End-state. The following table describes some of the key terms used in a Process Definition: Key term Description Swimlane Swimlane is used to define a role for a user. Transition Transitions have a source node and a destination node. The source node is represented by the property from and the destination node is represented by the property to. It is used to connect nodes. A Transition can optionally have a name. The name is represented in the UI with a button. Task Tasks are associated with a Swimlane. These tasks are defined in the Workflow model files. On the basis of these tasks, the Properties are displayed. Actions Actions are pieces of Java code that are executed upon events in the process execution. These actions are performed on the basis of these tasks, as defined in the Process Definition. Events The jBPM engine will fire Events during the graph execution. Events specify moments in the execution of the process. An Event can be task-create, nodeenter, task-end, process-end, and so on. When the jBPM engine fires an event, the list of Actions is executed. Scripts Script is executed within Action. Some of the variables that can be available in Script are node, task, execution context, and so on. Nodes Each Node has a specific type. The Node Type determines what will happen when an execution arrives in the Node at runtime. The following table summarizes the Node Types available in jBPM out of the box. Node types Description Task Node A Task Node represents one or more tasks that have to be performed by users. Start-state There can be only one Start-state in the Process Definition, which logs the start of the workflow. decision The distinction between multiple paths. When the decision between multiples path has to be taken, a decision node is used. fork A fork splits one path of execution into multiple concurrent paths of execution. join Joins multiple paths into single path. A join will end every token that enters the join. node The node serves the situation where you want to write your own code in a node. End-state There can be only one End-state in the Process Definition, which logs the end of the workflow. There are two ways of building the Process Definition. One is by hand, that is create a jPDL XML document. The second option is by designer, that is use a tool to generate the jPDL XML document. To create a Process Definition, create a new Process Definition file with the extension .xml. Define a Process Definition name The Process Definition name is important. <?xml version="1.0" encoding="UTF-8"?> <process-definition name="bookwcmwf:bookworkflow"> In the previous code we have used bookwcmwf:bookworkflow where bookwcmwf is the namespace of the workflow model file defined earlier, which we are going to use in this Process Definition, and bookworkflow can be any name. Define a Swimlane Swimlanes are used to declare workflow "roles". Tasks are associated with a Swimlane. Here initiator is the user who is starting the workflow. Likewise, we have some other roles also defined. For example, bpm_assignee (one user to whom the workflow is assigned), bpm_assignees (one or more user), bpm_groupAssignee (single group), and bpm_groupAssignees (one or more groups). <swimlane name="initiator"/><swimlane name="approver"> <assignment class="org.alfresco.repo.workflow.jbpm.AlfrescoAssignment"> <pooledactors>#{bpm_groupAssignee}</pooledactors> </assignment></swimlane><swimlane name="assignee"> <assignment class="org.alfresco.repo.workflow.jbpm.AlfrescoAssignment"> <actor>#{bpm_assignee}</actor> </assignment></swimlane> Associate a task We have already defined task in the Content Model files. On the basis of these tasks the properties are displayed. Next step is to add these tasks to the workflow process. To start with, add a task to the start node. The Start Task is assigned to the initiator of the workflow. It's used to collect the information (that is the workflow parameters) required for the workflow to proceed. <start-state name="start"> <task name="bookwcmwf:submitReviewTask" swimlane="initiator"/> <transition name="" to="initialise"/></start-state><swimlane name="assignee"> <assignment class="org.alfresco.repo.workflow.jbpm.AlfrescoAssignment"> <actor>#{bpm_assignee}</actor> </assignment></swimlane> <task-node name="initialise "> <task name="bookwcmwf:verifyBrokenLinksTask" swimlane="assignee" /> <transition name="abort" to="end"> <action class="org.alfresco.repo.workflow.jbpm.AlfrescoJavaScript"> <script> var mail = actions.create("mail"); mail.parameters.to = initiator.properties["cm:email"]; mail.parameters.subject = "Adhoc Task " + bpm_workflowDescription; mail.parameters.from = bpm_assignee.properties["cm:email"]; mail.parameters.text = "It's done"; mail.execute(bpm_package); </script> </action> </task-node> <end-state name="end"/> During runtime, all the properties of the task bookwcmwf:submitReviewTask are visible to the user who is initiating a workflow. Once the properties are filled, the initiator assigns a task to another user or group. In this case, it is assigned to user. Now the task appears in dashlets of assigned user. The Assignee fills the properties of the task bookwcmwf:verifyBrokenLinksTask and clicks on the abort button. The abort transition would call Alfresco JavaScript that sends an e-mail. And an end-state event will log the end of the workflow. We are now ready to create a Process Definition file and use the workflow model we developed earlier for our case study. Create a file book-serial-group-processdefinition.xml in the specified location <install-alfresco>/tomcat/shared/classes/alfresco/extension. Copy the downloaded content into the file. For reference go to http://wiki.alfresco.com/wiki/WorkflowAdministration. Step 3: Create the workflow Resource Bundles For localized workflow interaction it is necessary to provide Resource Bundles containing UI labels for each piece of text that is exposed to the user. With the appropriate Resource Bundles, a single workflow instance may spawn tasks where the user interface for each task is rendered in a different language, based on the locale of the user. Specific structure has to be followed in order to define labels for UI in Resource Bundle. <model_prefix>_<model_name>.[title|description]<model_prefix>_<model_name>.<model_element>.<element_prefix>_ <element_name>.[title|description] Add all the properties that relate to this Process Definition and model. bookwcmwf_bookworkflow.workflow.title=Book Workflow bookwcmwf_bookworkflow.node.verifybrokenlinks.transition.abort.title=Abort Submission bookwcmwf_workflowmodel.type.bookwcmwf_reviewTask.description=Review Documents to approve or reject them Create a file book-serial-group-messages.properties in the specified location, <install-alfresco>/tomcat/shared/classes/alfresco/extension. Copy the downloaded content into the file.

  WordPress 3.0 jQuery Enhance your WordPress website with the captivating effects of jQuery. Enhance the usability and increase visual interest in your WordPress 3.0 site with easy-to-implement jQuery techniques Create advanced animations, use the UI plugin to your advantage within WordPress, and create custom jQuery plugins for your site Turn your jQuery plugins into WordPress plugins and share with the world Implement all of the above jQuery enhancements without ever having to make a WordPress content editor switch over into HTML view   Read more about this book (For more resources on WordPress and jQuery, see here.) WordPress plugins overview So themes change the look of WordPress without affecting its functionality. But what if you want to change or add functionality? WordPress plugins allow easy modification, customization, and enhancement to a WordPress site. Instead of having to dig in to the main files and change the core programming of WordPress, you can add functionality by installing and activating WordPress plugins. The WordPress development team took great care to make it easy to create plugins using access points and methods provided by the WordPress' Plugin API (Application Program Interface). The best place to search for plugins is: http://wordpress.org/extend/plugins/. The following is a screenshot of the WordPress plugin directory's main page: (Move the mouse over the image to enlarge.) Once you have a plugin, it's a simple matter of decompressing the file (usually just unzipping it) and reading the included readme.txt file for installation and activation instructions. For most WordPress plugins, this is simply a matter of uploading the file or directory to your WordPress installation's wp-content/plugins directory and then navigating to the Administration | Plugins | Installed panel to activate it. The next screenshot shows the Plugins admin panel with the activation screen for the default Askimet, Hello Dolly, and new WordPress Importer plugins: So how does a WordPress plugin differ from a jQuery plugin? In theory and intent, not that much, but in practice, there are quite a few differences. Let's take a look at jQuery plugins. jQuery plugins overview jQuery has the ability to allow you to take the scripts that you've created and encapsulate them into the jQuery function object. This allows your jQuery code to do a couple of key things. First, it becomes more easily ported over to different situations and uses. Second, your plugin works as a function that can be integrated into larger scripts as part of the jQuery statement chain. The best place to browse for jQuery plugins is the jQuery plugins page (http://plugins.jquery.com/), as seen in the next screenshot: In addition to having jQuery already bundled, WordPress has quite a few jQuery plugins already bundled with it as well. WordPress comes bundled with Color, Thickbox as well as Form and most of the jQuery UI plugins. Each of these plugins can be enabled with the wp_enqueue_script either in the theme's header.php file or function.php file, in WordPress. In this article, we'll shortly learn how to enable a jQuery plugin directly in a WordPress plugin. Of course, you can also download jQuery plugins and include them manually into your WordPress theme or plugins. You'd do this for plugins that aren't bundled with WordPress, or if you need to amend the plugins in anyway. Yes, you've noticed there's no easy jQuery plugin activation panel in WordPress. This is where understanding your chosen theme and WordPress plugins will come in handy! You'll soon find you have quite a few options to choose from when leveraging jQuery. Now that we have an overview of what WordPress themes, plugins, and jQuery plugins are, let's learn how to take better advantage of them. The basics of a WordPress plugin The goal here is to show you the structure of a simple WordPress plugin and the basics of how to construct one. Understanding this, you can begin to write your own basic plugins and feel more confident looking through other people's plugins when assessing what kind of features they provide to your WordPress site and if you need to tweak anything for your jQuery enhancements. Even as simply and basically as we're going to work, you'll see how truly powerful WordPress plugins can be. Want to become a WordPress plugin rockstar? You can start off with, yet again, WordPress 2.7 Complete by April Hodge Silver and Hasin Hayder. There's a chapter on plugins that walks you through creating very useful simple plugins, as well as a more complex plugin that writes to the WordPress database. Beyond that, you'll want to check out WordPress Plugin Development: Beginner's Guide by Vladimir Prelovac. Don't let the title fool you, Vladimir will have you generating feature rich and dynamic WordPress plugins using WordPress' coding standards all explained with clear, step-by-step code. Working with plugins does require some experience with PHP. I'll keep this explanation fairly straightforward for non-PHP developers, and those of you with PHP experience should be able to see how to expand on this example to your advantage in WordPress. Just as with themes, WordPress plugins require a little structure to get started with them. There's no defined hierarchy for plugin files, but you do need, at the very least, a PHP file with a special comment up top so that WordPress can display it within the Plugin Management page. While there are some single-file plugins out there, such as the Hello Dolly plugin, which comes with your WordPress installation, you never know when you first start developing, the ways in which a plugin may grow. To be safe, I like to organize my plugins into a uniquely named folder. Again, like with themes, WordPress relies on the plugin directory's namespace, so uniqueness is of key importance! In the wp-content/plugins directory you can place a unique folder and inside that, create a .php file, and at the beginning of the file, inside the <?php ?> tags, include the following header information. Only the bold information is absolutely required. The rest of the information is optional and populates the Manage Plugins page in the Administration panel. <?php /* Plugin Name: your WordPress Plugin Name goes here Plugin URI: http://yoururl.com/plugin-info Description: Explanation of what it does Author: Your Name Version: 1.0 Author URI: http://yoururl.com */ //plugin code will go here ?> Make sure that you don't have any spaces before your <?php tag or after your ?> tag. If you do, WordPress will display some errors because the system will get some errors about page headers already being sent. Once you have your .php file set up in its own directory, inside your plugin directory, you can add a basic PHP function. You can then decide how you want to evoke that function, using an action hook or a filter hook. For example: <?php /* Plugin Name: your WordPress Plugin Name goes here Plugin URI: http://yoururl.com/plugin-info Description: Explanation of what it does Author: Your Name Version: 1.0 Author URI: http://yoururl.com */ function myPluginFunction(){ //function code will go here } add_filter('the_title', 'myPluginFunction'); //or you could: /*add_action('wp_head', 'myPluginFunction');*/ ?> If you didn't have wp_head or wp_footer in your theme, many plugins can't function, and you limit yourself to the plugins you can write. In my plugins, I mostly use wp_header and the init action hooks. Luckily, most filter hooks will work in your plugins as WordPress will run through them in The Loop. For the most part, you'll get the most work done in your plugin using the_title and the_content filter hooks. Each of these filter's hooks will execute your function when WordPress loops through those template tags in the loop. Want to know what filter and action hooks are available? The list is exhaustive. In fact, it's so immense that the WordPress codex doesn't seem to have them all documented! For the most complete listing available of all action and filter hooks, including newer hooks available in version 2.9.x, you'll want to check out Adam Brown's WordPress Hooks Database: http://adambrown.info/p/wp_hooks. Overwhelmed by the database? Of course, checking out Vladimir's WordPress Plugin Development: Beginner's Guide will get you started with an arsenal of action and filter hooks as well. You now understand the basics of a WordPress plugin! Let's do something with it. Project: Writing a WordPress plugin to display author bios As we've discussed, plugins can help expand WordPress and give it new functionality. However, we've seen that adding jQuery scripts directly to the theme and editing its template pages here and there will do the trick in most cases. But let's imagine a more complicated scenario using our modified default theme and the hypothetical client. While we tweaked the default theme, I figured that this client might want to have her site's focus be more journalism oriented, and thus, she'd want some attention drawn to the author of each post upfront. I was right, she does. However, there's a catch. She doesn't just want their WordPress nickname displayed; she'd prefer their full first and last name be displayed as well, as it's more professional. She'd also like their quick biography displayed with a link to their own URL and yet, not have that information "get in the way" of the article itself, or lost down at the bottom of the post. And here's the really fun part; she wants this change affected not just on this site, but across her network of genre-specific news sites, over 20 of them at last count (dang, I forgot she had so many sites! Good thing she's hypothetical). For this specific WordPress site, it's easy enough to go in and comment out the custom function we dealt with earlier: add in the_author tag and display it twice, passing each tag some parameters to display the first and last name. I can also add a tag to display the author's biography snippet from the user panel and URL (if they've filled out that information). Also, it's certainly easy enough to add a little jQuery script to make that bio div show up on a rollover of the author's name. However, having to take all that work and then re-copy it into 20 different sites, many of which are not using the default theme, and most of which have not had jQuery included into their theme, does sound like an unnecessary amount of work (to boot, the client has mentioned that she's deciding on some new themes for some of the sites, but she doesn't know which sites will get what new themes yet). It is an unnecessary amount of work. Instead of amending this theme and then poking through, pasting, testing, and tweaking in 20 other themes, we'll spend that time creating a WordPress plugin. It will then be easy to deploy it across all the client's sites, and it shouldn't matter what theme each site is using. Let's get started!

  WordPress 3.0 jQuery Enhance your WordPress website with the captivating effects of jQuery. Enhance the usability and increase visual interest in your WordPress 3.0 site with easy-to-implement jQuery techniques Create advanced animations, use the UI plugin to your advantage within WordPress, and create custom jQuery plugins for your site Turn your jQuery plugins into WordPress plugins and share with the world Implement all of the above jQuery enhancements without ever having to make a WordPress content editor switch over into HTML view   Read more about this book (For more resources on WordPress and jQuery, see here.) Two ways to "plugin" jQuery into a WordPress site You're aware that WordPress is an impressive publishing platform. Its core strength lies in its near perfect separation of content, display, and functionality. Likewise, jQuery is an impressive JavaScript library with a lot of effort spent on making it work across platforms, be very flexible and extensible, and yet, elegantly degradable (if a user doesn't have JavaScript enabled for some reason). You're aware that WordPress themes control the look and feel of your site and that WordPress plugins can help your site do more, but we're going to take a look at exactly how those two components work within the WordPress system and how to use jQuery from either a theme or a WordPress plugin. In doing so, you'll be better able to take advantage of them when developing your jQuery enhancements. Speaking of jQuery enhancements, jQuery scripts can be turned into their own type of plugins, not to be confused with WordPress plugins. This makes the work you do in jQuery easily portable to different projects and uses. Between these three components, themes, WordPress plugins, and jQuery plugins, you'll find that just about anything you can dream of creating is at your fingertips. Even better, you'll realize that most of the work is already done. All three of these component types have extensive libraries of already developed third-party creations. Most are free! If they aren't free, you'll be prepared to determine if they're worth their price. By understanding the basics of editing themes and creating your own WordPress and jQuery plugins, you'll be ready to traverse the world of third-party creations and find the best solutions for your projects. You'll also be able to determine if it's better or faster to work with another developer's themes, plugins, or jQuery plugins, versus creating your own from scratch. WordPress themes overview A WordPress theme is, according to the WordPress codex, a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. Themes comprise a collection of template files and web collateral such as images, CSS stylesheets, and JavaScript. Themes are what allow you to modify the way your WordPress site looks, without having to know much about how WordPress works, much less change how it works. There are plenty of sites that host free themes and or sell premium WordPress themes. A quick Google search for "wordpress themes" will give you an idea of the enormity of options available. However, when first looking for or researching themes, a good place to start is always WordPress' free theme gallery where you can easily review and demo different themes and styles: http://wordpress.org/extend/themes/. The next screenshot shows the main page of the WordPress theme's directory: (Move the mouse over the image to enlarge.) Once you've selected a theme to use or work with, you'll activate the theme by navigating to Administration | Appearance | Themes in the left-hand side panel of your WordPress installation's administration panel. The next screenshot displays the Manage Themes panel: That's the minimum you need to know about themes as a WordPress user. The basics of a WordPress theme The WordPress theme essentially contains the HTML and CSS that wrap and style your WordPress content. Thus, it's usually the first place you'll start when incorporating jQuery into a site. Most of the time, this is a good approach. Understanding a bit more about how themes work can only make your jQuery development go a little smoother. Let's take a look at how themes are structured and best practices for editing them. Want to know more about WordPress theme design? This title focuses on what you most need to know to work with jQuery in WordPress. If you're interested in WordPress theme development I highly recommend April Hodge Silver and Hasin Hayer's WordPress 2.7 Complete. Along with covering the complete core competencies for managing a WordPress site, it has an overview on editing and creating standard themes for WordPress. If you want to really dig deep into theme design, my title WordPress 2.8 Theme Design will walk you through creating a working HTML and CSS design mockup and coding it up from scratch. Understanding the template's hierarchy We've discussed that a WordPress theme comprises many file types including template pages. Template pages have a structure or hierarchy to them. That means, if one template type is not present, then the WordPress system will call up the next level template type. This allows developers to create themes that are fantastically detailed, which take full advantage of all of the hierarchy's available template page types, to make the setup unbelievably simple. It's possible to have a fully functioning WordPress theme that consists of no more than an index.php file! To really leverage a theme for jQuery enhancement (not to mention help you with general WordPress troubleshooting), it's good to start with an understanding of the theme's hierarchy. In addition to these template files, themes of course also include image files, stylesheets, and even custom template pages, and PHP code files. Essentially, you can have 14 different default page templates in your WordPress theme, not including your style.css sheet or includes such as header.php, sidebar.php, and searchform.php. You can have more template pages than that if you take advantage of WordPress' capability for individual custom page, category, and tag templates. If you open up the default theme's directory that we've been working with, you'll see most of these template files as well as an image directory, style.css and the js directory with the custom-jquery.js file. The following screenshot shows you the main files in WordPress 3.0's new default theme, Twenty Ten: The next list contains the general template hierarchy rules. The absolute simplest theme you can have must contain an index.php page. If no other specific template pages exist, then index.php is the default. You can then begin expanding your theme by adding the following pages: archive.php trumps index.php when a category, tag, date, or author page is viewed. home.php trumps index.php when the home page is viewed. single.php trumps index.php when an individual post is viewed. search.php trumps index.php when the results from a search are viewed. 404.php trumps index.php when the URI address finds no existing content. page.php trumps index.php when looking at a static page. A custom template page, such as: page_about.php, when selected through the page's Administration panel, trumps page.php, which trumps index.php when that particular page is viewed. category.php trumps archive.php, which then trumps index.php when a category is viewed. A custom category-ID page, such as: category-12.php trumps category.php. This then trumps archive.php, which trumps index.php. tag.php trumps archive.php. This in turn trumps index.php when a tag page is viewed. A custom tag-tagname page, such as: tag-reviews.php trumps tag.php. This trumps archive.php, which trumps index.php. author.php trumps archive.php. This in turn trumps index.php, when an author page is viewed. date.php trumps archive.php. This trumps index.php when a date page is viewed. You can learn more about the WordPress theme template hierarchy here:http://codex.wordpress.org/Template_Hierarchy. A whole new theme If you wanted to create a new theme or if you'll be modifying a theme considerably, you'll want to create a directory with a file structure similar to the hierarchy explained previously. Again, because it's hierarchal, you don't have to create every single page suggested, higher up pages will assume the role unless you decide otherwise. As I've mentioned, it is possible to have a working theme with nothing but an index.php file. I'll be modifying the default theme, yet would like the original default theme available for reference. I'll make a copy of the default theme's directory and rename it to: twentyten-wp-jq. WordPress depends on the theme directories namespace. Meaning, each theme requires a uniquely named folder! Otherwise, you'll copy over another theme. The next screenshot shows this directory's creation: I'll then open up the style.css file and modify the information at the beginning of the CSS file: /* Theme Name: Twenty Ten - <b>edited for Chapter 3 of WordPress & jQuery</b> Theme URI: http://wordpress.org/ Description: The 2010 default theme for WordPress. Author: the WordPress team <b>& Tessa Silver</b> Version: 1.0 Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style */ ... My "new" theme will then show up in the administration panel's Manage Themes page. You can take a new screenshot to update your new or modified theme. If there is no screenshot, the frame will display a grey box. As the look of the theme is going to change a little, I've removed the screenshot.png file from the directory for now, as you can see in the next screenshot: The Loop We know how useful it is when jQuery "loops" through selected elements in a wrapper for you. WordPress does a little looping of its own; in fact, it's important enough to be named "The Loop". The Loop is an essential part of your WordPress theme. It displays your posts in chronological order and lets you define custom display properties with various WordPress template tags wrapped in HTML markup. The Loop in WordPress is a while loop and therefore starts with the PHP code: while (have_posts()): followed by the template tag the_post(). All the markup and additional template tags are then applied to each post that gets looped through for display. The Loop is then ended with the PHP endwhile statement. Every template page view can have its own loop so that you can modify and change the look and layout of each type of post sort. Every template page is essentially, just sorting your posts in different ways. For example, different category or tag template pages sort and refine your posts down to meet specific criteria. Those sorted posts can appear different from posts on your main page, or in your archive lists, and so on. The next example is a very simple loop taken from WordPress 2.9.2's default Kubrick theme: ... <?php while (have_posts()) : the_post(); ?> <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <h2> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"> <?php the_title(); ?> </a> </h2> <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --> </small> <div class="entry"> <?php the_content('Read the rest of this entry &raquo;'); ?> </div> <p class="postmetadata"> <?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> </p> </div> <?php endwhile; ?> ... The loop is tucked into a large if/else statement that most importantly checks if there are posts to sort. If there are no matching posts to display, a "Sorry" message is displayed, and the searchform.php file is included with the get_search_form() include tag. The new WordPress 3.0 Twenty Ten theme has its loop separated out into its own template page called loop.php, and it has quite a few more if/else statements within it so that the same loop code can handle many different situations, instead of writing individual loops for different template pages. On the whole, the same basic template tags as well as conditional and include tags are used in the new theme as they were before in the previous default theme. There are now just a few new template and include tags that help you streamline your theme. Let's take a closer look at some of these template tags, include and conditional tags, and the API hooks available to us in a WordPress theme.

  Building job sites with Joomla! A practical stepwise tutorial to build your professional website using Joomla!  Build your own monster.com using Joomla!  Take your job site to the next level using commercial Jobs! Extension  Administrate and publish your Joomla! job site easily using the Joomla! 1.5 administrator panel and Jobs! Pro control panel interface  Boost your job site ranking in search engines using Joomla! SEO Introduction You may have various approaches for building a jobsite, with job search and registration facilities for users and providing several services to your clients such as job posting, online application process, resume search, and so on. Joomla! is one of the best approaches and an affordable solution for building your jobsite, even if you are a novice to Joomla!. This is because Joomla! is a free, open source Content Management System (CMS) , which provides one of the most powerful web application development frameworks available today. These are all reasons for building a jobsite with Joomla!: It has a friendly interface for all types of users—designers, developers, authors, and administrators. This CMS is growing rapidly and improving since its release. Joomla! is designed to be easy to install and set up even if you're not an advanced user. Another advantage is that you need less time and effort to build a jobsite with Joomla!. You need to use a Joomla! jobsite extension to build your jobsite and you can use the commercial extension Jobs! because it's fully equipped to operate a jobsite, featuring tools to manage jobs, resumes, applications, and subscriptions. If you are looking for a jobsite such as Monster, Career Builder, a niche jobs listing such as Tech Crunch, or just posting job ads on your company site, Jobs! is an ideal solution. To know more about this extension, visit its official website http://www.instantphp.com/ Jobs! has two variations—Jobs! Pro and Jobs! Basic . The Jobs! Pro provides some additional features and facilities, which are not available in Jobs! Basic. You can use any one of them, depending upon your needs and budget. But if you need full control over your jobsite and more customization facilities, then Jobs! Pro is recommended. You can install Jobs! component and its modules easily, like any other Joomla! extension. You need to spend only a few minutes to install and configure Joomla! 1.5 and Jobs! Pro 1.3 or Jobs! Basic 1.0. It is a stepwise setup process. But first you must ensure that your system meets all the requirements that are recommended by developers. Prerequisites for installation of Joomla! 1.5 and Jobs! Joomla! is written in PHP and mainly uses MySQL database to store and manipulate information. Before installing Joomla! 1.5 and Jobs! extension, we need a server environment, that includes the following:     Software/Application Minimum Requirement Recommended Version Website PHP 5 5.2 http//php.net MySQL 4.1 or above 5 http://dev.mysql.com/downloads/mysql/5.0.html Apache 1.3 or above   http://httpd.apache.org IIS 6 7 http://www.iis.net/ mod_mysql mod_xml mod_zlib       You must ensure that you have the MySQL, XML, and zlib functionality enabled within your PHP installation. This is controlled within the php.ini file. Setting up a local server environment In order to run Joomla! properly, we need a server environment with pre-installed PHP and MySQL. In this case, you can use a virtual server or can choose other hosting options. But if you want to try out Joomla! on your own computer before using a remote server, we can set up a local server environment. To set up a server environment, we can use XAMPP solution. It comes equipped with Apache HTTP server, PHP, and MySQL. Installing these components individually is quite difficult and needs more time and effort. To install XAMPP, download the latest version of XAMPP 1.7.x from the Apache friends website: http://www.apachefriends.org/en/xampp.html. Windows operating system users can install XAMPP for Windows in two different variations—self-extracting RAR archive and ZIP archive. If you want to use self-extracting RAR archive, first download the .exe file and then follow these steps: Run the installer file, choose a directory, and click on the Install button. After extracting XAMPP, the setup script setup_xampp.bat will start automatically. After the installation is done, click on Start All Programs | Apache Friends | XAMPP | XAMPP Control Pane|. Start Apache and MySQL by clicking on the Start buttons beside each item. If prompted by Windows Firewall, click on the Unblock button.For more information on installing XAMPP on Windows or troubleshooting, go to the Windows FAQs page: http://www.apachefriends.org/en/faqxampp- windows.html. If you are using Linux platform, download the compressed .tar.gz file and follow these steps for installation: Go to a Linux shell and log in as the system administrator root: su Extract the downloaded archive file to /opt: tar xvfz xampp-linux-1.7.3a.tar.gz -C /opt XAMPP is now installed in the /opt/lampp directory. To start XAMPP, call the command: /opt/lampp/lampp start You should now see something similar to the following on your screen: Starting XAMPP 1.7.3a... LAMPP: Starting Apache... LAMPP: Starting MySQL... LAMPP started.   For more information on installing XAMPP on Linux or troubleshooting, go to the Linux FAQs page: http://www.apachefriends.org/en/faq-xampp-linux.html. If you want to use XAMPP in MAC operating system , download the .dmg file and follow these steps: Open the DMG-Image. Drag and drop the XAMPP folder into your Applications folder. XAMPP is now installed in the /Applications/XAMPP directory. To start XAMPP open XAMPP Control and start Apache and MySQL. After installation of XAMPP in a system, to test your installation, type the following URL in the browser: http://localhost/. You will see the XAMPP start page. Uploading installation packages and files to server Now, we need to copy or transfer Joomla! installation package files to server. Before copying the installation package, we must download Joomla_1.5.15-Stable-Full_ Package.zip from the webpage http://www.joomla.org/download.html, and then extract and unzip it. You can use WinZip or WinRAR to unzip these files. After unzipping the files, you have to copy files on your server root folder (for Apache, it is htdocs folder). If you are not using the XAMPP or local server environment, you need the File Transfer Protocol (FTP) software to transfer files to your server root folder, such as htdocs or wwwroot. The popular FTP software is FileZilla, which is absolutely free and available for different platforms, including Windows, Linux, and Mac OS. You can get it from the website http://filezilla-project.org/. Creating database and user Before installing and configuring Joomla! and Jobs! extension, we also need to create a database and a database user. You can easily add a new database and any user by using phpMyAdmin in XAMPP server environment. To add a database, by using phpMyAdmin, you must follow the following steps: Type the address http://localhost/phpmyadmin in the web browser. The front page of phpMyAdmin will be displayed. Type a name for the database you want to create. For example, my_db in the Create new Database field and then click on the Create button to create the database. To be connected with the database, we need a user account. You can add a user account by clicking on the Privileges tab of phpMyAdmin. You will see all users' information. Click on Add a new User link of Privileges window. After clicking on the link, a new window will appear. Provide the required information in the Login Information section of this window and then click on the Go button. We have now completed the preparation stage of installing Joomla!.