Simple PHP pagination

 HTML, MySQL, PHP  No Responses »
Jun 012013
  
<?php
// Connect to database
include 'includes/db_connect.php';

// Find total number of rows in table
$result = mysql_query("SELECT COUNT(*) FROM example_table");
$row = mysql_fetch_array($result);
$total_rows = $row[0];

// Set rows per page
$rows_per_page = 8;

// Calculate total number of pages
$total_pages = ceil($total_rows / $rows_per_page);

// Get current page 
$current_page = (isset($_GET['p']) && $_GET['p'] > 0) ? (int) $_GET['p'] : 1;

// If current page is greater than last page, set it to last.
if ($current_page > $total_pages)
	$current_page = $total_pages;

// Set starting post
$offset = ($current_page - 1) * $rows_per_page;

// Get rows from database
$result = mysql_query("SELECT * FROM example_table LIMIT $offset, $rows_per_page");

// Print rows
echo '<hr>';
while($row = mysql_fetch_array($result))
{
	echo $row['id'].'<br />';
	echo $row['text'];
	echo '<hr>';
}
	

// Build navigation
// Range of pages on each side of current page in navigation
$range = 4;

// Create navigation link for previous and first page.
if ($current_page > 1) 
{
	$back = $current_page - 1;
	echo ' <a href="?p='.$back.'"> PREV</a> ';
	if ($current_page > ($range + 1))		
		echo ' <a href="?p=1">1</a>... ';
} 
else
	echo ' PREV ';

// Create page links, based on chosen range.
for ($i = $current_page - $range; $i < ($current_page + $range) + 1; $i++) 
{
   if ($i > 0 && $i <= $total_pages)  
      if ($i == $current_page) 
         echo ' [<strong>'.$i.'</strong>] ';
	  else 
         echo ' <a href="?p='.$i.'">'.$i.'</a> ';
} 

 // Create navigation link for next and last page.
if ($current_page != $total_pages) 
{
	$next = $current_page + 1;
	if (($current_page + $range) < $total_pages)
		echo ' ...<a href="?p='.$total_pages.'">'.$total_pages.'</a> ';
		
	echo ' <a href="?p='.$next.'">NEXT </a> ';
}
else
	echo ' NEXT ';	
?>

Open weblinks in external browser when using Phonegap

 ANDROID, APPS, HTML  No Responses »
Apr 062013
 

To prevent a Phonegap-wrapped app from opening external links in the apps webview, use javascript to open the link in the external browser.

This works on Android (probably other platforms as well)

<a href="#" data-rel="external" target="_blank" onclick="window.open('http://www.jymden.com', '_system')">Jymden</a>

Simple PHP e-mail contact form.

 HTML, PHP  No Responses »
May 212012
 

A simple contact form, just for reference. Will add more info later on…

<?php
if (isset($_POST['submit'])) {

	$name = $_POST['name']; //name of sender
	$email = $_POST['email']; //e-mail of sender
	$email = stripslashes($email);
	
	$subject = $_POST['subject']; //e-mail subject 
	$subject = str_replace(array("\r\n","\r","\n"), "", $subject); //remove any linebreaks to keep from code injections

	$message = $_POST['message']; // e-mail message
	$message = str_replace(array("\r\n", "\r"), "\n", $message); // fix line-breaks
	$message = stripslashes($message);

	//headers
	$headers = "From:$name<$email>\r\n";
	$headers .= "Return-path: <$email>\r\n";
	$headers .= "Content-type: text/plain; charset=UTF-8\r\n";
	$headers .= "Content-Transfer-Encoding: 8bit\r\n";
	
	$to = 'myadress@mydomain.com'; //recipients e-mail adress

	//validate email and name variables
	if (!filter_var($email, FILTER_VALIDATE_EMAIL))
	{
		echo 'not a valid e-mail adress';
		die();
	}
	if (preg_match('/[^a-z åäöÅÄÖüÜ _-]/i', $name))
	{
		echo 'not a valid name format';
		die();
	}

	//send the email
	$send = mail($to, $subject, $message, $headers);
	if ($send)
		echo 'email sent';
	else
		echo 'something went wrong, email not sent';
}
?>

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<form action="" method="post">
		name:<br>
		<input type="text" name="name"/>
		<br>email:<br>
		<input type="text" name="email"/>
		<br>subject:<br>
		<input type="text" name="subject"/>
		<br>message:<br>
		<textarea name="message"/></textarea>
		<br>
		<input type="submit" name="submit"/>
	</form>
