Top 10 Best Laptops for Writers & Writing 2016

On 11/28/2016 Be the first to comment!

Are you looking for the best laptop for writers? Then here's our review for Top 10 Laptops for Writers and Writing 2016. No matter if you are a professional writer, seasonal or a novice there's a laptop for everyone's budget here. The laptops we have recommended are for people who use them mainly for writing purpose and made sure they got spacious backlit keyboard, eye friendly display, no overheating issues and light weight but sturdy chassis.

top-10-laptops-for-writers-writing

Best Writers Laptop Configuration:

Are there any special laptops made for writing? Well! No. But a laptop specifically used for writing must have certain features that would make a writer's life easier. Here we go.

  • Keyboard: Backlit Keyboard (to write in low-light conditions) with spacious palm rest.
  • Storage: At least 128GB SSD (SSD is faster and produce less heat. A must for professional writers who writes all day long)
  • RAM: 6 to 8GB RAM
  • Processor: Good Quad core processor like Intel i3
  • Portable: Light-weight chassis recommended if writers travel a lot.

Top 10 Best Laptops for Writers & Writing 2016:

1. ASUS ZenBook UX303UA - Best Writing Laptop under $800

best-laptop-for-writing-ZenBook-UX303UA

ASUS ZenBook UX303UA is our top pick in Top 10 Laptops for Writers sporting the right combination of power, elegance & portability. Priced under $800, the ultrabook comes with high-end hardware's and boots and loads documents with lightning speed and suffers no heating problem.

The laptop comes preinstalled with Windows 10 and sports Intel i5 processor coupled with 8GB RAM, abundant 256GB SSD storage & wide spaced keypad. Plus the high definition 13.3 inch screen makes it highly portable. Given the fact it weighs just 3 pounds you can stash it in your backpack and take it on go.

Besides its 7 hours of battery backup is another huge plus. There is no overheating with zenbook as it uses SSD for storage which is relatively fast and prone to less heat. Overall it's a great investment for serious writers who write for living.

2. Acer Aspire E15 - Best Affordable Laptop for Writing 2016

best-laptop-for-writers-Aspire-E-15

Acer Aspire E15 is the best cheap laptop for writers in 2016 with wide 15.6 inch Full HD screen and full-sized keyboard along with comfortable palm rest. It includes abundant SSD storage of 256GB GB to store all your writings and features latest Intel Core i5 processor, 8GB RAM, great battery backup and of all windows 10 OS.

If you are a novoice or a seasonal writer then there's no point in spending $1000 for a laptop. A decent mid-range device will do. At the price tag of just $550, Acer Aspire E15 is the perfect laptop for writers on budget.

It sports a good NVIDIA GPU so you can use it for gaming if you don't feel like writing all day. Another good reason to go for this gem:)

3. HP 15-AY011NR - Cheap Laptop for Writers

cheapest-laptop-for-writers-HP-15-ay011nr

HP 15-AY011NR is another good writing laptop you can get for $450. Probably this is the most affordable laptop with good specs tailored for a writer's needs. For such a budget device HP 15-AY011NR includes great hardware like 8GB RAM, Core i5 Processor and surprisingly 1TB of hard disk space.

It offers 15.6 inch wide FHD display and spaciously arranged keyboard with large palm rest area and comes pre-installed with Windows 10 OS to let you start work immediately after purchase.

The laptop has excellent battery life of seven hours and suitable for outdoor writing. Highly recommended for beginners & seasonal writers.

4. MacBook Pro ME865LL/A - Awesome Laptop with Retina Display for Professional Writers 2016

best-laptop-for-professional-writers-macbook-pro

MacBook Pro with Retina Display is the Perfect Laptop for Professional Writers. Writers who are used to sit and write for hours starring at the laptop screen might suffer from eye irritation, red or puffy eyes. Having a laptop like MacBook with Retina display will keep away eye strain.

Plus the device is highly portable being very thin and light-weight and fits in your smallest backpack easily. It comes with high-end features like 8GB RAM, 128GB storage space, 13.3 inch screen with retina display and very long battery life. Plus the keypad has comfortable palm rest space and backlit keys to let you write in low-light conditions.

Overheating is never an issue with MacBook. A high-end product recommended for serious writers.

5. Dell Inspiron - Top Laptop for Professional Writers

top-laptop-for-writers-dell-inspiron

Dell Inspiron is another great laptop for professional writers. Professional writers do need a sturdy laptop with wide-screen, full-sized backlit keyboard to write on low-light conditions, ample storage space and good hardware. Dell Inspiron meets up with all these challenges without trouble and would be a great buy under $1000.

Provided the specs are latest with Windows 10 OS, powerful Intel i7 processor along with 8GB RAM, Touch-enabled 15.6 inch FHD Screen, abundant 1TB storage and backlit full-sized keyboard with comfortable palm area. The laptop is worth every penny you spend and has an excellent battery life of more than seven hours. Overall Dell Inspiron would be very good companion in your writing career.

6. Microsoft Surface Book - A Laptop for Professional Writing

top-writers-laptop-for-professionals-Surface-Book

An expensive high-end laptop from Microsoft and extremely powerful with stunning 12 hours of battery backup, high definition display and comfortable backlit keyboard to write on dim light conditions. Writing is joy with Surface Book and if you are a professional writer who writes for living, this would be the best investment you make for your career.

The product comes in six different versions and for full-time writers we would recommend a hardware combination of Intel i5 processor, 8GB RAM, 256GB SSD Storage. Videos & games are highly enjoyable in Surface Book's high definition screen. So if you are fed up with writing all day you can treat yourself for some entertainment. Highly recommended for professional writers.

7. HP Chrome 14 - Budget Writing Laptop for Travel

