Redirect With Cancel Button

When working with HTML Forms, a Cancel button is sometimes handy when you want to reset a form. It deletes the user’s input and displays the same form again. This is particularly helpful to users that want to reset a form from scratch and start with a new form entry.

Here’s a simple HTML page called “form.html” that uses the “post” form method and uses an action to itself – the same page which is “form.html.” The form also contains a Cancel button which will be rendered using the input markup below. Notice the input type is set to “submit.”

Cancel Button To Reset Form

<html>
<head>
<title>Form</title>
</head>
<body>
<form method="post" action="form.html">
<label for="firstname">Firstname:</label><br/>
<input type="text" name="firstname" value="" />
<input type="submit" name="submit" value="Submit" />
<input type="submit" name="cancel" value="Cancel" />
</form>
</body>
</html>

Redirect With The Cancel Button

To use redirect with the Cancel button, we will use a simple Javascript event called “onclick=window.location” to send the user to another page called “anyfile.html.” We can also redirect the user to another domain if we want to such as “http://google.com.” Notice the input type is now changed from “submit” to “button.” This is very important. The input type needs to be set to “button,” otherwise our redirect will never work.

<input type="button" name="cancel" value="Cancel"
onclick="window.location='anyfile.html'" />

This is just a simple way to redirect users with the Cancel button. There are other ways of redirecting users such as using Javascript functions, etc., but it’s beyond the scope of this article.

HTML5 Basic Template

If you are going to be creating websites, you might as well be using HTML5 now. There is no point of using the older, antiquated, and sometimes verbose HTML 4 markup. A case in point, take a look at the HTML4 header markup below. It’s long, cryptic and hard to remember.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Compare that to the HTML 5 header markup below which is much, much simpler.

<!DOCTYPE html>
Let's take a look at the basic HTML5 template.
The HTML5 Basic Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
</body>
</html>

This template is perfect for creating quick websites, displaying example pages, or for testing purposes. If you want to create professional websites, then you should check out HMTL5 Boilerplate template which I highly recommend. It’s an excellent website to get you started with your HTML5 projects.

Indent Entire Paragraph Using CSS

One of the easiest ways to indent an entire paragraph in HTML is to use a class and some padding. Let me show an example. In this tutorial, I will indent a paragraph by 40px. I will use a class called “indent” and apply “padding-left” to it. I’m using inline styles in this example, but you can easily apply the same CSS styles to an external stylesheet if you want. First, a normal paragraph.

Normal Paragraph

A normal paragraph would look like this. There is no indentation. The entire paragraph is lined up with the rest of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare hendrerit orci, a congue purus interdum a. Integer nisl risus, tristique a feugiat egestas, malesuada nec massa. Suspendisse dui risus, viverra sit amet posuere nec, sollicitudin et ipsum. Maecenas mollis dapibus nunc, eu pharetra dui pulvinar vel. Morbi convallis purus quis quam ultrices ultrices lobortis augue rutrum. Donec ipsum massa, ullamcorper vitae lacinia ut, adipiscing sed ipsum.

A Paragraph With CSS Styling

<div class=”indent” style=”padding-left:40px;”>

In this div class, I am simply applying padding-left of 40 pixels to the entire class called “indent.” This will indent the entire paragraph as you can see in the results below. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare hendrerit orci, a congue purus interdum a. Integer nisl risus, tristique a feugiat egestas, malesuada nec massa. Suspendisse dui risus, viverra sit amet posuere nec, sollicitudin et ipsum. Maecenas mollis dapibus nunc, eu pharetra dui pulvinar vel. Morbi convallis purus quis quam ultrices ultrices lobortis augue rutrum. Donec ipsum massa, ullamcorper vitae lacinia ut, adipiscing sed ipsum.

</div>

The Result

As you can see, the entire paragraph is indented by 40px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare hendrerit orci, a congue purus interdum a. Integer nisl risus, tristique a feugiat egestas, malesuada nec massa. Suspendisse dui risus, viverra sit amet posuere nec, sollicitudin et ipsum. Maecenas mollis dapibus nunc, eu pharetra dui pulvinar vel. Morbi convallis purus quis quam ultrices ultrices lobortis augue rutrum. Donec ipsum massa, ullamcorper vitae lacinia ut, adipiscing sed ipsum.

