Mick Redman

Tuesday, 8 February 2011

Submit Form with Loader

I achieve 2 objectives with the form below.

The first is that I use jQuery to capture the user hitting the enter key after adding the password. By using jQuery, this works in all browsers.

The second thing I deliver is a 'loading...' image when the form has been submitted. It stays there until we have a result from the target PHP script, authenticate.php. Your authenticate.php could look something like this
<?php
echo 'Who are you?';
?>

You could also pass parameters to the PHP and do it properly. See http://effectivewebdesigns.blogspot.com/2010/10/send-form-information-to-php-through.html

BTW, you'll also have to create your own loading.gif

See demo.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Submit Form with Loader</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('#pass').keyup(function(event)
{
if(event.keyCode == 13)
{
$("#sub").click();
}
});
$('#sub').click(function()
{
$('#formlogin').empty().html('<img src="loading.gif" />');
$.post('authenticate.php',
   {

   }, function(data)
   {
   $('#formlogin').empty().html(data);
   });
   return false;
});

});
</script>
</head>
<body>
<form id='formlogin'>
<input type='text' name='username' id='username' />
<input name='pass' id='pass' type='password' />
<input type='submit' value='login' name="sub" id="sub" />
</form>
</body>
</html>

Monday, 7 February 2011

Zend on XAMPP on localhost on Windows

I learned to use the MVC psuedo design pattern through codeigniter. MVC seems to be commonly used through the Zend Framework. I learned PHP through a Zend course and was keen to have the Zend MVC Framework on my XAMPP localhost server. So I followed the instructions from the Zend website, which weren't great.

First of all, before you begin the tutorial from the Zend website, you already have the Zend Framework on XAMPP. It's in the PEAR directory. So you just need to replace this with an up to date version.

The other thing you need to replace is zf.bat, which lies within the php directory.

Another thing you need to do before reading the Zend instructions is edit your hosts file. Here are a couple of lines from mine:

127.0.0.1 quickstart.local
127.0.0.1 localhost

Now. Here is the crucial one. If you follow the Zend instructions to the letter, you are left with a localhost which only works with the Zend Framework. You don't want this. What about all the times you are not using Zend?
So, you need to use 2 ports for your localhost. One for Zend and one for everything else. Then you can set
up your VirtualHost entries within httpd.conf like these:

Listen 80
Listen 8080

<VirtualHost *:8080>
   ServerName quickstart.local
   DocumentRoot C:\xampp\htdocs\quickstart\public
   SetEnv APPLICATION_ENV "development"
   <Directory C:\xampp\htdocs\quickstart\public>
   DirectoryIndex index.php
AllowOverride All
Order allow,deny
Allow from all
   </Directory>
</VirtualHost>

<VirtualHost *:80>
   ServerName localhost
   DocumentRoot C:\xampp\htdocs
   SetEnv APPLICATION_ENV "development"
   <Directory C:\xampp\htdocs>
   DirectoryIndex index.php
AllowOverride All
Order allow,deny
Allow from all
   </Directory>
</VirtualHost>

You can then go to your web browser and use :
http://quickstart.local:8080/ for Zend and
http://localhost/ for everything else.

Mobile Mick

This weekend I took delivery of a HTC Desire. My first smartphone.

Now I'm not going to waste your time by giving you a review which has already been done many times over.

No. This is just a note to say that there is likely to be more mobile in the mix of future posts as I discover techniques also suitable for websites picked up by our mobile friends.

Wednesday, 2 February 2011

Sharing data from the Facebook API

In the simple example below I am sending a request to Facebook through the Graph API. I supply my App ID. In return, Facebook provides me with a JSON object. I then process the JSON, using PHP to create a link to my Facebook application. Simple I know, and but that's the point.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Sharing data from the Facebook API</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
</style>
</head>
<body>
<?php
$url = 'https://graph.facebook.com/yourAppID';
$JSONobj = json_decode(file_get_contents($url));
echo '<hr />';
echo '<a href="';
echo $JSONobj->{'link'};
echo '">';
echo $JSONobj->{'name'};
echo ' Facebook page</a>';
?>
</body>
</html>

Forgive me, for I have sinned

No, of course I haven't suddenly got religion. I'm so for removed, I needed to use the spell checker for the word 'religion'. The real sin, is that I did not thoroughly check that some of the examples I have provided in previous blog posts did not work in IE.

I've fixed them now. Namely :
http://effectivewebdesigns.blogspot.com/2010/08/simple-layout-1.html
That's a bad start isn't it.
http://effectivewebdesigns.blogspot.com/2010/09/simple-layout-3.html
http://effectivewebdesigns.blogspot.com/2010/09/simple-layout-4.html
http://effectivewebdesigns.blogspot.com/2010/12/two-equal-row-layout-beginnings.html

One which I should have uploaded, but didn't :
http://effectivewebdesigns.blogspot.com/2011/02/simple-layout-15.html

Simple layout #15

Here is another layout which uses jquery corners.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout 15</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<script src="http://www.google.com/jsapi"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
margin:0 auto;
width:800px;
margin-top:100px;
}
header
{
float:left;
color:#FF9200;
}
h1, h2, p
{
font-weight:normal;
}
h1, h2
{
   font-family:Georgia, Times New Roman, Times, serif;
   text-transform:uppercase;
color:#000000;
}
h1
{
   font-size:5em;
}
h2
{
   font-size:4em;
}
p
{
   font-family: Arial, Helvetica, sans-serif;
   font-style: normal;
   font-variant: normal;
   letter-spacing:0.1em;
   text-align:justify;
}
p
{
   font-size: 1.25em;
   margin-top: 1.25em;
   margin-bottom: 1.25em;
}
header p
{
width:360px;
}
#tl
{
float:right;
width:400px;
height:400px;
background:#FF9200;
color:#FFFFFF;
}
#tl p
{
float:right;
width:280px;
padding-top:160px;
padding-right:20px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('#tl').corner('tl 400px');
});
</script>
</head>
<body>
<header>
  <h1>header 1</h1>
  <h2>header 2</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>
</header>
<div id="tl" class="">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>

</body>
</html>

A beginners guide to get your website working with Facebook

Below are 3 steps to :

Get Facebook functionality into your website.
Have a Facebook application presence for your website.

Step 1 :
Register your website to get an AppID here http://developers.facebook.com/setup/
Receieve your AppID and App secret.
You also get an example page with a login and like plugin, which you can extract and embed into your site.

Step 2 :
Seeing this in action gives you the confidence to move to the next stage. You can go to http://developers.facebook.com/docs/plugins. Here you will see other plugins which can be easily embeded into your site. Some of these plugins are designed to work in co-ordination with the Facebook Page you get with your application ID. This is available through http://www.facebook.com/apps/application.php?id=yourAppID

Step 3 :
You may also access the Social Graph API. Documentation of which resides here http://developers.facebook.com/docs/api. An example being that using https://graph.facebook.com/yourAppID will return JSON data about your application.
If for example, your website uses PHP, you may process this JSON data and represent it on your website.