best-affordable-laptop-for-journalist-HP-Chrome-14

At 3.4 lbs HP Chrome 14 is a great laptop for writers on go and journalists on budget. It costs you less than $300 and has remarkable battery backup of 8 hours in one go. Plus access to Google apps and the ability to connect with various Wi-Fi hot spots are other great additions helpful for people who work as team and share information with other members of the team.

8. HP Pavilion 13 2-in-1 Laptop - Best Portable Laptop for Writers

best-portable-laptop-for-writers-HP-Pavilion-13

HP Pavilion 13 is a touch-enabled hybrid laptop that duals as a Laptop & Tablet and a perfect fit for Journalists and Writers. It is highly portable with 13.3 inch high definition touch screen yet has spaciously formed keypad with comfortable palm rest and would be a great choice for writing.

It comes with windows 10 OS and powered with Intel i3 processor coupled with 8 GB RAM, 126GB SSD disk and 7 hours of battery backup. It makes for a great companion on your travel and can be bought for under $600.

9. Lenovo Yoga 3 Pro - Good Mid-range Laptop for Writers

light-weight-laptop-for-writers-yoga-3-pro

Yoga 3 pro is another good mid-range laptop for writers from Lenovo brand. The laptop runs on windows 10 operating system and comfortable for writing with well-spaced backlit keyboard and 13.3-inch QHD glossy multi-touch display.

It packs powerful Intel Core Processor, 8GB RAM, and huge 256GB SSD to store all your files. With 13.3 inch it's very portable and if you like to write on outdoors then it easily sustains for up to 9 hours without power. There is no doubt Yoga 3 Pro comes with all good features a writer needs in a laptop and would be another great choice for writing.

10. Samsung Chromebook 2 - Best Chromebook for Writers

Slim and Light-weight this Chromebook from Samsung runs on Chrome operating system and comes with very useful software packs. The software's like AirDroid Premium, Little Bridge & Wunderlist Pro helps you to manage all your android devices on the web and let you synchronize & transfer files with others on your team. The ergonomic well-spaced keyboard allows you to type fast. Given the fact there is no hard-disk you have to rely on cloud storages.

best-budget-laptop-for-writing-Chromebook-2

Related: Top 10 Best Laptops for Programming & Coding in 2016

Over To You:

That's makes our recommendations for top 10 best laptops for writers. If you are a novice or a seasonal writer there is no point investing $1000 in a laptop. Budget or mid-range laptops from the list will do. On the other hand professional writers need powerful machines to cope up with their work all day. For them a high-end laptop would be the wise choice. However all of the above recommended laptops are great for writing with well-spaced backlit keyboard, comfortable palm rest, high definition screen and optimal performance.

Using Google reCAPTCHA with PHP Example

On 11/21/2016 Be the first to comment!

PHP reCAPTCHA Tutorial: This post will show you how to use google recaptcha in php form to protect your website from bots and spammers. Old recaptcha requires users to fill out a textbox with text found in an image and to be frank this method is not so user friendly. But Google has released a new recaptcha in which user has to just tick a checkbox and be done with it. It is very effective in controlling spam without compromising user experience.

Google has named this new recaptcha as "No CAPTCHA reCAPTCHA" which is meant to be gentle on humans and hard on bots.

google-recaptcha-php-tutorial

How to Use Google reCAPTCHA in PHP?

Implementing Google reCAPTCHA in php form is quite easy but before doing so you have to first register site (domain name) with Google and get site & secret keys.

Go to https://www.google.com/recaptcha/admin and register the site in which you want to use recaptcha.

register-website-for-recaptcha

If you want to test recaptcha api from localhost, enter 'localhost' in the Domains box and click on 'Register' button.

You will be provided with two keys; one is the 'Site Key' which is used to display recaptcha widget. And the second one is the 'Secret Key' to confirm user response. You'll need these two to integrate recaptcha in your website.

Create PHP Form:

<!doctype html>
<html>
<head>
<title>Implementing Google reCaptcha in PHP Demo</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div class="container" style="margin-top: 30px;">
    <div class="col-xs-6 col-xs-offset-3">
        <div class="panel panel-default">
        <div class="panel-body">
            <form action="recaptcha_demo.php" method="post" name="comment-form" >
                <div class="form-group">
                    <textarea name="comment" placeholder="Enter your comment here..." class="form-control" rows="4" required></textarea>
                </div>
                <div class="form-group">
                    <input type="submit" name="submit" value="Post Comment" class="btn btn-danger">
                </div>
            </form>
        </div>
        </div>
    </div>
    </div>
</body>
</html>

Above markup creates a simple comment form with a comment box and a submit button. Next load javascript library for recaptcha api in your form.

<!-- load recaptcha api -->
<script src='https://www.google.com/recaptcha/api.js'></script>

Then add this below recaptcha widget before Submit button in the form.

<div class="form-group">
    <div class="g-recaptcha" data-sitekey="<?php echo $site_key; ?>"></div>
</div>

Note: You can rather provide the site key directly in its place without using php variable.

Then we need php script to validate recaptcha and process the comment form data.

<?php
    $site_key = '***************'; // change this to yours
    $secret_key = '***************'; // change this to yours
    if (isset($_POST['submit']))
    {
        if(isset($_POST['g-recaptcha-response']))
        {
            $api_url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . $secret_key . '&response='.$_POST['g-recaptcha-response'];
            $response = @file_get_contents($api_url);
            $data = json_decode($response, true);

            if($data['success'])
            {
                $comment = $_POST['comment'];
                // process comment here
                $success = true;
            }
            else
            {
                $success = false;
            }
        }
        else
        {
            $success = false;
        }
    }
?>

Now run the php form, provide comment and tick recaptcha box and submit it.

