Rss feed

You are currently browsing the archives for the Development category.

Archive for the ‘Development’ Category


Read and write to SharePoint lists using PHP

Its been a while since I last blogged so I thought I may as well post an update. The main thing I plan to present is my, hopefully useful, PHP SharePoint API Class.

The aim of the class is essentially to make interacting with the SharePoint Lists API a whole lot more straight forward and allow PHP developers to talk with the Lists API without having to get there hands dirty with SOAP.

As with most stuff I create, its free under MIT licence and is being maintained on my Github account. At current the tool is fairly basic, although if I end up working on a SharePoint based project again I may take the opportunity to expand it further. If anyone spots any bugs or wants to add some features feel free to send em my way or just fork the github repo. Currently the SharePointAPI code is only capable of interacting with an existing SharePoint list and does not support creating new ones programmatically at this time.

You can grab the full source from: https://github.com/thybag/PHP-SharePoint-Lists-API

Setting up the PHP SharePointAPI Object

Using the SharePointAPI to read a SharePoint list is pretty straight forward. The first step is to create a new instance of the SharePointAPI object which requires a username and password (which it will authenticate with in order to interact with the lists) as well as the path to a local copy of the SharePoint Lists WSDL file.

You can normally grab the WSDL from: sharepoint.url/subsite/_vti_bin/Lists.asmx?WSDL

$sp = new SharePointAPI('<username>','<password>','<path_to_WSDL>');

Reading from a Sharepoint List

Once the SharePointAPI Object has been created, you can read from a list simply by calling:

$sp->read('<list_name>');

More advanced filtering is also possible, for example if you wanted to filter on surname = Smith and only return 5 results you would call:

$sp->read('<list_name>', 5, array('surname'=>'Smith'));

You can filter on multiple parameters simply by adding extra values to the filter array. (currently only AND ing is possible)

All results are returned as associative arrays, calling print_r on the results of a $sp->read(‘<list>’); is probably the best way to understand exactly what data is being returned.

Writing to a SharePoint List

Writing to a SharePoint list (or inserting a new list item) is equally straight forward. The data to be inserted is simply provided as an associative array to the function. For example to add someone called bob to a list you may use:

$sp->write('<list_name>', array('forename'=>'Bob','surname'=>'Brown','pet' =>'cat'));

Editing a SharePoint List Item

To edit an existing SharePoint item the syntax is fairly similar to the above examples. The primary difference being that the ID of the record you wish to edit is also required. Assuming the ID for Bob’s record was 20, you could change his pet to dog with the following code:

$sp->update('<list_name>','20', array('pet'=>'dog'));

Deleting a SharePoint List Item

Deleting a SharePoint list item also requires the ID of the record you wish to remove.

$sp->delete('<list_name>','<ID>');

 

Thanks for reading 🙂

P.S.  I’m now only one week away from starting my new job on the Kent Web Development team. Woo 😀

JavaScript URL Parser

For science reasons I decided to write a simple JavaScript URL Parser this morning. The basic idea behind the function is to make it easier to extract the bits of a URL your interested in, be it the Port,  Host,  Protocol or even the value of a parameter in the query string.

/**
 * URL Parse
 * A quick URL parsing function for JavaScript
 * @version 0.4
 * @author Carl Saggs
 */
function urlParse(url){
	var self = {};
	//Store full url
	self.url = url;
	//array to store params
	self.QueryParams = new Array();
	//Use DOM to get URL basics
	self.a = document.createElement('a');
	self.a.href = url;
	//Parse Query String
	q_seg = self.a.search.substring(1).split('&');
	for(i=0; i<q_seg.length;i++){
		s = q_seg[i].split('=');
		self.QueryParams[s[0]] = s[1];
	}
	//Extract the Port
	self.port = url.split('/')[2].split(':')[1];

	//Return Protocol in use
	self.getProtocol = function(){
		return self.a.protocol;
	}
	//Return Host
	self.getHost = function(){
		return self.a.host.split(':')[0];//Remove the port from the end
	}
	//Return Port
	self.getPort = function(){
		//Assume default port if none is set
		return  (self.port == null)
				? ((self.getProtocol=='https:')?443:80) 
				: self.port; 
	}
	//Return Path
	self.getPath = function(){
		return self.a.pathname;
	}
	//Get full Query String
	self.getQueryString = function(){
		return self.a.search;
	}
	//Get Query String as Array
	self.getQueryArray = function(){
		return self.QueryParams;
	}
	//Get value of parameter in query string
	self.getQueryParam = function(x){
		return self.QueryParams[x];
	}
	//Return original URL
	self.getURL = function(){
		return self.url;
	}
	//Get Fragment
	self.getFragment = function(){
		return self.a.hash.substring(1);//Remove # from start
	}

	//Return self
	return self;
}

