Simple Contact book in laravel to understand laravel named routes clearly

Hello friends i am back again with yet another simple application in laravel but this time the real motive behid this application to understand the named routes in laravel.

You can download the complete source code i have also include the sql file just setup the app, and study the codes i have kept the application as simple as possible to understand the routes and how they work.

If you guys face any problem do comment.

Download Code

Codeigniter Login Script With Login Attempt And Session Based User Blocking

Codeigniter Login Script With Login Attempt And Session Based User Blocking

Hello guys/girls in the post you will get to learn how to log in a user and block him/her upon 3 invalid login attempts.

This is really simple and easy in codeigniter it will only take 20 minutes to complete this section.

You can download the complete code from below

 Download Code

URL Shortner Application in Laravel

Hello friends today we will create a url shortner application in Laravel 4, where will will use the get,post Http verbs to show the form on load and to process the form.

First of all you have to install laravel through composer if you already have laravel install you are good to go otherwise do install it first.

First Create a database call it laravelurlshortner (or any name you like.)  and in your app/config/database change the database name you have just created in database.

Now create a migration for your database to create tables,don't worry guys if you don't know how to create a migration i will look after that..

First go you your terminal (cmd) and go the exact url like below image and copy

 and in your termnal chnage the path by just typing cd then what you have copied and press enter
and type :- php artisan migrate:make create_links_table -- create

And go the app/database/migrations and you will notice  your migration is generated.

open it in your editor