Censorship and Facebook

Matthew Ingram of GigaOm brings up a good point regarding censorship and Facebook. Although Facebook is a public place, it’s controlled by a public company. Although, it encourages free speech, it can remove content whenever it wants to. In the case of Roger Ebert’s Facebook page that was taken down, possibly due from the outrage caused by Ebert’s response to Ryan Dunn’s death on Twitter. Ebert’s Facebook page was later reinstated. Facebook, later apologized, saying the page was taken down by mistake. Interesting read.

Dropbox Accidentally Turned Off Passwords

Dropbox accidentally turned off the password feature on their file sharing service last Sunday from 4:54pm until 8:41pm. The file sharing service was eventually restored and secured at 8:46pm. Between those times, anyone can access any of the 25 million Dropbox accounts by simply typing in a random string of characters in the password field. Dropbox said, less than 1 percent of the accounts were accessed at that time period and will continue to investigate if any accounts were compromised.

It just shows you that online services such as Dropbox, and social sites such as Facebook and Twitter are not 100% secure. If you’re concerned about the security, then you shouldn’t really place any highly sensitive information on any of the online services. If you must, then you should use the highest encryption standard you can find. I recommend that you use AES-256 encryption. If you’re a Windows user, you can use the popular compression program called 7Zip. For Linux or Ubuntu users, you will find more information here in this forum.

Leaving Out the PHP Closing Tags

Typically, you will open and close PHP files like this:

<?php
// php code here
?>

Recently, I was introduced to another way. You leave them out!

<?php
// php code here
/* end of php file */

It seems a little weird at first leaving out the PHP closing tag. Feeling a little exposed and naked? It will take a little getting used to this way of closing out PHP. Somehow, it just doesn’t seem normal. This was done mainly to avoid the extra characters at the end of the file. You normally get a warning that headers were already sent or you cannot modify header information, if you have extra characters at the end of the PHP file.

I realized that you can only do this with certain files that end with PHP. For files that end with HTML or Javascript code, you will still need to close PHP further up the chain, otherwise the sky will fall on your head, and you don’t want that to happen. So, what do you think of think of leaving out the PHP closing tags?

Adding Search to CodeIgniter Projects

This is a little tutorial that will add a Search function to your CodeIgniter projects. As you may already know, CodeIgniter is a PHP Framework that uses the MVC model. MVC stands for Model, Views and Controller. This article assumes you’ve work with CodeIgniter before and that you are looking for a search feature that you can add to your application. To add the search feature, we will get started with the Controller.

Controller

This is assuming you already loaded your libraries, helpers and database model. Lets add the Search function.

function search()
{
$data['query'] = $this->Books_model->get_search();
$this->load->view(‘books’, $data);
}

Model

In this database query, I am searching for any matches in any of the 4 fields: bookname, author, characters and synopsis. If there are matches, it will return the results.

function get_search() {
  $match = $this->input->post(‘search’);
  $this->db->like(‘bookname’,$match);
  $this->db->or_like(‘author’,$match);
  $this->db->or_like(‘characters’,$match);
  $this->db->or_like(‘synopsis’,$match);
  $query = $this->db->get(‘books’);
  return $query->result();
}

Views

Here’s the search form.

<?=form_open(‘books/search’);?>
<?php $search = array(‘name’=>’search’,'id’=>’search’,'value’=>,);?>
<?=form_input($search);?><input type=submit value=’Search’ /></p>
<?=form_close();?>

The result can be displayed using a HTML table.

<table>
<tr><th>ID</th><th>Book</th><th>Author</th><th>Published</th><th>Price</th></tr>
<?php foreach($query as $item):?>
<tr>
<td><?= $item->id ?></td>
<td><?= $item->bookname ?></td>
<td><?= $item->author ?></td>
<td><?= $item->datepublished ?></td>
<td><?= $item->price ?></td>
</tr>
<?php endforeach;?>
</table>

Let me know what you think.