</body>
</html>

Hide elements with radio buttons

 HTML, JAVASCRIPT  No Responses »
May 082012
 

Sometimes you want to show or hide certain elements of a form, depending on the selection of a radiobutton.

 

I am by no means any javascript ninja, but this is one simple way I came up with:

<html>
<head>
<script type="text/javascript">
	function DisplayElement(element)
	{
		x = element.value;
		if (x == 1) {
			document.getElementById('text').style.display = '';
		}
		else {
			document.getElementById('text').style.display = 'none';
		}
	}
</script>
</head>

<body>
<form name="form">
<input name="choice" type="radio" value="1" onclick="DisplayElement(this)" checked/>
<input name="choice" type="radio" value="2" onclick="DisplayElement(this)"/>
<input name="text" type="text" id="text"/>
</form>
</body>
</html>

 
This could apply to any element. For example, you could put a whole bunch of elements in a div and the hide/show the div. Like this:


<script type="text/javascript">
	function DisplayElement(element)
	{
		x = element.value;
		if (x == 1) {
			document.getElementById('container').style.display = '';
		}
		else {
			document.getElementById('container').style.display = 'none';
		}
	}
</script>

<form name="form">
<input name="choice" type="radio" value="1" onclick="DisplayElement(this)" checked/>
<input name="choice" type="radio" value="2" onclick="DisplayElement(this)"/>
<div id="container">
	<input type="checkbox"/>
	<input type="checkbox"/>
	<input type="text"/>
	<input type="text"/>
	<input type="text"/>
</div>
</form>

 
 
Here’s another way to do it. This example takes a number as a parameter instead of using the value of the element. A bit more compact code and it might be more flexible.

<script type="text/javascript">
    function DisplayElement(x)
    {
        if (x == 1) {
            document.getElementById('text').style.display = '';
        }
        else {
            document.getElementById('text').style.display = 'none';
        }
    }
</script>

<form name="form">
<input name="choice" type="radio" onclick="DisplayElement(1)" checked/>
<input name="choice" type="radio" onclick="DisplayElement(2)"/>
<input name="text" type="text" id="text"/>
</form>

 
And here’s an even more flexible version. In this example you can pass the id of the element you want to hide as a second argument to the function. This way you can use the same function to toggle the visibility of many different elements.

<script type="text/javascript">
    function DisplayElement(x,target)
    {
        if (x == 1) {
            document.getElementById(target).style.display = '';
        }
        else {
            document.getElementById(target).style.display = 'none';
        }
    }
</script>

<form name="form">
<input name="choice" type="radio" onclick="DisplayElement(1,'text')" checked/>
<input name="choice" type="radio" onclick="DisplayElement(2,'text')"/>
<input name="text" type="text" id="text"/>
</form>

Here is another post, to do the same thing with a checkbox.

Hide elements with checkbox

 HTML, JAVASCRIPT  No Responses »
May 072012
 

This is a slightly edited version of this post. Just to make it work with a checkbox instead of radio buttons.

 

 

<html>
<head>
<script type="text/javascript">	
	function DisplayElement(checked) 
	{
		if (checked) {
			document.getElementById('text').style.display = '';
		}
		else {
			document.getElementById('text').style.display = 'none';
		}
	}
</script>
</head>
<body>
<form name="form">
<input type="checkbox" onclick="DisplayElement(this.checked)" checked/>
<input type="text" id="text"/>
</form>
</body>
</html>