and replace it with this code---

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateLinksTable extends Migration {

/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('links',function($t){

$t->increments('id');
$t->text('url');
$t->string('hash',400);
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop('links');
}

}

------------------------------------------------------------------------------------------------

Now again open your terminal and type:- php artisan migrate

And now visit your database and you will notice that your link tables has been created.

--------------------------------------------------------------------------------------------------

You can download the full code from  --- http://www.mediafire.com/download/1677raomrhq9a2n/laravelurlshortner.rar

Just download the code and look into the controllers and routes and models section..

Thank You...

Creating and understanding SEO-Friendly URL'S Part 2

First guys we will look how a slug url look like 

http://www.example.com/This-is-a-seo-friendly-url

This is a  demo and this is what we are looking to achieve

So lets's the hacking begin.......

First we will create  a function which will handle the preparation of a slug url

<?php
    function generate_slug($slug)
  {
echo $text = "TTutorial to    show you how to create a ----- safe slug url v`v`k``` generator";
        echo "<br/>";
 ///// first remove everyting  other than spaces,hypens,number,letters and make the string to lowercase 
        echo $remove_slug1 = preg_replace("/[^\-\s\pN\pL]+/u", " ", mb_strtolower($text,'UTF-8'));

   echo "<br/>";
    /////  remove duplicate hypens and spaces//////
   echo $remove_slug2 = preg_replace("/[\-\s]+/", "-", $remove_slug1);
   echo "<br/>";
   echo $remove_slug3  = trim($remove_slug2,"-");
}
?>

Creating and understanding SEO-Friendly URLS Part 1

Clean URLs, RESTful URLs, user-friendly URLs or SEO-friendly URLs are purely structural URLs that do not contain a query string [e.g., 

action=delete&id=91] and instead contain only the path of the resource (after the scheme [e.g., http] and the authority [e.g., example.org]). This is often done for aesthetic, usability, or search engine optimization (SEO) purposes. Other reasons for designing a clean URL structure for a website or web service include ensuring that individual web resources remain under the same URL for years, which makes the World Wide Web a more stable and useful system, and to make them memorable, logical, easy to type, human-centric, and long-lived

Examples of "unclean" versus "clean" URLs follow:

Unclean URL	Clean URL
http://example.com/index.php?page=foo	http://example.com/foo
http://example.com/index.php?page=consulting/marketing	http://example.com/consulting/marketing
http://example.com/products?category=2&pid=25	http://example.com/products/2/25
http://example.com/cgi-bin/feed.cgi?feed=news&frm=rss	http://example.com/news.rss
http://example.com/services/index.jsp?category=legal&id=patents	http://example.com/services/legal/patents
http://example.com/kb/index.php?cat=8&id=41	http://example.com/kb/8/41
http://example.com/index.php?mod=profiles&id=193	http://example.com/profiles/193

What is Slug ?

A slug is the part of a URL which identifies a page using human-readable keywords. It is usually the end part of the URL, which can be interpreted as the name of the resource, similar to the basename in a filename or the title of a page. The name is based on the use of the word slug in the news media to indicate a short name given to an article for internal use. For example, in

http://www.example.com/services/legal/medical-patents

Hope you guys have understood something about SEO Friendly URls

In the next part we will create a slug function to create a  seo friendly URL.

Simple And Really Cool Page turning Animation in JQUERY With TURN.JS

Guys This is just a demo how to implement turn.js you can find the demo below.

turn.js is  a readymade file through which you can implement this animation effect.

You can google it and download it from github.

I just created a sample and will release the codes and  teach you guys how to implement turn.js

So stay tuned and for now you can check the demo.

And if you guys like it do comment

LIVE DEMO

Some basic selecting methods in JQUERY

The jQuery library allows you to select elements in your XHTML by wrapping them in $("") (you could also use single quotes), which is the jQuery wrapper. Here are some examples of “wrapped sets” in jQuery:

$("div"); // selects all HTML div elements

$("#myElement"); // selects one HTML element with ID "myElement"

$(".myClass"); // selects HTML elements with class "myClass"

$("p#myElement"); // selects HTML paragraph element with ID "myElement"

$("ul li a.navigation"); // selects anchors with class "navigation" that are nested in list items

jQuery supports the use of all CSS selectors, even those in CSS3. Here are some examples of alternate selectors: 

$("p > a"); // selects anchors that are direct children of paragraphs

$("input[type=text]"); // selects inputs that have specified type

$("a:first"); // selects the first anchor on the page

$("p:odd"); // selects all odd numbered paragraphs

$("li:first-child"); // selects each list item that's the first child in its list

jQuery also allows the use of its own custom selectors. Here are some examples: 

$(":animated"); // selects elements currently being animated

$(":button"); // selects any button elements (inputs or buttons)

$(":radio"); // selects radio buttons

$(":checkbox"); // selects checkboxes

$(":checked"); // selects checkboxes or radio buttons that are selected

$(":header"); // selects header elements (h1, h2, h3, etc.) 

Join our facebook group for more updates and many more simple and esy web application

Join our facebook group for more updates and many more simple and esy web application

https://www.facebook.com/groups/644359705655287/

On change query the database using JQUERY - PHP

This is a simple demo to show how to fetch values from database without page refresh in JQUERY / PHP

Minimal data is provided in the database , since this is just a  demo.

1. Create our database -- ('onselect') [My database name] {You can use your name}
2. Create our first table -- ('country') (id,name)
3. Create our second table states -- ('state') (id,country_id,state) [country_id in this case is the foreign key]
4. Create our third table city -- ('city') (id,state_id,city) [state_id is this case is the foreign key]

And Then add some demo values to all the tables....and you are almost done..

//////////////////////// sql for country table
-- phpMyAdmin SQL Dump
-- version 4.0.4
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Mar 15, 2014 at 08:56 AM
-- Server version: 5.1.30-community
-- PHP Version: 5.4.16

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `onselect`
--

-- --------------------------------------------------------

--
-- Table structure for table `country`
--

CREATE TABLE IF NOT EXISTS `country` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `country`
--

INSERT INTO `country` (`id`, `name`) VALUES
(1, 'India'),
(2, 'Bangladesh'),
(3, 'Pakistan'),
(4, 'China');

///////////////////// sql for our states table

-- phpMyAdmin SQL Dump
-- version 4.0.4
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Mar 15, 2014 at 09:01 AM
-- Server version: 5.1.30-community
-- PHP Version: 5.4.16

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `onselect`
--

-- --------------------------------------------------------

--
-- Table structure for table `state`
--

CREATE TABLE IF NOT EXISTS `state` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `country_id` int(11) NOT NULL,
  `state` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;

--
-- Dumping data for table `state`
--

INSERT INTO `state` (`id`, `country_id`, `state`) VALUES
(1, 1, 'West Bengal'),
(2, 1, 'Maharastra'),
(3, 2, 'Chitagong'),
(5, 2, 'Dhaka'),
(6, 2, 'Sylhet'),
(7, 3, 'Balochistan'),
(8, 3, 'Khyber-Pakhtunkhwa'),
(9, 4, 'Beijing'),
(10, 4, 'Shanxi Province');


////////////////////////////////// sql for city table

-- phpMyAdmin SQL Dump
-- version 4.0.4
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Mar 15, 2014 at 09:03 AM
-- Server version: 5.1.30-community
-- PHP Version: 5.4.16

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `onselect`
--

-- --------------------------------------------------------

--
-- Table structure for table `city`
--

CREATE TABLE IF NOT EXISTS `city` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `state_id` int(11) NOT NULL,
  `city` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=22 ;

--
-- Dumping data for table `city`
--

INSERT INTO `city` (`id`, `state_id`, `city`) VALUES
(1, 1, 'Kolkata'),
(2, 1, 'Medinipur'),
(3, 5, 'Rajshahi'),
(4, 5, 'Gazipur'),
(5, 6, 'Sunamganj'),
(6, 6, 'Angajur'),
(7, 2, 'Mumbai'),
(8, 2, 'Pune'),
(9, 2, 'Nagour'),
(10, 2, 'Thane'),
(11, 1, 'Asansol'),
(12, 1, 'Kharagpur'),
(13, 7, 'Quetta'),
(14, 7, 'Khuzdar'),
(15, 8, 'Peshawar'),
(16, 8, 'Abbottabad'),
(17, 8, 'Mingora'),
(18, 9, 'Dongcheng District'),
(19, 9, 'Xicheng District'),
(20, 10, 'Xinghualing District'),
(21, 10, 'Chengqu District');
------------------------------------------------------------------------------------------------------

Now lets start coding for our PHP

This is our index.php page

<?php
  require_once 'conn.php';
  include 'nav_func.php';
  $errors=array();
  if(isset($_POST['ADD']))
{
 $par = addslashes(trim($_POST['par']));
 //// checking for only alphbets in php
  if(!empty($par))
  {

   if(only_alpha($par) == true)

    {
      if(min_length($par) == true)
{
     $errors[]=insert_par(0,$par);
}
else{
 $errors[]="<font color='red'>Sorry!! Menu should be atleast 4 characters long</font>";
}
   }
  else{
     $errors[] ="<font color='red'>Only characters are allowed</font>";
   }
 
  }
else{
  $errors[] ="<font color='red'>Enter your desired menu name</font>";
}
 }


 if(isset($_POST['Sub']))
{

  $parent  = $_POST['cat_id'];
  $sub_cat = addslashes(trim($_POST['sub_cat']));

if(!empty($sub_cat))
  {

   if(only_alpha($sub_cat) == true)

    {
  if(min_length($sub_cat) == true)
{
    $errors[]=insert_par($parent,$sub_cat);
}
else{
$errors[]="<font color='red'>Sorry!! Menu should be atleast 4 characters long</font>";
   }
    }
  else{
    $errors[] ="<font color='red'>Only characters are allowed for subcategory</font>";
   }
 
  }
else{
  $errors[] ="<font color='red'>Enter your desired subcategory name</font>";
}

}
?>
<!doctype>
<html>
  <head>
  <title>
     Dynamic Nav Menu From Database
  </title>
<script language="Javascript" type="text/javascript">

        function onlyAlphabets(e, t) {
            try {
                if (window.event) {
                    var charCode = window.event.keyCode;
                }
                else if (e) {
                    var charCode = e.which;
                }
                else { return true; }
                if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
                    return true;
                else
                    return false;
            }
            catch (err) {
                alert(err.Description);
            }
        }

    </script>
  <style>
   body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li {
  background: #555;
  display: block;
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
h3{
font-family:Baskerville;
  font-size:16px;
  margin-bottom:20px;
  background-color:red;
  color:#fff;
}
header{
  font-family:Baskerville;
  font-size:40px;
  margin-bottom:20px;
  background-color:red;
  color:#fff;
}
footer{

  font-family:Baskerville;
  font-size:18px;
  margin-top:100px;
  background-color:red;
  color:#fff;
}
.links{
  width:800px;
  margin-top:80px;
  margin-bottom:60px;
}
#top{
float:left;
width:100%;

}
#left{
margin-top:50px;
float:left;
width:300px;

}
#right{
width:200px;
margin-top:50px;
border-left:2px solid green;
}
.selection{
float:left;
margin-top:20px;
font-family:baskervile;
font-size:16px;
 width:800px;

  display:none;
}
.bold{
  color:green;
  font-weight:bold;
}
  </style>
  <script language="Javascript" type="text/javascript">

        function onlyAlphabets(e, t) {
            try {
                if (window.event) {
                    var charCode = window.event.keyCode;
                }
                else if (e) {
                    var charCode = e.which;
                }
                else { return true; }
                if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
                    return true;
                else
                    return false;
            }
            catch (err) {
                alert(err.Description);
            }
        }

    </script>

  </head>
  <body>
  <header>On change query the database using JQUERY</header>
  <center>
