Server Side Guy

I had to migrate a Magento store last week and since I haven’t had much experience with that framework, I was at a loss with where the database configuration file was located. No matter how hard I looked there wasn’t an apparent config file named config.php or any of the sort.

I did eventually find it in a very non-conspicuous place. The configurations are listed in /app/etc/local.xml. Not exactly a descriptive name for what I was looking for. You will then want to look for this block of code in that file:

 <resources>
            <db>
                <table_prefix><![CDATA[]]></table_prefix>
            </db>
            <default_setup>
                <connection>
                    <host><![CDATA[localhost]]></host>
                    <username><![CDATA[your_db_username]]></username>
                    <password><![CDATA[your_db_password]]></password>
                    <dbname><![CDATA[your_db_name]]></dbname>
                    <active>1</active>
                </connection>
            </default_setup>
        </resources>

I need this data only to create the database on the new server. I am not sure if changing this file will actually change the configuration of the application.

I’ve been working with Google’s Tasks API and was looking to have a way a user would only need to authenticate their account once. Google does not explain very well on how to achieve this.

With php you will need to get the api setup HERE. You then need to then setup up an authentication stream:

require_once 'src/apiClient.php';
require_once 'src/contrib/apiTasksService.php';
 
$client = new apiClient();
$tasksService = new apiTasksService($client);

On the callback of the user allowing your app to access their tasks, you will get an access token and more importantly here a refresh token.

$auth = $client->authenticate();
$token = $client->getAccessToken();
$refresh_token = $token['refresh_token'];

Save the refresh token to somewhere you are able to access it again whenever you’d like. After that we can use that token to get the users tasks at any moment.

$client->refresh_token($refresh_token);

In a project I’ve been working on I needed to get a bunch of different stores of data and then have a separate store that would contain all of them combined. This was to save on ajax calls. I couldn’t find anything as far as native methods that would merge stores but I did come up with a solution.

var emptyArr = [];
 
var aggregatedStore = new Ext.data.ArrayStore({
		data: emptyArr,	
		fields: [{name: 'field1'},{name: 'field2'}]
	});
var singularStore = new Ext.data.JsonStore({
		autoload:true,
		proxy: {
			type: 'ajax',
			url: '/getDataPlease',
			reader: {
				type: 'json',
				root: 'fieldRoot'
			}
		},
		fields: [{name: 'field1'},{name: 'field2'}]
 
	});

So what I want to do here is push the contents of singularStore into aggregatedStore. What I ended up doing is adding a listener on singularStore load to accomplish this:

var emptyArr = [];
 
var aggregatedStore = new Ext.data.ArrayStore({
		data: emptyArr,	
		fields: [{name: 'field1'},{name: 'field2'}]
	});
var singularStore = new Ext.data.JsonStore({
		autoload:true,
		proxy: {
			type: 'ajax',
			url: '/getDataPlease',
			reader: {
				type: 'json',
				root: 'fieldRoot'
			}
		},
		fields: [{name: 'field1'},{name: 'field2'}],
                listeners: {
			'load': function(store, records, successful) {
				aggregatedStore.loadData(records,true);
			}
		}
 
	});

Now I can use singularStore to get just the data from that url. I can then add that load listener to any other store and use aggregatedStore to show the combined data.

CSS has continued to simplify common design operations and CSS3 doesn’t show any signs of that trend changing. Gradients, which have been around for awhile now have commonly replaced the old way of creating custom images for a couple quick css lines of code.

.orange-gradient
{
background: #f78d1d; /* initial background for default */
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); /*Webkit Chrome/Safari etc.. */
background: -moz-linear-gradient(top,  #faa51a,  #f47a20); /*mozilla*/
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); /* IE */
}

This would make a great orange gradient for a background. Another great trick is to reverse the gradient on hover

.orange-gradient:hover
{
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

Add this class to a button or link, add some padding and you have a quick and great-looking button.

jQuery can really add some great touches to a website and one that is easy to do is a slide-down form.

<div id ="login_container"> 
<a href="#" onClick="openForm()">Login</a>
<div id="login_form">
<form action="" method="post" name="form1">
Username: <input type="text" name="username" /><br />
Password: <input type="password" name="pword" /><br />
<input type="submit"  /><br />
</form>
</div>

Obviously we want to initially hide the form and display it on the “Login” link:

#login_container
{
    position:absolute;
    top:100px;
    left:300px;
}
#login_form
{
    display:none;
    background:#FFFFFF;
}

There is a very important part lying in that CSS and that is the container needs to be absolutely positioned. Otherwise it will push all other block elements down when the form flies open.

Finally, we need the jQuery to make it all happen

function openForm()
{
	 if ($("#login_form").is(":hidden")){
              $("#login_form").slideDown("slow");
	}
	else{
		$("#login_form").slideUp("slow");
	}
}

Now you have a great UI component that gives a user access to the login form at anytime but doesn’t clog up the design.

If you have a relatively new installation of wordpress you will notice there are a bunch of meta tags in the source that are not that common to see. “Which ones do I need?” I thought. Well since I was using a wordpress page to run code that would generate dynamic content for multiple urls I knew I needed to get rid of the ones showing the actual page URL.

EditURI and Windows Live Writer

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://yoursite.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://yoursite.com/wp-includes/wlwmanifest.xml" />

EditURI will help client software discover your site. “wlwmanifest” sets up support for Windows Live Writer tagging. This maybe valuable to some of us and it didn’t really hurt my case so I left it. If you’d like to remove them, add these lines of code to your functions.php file in your theme:

remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'rsd_link');

