A Simple Level -1 CSS only dropdown menu using SASS

Today, I was trying to create a CSS3 menu using SASS. The idea behind the project was to learn more about SASS. The only concept that I used was nesting in SASS. This has made our life easier to implement a CSS3 only drop down menu.

 

 

Fork it here

Play with this gist on SassMeister.

Move your blog from blogger to self hosted WordPress

In this post I will be discussing about moving from Blogger to WordPress.

WordPress is a Content Management System which is highly customizable, simple and easy to use. if you search the internet you will learn that BlogSpot is a good blogging platform to start your blogging career, but for long run self hosted blog is what you should select.[Read here]. However there is a disadvantage with Self Hosted WordPress, that you need to download it and configure it on your own. But with the advent of technology you can move your blog from Blogger to WordPress in just 4 steps.

 

How to migrate from Blogger to WordPress

  1. Choose a doman name : Buy a domain name – Domain name like mine – kumarmohit.com is the identity of the website. You will move from a yourname.blogspot.com to your own domain i.e. yourname.com which is a brand in itself.Call it your address on the internet.
  2. Buy Hosting : You need web hosting to store your website , which in this case is WordPress platform. Most of the web hosts comes with a one click WordPress installer so you need not to worry about installing WordPress.
  3. Import content from blogger : You can import your content from blogger into WordPress by using a free plugin available in WordPress dashboard.
  4. Set custom redirect in blogger : You need to set a redirect (tell the browsers that you have a new address). To enter a Custom Redirect, go to Settings | Search Preferences and click Edit next to “Custom Redirects.” Enter the old URL in the “Source” field, and the new URL in the “Destination” field. Click Save changes, and you’re done! To add more redirects, select New redirect.
Now there are lot of options for domain bookings and hosting. I will suggest you to go for a web hosting plan which offers personalized support. Simple Servers India has a web hosting plan suited just for bloggers.

Why Simple Servers India

Just go the website of Simple Servers India and buy this plan , when you book the blogger plan they provide free support to move your data from blogger to WordPress. You can also ask their help to set up a custom redirect.
Simple Servers India WordPress Hosting
Simple Servers India
Moving your hosting platform might seem a difficult and risky task but if you have a proper support it is easy and worth for the investment.

Creating a ToDo webapp using PHP , MySQL and AJAX

I was trying to create a ToDo app just to improve my understanding the way Ajax is used with PHP and MySQL. Finally I have written this app, which is hosted at github. This blog post will serve as a tutorial for the same.

 

The database

CREATE TABLE IF NOT EXISTS `tasks` (
`task_id` int(11) NOT NULL AUTO_INCREMENT,
`task` varchar(100) NOT NULL,
`target_date` date NOT NULL,
PRIMARY KEY (`task_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=18 ;

Now we will create 5 files for the application.

  1. connect_db.php  – To connect with the database.
  2. create.php – The file used to create create the task. This will be called on submit of the form.
  3. create_task.php  – The file to show the form that will be used to create the task.
  4. delete.php – The file will be called when the delete action will be invoked.
  5. index.php  – The main container of the app which will show all the data.
  6. read.php  – The action to fetch all the data from the database.
  7. script.js – The JS file which will have all the actions using ajax.
  8. update.php – The action to update the data using edit action.
  9. update_form.php – The form to update the data.

 

Index.php

 

In our index file , we are using the following ID which is used to display the data. All the page content will be dynamically loaded in the following div.

<div id="pageContent">

</div>

 

Also we have created two buttons which will be used to generate the list of tasks or add a new task

<button type="button" id="viewTasks">Check Tasks</button>

<button type="button" id="addTask">Add Task</button>

connect_db.php

We can use the following code to connect with the database. This file will be included everytime we want to interact with the database.


$host='localhost'; 
$dbname='database'; 
$user='username'; 
$pass='password'; 

 
try {
  # MySQL with PDO_MYSQL
  $DBH = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);
 
 }
catch(PDOException $e) {
    echo $e->getMessage();
}

In script.js we will add the following code. This code will fetch the data dynamically from the database using the output from the read.php file. Similarly we will call all other files dynamically for the respective actions.

// READ Tasks
function showTasks(){
    // read and show the records after at least a second
    // we use setTimeout just to show the image loading effect when you have a very fast server
    // otherwise, you can just do: $('#pageContent').load('read.php', function(){ $('#loaderImage').hide(); });
    // THIS also hides the loader image
    setTimeout("$('#pageContent').load('read.php', function(){ $('#loaderImage').hide(); });", 1000);
}

Fork it at – https://github.com/mohitkr05/ToDo

When to use GET and when to use POST

According to the HTTP specification, you should use the POST method when you’re using the form to change the state of something on the server end. For example, if a page has a form to allow users to add their own comments, like this page here, the form should use POST. If you click “Reload” or “Refresh” on a page that you reached through a POST, it’s almost always an error — you shouldn’t be posting the same comment twice — which is why these pages aren’t bookmarked or cached.

You should use the GET method when your form is, well, getting something off the server and not actually changing anything.  For example, the form for a search engine should use GET, since searching a Web site should not be changing anything that the client might care about, and bookmarking or caching the results of a search-engine query is just as useful as bookmarking or caching a static HTML page.

Also, don’t ever use GET method in a form that capture passwords and other things that are meant to be hidden.

 

Source – http://www.php.net/manual/en/tutorial.forms.php