<div class='links'>
<center><h3>On Change query database using Jquery</h3></center>

<table id='top'>
<tr><th  align='left'>Select Country:- <?php get_country(); ?></th>
<th  align='left'>Select State:- <select name='state' id='state' disabled><option>Select</option></select></th>
<th  align='left'>Select City:-  <select name='city'  id='city' disabled><option>Select</option></select></th>
</tr>


</table>

<div class='selection'>
You Selection &raquo;
<span class='con'></span>
<span class='sta'></span>
<span class='cit'></span>
</div>

<div class='mid'>
<br/>
<br/>
<br/>

</center>
</div>
<footer>&copy - 2014 .php4allu.blogspot.com production</footer>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='myjs.js'></script>
</body>

</html><?php
  require_once 'conn.php';
  include 'nav_func.php';
  $errors=array();
  if(isset($_POST['ADD']))
{
 $par = addslashes(trim($_POST['par']));
 //// checking for only alphbets in php
  if(!empty($par))
  {

   if(only_alpha($par) == true)

    {
      if(min_length($par) == true)
{
     $errors[]=insert_par(0,$par);
}
else{
 $errors[]="<font color='red'>Sorry!! Menu should be atleast 4 characters long</font>";
}
   }
  else{
     $errors[] ="<font color='red'>Only characters are allowed</font>";
   }
 
  }
else{
  $errors[] ="<font color='red'>Enter your desired menu name</font>";
}
 }


 if(isset($_POST['Sub']))
{

  $parent  = $_POST['cat_id'];
  $sub_cat = addslashes(trim($_POST['sub_cat']));

if(!empty($sub_cat))
  {

   if(only_alpha($sub_cat) == true)

    {
  if(min_length($sub_cat) == true)
{
    $errors[]=insert_par($parent,$sub_cat);
}
else{
$errors[]="<font color='red'>Sorry!! Menu should be atleast 4 characters long</font>";
   }
    }
  else{
    $errors[] ="<font color='red'>Only characters are allowed for subcategory</font>";
   }
 
  }
else{
  $errors[] ="<font color='red'>Enter your desired subcategory name</font>";
}

}
?>
<!doctype>
<html>
  <head>
  <title>
     Dynamic Nav Menu From Database
  </title>