The function is designed to be pretty straight forward to use, calling the function will return the object containing all of the URLs attributes which can then be accessed by the provided get Methods. An additional advantage to having the function return an object is that you can chain the functions when it seems appropriate (as in the final example below).

//Usage Demo
var test = urlParse("http://www.sub.domain.com:1337/test/sample.php?queryArg1=Hello&queryArg2=Goodby");
alert(test.getQueryParam('queryArg2')); // "goodbye"
alert(test.getPort()); // "1337"
alert(test.getHost()); // "www.sub.domain.com"
alert(test.getPath()); // "/test/sample.php"
//Alterntive usage
alert(urlParse("http://test.com:17/?a=Cake&b=Cheese").getQueryParam('a')); // "Cake"

Anyways, hopefully someone will find it helpful 🙂

Feel free to request additional features / notify me of any bugs in the comments. You can now also find it on my GitHub.

[Edit: 2011/10/07] The source code has been updated to fix the scoping bug mentioned by Rikky.

Introducing JSnip

JSnip Sample

JSnip Sample Page

GITHub and GIT seems to be all the rage these days so I decided it was about time I got myself an account and figured out what all the fuss was about. My problem with this plan was that I had nothing worthwhile to use it with. To solve this issue I finally got around to creating something that I’ve been contemplating making for a while now. I like to call it JSnip.

JSnip is a lightweight JavaScript based Snipping package, aimed at those who want to add interactive elements to their webpages but lack the necessary JavaScript knowledge to do so.

If you know basic HTML then useing JSnip should be a snap. Just upload the JSnip.js and JSnip.css files to your server, import them in the head of your HTML document; probably using something along the lines of:

<link rel='stylesheet' href='jsnip.css' type='text/css' />
<script type="text/javascript" src='jsnip.js'></script>

and JSnip is ready to go.

Adding Snippets to your page is as simple as adding a class name to an element. In fact that’s actually all you need to do. If you want a showHide box for instance, just type out something like:

<div class='jsnipShowHide' title='Title for your ShowHide' >
Show Hide Content
</div>

and you’ll get:

Show Hide Content

Now, if you wanted the ShowHide to be open by default, all you would need to do is add an data-mode of “open” to the tag. Thus:

<div class='jsnipShowHide' title='Title for your ShowHide' data-mode='open' >
Show Hide Content
</div>

will produce:

Show Hide Content

Adding Tabs is no more difficult, a basic set of Tabs for example need consist of no more code than:

<div class='jsnipTabs'>
	<div>
		<h2>Tab 1</h2>
		Tab 1 Content! Add tab one content here.
	</div>
	<div>
		<h2>Tab 2</h2>
		Tab 2 Content! Add tab two content here.
	</div>
	<div>
		<h2>Tab 3</h2>
		Tab 3 Content! Add tab 3 content here.
	</div>
</div>

to create a Tabs box such as the one below.

Tab 1

Tab 1 Content! Add tab one content here.

Tab 2

Tab 2 Content! Add tab two content here.

Tab 3

Tab 3 Content! Add tab 3 content here.

The image switcher snippet as seen in one of my past tutorials has also made it into JSnip. Thus a list of images can be transformed

<div class="jsnipImageSwitcher" style="width: 400px;">
    <img src="/demo/img/skunk.jpg" alt="A baby skunk!" />
    <img src="/demo/img/otter.jpg" alt="An otter" />
    <img src="/demo/img/bunny.jpg" alt="A Bunny Rabbit" />
</div>

into this, with only the above code.

A baby skunk!An otterA Bunny Rabbit

Check out the Sample page to see how these snippets can be used together on a page.

The provided snippets are all nestable so they can be placed inside one another as much as you please, along with any other HTML you wish to add. A nice example of this is if you wanted to make the images in an ImageSwitcher link to a number of other webpages. All you would need to do is wrap the relevant image in a standard A tag pointed at where you want it to go.