using-recaptcha-with-php-example

If recaptcha validation went right and rest is ok, you will be shown with a success message.

php-recaptcha-example-success

If you fail to complete captcha verification then you'd get error like this,

php-recaptcha-example-error

Here's the complete code for php recaptcha example.

recaptcha_demo.php

<?php
    $site_key = '***************'; // change this to yours
    $secret_key = '***************'; // change this to yours
    if (isset($_POST['submit']))
    {
        if(isset($_POST['g-recaptcha-response']))
        {
            $api_url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . $secret_key . '&response='.$_POST['g-recaptcha-response'];
            $response = @file_get_contents($api_url);
            $data = json_decode($response, true);

            if($data['success'])
            {
                $comment = $_POST['comment'];
                // process comment here
                $success = true;
            }
            else
            {
                $success = false;
            }
        }
        else
        {
            $success = false;
        }
    }
?>

<!doctype html>
<html>
<head>
<title>Implementing Google reCaptcha in PHP Demo</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div class="container" style="margin-top: 30px;">
    <div class="col-xs-6 col-xs-offset-3">
        <div class="panel panel-default">
        <div class="panel-body">
            <?php if (isset($success)) {
                if ($success==true) { ?>
                <div class="alert alert-success"><?php echo "Thanks for posting comment! Your comment will be visible after approval!"; ?></div>
            <? } else { ?>
            <div class="alert alert-danger"><?php echo "Please complete captcha verification to post comment!"; ?></div>
            <?php } } ?>
            <form action="recaptcha_demo.php" method="post" name="comment-form" >
                <div class="form-group">
                    <textarea name="comment" placeholder="Enter your comment here..." class="form-control" rows="4" required></textarea>
                </div>
                <div class="form-group">
                    <div class="g-recaptcha" data-sitekey="<?php echo $site_key; ?>"></div>
                </div>
                <div class="form-group">
                    <input type="submit" name="submit" value="Post Comment" class="btn btn-danger">
                </div>
            </form>
        </div>
        </div>
    </div>
    </div>
    <!-- load recaptcha api -->
    <script src='https://www.google.com/recaptcha/api.js'></script>
</body>
</html>

Must Read: jQuery PHP Image Gallery from Folder using Bootstrap

Don't Miss: AJAX Username Availability Check using PHP and MySQL

That explains about integrating google recaptcha in php. I hope you find this php recaptcha tutorial useful. Please share your thoughts through comments.

jQuery PHP Image Gallery from Folder using Bootstrap

On 11/17/2016 Be the first to comment!

Hi! In today's post let's see how to create jquery php image gallery from folder using bootstrap. The process of building lightbox image gallery with bootstrap is clean and quick and we are going to add images to photo gallery in a dynamic way. That is with PHP and blueimp plug-in this script will create image gallery from folder automatically.

And the best part of this photo gallery is, it's responsive and supports slideshow with the option to view zoomed images in lightbox. Excited? Come let's move on to create stylish php image gallery from folder using jquery and bootstrap.

Create jQuery PHP Image Gallery from Folder:

You'll need two plug-ins namely blueimp and bootstrap image gallery for creating this photo gallery. Just download and extract them to your application root.

Then create 'gallery.php' file and add this meta tag to make the image gallery responsive.

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Next link all the required style sheets to the header tag.

<head>
    ...
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="blueimp/css/blueimp-gallery.css" />
    <link rel="stylesheet" href="bootstrap-image-gallery/css/bootstrap-image-gallery.css" />
</head>

Then load jquery and javascript files of bootstrap, blueimp & bootstrap image gallery plugin just above the closing body tag.

<body>
    ...
    ...

    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="blueimp/js/jquery.blueimp-gallery.js"></script>
    <script src="bootstrap-image-gallery/js/bootstrap-image-gallery.js"></script>
</body>

Now add markup for modal window to serve as a light box for the gallery images.

<div id="blueimp-gallery" class="blueimp-gallery">
    <!-- outer container -->
    <div class="slides"></div>
    <!-- add controls to lightbox -->
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
    <!-- modal window -->
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-hidden="true">×</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body next"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left prev">
                        <i class="glyphicon glyphicon-chevron-left"></i> Prev
                    </button>
                    <button type="button" class="btn btn-default next">Next
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

We have also added navigation buttons to the modal footer to skim through the images inside lightbox.

Next comes php script to load images from the folder to the gallery. Here we'll add image thumbnails in grid view to form the actual photo gallery.

<div class="row">
    <div class="col-md-12">
        <h2 class="text-center well">jQuery PHP Image Gallery From Folder</h2>
    </div>
</div>

<div class="row">
<?php
$path = "images/"; // path to images folder
$file_count = count(glob($path . "*.{png,jpg,jpeg,gif}", GLOB_BRACE));
if($file_count > 0)
{
    $fp = opendir($path);
    while($file = readdir($fp))
    {
        $ext = pathinfo($file, PATHINFO_EXTENSION);
        $ext_array = ['png', 'jpg', 'jpeg', 'gif'];
        if (in_array($ext, $ext_array))
        {
            $file_path = $path . $file;?>
            <div class="col-md-4 col-xs-6">
                <a href="<?php echo $file_path; ?>" title="My Favorites" data-gallery><img src="<?php echo $file_path; ?>" class="img-responsive" /></a>
            </div>
        <?}
    }
    closedir($fp);
}
else
{
    echo "Sorry! There are no images in the gallery!!!";
}
?>
</div>

Above php script check if there are any images present in the given folder. If true, then it opens the directory, read through the image files one by one and add their thumbnails in a grid pattern using bootstrap. Finally release the file handle after looping through all the files in the folder.