<script language="Javascript" type="text/javascript">

        function onlyAlphabets(e, t) {
            try {
                if (window.event) {
                    var charCode = window.event.keyCode;
                }
                else if (e) {
                    var charCode = e.which;
                }
                else { return true; }
                if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
                    return true;
                else
                    return false;
            }
            catch (err) {
                alert(err.Description);
            }
        }

    </script>
  <style>
   body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li {
  background: #555;
  display: block;
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
h3{
font-family:Baskerville;
  font-size:16px;
  margin-bottom:20px;
  background-color:red;
  color:#fff;
}
header{
  font-family:Baskerville;
  font-size:40px;
  margin-bottom:20px;
  background-color:red;
  color:#fff;
}
footer{

  font-family:Baskerville;
  font-size:18px;
  margin-top:100px;
  background-color:red;
  color:#fff;
}
.links{
  width:800px;
  margin-top:80px;
  margin-bottom:60px;
}
#top{
float:left;
width:100%;

}
#left{
margin-top:50px;
float:left;
width:300px;

}
#right{
width:200px;
margin-top:50px;
border-left:2px solid green;
}
.selection{
float:left;
margin-top:20px;
font-family:baskervile;
font-size:16px;
 width:800px;

  display:none;
}
.bold{
  color:green;
  font-weight:bold;
}
  </style>
  <script language="Javascript" type="text/javascript">

        function onlyAlphabets(e, t) {
            try {
                if (window.event) {
                    var charCode = window.event.keyCode;
                }
                else if (e) {
                    var charCode = e.which;
                }
                else { return true; }
                if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
                    return true;
                else
                    return false;
            }
            catch (err) {
                alert(err.Description);
            }
        }

    </script>

  </head>
  <body>
  <header>On change query the database using JQUERY</header>
  <center>
<div class='links'>
<center><h3>On Change query database using Jquery</h3></center>

<table id='top'>
<tr><th  align='left'>Select Country:- <?php get_country(); ?></th>
<th  align='left'>Select State:- <select name='state' id='state' disabled><option>Select</option></select></th>
<th  align='left'>Select City:-  <select name='city'  id='city' disabled><option>Select</option></select></th>
</tr>


</table>

<div class='selection'>
You Selection &raquo;
<span class='con'></span>
<span class='sta'></span>
<span class='cit'></span>
</div>

<div class='mid'>
<br/>
<br/>
<br/>

</center>
</div>
<footer>&copy - 2014 .php4allu.blogspot.com production</footer>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='myjs.js'></script>
</body>
</html>

-----------------------------------------------------------------------------------------------
And now the last php code our fetch_data.php

<?php
   if(isset($_POST['country_id']))
   {
      $con_id = (int)($_POST['country_id']);
 include 'conn.php';
 $fetch_state = "select * from state where country_id='".$con_id."' order by state";
 $result      = mysql_query($fetch_state)
 or die(mysql_query());
 $numrows = mysql_num_rows($result);
 if($numrows > 0)
 {
    //echo $numrows;
echo "<option selected disabled>Select</option>";
   while($row=mysql_fetch_array($result))
{
 
   echo "<option data='".$row['state']."' value='".$row['id']."'>".$row['state']."</option>";
}
 }
 else{
    echo "<option selected disabled>No state found under this country</option>";
 }
   }
 
   if(isset($_POST['state_id']))
   {
      $sta_id = (int)($_POST['state_id']);
 include 'conn.php';
 $fetch_state = "select * from city where state_id='".$sta_id."' order by city";
 $result      = mysql_query($fetch_state)
 or die(mysql_query());
 $numrows = mysql_num_rows($result);
 if($numrows > 0)
 {
    echo "<option selected disabled>Select</option>";
   while($row=mysql_fetch_array($result))
{
 
   echo "<option data='".$row['city']."' value='".$row['id']."'>".$row['city']."</option>";
}
 }
 else{
    echo "<option selected disabled>No city found under this country</option>";
 }
   }

?>