index, prev, next

<link rel='index' title='indextitle' href='http://yoursite.com/' />
<link rel='prev' title='prev_page_title' href='http://yoursite.com/prev/' />
<link rel='next' title='next_page_title' href='http://yoursite.com/next/' />

These are here to help explain to search engines how your page hierarchy is displayed. If you are running a straight up blog like ServerSideGuy.com, then this will probably work. But it seems like it trips up on pages. You should have a good sitemap.xml file with good prioritization so I really didn’t see the value here. I left the index as that will always be the same.

remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );

Note: Older wordpress versions use ‘adjacent_posts_rel_link’ as the action

Generator
This one I would recommend every wordpress user in removing. It’s there to tell search engines that this is a wordpress site. But this is only used in data gathering so WordPress can say they have X percent marketshare. Since it plainly displays the version of wordpress, I say it needs to go. You never know when the next exploit will be found and if its in the version you are using do you really want hackers to see that?

<meta name="generator" content="WordPress 3.2.1" />

Remove this with:

remove_action( 'wp_head', 'wp_generator');

I ran into a problem setting up a php framework on a Mac Mini. Once I thought I had everything configured I found this error:

“Warning:mysql_connect(): [2002] No such file or directory”

I went and rechecked everything but without any results plus the error is not very descriptive of the problem.

After some search engine tech support, I realized this error is related to the mysql socket. It seems the OS can put the needed socket in different directories. In my case, it was in /tmp/mysql.sock while php was looking at /var/mysql/mysql.sock. I copied it to the path php was looking for and the error disappeared. This may happen the other way around where you’d need to copy the file to /tmp/mysql.sock but I am not sure what criteria gives what result.

I’ve been trying to find a nice modal/lightbox for jquery and I was recommended FancyBox. But what I needed it for was not wholly described in their examples. I needed to get some json from an ajax call, parse the data into some HTML and set that HTML to a div that would pop up in FancyBox.

function getData(id)
{
	$.post('/test', "id="+id, function(data){ $('#popup').html(generatePopup(data));});
}

That will get my json and the generatePopup function would create some content and set it to the #popup div.

I made sure to put the #popup div inside another hidden div. This ensures the popup html will not be displayed on the page. Now to add FancyBox, which ended up less straight-forward as I would have imagined it to be. It seems like FancyBox can only be tied to an anchor tag. So we have to add another layer on top of this.

The HTML:

<a id="inline" href="#popup"></a>

And the Javascript:

$(document).ready(function() {
	$("a#inline").fancybox({
		'hideOnContentClick': true
	});
});
function getData(id)
{
	$.post('/test', "id="+id, function(data){ $('#popup').html(generatePopup(data)); $('a#inline').click();});
}

So the anchor tag will display #popup in FancyBox when clicked. We use jquery to automate that click in the ajax success function.

I wanted to add an item to a toolbar in one of my ExtJS panels but was having a little trouble. I could get them on the toolbar fine but I wanted them displayed on the right side of the panel. This was proven tricky, especially as I’m rather new to ExtJS

Then I found the “tbfill” xtype. This made it simpler than it ever could be:

var tb = new Ext.Toolbar({
        items: [{ xtype: 'tbfill' },
            {text: 'Compliment me', handler: function(){ alert('Nice...umm...hair?!'}}
        ]
    });

It’s quick tools like this that have really got me hooked on ExtJS.

We’ve been working on a plugin and we needed to get a wordpress page from a given permalink. This is actually done pretty easily since there is a function wordpress uses deep in their system.

$post_id = url_to_postid($permalink);

This will give you the post_id which you will able to use to retrieve the post object.

$post = get_post($post_id);

Now that we have the object its pretty simple to manipulate it.

$post->post_content = $new_page_content;
wp_update_post( $post );

So all together:

$post_id = url_to_postid($permalink);
$post = get_post($post_id);
$post->post_content = $new_page_content;
wp_update_post( $post );