We are not done yet. I need to spice up gallery images a little. Let's add some custom css styles.

<style>
body {
    background: url(images/bg-white-wall.jpg);
}

a img {
    background-color:#FFF;
    margin: 20px 0;
    padding:10px;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    box-shadow: 0 0 8px #5F5F5F;
    -moz-box-shadow: 0 0 8px #5F5F5F;
    -webkit-box-shadow: 0 0 8px #5F5F5F;
}
</style>

Above code adds a light textured background to the gallery and add portrait look to the images.

That's it. You can now run 'gallery.php' in the browser and it will produce a nice-looking image/photo gallery like this.

jquery-php-image-gallery-from-folder-tutorial

Beautiful isn't it? Well! And it's responsive too:)

Click on any of the thumbnails to zoom and view the image in a lightbox like this.

bootstrap-lightbox-image-gallery-php-jquery

You can slide through the gallery images with the help of navigation controls present at the bottom of the lightbox.

Here's the complete code for the image gallery from folder using php and jquery.

Gallery.php

<!DOCTYPE html>
<html>
<head>
    <title>jQuery PHP Image Gallery From Folder</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="blueimp/css/blueimp-gallery.css" />
    <link rel="stylesheet" href="bootstrap-image-gallery/css/bootstrap-image-gallery.css" />
    <style>
    body {
        background: url(images/white-wall-2.jpg);
    }
    
    a img {
        background-color:#FFF;
        margin: 20px 0;
        padding:10px;
        border-radius:4px;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        box-shadow: 0 0 8px #5F5F5F;
        -moz-box-shadow: 0 0 8px #5F5F5F;
        -webkit-box-shadow: 0 0 8px #5F5F5F;
    }
    </style>
</head>
<body>
    <div class="container">
        <!-- create light box -->
        <div id="blueimp-gallery" class="blueimp-gallery">
            <!-- outer container -->
            <div class="slides"></div>
            <!-- add controls to lightbox -->
            <h3 class="title"></h3>
            <a class="prev">‹</a>
            <a class="next">›</a>
            <a class="close">×</a>
            <a class="play-pause"></a>
            <ol class="indicator"></ol>
            <!-- modal window -->
            <div class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" aria-hidden="true">×</button>
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body next"></div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default pull-left prev">
                                <i class="glyphicon glyphicon-chevron-left"></i> Prev
                            </button>
                            <button type="button" class="btn btn-default next">Next
                                <i class="glyphicon glyphicon-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-center well">jQuery PHP Image Gallery From Folder</h2>
            </div>
        </div>

        <div class="row">
        <?php
        $path = "images/"; // path to images folder
        $file_count = count(glob($path . "*.{png,jpg,jpeg,gif}", GLOB_BRACE));
        if($file_count > 0)
        {
            $fp = opendir($path);
            while($file = readdir($fp))
            {
                $ext = pathinfo($file, PATHINFO_EXTENSION);
                $ext_array = ['png', 'jpg', 'jpeg', 'gif'];
                if (in_array($ext, $ext_array))
                {
                    $file_path = $path . $file;?>
                    <div class="col-md-4 col-xs-6">
                        <a href="<?php echo $file_path; ?>" title="My Favorites" data-gallery><img src="<?php echo $file_path; ?>" class="img-responsive" /></a>
                    </div>
                <?}
            }
            closedir($fp);
        }
        else
        {
            echo "Sorry! There are no images in the gallery!!!";
        }
        ?>
        </div>
    </div>
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="blueimp/js/jquery.blueimp-gallery.js"></script>
    <script src="bootstrap-image-gallery/js/bootstrap-image-gallery.js"></script>
</body>
</html>

Also Read: PHP Bootstrap Contact Form to Send Email

Don't Miss: Bootstrap Login Form using PHP and MySQL

That explains about creating image gallery from folder in php. Do you like this jquery php image gallery from folder tutorial? Please share your thoughts through comments.

Dynamic Dependent Select Box using CodeIgniter, AJAX & jQuery

On 11/14/2016 Be the first to comment!

Hi! In this tutorial let's see how to create dynamic dependent select box using codeigniter, ajax and jquery. If you wonder what dynamic dependent select box is, then they are the parent-child dropdowns in which the contents of the second dropdown solely depends on the option selected on the first dropdown. And the best example for such dynamic dependent select box is the country state city drop down list and here I'm going to show you how to create them in codeigniter and jquery ajax.

And creating dynamic dependent select box in php is straight-forward but implementing them in a MVC Framework like CodeIgniter gets little tricky. But don't worry; I'll walk you through the process step-by-step so that you can understand it easily.

Create Dynamic Dependent Select Box in Codeigniter and ajax:

Here the idea is to create three drop downs in an html form for country, state and city resp. and populate country names in the country dropdown from database on load. After that selecting a specific country should load all the state names related to the country and choosing a particular state should load the city names available under the state.

Since refreshing the form every time the user picks a country or state would be awkward. So we are going to use jQuery AJAX for updating the select box options as many times as required in a discreet way.

Step 1) Create Database

First create the database required for this example. I'm using MySQL DB here and you'll need three tables 'country', 'state' and 'city' which are related to each other like below.

codeigniter-country-state-city-dropdown-list-db-structure

Here's the sql command to create the above tables. And I have also included some sample records to run the demo.