////////////////////////////////////  An the JS File for the onchnage event of the select box


$(document).ready(function(){

  $('#country_id').change(function(){
     $('#city').attr('disabled',true);
$('#state').attr('disabled',true);
$('.cit').html('');
$('.sta').html('');
     var country_id   = $(this).val();
var country_name = $('#country_id option:selected').attr('data');

if(country_id > 0)
{
   //alert(country_id);
$('.selection').show('slow');
$('.con').html(country_name).addClass('bold');
   $.post('fetch_data.php',{country_id:country_id},function(data){
  //alert(data);  /// for testing purposes
  $('#state').removeAttr('disabled');
  $('#state').html(data);
});
}

  });

  $('#state').change(function(){
     $('.cit').html('');
     var state_id   = $(this).val();
var state_name = $('#state option:selected').attr('data');

if(state_id > 0)
{
   //alert(country_id);
$('.selection').show('slow');
$('.sta').html(" &raquo; "+state_name).addClass('bold');
   $.post('fetch_data.php',{state_id:state_id},function(data){
  //alert(data);  /// for testing purposes
  $('#city').removeAttr('disabled');
  $('#city').html(data);
});
}
  });

  $('#city').change(function(){
     var city   = $(this).val();
var city = $('#city option:selected').attr('data');

$('.selection').show('slow');
$('.cit').show('slow');
     $('.cit').html(" &raquo; "+city).addClass('bold');
  });


});

-------------------------------------------------------------------------------------------

And last the function page

<?php
  function get_country(){
     $query = "select * from country order by name";
$result = mysql_query($query)
or die(mysql_error());
$numrows = mysql_num_rows($result);
if($numrows > 0)
{
   echo "<select name='country_id' id='country_id'><option selected disabled>Select</option>";
   while($row=mysql_fetch_array($result))
{
  echo "<option data='".$row['name']."' value='".$row['id']."'>".$row['name']."</option>";
}
echo "</select>";
}
   }
?>


And thst's it we are done guys....

If anybod want the zip file just comment with your email i will send it to you guys

Enjoy!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


LIVE DEMO

Login Form With JQUERY Shake Function - - Like wordpress

1. Our login_shake.html

<html>
<head>
<title>the title</title>
<link rel='stylesheet' type='text/css' href='css/style.css'>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script src='js/myjs.js'></script>
</head>
<body>
   <center>

   <!--<button id="button"> Shake </button>-->

   <!--<div class="target">
 
   </div>-->
      <div class='errors1'></div>
   
 <br/>
      <div id="container">
         
            <label for="username">Username:</label>
            <input type="text" id="username" name="username">
            <label for="password">Password:</label>
            <input type="password" id="password" name="password">
            <div id="lower">
           
             <input type="submit" id='button' class='button' value="Login">
            </div><!--/ lower-->
     
    </div>
 
  </center>
</body>
</html>

2. Our style.css

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}
#container {
    position: absolute;
    width: 340px;
    height: 280px;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -170px;
background: #fff;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

}
form {
    margin: 0 auto;
    margin-top: 20px;
}
label {
    color: #555;
    display: inline-block;
    margin-left: 18px;
    padding-top: 10px;
    font-size: 14px;
}
p a {
    font-size: 11px;
    color: #aaa;
    float: right;
    margin-top: -13px;
    margin-right: 20px;
 -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}
p a:hover {
    color: #555;
}
input {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    outline: none;
}
input[type=text],
input[type=password] {
    color: #777;
    padding-left: 10px;
    margin: 10px;
    margin-top: 12px;
    margin-left: 18px;
    width: 290px;
    height: 35px;
border: 1px solid #c7d0d2;
    border-radius: 2px;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
-webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}
input[type=text]:hover,
input[type=password]:hover {
    border: 1px solid #b6bfc0;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}
input[type=text]:focus,
input[type=password]:focus {
    border: 1px solid #a8c9e4;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}
#lower {
    background: #ecf2f5;
    width: 100%;
    height: 69px;
    margin-top: 20px;
 box-shadow: inset 0 1px 1px #fff;
    border-top: 1px solid #ccc;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
input[type=checkbox] {
    margin-left: 20px;
    margin-top: 30px;
}
.check {
    margin-left: 3px;
font-size: 11px;
    color: #444;
    text-shadow: 0 1px 0 #fff;
}
input[type=submit] {
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    width: 80px;
    height: 30px;
font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #acd6ef; /*IE fallback*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
    background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
    background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
    border-radius: 30px;
    border: 1px solid #66add6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
    cursor: pointer;
}
input[type=submit]:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
    background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
    background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
}
input[type=submit]:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff));
    background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
    background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}

.errors1{
border:2px solid #B22222;
  float:left;
  margin-top:150px;
  margin-left:330px;
  background-color:#FF3030;
  font-family:Baskerville;
  width:325px;
  font-weight:normal;
  display:none;
  font-size:20px;
  text-align:left;
  padding:5px;
}