The CSS behind the snippets can easily swapped out or modified to fit in with your own layout (as the snippets have been for this blog for instance), making the snippets simple to customise.

For anyone interested in the code, you can view it on my GitHub repo. I shall be creating another blog article soon, aimed at developers, explaining how it all works behind the scenes.

I’d be more then happy to answer any questions you may have in the comments section below.

Thanks for reading,
Carl

Create a mobile version of your site with just CSS!

A few week’s or so back Luke was showing off his new Responsive CV at work, which had the rather cool feature of instantly resizing itself to fit pretty much any screen size – even mobile. The magic behind all this, rather than any nifty bit of JavaScript, tuned out to be CSS Media Queries, a CSS feature I’d never really paid much attention to beforehand.

The basic idea behind CSS Media Queries is to give web developers the power to tell the browser to apply extra CSS when certain conditions are met. The most useful condition in regards to creating a mobile version of your site website the being browser width’s. As a rough example of how they work, imagine for example you have a website with a default width of 1000px and a user then resizes their browser window to 950px wide.

Using the following code snippet, once the users browser window has been resized to below 1000px the enclosed CSS will be instantly applied to the page, changing the containers width to 900.

@media only screen and (max-width: 1000px) {
	#container {width:900px !important; }
}

The real advantage’s of Media Queries over a standard fluid layout start to show up when you get to the significantly different screen resolutions, for example the 320px width of a mobile phone browser. Since Media Queries allow you to selectively apply whole chunks of additional CSS, you can use it to totally rearrange elements on the page in order to ensure your site remains functional at any resolution. Have a go at resizing this site for instance, the first big change to happen is the removal of the sidebar (at 720px), which coincides with the search bar being moved up to the top. The next big one happens when the site is transformed fully in to the mobile site (at 450px) which has quite substantially different styling to the normal view.

If you want to apply your mobile site CSS to any screen resolution below 350px, your code my look something like this.

@media only screen and (max-width: 350px) {
	#container {width:320px !important; }
	/* Mobile Site CSS here */
}

Or, if you want to resize headings on any resolution between 600px and 800px, your code may be as follows:

@media only screen and (min-width: 600px) and (max-width: 800px) {
	h1 {font-size:0.0em;}
	/* More styles */
}

As you can see, using this technique it becomes relatively straight forward (assuming you already have a good grasp of CSS) to create a mobile version of your site by just altering and adjusting a few of its styles.

One thing you may notice though, is that even if your Mobile Site styles work fine when you resize your browser window to the correct size, your actual mobile phone’s browser still shows the desktop version.

In order to get your mobile CSS styles to be applied correctly, its important to tell the mobile browser that you want everything rendered at its real size (as opposed to the zoomed out view they normally try to adopt when encountering desktop sites).

To do this, you’ll need to ad a veiwport meta tag to your websites header;

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Once that’s done your mobile CSS should start showing up on your phone just as you would expect it to.

Having only recently added CSS Media Queries to this site, I’m still incredibly impressed with them. CSS Media Queries turn the rather substantial job of creating an alternate mobile friendly version of your site in to about half an hour’s CSS. Awesome, no?

JavaScript eyes that follow the cursor.

I remember one of the first tutorials I wrote back on my old thybag website was on how to get eyes that follow the cursor using Flash. I’d initially worked out how to do it in order to animate the alien in my banner a little and although the effect can be a little disconcerting at times, I kinda liked it.

For that reason I decided to set myself the challenge of getting the functionality back, only this time using JavaScript instead of flash. Rather than waste space with extra images I also decided I may as well draw the eyes with canvas while I was at it.

The aim of this little tutorial will be to show you how to create something like this.
(Though you will more likely want to use your own image.)

If your not really intested in how its done and just want the script, feel free to grab it from here. You can create eye’s by calling

//Variables are just used to make it obvious what each parameter is, 
//you can call the functions with the param's directly if you prefer.
var positionFromLeft = 200;
var positionFromTop = 50;
var eyeSize = 30;
var appendEyetoDivNamed = 'mydiv';
new alienEye(positionFromLeft,positionFromTop,eyeSize,appendEyetoDivNamed);

If your interested to see how the eyes following the cursor script works, keep reading after the jump.

(more…)