CREATE TABLE IF NOT EXISTS `country` (
  `country_id` int(9) NOT NULL AUTO_INCREMENT,
  `country_name` varchar(30) NOT NULL,
  PRIMARY KEY (`country_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6;

INSERT INTO `country` (`country_id`, `country_name`) VALUES
(1, 'Canada'), (2, 'China'), (3, 'India'), (4, 'United Kingdom'), (5, 'United States');

CREATE TABLE IF NOT EXISTS `state` (
  `state_id` int(9) NOT NULL AUTO_INCREMENT,
  `country_id` int(9) NOT NULL,
  `state_name` varchar(30) NOT NULL,
  PRIMARY KEY (`state_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10;

INSERT INTO `state` (`state_id`, `country_id`, `state_name`) VALUES
(1, 3, 'Bihar'), (2, 3, 'Delhi'), (3, 3, 'Maharashtra'), (4, 3, 'Tamil Nadu'), (5, 3, 'West Bengal'), (6, 1, 'Newfoundland'), (7, 2, 'Shanghai'), (8, 4, 'England'), (9, 5, 'Florida');

CREATE TABLE IF NOT EXISTS `city` (
  `city_id` int(9) NOT NULL AUTO_INCREMENT,
  `state_id` int(9) NOT NULL,
  `city_name` varchar(30) NOT NULL,
  PRIMARY KEY (`city_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10;

INSERT INTO `city` (`city_id`, `state_id`, `city_name`) VALUES
(1, 3, 'Kalyan'), (2, 3, 'Mumbai'), (3, 3, 'Nagpur'), (4, 3, 'Pune'), (5, 3, 'Thane'), (6, 6, 'St Johns'), (7, 7, 'Shanghai'), (8, 8, 'London'), (9, 9, 'Miami');

Step 2) Create Model ('dropdown_demo_model.php')

Then create a model file with functions to fetch country, state and city names from mysql database. You have to place this file inside 'application/models' folder in CI.

<?php
class dropdown_demo_model extends CI_Model
{
    function __construct()
    {
        parent::__construct();
    }
    
    function get_country()
    {
        $result = $this->db->get('country')->result();;
        $id = array('0');
        $name = array('Select Country');
        for ($i = 0; $i < count($result); $i++)
        {
            array_push($id, $result[$i]->country_id);
            array_push($name, $result[$i]->country_name);
        }
        return array_combine($id, $name);
    }
    
    function get_state($cid=NULL)
    {
        $result = $this->db->where('country_id', $cid)->get('state')->result();
        $id = array('0');
        $name = array('Select State');
        for ($i=0; $i<count($result); $i++)
        {
            array_push($id, $result[$i]->state_id);
            array_push($name, $result[$i]->state_name);
        }
        return array_combine($id, $name);
    }

    function get_city($sid=NULL)
    {
        $result = $this->db->where('state_id', $sid)->get('city')->result();
        $id = array('0');
        $name = array('Select City');
        for ($i=0; $i<count($result); $i++)
        {
            array_push($id, $result[$i]->city_id);
            array_push($name, $result[$i]->city_name);
        }
        return array_combine($id, $name);
    }
}
?>

Step 3) Create Controller ('dropdown_demo.php')

Next create the main controller for this demo inside 'application/controllers' folder. Here's the code for the controller file.

<?php
class dropdown_demo extends CI_Controller
{
    function __construct()
    {
        parent::__construct();
        $this->load->helper(array('form', 'url'));
        $this->load->database();
        $this->load->model('dropdown_demo_model');
    }
    
    function index()
    {
        $data['country'] = $this->dropdown_demo_model->get_country();
        $data['state'] = $this->dropdown_demo_model->get_state();
        $data['city'] = $this->dropdown_demo_model->get_city();
        $this->load->view('dropdown_demo_view', $data);
    }
    
    function populate_state()
    {
        $id = $this->input->post('id');
        echo(json_encode($this->dropdown_demo_model->get_state($id)));
    }

    function populate_city()
    {
        $id = $this->input->post('id');
        echo(json_encode($this->dropdown_demo_model->get_city($id)));
    }
}
?>

Along with the index() function we have two more functions in the controller namely, populate_state() and populate_city() to which we'll send the ajax request. These methods in turn communicate with the model functions we have created in the previous step and return the state and city details as JSON to the ajax call.

Step 4) Create View ('dropdown_demo_view.php')

This is the user interface for our example. The file creates a form with three select boxes. Place this file inside 'application/views' folder.

<!DOCTYPE html>
<html>
<head>
    <title>CodeIgniter AJAX Dynamic Dependent Dropdowns Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="<?php echo base_url("assets/bootstrap/css/bootstrap.css"); ?>" rel="stylesheet" type="text/css" />
    </style>
</head>
<body>

<div class="container" style="margin-top: 30px;">
<div class="col-sm-6 col-sm-offset-3">
    <div class="panel panel-info">
        <div class="panel-heading"><h3 class="panel-title">Dynamic Country, State & City Dropdown List Demo</h3></div>
        <div class="panel-body">
            <?php $attributes = array("name" => "form1");
            echo form_open("dropdown_demo/index", $attributes);?>
            <div class="form-group">
                <?php $attributes = 'id="country" class="form-control"';
                echo form_dropdown('country', $country, set_value('country'), $attributes); ?>
            </div>
            <div class="form-group">
                <?php $attributes = 'id="state" class="form-control"';
                echo form_dropdown('state', $state, set_value('state'), $attributes); ?>
            </div>
            <div class="form-group">
                <?php $attributes = 'id="city" class="form-control"';
                echo form_dropdown('city', $city, set_value('city'), $attributes); ?>
            </div>
            <div class="form-group">
                <button name="submit" type="submit" class="btn btn-info btn-block">Submit</button>
            </div>
            <?php echo form_close(); ?>
        </div>
    </div>
</div>
</div>
<script src="<?php echo base_url("assets/js/jquery-1.10.2.js"); ?>" type="text/javascript"></script>
<script type="text/javascript">
$('#country').change(function(){
    var country_id = $(this).val();
    $("#state > option").remove();
    $.ajax({
        type: "POST",
        url: "<?php echo site_url('dropdown_demo/populate_state'); ?>",
        data: {id: country_id},
        dataType: 'json',
        success:function(data){
            $.each(data,function(k, v){
                var opt = $('<option />');
                opt.val(k);
                opt.text(v);
                $('#state').append(opt);
            });
            $('#city').html('<option value="0">Select City</option>');
            //$('#state').append('<option value="' + id + '">' + name + '</option>');
        }
    });
});

$('#state').change(function(){
    var state_id = $(this).val();
    $("#city > option").remove();
    $.ajax({
        type: "POST",
        url: "<?php echo site_url('dropdown_demo/populate_city'); ?>",
        data: {id: state_id},
        dataType: 'json',
        success:function(data){
            $.each(data,function(k, v){
                var opt = $('<option />');
                opt.val(k);
                opt.text(v);
                $('#city').append(opt);
            });
        }
    });
});
</script>
</body>
</html>

In the view we have two jquery functions, one to load state details and another for city in the respective select boxes via ajax call. And jquery's ajax() function has been used for this and will be triggered when user choose country or state from the drop downs. Also the function sends and receives data in json format and including the option dataType: 'json' ensures it interprets the data properly.

That's it! We have everything in place. Just run the controller and a form will be shown with three dropdowns with country names alone loaded from the database.

dynamic-dependent-select-box-codeigniter-ajax-jquery

Selecting a country name will load 'State' combo with options and selecting a state name will load 'City' combo with available city names.

Read Also: CodeIgniter Login and Registration System with Source Code

Don't Miss: Code Igniter Pagination with Search Filter using Bootstrap

That explains about creating dynamic dependent select box using codeigniter and ajax. Did you find this post useful? Please let us know through comments. And your queries too :)

Top 10 Best Laptops for Programming & Coding (Developers Choice)

On 11/10/2016 1 Comment so far

Are you a developer or programming student and wondering which the best laptop for coding is? Well! Here we have compiled out the list of Top 10 Best Laptops for Programming and Coding 2016 after thorough research on the market. Of course budget is the main constraint while making purchases and we have kept that it mind while making out this best programming laptops list. Be a budding developer, experienced programmer making several thousand every month or a computer science student on tight budget, there is a laptop for everyone's budget here.

top-10-best-laptops-for-programming-coding-game-development

Best Programming Laptop Configuration:

There is no such thing like special laptops made for programming or coding. But before buying a laptop specifically for programming, game development or coding you must consider certain features so that the laptop meets your programming requirements.

So what should you look for in a laptop you buy ideally for programming/coding/game development?

  • Powerful Processor like Intel Core i5, i7 or AMD A10 (or higher)
  • Minimum RAM of 8GB
  • Enough storage space (500GB HDD or preferably 128GB SSD as they are faster than HDD)
  • 2GB Dedicated Graphics card at the min. (if you are into game development this one holds high priority)
  • Good battery backup

Top 10 Best Laptops for Coding and Programming:

Dell Inspiron i7559-763blk Programming Laptop

dell-inspiron-i7559-programming-laptop

Dell Inspiron i7559-763blk tops our list of Top 10 Best Laptops for Programming and Coding. This one is the ideal choice for programmers & game developers with the right amount of power, execution, and performance. Dell i7559 is powered with 6th generation Intel Core i7 Processor clocked at 2.3GHz together with 8GB DDR3L RAM and 4GB 960M NVIDIA Graphics card making it a perfect fit for serious gaming too. It sports a wide 15.6 inch screen which is Full HD and Anti-Glare and comes with excellent 256GB SSD. If you are a Windows lover then rejoice, this powerful beast comes pre-installed with Windows 10 which seals the deal.

HP Pavilion 13-s128nr: Budget Touchscreen Laptop for Programmers

top-coding-laptop-hp-pavilion-13-s128nr

HP Pavilion 13-s128nr is a very affordable touchscreen laptop that doubles as a tablet too. Being stylish and portable this 2-in-1 hybrid laptop is definitely a looker and packs superb configuration to meet all your programming needs. HP Pavilion 13-s128nr is made to run high-end coding softwares with ease and packs Intel Core i5 processor, 8GB RAM and a compatible 13.3-inch FHD screen under its hood. And the best thing is, it comes pre installed with Windows 10 OS and SSD storage of 128GB which is much faster than the traditional HDD disks. Priced under $700 this is a great choice for beginners and programming students.

MacBook Pro 15.4 inch Laptop: Best Programming Laptop Ever

best-programming-laptop-ever-macbook-pro

It's not news, wide number of Programmers & Developers prefers MAC OS X over Windows or Ubuntu and so many of them own both Windows Laptop and MacBook for coding. If you are a professional with high-budget then MacBook Pro is the laptop you have to go for. It comes with 2.5GHz Intel Core i7 Quad-core Processor with insane 16GB RAM for mind blowing performance and smoothness. And the best part is the awesome 15.4 inch retina display along with AMD Radeon R9 M370X, Intel Iris Pro graphics and 512GB PCIe-based flash storage.

Acer Aspire E 15: Budget Laptop for Software Development

cheap-laptop-for-programming-aspire-e15

Acer Aspire E 15 is the most affordable laptop on the market without compromising specs and performance and priced below 600 dollars. The laptop is suitable for both programming and gaming with 6th generation Intel Core i5 6200U Processor coupled with NVIDIA GeForce GTX940MX 2GB Graphic card. It offers 256GB SSD for storage and 8GB RAM for handling high-end softwares without struggle. Overall Aspire E15 is the best laptop for coding on budget. Highly recommended!

Lenovo Y700: Good Laptop for Coders & Game Developers

best-laptops-for-coding-lenovo-y700

Lenovo Y700 is the solid 15.6 inch coding and gaming laptop with massive 16GB RAM teamed up with 6th gen. Intel Core i7 6700HQ Processor clocked at 2.6 GHz. And the best part of Lenovo Y700 is it's Graphics processor. Whether you are an occasional gamer or professional game developer, it's powerful NVIDIA GeForce 960M Graphics card render the graphics in high definition. Besides it has got 15.6 inch large display and 1TB of storage which is great.

ASUS K501UW: Cheapest Laptop for Game Developers

cheap-laptop-for-game-developers-asus-k501uw

ASUS K501UW is the most affordable gaming laptop from Asus. It packs so much power with 6th generation Intel Core i7 Processor with turbo-boost teamed up with 8GB RAM and can run any programming softwares with ease. ASUS K501UW is recommended for any programming but comes with some high-end features especially beneficial for Game developers which are rare to see on a laptop in this price range. It comes fitted with powerful NVIDIA GTX series 960M graphic card, backlit full size keyboard to work in low-light conditions and dual fan cooling system with IceCool technology to keep it from heating due to rendering high-graphics.

Lenovo IdeaPad 510: Best Programming Laptop 2016

best-laptop-for-programmers-ideapad-510

Lenovo IdeaPad 510 is another good programming laptop in 2016 for beginners and programming students. The laptop is powered with Intel core i7 processor and a graphics processor of NVIDIA GTX 940Mx coupled with 12GB RAM which is excellent when it comes to performance. It offers 15.6 inch Full HD display and spacious full-sized keyboards to aid type coding for long-hours without fatigue. Overall Lenovo IdeaPad 510 includes all the right specs required for coding but doesn't burn a hole in your pocket.

Acer Aspire E5-573G-56RG: Cheap Laptop for Programming Students

budget-laptop-for-programming-students-aspire-e5

Priced under $600 Acer Aspire E5-573G-56RG is probably the cheapest programming laptop you can get in the market. No matter if you are a game developer or a coder, Aspire E5-573G is what you want. The laptop boasts the right combination of power and performance packing 8GB DDR3L SDRAM, Intel Core i5 5200U (turbo boost up to 2.7 GHz) with 3MB Cache along with Nvidia GeForce 940 GPU of 2GB Video Ram. It packs 1TB of Hard Disk space, 15.6" Full HD 1080p screen, 4-5 hours of decent battery backup and the best of all is the pre-installed Windows 10 OS. What's more to ask? Just the right laptop for tight budget.

ASUS Zenbook UX303UB: Portable Programming Laptop with Touchscreen

portable-laptop-for-programming-zenbook-ux303ub

If you want a portable laptop to meet your programming requirements, then this little genie is all you want. It comes with sleek and shiny outlook with compact 13.3 inch QHD Touchscreen and weighs next to nothing and perfectly suitable for travel. The ultrabook delivers lightning speed with powerful Intel Core i7 processor together with 12GB RAM and 512GB SSD storage which is amazing for its size. Supported with NVIDIA GTX 940M Graphics Processor, performance is not something you have to bother.

MSI GE72 Apache Pro-003: Gaming + Programming Laptop

best-gaming-laptop-msi-ge72

MSI GE72 Apache Pro-003 is another great gaming laptop with sleek look and advanced hardware architecture. Powered with 6th generation Intel Core i7 6700HQ Processor and NVIDIA GeForce GTX960M 2GB Graphics along with 16GB RAM, the laptops performance is spectacular. Also the bigger 17.3 inch Full HD Matte Screen with True Color Technology brings out the gaming characters to life. If you are not budget constraint and want mind-blowing gaming experience go for MSI GE72 Apache Pro-003.

Over To You:

That's makes for our list of top 10 best programming laptops 2016. I hope our Laptop reviews have provided you the best choices in the market and will help you pick the best laptop for coding. Being a web developer myself, I can once again assure you that the laptops we have recommended are more than capable of meeting all your programming requirements. If you are a game developer or an avid gamer then go for laptops with high graphics card (GPU) otherwise you can settle for any one of the mid-level laptops from the list.

How to Enable Query String in CodeIgniter

On 11/07/2016 1 Comment so far

CodeIgniter Query String Example: This article shows you how to enable query string in codeigniter. PHP Codeigniter framework uses segment based approach for its URLs, thus making them Search Engine friendly. But those who want to use the good old query string method can turn on this option in code igniter and use it. In case you don't know, here's how to enable query string in codeigniter.

CI follows the default URL format similar to this,

mydomain.com/index.php/my_controller/my_function/true

Above url consists of three URI segments where,

  • my_controller defines name of the controller
  • my_function represents the function name
  • true refers to the parameter passed to the function

If you think index.php makes the URL ugly, then you can easily remove index.php from the url by rewriting them in htaccess file. It gives you cleaner URL like this,

mydomain.com/my_controller/my_function/true
enable-query-string-in-codeigniter

Well! But what if you want to take the traditional query string approach for urls like this?

index.php?c=products&m=show&id=25

There are situations especially when working with APIs, some of them forces you to use query strings in the app. Don't worry! Codeignitor allows you to use query strings for urls by choice. But before working with query strings you have to enable them in codeigniter.

How to Enable Query String in CodeIgniter?

Step-1) Go to 'application/config.php' file and open it.

Step-2) Now look for these settings,

$config['enable_query_strings'] = FALSE;
$config['controller_trigger'] = 'c';
$config['function_trigger'] = 'm';

Step-3) Change the 'enable_query_strings' setting to TRUE.

$config['enable_query_strings'] = TRUE;
$config['controller_trigger'] = 'c';
$config['function_trigger'] = 'm';

Usage:

<?php
class products extends CI_Controller
{
    ...            

    function show($id = NULL)
    {
        ...
    }
}
?>

You can access this page with the url,

index.php?c=products&m=show&id=25

Must Read: How to Upload Multiple Images/Files in CodeIgniter

Don't Miss: Retrieve Data From Database with CodeIgniter & AJAX

Likewise you can enable query string in codeigniter and use them in your applications.

Simple Bootstrap Login Form with Validation Example

On 11/03/2016 Be the first to comment!

Bootstrap Login Form Tutorial: This post explains how to create simple bootstrap login form with validation using PHP & MySQL. Signup and Login pages are two core modules required for any member-ship based websites and with bootstrap you can create responsive login page effortlessly. Here first we'll design the login form with bootstrap, css & html. Then use php script to complete the background process involved in user login.

Simple Bootstrap Login Form Example:

Here goes our simple bootstrap login system. Since bootstrap is one of the front-end tools, we can design a nice-looking login form with it, but need some sort of server scripting to make the form workable. For this tutorial I'm going to use PHP for server-side script and MySQL for database.

Create Database:

Run these below sql commands in MySQL to create the database required for our bootstrap login demo.

CREATE DATABASE IF NOT EXISTS `bt_demo`;
USE `bt_demo`;

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(9) NOT NULL AUTO_INCREMENT,
  `name` varchar(30) NOT NULL,
  `email` varchar(60) NOT NULL,
  `password` varchar(40) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `email` (`email`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

INSERT INTO `users` (`id`, `name`, `email`, `password`) VALUES
('1', 'admin', 'admin@mydomain.com', '21232f297a57a5a743894a0e4a801fc3');

Next we need to build user interface for login. Come, let's create an html login form using bootstrap css.

index.php

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Login Form Example using PHP & MySQL</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" >
    <link rel="stylesheet" href="bootstrap.css" type="text/css" />
    
    <style type="text/css">
    #login-form .input-group, #login-form .form-group {
        margin-top: 30px;
    }
    
    #login-form .btn-default {
        background-color: #EEE;
    }
    
    .brand {
        color: #CCC;
    }
    </style>
</head>
<body>
<div class="container" style="margin-top: 30px;">
    <div class="col-sm-6 col-sm-offset-3">
        <div class="panel panel-default">
            <div class="panel-body">
                <form id="login-form" method="post" action="login.php" role="form">
                    <legend>Bootstrap Login</legend>
                    <?php if (isset($_GET['err'])) { ?>
                    <div class="alert alert-danger text-center"><?php echo "Login failed! Invalid email-id or password!"; ?></div>
                    <?php } ?>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                        <input type="text" name="email" placeholder="Enter your email-id" required class="form-control" />
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        <input type="password" name="password" placeholder="Password" required class="form-control" />
                    </div>
                    <div class="form-group">
                        <input type="submit" name="submit" value="Login" class="btn btn-primary btn-block" />
                    </div>
                    <div class="form-group">
                        <hr/>
                        <div class="col-sm-6" style="padding: 0;">New user? <a href="#">Sign Up here</a></div>
                        <div class="col-sm-6 text-right brand" style="padding: 0;">kodingmadesimple.com</div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

In the above file, I have tweaked & customized bootstrap css a little to make the login form look like this.

simple-bootstrap-login-form-example

Also have used some php code <?php if (isset($_GET['err'])) { ?> ... <?php } ?> to display error message if user authentication fails.

Next we'll need a php script where the actual authentication process takes place. The script should receive user login details, check them against 'users' table from database and authenticate user if there is a match for the provided email and password else display error message in the login form. Here's the php file for user authentication.

login.php

<?php
// connect to mysql database
$con = mysqli_connect("localhost", "root", "", "bt_demo") or die("Error " . mysqli_error($con));

// check if form is submitted
if (isset($_POST['submit']))
{
    $uemail = mysqli_real_escape_string($con, $_POST['email']);
    $upwd = mysqli_real_escape_string($con, $_POST['password']);
    $result = mysqli_query($con, "SELECT * FROM users WHERE email = '" . $uemail. "' and password = '" . md5($upwd) . "'");

    if (mysqli_num_rows($result) > 0)
    {
        // login successful - start user session, store data in session & redirect user to index or dashboard page as per your need
        
        $row = mysqli_fetch_array($result);

        session_start();
        $_SESSION['user_id'] = $row['id'];
        $_SESSION['user_name'] = $row['name'];
        header("Location: profile.php"); //change this
    }
    else
    {
        // login failed
        header("Location: index.php?err=true");
    }
}
?>

If the user enters valid email & password, then the script start session, stores user id & name as session data for future reference and redirect user to his/her profile page. On the other hand if login fails the script redirects to index.php and display invalid login message to the user.

Note: The scope of this article is just about login process and creating profile.php is not dealt here. If you want to read about complete user login and signup system then check here.

Now we have all the required files in place. Run index.php and the bootstrap login form prompts user to enter email & password field. As for validating form fields we have included simple HTML5 form validation here.

bootstrap-php-login-form-with-validation

To test the login process, enter 'admin@mydomain.com' for email and 'admin' for password and click login. These are the valid login credentials present in the 'users' table. Also make sure to create profile.php file or redirect to some other page that exists for the script to work properly.

simple-bootstrap-login-page-tutorial

As for invalid login, enter some wrong data and click login button and an error message will be shown above the form like this,

simple-bootstrap-login-form-with-validation-example

Related: Workable Bootstrap Contact us Form Example

So that explains about creating login page in bootstrap & php. I hope you enjoyed this simple bootstrap login form tutorial. I intend to share a post about bootstrap signup form soon. Like us on Facebook and stay tuned:)

Contact Form

Name

Email *

Message *