.red{
  background-color:#FF3030;
}
.green{
  border:2px solid #8FBC8F;
  float:left;
  margin-top:150px;
  margin-left:330px;
  background-color:#228B22;
  font-family:Baskerville;
  width:325px;
  font-weight:normal;
  display:none;
  font-size:20px;
  text-align:left;
  padding:5px;
  color:#fff;

}

3. myjs.js

$(document).ready(function() {

      $(".button").click(function(){
     var uname = $('#username').val();
 var pass  = $('#password').val();
 if(uname == "" && pass == "")
 {
   $('.errors1').text('Both Fields Are Mandatory').fadeIn(1000);
   /*$('.errors1').text('Both Fields Are Mandatory').fadeIn(1000).delay(5000).fadeOut(1000);*/

$("#container").effect( "shake", 
            {times:3}, 100 );
$('#username').addClass('red');
$('#password').addClass('red');
setTimeout(function(){$('.errors1').fadeOut(1000)}, 5000);
 }
 else if(uname == "")
 {
  
   $('.errors1').text('Enter username to login').fadeIn(1000);

$("#container").effect( "shake", 
            {times:3}, 100 );
$('#username').addClass('red');
$('#password').removeClass('red');
setTimeout(function(){$('.errors1').fadeOut(1000)}, 5000);
 }
 
 
 else if(pass == "")
 {
   
   $('.errors1').text('Enter password to login').fadeIn(1000);
$("#container").effect( "shake", 
            {times:3}, 100 );
$('#password').addClass('red');
$('#username').removeClass('red');
setTimeout(function(){$('.errors1').fadeOut(1000)}, 5000);
 }
 else{
   $('.errors1').fadeOut(1000);
   
$('#username').removeClass('red');
   $('#password').removeClass('red');

 }
          
      });


   });

LIVE DEMO

Dynamic Navigation Menubar From Database Using PHP

Simple application to demonstrate dynamic site navigation bar from database in PHP in a very easy and simple way.

This can be done in many ways but this is the most simple way to do this using one table to store all the values

Just follow the codes and create your connection file first

Create the database of your desired name and paste this sql code there


SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

CREATE TABLE `menus` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `parent_id` int(11) NOT NULL,
  `name` varchar(20) NOT NULL,
  `visible` tinyint(1) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=87 ;

--
-- Dumping data for table `menus`
--

INSERT INTO `menus` VALUES(1, 0, 'Home', 1);
INSERT INTO `menus` VALUES(2, 0, 'About', 1);
INSERT INTO `menus` VALUES(3, 0, 'Portfolio', 1);
INSERT INTO `menus` VALUES(11, 0, 'Mission', 1);
INSERT INTO `menus` VALUES(10, 3, 'Development', 1);
INSERT INTO `menus` VALUES(9, 0, 'Contact', 1);
INSERT INTO `menus` VALUES(84, 0, 'ramesh', 1);
INSERT INTO `menus` VALUES(85, 84, 'kumar', 1);
INSERT INTO `menus` VALUES(86, 3, 'hello', 1);
INSERT INTO `menus` VALUES(83, 2, 'llpp', 1);
INSERT INTO `menus` VALUES(82, 0, 'uuuuu', 1);

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 1. Create your own conn.php

<?php
  $server = "localhost";

  $user   =  "root"  //// you username
  $pass    =  "";       ///// your password
  $db_name = "your_databse_name";  //// put your database name here

   $con = mysql_connect($server,$user,$pass)
or die("Server not reachable");
$db = mysql_select_db($db_name,$con);
?>


Our Index.php

<?php
 require_once 'conn.php';
include 'nav_func.php';
 $errors=array();
  if(isset($_POST['ADD']))
{
 $par = addslashes(trim($_POST['par']));
 //// checking for only alphbets in php
  if(!empty($par))
  {

   if(only_alpha($par) == true)

    {
    $errors[]=insert_par(0,$par);
   }
  else{
  $errors[] ="<font color='red'>Only characters are allowed</font>";
   }
 
  }
else{
  $errors[] ="<font color='red'>Enter your desired menu name</font>";
}
 }


 if(isset($_POST['Sub']))
{

  $parent  = $_POST['cat_id'];
  $sub_cat = addslashes(trim($_POST['sub_cat']));

if(!empty($sub_cat))
  {

   if(only_alpha($sub_cat) == true)

    {
    $errors[]=insert_par($parent,$sub_cat);
    }
  else{
    $errors[] ="<font color='red'>Only characters are allowed for subcategory</font>";
   }
 
  }
else{
  $errors[] ="<font color='red'>Enter your desired subcategory name</font>";
}

}
?>
<!doctype>
<html>
  <head>
  <title>
     Dynamic Nav Menu From Database
  </title>
