Tag Archives: html

HTML5 geolocation – What If the User Doesn’t Share His Position?

HTML5 Geolocation

So far we were used to expect something like this from our mobile phones with built-in GPS support. Every image or video clip then was automatically “tagged” with latitude & longitude geo data. With HTML5 coming features we discover new cool things we can do with our browsers. Such cool thing is the geolocation.

Geo Location

Support

As you may guess not every browser is supporting these HTML5 features, but out in the web there is quite good collection of tables comparing different browsers and their support level.

Firefox

This – as expected is a browser that supports this geo tagging. First of all you’ve to allow your browser to use your geo coordinates, as this can be private information.

Browser GEO Location

Once you do it you can access the geo coordinates, which by the way are quite accurate, with JavaScript.

What if you don’t share your position?

What happens if you don’t want to share your position? Actually I ran in this situation and as my application waited the coordinates – it was completely blocked.

The examples doesn’t show you something special. They simply describe how to get the coordinates, but doesn’t tell you what if the user doesn’t click on the “share” button.

if (!!navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getPos);
}
...
 
function getPos(position) 
{
    position.coords.latitude;
    position.coords.longitude;
}

Of course getPos() can be simply an anonymous function:

if (!!navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            position.coords.latitude;
            position.coords.longitude;
        });
}

Only the Firefox documentation tells you how to handle errors, simply add one more parameter – callback, for getCurrentPosition() method:

if (!!navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getPos, onError);
}
...
 
function getPos(position) 
{
    position.coords.latitude;
    position.coords.longitude;
}
 
function onError()
{
   // handle error
}

Now you know where you don’t want to be.

Map Marker

Bind Zend Action with Non-Default View – Part 2

Typical Setup

Typically Zend Framework is setup to bind every controller’s action to a specific view. The names of the action and the view script must be the same, or at least must be similar – following the ZF’s convention.

Thus if you name an action, let’s say, indexAction(), you’ve to create an index.phtml file into the views/scripts/index/ folder. Let me remind you that this is what is called a typical setup, but this may vary from one installation to another.

Thus everything’s fine and the MVC does its best. After the user requests a specific uri, the framework parses it and finds the controller, than the action and than the view script – and there is a view script for every single action.

typical zend framework setup

When there are two or more actions – there are two or more .phtml (view scripts) files.

typical zend framework setup for two or more actions

Some Exceptions

Sometimes you have very similar logic, but very different markup between two actions. As the logic goes to the controller/action and the markup into the view, the question is can you simply have one action in the controller, but with two different .phtml file as a view scripts? Of course switching between those two (or more) with some conditionals.

Solution No. 1

However once I posted a simple, and working, solution. There you have again two actions and two scripts:

<?php
 
class IndexController extends Zend_Controller_Action
{	
	public function firstAction()
	{
		// place all the logic you need here
		// and every view placeholder assignment
		$this->view->title = "My Title";
 
		// if the logic requires a different markup
		// simply redirect to another view
		if (some_expression) {
			$this->_forward('second');	
		}	
	}
 
	public function secondAction()
	{}
}
 
// in the application/views/scripts/index
// 1. first.phtml
<h1><?php echo $this->title ?></h1>
 
// 2. second.phtml
<h2><?php echo $this->title ?></h2>

As you can see in the second action there’s no logic – it’s only serving the role of a bridge between the views. Everything is setup into the first action, but the second action is doing the relation with the second.phtml view script.

Solution No. 2

However there’s another solution with only one action and two scripts which makes something like that shown on the diagram bellow:

zend framework one action multiple=

The only thing to do is to add some code to your action:

<?php
 
class IndexController extends Zend_Controller_Action
{	
	public function firstAction()
	{
		// place all the logic you need here
		// and every view placeholder assignment
		$this->view->title = "My Title";
 
		// if the logic requires a different markup
		// simply redirect to another view
		if (some_expression) {
			echo $this->view->render('index/second.phtml');
			$this->_helper->viewRenderer->setNoRender(true);
		}	
	}
}
 
// in the application/views/scripts/index
// 1. first.phtml
<h1><?php echo $this->title ?></h1>
 
// 2. second.phtml
<h2><?php echo $this->title ?></h2>

Note that you’ve to setNoRender on the view renderer once you render the other script!

jQuery: Get the Selected Option Text

What’s the Task?

First of all let me explain what is the task. If there’s a select menu with several options, each of which are with a given value attribute, the task is to get the text into the option tag, and not that of the value attribute.

In that scenario let’s assume that we have the following HTML:

<select id="my-select">
    <option value="1">value 1</option>
    <option value="2">value 2</option>
</select>

select menu
Note that in the official jQuery doc page, the selector is described in the same context, but with a different markup:

<select id="my-select">
    <option>value 1</option>
    <option>value 2</option>
</select>

than the jQuery snippet looks like that:

$(document).ready(function() {
    $("#my-select").change(function() {
        alert($(this).val());
    });
});

Here’s interesting to note that there’s no value attribute set to the options, thus the selection of an element is correct and the returned value is correct. The problem is that this code doesn’t work correctly once you’ve a different value attribute, from the value enclosed into the option tag. In our case we’ve the markup shown on the first code snippet and we’d like to get the “value 2” string instead of “2”.

Source Code

<select id="my-select">
    <option value="1">value 1</option>
    <option value="2">value 2</option>
</select>
$(document).ready(function() {
    $("#my-select").change(function() {
        alert($(this).val());
    });
});

Solution

Finally the solution, is pretty simple and clear, but this time is not to so “native” and it’s definitely something you couldn’t expect! The only thing you’ve to do is to change the selector!

$(document).ready(function() {
    $("#my-select).change(function() {
        alert($('#my-select option:selected').html());
    });
});

Joomla! – Old Code or Bad Code?

Recently I started managing a small system based on Joomla 1.0.15. I know there is a most recent version of the popular CMS, but this one wasn’t based on it. Actually once upon a time I was working with Joomla as basic CMS for my web projects, but now after two+ years with Zend Framework and MVC I was amazed to see how bad the Joomla 1.0.15 was written.

Indeed it is really strange to see all SQL, HTML and PHP all in one file?! This is like end of ’90s! That’s for sure a bad approach.

I’ll download the 1.5 version with the hope the code there will be better!

One Form – Multiple DB Records

I’ve the impression that even it’s a simple technique it remains quite misunderstood!

What’s the Goal?

You’ve a simple HTML form with several groups of form elements. Imagine the situation with title and link groups. You can have 1, 2 or more title/link pairs which you’d like to save in a database table, where perhaps there are only three columns – id, title, link.

What is the Shortest Path to the Solution?

In fact the task can be done by many ways, but there’s one really elegant solution. As it appears in many occasions PHP and HTML are born to work together!

1. First Step

Create your web form by simply modifying a bit the element names. Usually when you have an input you simply name it after the database column or something similar.

<form method="POST">
	<input type="text" name="db_column_name" />
</form>

In reality PHP and HTML allows the name to be an array element, just like so:

<form method="POST">
	<input type="text" name="link[0][title]" />
	<input type="text" name="link[0][url]" />
 
	<input type="text" name="link[1][title]" />
	<input type="text" name="link[1][url]" />
</form>

2. Second Step

Than all this comes in the _POST array in PHP, but formatted in an array manner, so you can simply foreach it!

<?php
 
foreach ($_POST['link'] as $link) {
	insert_into_db($link['title'], $link['url']);
}
 
?>

That is simply enough!