This article is intended to provide a general approach to installing ExpressionEngine on a Rackspace Cloud Server running Linux.

In our sample, we’re working with a server running Ubuntu. Other Linux operating systems should be pretty similar, and you can get OS-specific instructions at the Rackspace Cloud Knowledgebase (http://cloudservers.rackspacecloud.com/index.php/Main_Page).

The process of installing ExpressionEngine on the Rackspace Cloud involves several tasks, from installing the LAMP stack to setting file permissions in ExpressionEngine. These topics are covered more comprehensively on other blogs, so this article is really just a documented process that references those other blogs with a few comments of my own. That said, let’s get started.

Server Setup

1. Basic Setup

The first part of the process is to get your Linux server ready with your user accounts and firewall rules. Rackspace provides a procedure for each Linux OS. Find yours on the list, and complete the steps outlined therein. Here’s their list:

http://cloudservers.rackspacecloud.com/index.php/List_of_Articles#Linux

Since we are running Ubuntu, we performed the procedures here:

http://cloudservers.rackspacecloud.com/index.php/Ubuntu_-_Setup

To make a terminal connection to your server, you can use a client application or the console interface provided by Rackspace. To access the console, follow these steps:

Login to the Rackspace Cloud to access your account, and click on “Cloud Servers”.

Click on the server that you intend to use for hosting the EE site.

On the resulting page, click “Console”. This will open a browser window wherein you can perform the terminal commands noted in the Rackspace set up documentation and those noted below.

2. Install the LAMP Stack

Next, we’re going to install Apache, PHP and MySQL with one command, as documented here:

http://tuxtweaks.com/2010/04/installing-lamp-on-ubuntu-10-04-lucid-lynx/.

sudo apt-get install lamp-server^

Be sure to include the caret (^). The command will not work without it.

Restart Apache

sudo /etc/init.d/apache2 restart

Refer to the blog article linked above if you need more detailed information.

3. Install phpMyAdmin

sudo apt-get install libapache2-mod-auth-mysql phpmyadmin

Test it all out by opening phpMyAdmin at http://YOUR-IP/phpmyadmin/

4. Enable FTP Connections

Here is the command, but refer to this post for more detailed information:

http://cloudservers.rackspacecloud.com/index.php/Introduction_to_iptables#Allowing_connections_to_FTP

sudo iptables -I INPUT 1 -p tcp --dport 21 -j ACCEPT

5. Install FTP Server

I used vsftpd (https://help.ubuntu.com/10.10/serverguide/C/ftp-server.html), but you can use whatever you prefer. Be sure to follow FTP software documentation to ensure proper security!

sudo apt-get install vsftpd

6. Set the permissions on the web directory

The user created in step 1 (Rackspace Server Setup) should have their home directory set to /var/www. Use this command:

sudo usermod -d /var/www yourusername

Now set this user as the owner:

sudo chown yourusername /var/www
sudo chgrp yourusername /var/www

7. Secure Web Server

I can’t give specifics on this, as each environment is unique, as are the security needs for your website. However, you should look into disabling directory listing and the like. This is a pretty good post about that:

10 things you should do to secure Apache

8. Enable mod_rewrite

In some instances, you may need to enable mod_rewrite. This is necessary if you want friendly URLs, as documented here: Remove index.php From URLs

To enable mod_rewrite, use this command:

sudo a2enmod rewrite

Install ExpressionEngine

We’ll be following the ExpressionEngine installation instructions found here, http://expressionengine.com/user_guide/installation/installation.html. But note that our step 4, “Set Base Permissions” is needed after uploading the ExpressionEngine files.

1. Create the MySQL database

Login to phpMyAdmin at http://YOUR-IP/phpmyadmin/ to create the database that you intend to use for ExpressionEngine. You will need to create a database user (it’s not good security to use the root account). Note the database name, user and password. You’ll need it during the ExpressionEngine installation.

2. Download ExpressionEngine

Download your copy of ExpressionEngine, and rename the “system” folder as noted in Step 2 here:

http://expressionengine.com/user_guide/installation/installation.html

3. Upload ExpressionEngine Files

Upload the ExpressionEngine files to your web server via FTP.

4. Set Base Permissions

Ensure that the files that you uploaded to your website root have 755 for permissions, including sud-directories.

sudo chmod 755 /var/www/*

5. Set the ExpressionEngine File Permissions

As documented in “Step 4, Set File Permissions” of the ExpressionEngine Installation process, set the permissions for specific directories. You can do this through FTP or sudo chmod.

6. Run the Installation Wizard

We’re now ready to run the installation wizard, as documented here:

http://expressionengine.com/user_guide/installation/installation_wizard.html.

That’s It

You should now have ExpressionEngine running on your Rackspace Cloud site!

Need some help with your project? Learn more about Pedrera’s ExpressionEngine Developer services.

The post Installing ExpressionEngine on a Rackspace Cloud Server appeared first on Pedrera Philadelphia Web Design & Development Blog.

The problem boiled down to the fact that, as prescribed in the tutorial noted above, ExpressionEngine was installed in a directory (i.e. – yourdomain.com/ee). However, to maintain the CMS integration with the Magento theme, ExpressionEngine’s setting for “General Configuration > URL to the root directory of your site” needs to be set to “yourdomain.com”. No “ee” directory.

The result is that Freeform’s form target is something like this:

<form id="freeform" action="http://www.yourdomain.com/" method="post">

As you can see, the form is posting to the Magento site at the root — NOT the EE root. Obviously, this will never work, but we can’t change the “URL to the root directory of your site” without undoing all the CMS integration.

Solution: Update the ExpressionEngine Form Target with jQuery

The solution is rather simple. And as is often the case, it is jQuery to the rescue. By adding the following to your Magento site’s head, you will change the target of the forms to yourdomain.com/ee.

<script type="text/javascript">
$(document).ready(function () {
	$("#freeform").submit(function () {
		$(this).attr("action", "http://www.yourdomain.com/ee/")
	});
});
</script>

Naturally, this assumes that you have jQuery going. You might also need to set “jQuery.noConflict();”. But all in all, pretty simple stuff.

Pedrera Philadelphia’s ExpressionEngine Developer Services

The post Enabling Expression Engine Forms within Magento appeared first on Pedrera Philadelphia Web Design & Development Blog.

Download Source (zip file)

Lets say for example you need to assign an onclick handler to an <asp:Button> that exists within an <asp:UpdatePanel>. If you place the handler within the $(document).ready() function at the head of the page, the event will work up until the <asp:UpdatePanel> triggers a postback. Once that postback occurs, because the entire page does not re-render, the event handler is lost.

To fix this scenario, you can use the Sys.Application.add_load() method provided by the Microsoft Ajax library. This method acts as the $(document).ready() function within an <asp:UpdatePanel> The Sys.Application.add_load() method will get triggered each time the <asp:UpdatePanel> postbacks and will bind all the javascript events in the same manor as $(document).ready().

Tip

If all of your code and controls are placed within an <asp:UpdatePanel> than there is no reason to initialize the page load using $(document).ready(). The Sys.Application.add_load() method will initialize everything and reassign the script when the UpdatePanel posts back.

The post In an asp:UpdatePanel Sys.Application.add_load() = $(document).ready() appeared first on Pedrera Philadelphia Web Design & Development Blog.

A better approach is to use the JQuery Treeview plugin created by Jörn Zaefferer combined with the <asp:Repeater> control. This will give you the same functionality of the <asp:TreeView> control with much more styling control and just better overall HTML code.

Download Source (zip file)

To begin with download the latest JQuery library and the JQuery Treeview plugin and add those scripts to your .aspx page. There are a couple of other pieces pictured here that we will get to in a second.

Next add a <asp:Repeater> for each level of navigation, in this example there are 3 levels of navigation. To make things a little more clear I am adding the <ul> tag to HeaderTemplate and the </ul> tag to FooterTemplate. Also at the first child level I have added the OnItemDataBound handler. This will allow us to hide the subsequent <asp:Repeater> if it does not contain any items.

Then Add the javascript that will render the TreeView. In this case I want the initial state to be collapsed but when a node is selected I also want the TreeView to remember its last position and expand accordingly. I also assigned some optional animation to give the Tree a sliding effect when the nodes are expanded.

Finally, modify the stylesheet that comes with the JQuery Treeview plugin. This demo is using arrows to symbolize the expanding and collapsing of a node. It already comes with a few nice styling options that will get you started.

Tip

You can also see that I wrapped everything into a <div> and set the display=none. This will avoid the ugly flashing of the elements when the page posts back to the server. When the page has finished loading the display attribute is removed and the tree is visible.

The post Using the JQuery Treeview in ASP.NET appeared first on Pedrera Philadelphia Web Design & Development Blog.

A cool way to implement a reordering feature is to use the Table Drag and Drop JQuery plugin created by Isocra Consulting. The plugin requires that the data be displayed in a table format. To achieve this I am using the <asp:ListView> control which is bound to an XML document that will act as the database and save the changes.

Download Source (zip file)

To begin with download the latest JQuery library and the JQuery Table Drag and Drop plugin and add those scripts to your .aspx page.

Next, add a <asp:ListView> control which will generate a clean HTML table. There are other ASP.NET server controls that render tables such as the <asp:GridView> control, but the <asp:ListView> is very flexible and more importantly does not add unnecessary HTML tags to the output. In this example I am binding the <asp:ListView> to an <XmlDataSource>, which can easily be replaced with a Database connection.

Then, add the javascript that will handle the reordering. This requires only a few lines of code because most of the magic takes place within the plugin. In order to save the reordering action performed by the user, I am using a PageMethod that will call a Webservice. The goal of the PageMethods.Reorder Webservice is to rewrite the rank attribute in the Customers.xml file according to the user selections.

The last step is to implement the Webservice that is responsible for saving the reordering actions. Again, I have done this with an XML Document but this can all be done with a database as well. I used XLinq to query and update the rank attribute of Customers.xml file. The Webservice has two parameters that are supplied by the onDropItem javascript handler, which give me the old rank order (before the item was reordered) and new rank order (where the item was reordered to). If the old rank order is greater than the new rank order than the user moved the item up the table, otherwise it was moved down the table.

Tip

Another great JQuery plugin is the HightLightFade plugin. I am using this as a way to give the user feedback when the drop occurs. Again this is very simple yet powerful and only requires one line of javascript to implement!

The post ASP.NET ListView Drag and Drop reordering using JQuery appeared first on Pedrera Philadelphia Web Design & Development Blog.