<script language="Javascript" type="text/javascript">

        function onlyAlphabets(e, t) {
            try {
                if (window.event) {
                    var charCode = window.event.keyCode;
                }
                else if (e) {
                    var charCode = e.which;
                }
                else { return true; }
                if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
                    return true;
                else
                    return false;
            }
            catch (err) {
                alert(err.Description);
            }
        }

    </script>
  <style>
   body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li {
  background: #555;
  display: block;
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
header{
  font-family:Baskerville;
  font-size:40px;
  margin-bottom:20px;
  background-color:red;
  color:#fff;
}
footer{

  font-family:Baskerville;
  font-size:18px;
  margin-top:100px;
  background-color:red;
  color:#fff;
}
.links{
width:600px;
  margin-top:200px;
  margin-bottom:60px;
}
#left{
float:left;
width:300px;

}
#right{
border-left:2px solid green;
}
  </style>
  </head>
  <body>
  <header>Dynamic Navigation Menubar From Database Using PHP</header>

<ul>
 
   <?php echo get_nav(); ?>
</ul>
<center>
<div class='links'>
<form method='post'>
<table id='left'>
<tr><th colspan='2' align='left'>Insert Parent Category</th></tr>
<tr><td colspan='2'><?php foreach($errors as $err){echo $err;}?></td></tr>
 <tr><td>Insert Parent Nav</td><td><input type='text' name='par' required maxlength='8' onkeypress="return onlyAlphabets(event,this);"></td></tr>
  <tr><td><input type='submit' name='ADD' value='Add Parent'></td></tr>
</table>
</form>
<form method='post'>
<table id='right'>
<tr><th colspan='2' align='left'>Insert Sub-Category</th></tr>

<?php
  echo create_nav_option();

?>

<tr>
   <td>Insert Sub Menu</td>
   <td><input type='text' name='sub_cat' required maxlength='15' onkeypress="return onlyAlphabets(event,this);"></td>
</tr>
<tr>
    <td><input type='submit' name='Sub' value='Add Sub Category'></td>
</tr>
</table>
</form>
</center>
</div>
<footer>&copy - 2014 .php4allu.blogspot.com production</footer>
</body>
</html>

2. Our nav_func.php

<?php
   function get_nav(){
      $query = "select * from menus where parent_id='0' and visible='1'";
 $result = mysql_query($query)
 or die(mysql_error());
 while($row=mysql_fetch_array($result))
 {

     echo "<li>".$row['name'];
 /////get child menu nif exists
 $get_child = "select name from menus where parent_id='".$row['id']."' and visible='1'";
 $res       = mysql_query($get_child)
 or die(mysql_error());
 $numrows = mysql_num_rows($res);
 if($numrows > 0)
 {
   echo "<ul>";
while($row=mysql_fetch_array($res))
{
    echo "<li>".$row['name']."</li>";
}
echo "</ul></li>";
 }
 else{
   echo "</li>";
 }
 }
   }

   function create_nav_option(){
      $query = "select * from menus where parent_id='0' and visible='1' and id!='1'";
      $result = mysql_query($query);
    $output = "<tr><td>Select Category</td><td><select name='cat_id'>";
     while($row=mysql_fetch_array($result))
{
     $output .="<option value='".$row['id']."'>".$row['name']."</option>";
}
$output .="</select></td>";
return $output;
   }
function insert_par($parent_id,$name){
$insert = "insert into menus (parent_id,name,visible) values('$parent_id','$name','1')";
$result = mysql_query($insert);
   if($result)
     {
     return "<font color='green'>Parent menu inserted successfully</font>";
     }
   else{
     return "<font color='red'>Something went wrong</font>";
     }
}

function only_alpha($menu){
  if(ctype_alpha($menu))
{
  return true;
}
else{
  false;
}
}


?>


LIVE DEMO

Jquery Auto Tabs (Simple And Easy)

You have a form for allowing users to register a product online, and you require the
user to enter a serial number printed on the installation discs. This number is 16 digits
long and separated across four input fields. Ideally, to speed the user along in their data
entry, as each input field is filled up, you’d like to automatically focus the next input
field until they’re finished typing the number:

<fieldset class="autotab">
<legend>Product Serial Number</legend>
<input type="text" maxlength="4" />
<input type="text" maxlength="4" />
<input type="text" maxlength="4" />
<input type="text" maxlength="4" />
</fieldset>



Inside <fieldset class="autotab">, find all the <input> elements. Use
jQuery’s .bind() method to listen for the keydown and keyup events. We exit the bound
function for a handful of keys that we want to ignore, because they aren’t meaningful
for automatically tabbing forward or backward. When an <input> element is full, based
on the maxlength attribute, we .focus() the next <input> element. Conversely, when
using the Backspace key, if an <input> element is made empty, we .focus() the previous
<input> element:


$('fieldset.autotab input').bind('keydown keyup',function(event){
// the keycode for the key evoking the event
var keyCode = event.which;
// we want to ignore the following keys:
// 9 Tab, 16 Shift, 17 Ctrl, 18 Alt, 19 Pause Break, 20 Caps Lock
// 27 Esc, 33 Page Up, 34 Page Down, 35 End, 36 Home
// 37 Left Arrow, 38 Up Arrow, 39 Right Arrow, 40 Down Arrow
// 45 Insert, 46 Forward Delete, 144 Num Lock, 145 Scroll Lock
var ignoreKeyCodes =
',9,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,144,145,';
if ( ignoreKeyCodes.indexOf(',' + keyCode + ',') > −1 ) { return; }
// we want to ignore the backspace on keydown only
// let it do its job, but otherwise don't change focus
if ( keyCode == 8 && event.type == 'keydown' ) { return; }
var $this = $(this);
var currentLength = $this.val().length;
var maximumLength = $this.attr('maxlength');
// if backspace key and there are no more characters, go back
if ( keyCode == 8 && currentLength == 0 ) {
$this.prev().focus();
}
// if we've filled up this input, go to the next
if ( currentLength == maximumLength ) {
$this.next().focus();
}
});

LIVE DEMO

Simple application using appendto() function in JQUERY

Simple application using appendto() function in JQUERY

<!doctype>
<html>
  <head>
    <title>Jquery Select All</title>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script>
$(document).ready(function(){

$('#add').click(function(event){
event.preventDefault();
var optionName = $('#newColorName').val();
var optionValue = $('#newColorValue').val();
$('<option/>').attr('value',optionValue).text(optionName).appendTo('#colors');
});

$('#remove').click(function(event){
event.preventDefault();
var $select = $('#colors');
$('option:selected',$select).remove();
});

});
</script>
</head>
<body>
<label for="colors">Colors</label>
<select id="colors" multiple="multiple">
<option>Black</option>
<option>Blue</option>
<option>Brown</option>
</select>
<button id="remove">Remove Selected Color(s)</button>
<br/>
<label for="newColorName">New Color Name</label>
<input id="newColorName" type="text" /><br/>
<label for="newColorValue">New Color Value</label>
<input id="newColorValue" type="text" /><br/>
<button id="add">Add New Color</button>


 </body>
</html>


Discussion
I use the .attr() and .text() methods to populate the <option> element:
$('<option/>').attr("value",optionValue).text(optionName).appendTo('#colors');
However, the same line could be rewritten so that the <option> element is built in one
step, without using the methods:
$('<option value="'+optionValue+'">'+optionName+'</option>').appendTo('#colors');
Concatenating all the <option> data like that would be a fraction of a millisecond faster,
but not in any way noticeable by a human. I prefer using the .attr() and .text()
methods to populate the <option> element because I think that it is more readable and
easier to debug and maintain. With the performance issue being negligible, using one
approach or the other is the developer’s preference.
What would happen with JavaScript disabled? You would need to provide a server-side
alternative that processes the button clicks, and the user would have to wait for the
resulting page reloads.

LIVE DEMO

Simple Select / Deselect checkbox in JQUERY

Simple Select / Deselect checkbox in JQUERY

Only Few Lines of codes

<!doctype>
<html>
  <head>
    Jquery Select All
  </head>
  <body>
<fieldset>
<legend>Reasons to be happy</legend>
<a class="selectAll" href="#">Select All</a>
<a class="deselectAll" href="#">Deselect All</a>
<input name="reasons" id="iwokeup" type="checkbox" value="iwokeup" />
<label for="iwokeup">I woke up</label>
<input name="reasons" id="health" type="checkbox" value="health" />
<label for="health">My health</label>
<input name="reasons" id="family" type="checkbox" value="family" />
<label for="family">My family</label>
<input name="reasons" id="sunshine" type="checkbox" value="sunshine" />
<label for="sunshine">The sun is shining</label>
</fieldset>

<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script>
$('fieldset .selectAll').click(function(event){
event.preventDefault();
// find all the checkboxes and select them
$(this).siblings('input:checkbox').attr('checked','checked');
});
// find the "Deselect All" link in a fieldset and list for the click event
$('fieldset .deselectAll').click(function(event){
event.preventDefault();
// find all the checkboxes and deselect them
$(this).siblings('input:checkbox').removeAttr('checked');
});
</script>
 </body>
</html>

LIVE DEMO

PHP stripslashes() Function

Definition and Usage

The stripslashes() function removes backslashes added by the addslashes() function.

Tip: This function can be used to clean up data retrieved from a database or from an HTML form.

<?phpfunction stripslashes_deep($value)
{
    $value = is_array($value) ?
                array_map('stripslashes_deep', $value) :
                stripslashes($value);

    return $value;
}
// Example$array = array("f\\'oo", "b\\'ar", array("fo\\'o", "b\\'ar"));$array = stripslashes_deep($array);
// Outputprint_r($array);?>

Returns:--

Array
(
    [0] => f'oo
    [1] => b'ar
    [2] => Array
        (
            [0] => fo'o
            [1] => b'ar
        )

)